WebGPU 的新变化 (Chrome 119)

François Beaufort
François Beaufort
GitHub

可过滤的 32 位浮点纹理

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

可过滤 32 位浮点纹理支持描述了 GPU 过滤 32 位浮点纹理的能力。这意味着 GPU 可以使浮点纹理的边缘平滑，从而减少其锯齿状。它类似于“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 顶点格式

一种名为“unorm10-10-10-2”的新顶点格式也称为“rgb10a2”已添加到 WebGPU 规范中。它包含一个打包的 32 位值和四个标准化无符号整数值，并分别按 10 位、10 位、10 位和 2 位排列。请参阅以下示例和issue 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 纹理格式

一种名为“rgb10a2uint”的新纹理格式已添加到 WebGPU 规范中。它由 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 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