WebGPU 的新变化 (Chrome 121)

François Beaufort

支持 Android 上的 WebGPU

Chrome 团队很高兴地宣布，在搭载 Qualcomm 和 ARM GPU 且运行 Android 12 及更高版本的设备上，Chrome 121 现在默认启用 WebGPU。

我们将逐步扩大支持范围，涵盖更多 Android 设备，包括搭载 Android 11 的设备。此扩展将取决于进一步的测试和优化，以确保在更广泛的硬件配置中提供流畅的体验。请参阅问题 chromium:1497815。

在 Android 版 Chrome 上运行的 WebGPU 示例。

在 Windows 上使用 DXC 而非 FXC 进行着色器编译

Chrome 现在使用强大的 DXC（DirectX 编译器）在配备 SM6+ 图形硬件的 Windows D3D12 计算机上编译着色器。以前，WebGPU 在 Windows 上依赖 FXC（FX 编译器）进行着色器编译。FXC 虽然可以正常运行，但缺少 DXC 中的功能集和性能优化。

初步测试表明，与使用 FXC 相比，使用 DXC 时计算着色器编译速度平均提高了 20%。

计算和渲染通道中的时间戳查询

借助时间戳查询，WebGPU 应用可以精确地（精确到纳秒）衡量其 GPU 命令执行计算和渲染传递所需的时间。这些指标非常有用，可帮助您深入了解 GPU 工作负载的性能和行为。

当 GPUAdapter 中提供 "timestamp-query" 功能时，您现在可以执行以下操作：

• 请求具有 "timestamp-query" 功能的 GPUDevice。
• 创建一个类型为 "timestamp" 的 GPUQuerySet。
• 使用 GPUComputePassDescriptor.timestampWrites 和 GPURenderPassDescriptor.timestampWrites 定义要在 GPUQuerySet 中写入时间戳值的位置。
• 使用 resolveQuerySet() 将时间戳值解析为 GPUBuffer。
• 通过将结果从 GPUBuffer 复制到 CPU，读回时间戳值。
• 将时间戳值解码为 BigInt64Array。

请参阅以下示例和问题 dawn:1800。

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("timestamp-query")) {
  throw new Error("Timestamp query feature is not available");
}
// Explicitly request timestamp query feature.
const device = await adapter.requestDevice({
  requiredFeatures: ["timestamp-query"],
});
const commandEncoder = device.createCommandEncoder();

// Create a GPUQuerySet which holds 2 timestamp query results: one for the
// beginning and one for the end of compute pass execution.
const querySet = device.createQuerySet({ type: "timestamp", count: 2 });
const timestampWrites = {
  querySet,
  beginningOfPassWriteIndex: 0, // Write timestamp in index 0 when pass begins.
  endOfPassWriteIndex: 1, // Write timestamp in index 1 when pass ends.
};
const passEncoder = commandEncoder.beginComputePass({ timestampWrites });
// TODO: Set pipeline, bind group, and dispatch work to be performed.
passEncoder.end();

// Resolve timestamps in nanoseconds as a 64-bit unsigned integer into a GPUBuffer.
const size = 2 * BigInt64Array.BYTES_PER_ELEMENT;
const resolveBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC,
});
commandEncoder.resolveQuerySet(querySet, 0, 2, resolveBuffer, 0);

// Read GPUBuffer memory.
const resultBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});
commandEncoder.copyBufferToBuffer(resolveBuffer, 0, resultBuffer, 0, size);

// Submit commands to the GPU.
device.queue.submit([commandEncoder.finish()]);

// Log compute pass duration in nanoseconds.
await resultBuffer.mapAsync(GPUMapMode.READ);
const times = new BigInt64Array(resultBuffer.getMappedRange());
console.log(`Compute pass duration: ${Number(times[1] - times[0])}ns`);
resultBuffer.unmap();

由于时间攻击问题，时间戳查询采用 100 微秒的分辨率进行量化，在准确性和安全性之间提供了良好的折衷。在 Chrome 浏览器中，您可以在应用开发期间通过在 chrome://flags/#enable-webgpu-developer-features 中启用“WebGPU 开发者功能”标志来停用时间戳量化。如需了解详情，请参阅时间戳查询量化。

由于 GPU 可能会不时重置时间戳计数器，这可能会导致意外值（例如时间戳之间的负差），因此建议您查看git diff 更改，以便为以下 Compute Boids 示例添加时间戳查询支持。

