Butadiene Works

ジンジャエールが飲みたいです@twitter:butadiene121

お散歩MVみたい？？なVJをオーディオリアクティブにやりたい話

お散歩MVみたい？？とは？お散歩MVではないのか？？　VJとはそもそもオーディオリアクティブなのでは？？　みたいなツッコミがあるタイトルですが、一旦スルーしてください。

こんにちは、Butadieneです。

先日、draw(tokyo); #4にVJとして出演させていただきました。

現地で映像を取ってXに上げてくれた方のポストです。

すごく楽しいイベントでした！！　来てくださった方、見てくださった方、ありがとうございました！ また、Audio担当として最高のライブセットをしてくださったyoxtellarさん、ありがとうございました！！

当日の映像のアーカイブはこちらになります。

現地映像

(タイムスタンプの押してある、1時間33分からが自分のパフォーマンスでうｓ．)

youtu.be

画面の録画＋録音

www.youtube.com

今回のVJでは、音に合わせて動画をいっぱい切り替えて、エフェクトをかけてくれるソフトを作りました。 この記事では、ソフトを作る経緯、コンセプトなどの話を書こうと思っています。よろしくお願いします。

出演とコンセプト決定の経緯について

前回のdraw（draw(tokyo); #2）について

実は、前々回のdrawイベント、draw(tokyo); #2（以降、前回のdrawと呼びます。）にも出演させていただいていまして、そのときもソフトを自作してVJをさせていただきました。具体的には、自分で撮った写真数千枚を学習にぶち込んで（CVAE）、リアルタイム推論して画像生成するVJソフトになります。

そのときの記事はこちらになります。よろしければこちらもご覧ください（長いですが）。

butadiene.hatenablog.com

このツール&パフォーマンスは、試みの面白さという点ではそれなりにうまくいったと思っているのですが、映像の音に対する応答性（や操作性）という点では課題が残るものだったかなと思っていました。 （また、ツール作成に必要なコストが多すぎたことと、完全にワンオフのセットになってしまったのも反省点でした。）

コンセプトの決定について

今回、2026年の3月頭に出演の話をいただきまして、コンセプトを練り始めました。 draw(tokyo);は毎度すごい人が出演するので、自分のShaderやグラフィックの知識だけでは見劣りするものしか作れないのは、はじめからわかっていました（この辺りの発想は前回出演時と一緒です。）。また、自分が4月から就職するため、前回のdrawよりも制作にかけられる時間が大幅に減ってしまうということもわかっていました。

この経緯や前回のdrawの反省も踏まえ、今回のVJの軸を

  • ほかのつよつよVJとなんとかして差別化する。
  • 製作コストを比較的下げる。できれば汎用的なVJツールにする。
  • 映像と音の同期具合に焦点を当てる。

としました。これは、出演のお話をいただいて割とすぐに策定しました。

コンセプトをもとにしたVJツールのアイデア

コンセプトを満たすためのアイデア

コンセプトが決定したら、次はこれを満たすアイデアについて考える必要があります。

差別化について

まず、差別化についてですが、前回のdrawに引き続き、写真関係をうまく使えればな、という考えが浮かびました。しかし、写真は静止画であり、動きません。前回のdrawのように機械学習が使えればよいのですが、それを実装している時間はなさそうです。そこで、今回は自分がこれまで撮ってきた動画をたくさん使ってみることにしました。動画であれば最初から動いているので、機械学習などを使って強引に動いている画にする必要はありません。

自分の撮った動画をたくさん並べて切り替えて、お散歩MVみたいなVJができたらな〜と、最初は考えていました。

お散歩MVとは

scrapbox.io

こういうのを指すそうです。 あるいは、走馬灯MVと呼ばれるものを目指していたのかもしれません。

ただ、結論を言うと、「最終的にこれらとは全く別物」になったので、そこだけご注意くださいませ...。

製作コストについて

次に、製作コストです。これについては、制作ソフトにUnityを使用すること、UnityをMCPサーバー経由でClaude Codeから叩くことで削減を図ります。なぜUnity？ということですが、前回のdrawでC++でVJソフトを作って、本当に嫌な目にあったからですね（PCのクラッシュやライブラリの管理等）。今回はC++よりはマシだろということで、Unityを採用しました（ある程度使い勝手がわかるという理由もあります）。

映像と音の同期について

映像と音の同期についてですが、自分はVJの経験がほとんどないので（現場でのVJは前回のdrawのみ）、手動でかっこよく同期させていくことは難しそうです。すると、Audio側からなんらかの信号を受け取って、それに合わせて映像を動かしたいです。一般には、音の入力を受け取ってFFTなどをして、低音域や高音域で分けて信号として扱うと思います。これによって、低音が鳴ると映像が震える、高音が鳴るとRGBシフトする、といった挙動が可能になります。しかし、音の信号は音量等の関係で、VJ側で安定して扱うのは難しい印象があります。というか、少なくとも私はあまりうまくいきませんでした。特に、「音量がある閾値を超えたときにトリガーとなる」という挙動の安定性の確保が難しかったです。

DJさんとのパフォーマンスであれば、これでなんとかする、あるいはBPMをもとにいろいろ工夫するしかないのですが、今回はライブセットで音を鳴らすyoxtellarさんがAudioを担当されていたので、根本的な解決が可能でした。それが、「MIDI信号を直接受け取る」です。

MIDI信号をAudio側から直接受け取る

VJ側の理想としては、Audio側から各音ごとに信号が送られてくることです。例えば、キックが鳴ったときに「キックが鳴りましたよ」という信号が送られてくる、ベースが鳴ったときに「ベースが鳴りましたよ」という信号が送られてくる、といった感じです。こうすれば、キックが鳴ったときに映像が切り替わる、ベースが鳴っているときだけ画面がゆがむ、といった演出が容易に実現できます。

今回、yoxtellarさんはAbletonで音を鳴らしていたのですが、Abletonの内部ではMIDI信号が生成されて、それに従って音が鳴っているそうです。そこで、Abletonの内部で生成され音を鳴らすトリガーになっていたMIDIをもとに映像を出力するソフトを作ってもらい、その映像を受け取ることにしました。 この辺りはyoxtellarさんが詳しく解説を書かれるそうなので参照してもらえればと思うのですが、結果的に、自分はこのような画像をHDMIを通じて受け取っていました。

yoxtellarさんから送られてくる映像（MIDI信号を映像にしたもの）

キックが鳴ると、上段左から15番目のマスが光る、breakbeatsに合わせて下段左から6番目のマスが光る、上段左から13番目のマスの明るさでBPMを伝える、などをしています（明度を256段階で数値化して送っています）。

このMIDI信号を意味する映像と、実際に鳴っている音（をフーリエ変換したもの）を入力として扱えるようにしました。

作るソフトの内容に関するまとめ

以上の内容を踏まえて、今回作るVJソフトの大まかな仕様を策定しました。

  • Unity製
  • 自分の撮った映像をたくさん使う。
  • Audio側から音の入力と「映像を経由した直接のMIDI信号」を受け取り、映像の切り替えやエフェクトに反映させる。

この仕様が固まったのが、4月中頃だったと思います。

仕様が決まったので、VJソフトを作っていきます。

映像をそろえる

VJツールで使用する映像を用意します。

ところで今回のパフォーマンスではAudio側から来たMIDI信号をトリガーにして映像を切り替えたりすることを想定するのですが、キックなどは1秒間に2回鳴ったりするので、キックを映像切り替えのトリガーにした場合、1秒間に2回の映像切り替えが発生します。例えばずっとキックを映像切り替えのトリガーにしていると、今回のパフォーマンス時間は30分なので、単純計算で3000〜4000回の映像の切り替えが発生することになります。すると、映像が数十個では、同じ映像が一度のパフォーマンスの中で何度も繰り返されることになってしまいます。そこで、大量の映像を用意することでこの問題を解決します。今まで写真を撮りに行くついでに撮ったやつと、今年（2026年）の3月に北海道に撮影に行ったものなどをまとめて、約1100本の映像（各動画、5秒から5分程度の尺）を用意しました。これらすべての動画に

  • 選別
    • 短すぎるものや人の顔が映りこんでいるもの、手ぶれがひどいものを取り除く。
  • トリミング
    • 使えそうな箇所があるが、ぶれている箇所や人が映っている箇所もある動画を、トリミングによって整える。
  • タグ付け
    • 夜、雪、右に動く、右にパン、などのタグを手動でつける。
  • 音声データの削除

という処理を行います。ただし、1100本の動画すべてを毎回トリミングソフトを開けてトリミングして音を削除して...などやっていたら時間がかかりすぎます。

そこで、この処理を（手動とはいえ）効率的に行えるように、トリミングソフトを作成しました。Webアプリケーションになっています。

映像トリミング・保存ソフト。左側から映像を選択し、トリミング等、タグ付け等して保存する。

保存された動画の管理画面

このソフトを使用して、最終的に800本ほどのタグのついた動画を揃えることができました！ タグは20種類ほど用意しています。

VJシステムを作る

いよいよUnityを用いて、VJシステムを作っていきます。

具体的な仕様

いろいろ考慮したうえで、今回のVJシステムは以下のような形にしました。

  • 動画を6レイヤーまで重ねられる。
    • レイヤーの重ね方は加算や減算、焼きこみなど、広く対応させる。
  • 各レイヤーに8個のエフェクトをつけられる。
    • エフェクトは自由に入れ替えられる。
      • エフェクトはShaderで作成する。ShaderのインプットにAudio関係の信号やパラメーターを入れられるようにして、それを規格化する。
    • エフェクトは音やMIDI信号をトリガーにできる。
  • 各レイヤーでは映像を選択できる。
  • 各レイヤーで、Audioをトリガーにして自動で映像を切り替えられるようにする。
  • 各レイヤーでプリセット登録ができる。
  • 最終出力に、バックバッファを使用したエフェクト等が作成できる。

UIはこんな感じです。

今回作成したVJソフトのUI
UIの簡単な概説

これによって、こんな感じの出力が出ます。

出力画像

MIDI信号や音の受け取り方の例（6月6日 21時追記）

映像の切り替えについて

映像の切り替えはこんな感じで、音やMIDI入力（Chと表記されています）といった信号を選択します。

映像の切り替えにおける信号選択のやり方

例えば下の画像の場合、キックが4回なると、映像を切り替えます。切り替える映像はfactoriesタグが付いている映像、もしくはcarsタグがついている映像です。

映像の切り替えトリガー選択の例

Ch14がキックであるということはここからわかります。

MIDI信号の出力画面

エフェクトへのアタッチについて

エフェクトはShaderで書くのですが、各Shaderで次のようなパラメーターが使用できるようになっています。

Shaderで使用できる変数のリスト

IntとはIntgerのことで、加算されるパラメーターです。例えば、トリガーが引かれるたびに1ずつ増えていくような変数を各ChやAudioごとに用意しています。これによって、音が鳴るたびに座標が進む、といった表現が可能になります。

そして、これを用いて例えば次のようなRGBシフトShaderを書きます。

RGBシフトShader

そして、以下のようにエフェクトに信号をセットすることで、各エフェクトがMIDI信号や音の入力を参照するようになります。 これによってキックに影響されるRGBシフトもスネアに影響されるRGBシフトも作成できるわけです。

エフェクトに信号をセット

一々セットアップするのは本当に面倒なので、プリセットとして登録できるようにしています。

その他

エフェクトやレイヤーのオンオフ、レイヤーの透明度などがMIDIコンに対応しています（AKAI APC mini）。

他にもいろいろマスク機能やポストエフェクト機能があったりします（マスクに関しては、今回のパフォーマンスでは使っていませんが）。

この仕様に沿ってVJソフトを作りました。AIの力も借りたのでかなり速いペースで作れて、5月頭には大まかにできていました。そこからは、ひたすらyoxtellarさんと練習しながら、バグ取りやプリセットの作成をしていました。

先ほどの話に戻るのですが、映像でMIDI信号を送ると、Discordで画面共有するだけでリモート練習ができるんですよね。マジで最高です。

技術的な話

今回は前回のdrawと違って、技術的に凝ったことはあまりしていないのですが、一番ボトルネックだったのは映像の切り替え速度です。 breakbeatsなどを映像切り替えのトリガーとすると、映像を1秒間に4回ほど切り替える必要が出てくる場面があります。これを2レイヤー、3レイヤーで同時に行うと、かなりの速度で映像の読み込みを行わなければいけません。適当に動画をロードしまくるとNVIDIA / MediaFoundationのドライバごとクラッシュするので、

  • 各レイヤーで動画プレイヤーを2系統持ち、片方で再生しながらもう片方で次の動画を準備する方式にする
  • シーン全体で同時に走る動画ロードを1件に制限し、動画の自動切換えが複数レイヤーで同時にトリガーしても直列化する
  • 動画のエンコーディングをConstrained Baseline H.264 + bt709に統一して、ドライバが踏む未定義パスを排除する
  • 万が一フリーズしても2秒で自動復帰するウォッチドッグを入れる

といった工夫をしています。

