WebGLとWebGPUの違いと主要ライブラリの比較

今回はブラウザ上でグラフィックスを描画するための技術、WebGLとWebGPUについて説明します。
また、実際の開発で使われるThree.js・Babylon.js・PlayCanvasの3つのライブラリを比較します。

WebGLとWebGPUについて

WebGL

WebGL（Web Graphics Library）はブラウザ標準の3D描画APIです。プラグインを入れなくても、canvas要素の上に2D/3Dグラフィックスを描画することが出来ます。
組み込み機器向けのOpenGL ESをベースにした低レベルAPIで、シェーダーはGLSL（OpenGL Shading Language）という言語で記述します。頂点シェーダーとフラグメントシェーダーをGLSLで書いてGPUを制御する形になります。

2011年に登場してから10年以上使われている技術で、主要ブラウザではほぼ100%サポートされています。

WebGL2

2017年にWebGLの後継仕様のWebGL2が公開されました。
WebGL2はOpenGL ES 3.0がベースになっていて、新たにマルチレンダーターゲットや3Dテクスチャなどに対応しています。

WebGPU

WebGPUはWebGLの後継となる次世代のAPIです。現代のGPUアーキテクチャに合わせて設計された低レベルAPIで、各OSのネイティブなグラフィックスAPIであるVulkan、Metal、Direct3D 12を土台にしています。
シェーダー言語もGLSLとは別のWGSL（WebGPU Shading Language）を使用します。
最大の特徴はCompute ShaderによるGPU計算にネイティブ対応している点です。描画だけでなく、機械学習の推論や物理演算などの汎用計算にも使うことが出来ます。

登場したのは2023年からで、Chromeが2023年4月に先行して対応し、2026年1月に主要ブラウザでの対応が完了しています。

WebGLとWebGPUの違い

比較表

ベースAPIはOpenGL ES系とVulkan系、シェーダー言語はGLSLとWGSLと、WebGLとWebGPUは根本から別物になっています。
GPU計算はWebGL2でTransform Feedbackなどを使った限定的なものは出来ますが、ネイティブに対応しているのはWebGPUだけです。

API設計は、WebGL・WebGL2がステートマシン型なのに対して、WebGPUはコマンドバッファ型です。WebGL2でもCPUとGPU間のオーバーヘッドはWebGL1と変わらない為、効率面ではWebGPUの方が有利になっています。

なお、シェーダー言語がGLSLとWGSLで異なる為、WebGLとWebGPUのコードに直接の互換性はありません。

WebGPUのブラウザ対応状況

Firefoxの対応により、2026年1月に主要ブラウザでの対応が完了しました。

まだ対応していない環境向けに、主要なライブラリにはWebGL2への自動フォールバックの機能がある事が多い為、WebGPUで実装しても未対応のブラウザで問題になることはほぼ無くなっています。

主要ライブラリの概要と比較

3つのライブラリの特徴

実際の開発では、WebGLやWebGPUを直接書くよりもライブラリを使うことが多いと思います。代表的な3つは、いずれもWebGLとWebGPUの両方に対応しつつあります。

ライブラリ比較

エンジン本体は3つとも無料のオープンソースです。
ただし、PlayCanvasでクラウド上のビジュアルエディタやプライベートプロジェクトを使う場合は、月額約2,500円からの有料プランが必要になります。この点が他の2つとの違いになります。
WebGPU対応はどのライブラリも進んでいます。学習コストで見ると、Three.jsは低レベルAPIの為やや高めで、PlayCanvasはエディタの補助がある分低めになります。

用途で選ぶ場合は、コードを完全に制御したいならThree.js、WebXRや物理演算などの機能を重視するならBabylon.js、ビジュアルエディタなど整った環境で作成したいならPlayCanvas、という住み分けになるかと思います。

WebGPUを扱うのであれば、まずはWebGLの基礎を押さえた上で、用途に合ったライブラリの選定やWebGPUへの移行を検討するのが良いと思います。