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 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