YouMind
ログイン

Video 2 GLSL: リファレンス動画を編集可能な世界に変換

@gokayfem
英語2026年10月19日
401K
243
20
10
241

TL;DR

本記事では、AI コーディングエージェントを用いてリファレンス動画を分析し、カメラ、ライティング、モーションを動的に制御できる編集可能なプロシージャルな GLSL シェーダーとして再構築するワークフロー「Video 2 GLSL」を紹介します。

動画は、あなたが変えられる世界の出発点になり得ます。コーディングエージェントにリファレンスを与え、フレームを分析させ、そのシーンをプロシージャルコードとして再構築するよう依頼します。そしてカメラ、ライティング、マテリアル、モーションを変更し、再度レンダリングするのです。

これが Video 2 GLSL の背後にあるアイデアであり、私が shader-skills を中心に開発してきた「リファレンスからシェーダーへ」のワークフローです。興味深いのは、このプロセスのどれほどが次の動画制作に引き継げるかという点です。

https://x.com/gokayfem/status/2111907592129671505

連携する2つの要素

shader-skills は、コーディングエージェントにグラフィックス技術のライブラリ、動作するサンプル、そしてプロシージャルシェーダーを構築・検証するためのプロセスを提供します。Video 2 GLSL はそこにリファレンス駆動型のタスクを追加します。クリップを分析し、仕様を導き出し、シーンを構築し、結果を元のクリップと比較するという流れです。

このスキルは Claude Code、Codex、Cursor、Gemini などのコーディングエージェントに対応しています。再利用可能なパーツには、形状、ノイズ、マテリアル、地形、建物、水、雲、ライティング、色などが含まれます。これらはオリジナルのシーン、インタラクティブな実験、動画の再現などに活用できます。

スタンドアロンの Video 2 GLSL ターゲットの場合、成果物は Shadertoy 互換の単一フラグメントシェーダーになります。ジオメトリは数学的に記述され、サーフェスはプロシージャルに生成され、アニメーションは時間によって駆動されます。リファレンス動画は視覚的な仕様を提供しますが、そのフレームがシェーダー内で直接再生されるわけではありません。

gokaygokay - inline image
gokaygokay - inline image
gokaygokay - inline image

まずは動画を仕様に落とし込む

最初のステップは、信頼性の高いフレーム抽出です。動画の URL やファイル名だけでは、エージェントが作業できる材料はほとんどありません。実際に何が映っているのか、そしてそれが時間とともにどう変化するのかを検証する必要があります。

再利用可能なプロンプトでは、シーンコードの前に REFERENCE.md を作成するよう求めます。具体的には、クリップの基本情報、ショットのタイムライン、オブジェクトの一覧、被写体の比率、モーション、カメラフレーミング、ライティング、サンプリングしたカラーパレットなどです。また、正確に再現できない要素を特定し、承認を得るための代替案を提案するようエージェントに指示します。

観察すべきポイントはクリップによって変わります。キャラクターのショットであれば、接地面、歩幅、二次運動が必要です。建築のショットであれば、比率、遠近感、カメラ移動が必要です。水のショットであれば、水面の動き、反射、奥行きに注意を払う必要があります。同じ分解プロセスを用いることで、それぞれに具体的な出発点が与えられます。

テスト済みのグラフィックス構成要素をエージェントに渡す

もっともらしく見える数式であっても、安全でないディスタンスフィールド、不安定なノイズ、不正確な色を生み出すことがあります。こうしたエラーは、大規模なシーンの中に埋もれると切り分けが難しくなります。

shader-skills には現在、20 の GLSL モジュールにわたって 186 個の関数が含まれています。エージェントは技術を検索し、ライブラリ関数を名前で呼び出し、バンドラーを使って依存関係を 1 つの自己完結型シェーダーにまとめることができます。

ライブラリには、形状用の符号付き距離関数(SDF)、それらを組み合わせる演算子、プロシージャルノイズとパターン、レイマーチング用ヘルパー、シェーディング、大気表現、色変換が含まれます。テンプレートでは、これらの要素を完全なシーンの中でどのように連携させるかが示されています。

検証は WebGL2 でのコンパイルと、GPU 上での数値的特性を対象としています。ディスタンスフィールドの符号と範囲、ノイズの微分、色の往復変換、その他チェック可能な挙動を確認します。レンダリングされたサンプルによる視覚的な確認も加わります。これらのチェックにより各パーツの信頼性は高まりますが、最終的なシーンにはやはり目視検査が必要です。

gokaygokay - inline image

レンダラーを中心としたフィードバックループを構築する

ワークフローは、ブロッキングとタイミング、モーション、被写体のディテール、環境のディテール、光と色、リファレンスとの一致、パフォーマンスという順序で進みます。各マイルストーンで、評価できる何らかの視覚的成果物が生まれます。

リファレンスとレンダリング結果は、同じタイミングとフレーミングで比較すべきです。構図にはフルフレームを、オブジェクトの形状やマテリアルにはクロップを、モーションにはフレーム連続画像を使用します。魅力的な 1 枚の静止画でも、足が滑っていたり、カメラが飛んでいたり、インタラクションが早すぎたりする問題を見落としてしまうことがあります。

