WebGPU 新功能 (Chrome 137)

François Beaufort
François Beaufort

發布日期:2025 年 5 月 26 日

使用紋理檢視畫面進行 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() 簡化整個緩衝區的複製作業時,省略偏移量和大小參數。請參閱「意圖出貨: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

黎明更新

開發人員可以使用 C++ 等語言建構 WebGPU 專案,並使用 webgpu.h 指定 WebAssembly 和特定平台。Dawn 新推出的「emdawnwebgpu」(「Emscripten Dawn WebGPU」) 會透過瀏覽器 API 實作最新的標準化 webgpu.h。

Emdawnwebgpu 是 Emscripten 內建繫結 (USE_WEBGPU) 的 (維護中) 分支版本 (目前已停止維護)。所有新開發作業都會在 emdawnwebgpu 上進行,而 Emscripten 內建繫結會隨著開發人員轉換至 emdawnwebgpu 而移除。Emdawnwebgpu 的 C 標頭與 Dawn 的標頭非常相似,但內建繫結已明顯過時。

請從 Dawn 的 GitHub 版本頁面下載 emdawnwebgpu,並參閱 套件的 README.md 檔案,瞭解如何使用該套件。您可以在 Dawn 存放區中找到原始檔案。

如需完整指南,請參閱更新版的「使用 WebGPU 建構應用程式」說明文件。

這份說明僅涵蓋部分重點。請查看完整的修訂版本清單

WebGPU 新功能

以下是「WebGPU 改版記錄」系列文章中涵蓋的所有內容。

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