WebGPU 的新变化 (Chrome 119)

François Beaufort
François Beaufort

可过滤的 32 位浮点纹理

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

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

并非所有 GPU 都支持可过滤的 32 位浮点纹理。当 "float32-filterable" 功能在 GPUAdapter 中可用时,您现在可以请求具有此功能的 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....

Dawn 更新

借助时间戳查询,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 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