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

「ブラウザで GPU が使える」という話が出てきてから、ずいぶん経つ。

ずっと「実験的な機能」「Flag を立てないと動かない」「Firefox では無理」という状態が続いていて、本番に持ち込める雰囲気じゃなかった。「面白そうだけど時期尚早」で棚に上げていたの、そろそろ下ろしていい。Chrome 113 と Safari 18 で WebGPU が本番対応になった。

WebGL と何が違うのか

WebGL は 2011 年に生まれた「GPU をブラウザから使う API」。15 年間、3D グラフィックスとゲームを支えてきた。

でも WebGL には大きな制約があった。描画専用なんですよ。GPU の能力を「ピクセルを塗る」ことにしか使えない。

WebGPU はその制約を取り払った。Vulkan・Metal・Direct3D 12 という現代の GPU API を統一インターフェースで包んでいて、描画だけじゃなく汎用の並列計算もできる。

WebGL  = 「描画する」だけ
WebGPU = 「描画する」 + 「大量計算する」

この「大量計算」の部分が、話を面白くしている。

GPU が「数で押す」とはどういうことか

CPU と GPU の違いを一言で言うと、少数精鋭か、数で押すか。

CPU は少数の超高性能なコアを持つ。複雑な処理や分岐を素早くこなす。GPU は数千〜数万の小さなコアを持つ。同じ処理を大量に並列で走らせる。

1920×1080 の画像をグレースケールに変換するとしよう。CPU でやると 207 万ピクセルを 1 個ずつ順番に処理する——要は 207 万回のループ。GPU なら同時に処理できる。

WebGPU のコンピュートシェーダーは、この並列処理能力を「描画以外のことに使う」ための仕組みだ。WebGL に無くて WebGPU にある本質的な差は、ここだけといっていい。

/* 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 以下で終わる。CPU でやるより桁違いに速い。

実際に使われているのはこの 3 用途

ブラウザ内 ML 推論

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

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

モデルによっては WebGL バックエンドの 3〜5 倍速くなる。顔認識・姿勢推定・画像分類がサーバーなしでブラウザ完結する。インフラコストがゼロ。プライバシーの観点でも、データがサーバーに送られないのは強い。これは結構インパクト大きいと思う。

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

地図・金融チャート・ネットワークグラフなど、100 万点を超えるデータをリアルタイムで動かす用途。CPU では秒単位かかる処理が GPU なら 60fps で回る。データ系ダッシュボードで WebGPU に切り替えて劇的に速くなったという報告が増えている。

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

WebCodecs でフレームをデコード → 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 はまだ未対応。全ユーザーに届ける用途には慎重になった方がいいよ。navigator.gpu の存在確認と WebGL へのフォールバックは必ず入れる。

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

---

社内ツール・プレミアム機能・B2B サービスのように「Chrome / Safari で動けばいい」用途なら、今すぐ本番に入れられるよ。

WebGL の実装限界にぶつかっているなら、これが乗り換えるタイミングだ。ブラウザ内で ML 推論をやりたいなら、選択肢は WebGPU 一択になりつつある。「そのうちやろう」と思っていたなら——そのうちは、もう来ている。