WebGPU 中的新变化（Chrome 155-156）

WGSL fragment_depth 扩展

在几何图形密集型渲染通道中，早期 Z 优化是开发者的最佳帮手。它们让 GPU 能够在运行耗费资源的片段着色器之前舍弃隐藏像素，从而大幅提升性能。如果光栅化深度未通过深度测试，GPU 会完全跳过 fragment 着色器，前提是该着色器没有其他副作用。

如果您想深入了解硬件如何处理此问题，MJP 撰写了一篇精彩的文章，介绍了何时必须停用 Early-Z？。

虽然自定义深度操作很有用，但在片段着色器中执行此操作会产生隐性开销。在片段着色器内写入 @builtin(frag_depth) 通常会强制驱动程序针对整个绘制调用停用这些早期 Z 优化。这是因为驱动程序启发式方法无法保证着色器计算的输出深度与光栅化器插值的深度相匹配。

为了解决此性能损失问题，WGSL 扩展程序 fragment_depth 允许您在 @builtin(frag_depth) 上指定 less 或 greater 深度模式名称，以明确说明写入的深度与插值深度之间的比较方式，从而使 GPU 能够安全地应用早期 Z 优化。

可以使用 navigator.gpu.wgslLanguageFeatures 在 JavaScript 中检测此语言扩展功能。建议在 WGSL 着色器代码的顶部使用 requires 指令来表明 requires fragment_depth; 可能会导致不兼容。请参阅以下示例和发布意向。

if (!navigator.gpu.wgslLanguageFeatures.has("fragment_depth")) {
  throw new Error(`WGSL fragment depth is not available`);
}

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const shaderModule = device.createShaderModule({ code: `
  requires fragment_depth;

  @fragment
  fn main() -> @builtin(frag_depth, less) f32 {
    // Explicitly states that the output fragment depth is less than early-Z depth,
    // allowing the GPU to safely preserve early-Z optimizations.
    return 0.0f;
  }`,
});

纹理压缩未对齐

借助“texture-compression-unaligned”GPU 功能，您可以创建尺寸不是块大小（例如 BC、ETC2 和 ASTC 格式的 4x4）的整数倍的压缩纹理。以前，WebGPU 严格要求纹理大小与这些块边界对齐。此功能无需填充或缩放纹理即可适应块对齐，因此可保留原始压缩保真度，而不会引入缩放失真。请参阅发布意向。

以下代码段用于检查适配器是否支持未对齐的纹理压缩，如果支持，则请求使用支持该功能的设备。

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("texture-compression-unaligned")) {
  throw new Error("Texture compression unaligned support is not available");
}
// Explicitly request texture compression unaligned support.
const device = await adapter.requestDevice({
  requiredFeatures: ["texture-compression-unaligned"],
});

非常感谢 spark.js 的外部贡献者 Ignacio Castaño 推动了此功能、规范和 CTS 工作！

srgb-linear 和 display-p3-linear 颜色空间

随着“srgb-linear”和“display-p3-linear”预定义色彩空间的添加，WebGPU 画布上下文现在可以直接渲染到扩展范围的线性色彩空间中，以支持广色域显示屏。这些色彩空间在像素值和物理亮度之间保持线性关系。这使得它们非常适合游戏中的物理光照渲染以及抗锯齿、插值和抽取等空间处理任务。请参阅发布意向和 Particles (HDR) 示例 PR #574。

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",
  colorSpace: "display-p3-linear",
});

添加了额外的 snorm10-10-10-2 顶点格式

“snorm10-10-10-2”顶点格式是一种打包的 32 位格式，包含四个有符号的归一化值：三个 10 位分量 (r, g, b) 和一个 2 位分量 (a)。借助此格式，您可以高效存储属性，例如具有额外 2 位标量或对齐标志的 3D 法线向量，同时节省内存带宽。请参阅规范 PR 6491。

在 Linux 上为 NVIDIA 提供 f16 支持

可选的“shader-f16”功能（可在 WGSL 中支持 16 位浮点值）现在在 Linux 上受支持，适用于最新的 NVIDIA GPU 驱动程序。请参阅问题 chromium:42251215。

Dawn 更新

现在，您可以使用 WGPUAdapterPropertiesD3D 结构查询给定 GPU 适配器的底层 DXGIAdapter 的 LUID。请参阅问题 chromium:562849566。

以下内容涵盖了一些关键亮点。查看完整的提交列表。

WebGPU 最新动态

WebGPU 新动态系列中涵盖的所有内容。

Chrome 155-156

Chrome 153-154

Chrome 151-152

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