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。如需查看示例，请参阅问题 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....

黎明动态

通过时间戳查询，WebGPU 应用能够精确（精确到纳秒）测量执行 GPU 命令所花费的时间。用于捕获卡券开头和末尾时间戳查询的 API 形状已更新为符合 WebGPU 规范。请参阅以下示例并问题 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 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