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」格式篩選紋理。請參閱以下範例和問題 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 指令的執行時間。用於在 pass 開始和結束時刻記時間戳記查詢的 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 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