WebGPU（Chrome 137）中的新变化

François Beaufort
François Beaufort
GitHub

Published: May 26, 2025

使用纹理视图进行 externalTexture 绑定

现在，创建 GPUBindGroup 时，允许使用兼容的 GPUTextureView（2D、单个子资源）来代替 GPUExternalTexture 绑定。

这简化了视频特效流水线中的着色器逻辑，因为在这些流水线中，必须同时处理 GPUExternalTexture（用于源视频）和 GPUTextureView（用于中间处理）。此外，它还减少了根据纹理来源动态编译着色器的需求。请参阅 Intent to Ship：WebGPU：GPUTextureView for externalTexture binding。

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() 时可以省略偏移量和大小参数，从而简化整个缓冲区的复制。请参阅 Intent to Ship：WebGPU：copyBufferToBuffer overload。

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 属性，转而使用标准化 featureLevel 属性，该属性是在 Chrome 133 中添加的。请参阅问题 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，并阅读 软件包的自述文件，了解如何使用它。源文件可在 Dawn 代码库 中找到。

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

这仅涵盖了一些关键亮点。请查看提交的完整列表。

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