WebGPU 新功能's (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。請參閱以下範例和這個問題

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