WebGPU（Chrome 129）中的新变化

François Beaufort
François Beaufort
GitHub

支持使用画布色调映射模式的 HDR

Web 开发者在提供 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，请查看 Particles (HDR) 示例和 WebGPU HDR 示例，并参阅 chromestatus 条目。

一台配有 HDR 屏幕的笔记本电脑，屏幕上显示着一张色彩鲜艳的图片。
在 HDR 屏幕上显示的 Particles (HDR) 示例。

扩大了对子群组的支持

在宣布子群组实验之后，子群组内置函数现在可用于计算着色器和片段着色器。它们不再仅限于计算着色器。请参阅问题 354738715。

请注意，subgroup_size 内置值目前在片段着色器中存在 bug。请暂时避免使用它。

此外，还添加了以下子群组内置函数：

  • 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;

这仅涵盖了一些主要亮点。如需查看完整列表，请参阅提交。

WebGPU 新变化

列出了 WebGPU 新变化 系列中涵盖的所有内容。

Chrome 149-150

Chrome 147-148

Chrome 146

Chrome 145

Chrome 144

Chrome 143

Chrome 142

Chrome 141

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

Chrome 131

Chrome 130

Chrome 129

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113