WebGPU 新功能's (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 位元值，其中包含 4 個正規化的無正負號整數值，並排列為 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 紋理格式

名為「rgb10a2uint」的新紋理格式新增至 WebGPU 規格。它是由 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 指令執行所需時間 (最小可達奈秒)。為符合 WebGPU 規格，我們更新了可在票證開頭和結尾擷取時間戳記查詢的 API 形狀。請參考以下範例和問題 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 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