WebGPU 的新变化 (Chrome 131)

François Beaufort

WGSL 中的剪裁距离

借助剪裁距离，您可以在顶点阶段的输出中使用用户定义的半空间来限制基元剪裁体积。通过定义自己的剪裁平面，您可以更好地控制 WebGPU 场景中可见的内容。对于 CAD 软件等需要精确控制可视化效果的应用，此技术尤为有用。

当 GPUAdapter 中提供了 "clip-distances" 功能时，请求具有此功能的 GPUDevice 以在 WGSL 中获得裁剪距离支持，并使用 enable clip_distances; 在 WGSL 代码中明确启用此扩展。启用后，您可以在顶点着色器中使用 clip_distances 内置数组。此数组存储与用户定义的裁剪平面的距离：

• 剪裁距离为 0 表示顶点位于平面上。
• 正距离表示顶点位于剪辑半空间（您要保留的一侧）内。
• 负距离表示顶点位于剪裁半空间（您要舍弃的一侧）之外。

请参阅以下代码段、chromestatus 条目和问题 358408571。

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

const vertexShaderModule = device.createShaderModule({ code: `
  enable clip_distances;

  struct VertexOut {
    @builtin(clip_distances) my_clip_distances : array<f32, 1>,
    @builtin(position) my_position : vec4f,
  }
  @vertex fn main() -> VertexOut {
    var output : VertexOut;
    output.my_clip_distances[0] = 1;
    output.my_position = vec4f(0, 0, 0, 1);
    return output;
  }
`,
});

// Send the appropriate commands to the GPU...

GPUCanvasContext getConfiguration()

使用配置字典调用 GPUCanvasContext configure() 后，您可以使用 GPUCanvasContext getConfiguration() 方法检查画布上下文配置。其中包括 device、format、usage、viewFormats、colorSpace、toneMapping 和 alphaMode 成员。这对于检查浏览器是否支持 HDR 画布等任务非常有用，如粒子 (HDR) 示例中所示。请参阅以下代码段、chromestatus 条目和问题 370109829。

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

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

// Configure the canvas for HDR.
context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

const configuration = context.getConfiguration();
if (configuration.toneMapping.mode === "extended") {
  // The browser supports HDR canvas.
  // Warning! The user still needs a HDR display to enjoy HDR content.
}

点和线基元不得有深度偏差

正如之前所宣布的那样，WebGPU 规范现在规定，如果渲染管道的拓扑结构为线条或点类型，将 depthBias、depthBiasSlopeScale 和 depthBiasClamp 设置为非零值将会导致验证错误。请参阅问题 352567424。

针对子群组的包含性扫描内置函数

在子群组实验中，我们在问题 361330160 中添加了以下子群组内置函数：

• subgroupInclusiveAdd(value)：返回子组中所有活动调用 value 的包含扫描求和。
• subgroupInclusiveMul(value)：返回子组中所有活跃调用 value 的包容性扫描乘法。

对多绘制间接进行了实验性支持

借助多绘制间接 GPU 功能，您可以使用单个 GPU 命令发出多个绘制调用。在需要渲染大量对象的情况下，这尤其有用，例如在粒子系统、实例化和大型场景中。drawIndirect() 和 drawIndexedIndirect() GPURenderPassEncoder 方法一次只能从 GPU 缓冲区的特定区域发出一个绘制调用。

在这项实验性功能标准化之前，请前往 chrome://flags/#enable-unsafe-webgpu 启用“不安全的 WebGPU 支持”标志，以使其在 Chrome 中可用。

在 GPUAdapter 中使用 "chromium-experimental-multi-draw-indirect" 非标准 GPU 功能，请求具有此功能的 GPUDevice。然后，创建一个使用 GPUBufferUsage.INDIRECT 的 GPUBuffer 来存储绘制调用。您稍后可以在新的 multiDrawIndirect() 和 multiDrawIndexedIndirect() GPURenderPassEncoder 方法中使用它，以便在渲染 pass 中发出绘制调用。请参阅以下代码段和问题 356461286。

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("chromium-experimental-multi-draw-indirect")) {
  throw new Error("Experimental multi-draw indirect support is not available");
}
// Explicitly request experimental multi-draw indirect support.
const device = await adapter.requestDevice({
  requiredFeatures: ["chromium-experimental-multi-draw-indirect"],
});