ただし、それでも3レイヤー同時が限界だったりするので、アクティブではないレイヤーについては自動切換えをオフにしたりしていました。そしてここを手動にしたせいで、本番何回かやらかしました（自動切換えをオンにし忘れたり）。運用でカバーはだめですね...。

プリセットの解説

実際に本番で使用したプリセットを紹介していきます。

クレジットと工場背景

https://youtu.be/z7HHw9OH_nE?si=tfAA0C234ULpE5Z9&t=16

工場系の動画をゆっくり切り替えながら、クレジットと動画両方にRGBシフトやグリッチをかけて遊んでいます。Audio syncへのこだわりがあることに気づいてもらえたら良いな、と思うパートにしました。

進むやつ

https://youtu.be/z7HHw9OH_nE?si=rK-hbPMjSHSNaZlQ&t=196

横に進む系の動画をひたすら切り替えるパートです。グリッチやフラッシュを音に合わせるのに加えて、（確か）Acid bassの信号に合わせて動画が速く進むようにしています。また、ブレイクビーツが4回ぐらい鳴ると（後半は2回）動画が切り替わるようにしていて、複数のAudioの信号でわかりやすい演出を心がけました。実際、まあいい感じに音に合っていたと思います。 右に進むやつと左に進むやつは別のプリセットなのですが、ここの切り替えをミスってることに気づかず、10秒ぐらい真っ暗にしています。めちゃくちゃ凹みました。

雪景色背景に工場と花を焼きこみ

https://youtu.be/z7HHw9OH_nE?si=5tCnOL_NiwAz0LjK&t=356

雪景色に工場系の映像を焼きこむ、前半のハイライトだったはずなのですが、工場系の映像側の自動切換えをオンにし忘れていて、そしてそれに本番中一切気づかず←！？！？！？ずっと風車が上にのっかっているだけの映像になりました。あとでアーカイブを見て泣きましたね...。工場はブレイクビーツでかっこよく切り替わっていく予定でした。

そのあとは花の動画のほうでも焼きこみを重ねて、だんだんバックバッファとかを強めにしていっています。

花の後にもう一回工場の焼きこみに戻るんですが、そのときは切り替えをちゃんとセットしているみたいです？？？

（本来やりたかったのはこれ https://youtu.be/z7HHw9OH_nE?si=910BOLWoe2gEsC8E&t=551 ）

高速道路に工場の焼きこみ

https://youtu.be/z7HHw9OH_nE?si=ZYIErtVSOtoz7ZGE&t=609

高速道路パートに入ります。高速道路は5分ぐらいの動画を数本用意していたので、かなりゆっくりと（BPM基準で、32回ビートが鳴るたびに切り替え？）切り替えています。そして、その上に先ほど同様に工場系の動画を焼きこみで重ねます。ただ、夜の高速道路は暗いので、めちゃくちゃカラーシフトをかけることで明るさを確保します。 また、工場の動画を長いこと引っぱりすぎなので、ストライプ系のエフェクトなども重ねます。

レイマーチングエフェクトを入れる

https://youtu.be/z7HHw9OH_nE?si=7Mb9bmoicKlI6GYa&t=735

レイマーチング系のエフェクトを入れます。ただし、これは「ある動画にレイマーチングのShaderを用いたエフェクトがかかった」形です。今回の場合は、街中を走る系の動画をモノクロにした動画にレイマーチングエフェクトを重ねていました。ほとんど気づかれないとは思うのですが...。

わかりやすく示すために、今回作成したレイマーチングエフェクトのオンオフの様子を下に示します。

レイマーチングエフェクトオンオフの様子

仕組みとしては、「レイがヒットしたとき、レイを発射したUVにある画像の色を貼る」です。これだと、レイがヒットしたところだけマスクされるような画像になりそうですが、レイを反射させることで、かなりいい感じの動きをしてくれるようになりました。ポストエフェクトのようにレイマーチングを動画のエフェクトとして使えるのは、かなり楽しかったです。（レイマーチング用に特別なギミックを入れずにRGBをシフトをShaderでやるのと同じノリでエフェクトが作成できるので、仕組み的にも楽でした。）

また、今回はキューブを並べた系のレイマーチングのエフェクトも使用しました。これです。

結論から言うと、今回こいつのコントロールに失敗しています。本当に悲しい...。 オーディオの大きさに合わせて回転するようにしたのですが、音が常に大きくインプットされていたせいで、ただひたすら高速で回転する物体になっていました。もっと低音とかMIDI信号とかで回転するようにすれば、かなり音に対してメリハリのあるエフェクトになった（というか練習ではなっていた）ので、めちゃくちゃ誤算です。プレイ中にインプットをLowに切り替えるだけでよかったのに、どうしてやらなかったのか...。

アウトライン系

https://youtu.be/z7HHw9OH_nE?si=72-Qk8aqhGKFxv4D&t=835

高速道路に少し戻した後、アウトラインを出します。もともとRGBとかで画面がかなりぐちゃぐちゃ気味だったので、割と良い選択肢だったように思っています。 また、アウトラインをタイルで分割して揺らすのもかなり楽しかったです。

アウトライン系とレイマーチングエフェクトに花を重ねる

https://youtu.be/z7HHw9OH_nE?si=nyKXYpiA_NIuYHwy&t=964

今回の最大のやらかしパートだと思います？？ 先ほど作成したアウトラインの裏にレイマーチングのエフェクトを重ね、さらにその上から花をのっけるサビパートのつもりだったのですが、ひたすら回転するだけのレイマーチングが、映像から視覚的に音を感じるのをかなり邪魔していたようにアーカイブを見ていて思いました。先ほど述べたように、レイマーチングエフェクトがやばい勢いで回転し始めたのが原因です。さらにめちゃくちゃ点灯するので、見ている人もかなり疲れさせてしまったのかな...。と思っています。アーカイブを見て頭抱えていました。練習だとメリハリと情報量が両立した良いパートのはずだったのに...。

夜の街を追加

https://youtu.be/z7HHw9OH_nE?si=Jv5paxovHgetwe76&t=1104

テンポが上がってくるにつれて、レイマーチングを、キックに合わせてRGBシフトする夜の街に切り替えていきました。ここのパートは、見ていて気持ちいいパートになったんじゃないかなと思います。

花のアウトラインを夜に乗算する

https://youtu.be/z7HHw9OH_nE?si=ytPotfv3EFuC9d2q&t=1171

またしてもやらかしパートです。RGBでド派手に動いている夜の街に、アウトラインだけ表示した花の動画を乗算します。 個人的にはかっこよくてお気に入りパートだったんですが、花の線をどれぐらい太くするかで、直前までかなり迷いました。細くしすぎると暗くて見えないし、太いと花であることがあまりわかりません。そして、会場自体のアーカイブを見ていると、暗すぎたかな...。と思いました。おそらく、この線が花であることを（この時点で）認識していた人って、どれぐらいいたんだろう...。という感じです。

現地映像で見ると、なかなかに暗い...。

https://youtu.be/cfQq5e2q6S4?si=fclB8LEeZxNjyCiL&t=6800

そのあとのバックバッファや、波状に花を音に合わせてゆがませるパートなどはかなりうまくいったと思うのですが、いかんせん全般的に暗すぎたと思います、はい...。

花のアウトラインを昼に加算する

https://youtu.be/z7HHw9OH_nE?si=kSUhmvo3h9lMDWKy&t=1360

動画を白飛びさせたあと、花を乗算から「加算」にします。これは何人かの方にすごく気に入ってもらえて、うれしかったです。夜のところもそうなのですが、動画のアウトラインを別の動画に重ねるの、多分面白いのでいろいろやってみたいです。

花のアウトラインをタイルでぐちゃぐちゃにしているパートも当初予定になかったのですが、入れて正解でした。

タイルシャッフルとタイルマスク

https://youtu.be/z7HHw9OH_nE?si=LKIy4XfyZDh9ZgAR&t=1413

タイル状にマスクされるstaticな動画の切り替えを、タイル状にシャッフルされる工場や道路の動画の切り替えに重ねる（さらにブラーなどのエフェクトをかける）パートです。

グリッチがスネアやキックでかかったり、ブレイクビーツでstatic側の動画が切り替わったり、キックで工場側の動画が切り替わったりと、MIDI信号の良さが一番引き出せたパートかなあと思います。

トーラスレイマーチングマスク

トーラスでマスクしてます。

https://youtu.be/z7HHw9OH_nE?si=I3EgSCpLgoTnSTsS&t=1521

実はここで時間を完全に余らせまして、クローズをミスりました...。が、ここからは映像を落ち着かせていくパートになっています。最終的にトーラスのレイマーチングとグリッチのパートになります。トーラスのレイマーチングは、マスクみたいな役割を果たしていたりします。

鳥とクレジット

https://youtu.be/z7HHw9OH_nE?si=B05FLex6dgjCkrz1&t=1699

最後は鳥系の動画でまとめて、クレジットを最後に出してクローズです。思いつきでバックバッファをかけたら、かなりいい感じになってうれしかったです。

本番の感想

まずは最高の音を出してくださったyoxtellarさん、本当にありがとうございました。マジでよかったです... そして、たくさんの人に見てもらえてとてもうれしいです。ありがとうございます。

自分の映像の感想としては、クラッシュしなくてよかったね、最低限やりたいことはできた、という気持ちはある一方で、見せられなかったパートややらかしたパートが、さすがにちょっと多いかな、という気もしています。リベンジできるならしたい、切実に。

プロダクトとしての感想

本番でオペミスりまくった話はありますが、それはそれとして、かなり好みのものができたかなと思います。 自分の撮ってきた動画が音に合わせてきれいに動いてくれるのは、やはり気持ちいいですね。

それから、数は正義だと思いました。とにかく素材の数を増やすこと、エフェクトの数を増やすこと。これが飽きのこない画面を作ってくれるのかなあと思いました。（ただ、VJってもう少し繰り返しを意図的に増やしたほうがいいのかな？とも思ったり。どうなんでしょうか。VJ素人すぎてわからない。）

映像に関しては、初手の方針としてはお散歩MVをしたい、みたいな話でしたが、エフェクトをかけすぎて、お散歩MVの域を外れてしまったような感じがします。まあ、それはそれでの気持ちです。

アウトラインを重ねる話や、グリッチマシマシの映像を上から焼きこむなど、あまり見たことない景色（既出のものも多いのでしょうが、自分的にはあまり見たことなかったです。）が見えたのはうれしかったです。

ツールとしての反省点は、オペレーションミスが起きやすいものにしてしまったところでしょうか。わかりやすいUIを心がけたつもりなのですが、本番で起こしたミスの数を前には、何も言い訳ができません。 もう少しわかりやすいツールにしようと思います。

最後に

いろいろありますが、とても素敵な体験をさせていただけたと思います！ 良すぎな音を出してくださったyoxtellarさん、毎度素晴らしいオペレーションをしてくださる運営の方、見てくださった皆さん、感想をくださった方々（めちゃ嬉しい）、本当にありがとうございました！！

またオーディオリアクティブなVisualで遊んでいきたいと思います。ではでは。

これまで作成したGLSLライブコーディング・レイマーチング・VJ関係の資料についてのまとめ

こんにちは、butadieneです。これまで色々なGLSLライブコーディング・レイマーチング関係の資料を作ってきたのですが、媒体が散逸しているのでまとめてみました。特に新規の資料はありません。

Fanbox

なんか昔やってました。Shader関係の記事とかは全部無料で見れます。

一からGLSL書くスタイルでライブコーディングでVJをやってみた感想

一からGLSL書くスタイルでライブコーディングをやる際の構成について、どうしてその構成にしたのかとか色々書いてあります。

butadiene.fanbox.cc

つぶやきGLSL＆Gaming Cube解説？（下書き）

つぶやきGLSLのClassicスタイルについての入門書です。Classicスタイルでレイマーチングを試みた話も書いてあります。

butadiene.fanbox.cc

ライブコーディング用Shader"The floor of the balls"制作記

むかーしライブコーディングをした際の制作記です。あんまりクォリティ高いものではないですが、まあ一応...。

butadiene.fanbox.cc

Google Drive

こういうのが一番見つけにくいですよね、すいません。。。

球を出したあとのレイマーチング入門

たぶん一番の自信作です。レイマーチングって球を出したあとが大変ですよね。何をすれば作品になるんだ...って途方にくれがちな気がする。そういう人に向けた資料です。

VRChatにおけるShaderを用いたリアルタイム空間演出

Polygon lounge2というイベントに登壇させていただいたときの資料になります。 https://polygonlounge-2.peatix.com/view

VRChatでVRVJみたいなことやりたいよね、と試行錯誤していた頃の話です。かなり前の資料なので、役に立たないと思います。昔のVRChatの空間演出ってこんなかんじだったんだなあ、ぐらいに眺めてください。

drive.google.com

Booth

PDFが1件あります。

VRChatでどうしても レイマーチングをしたいあなたへ贈る本

無料です。

タイトル通り、VRChatでレイマーチングしたい人に向けて書いた技術書籍です。Unity上でレイマーチングをしたい人とかにも使える内容になっていると思います。 逆に、VRChat関連の情報に関しては役に立たなくなっているかもしれません（5年前に書いたので、現在のVRChatとは全然事情が違う）がご了承ください。

