Babylon.js で WebGPU を試してみるテスト

この記事は[Web グラフィックス Advent Calendar 2020](https://qiita.com/advent-calendar/2020/webgraphics)の6日目の記事です。

### はじめに

この記事では [Babylon.js](https://github.com/BabylonJS/Babylon.js) の次バージョンとして開発中の [v5.0.0 alpha](https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview%20release) を用いて、[WebGPU](https://github.com/gpuweb/gpuweb) を試してみようと思います。

### Babylon.js とは

[Babylon.js](https://github.com/BabylonJS/Babylon.js) はマイクロソフト社が開発している非常にパワフルな `WebGL` ベースの 3D エンジンです。
2020年11月に安定版である [Babylon.js v4.2](https://babylonjs.medium.com/babylon-js-4-2-simplicity-reimagined-965f88d0fad) が発表され、現在は次バージョンとして [v5.0.0](https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview%20release) の開発がスタートしています。

### WebGPU とは

[WebGPU](https://github.com/gpuweb/gpuweb) は `WebGL` や `WebGL2` の後継とされているグラフィックス API です。
`WebGL` は `Khronos` グループが中心となって仕様策定が行われていましたが `WebGPU` は `W3C` コミュニティグループにより行われています。

|ブラウザのAPI|対応するバックエンドのAPI|利用可能なシェーダ|仕様策定|
|:------------|:-------------------------|:-----------------|:-------|
|WebGL 1.0    |OpenGL ES 2.0             |GLSL ES 1.0       |Khronos |
|WebGL 2.0    |OpenGL ES 3.0             |GLSL ES 3.0       |Khronos |
|WebGPU       |Vulkan/DirectX/Metal      |WGSL              |W3C     |

### WGSL とは

`WGSL` は `WebGPU Shading Language` の略で、その名の通り `WebGPU` 用のシェーダです。
残念ながら `WGSL` の対応はまだ初期の段階である為、Chrome や Firefox の WebGPU 実装では、暫定的に `SPIR-V` (GLSL) が用いられています。

### WebGPU を試すには？

[Chrome Canary](https://www.google.com/chrome/canary/) 及び [Firefox Nightly](https://www.mozilla.org/firefox/nightly) でフラグを有効化することで、WebGPU を試すことが出来ます。
ただし、現状、Firefox の WebGPU 実装は若干不安定な為、Chrome Canary で試すのが良いかと思います。

|ブラウザ                                                   | WebGPU 有効化方法                  |
|:----------------------------------------------------------|:-----------------------------------|
|[Chrome Canary](https://www.google.com/chrome/canary/)     |`chrome://flags/#enable-unsafe-web` |
|[Firefox Nightly](https://www.mozilla.org/firefox/nightly) |`dom.webgpu.enable`                 |

### Babylon.js の WebGL と WebGPU モードの比較

`Babylon.js` の `WebGPU` 対応としては、グラフィック API の違いをほとんど吸収してくれている為、僅かな変更で対応できるように設計されています。

以下のサンプルでの対応箇所は以下の通りです。エンジンの初期化を非同期で行うことが主な違いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/8f4588eb-4fb3-bd02-37a4-baa149e9d12f.png)

実際動作するサンプルへのリンクは下記になります。

WebGL モード ：https://cx20.github.io/webgl-test/examples/babylonjs/complex/index.html
WebGPU モード：https://cx20.github.io/webgpu-test/examples/babylonjs/complex/index.html

以下は実行結果のイメージです。

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/0d235c8f-43b2-13e5-e974-83eab1b738c2.png)](https://cx20.github.io/webgpu-test/examples/babylonjs/complex/index.html)

### 既知の問題など

Babylon.js の `WebGPU` 対応ですが、概ね `WebGL` と同様のことが出来るようになっていますが、完全ではありません。
`WebGPU` は、まだ仕様策定の段階であり、Chrome Canary でもサポートが十分でなく不安定な部分もある為です。例えば、GPU によっては以下のような予期しないテクスチャの模様になることもあります。

以下、Babylon.js Playground での表示結果です。
https://playground.babylonjs.com/#8MGKWK#25

WebGL2 モードでの結果：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/9d996bed-1958-8e17-d44f-45c5375e62ec.png)

WebGPU モードでの結果：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/1aab0ea6-2166-1369-559d-f73d2de34f88.png)

新しい問題を発見した際には、ブラウザやライブラリのリポジトリやフォーラムに Issue 報告するのが良いかと思います。

### おわりに

WebGPU は、より低レベルな制御が行えるようになる半面、コードの記述量が増えることが予想されます。
各種 Web 3D エンジンやライブラリでも WebGPU 対応を視野に入れているようですので、恐らく Babylon.js の対応同様、ユーザーへの影響を最小限に抑えるような対応をしてくるのではないかと思います。
その為、以前より、エンジンやライブラリの重要度が増すと考えられます。

ちなみに、WebGPU の登場を首を長くして待っている方も多いかもしれませんが、残念ながら、もう少し待つ必要があるようです。
今のところ仕様策定の完成目標としては [2022年のQ1を予定](https://www.w3.org/2020/06/gpuweb-charter.html)しているそうです。

WebGPU には `Compute Shader` も含まれるようですので、より高速な処理やエンジンの開発を目指す方はドラフト仕様を調査しておくのも悪くないと思います。

### 参考情報

■ WebGPU Support | Babylon.js Documentation
https://doc.babylonjs.com/advanced_topics/webGPU
■ WebGPU Implementation Status
https://github.com/gpuweb/gpuweb/wiki/Implementation-Status
■ WebGPU Table of Contents
https://github.com/gpuweb/gpuweb/wiki/Table-of-Contents
■ WebGPU Samples
https://austineng.github.io/webgpu-samples/
■ Test of WebGL Library
https://github.com/cx20/webgl-test
■ Test of WebGPU Library
https://github.com/cx20/webgpu-test
■[忙しい人向け] 100行から始めるWebGPU
https://qiita.com/cx20/items/67f4e70b36e06ef77900