book/examples

27_02 Storage Bufferによる1次元計算

この例は画像を描画せず、8個の数値をGPUへ渡して並列計算し、その結果をJavaScriptへ戻すまでの処理を確認します。入力配列の各要素へ value × 2 + 1 を適用します。

  1. [1, 2, 3, 4, 5, 6, 7, 8]を入力用Storage Bufferへ転送します
  2. Compute Shaderの各invocationが、担当する配列要素を1個ずつ読みます
  3. 計算結果を出力用Storage Bufferへ書き込みます
  4. 出力をCPUから読み取れるreadback Bufferへコピーします
  5. JavaScriptで期待値と比較し、入力値と出力値の対応を下に表示します

要素数は8ですが、WGSLの@workgroup_size(64, 1, 1)により64個のinvocationが起動します。先頭8個だけが計算し、残りはindex >= countの判定で何も書かずに終了します。入力Bufferは読み取り専用、出力Bufferは書き込み可能としてbindingを分け、どのresourceが変更されるかを明示しています。

readbackはGPUとCPUの同期を伴うため、ここでは計算結果を確認する目的で使用しています。毎フレームの描画では、Compute結果をGPU内の次のPassへ直接渡す構成が基本です。

GPU計算を準備しています