「ストレンジャー・シングス」のオープニングタイトルのような映像が欲しかったんです。真っ黒な背景に光る細い赤橙色の線。縁はふんわりとにじみ、まるでその中を飛んでいるかのようにカメラの横を流れていく。ロゴでもフォントでもなく、あの空気感です。巨大で、まだ形になりきっていない何かが、内側から光っているような。
そこでChatGPT Work（OpenAIのChatGPTデスクトップアプリにあるエージェントモード）を開いて、シェーダーを作ってもらうことにしました。シェーダーコードは1行も書いていません。欲しいものを説明すると、ChatGPTが書き、Visiboxがそれを音楽に反応させながらライブで動かす。テキストエディターには一度も触れていません。この動画のポイントはそこに尽きますが、じっくり見ていく価値があります。面白いのは完成したビジュアライザーではなく、そこにたどり着くまでのやりとりだからです。
Visiboxのビジュアライザーとは
Visibox 5では、ビジュアライザーという機能が加わりました。GPUでリアルタイムに生成されるクリップで、通常のビデオクリップと並んでグリッド上に置けます。音楽に合わせて跳ねるオーディオリアクティブなものもあれば、ただ流れ続けるものもあります。どちらにしても、プロジェクト内のほかのクリップとまったく同じようにトリガーできます。
形式は2種類あります。MilkDropは古いほうで、Winamp時代に生まれました。ネット上には.milkプリセットの膨大なライブラリがあり、Visiboxにそのままドラッグして使えます。ISFは新しいほうで、VJソフトウェアVDMXの開発チームが作った形式です。1つのシェーダーファイルの先頭に、調整できる入力を宣言する小さなヘッダーが付いています。Visiboxはどちらにも対応していますが、今回はISFを使いました。AIがきれいに書けるのは、まさにこの種類のファイルだとわかったからです。
MCP接続をオンにする
まずはVisiboxとAIアシスタントがつながっている必要があります。設定は一度だけ。「設定」の「AIツールに接続」で行います。Visiboxがインストール済みのAIアプリを探し、それぞれに自動で自分を登録します。これでChatGPT（あるいはClaudeなど、使っているAI）がプロジェクトを参照し、ビジュアライザーの形式を読み、プリセットを作り、さらには再生（音量、フルスクリーン、クリップのトリガー）まで操作できるようになります。接続を確認するために、ChatGPTにVisiboxにアクセスできるか聞いてみると、現在の音量レベルを答えてくれました。
ひとつ大事な点があります。Visiboxは自分のパソコン上で動くローカルツールとして接続するので、そこに届くデスクトップ版のAIアプリが必要です。ブラウザで開くChatGPTのウェブサイトからは、Visiboxのようなローカルアプリは見えません。そのため、chatgpt.comではなく、OpenAIのデスクトップアプリ（最近Codexを取り込んだのと同じアプリ）のモードのひとつであるChatGPT Work、またはClaude Desktopを使います。ここからは単にChatGPTと呼びます。
以前の動画ではClaude Desktopで同じことをしましたが、ワークフローはほぼ同じでした。
コツは、まずAIに元ネタを説明させること
コードを頼む前に、「ストレンジャー・シングス」のオープニングをChatGPT自身の言葉で説明してもらいました。何かを作り始める前に、コンセプトをすり合わせておくためです。この一手間が、予想以上に効きました。
返ってきたのは、ほとんどショットの描写に近いものでした。ほぼ完全な暗闇、カメラの横を流れる細い赤橙色の線、柔らかなブルーム、わずかなぼかし。さらに、音への反応についての独自の提案まで付いていました。白紙から始めるのではなく、具体的なたたき台に反応できるようになったわけです。
残すところと変えるところを伝えました。文字の形ではなく幾何学的な断片にすること（番組をそのまま再現するのに近すぎるし、正直そのほうが使い勝手もいい）。あとで青系にも変えられるように色を設定可能にすること。そして、常に前へ進み続ける動き。古い図形がフレームの端へ流れ去るそばから、暗闇から新しい図形の層が現れてくるようにすることです。
ほかのどれよりも大事だった注文がひとつあります。フレームを決して空にしないこと。密度の設定がどうであれ、奥行きのどこかに必ず図形があるようにする。生きているように感じられるビジュアライザーと、何かが起きるのを待っているように感じられるビジュアライザーの違いは、そこにあります。
ChatGPTは自分から、このコンセプトに「Ember Geometry」という名前を付けました。コンセプトが固まったところで、実際のコーディングのためにより高性能な推論モデルに切り替え、新しいISFビジュアライザーとしてプリセットを作るよう指示しました。
最初のビルドは真っ黒な画面
ChatGPTは数分間作業を続けました。その間ずっとMCP経由でVisiboxとやりとりし、ISFの仕様を読み、シェーダーを書き、新しいプリセットとして登録していきます。そこでVisiboxに切り替えて確認してみると。
真っ黒な画面。何も映っていません。
たいていの動画ならカットする場面ですが、あえて残しました。見えている状況（真っ黒な画面で、ビジュアライザーが表示されない）をそのままChatGPTに伝え、構文を自分でチェックするよう頼みました。すると、予約語の不正な使用に関するフラグメントシェーダーのコンパイルエラーを見つけて修正しました。2回目で、ついに表示されました。光る赤橙色の線がカメラの横を流れていく、説明したとおりの空気感です。修正にかかったのは、メッセージ1通と数分だけでした。
反応しすぎから、ちょうどいい反応へ
音にどう反応するか見るために音楽をかけてみると、反応が激しすぎました。ベースに合わせて動きが逆戻りするので、前へ進み続ける感覚ではなく、全体が前後にガクガク揺れているように見えます。最初の10秒くらいは見ていて楽しいのですが、そのあとは気が散るだけです。
ChatGPTに問題を伝えました。音への反応が前進の動きを上書きしてしまっているので、前へ進む動きには手を付けないでほしい。低音や高音で光やノイズの粒子を動かすのはいいけれど、カメラの動きは変えないでほしい、と。1分ほどで更新が届きました。落ち着きがあってコントロールされていて、それでいて音楽が鳴れば、ちゃんと生き生きと動きます。
プロジェクトに組み込むのは簡単でした。Ember Geometryをほかのクリップと同じように曲にドラッグし、フルスクリーンで再生すれば完成です。
シェーダーそのものより大事なこと
GLSLの知識も、ISFのパラメーター構文も、シェーダーのコンパイルについての知識も、一切必要ありませんでした。必要だったのは、欲しいものを具体的に伝えること、うまくいっていない点を正直に伝えること、そして最初の結果で妥協せずにやりとりを重ねることです。説明して、見て、直す。このループこそが本当のスキルで、ChatGPTに限った話ではありません。MCP接続をオンにし、コードを書く前にコンセプトをすり合わせ、最初のビルドには1つか2つ注文を返すつもりでいること。それは失敗ではなく、ごく普通のことです。
同じやり方を、フルスクリーンの映像ではなくオーバーレイエフェクトに使ってみたいなら、姉妹編の動画Overlay Effects With AIをご覧ください。セッションの記録よりも順を追った手順で進めたいなら、文章版のレシピAI生成ビジュアライザーをゼロから作るもあります。
Visiboxには14日間の無料Pro試用が付いています。ビジュアライザー、MilkDrop、ISFについて詳しくはマニュアルをご覧ください。
