🏁 はじめに
2025年11月1日に開催された 「Gaussian-VRM Hackathon」 に参加しました。
主催は shi3z（@shi3z） さん。
会場では開発者によるスキャン体験や技術解説が行われ、
Gaussian-Splatting × VRM × リアルタイム表現 をテーマに、
参加者が一日で新しい体験を作り上げました。
📅 開催時間： 10:00〜17:00
📍 会場： 現地
👤 Gaussian-VRM 開発者：近藤 生也（@namahoge）
- 近藤 生也（@namahoge）
- 筑波大学 デジタルネイチャー研究室 博士課程
- 「Gaussian-VRM」開発の中心人物
近藤さんは、スマートフォンで人物をスキャンし、
数分でGaussian-Splatベースの3Dアバターを生成 できる仕組みを構築。
「Gaussian-VRMは、誰でも“自分自身を3D化”できる未来への入り口」
オープンソース化をきっかけに、アーティスト・研究者・開発者が自由に
VRMアバターをリアルタイム可視化する時代が始まりました。
今回のハッカソンも、その発展系として開催されています。
当日は近藤さんによるScaniverseアプリによる人物スキャンも行ってくれました。
🧩 開発した作品：「Gaussian-VRM + MIDI Reactive System」
本作品は、Gaussian-VRM をベースにしたブラウザ実行型の
音楽・MIDI連動リアルタイムビジュアル演出システム です。
GitHubからGaussian-VRMをクローンし、このリポジトリを置くだけで体験可能。
🔗 GitHub: kumi0708/gaussian-vrmHackathon20251101
🎛 コンセプト
-
MIDIデバイス（nanoKONTROL2 / nanoPAD2 / nanoKEY2）
→ モデルやアニメーション、ポストエフェクトをリアルタイム制御 -
Web Audio API により音声を解析し、
モデルの粒が音に合わせて呼吸・波打つ・膨張するように変化 -
Three.js + Gaussian-VRM + WebMIDI + WebAudio
を統合した、ブラウザ完結型ライブVJシステム
🧠 使用技術スタック
| カテゴリ | 技術 |
|---|---|
| 3Dレンダリング | Three.js, Gaussian-VRM |
| モデル制御 | GVRM.load(), FBXアニメーション切替 |
| 音声解析 | Web Audio API（FFT / 周波数帯域抽出） |
| 入力デバイス | WebMIDI API（nanoKONTROL2 / nanoPAD2 / nanoKEY2） |
| エフェクト制御 | UnrealBloomPass, GlitchPass, FilmPass, ShaderPass |
| 言語 / 環境 | JavaScript (ES Modules), WebGL2 |
🎯 自作作品の技術と苦労した点
🎧 ① 音声解析（Web Audio API）
AnalyserNode.getByteFrequencyData() を用いて
bass / mid / high の3帯域を抽出し、モデルの形状に反映。
const { bass, mid, high } = audioInput.getFrequencyBands();
const ampFactor = 1.0 + mid * 10.0;
for (let i = 0; i < cov.length; i++) cov[i] = base0[i] * ampFactor;
低音に反応する“呼吸感”、中音のリズムによる“鼓動”、
高音の“空気の震え”まで再現。
🎚 ② MIDIデバイスの多重干渉の解消
WebMIDIの複数デバイス同時接続では衝突が起きやすく、
nanoKEY2とnanoPAD2が同じノート番号で競合。
if (name.includes("nanokontrol")) this._onNanoKONTROL(e);
if (name.includes("nanopad")) this._onNanoPAD(e);
if (name.includes("nanokey")) this._onNanoKEY(e);
デバイス名で明確に分離し、
それぞれの役割（モデル／アニメ／ポスト）を安定化。
🧍♀️ ③ モデルとアニメーションの引き継ぎ
GVRMのモデル切替時に一瞬Tポーズが出る問題を解決。
再生中のアニメーションを次モデルへ引き継ぐ設計に。
await newModel.changeFBX(currentFBX);
newAction.time = currentTime;
これにより“生きているモデルが自然に変わる”感覚を実現。
🌈 ④ Gaussian粒子制御の拡張（wave / noise / breath / bubble）
Gaussian-Splatのcovariancesを直接操作して
音の強さに応じた拡縮・振動・膨張を実現。
- wave（縦波）
- noise（微振動）
- breath（呼吸）
- bubble（低音に合わせた膨張）
各モードが音声解析と同期してリアルタイムに切り替わる。
🎞 ⑤ ポストエフェクト（Bloom / Film / Glitch）
EffectComposer によるパス管理を改良し、
nanoKEY2でBloom, Film, Glitch, Scanline, ColorShiftを即切替。
this.toggleEffect("bloom");
this.toggleEffect("glitch");
this.toggleEffect("none");
GPU負荷軽減のため、切替時に常にパスをリセットする設計。
💫 作品の仕組み
nanoKONTROL2 → モデルエフェクト制御（波・ノイズ・呼吸・膨張）
nanoPAD2 → モデル／アニメーション切替
nanoKEY2 → ポストエフェクト切替（Bloom, Glitch, Film, etc.）
AudioInput → 音声入力を解析してモデルを“音で動かす”
🏆 ハッカソン作品紹介
🥇 優勝作品：「スーパー説教ゲーム」
📍 @GOROman さん
音声・モーション・3Dスキャンを融合した体験型作品。
“説教の臨場感”を3Dで再現した異彩の内容で会場を沸かせました。
🧑💻 参加者作品①：「かんぷれで3Dアバターバンドセッション」
📍 @necobut さん
イカレたメンバーを召喚して音楽をセッション！
🧑💻 参加者作品②：「村シミュレーション」
🎉 当日の雰囲気
10時から始まった会場は最初から熱気に包まれていました。
開発者によるGaussianスキャン実演、技術解説、ライブ開発。
🌈 可能性と今後
Gaussian-VRMは、
「自分自身をメディア化する時代」 の基盤技術です。
今後の展開としては：
- ライブ演出・VJツールへの展開
- AI生成との自動演出連携
- 展示・舞台表現・SNS連携などへの応用
💡 “ブラウザで動く3Dの生命”
その未来を加速させるのが、Gaussian-VRM。
💻 体験する
git clone https://github.com/naruya/gaussian-vrm
git clone https://github.com/kumi0708/gaussian-vrmHackathon20251101
gaussian-vrm のルート直下に配置し、
project/index_all.html をブラウザで開くだけで体験可能。
音に反応し、モデルが呼吸するように動きます。
✨ まとめ
- 音・光・モデルがリアルタイムで融合するライブアートを実現
- Gaussian-VRMの潜在力をブラウザで体験
- WebMIDI × WebAudio × WebGL による次世代表現の可能性
🕊️ デジタルの粒が、音楽に合わせて呼吸する。
その瞬間こそ、Gaussian-VRMの真価。
💬 改造・派生・コメント大歓迎！
あなたの音とビジュアルで、“生きる3D表現”を進化させてください。