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

WGSL fragment_depth 扩展

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

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

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

为了解决此性能损失问题，WGSL 扩展 fragment_depth 可让您在 @builtin(frag_depth) 上指定 less 或 greater 深度模式名称，以明确说明写入的深度与插值的深度之间的比较方式，从而使 GPU 能够安全地应用 Early-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"],
});

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

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

通过添加“srgb-linear”和“display-p3-linear”预定义色彩空间，WebGPU 画布上下文现在可以直接渲染到扩展范围线性色彩空间，以支持广色域显示屏。这些色彩空间在像素值和物理亮度之间保持线性关系。这使其非常适合游戏中的物理光渲染以及空间处理任务，例如抗锯齿、插值和抽取。请参阅发布意向和粒子 (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。

NVIDIA 在 Linux 上支持 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