WebGPUとコンピュートシェーダーで描く数百万粒子の自律シミュレーション
WebGLで数万粒子を動かすと、CPUでの更新とGPUへの転送が先に限界を迎え、フレームレートが落ちます。WebGPUのコンピュートシェーダーは、この構図を変えます。粒子の位置と速度をGPUのバッファに置いたまま、更新も描画もGPU内部で完結させられるからです。この記事では、WebGLからの変化を整理し、数百万粒子の自律的な振る舞いが表現に何をもたらすかを考えます。あわせて、鑑賞できる場所と、Three.jsと生のWGSLで始める最初の一歩も紹介します。
ブラウザに訪れた計算の静かな地殻変動：WebGLからWebGPUへ
WebGLはOpenGL ES由来の「描画のためのAPI」です。頂点とフラグメントを処理する枠組みなので、粒子の更新をGPUで行うには、テクスチャへの書き込みや変換フィードバックといった工夫が必要でした。私たちはその迂回路を、長いあいだ当たり前のものとして受け入れてきました。
WebGPUはMetal、Vulkan、Direct3D 12に連なる現代的なGPU APIを、Webの標準として再設計したものです。Chromeは2023年に既定で有効化し、その後FirefoxやSafariも対応を進めてきました。2026年10月時点では主要デスクトップブラウザを中心に実装が進んでいますが、OS、GPU、端末環境によって動作状況が異なるケースが多いため、公開前には各ブラウザの最新の対応状況表で確認することをおすすめします。
変化の核心は、計算が描画の付属物ではなく、独立した第一級の工程になったことです。この静かな地殻変動のあとでは、「どう描くか」より前に「何を計算させるか」を問えるようになります。
「描画」ではなく「計算」を司る：コンピュートシェーダーがもたらす表現の跳躍
コンピュートシェーダーは、画面とは無関係に汎用計算を並列実行する仕組みです。WebGPUでは、ストレージバッファに粒子の状態を置き、数万から数百万のスレッドが1粒子ずつ更新します。描画側は同じバッファを直接読むだけなので、CPUへ値を戻す必要がありません。
最小の形はこうなります。WGSLで書いた粒子の更新です。
struct Particle { pos: vec2f, vel: vec2f };
@group(0) @binding(0) var<storage, read_write> particles: array<Particle>;
@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3u) {
let i = id.x;
if (i >= arrayLength(&particles)) { return; }
var p = particles[i];
p.pos += p.vel * 0.016;
particles[i] = p;
}この数行が、粒子の数だけ同時に走ります。重要なのはコードの短さではありません。1つの粒子が、自分の状態だけを見て次の瞬間を決めるという書き方が、そのまま並列計算の単位になることです。これは生命の振る舞いを記述する発想に近いものです。
なお、仕様上のデフォルト制限として、1ワークグループあたりの最大スレッド数は256です。ストレージバッファのサイズにも上限があるため、粒子1つあたりのバイト数は設計時に見積もっておくと安心です。
数百万の粒子が自律する世界：群れ、流体、そして人工生命のリアリティ
粒子の数が増えると、見え方は量的な変化から質的な変化へ移ります。数百の点は「動くもの」ですが、数百万の点は「ひとつの気配」を帯びます。個々の粒子は単純なルールに従うだけでも、全体として雲や潮流のような振る舞いが現れます。
題材にはいくつもの系譜があります。
- Craig Reynoldsが1986年に提案した Boids は、分離・整列・結合の3規則で群れを生みます。
- Jeff Jonesが2010年に発表した粘菌の Physarumモデル は、粒子が痕跡を残し、痕跡に引かれることで網状の構造を育てます。
- Particle Life は、種類ごとの引力と斥力の表を変えるだけで、細胞のような塊や捕食に似た動きを生みます。
ただし実装には落とし穴があります。素朴なBoidsは全粒子の総当たりで、計算量が粒子数の2乗に増えます。数百万規模では、空間をグリッドに区切って近傍だけを調べる工夫が欠かせません。Physarumの痕跡マップは、拡散や減衰をテクスチャのピンポン処理で表現するのが定石です。「GPUなら速い」で済ませず、アルゴリズム側の設計を問われる点が、この領域の面白さでもあります。
表現論として私が惹かれるのは、作者の役割が変わることです。軌跡を描くのではなく、環境と規則を整えて、あとは見守ります。ジェネラティブアートが昔から抱えてきた「手放す」という態度が、規模の力でいっそう鮮明になります。
鑑賞と実践の交差点：ブラウザ上で体験できる先進的WebGPUアートピース
作品を探すなら、まず公式のサンプル集が確かな入口です。WebGPU Samples(webgpu.github.io/webgpu-samples)には、Boidsやパーティクルの例があり、ソースも読めます。Three.jsの公式examplesにも、WebGPURendererを使ったコンピュート系のデモがあります。名前や構成はバージョンで変わるため、最新の一覧で探してください。
作家や開発者の個人サイト、CodepenやShadertoy系のコミュニティにも、WebGPUで動く粒子や人工生命のスケッチが増えています。ここでは特定の作品を名指しせず、鑑賞のコツを2つ挙げます。
- 1分以上眺める。 数百万粒子の作品は、最初の数秒より、群れが偏りを見つけて形を変えていく時間にこそ面白さがあります。
- ソースを開く。 多くのスケッチはブラウザで実行されるため、規則の表がどう書かれているかを確認できます。同じ見た目でも、背後の数式は驚くほど簡素なことがあります。
WebGPU対応のブラウザでなければ、そもそも動かない作品もあります。端末の電力や発熱にも注意して、気軽に試してみてください。
最初の一歩を記す：Three.js WebGPURendererと生WGSLでスケッチを始める
入口は2つあります。ひとつはThree.jsのWebGPURendererです。three/webgpu から読み込み、TSL(Three Shading Language)でJavaScriptに近い書き方のまま計算ノードを組み立てます。WGSLを直接書かなくても、バッファとインデックス指定を使った更新処理でコンピュートを記述できます。シーン管理、カメラ、ポストプロセスが揃っているので、作品として仕上げる道のりが短いのが利点です。TSLのAPIは更新が活発なため、実装時はお使いのバージョンのドキュメントとexamplesを基準にしてください。
もうひとつは、生のWebGPUとWGSLです。navigator.gpu からアダプターとデバイスを取得し、バッファとパイプラインを自分で組みます。記述量は増えますが、メモリ配置、ワークグループ、同期といった計算の骨格が見えるため、先ほどのような粒子系の理解が深まります。まず前節のWGSLを動かし、粒子を点として描くところまで進めるのがおすすめです。
p5.jsから入った方には、スケッチを書く感覚と、規則を設計する感覚の間に、少し段差を感じる場面があるかもしれません。p5.jsは主に2DとWebGLを軸にしているので、WebGPUの計算はThree.jsなど別の道具と組み合わせるのが現実的です。Hydra、TouchDesigner、PixiJSなど、ほかの環境で培った視点も役に立ちます。
最初は10万粒子、次に100万粒子と、数を少しずつ増やしてください。フレーム時間の変化を観察するうちに、計算が表現の素材であることが、体感として分かってきます。
