WebGPU が実用段階に入った — ブラウザ内で GPU をフル活用する

海外のエンジニアコミュニティ(Hacker News・Chrome Developers ブログ)で「WebGPU を本番に入れた」という報告が増えている。Chrome と Safari の両方で対応が揃い、WebGPU はようやく「試験的な API」から「実用できる API」へと水準が変わった。

WebGL との根本的な違い

WebGL は 2011 年に登場した。GPU をブラウザから使えるようにした画期的な API だったが、OpenGL ES 2.0 をベースにしていたため設計が古く、描画(レンダリング)専用という制約があった。

WebGPU は Vulkan・Metal・Direct3D 12 という現代の低レベル GPU API を統一インターフェースで包んだもので、描画と汎用 GPU 計算(GPGPU)の両方に対応している。

WebGL  = レンダリング(描画)パイプラインのみ
WebGPU = 描画 + 汎用 GPU コンピュート

コンピュートシェーダーとは何か

GPU の本質は「大量の演算を並列に実行するプロセッサ」だ。CPU が少数の高性能コアを持つのに対し、GPU は数千〜数万の小さなコアを持ち、同じ処理を並列で走らせることに特化している。

WebGL ではこの並列性を描画(ピクセル塗りつぶし)にしか使えなかった。WebGPU のコンピュートシェーダーは、この並列処理能力を描画以外の任意の計算に使えるようにした鍵だ。

たとえば 1920×1080 の画像をグレースケール変換する場合、CPU でループすれば 200 万回の逐次処理が必要だが、コンピュートシェーダーは 200 万ピクセルを同時並行で処理できる。

/* WGSL(WebGPU Shading Language) — グレースケール変換 */
@compute @workgroup_size(8, 8)
fn main(@builtin(global_invocation_id) id: vec3u) {
  let pixel = textureLoad(inputTex, id.xy, 0);
  let gray = dot(pixel.rgb, vec3f(0.299, 0.587, 0.114));
  textureStore(outputTex, id.xy, vec4f(gray, gray, gray, pixel.a));
}

@workgroup_size(8, 8) は「8×8 = 64 スレッドを同時実行するワークグループ」を定義する。1920×1080 の変換が 1ms 以下で完了する。

ブラウザ対応状況(2026年7月時点)

ブラウザ	状況
Chrome / Edge 113+	本番対応
Safari 18+	本番対応(2024〜)
Firefox	Nightly のみ・Stable 未対応

Firefox の Stable が未対応のため、Baseline(全ブラウザ対応)には達していない。navigator.gpu の存在確認と WebGL へのフォールバックが必須だ。

if (!navigator.gpu) {
  fallbackToWebGL();
  return;
}
const adapter = await navigator.gpu.requestAdapter({ powerPreference: 'high-performance' });
const device = await adapter.requestDevice();

実用的な用途 3 選

1. ブラウザ内 ML 推論

TensorFlow.js は WebGPU バックエンドを正式サポートしている。1 行の変更で GPU 推論に切り替わる。

import * as tf from '@tensorflow/tfjs';
await tf.setBackend('webgpu');

モデルによっては WebGL バックエンド比で 3〜5倍高速になる。顔認識・姿勢推定・画像分類をサーバーレスでブラウザ内完結させられる。

2. 大量データのリアルタイム可視化

地図タイル・金融チャート・ネットワークグラフなど、100 万点を超えるデータをリアルタイムで描画する用途だ。CPU では不可能な規模も GPU なら現実的になる。

3. 動画へのリアルタイムエフェクト

WebCodecs API(フレームデコード) + WebGPU(シェーダー処理) + Canvas(描画) を組み合わせると、動画のリアルタイム加工をブラウザ内で完結させられる。

video.requestVideoFrameCallback(() => {
  const texture = device.importExternalTexture({ source: video });
  applyComputeShader(texture);
});

ライブラリ経由から始めるのが現実的

WGSL を自分で書かなくても、主要ライブラリが WebGPU を抽象化してくれる。

ライブラリ	用途
Three.js (WebGPU Renderer)	3D グラフィックス・ビジュアルエフェクト
Babylon.js	ゲーム・インタラクティブ 3D
TensorFlow.js	ML 推論

いつ使うべきか

Firefox Stable が未対応のため、「全ユーザーに届ける」用途にはまだ早い。Chrome / Safari で動けばいい用途(社内ツール・プレミアムな体験・B2B サービス)なら今すぐ本番投入できる水準にある。WebGL での実装限界を感じていたり、ブラウザ内で ML 推論をやりたい場合は、WebGPU を試す価値が十分にある。