Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会

Unity Shader 完全に理解した 勉強会の発表スライドです。
https://unity-fully-understood.connpass.com/event/403229/

Google Slides版
https://docs.google.com/presentation/d/1hrTC4kJ_r0STvNaDCtkwnPCOEgIfyOF_Qjnw0h3MV68/edit?slide=id.gbd0ef54b81_0_79#slide=id.gbd0ef54b81_0_79

オーディオビジュアルイベント「draw(tokyo); #4」に向けて、Unity URPで開発したVJシステムについて解説しました。
・Volumetric Light Shafts
・Compute Shader と GPU インスタンシングを用いた魚群の描画

Transcript

1. Unity6 URPによる 海底をテーマにしたVJシステムの解説 2026-10-02 Unity Shader 完全に理解した 勉強会 @gam0022 / Sho HOSODA
2. 自己紹介 ゲーム系のグラフィックスエンジニア Unityバイブル（書籍）のShader章を執筆 @gam0022（がむ） Unityゲーム プログラミング・バイブル 2nd Generation Unityバイブル R5夏号 2
3. VJとは VJ（Video Jockey , Visual Jockey ）とは 音楽イベントやライブ、クラブなどで DJ（Disk Jockey ）の音楽に合わせて リアルタイムで映像を操作・演出 する人 この人 音を出す DJ 絵を出す VJ 【画像出典】 かわいいフリー素材集 いらすとや 3
4. draw(tokyo); #4 でパフォーマンス • draw(tokyo); #4 ‣ ‣ ‣ オーディオビジュアルイベント イベント名がプログラミングの関数 • ジェネラティブ系のVJにフォーカス 今年 5/30 渋谷のCIRCUS TOKYOで開催 • 音楽（DJ） @0b5vr ‣ ‣ Shaderで音楽をライブ演奏 画素値を音の波形として利用 • 映像（VJ） @gam0022（私） ‣ ‣ 深海をテーマにしたVJシステム Unity6 URPで構築 4
5. 2分の映像を再生します ライトシャフト／魚群 に注目 5
7. Volumetric Light Shafts • ゴッドレイ的な表現 ‣ • 海底神殿の天井の隙間（穴）から光が差し込む Volumetric Fogを計算 ‣ ‣ ビルボード（ライトの板）を手動で貼り付けている訳ではない 天井の隙間から自動的にライトシャフトが発生 明るく調整 7
8. Volumetric Light Shaftsの実装 • 全画面のPostProcessとして実装 • レイマーチングで VolumetricFog を計算 ‣ シャドウマップを参照して シーンの遮蔽によるライトの影響を考慮すると ライトシャフトが自動的に現れる • 最適化 ‣ 低解像度で計算してからアップスケール • Bilateral upsample ‣ レイマーチングのステップ幅を遠景では広げる （ステップ数の削減） ‣ レイマーチングの開始位置に Blue Noiseのオフセットを加えることで ステップ数不足の縞模様を軽減 VolumeProfileでパラメーター調整 8
9. Volumetric Light ShaftsとAI利用 • AIエージェントを利用 ‣ ‣ Claude Code, Codex Unity CLI Loop • C#コードはAI実装をそのまま採用 ‣ RenderGraphやVolumeProfile関連コード ‣ 定型だが、実装量が多くなりやすい • 3ファイル、11クラス、618行、3万文字 ‣ AI登場以前はコードの自動生成など工夫をしていたが、AIで楽になった • Shaderコードは大部分を手動で書き直した ‣ 冗長すぎ + パラメーター定義が好みではなかった 9
10. 魚群（Boids） • Compute Shader（GPGPU）で魚の位置や速度を計算 ‣ Boidsの3つの基本ルールに基づいて計算 • 分離（衝突を避ける） • 整列（速度をそろえる） • 結合（群れの中心へ向かう） • GPUインスタンシングで一括描画 ‣ Graphics.RenderMeshIndirect • Graphics.DrawMeshInstanced* 系は旧APIなので注意 ‣ 参考資料（過去の自分の発表資料） • モバイル向け大量描画テクニック | SYNC 2022 10
11. 魚群（Boids） • 魚のモデルはプロシージャル ‣ GPUインスタンシングでCubeを描画 ‣ Cubeのシェーダー内でレイマーチング • レイマーチング: 距離関数でモデリングした3Dを可視化する技術 • uRaymarchingを利用 ‣ 魚だけでなく背景の神殿もレイマーチングで描画 11
12. 魚群（Boids）とAI利用 • C#やComputeShaderはAI実装をそのまま採用 ‣ Boids計算などは一発で動くものができた • 描画用のレイマーチングShaderは手動で書き直した ‣ 目が片方しかなかったり、胸ビレが潰れてたり ‣ 全体的にバランスが悪く感じた 12
13. 魚群（Boids） • 最適化 ‣ 空間グリッドによる近傍探索 • 隣接セルだけを探索し、全個体との総当たり比較を削減 ‣ 視錐台カリング • 画面外の個体の描画をスキップ 13
14. 魚群（Boids） • VFX Graphを採用しなかった理由 ‣ ノードベースとAIの相性が悪そうと判断（今年の5月時点） ‣ 最新AI（Opus 5.5）なら（工夫すれば）VFX Graphも扱える Unity CLI Loop の作者のポスト https://x.com/m_hatayama/status/2105129054655709613 14
15. AI利用の感想 • グラフィックスプログラミングの経験はAI実装でも役立った ‣ AIが詰まった時に適切な指示をする場面 • 正解がある作業の方がAIに任せやすい ‣ ‣ 定型的なコード（ポスプロのVolume対応） 有名なアルゴリズム（Boids） • アルゴリズムの名前などの専門知識はAI時代でも役に立つ • ShaderのAI丸投げはできなかった ‣ ‣ ‣ 自分の好みの書き方やビジュアルとの乖離が大きい 細かく指示するより、自分で書いた方が速い 「とりあえず動く」状態が爆速で作れるので、作業時間を短縮できる 15
16. draw(tokyo); #4 パフォーマンス動画 • 合計5つのシーンを作成 ‣ 発表時間の都合上、今回はシーンを1つだけ紹介 海溝 WORMHOLEトンネル 海上 • YouTubeでフル版とダイジェスト版を公開中！ ‣ ‣ 0b5vr x gam0022 @ draw(tokyo); #4 | GLSL Techno Live Set (Crash-free edit) 【Digest】0b5vr (Live) × gam0022(VJ) | draw(tokyo); #4 • 「gam0022 youtube」で検索 16
17. END. 17