このページは 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" },
});

パーティクル（HDR）のサンプルと WebGPU HDR の例で WebGPU の HDR を試し、chromestatus エントリをご覧ください。

HDR 画面に鮮やかな画像が表示されているノートパソコン。 — HDR 画面に表示された Particles（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;

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