WebGPU: 頂点範囲にはバインドされたバッファ サイズより大きいバッファ サイズが必要です

Question

頂点位置の配列を頂点シェーダーに送信してみました。

これは私の JS コード スニペットです:

リーリー

Float32Array の長さは 12 なので、48 バイトになります。ただし、192 バイトが必要であることを示す次のエラー メッセージが表示されます:

頂点範囲 (最初: 0、カウント: 12) には、ストライド 16 で、スロット 0 の頂点バッファーのバインド バッファー サイズ (48) よりも大きなバッファー (192) が必要です。 - エンコーディング [RenderPassEncoder].Draw(12, 1, 0, 0)。

これは質問とは関係ないかもしれませんが、文脈のために、これは私のシェーダー プログラムです:

リーリー

頂点配列は使用しませんが、すべてがエラーなしで実行されるかどうかを示すためにのみ使用します。スニペットの 3 行目のバッファ サイズを vertices.byteLength から 368 に変更すると、正常に動作し、三角形がレンダリングされます。 368 未満の値を指定すると失敗します。

さらにテストを行った結果、頂点ごとに 4 つの float を追加し、ストライドを 32 に変更して Float32Array のサイズを 2 倍にすると、WebGPU が 768 バイトが必要であると表示することがわかりました。

Answer 1

arrayStride を 32 に設定します。これは、各頂点が 32 バイトを占めることを意味します (https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API) #レンダリングパイプラインを定義して作成する)。

1 つのフォーマット float32x4 = 16 バイトしか定義していないため、頂点レイアウトからこれは 16 になるはずです。

エラー メッセージ (Draw(12, 1, 0, 0)) から、12 個の頂点を描画しようとしていることがわかります。これは、予想される合計バッファ サイズが 12*32 = 368 であることを意味します。形式に応じて、これはおそらく Draw(3, 1, 0, 0) となるはずです。このようにして、vertexBuffer を 3 つの頂点に分割することができ、各頂点の位置の値は vec4<f32>

になります。