シェーダーもGoで書く！ Ebitengineで作る リアルタイムGPUシェーダーエディタ

https://github.com/cyokozai/kagelife

Transcript

1. シェーダーもGoで書く！ Ebitengineで作る リアルタイムGPUシェーダー エディタ 2026.06.13 Ramble vol.3
2. 目次 • 自己紹介 • VJ に憧れて • Ebitengineとは • 個人開発のVJツール”KageLife”の紹介 • (時間があれば)デモ
3. 井上 裕介 a.k.a cyokozai 千葉工業大学大学院 情報科学研究科 情報科学専攻 修士２年 ❏ ネットワークコンテンツ研究会 Nekko Cloud Team ❏ 株式会社スリーシェイク sreake事業部 学生インターン ❏ クラウドネイティブ会議実行委員
4. 趣味: DJ (House, EDM, etc) クラウドネイティブ会議の 懇親会でもDJを担当しました
5. VJ に憧れて
6. VJ (Video Jockey) • 音楽に合わせてリアルタイムに 映像を演出・操作する役割 • 映像クリップ, CG, カメラの映像 などをその場でミックス • 近年ではシェーダ言語を使った パフォーマンスも有名 https://www.youtube.com/watch?v=vCMrviGfzpE&list=RDvCMrviGfzpE&start_radio=1 Goodbye FROGにて落合氏による DJ / VJ の様子
7. VJもできるように なりたい
8. KodeLife • Hexler社が開発しているリアルタイム のGPUシェーダーエディタ • コードをタイピングした瞬間に裏で コンパイルされ即座に映像出力 • コーディングしながらVJできて体験 が良い https://hexler.net/kodelife
9. シェーダー言語 (Shader Language) • GPUに対して画面への描画方法や計算を指示するための プログラミング言語 • 代表的な言語 ◦ GLSL: OpenGLやWebGLで標準的に使われる ◦ HLSL: WindowsのDirectX環境で使用、PCゲーム開発などが主流 ◦ WGSL: 次世代のWeb描画規格であるWebGPU向けに設計された https://ja.wikipedia.org/wiki/%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E
10. GLSLの特徴 • 並列処理を前提に組まれた言語 • 画面上の座標と最終的な色を計算し出力することに特化 • 空間座標や色を表現するベクトル (vec3, vec4) や回転など を計算する行列 (mat4) などの数学用データ型を標準装備 • 構文はCに近いのでコツをつかめば....?🤔
11. シェーダー言語むっず.... • レンダリングエンジンの知識+線形代数 • パフォーマンスにはある程度慣れが必要 入門してすぐ挫折
12. Ebitengineとは
13. A dead simple 2D game engine for Go https://ebitengine.org/ja/
14. Ebitengine ぷちConf #4 に参加したことがきっかけ • Ebitengineを使ったシェーダーのデモを 見て「これだ」と思った • １つのコードで全ての環境で動かせる！ • Goライクなシェーダー言語 Kage がある！ • ついでにGoを書く練習になるぞ
15. 個人開発のVJツール ”KageLife”の紹介
16. KageLifeとは • Goの構文でシェーダーを操作するレンダリングエンジン • Kage言語を用いてシェーダーを操作する • 編集→コンパイル→映像出力が可能 • エディタ機能は省いている https://github.com/cyokozai/kagelife
17. //kage:unit pixels package main var Resolution vec2 func Fragment(dstPos vec4, srcPos vec2, color vec4) vec4 { uv := dstPos.xy / Resolution return vec4(uv.x, uv.y, 0.0, 1.0) } Kage言語とGLSLの比較 kage #version 300 es precision highp float; uniform vec2 Resolution; out vec4 FragColor; void main() { vec2 uv = gl_FragCoord.xy / Resolution; FragColor = vec4(uv.x, uv.y, 0.0, 1.0); } GLSL
18. 今後実装していく機能 • MIDI 連携 • Ableton などの DAW と連携 • 一部APIをGUI操作可能に • その他、欲しい機能募集
19. デモ