WebGPUが『ブラウザGPU活用』を再定義する
WebGPUは2023年Chrome 113で正式リリースされたブラウザ標準APIで、WebGLの後継として設計されました。レンダリングだけでなく汎用GPU計算（GPGPU）も標準サポートし、Stable Diffusion・LLM推論などをブラウザ単独で動かす流れを支える基盤になっています。2025〜2026年に主要ブラウザ完全対応が完了し、本格的なWebGPUアプリケーションが本番展開される段階に。
採用すべき5つのシグナル
- WebGL/Three.jsの性能限界に達している
- Stable Diffusion/LLMをブラウザだけで動かしたい（ChatGPT料金回避）
- 大規模パーティクル・物理シミュレーション
- 機械学習推論（ONNX Web Runtime）
- ブラウザ内3Dゲームの高画質化
WebGL/WebGPU比較
WebGL: 2011年〜・OpenGL ES派生・古い設計・ドライバ依存。
WebGPU: 2023年〜・Vulkan/Metal/Direct3D 12抽象化・モダンAPI・GPGPU標準・パフォーマンス2〜10倍。
使い分け: WebGLは過去資産活用・幅広い互換性、WebGPUは新規プロジェクト・高性能要件。
主要ライブラリ
- Three.js: WebGPU Renderer対応版（v160以降）
- Babylon.js: WebGPU標準サポート・3DゲームエンジンOSS
- ONNX Runtime Web: WebGPUバックエンドで機械学習推論
- WebLLM: Llama/Qwen等をブラウザWebGPUで動かす
- tensorflow.js: WebGPU加速対応
実装の基本パターン
(1) アダプタ取得: const adapter = await navigator.gpu.requestAdapter()
(2) デバイス: const device = await adapter.requestDevice()
(3) シェーダ: WGSL（WebGPU Shading Language）でコード記述
(4) パイプライン: ComputePipeline・RenderPipeline構築
(5) 実行: GPUコマンド送信・結果取得
WebGPUの主要ユースケース2026年
- ブラウザ内LLM推論: Llama 3.3 7Bが家庭用GPUで動く・API料金不要
- 3Dゲーム高画質化: AAA級グラフィックがブラウザで動く
- 動画編集・加工: GPU加速で4K動画リアルタイム編集
- 科学技術計算: 物理シミュレーション・データ可視化
- 音声処理: GPU音声フィルタ・リアルタイムノイズキャンセル
実装で詰まる3つの落とし穴
- ブラウザ互換性: Chrome/Edge完全対応、Safari/Firefoxは段階対応中。フォールバック必要
- WGSL学習コスト: GLSL慣れていてもWGSLは別言語。シンタックス再学習
- メモリ管理: GPU/CPU間のデータ転送オーバーヘッド・最適化要
30日学習プラン
- 1週目: Hello WebGPU・三角形描画・基本シェーダ
- 2週目: Compute Shader・GPUデータ並列処理
- 3週目: Three.js WebGPU Renderer・モダン3D
- 4週目: WebLLMでLlama推論・ONNXモデル変換
関連リンク
WebGLは WebGL実践、Three.jsは Three.js実践、ブラウザMLは ブラウザML実践 を参照してください。GPU基盤は GPUインフラ選び方 もどうぞ。