あと、19ページぐらいから、Unity等でレイマーチングやShader芸をしたい人向けのリンク集やワークフローをまとめてあるので、そちらも良ければ参考にしてみてください。

booth.pm

Youtube

資料と呼べるかどうか怪しいですが、一応

Shader ライブコーディング実況

何回かやってますが、かろうじて見るに値するのはこれぐらいだと思います。

www.youtube.com

2時間ぐらいかけて、完全にノープランからレイマーチングの作品を一つ作っています。作品自体そんなに難しい内容ではなく、私もコーディングが早い方ではないので、「こうやって作品って作ればいいんだ」という指針になる可能性があります。（神々の遊び、みたいなのを見たい人はShader show downとか見てください。）

番外編 おこたシェーダー

自分のチャンネルではないのですが、一応出演させてもらって、資料として有益だと思うのでここに。

3人でShaderライブコーディングをして、それを解説の方が解説するという形式です。解説もShaderとかあんまり触ったことない人を意識していて、わかりやすいと思うので良ければ。

www.youtube.com

はてなブログ

このブログですね。

UnityでShaderを使ってカラフルなメタボール作ってみる。

人生で一番最初に書いた技術記事かな。懐かしい。今見ると粗だけですね...。

butadiene.hatenablog.com

自分の撮った写真数千枚を使って、リアルタイムに画像を生成してくれるVJツールを作った話

写真と機械学習を使ったリアルタイム推論VJツールをC++で自作したときの作成記です。結構熱量が入ってます。

あと、最初の方にGLSLを使ったVJについての概論をちょびっと書いてあります。

butadiene.hatenablog.com

終わりに

思った以上にバラバラですね...。自分でも忘れてる資料とかあるかもしれないので、あったら追加していきます。

あと、Shadertoy・NEORTのアカウント等は資料ではなく作品集かなあと思ったので一旦除いてます。

ではまた。

自分の撮った写真数千枚を使って、リアルタイムに画像を生成してくれるVJツールを作った話

はじめに

こんにちは、Butadieneです。

先日、「オーディオとビジュアルのパフォーマンスを楽しむリアルイベント」draw(tokyo); #2にVJとして出演してきました。

function-draw.com

今回のライブでは、らくとあいすさん（https://x.com/lactoice251）のGLSL Soundに合わせてVJを行いました。

当日の映像アーカイブです。

youtu.be

映し出されてるコードは、らくとあいすさんのGLSL Soundのコードです！最高

当日の会場アーカイブはこちらです。

youtu.be

沢山の人が見てくださいました！ありがとうございます。

その際、タイトルにもあるように、「自分の撮った写真数千枚を使ってリアルタイムに画像を生成してくれるVJツール」GenerativePhotosBreak（タイトルは仮です）を自作し、そのツールを用いてパフォーマンスをしてきました。

今回のブログでは、drawに出演するにあたって、具体的にどのようなモチベーションで出演し、どのような動機でこのツールを作りはじめ、どのようなコンセプトでツールを作成、パフォーマンスしたかを記していこうかなと思います。よろしくお願いします。

出演に至る経緯

このお話をいただいたのは2024年の10月ごろでした。私的な話ですが、大学院に入ってからというものの、Computer Graphicsをあまり触らなくなっていました。なので今回の話はありがたいけど流石にスルーかなあと思っていました。draw(tokyo)、すごいイベントなのであんまりしょぼいパフォーマンスできないですし...。

ところが、返事を考えてる間にらくとあいすさんは出演確定したと言われまして。半分ぐらい退路を断たれました。せっかくだしらくとあいすさん出るなら自分も出てみるかあと割と軽い気持ちでOKしました。4か月ぐらいあるし、ライブコーディングの練習していけばそれっぽくなるやろ...とか考えていました。

（もともとGLSL Shaderライブコーディングのビジュアルパフォーマンスとしてdraw側からはオファーされていたと思います。）

www.youtube.com はるか昔にらくとあいすさんとライブコーディングセッションした時の動画（左側が自分（GLSL Shader ライブコーディング）、右側がらくとあいすさん（Sonic Piによるサウンドライブコーディング））

ツールを作り始めた経緯

動機

11月ごろに主演者のリストが（出演者全員に）共有されました。それを見て顔面蒼白になりました。共演者の人々がやばすぎる。誰も彼も名をはせていらっしゃる方ばかりです。数年間CGから離れていた自分が2か月ライブコーディングの練習をしたところで何とかなるような場にはならないということが容易に想像がつきました。最悪すぎる。

やばいやばいと色々思い悩んだのですが、最終的に、新しいVJツールを作成することを決めました。

なぜ新しいツールなのか

自分自身はVJの経験がほとんどありませんでした。というか無いですね。ライブコーディングVJをオンラインで何回かやったぐらいです。箱で立ったことはありません。そのため普通に考えると、やったことのあるGLSLライブコーディングVJを、練習を繰り返して練度を高めていくという話になります。しかし、共演者の方々のGLSLライブコーディングをやりそうな人々のレベルが高すぎる。 ちょうどその頃SessionsというイベントにてGLSL のShader Jamというショーがあったのですが、これにはついていけないなあと正直思った次第です。 www.youtube.com SessionsのShader Jamのライブ映像

GLSLでVJをするとしたら？

GLSLのShader Jamや、これまで自分がやったことあるShaderライブコーディングは、どれも1からShaderを書くスタイルでした。つまり、パフォーマンスをやり始めたときによーいどんをして、何もないところにShaderコードを書いていきます。

www.youtube.com 1からShaderを書くスタイルのわかりやすい動画（自分も出演させてもらっています。）

先ほど述べたように、Sessionsを見て感じたのは、自分ではこの方式ではdrawの要求水準についていけないだろうという推測でした。

1から書くスタイルが厳しいのであれば、あらかじめShaderをたくさん書いていって、それを編集したり切り替えたりしながらVJをするという方法もあります。（比較的メジャーな方法だと思います。）

www.youtube.com

RenardさんによるGLSLをもともとある程度用意して行うパフォーマンス（画像などの素材も使っているっぽい？？けど）。良すぎ。

この方式だとクォリティは上がるのですが、実はその分地力の差が出てしまいます。特にVJの文脈で顕著なのは素材数です。 ライブコーディングやジェネ系のVJかどうかにかかわらず、VJでは素材の数が非常に重要です。

1から書くスタイルだと「0からパフォーマンス時間内に完成させる」という制約があるので、音楽の最初から最後で一つのかっこいい絵を完成させる、みたいなパフォーマンスになります。そのため、素材数はそこまで意識する必要がないのですよね。（断っておきますが、1から書くスタイルをやりつつ、すごい素材の数作りながらライブする人もいます。1から書くスタイルをやってる人全員がそういう文脈に乗っているというわけでは決してないです。）

ですが、あらかじめ準備する形式だと、普通のVJにより近づくので、たくさんのVJ素材をGLSLで作らなくてはいけません。ここに、GLSLを書く力の地力の差が出ます。地力がないと、いろいろなバリエーションのShaderを書くのが難しいのです。結局、GLSLの自力がない自分にはどの方式もなかなか厳しいのですよね。

GLSLと他の方式を組み合わせる

ところで、GLSLと他のVJの方式を組み合わせるという方式が存在します。これも比較的よく見る手法です。

他にも、動画などのVJ素材をたくさん作り、それにリアルタイムでGLSLでライブコーディングをしながらエフェクトを掛けていくという方法もあります。

MVですが、例えばこんな感じです。

youtu.be これは、動画素材？にGLSLでかっこいいエフェクトをかけてますね。めちゃ良い。

これならなんとかなりそうと一瞬思ったのですが、今度は別の問題が出てきます。

私、動画素材ほとんど作ったことないが？

drawで提示されている時間は40分、これをもたせる素材を今から作るのは難しい...。

あれ？最近写真をたくさん撮っていたな？

大量の写真とGLSLを組み合わせる

また私事なのですが、大学院に入った頃から、スキマ時間にできる創作活動？として、写真をぽちぽち撮り始めてました（そんなに本格的ではないですが）。3~4年ほどやっているのですが、その間に撮りためた写真の枚数が結構な量になっていました。これを使ってエフェクトをGLSLでかければよいのでは？？と思いつきます。

しかし、既存のGLSLライブコーディングツールで、数千枚の写真を前提にしているものはありません（たぶん？）。またこれについては後述するのですが、写真は静止画であり、動画ではありません。動画素材ではない方式でGLSL VJをするのであれば、もうある程度は新規で開発するしかないだろうということで覚悟を決めました。12月下旬ごろの話です。

新しいツールのコンセプト

これまでの話を踏まえ、以下の条件を満たすツールを開発することにしました。

  1. ジェネラティブな文脈に沿うものにする。- これはdraw()というイベント側の要請です。例えば、ただ写真をスライドショーする、みたいなそういうものは認められないはずです。なんらかの技術的工夫（GLSLで自作エフェクトをかける等）を求められます。

  2. 自分の数千枚の写真を使う。- これによって素材数の確保と、他の凄すぎる共演者たちの被りを防ぎます。全て自分が撮った写真を使うので、最低限の独自性が確保できるはずです。独自性が確保できると、強すぎる人たちと同じ土俵に立つことをある程度避けられます。嬉しい。

  3. 写真をそのまま使うのではなく、なんとかして動かす。- 動画で色々撮っておけばよかったなあと本当に後悔したのですが、結局のところ自分の手元には写真=静止画しかありません。静止画ベースのVJってたぶんよっぽどうまくないと難しいんですよね（知らないけど）。なので、写真をなんとかして動く画面に持っていきます。

以上のコンセプトを眺めて、ツールの構想を練ってみます。

そうだ！最近流行りの機械学習とかいうやつを使えば、自分の写真と写真の間をうまく補完できるのでは？

機械学習なんて触ったことないけど。

その思いつきから、機械学習の実装からお勉強をはじめ、ChatGPTと共演者のらくとあいすさんに助けてもらいながらめちゃくちゃ頑張りました。頑張ったというか、地面で横転して暴れまわってた気持ちです。色々やってみてはだめ、やってみてはだめを繰り返したのですが、その流れは割愛します。

結局去年の年末からほぼすべての時間を費やしたと思います。学生特権...。（研究がホンマにやばいことになっているが、頑張って取り返します。）完成したツールは次のような仕組み、構成になっています。

新しいツール、GenerativePhotosBreak（仮タイトル）の解説

簡潔に述べると、

7000枚の写真をCVAEで学習させて、リアルタイム推論させる。ラベル値を変更したり、音に合わせて潜在空間での位置をオフセットすることにより、リアルタイムにある程度狙った画像や音に合わせた画像が出力される。潜在空間の中での探索の仕方を色々工夫する。最後にGLSLで軽くエフェクトをかける、です。

根幹となるアルゴリズム

CVAE（Conditional Variational AutoEncoder）というアルゴリズムを使いました。自分は機械学習全然わからないので、なんとか白目になりながら実装したレベルで、他人にうまく説明できるほどの知識は持っていません。

CVAE自体は VAE（Variational AutoEncoder）の改良版で、2014年に発表されています。

詳しくはこの辺や、もと論文を参考にしてください。。。

qiita.com

VAE自体は、画像を大量に学習して、それを連続的な画像を生成するモデルです。上の記事では、学習されたVAEを使って、1という画像から0という画像に変化する動画を生成したりしていますね。

自分の中の理解で間違っていたら申し訳ないのですが、VAEは「空間」（潜在空間と言うそうです。）を作るものだと思っています。学習元の大量の写真が持つ情報を押し込んだ「空間」作ります。

下にあるのは自分のツールの出力を使って作ったイメージ図ですが、「空間」の各点ごとに対応する画像が生成できるのがVAEです。そして、点と点の間を移動しながら画像を出力していけば、写真と写真の間を連続的に変化する動画みたいなのが作られるわけです。

潜在空間を移動して画像を出力していくイメージ図（簡単のため、2次元空間の移動として表現してます）

このイメージ図では2次元の潜在空間の中を移動していますが、今回のツールでは2048次元の潜在空間の中を移動しています。

これに加えて、写真に「ラベル」をつけて学習させたのが、CVAEです。これによって、画像の出力精度を上げることができるらしいです。例えば、「工場」のラベルをつけた写真を学習させたあと、その写真に近い画像を生成する際、「工場」のラベルを入力しながら画像を生成すると精度高く画像を生成できるそうです。

CVAEを選んだ理由

今回自分がVAEではなくCVAEを採用した理由は、出力精度ではなく「調整できるパラメーター」を確保したかったからです。

仮にVAEを使ってVJツールを作ったとしましょう。そのままでは、ただ写真と写真の間をスムーズに移動するだけのツールになってしまいます。しかし、CVAEを使えば、入力ラベルを調整しながら画像を生成する事が可能です。

今回作ったツールを使って、以下に例を示します。

