このページは Cloud Translation API によって翻訳されました。

WebGPU の新機能（Chrome 131）

François Beaufort

WGSL でのクリップの距離

クリップ距離を使用すると、頂点ステージの出力でユーザー定義の半空間を使用して、プリミティブのクリップボリュームを制限できます。独自のクリッピングプレーンを定義すると、WebGPU シーンに表示される内容をより細かく制御できます。この手法は、可視化を正確に制御することが重要な CAD ソフトウェアなどのアプリケーションで特に便利です。

GPUAdapter で "clip-distances" 機能を使用できる場合は、この機能を使用して GPUDevice をリクエストし、WGSL でクリップ距離のサポートを取得します。また、enable clip_distances; を使用して WGSL コードでこの拡張機能を明示的に有効にします。有効にすると、頂点シェーダーで clip_distances 組み込み配列を使用できます。この配列には、ユーザー定義のクリッププレーンまでの距離が保持されます。

クリップ距離が 0 の場合、頂点は平面上にあります。
距離が正の場合、頂点はクリップの半空間（保持する側）内にあります。
距離が負の場合、頂点はクリップ半空間（破棄する側）の外側にあります。

次のスニペット、chromestatus のエントリ、問題 358408571 をご覧ください。

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("clip-distances")) {
  throw new Error("Clip distances support is not available");
}
// Explicitly request clip distances support.
const device = await adapter.requestDevice({
  requiredFeatures: ["clip-distances"],
});

const vertexShaderModule = device.createShaderModule({ code: `
  enable clip_distances;

  struct VertexOut {
    @builtin(clip_distances) my_clip_distances : array<f32, 1>,
    @builtin(position) my_position : vec4f,
  }
  @vertex fn main() -> VertexOut {
    var output : VertexOut;
    output.my_clip_distances[0] = 1;
    output.my_position = vec4f(0, 0, 0, 1);
    return output;
  }
`,
});

// Send the appropriate commands to the GPU...

GPUCanvasContext getConfiguration()

構成辞書を使用して GPUCanvasContext configure() が呼び出されると、GPUCanvasContext getConfiguration() メソッドを使用してキャンバスコンテキストの構成を確認できます。これには、device、format、usage、viewFormats、colorSpace、toneMapping、alphaMode のメンバーが含まれます。これは、粒子（HDR）のサンプルに示すように、ブラウザが HDR キャンバスをサポートしているかどうかを確認するなどのタスクに役立ちます。次のスニペット、chromestatus のエントリ、問題 370109829 をご覧ください。

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

// Configure the canvas for HDR.
context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

const configuration = context.getConfiguration();
if (configuration.toneMapping.mode === "extended") {
  // The browser supports HDR canvas.
  // Warning! The user still needs a HDR display to enjoy HDR content.
}

ポイントプリミティブとラインプリミティブに深度バイアスを設定しないでください

以前に発表されたとおり、WebGPU 仕様では、レンダリングパイプラインのトポロジが線または点のタイプである場合に、depthBias、depthBiasSlopeScale、depthBiasClamp をゼロ以外の値に設定すると、検証エラーになります。問題 352567424 をご覧ください。

サブグループの包括的スキャンの組み込み関数

サブグループの試験運用の一環として、問題 361330160 で次のサブグループ組み込み関数が追加されました。

subgroupInclusiveAdd(value): サブグループ内のすべてのアクティブな呼び出し value の包括的なスキャンの合計を返します。
subgroupInclusiveMul(value): サブグループ内のすべてのアクティブな呼び出し value の包括的なスキャン乗算を返します。

マルチドロー間接の試験運用版サポート

マルチドロー間接 GPU 機能を使用すると、1 つの GPU コマンドで複数のドロー呼び出しを発行できます。これは、パーティクルシステム、インスタンス化、大規模なシーンなど、大量のオブジェクトをレンダリングする必要がある場合に特に便利です。drawIndirect() メソッドと drawIndexedIndirect() GPURenderPassEncoder メソッドでは、GPU バッファの特定の領域から一度に発行できるドローコールは 1 つだけです。

