WebGPU 新功能's (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」格式的紋理。請參閱以下範例和問題發生時間：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 位元。請參閱以下範例和 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 紋理格式

WebGPU 規格已加入名為「rgb10a2uint」的新紋理格式。其中包含 32 位元的封裝像素格式，以及四個無正負號整數元件：10 位元紅色、10 位元綠色、10 位元藍色和 2 位元 alpha。請參閱以下範例和問題發生時間：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 規格。請參閱以下範例和問題發生時間：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