GLSLでVJをした話

レイトレ合宿11のセミナーでGLSLライブコーディングによるVJについて話しました。
セミナーのテーマの分散を増やすことができました（意訳: レイトレとの関連は薄い内容です）。

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

Transcript

1. GLSLでVJをした話 2025-11-14 レイトレ合宿11 セミナー @gam0022 / Sho HOSODA
2. DJ/VJとは？ 「DJ」は「ディスク・ジョッキー（Disk Jockey）」 の略称で、音楽を選曲し、ミキサーなどを通して音を つないだりアレンジしたりして、場を盛り上げる人 「VJ」は「ビデオジョッキー（Video Jockey）」ま たは「ビジュアルジョッキー（Visual Jockey）」の 略称で、音楽イベントやライブ、クラブなどで、音楽 に合わせてリアルタイムで映像を操作・演出する人 2
3. VJとはDJの音楽に合わせて映像を出す人 3
4. draw();について 4 ジェネラティブVJのイベント
5. 今年2回VJをやった • draw(tokyo); #2 ‣ 2025/3/22 渋谷Circus Tokyo ‣ DJ とうふおさおい（@toufu0301） ‣ ※VJデビュー • draw(tokyo); #3 ‣ 2025/10/12 渋谷clubasia ‣ DJ さだきち（@sadakkey） 5 2回ともほぼ同じシステム構成（後述）でVJ
6. VJの様子 draw(tokyo); #2 6 VSCode + Sh4derJockeyでGLSLライブコーディング MIDIコントローラーでパラメーターを制御
7. draw(tokyo); #3 DJ（さだきち） & VJ（gam0022） ダイジェスト版（点滅注意⚡） 7
10. Sh4derJockey • GLSLライブコーディングのVJ専用ソフトウェア ‣ Rust実装🦀 ‣ https://github.com/slerpyyy/sh4der-jockey • GLSLファイルのホットリロードと描画機能 ‣ テキストエディター機能はない ‣ 任意のテキストエディタと組み合わせて使う • 特徴 ‣ マルチパスのFragment ShaderとComputeShader ‣ 任意のテクスチャ使用可能 ‣ MIDIコンをuniformとして渡せる ‣ FFTで音楽の波形を解析 10
11. 音楽とBPM同期する仕組み Sound2Light 音楽のBPMを解析してくれるソフト 11
12. 音楽とBPM同期する仕組み • 課題：対応するプロトコルが違う ‣ Sound2Light • OSC（OpenSound Control）でBPM情報を出力 • TCP上でデータをやとりするプロトコル ‣ Sh4derJockey • MIDIコントローラー経由でしか値を取得できない • 解決策：OSCからMIDIに変換するツールをnode.jsで実装 ‣ https://github.com/gam0022/osc-to-midi.js ‣ MIDIだと7bitの値しか送れないので、2チャンネルにpacking • 127を超えるBPMに対応（14bitの整数） 12
13. 音楽とBPM同期する仕組み 13
14. 音楽のBPMと同期する仕組み 詳細については、以下の記事で紹介 draw(tokyo); #2でVJデビュー！（GLSLライブコーディング） | gam0022.net https://gam0022.net/blog/2025/04/16/draw2/ 14
15. MIDIコンのレイアウト 15 0 キック 1 2D反転 2 2D合成 3 激 4 輪郭 5 赤黒 6 7 8 9 S2D 10 S3D 11 Sメーター 12 宇宙 13 14 15 TC Wall 16 TC Shader 17 TC Warning 18 WH TUNNEL 19 WH SEA 20 WH SNOW 21 CAM1 22 CAM2 23 CAM3 24 鏡X 25 鏡Y 26 万華 27 鏡円 28 UV clamp 29 TC AUTO 1 30 TC AUTO 2 31 TC AUTO 3 0 点滅 1 BPM 調整 2 残像 3 時間Glitch 4 Glitch Mute 5 PRM1 6 PRM2 7 PRM3 8 glitch 9 voronoi 10 cyclic 11 slice 12 xshift 13 invert 14 lens 15 END UV加工系 ポストエフェクト シーン切り替え カメラ 切り替え ポスト エフェクト 特殊シーン 切り替え 色収差系ポストエフェクト シーンごとに意味が変わる パラメーター 赤：スライダー 青：ボタン
16. MIDIコンのレイアウト 16 0 キック 1 2D反転 2 2D合成 3 激 4 輪郭 5 赤黒 6 7 8 9 S2D 10 S3D 11 Sメーター 12 宇宙 13 14 15 TC Wall 16 TC Shader 17 TC Warning 18 WH TUNNEL 19 WH SEA 20 WH SNOW 21 CAM1 22 CAM2 23 CAM3 24 鏡X 25 鏡Y 26 万華 27 鏡円 28 UV clamp 29 TC AUTO 1 30 TC AUTO 2 31 TC AUTO 3 0 点滅 1 BPM 調整 2 残像 3 時間Glitch 4 Glitch Mute 5 PRM1 6 PRM2 7 PRM3 8 glitch 9 voronoi 10 cyclic 11 slice 12 xshift 13 invert 14 lens 15 END 赤：スライダー 青：ボタン
17. 困ったこと① • 手元が真っ暗すぎて見えない😨 ‣ 光るゲーミングキーボードで良かった ‣ MIDIコンは見えなかった（iPhoneのライトで照らした） 17 暗転中だとほぼ真っ暗
18. 困ったこと① • 手元が真っ暗すぎて見えない😨 ‣ 光るMIDIコンの必要性を感じた 18 【画像出典】 https://www.heavym.net/ja/explore-the-best-midi-controllers-for-vjs/ LaunchPad MKII
19. 困ったこと② • FPSが出ない😨 ‣ 原因：VJソフトの多重起動 • きなこもちさんのノートPCレンタルしていた • それぞれでのユーザでログインしてVJソフトを起動していた • GPUリソースを奪い合うことに ‣ 解決策 • その場で内部解像度を下げた そもそもPCのスペック不足もあった 2回目のVJのときはシェーダーを最適化 19
20. 困ったこと③ • GLSLのコンパイル中に映像が止まる😨 ‣ 自宅のデスクトップPCなら一瞬でコンパイルできたが、 ノートPCだと10秒くらい映像が止まる • 解決策 ‣ 3Dの複雑なシェーダーのライブコーディングは諦めた • 2Dのシェーダーとシンプルな3Dシェーダーのみ ライブコーディング • 重いシェーダーはMIDIコンのパラメーターで制御 20
21. 困ったこと④ • 本番直前になってVJシステムが動かない😨 ‣ Sh4derJockeyにBPM情報が送られてこない😭 ‣ 複雑なシステム構成が仇に ‣ ソフトの再起動やケーブルの抜き差しをしても治らず… ‣ 頭が真っ白に🤯 21
22. PC再起動で治った👍 22
23. まとめ • GLSLによるVJをした ‣ ライブコーディングと事前の作り込みのハイブリッド ‣ 音楽のBPMに自動同期するシステムを構築 ‣ MIDIコンで音楽に合わせたシーンやエフェクトの切り替え • 当日のトラブルは怖い ‣ 再起動は最強 23
24. END. 24
25. FAQ • レイトレとの関連は？ ‣ レイは飛ばしている • Sphere Tracing（レイマーチング） • 他にはどんなVJシステムがあった？ ‣ Unity ‣ TouchDesigner ‣ 自作システム 25