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

WebGPU の新機能（Chrome 131）

François Beaufort

WGSL でのクリップ距離

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

"clip-distances" 機能が GPUAdapter で利用可能な場合は、この機能を使用して 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 のメンバーが含まれます。これは、Particles（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() メソッドは、GPU バッファの特定の領域から一度に 1 つのドローコールのみを発行できます。

この試験運用版の機能が標準化されるまでは、chrome://flags/#enable-unsafe-webgpu で「安全でない WebGPU サポート」フラグを有効にして、Chrome で利用できるようにしてください。

GPUAdapter で利用可能な "chromium-experimental-multi-draw-indirect" 非標準 GPU 機能を使用して、この機能を持つ GPUDevice をリクエストします。次に、GPUBufferUsage.INDIRECT の使用法で GPUBuffer を作成して、ドローコールを保存します。これは、新しい multiDrawIndirect() メソッドと multiDrawIndexedIndirect() メソッドで後で使用して、レンダーパス内でドローコールを発行できます。次のスニペットと問題 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 requestAdapterInfo() 属性を使用して GPUAdapterInfo を同期的に取得できるため、GPUAdapter requestAdapterInfo() 非同期メソッドは冗長です。infoそのため、非標準の GPUAdapter requestAdapterInfo() メソッドが削除されました。削除の意向をご覧ください。

Dawn のアップデート

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

ここでは、主なハイライトの一部のみを取り上げます。コミットの一覧をご覧ください。