このページは 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): 四角形内の呼び出し間で value を Y 方向にスワップします。
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;

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