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

WebGPU の新機能（Chrome 129）

François Beaufort

キャンバストーンマッピングモードでの HDR サポート

ウェブデベロッパーによる HDR コンテンツの配信のオプションは限られており、主に <img> 要素と <video> 要素に依存しています。ただし、<canvas> 要素は SDR に限定されたままです。キャンバス内に動的な HDR コンテンツを生成するには、コンテンツを表示する前にコンテンツを HDR 画像としてエンコードする必要があります（例については、こちらのデモをご覧ください）。

WebGPU キャンバス構成の新しい GPUCanvasToneMappingMode パラメータにより、WebGPU で白（#FFFFFF）よりも明るい色を描画できるようになりました。これは、次のモードで実行されます。

"standard": デフォルトの動作では、コンテンツは画面の SDR 範囲に制限されます。このモードは、画面の色空間内のすべての色値を [0, 1] 区間にクランプすることで実現されます。
"extended": 画面の HDR 範囲をすべて有効にします。このモードは、画面の [0, 1] 範囲の "standard" と一致します。クランプまたは投影は、画面の拡張ダイナミックレンジに対して行われますが、[0, 1] に対しては行われません。

次のコードスニペットは、ハイダイナミックレンジ用にキャンバスを構成する方法を示しています。

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

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

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

WebGPU での HDR の使用については、パーティクル（HDR）のサンプルと WebGPU HDR のサンプル、chromestatus エントリをご覧ください。

鮮やかな画像を表示している HDR 画面のノートパソコン。 — HDR 画面に表示されたパーティクル（HDR）のサンプル。

サブグループのサポートの拡大

サブグループの試験運用の発表に伴い、サブグループの組み込み関数をコンピューティングシェーダーとフラグメントシェーダーの両方で使用できるようになりました。コンピューティングシェーダーだけに制限されなくなりました。問題 354738715 をご覧ください。

現在、フラグメントシェーダーでは subgroup_size 組み込み値にバグがあることに注意してください。当面は使用しないでください。

さらに、次のサブグループの組み込み関数が追加されました。

subgroupAdd(value): サブグループ内のすべてのアクティブな呼び出し value の合計を返します。
subgroupExclusiveAdd(value): サブグループ内のすべてのアクティブな呼び出し value の排他的スキャンの合計を返します。
subgroupMul(value): サブグループ内のすべてのアクティブな呼び出し value の積を返します。
subgroupExclusiveMul(value): サブグループ内のすべてのアクティブな呼び出し value の排他的スキャン乗算を返します。
subgroupAnd(value): サブグループ内のすべてのアクティブな呼び出し value のバイナリ AND を返します。
subgroupOr(value): サブグループ全体でのアクティブな呼び出し value のバイナリ OR を返します。
subgroupXor(value): サブグループ全体でのアクティブな呼び出し value のバイナリ XOR を返します。
subgroupMin(value): サブグループ内のすべてのアクティブな呼び出し value の最小値を返します。
subgroupMax(value): サブグループ全体でのアクティブなすべての呼び出し value の最大値を返します。
subgroupAll(value): サブグループ内のすべてのアクティブな呼び出しで value が true の場合、true を返します。
subgroupAny(value): サブグループ内のアクティブな呼び出しで value が true の場合、true を返します。
subgroupElect(): この呼び出しの subgroup_invocation_id が、サブグループ内のアクティブな呼び出しの中で最も低い場合に true を返します。
subgroupBroadcastFirst(value): サブグループ内で subgroup_invocation_id が最も低いアクティブな呼び出しから、他のすべてのアクティブな呼び出しに value をブロードキャストします。
subgroupShuffle(value, id): subgroup_invocation_id が id と一致するアクティブな呼び出しから value を返します。
subgroupShuffleXor(value, mask): subgroup_invocation_id が subgroup_invocation_id ^ mask と一致するアクティブな呼び出しから value を返します。mask は動的に均一である必要があります。
subgroupShuffleUp(value, delta): subgroup_invocation_id が subgroup_invocation_id - delta と一致するアクティブな呼び出しから value を返します。
subgroupShuffleDown(value, delta): subgroup_invocation_id が subgroup_invocation_id + delta と一致するアクティブな呼び出しから value を返します。
quadBroadcast(value, id): ID が id の四分割呼び出しから value をブロードキャストします。id は定数式である必要があります。
quadSwapX(value): 四角形内の呼び出し間で X 方向に value をスワップします。
quadSwapY(value): 四角形内の呼び出し間で Y 方向に value をスワップします。
quadSwapDiagonal(value): 四角形内の呼び出し間で value を対角方向にスワップします。

Dawn の更新

wgpu::PrimitiveState 構造体に深度クリップ制御設定が直接含まれるようになり、別個の wgpu::PrimitiveDepthClipControl 構造体が必要なくなりました。詳細については、次のコードスニペットと webgpu-headers PR をご覧ください。

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;

// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

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