𝗪𝗲𝗯𝗚𝗣𝗨: 𝟮𝟱𝟬,𝟬𝟬𝟬 𝗣𝗮𝗿𝘁𝗶𝗰𝗹𝗲𝘀 𝗢𝗻 𝗬𝗼𝘂𝗿 𝗕𝗿𝗼𝘄𝘀𝗲𝗿
今日で50日目です。毎日新しい技術をゼロから構築していくシリーズの最終日となります。
このシリーズを締めくくるために、WebGPUを選びました。WebGPUを使えば、ブラウザ内のGPUだけで250,000個のパーティクルを完全にシミュレートできます。
CPUには少数の高速なコアがあります。GPUには数千ものシンプルなコアがあります。250,000個のパーティクルを動かす際、CPUはそれらを一つずつ処理しますが、GPUは数千個を同時に処理します。
WebGPUはWebGLの現代的な後継です。コンピュートシェーダーを使用して、ハードウェア上で汎用的なプログラムを実行します。
仕組み：
- GPUを管理するためのデバイスを作成します。
- 位置や速度などのパーティクルデータを保持するためのバッファを作成します。
- データを一度GPUにアップロードします。
- 移動を処理するためのコンピュートシェーダーを記述します。
コンピュートシェーダーは、すべてのパーティクルに対して同じロジックを一度に実行します。データはGPU内に留まったままです。計算ステップからレンダリングステップへと、ハードウェアの外に出ることなく移動します。このスピードにより、シミュレーションを60fpsで実行することが可能になります。
WebGPUは、ブラウザ内での機械学習や重い計算の基盤となるでしょう。これはウェブ開発の未来にとって不可欠なツールです。
このシリーズをフォローしていただき、ありがとうございました。すべてのプロジェクトのアーカイブはこちらからご覧いただけます。
全コード: https://github.com/dev48v/webgpu-from-zero
記事全文: https://dev.to/dev48v/webgpu-i-simulated-250000-particles-entirely-on-the-gpu-in-the-browser-2o0f