🔼

WebGPUのチュートリアル「初めてのWebGPUアプリ」を実装してみて感じたこと

2024/01/06に公開

JavaScript

WebGL

WebGPU

tech

はじめに

WebGPUを試してみたいと思っていたので、Googleが公開しているチュートリアル「初めてのWebGPUアプリ」を読みながら実装してみました。
この記事では、その時に自分が実装したソースコードを公開して、WebGPUやチュートリアルに対して感じたことを書きます。

チュートリアルの概要

「初めてのWebGPUアプリ」のリンクがこちらです。

題材はライフゲームを実装するというものです。
完成した時のイメージを貼っておきます。

難易度はWebGL経験者にはそれほど難しくないと思いますが、そうでない人には「どうしてライフゲームを実装するだけなのにこんなに面倒なの？」と思われるかもしれません。
あくまでWebGPUの使い方を知るためのチュートリアルと思って進めるのがいいと思います。

チュートリアルに対する感想

よかったところ
- ライフゲームという題材が良い
  - compute shader, storage buffer, instancingなどの機能のすごさが分かる
  - ライフゲームのことは知っていたのでスムーズに取り組めた
- ソースコードだけではなく、その意味や用語の説明も十分だった
気になったところ
- 2Dの描画なので少し盛り上がりに欠ける
- 最終的な全体のソースコードは掲載されていない

3Dの描画を扱うと内容が肥大化しちゃうのでもちろん仕方ないことだと思います。

また、全体のソースコードがないのは、後述のエラーメッセージが分かりやすくなっているのを開発者に実感してほしいからかもしれません。

大体感想はこんなところでした。
全体的に非常に良いチュートリアルでしたし、気になったところも「まぁこうなるのも分かるけど強いて言うなら...」程度でした。

とはいえ、チュートリアルを進める中で詰まってしまったときに、全体のソースコードはあった方が良いと思いますので、自分が実装したソースコードを貼っておきます。

WebGPUに対する感想

良かったところ
- エラーメッセージが分かりやすくなっている
- BindGroupのおかげで管理が楽で実装もシンプルに
- 強力な機能が簡単に使える
気になったところ
- まだなし。強いて言うなら対応ブラウザがもっと増えてほしい

WebGPUで作るオブジェクトには基本的に任意の文字列をラベルとして付けられるようになっており、「〇〇ってラベルのやつの××が足りないよ」のようなエラーメッセージが表示されます。

WebGLではbuffer, uniformなどを別々で保持して、全部をbindしてからドローコールする必要がありましたが、WebGPUでは事前にBindGroupにまとめておいてこれをbindするだけで良いです。

storage buffer, instancing, compute bufferなどの強力な機能は、WebGL2でも別の名前であった気がするのですが結構使うのが面倒だったはずです。WebGPUではそこが改善されて自然に使えるようになっています。WebGLからインタフェースが大幅に変わっているのもこのため？

さいごに

ということで、WebGPUのチュートリアルを実装してみた感想でした。
全体的にかなり満足で、WebGPUという技術についてもかなり可能性を感じますし、普段WebGLで仕事をしていますが早くWebGPUに移行したいと思いました。
対応ブラウザが増えてきた時にすぐ移行できる様に、これからも勉強を進めたいと思います。