今回は、写真に対して、「工場っぽいやつ」「花っぽいやつ」「夜っぽいやつ」「田舎っぽいやつ」「夕焼けっぽいやつ」「焦点距離」の6つをラベルづけしました。その結果、出力画像はこんな感じでいじることができるようになりました。

工場のラベルがついた元写真にたいして、ラベルを変えて画像を生成（工場、花）

工場のラベルがついた元写真にたいして、ラベルを変えて画像を生成（夜、工場のラベルだけど焦点距離のラベルをいじる）

工場の写真を、元通りだけではなく、「花っぽく」「夜っぽく」した感じにも生成できるようになっているのがわかると思います。

学習セットについて

自分の写真なのですが、今回整理したところ、ちゃんと写真を撮り始めてから今までで大体7万枚ぐらい写真を撮ってたっぽいです。ですが、この7万枚の中には、人の顔が写っているものや美術館の作品の写真等今回のような用途で使うにはふさわしくないもの、それに加えてただの白飛びした写真などがかなり入っていました。これらをほとんど手動で取り除き（地獄をみた）、7000枚程度の画像セットを作成しました。そして、この画像セットを上でも述べたように、「工場っぽいやつ」「花っぽいやつ」「夜っぽいやつ」「田舎っぽいやつ」「夕焼けっぽいやつ」にこれまたほぼ手動でラベルづけしました（地獄 pt2）。


これらの作業、自動化しようとしたんですけど全然うまくいかなかったんですよね、辛い。


ところで、自分が撮ったほぼすべての写真には焦点距離のメタデータが入っていました（自分が撮った写真なのでそれはそう）。嬉しい。なので、写真のラベル付に対応した次のようなjsonデータを作りました。

写真のラベル付に対応したjsonファイルの一部

写真側はこんな感じで512×512の画像として用意しました。この解像度は、パフォーマンス＋学習にかかる時間の兼ね合いです（後述します）。

データセット画像

512×512といいましたが、実際には上と下が黒で塗りつぶされて16:9になっています。これは、VAEのライブラリの多くが正方形を前提にしていることに加えて、自分の写真が横向きの写真が多かったので普通に正方形にトリミングすると真ん中しか写らなくなってしまうことが理由です。

これをCVAEで学習させていきます。

学習コードについて

github.com

こちらのVAE用のコードを、CVAEに変更するという形で実装しました。 このVAE用のコードはCNN（Convolutional Neural Network、畳み込みニューラルネットワーク）という手法をRes-Netという手法を使って改良したもののようです。それを、CVAE用に変更したという話になっていると思います。

512×512の解像度の画像セットに対して、6層の実装を行ったので、512×512は512/(26) = 8より、画面を8×8分割してそれぞれの区画ごとに学習が行われているという感じになっているっぽいです（あってるのか？）。それぞれの区画に対して、32次元分の次元を設定したので、32×8×8で2048次元の潜在空間が作成されています。

（ここで学習の際に、学習元写真や、学習中に一旦作成されたモデルの作った画像の特徴を抽出するというタスクが発生します。この特徴を抽出するという作業にVGG-19という事前学習モデルを使っています。

Feature Perceptual Loss for Variational Autoencoder

vgg19 — Torchvision main documentation

あんまりわかってないのですが、学習の際、コンピューターはピクセル単位の差しか捉えることができません。それを、エッジやオブジェクトの形状などで捉えることができるようにしてくれるというものです。VGG-19自体は画像認識のモデルとして実績のある有名なものらしいです。 実装というより文脈的に重要だと思うので書いておくのですが、多分ここが唯一、自分の写真以外の画像データにつながるところではあるとは思います。画像の特徴を抽出するというタスクでしか使っていないですが、一応。）

学習については、PyTorchとGoogle Colabを使いました。最初は自分のパソコンで学習させていたのですが、数千枚とか学習させるようになると全然終わらなくて...。 パラメーターを変えたりしながら学習をやり直したりもしたので、結構な量課金しました。具体的に言うと、A-100というGPUを一ヶ月弱ぐらいはほぼぶっ通しで回していました。察してください（遠い目）。 （torch.compile()とか色々工夫はしたんですが...）

最終的にVJで使ったやつは、一週間ぐらい学習させたやつです。学習したモデルを使って、学習元の画像を再現させようとすると、下に貼った画像ぐらいのクォリティになりました。各写真の上側が生成画像、下側が学習元画像です。概ねいい感じな気がします。（草原みたいな構造は厳しいですが）

学習結果：各写真の上側が生成画像、下側が学習元画像

学習したモデルをリアルタイムで推論させる

さて、次は作ったモデルをどうやってVJに組み込むかという話です。概ね2択です。

  1. モデルを使って大量に動画を作り素材とするか

  2. リアルタイムに画像を生成させるか。

あんまり選んだ記憶がないのですが、なんとなくできたらかっこいいなあという理由で、リアルタイムでの生成をまずは目指してみることとしました。（当時はその大変さを知らず...）

リアルタイムで生成するというのはどういうことかというと、作ったモデルに対して「潜在空間のこの場所に相当する画像を、このラベルで作って～」と頼み、それが最低でも1/30秒（30FPS）、できれば1/60秒（60FPS）で生成されてほしいということですね。（モデルに画像を生成させる行為は、推論というプロセスだそうです。）

今回、学習はPyTorchを使って行ったので、まずはその延長線上でPythonを使ってやってみました、が結果は惨敗。解像度を256×256とかにしても10FPSとかしか出ません。流石に厳しすぎる。

PyTorchにはTorchScriptというものがあり、これを使うと、PyTorchで作ったモデルをC++上で動かし高速に推論させることが可能だそうです。というわけで試しにやってみたのですが、あんまり変わりません。256×256の解像度でもせいぜい20FPSとか...？話になりません。

途方に暮れていたのですが、色々ググったりした結果ある方法にたどり着きます。それが、TensorRTを使うという方法です。

TensorRTとは、Nvidiaが出している機械学習の推論用のライブラリで、NvidiaのGPU上でモデルを動かす際に、高速で推論を行うことができるというものです。

developer.nvidia.com

これが良さそうだったので試してみることにしました。具体的には、

PythonでPyTorchを使って学習させてモデルを作成（ptファイルという形式）→ptファイルをonnxファイルに変換→onnxファイルをtensorRTで動くように処理(onnxファイルからengineファイルに変換)→engineファイルを使ってリアルタイムで推論

という手順に落ち着きました。

この手順で、512×512の解像度の画像を使って学習させたモデルで推論のみを回すと....

FPS70

勝った。

実際には、VJをする場合推論以外にもたくさんやることがあるので（オーディオの処理とかShaderとかなんか色々）、最終的には

学習推論はFPS30-40前後、メインループはFPS60前後という速度に落ち着きました。（これで4050 Laptopのゲーミングノートで、GPU使用率が常に6－7割をキープします。）

まあ良いのではないでしょうか。

ここまでは、こういう構成になっています。

構成図（機械学習関係のみ）

述べておきたいのは、キャッシュファイルの作成ですね。これに、2048次元の潜在空間上の、どこの位置が学習元の写真に相当するのかというのを保存しておきます。写真の住所集みたいなものです。これをリアルタイムで読み込んで、デコーダーと呼ばれる、住所から画像を生成してくれるエンジンに渡すことで狙い通りの画像を出していきます。

どういう形でVJに仕上げるか。

リアルタイムで画像は生成されるようになりました。このモデルを使ってどのように絵を出していきましょうか。

今回はメイン機能を2つに分けました。1つ目は「どのように潜在空間を移動するか」、2つ目は「潜在空間において、『今いる場所』を少しずらすことによってポストエフェクトにする」です。

どのように潜在空間を移動するか

潜在空間とは、先程から説明しているように、空間内の各場所に応じて画像に対応する連続的な空間です。つまり、この空間内のどこを指定し、そこからどのように移動するかで、出てくる画像が決まるわけです。

適当な場所を選んでも、よくわからないぐちゃぐちゃな画像が出てくる可能性があります。色々考えた結果、「学習元の写真を目印にして移動するモード」「適当に動くモード」の2つを軸としました。

学習元の写真を目印にして移動するモード

先ほども示した、この図と同じです。

移動しながら画像が変化する様子

ランダムで（キャッシュファイルの中に保存してある）次の画像を選び、移動していくモードです。移動は球面補完でやってます。この移動の速度をBPMの数倍や、数分の1倍にしながら移動していきます。また、ランダムで選ぶ画像も、「夜のタグがついた写真の中からランダムで選ぶ」のように、カテゴリごとに選べるようになっています。これだけでもだいぶ楽しい。移動の仕方を変える（イージングをつける）こともできるようになっています。

以下はこのモードのGUIです。

ランダムに選んだ画像の間を移動するモードのGUI

  • Auto Transitionを選択している間はBPMに合わせて移動
  • Next transitionを押すと、次の画像に移動
  • Cache offsetを使うと、画像の位置から少し離れた位置に移動（少し崩した画像を生成できる）
  • カテゴリフィルタにチェックをいれると、移動する画像を制限できる（Nightにチェックをいれると、夜の写真にだけ移動するようにになる。全部にチェックを入れないと、完全にランダム）
  • Easing - 画像から画像に移動する際の移動速度の変化をつけることができます。

また、この移動モードにrotationという機能を付けました。これは移動先でグルっと目標点の近くを周り、また次へ移動するという機能です。これも楽しくてよく使います。

rotation機能のイメージ図（ビネットはただのポストエフェクトです。スクショするときに切り忘れました、すいません。）

上に示したのが、rotation機能のイメージ図です。実際にはこれを2048次元の空間で行います。

draw当日も結構な頻度で使いました。最初のこの辺とかわかりやすいかな？

youtu.be

もちろん、移動中もラベルを自由にいじることができます。上の場面は、工場のカテゴリの写真の間をひたすら遷移しながら、生成するためのラベルの「花っぽい」のフラグを立てたり切ったりしつつ、rotation機能で移動してますね。

rotation機能のGUIはこんな感じになってます。

rotation機能のGUI

  • Revolutionは目標の画像の周りを何周するか
  • Time multiplierは、目標の画像の周りを周る時間と、画像から画像に移る時間の比率

適当に動くモード

本当にランダムで適当に移動するモードとかも実装しましたが、一番使い勝手が良かったのは、潜在空間上で原点の周りを一定の距離を保ちながら周回するモードです。

潜在空間上を、原点の周りを周回しながら画像を生成する様子のイメージ図（ビネットは切り忘れました。ただのポストエフェクトです。）

上に示したのが周回するモードのイメージ図です。適当に潜在空間上を周回するモードになります。学習元の写真の位置などを参照しないので、常にぼやぼやっとした画像しか出ないのですが、これはこれでよいという感じですね。特にラベル指定で花のパラメーターを強くすると、かなり良い絵が出るようになりました。

イメージ図では2次元で周回していますが、実際は2048次元なので、好きな道を選んで周回できます。（球の表面を一周しろと言われた時、色々な道を選ぶことが可能ですよね？例えば地球の周りを回る時、赤道に沿って一周するか、北極と南極を通るように一周するか、みたいな。それと同じ話です。）

ランダムで周回する軌道を選びつつ、少しずつ角度をずらして、同じ画像がループしないようにしています。（正確にはパラメーターで選べるようにしています。）

また、原点からの半径でなんとなく生成する画像をコントロールできます。

潜在空間上の原点からの距離で絵の感じが変わる様子

原点から近いほうが全体的に似たよう画像になって、遠いとデティールがはっきりした画像が構成される気がしています。なんでかよくわからないですが、これはこれで都合がいいのでそのままパラメーターとして使用しています。

ところで、今回潜在空間の次元を2048にしています。先ほど説明したように、32 × 8 × 8 = 2048で、8×8分割してそれぞれの区画ごとに32個の次元が設定されています。

そして、この32次元上の空間が、画像の特徴を保持しています。この32という値なのですが、かなり小さめの値になっています。

この32という値が大きければ大きいほど、広い潜在空間を作ることができます。そのため、たくさんの情報を詰め込むことができ、より精度の高い画像を再現することができるようになるわけです。しかし、潜在空間を広く取りすぎると、情報が何も無い場所が生まれてしまうことがありました。（学習の仕方がまずかったのかもしれませんが、大きい次元数で学習すると、真っ黒の場所なんかがよく出てきたりしました） これでは精度の高い画像を生成する分には面白いけど、VJとしては楽しくない、ということで32という値を選びました。結果的にそこそこ精度の高い画像を生成することができつつ、空間の広い領域に渡って、楽しげな画像が生成されるモデルになってくれました。たぶん、このおかげで適当に動くモードがある程度機能しています。

周回するモードのGUIの様子はこんな感じです。

潜在空間上の原点の周りを周回するモードのGUI

  • Smooth radius - 周回半径
  • Smooth velocity - 周回速度
  • Easing - 周回中の移動速度を、BPMに合わせながらイージング関数で変化させることができる
  • Smooth Easing Factor & Seamless Factor - イージング関係の調整パラメーター
  • Angular Change - 周回する際の、原点に対する角度をどれぐらい変えていくか。（例えば地球で赤道上を周回していたときに、次の周回のときにすこし傾いた軌道を通り、日本の上あたりを通る、みたいな感じです。）
  • Radial Fraction - 半径のパラメーターを変えたときに、どれぐらい時間をかけて半径を変化させますか？というパラメーター（突然変えると画面も突然変わってしまうので）

