WebGPUに入門した

developer.mozilla.org

このページに倣って、vertical shader + fragment shaderによる三角形描画（よくあるハローワールド）と、compute shaderによるGPU計算のスクリプトを書いた。

github.com

やったことはcopilotつきの写経だったので、何が行われているのかを自分の言葉で書きたい。

• navigator.gpu
  • Web GPUのエンドポイント。
  • サポートされていればWeb GPUオブジェクトが返ってくる。
  • navigator自体はUAの情報とかを返すAPIらしい。
    • developer.mozilla.org
• navigator.gpu.requrestAdapter().requestDevice()
  • 今のところおまじないだと思っている。デバイスを要求しているらしい。
• シェーダースクリプトからshader moduleの作成
• canvasのwebgpu contextの取得
• 頂点の設定
• bufferの作成
  • sizeとusageを指定する
    • GPUBufferUsageオブジェクトに固定値がマッピングされてるのかな？webglと同じなら非負整数が入ってそう
• bufferに頂点情報を書き込み
• buffer情報の設定
• pipelineDescriptorの設定
  • vertex, fragment, primitive, layoutをそれぞれ設定している
    • vertexはshader moduleと、entrypointになる関数を設定している
• render pipelineの作成
  • pipelineDescriptorを引数として渡す
• command encoderの作成
• commandEncoderからpassEncoderの作成
• pass encoderでパイプラインの設置、バッファーの設置、描画、終了
• command encoderの終了をdevice.queue.submitする

パイプライン周りと、途中で作成されたいろいろなオブジェくトの役割がよくわかっていないが基本はWebGLと変わらなそう。シェーダーとしてcomputeができるようになったり、計算結果の出力先を変数にしたりといった拡張がされたような印象を持った。

three.jsとかpixijsとかはすでに対応しているらしい。 あとはいつ主要なブラウザが対応するかかなあ。