支持使用画布色调映射模式的 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 条目。
对展开式子组的支持
在宣布子群组实验后,子群组内置函数现在可在计算着色器和片段着色器中使用。它们不再仅限于计算着色器。请参阅问题 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_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 131
- 在 WGSL 中剪裁距离
- GPUCanvasContext getConfiguration()
- 点和线基元不得有深度偏差
- 针对子群组的包含性扫描内置函数
- 对多绘制间接的实验性支持
- 着色器模块编译选项“严格数学”
- 移除了 GPUAdapter requestAdapterInfo()
- Dawn 更新
Chrome 130
Chrome 129
Chrome 128
Chrome 127
Chrome 126
Chrome 125
Chrome 124
Chrome 123
Chrome 122
Chrome 121
- 支持 Android 上的 WebGPU
- 在 Windows 上使用 DXC 而非 FXC 进行着色器编译
- 计算和渲染通道中的时间戳查询
- 着色器模块的默认入口点
- 支持将 display-p3 用作 GPUExternalTexture 色彩空间
- 内存堆信息
- Dawn 更新
Chrome 120
Chrome 119
Chrome 118
Chrome 117
Chrome 116
- WebCodecs 集成
- GPUAdapter
requestDevice()
返回的丢失设备 - 在调用
importExternalTexture()
时保持视频流畅播放 - 规范合规性
- 改进开发者体验
- Dawn 更新