WebGPU(Chrome 129)中的新变化

François Beaufort
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 屏幕上显示的“粒子 (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 的二进制异或。

  • subgroupMin(value):返回子组中所有有效调用 value 的最小值。
  • subgroupMax(value):返回子组中所有活动调用 value 的最大值。

  • subgroupAll(value):如果子组中的所有有效调用都为 value,则返回 true。
  • subgroupAny(value):如果子组中的任何有效调用都为 value,则返回 true。

  • subgroupElect():如果此调用在子组中的有效调用中具有最低的 subgroup_invocation_id,则返回 true。
  • subgroupBroadcastFirst(value):将子组中 subgroup_invocation_id 值最低的有效调用中的 value 广播到所有其他有效调用。

  • subgroupShuffle(value, id):从 subgroup_invocation_idid 匹配的有效调用返回 value
  • subgroupShuffleXor(value, mask):从 subgroup_invocation_idsubgroup_invocation_id ^ mask 匹配的有效调用返回 valuemask 必须是动态均匀的。
  • subgroupShuffleUp(value, delta):从 subgroup_invocation_idsubgroup_invocation_id - delta 匹配的有效调用返回 value
  • subgroupShuffleDown(value, delta):从 subgroup_invocation_idsubgroup_invocation_id + delta 匹配的有效调用返回 value

  • quadBroadcast(value, id):从 ID 等于 id 的四元调用广播 valueid 必须是常量表达式。
  • 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 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