Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

この記事はWeb グラフィックス Advent Calendar 2020の6日目の記事です。

はじめに

この記事では Babylon.js の次バージョンとして開発中の v5.0.0 alpha を用いて、WebGPU を試してみようと思います。

Babylon.js とは

Babylon.js はマイクロソフト社が開発している非常にパワフルな WebGL ベースの 3D エンジンです。
2020年11月に安定版である Babylon.js v4.2 が発表され、現在は次バージョンとして v5.0.0 の開発がスタートしています。

WebGPU とは

WebGPUWebGLWebGL2 の後継とされているグラフィックス API です。
WebGLKhronos グループが中心となって仕様策定が行われていましたが WebGPUW3C コミュニティグループにより行われています。

ブラウザの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 とは

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

WebGPU を試すには?

Chrome Canary 及び Firefox Nightly でフラグを有効化することで、WebGPU を試すことが出来ます。
ただし、現状、Firefox の WebGPU 実装は若干不安定な為、Chrome Canary で試すのが良いかと思います。

ブラウザ WebGPU 有効化方法
Chrome Canary chrome://flags/#enable-unsafe-web
Firefox Nightly dom.webgpu.enable

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

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

以下のサンプルでの対応箇所は以下の通りです。エンジンの初期化を非同期で行うことが主な違いです。
image.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

既知の問題など

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

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

WebGL2 モードでの結果:
image.png

WebGPU モードでの結果:
image.png

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

おわりに

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

ちなみに、WebGPU の登場を首を長くして待っている方も多いかもしれませんが、残念ながら、もう少し待つ必要があるようです。
今のところ仕様策定の完成目標としては 2022年のQ1を予定しているそうです。

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

cx20
プログラマ(マイクロソフト系の言語を使用することが多いです。) 最近は、JavaScript のライブラリを色々と試して遊んでます。
https://profile.hatena.ne.jp/cx20/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away