Screenshots
Overview
概要
WebGPUのGPUコンピュート(WGSL)で、最大100万体のパーティクルをリアルタイムに動かすブラウザ実験です。各個体はカールノイズの流れに乗りつつ、ポインタへの引力／斥力で群れ(ムクドリの大群=murmuration)のように渦を巻きます。WebGLでは難しかった規模の群れ表現を、サーバー処理ゼロのブラウザ内だけで実現しています。
How to use
遊び方・使い方
画面をドラッグ／タッチすると、その位置へ群れが引き寄せられ(または反発し)ます。上部パネルで個体数(10万〜100万)、ポインタの引き寄せ／反発、流れの速さ・渦の細かさ・影響半径を調整でき、右下にFPSと個体数を表示。WebGPU対応ブラウザ(最新のChrome/Edge/Safari等)で動作し、非対応時はフォールバック表示になります。
Tech stack
技術スタック
WebGPUWGSLTypeScriptVite
外部エンジンを使わず、WGSLのコンピュート＋レンダーパイプラインを直接記述。位置／速度のstorage bufferをGPUで更新し、CPUへ戻さず頂点シェーダで描画することで100万体規模を実現しています。
Highlights
工夫した点
- 位置・速度をstorage bufferに置き、WGSLコンピュートシェーダでGPU上で直接更新(O(N))。描画も同bufferを頂点シェーダから読み、point-list＋加算合成で一括描画
- カールノイズ場への整列にポインタ引力／斥力を合成し、少ないパラメータで群れの創発的な渦・分岐を生む
- CPUへ戻さずGPU内で完結させることで、個体数100万でも滑らかなフレームレートを狙う設計
To improve
改善したい点
- GPU性能差が大きく、低スペック端末向けの自動品質調整(個体数スケーリング)が未対応
- 群れ挙動のプリセットや、色・形のバリエーションを増やす余地
- WebGPU非対応ブラウザ向けのWebGLフォールバック実装(現状は案内のみ)
What's next
今後の展望
- 障害物・複数の引力源・捕食者など相互作用の追加
- 見た目のプリセット(銀河／煙／液体など)とスクショ・録画共有
- さらなる個体数の拡大や3D化の検討