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"。

如需利用此功能，您必须使用 enable chromium_experimental_read_write_storage_texture 在 WGSL 代码中明确启用此扩展。启用后，您可以将 read_write 和 read 访问限定符用于存储纹理，textureLoad() 和 textureStore() 内置函数会相应地运行，并且有新的 textureBarrier() 内置函数可用于同步工作组中的纹理内存访问。请参阅以下示例和问题 dawn: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.

Dawn 更新

为了保持一致，webgpu.h C API 已重命名以下字段：requiredFeaturesCount 重命名为 requiredFeatureCount、pipelineStatisticsCount 重命名为 pipelineStatisticCount，以及 colorFormatsCount 重命名为 colorFormatCount。请参阅问题 dawn:146040。

借助新的 DawnInfo 程序（类似于 vulkaninfo），您可以列出切换开关、适配器、适配器功能和适配器限制。在构建 Dawn samples 时，此功能可用。以下输出已大幅精简，以便简洁明了。请参阅 change 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 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