Googleは2022年第一四半期に登場するChromeにおいて、コンピューターグラフィックをレンダリングするために用いられるJavaScript APIを既存のWebGLから後継のWebGPUにアップデートすると発表しています。新たに登場するWebGPUの最大の特徴であるGPUで計算を行う「コンピュートシェーダー」について、フロントエンド開発に焦点を当てたニュースブログのPixels Commanderが解説しています。

WebGPU computations performance in comparison to WebGL | Pixels Commander

https://pixelscommander.com/javascript/webgpu-computations-performance-in-comparison-to-webgl/

これまでのブラウザ上で3Dグラフィック機能を利用する場合、ほとんどの場合は「WebGL」が採用されていました。しかし2022年第1四半期に実装予定の「WebGPU」は、年々向上していくGPUの性能をより一層引き出して、GPUで計算を行う「コンピュートシェーダー」という機能を搭載しています。

Pixels Commanderによると、旧来のWebGLはコンピュートシェーダーに相当する計算用APIを有しておらず、もしGPUで計算を行いたい場合には以下のように「データを一度画像に変換してから実際の計算を担当するピクセルシェーダーと同期してレンダリングしつつ計算、canvas要素上にピクセルとして出力された計算結果を再度データに変換する」という回りくどいやり方で処理を行います。



他方、WebGPUはデータをバッファとしてGPUにアップロードして計算を行ってからバッファとして出力します。さらに、計算自体も非同期的に実行しておりJavaScriptのメインスレッドをブロックすることもなく、WebGLとは異なりcanvas要素を介することもなければ、ピクセルをデータに変換する過程もありません。



Pixels Commanderが、計算の複雑さと計算量を簡単に調節できる行列乗算を用いて、開発者向けのChrome CanaryでWebGLとWebGPUのベンチマークを行った結果が以下。横軸は行列のサイズ、縦軸は処理にかかった秒数を示しており、Y座標の値が小さいほうが処理にかかった時間が短い＝優秀ということを意味しています。初回の実験では、行列のサイズが小さい場合にはWebGPU(赤)がWebGL(青)を上回りましたが、サイズが大きい場合にはWebGPUが優位という結果でした。



しかし、Pixels Commanderの調査によると、上記の結果は1回のバッチ処理で計算する演算数に制限が課せられていたとのことで、この制限に引っかからない演算数ならば以下の結果が得られたとのこと。



2回目の結果について、Pixels Commanderは「WebGPUはWebGLよりも3.5倍高速でした」とコメント。また、WebGLは行列のサイズが4096×4096以上の場合は計算に失敗しますが、WebGPUは5000×5000まで対応可能とのことです。