モードとモードの切替

今回のシステムの面白いところの一つに、常にひとつの学習モデルがリアルタイムで画像を吐き続けているというところがあります。 そのため、原理上全てのモードとモードの切り替えがスムーズに行えるはずです。そこで、モードを切り替える際に突然移動するのではなく、潜在空間上を移動してモードを切り替えるようにしました。

モード切替のイメージ図。「原点の周りを周回するモード→学習元の写真を目印にして移動するモード→rotationモード」というモード切替をシームレスに行うイメージ

実際のライブの終盤辺りでは、原点の周りを周回するモードと写真を目印に移動するモードを交互に切り替えてたりしています。エフェクトがかなり掛かっててわかりにくいかもですが...

youtu.be

潜在空間において、『今いる場所』を少しずらす（オフセットをかける）ことによってポストエフェクトにする

潜在空間の中をどのように動いていくかという話をしてきましたが。ところで、場所を少しずらすことによって、今いる場所からすこし崩れた画像を作ることができる可能性があります。潜在空間の中で場所をずらすと、いい感じのグリッチやノイズになるんじゃないの？みたいな話ですね。

そこで、場所を少しずらすモード、を実装してみることにしました。イメージ図ではこんな感じです。潜在空間の特徴量を表す32次元の中からいくつかの軸を選び、少し場所をずらしてみてます。イメージ図では、2方向の次元を選び、色々とずらしてみている様子について表現してみました。

潜在空間上にオフセットをかけるイメージ図1　横軸に沿って明るさのようなもの、縦軸に沿ってコントラストのようなものが変化しているのがわかる

潜在空間上にオフセットをかけるイメージ図2　横軸に沿って縦方向や横方向にノイズが入ったり、縦軸に沿って斜め方向にブラーのようなものが掛かったりしている

これが出た時はめちゃくちゃテンション上がりました。 これを音に合わせたら最高だろうと。

今回は潜在空間は、32×8×8 = 2048次元です。このうち、画像の特徴を捉えている32次元について、その中から自分で選ぶようにします。選んだ次元について、8×8の区画を音に合わせて動かすようにしてみました。

つまり、2048個の変数があります。それを、64(8×8)個ずつの32個の塊に分けます。で、まず塊を指定します。「この64個の塊！」って感じですね。で、その中の64個の変数それぞれに周波数を割り当てます。例えば一番最初は100Hz、最後は1000Hz、みたいな...　そしてそれの振幅に合わせてずらすようにしてみました。

（下の画面のチェックボックスにチェックが入ったエフェクトが音に合わせて掛かってるのが伝わってほしいです。）


良さそう。


というわけで、「潜在空間内部でのずらし」を活用したエフェクトが完成しました。

しかもこのエフェクト、すべてが互いに独立してるので重ね合わせが容易なんですよね。両方ずらせばいいだけなので。良き。（潜在空間上にオフセットをかけるイメージ図1、2の、斜め方向にずらしている様子に注目してみてください。）

どの64個の変数をずらすかで、32方向あるわけですが、それを正の方向にずらすのと負の方向にずらすのとわけて、64個のエフェクトとしました。

64個ものエフェクトを覚えるのは大変なので、なんとなくのイメージ図を作って管理してます。

logos.pngです。パワポでポチポチ作りました。

このイメージ図は手動で作ってます。つまり、「あーーこの方向にずらすと白く光るなあ。じゃあ白いアイコンにするかあ。」みたいなことを64回やればいいってことです。（ちなみにこのタイミングで、各方向についての適切なオフセット量のスケーリングも手動で行ってます。筋肉調整。）

疲れた。

midiコンにも同じシールを貼っています。（後述）

このオフセットエフェクト機能のGUIはこんな感じになってます。

オフセットエフェクトのGUI

使用しているエフェクトにチェックボックスが入る他、下のスライダーでどれぐらいオフセットさせるかを調整できる感じですね。

このエフェクトなのですが、どのエフェクトをかけるかを周期的に変化させるモードも追加しました。

右側にある loop beatとか書いてあるのがそうで、これにより、BPMに合わせてエフェクトを変化させるセットをリアルタイムで組むことが可能です。

見づらいんですけど、右側に着目してもらうと、文字が黄色くなった場所に貼ってあるエフェクトが適用されているのがわかるかと。

GLSLによるエフェクト

以上の学習モデルによって出力された画像に、GLSLを使って最後にエフェクトを掛けます。が、ぶっちゃっけ、「潜在空間でのずらし」によるエフェクトが最高すぎて特にやることがないんですよね。

一応2パス用意しまして。1パスめには、FBMノイズを乗せるShader、モーションブラーをかけるShader、エッジ検出をするShaderを用意し、切り替えられるようにしました。

2パスめは完全なポストエフェクトです。ビネット、RGBの強度調整、モノクロへの移行、明るさの調整、RGBシフト、タイリングとかが割り当ててあります。

midiコンへの割り当て

AKAI APC mini（無印）を使いました。メルカリで安かったんで...。 ちょうどボタンが64個あったので、エフェクトに割り当ててます。えぇ...。

midiコンの写真

最終的な構成

最終的なコントロールパネル（GUI）は以下のような感じになりました。

コントロールパネル

そして、最終的な構成は以下のような感じです。

アプリの全体的な構成（推論のところが少し誤解を招きやすい表現になっています。正確には、3つ別々に作成した画像を合成するのではなく、3つのパラメーターを見たうえで1枚の画像を生成します。

結局、VJソフト側はC++によるアプリ作成になりました。というのも、TensorRTでゴリゴリに動かす時点で根幹システムがC++になるのは確定していたので。それを中心にアプリを構築していかざるを得ませんでした。C++によるアプリ作成とか人生で初めてだったんですが。VJアプリ側だけで4000行ぐらいになりました。マジで辛い。

VJ側は、

  • glew-2.1.0、glfw-3.4.bin.WIN64（出力ウィンドウ用）
  • imgui （GUI用）
  • opencv（画像を扱う関係）
  • rtmidi（midiコンの入出力）
  • rtaudio（音の入力）
  • TensorRT (VERSION 10.8) 、CUDA (VERSION 12.4) 、cudnn (VERSION 8.9.7) （機械学習の推論実行のため）

を使用しています。

学習側はPyTorchでぶん回してるって感じです。

ツールを作った感想

できあがって練習したときの感想

めちゃくちゃいいものができてしまったという心持ちがしてます。とても嬉しい。とくに、グリッチに関していくつかのエフェクトは見たことない、それでいてかなり気持ちの良いエフェクトになっていました。まーじでよい。（あとから映像見返して、本番うまく出せていないことに気づいて横転しています。悔しすぎる。）

ラベルを調整して花まみれの夜の街とか生成できるのも本当に楽しいですね。個人的に好きな作品に、https://yoshirotten.com/takayfeatyoshirottentokyohanabi/:TAKAY feat. YOSHIROTTEN「TOKYO HANABI」 というのがあるのですが、これには遠く及ばないにしても、こういうのがリアルタイムで生成できるの、若干憧れがあったのでとても嬉しい。お花たくさん撮ってきて良かったです。

自分の撮った景色が花びらまみれになって見たことないグリッチかかるの、本当に好き。

VJツールとしての感想

そもそもVJツールをVR空間でしか作ったことのないという異常経歴をしているのですが（そもそもリアルVJやったことないし）、そのおかげでVJツールというものへの勘所がいまいちわかっていませんでした。今回のツールの最大の反省点は「切り替え機能を入れなかった」ことです。DJでいう先聞き、右テーブルと左テーブルみたいな概念は必須でしたね。そのおかげで、パラメータをパシッと切り替えて音の空気が変わるタイミングにバッチリ合わせる、みたいなのが難しかったです。今回のdrawではGLSLサウンドライブコーディングという、音の急激な切り替えが起きにくいAudioに対するVJなのである程度は対応できたかなと思います。ただ、もっとバチッと合わせたいです。

このツールをもし発展させるなら、最初の改善点はそこだと思います。

本番の感想

とりあえずうまく行ってよかった。本番動かないみたいなことも特になくなんとかやり終えることができました。自作ツールだと、このあたりの不安感が段違いですね...。ソフトが動きますようにという緊張でいっぱいでした。（本番一週間前にパソコンの機嫌が突然悪くなったんですよね。心臓に良くない一週間でした。助けてくれた方本当にありがとうございました...！）

概ね良い反応をいただけたような気がしてます。とても嬉しい。ただ他の人達がすごすぎて、「頑張ってきてよかった～～（このヤバい舞台に自信をもって立てて）」という気持ちと、「もっとかましたかった、悔し～～」という気持ちが半々ぐらいです。こればっかりは数年間創作してない人間のブランクもあると思うので...。粛々と受け止めて、また色々作っていきたいですね。

らくとあいすさんの音楽があまりにも最高でした。本番は楽しむ余裕なかったんですが、後で見返したらまじで最高。owのところ良すぎる。これにあの絵を合わせられたの、普通に人生のハイライトの一つかもしれん。

あと、後半でパラメーターミスって出したいグリッチいくつか出せてなかった。めちゃんこ悔しい。

これとか

最後に

このツール作るにあたってマジでいろいろな人に助けてもらいました。機械学習のきの字もわからんところから色々な人に助けてもらい。。。本当にありがとうございます。。。感謝しかない。draw()にも貴重な機会をいただきありがとうございますという気持ちです。

機械学習全然わからん状態で書いた記事なので、間違ってる内容がある可能性があります。そのときはぜひ指摘ください。

写真を撮り始めたきっかけは、今回のdrawで最高のテクノを披露してたNikoさん（https://x.com/himazin917）です。本当にありがとうです！！！

1月頭から3月下旬まで、ほぼこれしかやってません。大学院入ってから多分ほぼ初めての本気の創作だったと思います。死にかけ。パワーが必要。学業が終わりかけているので学業にちゃんと戻ります...。

それはそれとして、こいつを一回でお蔵入りさせるのは流石にもったいないと思っているので、もう一回ぐらいどっかで披露したいなあ。

補足

写真は普段ちっちゃいXの写真アカウントで上げています。 もし万が一今回のVJで使ったような写真ばっかり上げてるちっちゃいアカウントがあったらもしかしたら僕です。

宇宙天気予報センターにインターンに行ってきました。

めっっっちゃ久しぶりにブログ書きます...。

先週、宇宙天気予報センター(正確には情報通信研究機構 電磁波研究所 電磁波伝搬研究センター 宇宙環境研究室宇宙天気予報グループ)とか言うところで一週間ほどインターンシップに参加してきました。一週間なのでいわゆるインターンシップというよりは業務体験、研修の意味合いのほうが強かったのかなと思います。

普段は自分の研究分野の話とか（少なくとも対外的には）してこなかったんですが、宇宙天気という概念の宣伝とかにもなるのかなあと思いここでインターンの体験記でも書いてみようかな、と思います。

あとこのあたり界隈が狭すぎて、情報によっては個人が特定できる気もしますが、放っといてもらえると嬉しいです。じゃあ書きます...。

どこにインターンシップにいったんですか？

インターンシップ先の組織名は国立研究開発法人 情報通信研究機構(NICT)というところになります。総務省の管轄下にある国の研究機関です。

www.nict.go.jp

有名な業務としては日本標準時の管理があるでしょうか？例えば、精度が高いと言われる電波時計は、日本国内においては日本標準時を知らせる電波を定期的に受信して時刻を合わせています。日本標準時を管理し、その時刻を知らせる電波を発信しているのがNICTです。2017年の元日にあったうるう秒の挿入の際には、8時59分60秒が表示される時計がニュースとして報じられていましたが、あの時計もNICTのものですね。

www.youtube.com

NICTは情報通信研究機構という名前になっていて、業務内容は非常に幅広いものになっています。上で紹介した標準時の管理の他にもネットワークやサイバーセキュリティ等々情報通信に関する幅広い研究を行っています。


NICTにはいくつかの研究所がありますが、その中に電磁波研究所という研究所があります。電磁波研究所はいくつかの研究センターで構成されており、そのうちの一つに電磁波伝搬研究センターというところがあります。そのセンターの中にもいくつかの研究室があり、そのうちの一つである宇宙環境研究室というところが今回の自分のインターンシップ先になります。

seg-www.nict.go.jp

組織の樹形図が長すぎてよくわからないですね。正直、僕もよくわかってないです。NICTの中の研究室の一つである宇宙環境研究室にインターンシップに行った、ぐらいの認識でいます（いいのかな？）。


宇宙環境研究室は「研究室」とはありますが、大学などの研究室と違って学生はおらず(いたのかもしれないけどお会いしてないです)、研究員の方と予報官の方、そして事務員の方などで構成される20-30名？ほどの組織でした。

実は、宇宙環境研究室は宇宙天気予報を昼夜問わず発信しています。そのため、予報官の方には夜勤の方もいらっしゃいました。また、リモートワークをされている方もそれなりにいらっしゃっいました。なので、全部でどのくらいの規模の組織かは最後まで把握しきれませんでした。たぶん20人前後かなあと思います。

