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