WebGPU 的新变化 (Chrome 118)

François Beaufort
François Beaufort

copyExternalImageToTexture() 中对 HTMLImageElement 和 ImageData 的支持

GPUQueue 上的 copyExternalImageToTexture() 方法可让您将从源图片、视频或画布拍摄的快照复制到给定的 GPUTexture 中。您现在可以将 HTMLImageElementImageData 对象作为来源传递。请参阅以下示例和 问题 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);

对读写和只读存储纹理的实验性支持

存储纹理绑定类型可让您执行纹理读取,而无需采样,并存储到着色器中的任意位置。当 "chromium-experimental-read-write-storage-texture" 功能在 GPUAdapter 中可用时,您现在可以请求具有此功能的 GPUDevice,并在创建绑定组布局时将 GPUStorageTexture 访问权限设置为 "read-write""read-only"。以前,此功能仅限于 "write-only"

如需利用此功能,您必须使用 enable chromium_experimental_read_write_storage_texture 在 WGSL 代码中明确启用此扩展。启用后,您可以对存储纹理使用 read_writeread 访问权限限定符,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 重命名为 requiredFeatureCountpipelineStatisticsCount 重命名为 pipelineStatisticCountcolorFormatsCount 重命名为 colorFormatCount。请参阅问题 dawn:146040

借助新的 DawnInfo 程序(类似于 vulkaninfo),您可以列出切换开关、适配器、适配器功能和适配器限制。构建 Dawn 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 147-148

Chrome 146

Chrome 145

Chrome 144

Chrome 143

Chrome 142

Chrome 141

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