体験した業務内容はなんだったんですか？

応募した際の書類に記載してあった「インターンシップ内容の概要」にはこのように書いてあります。

・宇宙天気予報に必要な基礎的な知識・技術を習得する。 ・実際の観測やシミュレーションデータを利用して宇宙天気予報の演習を行う。

インターンシップに実際に行ったところ、正しく書いてある通りのことをしてきました。宇宙天気予報に必要な知識や技術を習得し、演習を行ってきました。

詳しい内容はこれからちゃんと書きます。

宇宙天気予報ってなんですか？

宇宙天気を予報することです。

…それはそう。宇宙天気ってなんですか？っていう話ですよね。

NICTは宇宙天気予報に関するサイトを持っていまして、そこには宇宙天気についての説明もあります。

swc.nict.go.jp

詳しくはそちらを見ていただければと思うのですが、ここでも簡単に説明します。

私達の住んでいる世界では、家から外に出て上を見上げると空が広がっています。広がっていなかったら多分橋の下とかにいると思うので、そこから出てみてください。多分空はあります。なかったら困ります…。 空は晴れたり曇ったり雨が降ったり色々と変化します。空の様子は天気と呼ばれ、天気の変化は私達の生活に大きな影響を及ぼします。外出先で突然雨が降ってびしょ濡れになるのも、天気が晴れから雨に変わったせいですね。とても困ります。

さて、こういった「天気の変化」というのは私達の頭の上から大体1km~10kmぐらいまで上に登ったところで起きています。ちなみに夏に見える入道雲（積乱雲のことです）はの一番上は高さが10kmぐらい、場合によっては10kmを超えたりします。逆に、10kmより高い場所になると雲はほとんどできなくなり、いわゆる「天気の変化」はほとんど起きません。最近、10kmより高い場所の影響で天気が変わる可能性があることがわかってきたりはしてるそうですが、やはり天気のメインの変化は高さ10kmまでと言って良いでしょう。

次に、そのもっと上について考えてみます。 私達の頭の上からまっすぐ上に登っていって、高さ100kmを超えるとそこは宇宙と呼ばれるようになります。宇宙では空気はほとんどありません。空気のほとんどない宇宙に生身で放り出されて生きていける人間はいないでしょう。（そのため、宇宙ステーションの外に出る宇宙飛行士は宇宙服を着ます。） さて、宇宙空間では空気がないので、雲はできませんし風は吹きません。当然雨も降りません。では地球から宇宙に出たら、そこには空気がほとんどない暗闇が広がっているだけなのでしょうか？

実はそうでもなさそう、ということが最近（最近と言ってもここ50年ぐらいの話です）わかってきました。宇宙には僅かですが（ほんっっっとうに僅かです。）空気はあります。さらに、宇宙での本当に僅かな空気の変化が私達の生活に影響を及ぼす事もわかってきました。と言っても、普通の天気のように雨を降らせたり猛暑にしたりして私達の生活に影響を及ぼすわけではありません。宇宙での空気のほんの僅かな変化が、例えば、人工衛星を故障させてしまったり、無線通信を乱してしまったり、GPSを少し狂わせてしまったりすることがあるのです。

このように、私達の日常の遥か上空100km以上、場合によっては数万kmであったりしますが、その宇宙という場所での変化が、私達の生活を支える人工衛星や無線通信、GPSなどに影響を与えています。私達が見上げた先遥か遠くでの変化が私達の生活に影響を与える様子はまるで天気のようです。しかし、普通の晴れや雨などのことを指す普通の天気とは全く異なります。そのため、私達の生活に影響を与える宇宙の変化のことを普通の天気と区別して宇宙天気と呼ぶわけです。

宇宙天気予報とは、「宇宙天気」の現況を把握して予報を行うことを指します。観測データから現在の宇宙天気を把握し、「今宇宙の天気がこうなっているから、こういう現象に注意してください。また、今後数日の間にこういう現象が起きそうです。」という形で発信するのです。


ちなみにこの文章を読んで、「明日の宇宙天気予報をチェックしたことない！」と不安になる必要はないと思います。2023年現在、宇宙天気を毎日把握する必要がある一般の人というのは多く内容に思います。現状宇宙天気予報は、人工衛星を運用する会社やGPSの載ったドローンを活用している会社、あとは航空会社などに必要とされている情報なのかなって思います。あとはオーロラを見に行く人ですかね？（オーロラは宇宙天気の影響をもろに受ける現象の一つです。）

ただ将来的に社会インフラがもっとIT化したり、宇宙旅行がもっと日常的なものになったりしたら、宇宙天気も身近なものになるかも…?しれません。

ちなみに、日本では現在宇宙天気予報はこんな感じで発信されています。一般の人が日常的にこのサイトを見る必要性は現時点ではそんなにないとは思いますが、見てるだけで楽しいのでよろしければ見てみてください。

swc.nict.go.jp

どうやって応募したんですか？

ここから具体的なインターンシップの中身に入っていきます。まずは応募ですね。NICTは「国内インターンシップ制度」というプログラムを用意しています。詳しくはこちらから見ることができます。このインターンシップ制度の特徴として、かなり多岐に渡るインターンシップが募集されているところがあげられます。自分はこの中でも「宇宙天気予報の基礎・応用」という課題名のものに応募しました。NICTで宇宙天気予報関係のインターンシップが生えたのはかなり新しいらしく、去年からのようです…?

www.nict.go.jp

毎年募集している…?ようなので、気になる人は来年度確認してみてください（来年も募集があるかはわからないです。）。

応募条件や選考基準は？

選考基準の詳細は知りません。(それはそう。知っていたら逆にまずい。)

今年の応募条件は大学院生かつD1以上らしいです。あと、「太陽・太陽風、磁気圏、電離圏、超高層大気を含む宇宙環境分野に関する知見がある方を優先的に採択する。」だそうです。なので、僕の研究分野が磁気圏だったのは大事だったはずです。

（後述しますがインターンの内容がかなり詰め込みだったので、そもそも宇宙天気関係に片足突っ込んでいる人じゃないと選考通ってもインターンシップの時にだいぶ辛いとは思う。）

選考課題に過去の主要な論文とか書いてありますが、論文一本も出してないのに通ってしまった。(´・ω・｀)

学会での発表歴とかの書類を送った記憶があります。 定員は1です。倍率は知らない。

待遇は？

研修場所は東京小金井市のNICT本部だったのですが、交通費、宿泊費は全額出していただけることになっています。むちゃくちゃ助かる。

お給料はないですが、若干の日当？みたいなものはあります。インターンシップといいつつ1週間の研修みたいなものなので、明確なお給料が出ないのは仕方ないと思います。(この辺、「インターンシップ」という単語に対して業界ごとにめちゃくちゃ温度感が違う気がする。)

期間も短いので、行く場合はノウハウ吸い取りまくるみたいな覚悟で行くと得られるものが多いと思います。（僕はそうしました。）

事前課題等は？

特になかったです。インターンシップ前に誓約書みたいなやつとか色々書いたりはしました。

実際の業務内容は？

インターンシップ期間は１週間、というか実質5日、月曜日→金曜日だったんですが以下のようなプログラムでした。

  • 月曜日 顔合わせ、施設見学、講義
  • 火曜日 講義、予報業務演習
  • 水曜日 予報業務演習
  • 木曜日 予報業務演習(+講義)
  • 金曜日 予報業務演習

また、宇宙環境研究室では毎日「予報会議」というものが30分前後行われます。研究員と予報官の方が集まって、その日に出す予報の最終確認をし、議論するというものです。

インターンシップ期間中は予報会議にも毎日参加していました。

施設見学

宇宙環境研究室の施設見学とNICT本部の展示室の見学を2時間ほどさせていただきました。施設見学では、研究や予報のためのシミュレーションで使うスパコン、でっかいアンテナ(衛星から観測データを受信するためにある)、観測施設(イオノグラム)などを見学させていただきました。あんまりハード系は触ってこなかったので新鮮でした。

受信用アンテナ　でかい

特に、衛星からデータを受信するアンテナを運用しているのは結構意外＆すごいなあと思いました。（宇宙天気予報に重要な人工衛星による太陽観測について、現状日本はアメリカの衛星に依存しています。ですが、その衛星から24時間データを取得するための受信ネットワークについて、受信アンテナを運用することで重要な役割を果たしているという話です。）


宇宙環境研究室の施設見学のあとはNICT本部の展示室の見学に行きました。

NICT本部の展示室は予約すれば誰でも無料で見学できるところではあるのですが、普通に存在を知らなかったので見学させてもらえたのはありがたかったです。解説をしてもらいながら、NICTの各研究分野の紹介や、研究成果を見て回りました。 NICTの研究分野は正直言って、標準時と宇宙天気しか知らなかったので学びがすごく大きかったです。指向性スピーカーの研究とか面白かった。

www.nict.go.jp

講義

講義: 宇宙天気予報の基礎知識について、５つの分野（太陽、太陽風、磁気圏、電離圏、予報業務全般）についての講義を受けました。各講義質疑応答を含めて一時間ほどで、分野ごとに専門の研究員の方が講義してくださいました。結構たくさん質問してしまったのですが、丁寧に答えてくださいました。

ちなみにこのインターンシップ研修は定員が1なので、講義も実質マンツーマンでした。贅沢すぎる。(後ろで聴講されている他の職員の方もいらっしゃいました) 自分は磁気圏以外は割と素人なので、学ぶことがたくさんありました。結構詰め込んだ感じもします。

また、木曜日に宇宙天気の具体的な災害例などについての講義を行っていただきました。宇宙天気が地上にどのような影響を及ぼすかについての詳しい話はこのインターンシップで一番知りたいところの一つだったので、ありがたかったです。

予報業務演習

講義を受けたあとは予報業務を行います。

実際にやることは、衛星による観測結果等々色々なデータを確認して、宇宙天気予報で重要な指標を確認したり、場合によっては導出したりします。その後、それらの指標を元に自分で判断してみる、といった形です。宇宙天気予報用のチェックシートが用意されていて、基本的にはそれに従って進めていきます。

意外にアナログ要素が多めですね…。正直、各データを勝手にコンピューターが飲み込んでまとめてシミュレーションとかにかけてくれるんかなあとか思っていたのでかなり意外でした…。


宇宙天気は研究がまだまだ発展途上です。また、現状では宇宙天気を予報するのに本来必要な情報に対して得られる観測情報がかなり少ないです。人工衛星を宇宙のどこか観測したい場所に向かわせるのは、たとえ人工衛星1つだけであっても簡単ではありません。その結果、かなり少ない宇宙の観測情報から、そもそも今宇宙は「晴れ」なのか「雨」なのかを判断する必要があります。（そしてそれも難しい）

それゆえ、様々な観測データを人間が確認し、必要とあればシミュレーションを行い、人間が総合的に判断する、という形を取っているのかなあと思います。


で、この様々な観測データを確認する、というのがむちゃくちゃ大変でした。一通り予報のたたき台を作ろうと思った時、数え方にもよりますが最低でも20~30種類のデータには目を通すんじゃないかなあという感じです。また、そのほとんどが初めて見るデータなので、データの見方も勉強する必要があります。おかげで、今日の予報を考えるためにデータを集めて見方を勉強している間に今日が終わる…という感じがずっと続きました。

自分で考えた予報は、予報会議の内容と比べてブラッシュアップし、担当の方に見てもらって添削していただきます。チェックシートの内容通りに埋めたつもりでもデータの見落としだらけで、難しいなあってなりました。

１週間じゃ足りない…。もうちょっと時間かけて勉強したかったというところが正直なところです。


最終日には自分で考えた発表を、研究室のみなさんの前で発表しました。上に書いた通り指定された予報を全て終わらせるには全く時間が足りなかったので、太陽フレアの発生予報のみ発表させていただきました(あと１週間あれば…とは思いましたが、これも力不足…)。

観測データとその解釈、そこからの現況と予報判断を発表するわけですが、これはそこそこ上手く行ったと思います。（？？？） 　 予報の難易度は宇宙天気の状況次第でもあるので、ケースバイケースなのだと思います。僕が発表した日は太陽が比較的穏やかな状況だったのがありがたかったです。

ちなみに、太陽フレアの発生予報のあとに、「考えたところまでで」ということで地磁気擾乱についての現況把握を発表したのですが、これについては見事に撃沈しました…。ムズい…。そして、このクォリティの予報を毎日発信されていることは本当にすごいことなんだなあと実感をしました。

補足

インターンシップ中には自分に対して一人担当の方が付いてくださり、その方からの指示に従う、という形でした。

業務演習中の質問に対していつも丁寧に答えてくださり、非常にありがたかったです。また、他の職員の方とも昼休憩などの際に話す機会があったので、5日という期間の中でもかなり色々な話を聞けたように思います。

まとめ

