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() 時省略偏移和大小參數,簡化整個緩衝區的副本。請參閱「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 屬性已移除,改用 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 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