What's WebGPU 新功能 (Chrome 118 以上版本)

François Beaufort
François Beaufort
GitHub

copyExternalImageToTexture() 中的 HTMLImageElement 和 ImageData 支援

GPUQueue 上的 copyExternalImageToTexture() 方法可讓您將來源圖片、影片或畫布的快照複製到指定的 GPUTexture。您現在可以傳遞 HTMLImageElement 和 ImageData 物件做為來源。請參閱以下範例和問題 chromium:1471372。

// Fetch and decode image.
const source = document.createElement("img");
source.src = "my-image.png";
await source.decode();

// Create destination texture.
const size = [source.width, source.height];
const texture = myDevice.createTexture({
 size,
 format: "rgba8unorm",
 usage:
   GPUTextureUsage.COPY_DST |
   GPUTextureUsage.RENDER_ATTACHMENT |
   GPUTextureUsage.TEXTURE_BINDING,
});

// Copies a snapshot taken from the source image into a texture.
myDevice.queue.copyExternalImageToTexture({ source }, { texture }, size);

針對讀寫和唯讀儲存空間紋理的實驗性支援

儲存空間紋理繫結類型可讓您在不取樣的情況下執行紋理讀取，並儲存至著色器中的任意位置。當 GPUAdapter 提供 "chromium-experimental-read-write-storage-texture" 功能時，您可以在建立繫結群組版面配置時，要求使用這項功能的 GPUDevice，並將 GPUStorageTexture 存取權設為 "read-write" 或 "read-only"。以往只限 "write-only"。

如要使用這項功能，您必須在 WGSL 程式碼中使用 enable chromium_experimental_read_write_storage_texture 明確啟用這個擴充功能。啟用之後，您就能使用 read_write 和 read 存取限定詞做為儲存空間紋理，textureLoad() 和 textureStore() 內建函式會因應這種行為，也可使用新的 textureBarrier() 內建函式同步處理工作群組中的紋理記憶體存取權。請參閱以下範例和問題發生時間：1972。

這項功能仍在實驗階段，可能會有變動，在經過標準化的情況下，使用 --enable-dawn-features=allow_unsafe_apis 旗標執行 Chrome。

const feature = "chromium-experimental-read-write-storage-texture";
const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has(feature)) {
  throw new Error("Read-write storage texture support is not available");
}
// Explicitly request read-write storage texture support.
const device = await adapter.requestDevice({
  requiredFeatures: [feature],
});

const bindGroupLayout = device.createBindGroupLayout({
  entries: [{
    binding: 0,
    visibility: GPUShaderStage.COMPUTE,
    storageTexture: {
      access: "read-write", // <-- New!
      format: "r32uint",
    },
  }],
});

const shaderModule = device.createShaderModule({ code: `
  enable chromium_experimental_read_write_storage_texture;
  @group(0) @binding(0) var tex : texture_storage_2d<r32uint, read_write>;

  @compute @workgroup_size(1, 1)
  fn main(@builtin(local_invocation_id) local_id: vec3u) {
    var data = textureLoad(tex, vec2i(local_id.xy));
    data.x *= 2;
    textureStore(tex, vec2i(local_id.xy), data);
  }`,
});

// You can now create a compute pipeline with this shader module and
// send the appropriate commands to the GPU.

黎明更新

為求一致性，webgpu.h C API 已重新命名下列欄位：requiredFeaturesCount 到 requiredFeatureCount，pipelineStatisticsCount 重新命名為 pipelineStatisticCount，並將 colorFormatsCount 重新命名為 colorFormatCount。請參閱問題發生時間:146040。

新的 DawnInfo 程式 (與 vulkaninfo 類似) 可讓您列出切換鈕、轉接程式、轉接程式功能和轉接程式限制。建構黎明 samples 時可使用此功能。為了簡潔起見，以下輸出內容為精簡內容。請參閱變更 dawn:149020。

./out/Debug/DawnInfo
Toggles
=======
  Name: allow_unsafe_apis
    Suppresses validation errors on API entry points or parameter combinations
    that aren't considered secure yet.
    http://crbug.com/1138528
[…]

Adapter
=======
VendorID: 0x106B
Vendor: apple
Architecture: common-3
DeviceID: 0x0000
Name: Apple M1 Pro
Driver description: Metal driver on macOS Version 13.5.1 (Build 22G90)
Adapter Type: discrete GPU
Backend Type: Metal
Power: <undefined>

  Features
  ========
   * depth_clip_control
      Disable depth clipping of primitives to the clip volume
      https://bugs.chromium.org/p/dawn/issues/detail?id=1178
[…]

  Adapter Limits
  ==============
    maxTextureDimension1D: 16,384
    maxTextureDimension2D: 16,384
[…]

這僅涵蓋部分重點功能。查看完整的修訂版本清單。

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