というわけで、宇宙天気予報センターのインターンシップというなかなか珍しいインターンシップをしてきたわけなのですが、非常に良い経験値を得られたと思っています。様々な観測データに触れられたことは自分の研究に活かせそうですし、何より自分の研究と社会の接点を間近で見ることができたのが貴重な体験だったと思います。

あと、毎日宇宙天気予報の日報を見るのが楽しみになりました。見方がわかると面白いですね。

なにか質問等ありましたらいつでもぶん投げてくださいまし。 ではでは。

Houdini夜会に登壇しました。

Houdini夜会というボーンデジタル様主催のHoudiniに関するオンラインのイベントがあり、ありがたいことにそちらで登壇させていただきました。

bdchannel.borndigital.jp

個人のR＆Dに関して30分程度でお話ししてくださいとのことで、Houdiniにおいて「解像度が高いフラクタル」を「なるべく正しく」レンダリングする手法についての試行錯誤についてお話しさせていただきました。

資料とサンプルプロジェクトを公開していますので、興味ある方はこちらからご覧ください。

また、質問等ありましたらTwitterのDM等で受け付けておりますのでお気軽にどうぞです。

drive.google.com

簡単に言うと、下に貼ってある写真のような図形を描画することを目指してHoudiniをこねこねする話です。

f:id:butadiene:20210625230648p:plainf:id:butadiene:20210625230717j:plain

VRChatを始めて三年が経ちました

VRChatを始めて三年になったので、この一年を少し振り返りました。一年目、二年目については以下の記事に書いてあるのでよかったら読んでください。

butadiene.hatenablog.com

butadiene.hatenablog.com

去年は項目ごとにまとめましたが、今年は一昨年と同じように「時系列」でまとめていけたらなと思います。

去年の今頃

確か研究室への配属が決まったころだったと思っています。二年目の振り返りを書いたころには配属が決まった後だったはずで、なんとか志望のところに入れてよかった、という思いでした。というのも、正直大学2～3年の間にVRChatに極振りしすぎて成績もなかなか怪しい感じだったので... まあ、ただ研究が始まる以上創作に振り切るわけにもいかないですし、なんとなか両立できたら嬉しいなあ、とかそんなことを考えていたように思います。創作的にはHoudiniにはまっている最中だったと思います。確か、NEORTさんの新年企画かなんかで富士山をテーマにしたアート作品を募集していて、Houdiniの練習がてら作品を出した記憶があります。

youtu.be

これはHoudiniとRedShiftで作ったやつのはずで、当時から「これリアルタイムレンダリングでも同じもの作れるでしょ　RedShift使う意味...」とか思ってた記憶がありますが、よいHoudiniの練習にはなりました。

あと、当時はtidal cyclesを使ったサウンドライブコーディングにも挑戦してました。結局このあと続いた記憶がないですね... サウンドライブコーディングは全然続けられなかった記憶があります。なんというか、「音の悪さがわかってしまって辛い」「曲を聞きながら作業できないのしんどい」みたいな気持ちがあった気がしますがとどのつまり「向いてなかった」ような気はします...。ただ、音の理論とかは触って面白かった気がするので、また縁が来たら触りたいですね

あと、GLSLライブコーディングもサウンドの流れでもう一回触り始めた形跡があります。2019年の夏ごろに一回やってたんですインプット不足を感じてやらなくなってしまいました。ただ、そんなに質にこだわらなくてもいいかなって思いはじめて、やり直し始めた感じですね。

普通に楽しそう

ただ、自分はサウンドライブコーディング向いてないなあって思い始めてのんびり適当なGLSL触ってる間に周りがサウンドライブコーディングでハチャメチャに盛り上がってるのはちょっとしんどかった記憶がありますね。まあしょうがないのかな...ってすぐに何も思わなくなった記憶もありますが、どうだったかなあ

（1月下旬までは頑張ってtidalやってる形跡が存在する）

2月

2月のトップトピックはVRC技術市ですね。

VRC技術市、もともとは出す気がなかったので申し込んでもいなかったのですが、開場1週間前にふらってプレオープンに訪れたらみみんくさんにたまたまお会いして、「まだ出せるよ？　書かない？」とのお誘いをうけ、1週間で書き上げました。100p超の分量になってしまい、やりすぎたかな...という気持ちも少しありましたが、良いものが出せたかな、とは思ってます（詳しくは本のあとがきを読んでください）

無料で出したんですけど、ありがたいことにたくさんの方からブーストをいただきました。正直言ってめちゃくちゃ助かりました。ほんとありがとうございます...。

それと、この本のサンプルを作る過程でワールドがポコッて生成されました。これです。

このワールド、まあ言ってみればレイマーチングだけでできた何でもないワールドなんですけど、自分としてはレイマーチング単体の表現でワールドとしてなんとか成立できる...?強度を持ったものができたっていうことで本当にうれしかったんですよね。Treehouse in the shadeというレイマーチングの技術の粋を集めたようなワールドがあるんですけど、その憧れのワールドに少しだけ近づけたような感覚があってうれしかったですね。

（ワールドとしてなんとか成立する強度、とは言いましたが、正直最近、というかここ1～2年のワールド高クォリティインフレ事情を見ると全然成立してない気もしますが、まあそれはそれです、はい。）

あとはAlgoraveTokyoを見に行きました。ライブコーディングとかジェネラティブのVJとかがたくさん見れて本当に刺激になりました。

めちゃくちゃすごかった

あと、2月の下旬に詳細は省くんですけど、VJっぽいことする機会があって、そのためのエフェクト量産してたりしました。最終的にvedaでHoudiniで作った映像にエフェクトかけたり、GLSLコードで直接映像出したりとかやったんですけど、とても楽しかったです。

www.youtube.com

あとはエフェクト作った時の記事書いたりとか...

butadiene.fanbox.cc

3月

3月もまたライブコーディングやってた気がします。具体的に言うとこれです。

www.youtube.com

EulerRoom Equinox 2020というイベントでラクトアイスさんとオーディオとビジュアルのライブコーディングセッションをしました。このイベントのために何回かライブコーディングの練習を二人でしたんですけど、どれもすごい楽しかったです。

本番も、いい感じで書けたと思っています。とても良い経験でした。ですけどGLSLのライブ配信、エンコーディングとの相性が最悪でコードが配信視聴側からは読めなかったりとか、そのあたりの問題も浮き彫りになりました（そのあたりの話はここにまとめました）。これは後日、思いもよらない形で解決されることになります。

さて、3月のトップトピックはShader1weekCompoですね。もともと3月はKlabExpertCampというイベント（東京開催）に参加してShaderで遊ぶ予定でした。kaneta先生とgam先生にShaderを教わりながらデモづくりができるということですごい楽しみにしていたんですけど、某なにがしの影響で完全に延期になってしまったので、代わりにオンラインイベントを開催してやろう、ということで始めました。経緯等は以下に詳しいですが、１週間でShader作品を作ろう、というイベントです。

medium.com

このイベントを3月に行いまして、自分も参加し下の作品を作りました。この作品は自分の中で結構キーポイントで、初めて「Shaderらしくない」作品を作れた感じがしています。レイマーチングの空気を感じさせないShader作品は自分の中でShadertoyに初めて触れて以降あこがれだったので、この作品をとてもうれしかったのを覚えています。

また、Shader1weekcompo自体もたくさんの方に参加していただいてとても楽しくおわることが出来ました。Shader1weekcompoはこれ以降も避雷さんと一緒に継続的に開催していくことになります。

あと、3月は裏ではFortranとかやってました。数値計算系の研究室に入ったので、数値計算におけるコード設計の基礎とFortranの入門とかしてました。Fortranってオブジェクト指向で書けるってこともこのころ知りました。めっちゃ書きづらかったけど...

f:id:butadiene:20201231182256p:plain
OOPが生まれる前からあった言語だけあって無理やり感が...

4月

4月はRevisonがオンライン開催だったので、それを見たりしていました。デモシーンの皆さんと鯖で一緒に見る機会があったのですが、本当に面白かったです。特に今年は4KとShadershowdownの予選が引くほどえぐい感じになっており大満足でした。自分でもデモを作りたくなったりしました。（いまだに作れてない....）

そして4月はつぶやきGLSLが始まります。

一番最初のつぶやきGLSL

もともとTwitterでつぶやきProcessingというものがはやっていて、これは1ツイート以内にコードを収めてProcessingでビジュアルを作ろうというものなのですが、これのShader版ができないかというのがそもそもの発想でした。こちらのツイートがインスパイア元です。

お見かけしたときは、そうだよなあShaderだと文字数足りないよなあと思ってたのですが、意外といけるんじゃないか？と気づいてつぶやきGLSLを思いつくに至ります。 そしたらこれがなんか一部界隈でめちゃくちゃ流行りまして、1週間もたたずにえぐい作品が大量に作られるようになりました...。自分も一応考案者なのですが、開始2週目には完全に追いつけなくなりました。

一応、自分なりのmaxはここでした...

ちなみに、開始1日後にdoxas先生がつぶやきGLSL用のエディタを作成されてます。twigl.appというものです。あまりにも開発速度が速い...（この素晴らしいエディタこそがつぶやきGLSLが流行るきっかけだったと思ってます）

つぶやきGLSLはいまでもえぐい作品を作られている方がちらほらいらっしゃって、いつも語彙を失っています。

あと、つぶやきGLSLのための解説記事を書いたりしました。

butadiene.fanbox.cc

あとは、研究室のほうで並列計算の勉強してました　OpenMpi叩いたり...。

5月

初日にとんでもないニュースが飛んできます。

つぶやきGLSL用のエディタである、twiglがライブ配信に対応したのです（？？？）。これによって、GLSLをライブで行う際のエンコーディング問題が解決することになりました！！　GLSLのライブ配信では画面をキャプチャーしてそれを配信しますが、この場合ライブ配信の際のエンコーディングが非常に問題になります。特にGLSLでビジュアルを制作すると画面の変化が激しいことも多く、エンコーディングの結果ノイズまみれになってしまいます。一方でtwiglの配信ではコード内容を送信するのみで、コンパイルも実行もすべて配信側と配信を受け取る側の両方で行うためエンコーディング問題は発生しません（受け取り側にもGPUパワーが必要になりますが）。また、twiglではサウンドShaderも書くことができます。これによって、エンコーディングなしでサウンドライブコーディングとビジュアルライブコーディングのセッションが可能になりました！　嬉しい！！

というわけで翌日には早速やりました。

これ以降らくとあいすさんとちょいちょいセッションさせてもらいました。とても楽しかったです...。

この時の自分は本当に暇さえあればライブコーディング以外でも適当にコーディングしてShaderお絵かきしてたっぽいですね。すごい楽しそう...。

ほぼ全部twigl.appで書いてると思います。気軽に書けるエディタがあるって本当に素晴らしいことなんですね。doxas先生ありがとうございます...。

さて、そんな中でも配信しながら書いた1枚が飛び切りの出来になりまして

Unityに移植してそのままVRChatに持っていきます。楽しいね。

ワールドとして公開したところ、たくさんの方に来ていただきました。ありがたい...。

さて、5月には第2回のShader1weekCompoを行いました。今回は前回と違ってだれでも参加できるようにしました。参加人数も増えてとてもありがたかったです。

自分は初めてWEBGLで作品作りをしました。WEBGL、JavaScriptとかほとんどわからなかったので本当に手探りだったので、これもまたdoxas先生の神サイトであるwgld.org を見ながら勉強しました。その結果何とか作品に仕上げられました。

初めてDeferred Renderingに挑戦した作品でもあります（というかDeferred RenderingがやりたくてWEBGLに手を出した）。大変でしたが、たくさん勉強になった作品でした。

ちなみに、後日法線をそのまま色合いにつかったらすごいいい感じになりました　ウケる

5月の終わりには、今まで使ったエフェクトを使ってVJをオンラインでしました。楽しかった...。 DJは鴨居さんで、めちゃくちゃ最高でした。ご一緒させてもらえてうれしかったです...。

6月

6月第一週にこれを買ってしまいました。

ずっと買いたかったのですが、高くて躊躇してました（1万5千円ぐらい？）。買えてとてもうれしかったのですが、このまま眠らせておくにはもったいなさすぎたので輪読をしようかなと思って募集したところ、sp4ghetさんが声をかけてくださり、週1のペースで輪読が始まりした。量が多すぎて今（2021年1月）でも続いています（ちょうど半分折り返したぐらい）。sp4ghetさんにプログラミングやグラフィック方面のいろいろな話を聞かせていただいたりもできて本当にいい会になってます。ありがとうございます。というか1人だったらここまで続いてなかった...。　頑張りたいですね。

7月

院試の勉強を始めました。の正直こちら側の進捗がほぼ無ですね。1weekcompoがあったのでちょっと風鈴を作ったりしました。

8月

院試がありました。大変でした（）。 ずっとVRChatのパブリックに立って雑踏を聞きながら勉強してました。意外と勉強がはかどって面白かった記憶があります。

