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 功能，请查看粒子 (HDR) 示例和 WebGPU HDR 示例，并参阅 chromestatus 条目。

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

扩展了对子组的支持

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

请注意，subgroup_size 内置值目前在 fragment 着色器中存在 bug。暂时避免。

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

  • subgroupAdd(value)：返回子组中所有有效调用 value 的总和。
  • subgroupExclusiveAdd(value)：返回子群组中所有有效调用 value 的排他性扫描求和结果。
  • subgroupMul(value)：返回子群组中所有有效调用 value 的乘积。
  • subgroupExclusiveMul(value)：返回子群组中所有有效调用 value 的排他性扫描乘积。

  • subgroupAnd(value)：返回子群组中所有有效调用 value 的二进制 AND。
  • subgroupOr(value)：返回子群组中所有有效调用 value 的二进制 OR 结果。
  • subgroupXor(value)：返回子群组中所有有效调用 value 的二进制异或结果。

  • 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 的 quad 调用广播 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 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