// Draw call have vertexCount, instanceCount, firstVertex, and firstInstance parameters.
const drawData = new Uint32Array([
  3, 1, 0, 0, // First draw call
  3, 1, 3, 0, // Second draw call
]);
// Create a buffer to store the draw calls.
const drawBuffer = device.createBuffer({
  size: drawData.byteLength,
  usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(drawBuffer, 0, drawData);

// Create a render pipeline, a vertex buffer, and a render pass encoder...

// Inside a render pass, issue the draw calls.
myPassEncoder.setPipeline(myPipeline);
myPassEncoder.setVertexBuffer(0, myVertexBuffer);
myPassEncoder.multiDrawIndirect(drawBuffer, /*offset=*/ 0, /*maxDrawCount=*/ 2);
myPassEncoder.end();

着色器模块编译选项“严格的数学运算”

向 GPUShaderModuleDescriptor 添加了一个布尔型 strictMath 开发者选项，以便您在着色器模块编译期间启用或停用严格的数学运算。此功能位于 chrome://flags/#enable-webgpu-developer-features 的“WebGPU 开发者功能”标志后面，这意味着该功能仅适用于开发期间使用。请参阅问题 42241455。

Metal 和 Direct3D 目前支持此选项。停用严格数学后，编译器可以通过以下方式优化着色器：

• 忽略 NaN 和无穷大值的可能性。
• 将 -0 视为 +0。
• 将除法替换为更快的乘法（乘以倒数）。
• 根据关联和分配属性重新排列操作。

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

const code = `
  // Examines the bit pattern of the floating-point number to
  // determine if it represents a NaN according to the IEEE 754 standard.
  fn isNan(x : f32) -> bool {
    bool ones_exp = (bitcast<u32>(x) & 0x7f8) == 0x7f8;
    bool non_zero_sig = (bitcast<u32>(x) & 0x7ffff) != 0;
    return ones_exp && non_zero_sig;
  }
  // ...
`;

// Enable strict math during shader compilation.
const shaderModule = device.createShaderModule({ code, strictMath: true });

移除 GPUAdapter requestAdapterInfo()

GPUAdapter requestAdapterInfo() 异步方法是多余的，因为您已经可以使用 GPUAdapter info 属性同步获取 GPUAdapterInfo。因此，非标准 GPUAdapter requestAdapterInfo() 方法现已移除。请参阅移除 intent。

Dawn 更新

tint_benchmark 可执行文件用于衡量将着色器从 WGSL 翻译为每个后端语言的开销。如需详细了解，请参阅新的文档。

本指南仅涵盖部分重要内容。查看详尽的提交内容列表。

WebGPU 中的新变化

WebGPU 新变化系列涵盖的所有内容的列表。

Chrome 浏览器 131

• 在 WGSL 中剪裁距离
• GPUCanvasContext getConfiguration()
• 点和线图元不得有深度偏差
• 针对子群组的包含性扫描内置函数
• 对多绘制间接的实验性支持
• 着色器模块编译选项“严格数学”
• 移除了 GPUAdapter requestAdapterInfo()
• Dawn 更新

Chrome 130

• 双源混合
• Metal 上的着色器编译时间缩短
• 弃用 GPUAdapter requestAdapterInfo()
• Dawn 更新

Chrome 129

• 支持 HDR 和画布色调映射模式
• 对子群组的支持更广泛
• Dawn 最新动态

Chrome 128

• 对子群组进行实验
• 废弃了为线条和点设置深度偏差的功能
• 如果阻止默认，则隐藏开发者工具警告中未捕获的错误
• WGSL 会先插值采样，然后
• Dawn 更新

Chrome 127

• 在 Android 上为 OpenGL ES 提供实验性支持
• GPUAdapter info 属性
• WebAssembly 互操作性改进
• 改进了命令编码器错误
• Dawn 更新

Chrome 126

• 提高了 maxTextureArrayLayers 限制
• 针对 Vulkan 后端的缓冲区上传优化
• 着色器编译时间改进
• 提交的命令缓冲区必须是唯一的
• Dawn 更新

Chrome 125

• 子群组（功能正在开发中）
• 渲染到 3D 纹理的切片
• Dawn 更新

Chrome 124

• 只读和读写存储纹理
• 服务工作线程和共享工作线程支持
• 新的适配器信息属性
• bug 修复
• Dawn 更新

Chrome 123

• WGSL 中对 DP4a 内置函数的支持
• WGSL 中的无限制指针参数
• WGSL 中用于解引用复合体的语法糖
• 为模板和深度方面分别提供只读状态
• Dawn 最新动态

Chrome 122

• 利用兼容模式扩大覆盖面（功能尚处于开发阶段）
• 提高 maxVertexAttributes 限制
• Dawn 更新

Chrome 121

• 支持 Android 上的 WebGPU
• 在 Windows 上使用 DXC 而非 FXC 进行着色器编译
• 计算和渲染通道中的时间戳查询
• 着色器模块的默认入口点
• 支持将 display-p3 用作 GPUExternalTexture 色彩空间
• 内存堆信息
• Dawn 更新

Chrome 120

• 在 WGSL 中支持 16 位浮点值
• 挑战极限
• 对深度模板状态的更改
• 适配器信息更新
• 时间戳查询量化
• 春季大扫除功能

Chrome 119

• 可滤的 32 位浮点纹理
• unorm10-10-10-2 顶点格式
• rgb10a2uint 纹理格式
• Dawn 更新

Chrome 118

• copyExternalImageToTexture() 中的 HTMLImageElement 和 ImageData 支持
• 对读写和只读存储纹理的实验性支持
• Dawn 更新

Chrome 117

• 取消设置顶点缓冲区
• 取消设置绑定群组
• 在设备丢失时，忽略异步流水线创建错误
• SPIR-V 着色器模块创建更新
• 改进开发者体验
• 使用自动生成的布局缓存流水线
• Dawn 更新

Chrome 116

• WebCodecs 集成
• GPUAdapter requestDevice() 返回的丢失设备
• 在调用 importExternalTexture() 时保持视频流畅播放
• 规范合规性
• 改进开发者体验
• Dawn 最新动态

Chrome 115

• 支持的 WGSL 语言扩展
• 对 Direct3D 11 的实验性支持
• 在使用交流电源时默认获取独立显卡
• 改进开发者体验
• Dawn 更新

Chrome 114

• 优化 JavaScript
• 在未配置的画布上调用 getCurrentTexture() 会抛出 InvalidStateError
• WGSL 更新
• Dawn 更新

Chrome 113

• 在 importExternalTexture() 中使用 WebCodecs VideoFrame 源