WebGPU入門

〜ブラウザで本格的な並列計算とグラフィックスを扱う次世代Web API〜

1. はじめに

これまでWebブラウザでの高速描画や計算といえば WebGL が主流でした。
しかしWebGLはOpenGLベースであり、最新GPU機能を十分に活用できません。

そこで登場したのが WebGPU です。
WebGPUは、低レベルかつモダンなGPU APIをWebに持ち込み、
3Dレンダリング・GPGPU計算・機械学習推論などをブラウザで実現します。

本記事では、WebGPUの基本概念と実際のコード例を交えながら入門を進めます。

2. WebGPUとは？

策定：W3C GPU for the Web Community Group
実装：Chrome / Edge / Safari / Firefoxが対応中（2025年現在、主要ブラウザで安定化）
特徴：
- Vulkan / Metal / Direct3D12 に近いモダンAPI
- 高パフォーマンスな描画と並列計算
- セキュアサンドボックス環境で動作

WebGLとの違い

項目	WebGL	WebGPU
ベースAPI	OpenGL ES	Vulkan/Metal/D3D12相当
主用途	3D描画中心	描画＋汎用計算（GPGPU, ML）
モダン機能	限定的	豊富（Compute Shader, Pipeline管理など）
パフォーマンス	○	◎（低オーバーヘッド）

3. 基本概念

✅ Adapter & Device

GPUを取得するオブジェクト（Adapter）
実際のGPU操作を行うデバイス（Device）

✅ Command Buffer

GPUに対する処理命令のバッチ

✅ Pipeline

描画や計算の流れ（シェーダや状態をまとめる）

✅ Shader

GPU上で動作するプログラム（WGSLという新しい言語）

4. WebGPUを使う準備

ブラウザ設定

Chrome / Edge → chrome://flags/#enable-unsafe-webgpu を有効化（最新版はデフォルトON）
Safari → 「開発」メニューからWebGPUを有効化
Node.js → @webgpu/glslang 等ライブラリを利用

5. 最小のサンプルコード（Hello WebGPU）

<!DOCTYPE html>
<html>
  <body>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script type="module">
      async function init() {
        if (!navigator.gpu) {
          alert("WebGPU not supported!");
          return;
        }

        // GPUアダプタとデバイスを取得
        const adapter = await navigator.gpu.requestAdapter();
        const device = await adapter.requestDevice();

        // キャンバスコンテキストを設定
        const canvas = document.getElementById("canvas");
        const context = canvas.getContext("webgpu");

        const format = navigator.gpu.getPreferredCanvasFormat();
        context.configure({ device, format });

        // レンダーパスを作成
        function frame() {
          const encoder = device.createCommandEncoder();
          const textureView = context.getCurrentTexture().createView();
          const renderPass = encoder.beginRenderPass({
            colorAttachments: [{
              view: textureView,
              clearValue: { r: Math.random(), g: Math.random(), b: Math.random(), a: 1.0 },
              loadOp: 'clear',
              storeOp: 'store',
            }],
          });
          renderPass.end();
          device.queue.submit([encoder.finish()]);
          requestAnimationFrame(frame);
        }
        frame();
      }
      init();
    </script>
  </body>
</html>

👉 毎フレーム、背景色が変わるだけのシンプルな例ですが、これがWebGPUの基本構造です。

6. WebGPUでできること

🎨 グラフィックス

高度な3Dレンダリング（WebGLの後継）
レイトレーシングやポストプロセス

⚡ 計算（GPGPU）

行列演算や物理シミュレーション
Webブラウザ上での科学計算

🤖 機械学習

推論エンジンの高速化（TensorFlow.js / ONNX Runtime WebGPU対応）
大規模モデルのブラウザ実行

7. WebGPUのメリット・デメリット

✅ メリット

ネイティブに近いパフォーマンス
グラフィックスと計算を統合
MLや科学計算に新しい可能性

❌ デメリット

APIが低レベルで学習コストが高い
サンプルやツールがまだ少ない
古いブラウザや端末では非対応

8. 学習ステップのおすすめ

WebGL経験者 → PipelineとWGSLを中心に習得
機械学習エンジニア → WebGPU対応フレームワークを試す
初心者 → wgslシェーダ言語を軽く学び、簡単な描画から

9. まとめ

WebGPUはWebGLの進化版であり、描画だけでなく並列計算も可能にする次世代API
ブラウザでネイティブに近いGPU性能を引き出せる
ML・科学計算・ゲームなど、応用範囲は広大

2025年現在、WebGPUは「ブラウザで何でもできる」未来を現実にしつつあります。
次世代Webアプリを開発するなら、今から触れておくべき技術です。

TechCraft – エンジニアのためのスキルアップメモ

エンジニアのスキルアップを少しでも加速する技術ブログ

WebGPU とは？入門編