WebGPU 的新变化 (Chrome 119)

François Beaufort
François Beaufort
GitHub

可滤的 32 位浮点纹理

32 位浮点纹理用于存储高精度数据，例如 HDR 图片和深度图。它们对于高端游戏和专业应用中使用的 GPU 尤为重要。

“支持可过滤的 32 位浮点纹理”描述了 GPU 过滤 32 位浮点纹理的能力。这意味着 GPU 可以平滑浮点纹理的边缘，使其看起来不那么锯齿状。它类似于 WebGL 中的“OES_texture_float_linear”扩展。

并非所有 GPU 都支持可过滤的 32 位浮点纹理。当 GPUAdapter 中提供 "float32-filterable" 功能后，您现在可以请求具有此功能的 GPUDevice，并使用“r32float”“rg32float”和“rgba32float”格式滤除纹理。请参阅以下示例和问题 dawn:1664。

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("float32-filterable")) {
  throw new Error("Filterable 32-bit float textures support is not available");
}
// Explicitly request filterable 32-bit float textures support.
const device = await adapter.requestDevice({
  requiredFeatures: ["float32-filterable"],
});

// Create a sampler with linear filtering.
const sampler = device.createSampler({
  magFilter: "linear",
});

// Create a texture with rgba32float format.
const texture = device.createTexture({
  size: [100, 100],
  format: "rgba32float",
  usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
});

// Write data to texture, create a bindgroup with sampler and texture and
// send the appropriate commands to the GPU....

unorm10-10-10-2 顶点格式

WebGPU 规范中新增了一种名为“unorm10-10-10-2”（也称为“rgb10a2”）的新顶点格式。它由一个包含四个归一化无符号整数值的打包 32 位值组成，这些值的排列方式为 10 位、10 位、10 位和 2 位。请参阅以下示例和问题 dawn:2044。

// Define the layout of vertex attribute data with unorm10-10-10-2 format.
const buffers = [
  {
    arrayStride: 0,
    attributes: [
      { format: "unorm10-10-10-2", offset: 0, shaderLocation: 0 },
    ],
  },
];

// Describe the vertex shader entry point and its input buffer layouts.
const vertex = {
  module: myVertexShaderModule,
  entryPoint: "main",
  buffers,
};

// Pass vertex to device.createRenderPipeline() and
// use vec4<f32> type in WGSL shader code to manipulate data.

rgb10a2uint 纹理格式

WebGPU 规范中新增了名为“rgb10a2uint”的新纹理格式。它由 32 位打包像素格式组成，其中包含四个无符号整数部分：10 位红色、10 位绿色、10 位蓝色和 2 位 Alpha。请参阅以下示例和issue dawn:1936。

// Create a texture with rgb10a2uint format.
const texture = device.createTexture({
  size: [100, 100],
  format: "rgb10a2uint",
  usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
});

// Write data to texture, create a bindgroup with texture and
// send the appropriate commands to the GPU....

Dawn 更新

借助时间戳查询，WebGPU 应用可以精确地（精确到纳秒）衡量其 GPU 命令的执行时间。用于在传递开始和结束时捕获时间戳查询的 API 形状已更新为与 WebGPU 规范保持一致。请参阅以下示例和issue dawn:1800。

// Create a timestamp query set that will store the timestamp values.
wgpu::QuerySetDescriptor querySetDescriptor = {
    .count = 2,
    .type = wgpu::QueryType::Timestamp};
wgpu::QuerySet querySet = device.CreateQuerySet(&querySetDescriptor);

wgpu::RenderPassTimestampWrites timestampWrites = {
    .querySet = querySet,
    .beginningOfPassWriteIndex = 0,
    .endOfPassWriteIndex = 1};
wgpu::ComputePassDescriptor pass{.timestampWrites = &timestampWrites};

// Write the queue timestamp into beginningOfPassWriteIndex and
// endOfPassWriteIndex of myQuerySet respectively before and after the pass
// commands execute.
myEncoder.BeginComputePass(&pass);

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

WebGPU 中的新变化

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

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