VRChat、正直2019年の後半～2020年の前半はあんまりinしてなかった（週1ぐらい？）と思うんですけど、この頃から作業部屋としてすごいinするようになります。自分の性格？として多少なりとも雑音がある状態のほうが作業に集中できるんですよね。ですけどもこのご時世でカフェとかに行く気もしないし、なにより自宅の作業環境で作業したいのはそれはそうなので、VRChatを作業部屋として本格的に使うようになっていった気がします（もともとそれなりに作業部屋扱いでしたが、院試勉強の辺りから加速したと思います）。

院試が終わってからは（無事受かりました）SRPを一から書く勉強をしてました。

でも結局これも途中で終わっちゃいましたね。またやりたいなあ。

9月

KlabExpertCampがオンラインでありました。3月のやつが延期になったあれですね。作品を作る感じのCampだったので、4日間の製作期間でパストレに挑戦してみました（無謀すぎる）。パストレ書くの初めてだったのですが、どうにか2日でコーネルボックスまでたどり着けました

残り2日でなんとかパストレを使った2分弱の作品に仕上げました。

youtu.be

この時の様子はブログに詳しく書きました。

10月

記憶にあるのは大学の研究に関する発表会があったことなのでそれをずっとやってたと思います（これの関係で1weekcompoに出せませんでした）。それが終わった後はC++の勉強をし始めてた気がします。C++を使う気配があったので...

あとTENET見た気がする。

それと、1月のGLSLスクールでのライブコーディングを見据えて久々にらくとあいすさんとライブコーディングセッションしたりしました。らくとあいすさんの音はいつも最高です。

11月

11月は研究をやってたような気もするんですが、あんまり進んでる記憶がないです。不思議ですね。でもすごい忙しかった記憶があります。論文読んだり、発表の準備したりしてました。オンラインで開かれる色々な学会に行ってみた気がします。学会、難しいですね。英語わかるようになりたいです。 あとは身内向けにライブコーディングする機会があったのでちょっとやったりとか....

ライブコーディング、進捗がないときに数時間取ると進捗が湧いた「気分」になるので便利ですね。まあ気分だけですが...

あとFlashがなくなるらしいので天国の塔をプレイしたりしました。とても良かった...。

12月

GLSLスクールで発表をさせていただきました！

この講義、自分なりに結構頑張ったつもりです。とくにインターネット情報で不足しがちな「レイマーチングで球を出したり、箱を出したりした後、どうやって作品に仕上げればいいかわからない」という問題に焦点を当ててさせていただきました。機会をくださったdoxas先生に感謝します。

年末年始はひたすら研究用のC++コードを書いていました。インターネット一般でいうところの「完全に理解した」までもう少しのところまでは書けるようになったんじゃないかなと思います（つまりまだまだです）。頑張っていきたい。C++、本当にわからなかったのでtwitterやVRChatでたくさん教わりました。正直言ってめちゃくちゃ助かりました。本当にありがとうございます🙏🙏🙏

1月（2021年）

年明けにShader1weekcompoがあったので、オーロラを書いたりしました。

このオーロラ、上から見ても下から見ても写真で見た感じにちょっと近い感じのものができて、嬉しかったです。（上から用、下から用とかではない）

中にも入れるのでいずれVRに持って行って遊んだりしたいですね。

あと、GLSLスクールでライブコーディングを披露する機会がありまして、らくとあいすさんと一緒にやってきました。らくとあいすさんとのセッションはいつも本当に楽しいです。ありがとうございます。

ちなみに、今回のライブコーディングは一応内容を決めておいて、本番アドリブも入れながらやったんですけど。5分でレイマーチングが書けて、10分過ぎには尖ったビジュアルが出せ始めました。 なんやかんやでライブコーディングそのものの技量も成長していてとても嬉しいです。

まとめ

1年を振り返ろうと思うと「去年の今頃何を考えていたのかな」というところから始めるわけですが、こういう場合は1年前の振り返り記事の最後とか見るとよいわけですね。それで最初にも貼った「VRChatを始めて二年が経ちました」 VRChatを始めて二年が経ちました - Butadiene Works なんかの最後の章を眺めるとなかなかに猛々しい覚悟が書いてあるわけです。

自分が作るものにたいして自分で諦めれば、適当に手を動かしているだけでなんとなく過ごしていけるかなと思ったんですけど、でもやっぱり虚無感が膨れ上がっていくばっかりでどうしようもなさがありました。結局GPUパーティクルを作った時の満足感をもっともっと何度でも得てたくて、たぶんどうしようもないんですよね。仕方がないので、削り倒す「覚悟」を決めなきゃいけないのかなあと思ってます。

なるほど。で、現状を見直してみると、とても削り倒したとは言えない感じですね。むしろどちらかというとあきらめを得たのかな、みたいな感じもあります。というよりは感情がないんですよね。1年前の振り返り記事とか見ると、ものすごい感情が詰まってるんですよね。こうあるべきだからこうした、みたいな。この1年は全然そういうものがないというか、ものすごく淡々としてる気がします。「こういう技術が欲しくて、こういう作品を作った」みたいなプロセスの繰り返しになってると思います。それで困ったことに何の不満もないんですよね。狂気を失ったというか、そんな感じもします。もとからあったかどうか怪しいですが。

多分、自分のよりどころに「進捗」を当てるようになったんだと思います。実際、この1年「よい作品」があまり作れなかったことに対してはあまり感慨がないですが、進捗がだしたかったところで出せなかったことに関しては悲しさがあるので。自分自身がどれだけ前に進めているのか、というのを常に意識しているような感じだった気がします（あんまり前に進めなかったけど）。

願いが遠すぎるんですよね。今、いくつかまあ願いがあるわけですがどれもこれもおそろしいぐらい遠くて手が届かないわけです。それに届くためには必要なプロセスがたくさんあって、それを無感情に埋めていってるようなフェーズな感じもします。あるいはそう思い込んでるだけで、何かから逃避してるような感じもします。

現実的な話をすると、今年は去年の予想の

多分学業が忙しくなるはず

が完全にヒットしていて、本当にハチャメチャに大変でした。研究ってとても大変なんですね...。というか今まで自分がいかに時間を創作に突っ込んできたかが間接的に明らかになった気もします。いろいろと願いを込めるチャンスもあったんですが、忙しすぎて手放してしまうことも度々でした（その節はすいません）。なので、願いと向き合う暇がなかった、ということなのかもしれません。

去年は某アレでいろいろと大変だったと思うのですが、個人的には某の影響をありがたいことに大きくは受けずに済んだと思っています。創作活動は相変わらず続けられていたし、家での作業もVRChatのおかげで続けられました。これに関しては本当にVRChatにありがたさしかないです。わいわい話したいな、と思ったときに誰かと話すことができるという環境が今年も維持できたというのはどれほど恵まれていたのかというのを最近になって実感しています。（特に夏ごろお世話になったパブリックと、最近はDeepBlue（作業部屋の方）が無限にありがたさがあります。本当に助かっています。）

さて、今年はどういう年であってほしいかという話なのですが、とりあえずの予定としては研究を進めることになります。なおのこと創作からは遠ざかってしまう感じもありますが、その一方で創作を使ってやりたいこともたくさんあります。なのでこの2つをどういう感じに両立できるかなあという気持ちです。

これは去年たくさん試して気づいた話なんですけど、2つのことを並行してやるのが苦手すぎて、昼間研究して夜創作するみたいなムーブができなかったんですよね。なのでちょっとどういう風にやればいいのか決めかねているところです。

あるいは両方を接続したいという願いもあります。これは本当にかなえたい願いで、何とかしてみたいという気持ちが強いです。

あとはVRChatものんびり楽しみたいです。結局今年もVRChatをはじめてみたいなタイトルにしながら90パーセントVRChatに関係がないブログ書いていますが、去年よりはよっぽどインしていて、先ほども述べたように楽しんでます。今年も楽しんでいきたいです。いつも遊んでくださってる方々本当にありがとうございます。今年もよろしくお願いします。

まあ一方で今年は去年にもまして様々な様々で大変になるかなあという気持ちもあります。とりあえずは「生存」を目標にしていきたいと思っています。

年々欲がなくなってる気もしますが、進捗はいつもほしいです。

最後に割と繰り返しになるかもですが縁の話をさせてください。これはVRChat始めてからずっとそうなんですが、本当に周りから助けられることが多かったです。特に今年はリアル側の関係が某のためにかなり断ち切られる例が多くて、VRChatやTwitterでいろいろな人と遊んだりできたのが本当にありがたかったです。いつも一緒に作業してくれる方とか、色々な面白い話を持ってきてくださる方とか、本当に上げるとキリがないです。特にコーディング関係に関しては、書かなくてはいけないコードがいくつも沸いたのにリアルの周囲に聞ける人があまりいなくて本当に助けられました。何回頭を下げても足りない...。

この一年を去年と少なくとも一部は「同じ感覚」で過ごせたのはみなさんのおかげだと思っています。本当にありがとうございます。



今年もやっていきます。よろしくお願いします。






おまけ

去年と同様、今年聞いた曲たちです。 Feryquitos先生の曲聞きすぎた（最高）

open.spotify.com

KLab Expert Campに参加してきました

9月8日から9月12日までKLab Expert Campというのがありまして、それに参加してきました。

KLab Expert Campって何ですか

KLabという会社がやっている技術系インターンで、5日間で講義を受けながら開発を進め、最終日に成果を発表する、というものです。

今回のテーマはShaderで、4日間Shaderの講義を受けながらShaderの作品を作り、最終日に発表するという形でした。

なお、もともとは今年（2020年）の3月にオフラインで開催の予定だったのですが諸々の諸々の影響でこの時期にオンラインでの開催となりました。


具体的にどのような感じだったんですか？

オンラインでの開催になってしまったのでGoogle Meetを使用して行われました。

一日目は自己紹介と4日間で作る作品の目標設定をしたあとに作業時間となり、夕方から講義がありました。2，3日は午前中と午後の早い時間は作業時間で夕方から講義でした。

夕方から講義なのは日中忙しい人でも参加できるようにするためみたいです。（諸々の影響で延期されてしまったので、スケジュールの都合が合わない人が出てきてしまったみたいだそうです　大変...）

講義の内容は1回1時間弱ぐらいのが全期間で4つあり、メンターのかねた(かねた (@kanetaaaaa) | Twitter)さんとがむ(がむ #CEDEC2020 9/4登壇, CGWORLD 10月号 (@gam0022) | Twitter)さんによる講義でめちゃくちゃ面白かったです。

そして5日目の朝に作品を提出して午後に発表会、そして夜は懇親会という感じでした！


何を作ったんですか?

今回のCampの目標設定で自分はパストレの基礎の習得を目標に建てました。パストレやったことなかったのでやってみたかったんですよね...

なので初日と二日目でメンターの方々に教わった資料を基にパストレの基礎勉強をしてました

f:id:butadiene:20200913115227p:plain
パストレ勉強の鉄板、コーネルボックス

このCamp、最終的な成果物が「Shaderにより作成された30秒以上3分未満の動画の提出」という感じ（4日でShaderで30秒の動画作るの結構えぐいとは思う...）だったので、最終的な成果物として動画を作る必要がありました。

なので3日目と4日目で習得したばっかりのパストレを使ってなんとかリアルタイムで動く動画作品を作りました。最終的にはこんな感じの作品になりました。

www.youtube.com

f:id:butadiene:20200913121530p:plain
作った作品でオフラインレンダリングも試してみました　レンダリング時間10秒ぐらいです
f:id:butadiene:20200913121619p:plain
これもオフラインレンダリングを試したやつ

動画の編集はNGでしたが、後付けで音声を入れるのは許可されていたのでフリーのBGMをお借りして音を後付けしてます。



（余談ですが僕は音作れないマンなのでフリーのBGMを使ったのですけれど、曲も自作してる人がちらほらいてすごい...ってなりました。Shaderで音まで作ってきた寝る前さんはほんとやばかったです。https://twitter.com/nerumae3/status/1304736190134775808　なんでそんなみんな当たり前のように曲が書けるんですか...。）



デモシーンっぽい作品を作ることができて個人的に満足いくものができました。はじめてのパストレにしては悪くないんじゃないかな...?って思います、はい、たぶん...。

提出したのは上の録画した動画でしたが、もちろんリアルタイムでも一応動きます。Neortにコードで実際に動くやつをおいておいたのでよかったら見ていってください。

（リンクを踏むとめちゃくちゃグラボが酷使されるので十分気を付けてください）

neort.io

また、この作品の概要を説明するプレゼン資料も作りました（成果発表会でプレゼンする必要があったので） これも置いておきます

docs.google.com

（プレゼン資料にも書いたんですが、制作環境はJavaScript直書きです。WebでShader書いてたほかの人はみんなモダンな環境使ってて偉い～ってなりました。俺も早くTypeScript書けるようになりてえ...）





ちなみに今回のCampでは成果発表の際の投票によって上位に表彰がされるシステムが存在したのですが、なんと一位をいただくことができました。めちゃくちゃ嬉しいです。ありがとうございます。


感想

久しぶりに数日かけて全力で進捗を生むというムーブをしてめちゃくちゃ疲れたんですけど、とても楽しかったです。

念願のパストレも始めることができたし、Shaderの講義も面白かったのでとても良い経験になったと思います。

オフラインでやりたかったなあ....