プロンプトでは反復的な批評を求めています。最も大きな 5 つの違いを特定し、修正して、再度レンダリングします。測定値がこのレビューを支えます。被写体のサイズや地平線の位置はカメラのエラー診断に役立ち、サンプリングした色はカラーグレーディングの診断に役立ち、モーションプローブは不連続点の発見に役立ちます。

ここでは迅速なイテレーションが重要です。低解像度のプレビューやオブジェクト単体の表示を使えば、負荷の高いレンダリングに進む前に比率を修正できます。マテリアルやライティングを磨く前に、シルエットとオブジェクトの比率を確認しましょう。

gokaygokay - inline image

複雑なシーンは役割ごとに分割する

大規模なシーンは、複数のエージェントが被写体、環境、小道具、モーション、ライティングといった別々の部分を担当することで恩恵を受けられます。分割方法はシーンの要件に従うべきです。

共通インターフェースがあれば、それぞれの作業に互換性が保たれます。スケール、座標系、タイミング、マテリアル識別子を合意し、各エージェントに担当ファイルの所有権を与え、実際のレンダリングによる証拠を要求します。オーケストレーターが各パーツを統合し、結合された画像をリファレンスと比較して評価できます。

ここで再利用できる教訓はレビューの構造です。誰かが必ずショット全体を評価しなければなりません。細部まで作り込まれた建物や説得力のあるキャラクターであっても、構図としては間違っている可能性があるからです。

実験から明らかになったこと

これまでの取り組みには、アクションが変化する浮遊島のシークエンス、インタラクションを含む村のシークエンス、無限に続くストリートのループが含まれます。それぞれの要件は異なります。イベントのタイミング、接地面の固定、カメラトランジション、正確な反復は、それぞれ異なるシーンロジックを必要とします。完成度や視覚的品質にもばらつきがあります。

しかし、いずれにおいても同じプロセスが有効でした。抽出、測定、組み立て、レンダリング、比較、修正です。リポジトリにはプロシージャルな都市、地形、水のサンプルも含まれており、別のインタラクティブ実験では有機的な形状やブラックホールの映像を探求しています。

編集可能になるものと、依然として不確かなもの

シーンがコードとして存在するようになれば、カメラ位置、ライトの方向、パレット、タイミング、プロシージャルなディテールに対するコントロールを用意できます。ストリートの実験では、同じ構築済みセットから別のカメラビューを表示できることを実証しました。

一方で、そうした新しいビューは再構築の限界も露呈させます。リファレンスが示すのは世界の一部に過ぎません。隠れている面は推測する必要があり、AI 生成動画にはジオメトリの変化や矛盾したモーションが含まれている可能性があります。ある角度から見て説得力のある一致が得られたとしても、完全かつ正確なシーンが確立されたわけではありません。

パフォーマンスもシーン固有の結果となります。詳細なレイマーチングジオメトリ、植生、影、反射は処理負荷が高くなる可能性があります。ターゲットマシンでフレーム時間を計測し、ショット内のさまざまな瞬間を確認し、目標未達の場合は残りの視覚的差異と併せて報告します。

Video 2 GLSL は再利用可能なオーサリングワークフローです。任意の映像に対する信頼性については、さらに広範な評価が必要です。現時点での取り組みは、いくつかの具体的な実験と、改善のための共通手法をもたらしてくれました。

gokaygokay - inline image

あなた自身のリファレンスで試してみる

Claude Code の場合は、マーケットプレイスを追加してプラグインをインストールします。

<code-segment id="0" lang="text">

claude plugin marketplace add gokayfem/shader-skills

claude plugin install shader-skills@shader-skills

</code-segment>

その他の対応エージェントの場合は以下のコマンドを実行します。

<code-segment id="1" lang="text">

npx skills add gokayfem/shader-skills

</code-segment>

prompts/video-to-shader-prompt.md を使用し、リファレンスクリップ、出力名、ターゲットマシンを指定して、何を維持し何を省略してもよいかを定義します。実装を開始する前に、分解内容を確認してください。

私は今後も、視覚的リファレンスを編集可能なプロシージャルシーンへと変換する信頼性の高い方法を目指して、この取り組みを続けていきたいと考えています。再構築のたびに、より良いツール、より良いテスト、そして次回に再利用できる技術が残されていくはずです。

リポジトリ: github.com/gokayfem/shader-skills

ワンクリック保存

YouMindでバイラル記事をAI深読み

ソースを保存し、的を絞った質問をし、主張を要約して、バイラル記事を再利用できるノートに変えます。すべてを1つのAIワークスペースで行えます。

YouMindを探索
クリエイターのために

あなたの Markdown をきれいな 𝕏 記事に

自分の長文を投稿するとき、画像・表・コードブロックを 𝕏 向けに整形するのは手間がかかります。YouMind は Markdown 全体を、そのまま投稿できるきれいな 𝕏 記事に変換します。

Markdown → 𝕏 を試す

解読すべきパターンをもっと

最近のバイラル記事

バイラル記事をもっと見る