この試験運用版の機能が標準化されるまで、chrome://flags/#enable-unsafe-webgpu で「Unsafe WebGPU Support」フラグを有効にして、Chrome でこの機能を利用できるようにします。

GPUAdapter で利用可能な "chromium-experimental-multi-draw-indirect" 非標準の GPU 機能を使用して、この機能を含む GPUDevice をリクエストします。次に、GPUBufferUsage.INDIRECT の使用方法で GPUBuffer を作成し、ドローコールを格納します。後で新しい multiDrawIndirect() メソッドと multiDrawIndexedIndirect() GPURenderPassEncoder メソッドで使用して、レンダリングパス内でドロー呼び出しを発行できます。次のスニペットと問題 356461286 をご覧ください。

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("chromium-experimental-multi-draw-indirect")) {
  throw new Error("Experimental multi-draw indirect support is not available");
}
// Explicitly request experimental multi-draw indirect support.
const device = await adapter.requestDevice({
  requiredFeatures: ["chromium-experimental-multi-draw-indirect"],
});

// Draw call have vertexCount, instanceCount, firstVertex, and firstInstance parameters.
const drawData = new Uint32Array([
  3, 1, 0, 0, // First draw call
  3, 1, 3, 0, // Second draw call
]);
// Create a buffer to store the draw calls.
const drawBuffer = device.createBuffer({
  size: drawData.byteLength,
  usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(drawBuffer, 0, drawData);

// Create a render pipeline, a vertex buffer, and a render pass encoder...

// Inside a render pass, issue the draw calls.
myPassEncoder.setPipeline(myPipeline);
myPassEncoder.setVertexBuffer(0, myVertexBuffer);
myPassEncoder.multiDrawIndirect(drawBuffer, /*offset=*/ 0, /*maxDrawCount=*/ 2);
myPassEncoder.end();

シェーダーモジュールのコンパイルオプションの厳密な数学

シェーダーモジュールのコンパイル中に厳密な数学を有効または無効にできるように、GPUShaderModuleDescriptor にブール値 strictMath 開発者オプションが追加されました。この機能は、chrome://flags/#enable-webgpu-developer-features の [WebGPU デベロッパー機能] フラグで利用できます。つまり、開発時にのみ使用することを目的とした機能です。問題 42241455 をご覧ください。

現在、このオプションは Metal と Direct3D でサポートされています。厳密な演算が無効になっている場合、コンパイラは次のようにシェーダーを最適化することがあります。

NaN 値と Infinity 値の可能性を無視します。
-0 を +0 として扱う。
除算を、より高速な逆数による乗算に置き換えた。
結合法則と分配法則に基づく演算の並べ替え。

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const code = `
  // Examines the bit pattern of the floating-point number to
  // determine if it represents a NaN according to the IEEE 754 standard.
  fn isNan(x : f32) -> bool {
    bool ones_exp = (bitcast<u32>(x) & 0x7f8) == 0x7f8;
    bool non_zero_sig = (bitcast<u32>(x) & 0x7ffff) != 0;
    return ones_exp && non_zero_sig;
  }
  // ...
`;

// Enable strict math during shader compilation.
const shaderModule = device.createShaderModule({ code, strictMath: true });

GPUAdapter requestAdapterInfo() を削除

GPUAdapter info 属性を使用して GPUAdapterInfo を同期的に取得できるため、GPUAdapter requestAdapterInfo() 非同期メソッドは冗長です。そのため、非標準の GPUAdapter requestAdapterInfo() メソッドは削除されました。削除の意向をご覧ください。

Dawn の更新

tint_benchmark 実行可能ファイルは、シェーダーを WGSL から各バックエンド言語に変換するコストを測定します。詳しくは、新しいドキュメントをご覧ください。

以下に、主なハイライトをいくつかご紹介します。コミットの一覧（すべて網羅）をご覧ください。