WebGPU(Chrome 137)中的新变化

François Beaufort
François Beaufort

发布时间:2025 年 5 月 26 日

使用纹理视图进行 externalTexture 绑定

现在,在创建 GPUBindGroup 时,允许使用兼容的 GPUTextureView(2D,单个子资源)代替 GPUExternalTexture 绑定。

这简化了视频效果流水线中的着色器逻辑,因为该流水线必须同时处理 GPUExternalTexture(用于源视频)和 GPUTextureView(用于中间处理)。此外,它还减少了根据纹理来源动态编译着色器的需求。请参阅发布意向:WebGPU:用于 externalTexture 绑定的 GPUTextureView

const texture = myDevice.createTexture({
  size: [42, 42],
  format: navigator.gpu.getPreferredCanvasFormat(),
  usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
});

const code = `
@group(0) @binding(0) var texture : texture_external;
@group(0) @binding(1) var<storage, read_write> buffer: vec2u;
    
@compute @workgroup_size(1) fn main() {
  buffer = textureDimensions(texture);
}`;

const pipeline = myDevice.createComputePipeline({
  layout: "auto",
  compute: { module: myDevice.createShaderModule({ code }) },
});

const bindGroup = myDevice.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [
    { binding: 0, resource: texture.createView() }, // Use texture view for an externalTexture binding
    { binding: 1, resource: { buffer: myBuffer } },
  ],
});

在不指定偏移量和大小的情况下复制缓冲区

借助新的 GPUCommandEncoder 方法重载,开发者在使用 copyBufferToBuffer() 时可以省略偏移量和大小参数,从而简化整个缓冲区的复制。请参阅提交发货意向:WebGPU:copyBufferToBuffer 重载

const size = 42;
const srcBuffer = myDevice.createBuffer({
  size,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
});
const dstBuffer = myDevice.createBuffer({
  size,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});

// Copy entire buffer.
myCommandEncoder.copyBufferToBuffer(srcBuffer, dstBuffer);

// This is the same as the following.
// myCommandEncoder.copyBufferToBuffer(srcBuffer, 0, dstBuffer, 0, size);

使用指向原子变量的指针的 WGSL workgroupUniformLoad

为了方便开发者,我们在 WGSL 中添加了新的 workgroupUniformLoad(ptr) 重载。它以原子方式加载 ptr 所指向的值,并将其返回给工作组中的所有调用,其中 ptr 是工作组变量中的指针到原子。请参阅问题 408241039

@group(0) @binding(0) var<storage, read_write> buffer : array<u32, 1>;

var<workgroup> wgvar : atomic<u32>;

@compute @workgroup_size(1, 1)
fn main(@builtin(local_invocation_index) lid: u32) {
  if (lid == 0) {
    atomicStore(&(wgvar), 42u);
  }
  buffer[lid] = workgroupUniformLoad(&wgvar);
}

GPUAdapterInfo powerPreference 属性

当用户在 chrome://flags/#enable-webgpu-developer-features 处启用“WebGPU 开发者功能”标志时,非标准 powerPreference GPUAdapterInfo 字符串属性现在可用。如果支持,powerPreference 值可以是 "low-power""high-performance",具体取决于 GPURequestAdapterOptions 中使用的 GPUPowerPreference 值。请参阅 CL 6438860

function checkPowerPreferenceForGpuDevice(device) {
  const powerPreference = device.adapterInfo.powerPreference;
  if (powerPreference === "high-performance") {
    // High-performance GPU detected. Enabling enhanced graphics settings.
  } else if (powerPreference === "low-power") {
    // Low-power GPU detected. Optimizing for battery life.
  }
}

移除 GPURequestAdapterOptions compatibilityMode 属性

实验性 GPURequestAdapterOptions compatibilityMode 属性已被移除,取而代之的是在 Chrome 133 中添加的标准化 featureLevel 属性。请参阅问题 366151404

Dawn 更新

开发者可以使用 C++ 等语言构建 WebGPU 项目,并使用 webgpu.h 同时面向 WebAssembly 和特定平台。Dawn 新发布的“emdawnwebgpu”(“Emscripten Dawn WebGPU”)通过浏览器 API 实现最新的标准化 webgpu.h。

Emdawnwebgpu 是 Emscripten(现已不再维护)内置绑定 (USE_WEBGPU) 的一个(已维护)分支。所有新开发工作都在 emdawnwebgpu 上进行,随着开发者过渡到 emdawnwebgpu,Emscripten 的内置绑定将被移除。Emdawnwebgpu 的 C 标头与 Dawn 的非常接近,而内置绑定则明显过时。

Dawn 的 GitHub 发布页面下载 emdawnwebgpu,然后阅读软件包的 README.md 以了解如何使用它。您可以在 Dawn 代码库中找到源文件。

如需查看完整指南,请参阅更新后的使用 WebGPU 构建应用文档。

这仅涵盖了部分重要亮点。查看详尽的提交列表

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