包含时间戳查询的 Compute Boids 示例。

着色器模块的默认入口点

为了改善开发者体验，您现在可以在创建计算或渲染管道时省略着色器模块的 entryPoint。如果在着色器代码中找不到着色器阶段的唯一入口点，系统会触发 GPUValidationError。请参阅以下示例和 issue dawn:2254。

const code = `
    @vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
      @builtin(position) vec4f {
       const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
       return vec4f(pos[i], 0, 1);
    }
    @fragment fn fragmentMain() -> @location(0) vec4f {
      return vec4f(1, 0, 0, 1);
    }`;
const module = myDevice.createShaderModule({ code });
const format = navigator.gpu.getPreferredCanvasFormat();
const pipeline = await myDevice.createRenderPipelineAsync({
  layout: "auto",
  vertex: { module, entryPoint: "vertexMain" },
  fragment: { module, entryPoint: "fragmentMain", targets: [{ format }] },
  vertex: { module },
  fragment: { module, targets: [{ format }] },
});

支持将 display-p3 用作 GPUExternalTexture 颜色空间

现在，您可以使用 importExternalTexture() 从 HDR 视频导入 GPUExternalTexture 时设置 "display-p3" 目标色彩空间。了解 WebGPU 如何处理色彩空间。请参阅以下示例和问题 chromium:1330250。

// Create texture from HDR video.
const video = document.querySelector("video");
const texture = myDevice.importExternalTexture({
  source: video,
  colorSpace: "display-p3",
});

内存堆信息

为了帮助您在开发应用期间预测分配大量内存时会遇到的内存限制，requestAdapterInfo() 现在会公开 memoryHeaps 信息，例如适配器上可用内存堆的大小和类型。只有在 chrome://flags/#enable-webgpu-developer-features 中启用“WebGPU 开发者功能”标志后，才能使用此实验性功能。请参阅以下示例和问题 dawn:2249。

const adapter = await navigator.gpu.requestAdapter();
const adapterInfo = await adapter.requestAdapterInfo();

for (const { size, properties } of adapterInfo.memoryHeaps) {
  console.log(size); // memory heap size in bytes
  if (properties & GPUHeapProperty.DEVICE_LOCAL)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_VISIBLE)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_COHERENT) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_UNCACHED) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_CACHED)   { /* ... */ }
}

https://webgpureport.org 上显示的适配器信息内存堆。

Dawn 更新

添加了 wgpu::Instance 上的 HasWGSLLanguageFeature 和 EnumerateWGSLLanguageFeatures 方法，以处理 WGSL 语言功能。请参阅问题 dawn:2260。

借助非标准 wgpu::Feature::BufferMapExtendedUsages 功能，您可以使用 wgpu::BufferUsage::MapRead 或 wgpu::BufferUsage::MapWrite 以及任何其他 wgpu::BufferUsage 创建 GPU 缓冲区。请参阅以下示例和问题 dawn:2204。

wgpu::BufferDescriptor descriptor = {
  .size = 128,
  .usage = wgpu::BufferUsage::MapWrite | wgpu::BufferUsage::Uniform
};
wgpu::Buffer uniformBuffer = device.CreateBuffer(&descriptor);

uniformBuffer.MapAsync(wgpu::MapMode::Write, 0, 128,
   [](WGPUBufferMapAsyncStatus status, void* userdata)
   {
      wgpu::Buffer* buffer = static_cast<wgpu::Buffer*>(userdata);
      memcpy(buffer->GetMappedRange(), data, sizeof(data));
   },
   &uniformBuffer);

已记录以下功能：ANGLE 纹理共享、D3D11 多线程保护、隐式设备同步、Norm16 纹理格式、Pass 内的时间戳查询、像素本地存储、着色器功能和多平面格式。

Chrome 团队创建了Dawn 的官方 GitHub 代码库。

本文仅介绍了一些主要亮点。查看详尽的提交内容列表。

WebGPU 中的新变化

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

Chrome 131

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

Chrome 130

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

Chrome 129

• 支持 HDR 和画布色调映射模式
• 扩展了对子群组的支持
• Dawn 更新

Chrome 128

• 实验性使用子群组
• 废弃了为线条和点设置深度偏差的功能
• 在 preventDefault 的情况下隐藏未捕获的错误开发者工具警告
• 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 源