What's WebGPU 的新功能 (Chrome 適 130)

François Beaufort
François Beaufort
GitHub

雙重來源混合

將兩個片段著色器輸出內容合併為單一框架，稱為「雙重來源混合」。這項技巧特別適合用於需要複雜混合作業的應用程式，例如以 Porter-Duff 混合模式為基礎的應用程式。透過將後續轉譯階段替換為單一轉譯階段，雙重來源混合可提升效能和彈性。

新的 "dual-source-blending" WebGPU 功能可讓您在 @location(0) 中使用 WGSL @blend_src 屬性，用來表示混合來源索引和下列混合因子："src1"、"one-minus-src1"、"src1-alpha" 和 "one-minus-src1-alpha"。請參閱以下程式碼片段、chromestatus 項目和 問題 341973423。

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("dual-source-blending")) {
  throw new Error("Dual source blending support is not available");
}
// Explicitly request dual source blending support.
const device = await adapter.requestDevice({
  requiredFeatures: ["dual-source-blending"],
});

const code = `
  enable dual_source_blending;

  struct FragOut {
    @location(0) @blend_src(0) color : vec4f,
    @location(0) @blend_src(1) blend : vec4f,
  }

  @fragment fn main() -> FragOut {
    var output : FragOut;
    output.color = vec4f(1.0, 1.0, 1.0, 1.0);
    output.blend = vec4f(0.5, 0.5, 0.5, 0.5);
    return output;
  }
`;

const shaderModule = device.createShaderModule({ code });
// Create a render pipeline with this shader module
// and run the shader on the GPU...

改善 Metal 上的著色器編譯時間

Chrome 團隊正在為支援 WebGPU 和 Metal 後端的裝置，推出中介呈現 (IR)，藉此強化 Tint (WebGPU 著色器語言編譯器)。這個 IR 位於 Tint 的抽象語法樹狀結構 (AST) 和 Metal 後端寫入器之間，可讓編譯器更有效率且更易於維護，最終造福開發人員和使用者。初步測試顯示，新版 Tint 在將 Unity 的 WGSL 著色器轉譯為 MSL 時，速度最高可快上 10 倍。

流程圖顯示將 WGSL 著色器程式碼轉換為低階 GPU 指令的程序。
在 macOS 中建立轉譯管道。

這些改善項目目前已可在 Android 和 ChromeOS 上使用，並且會逐步擴展至支援 WebGPU 和 Metal 後端的 macOS 裝置。請參閱問題 42251016。

淘汰 GPUAdapter requestAdapterInfo()

由於開發人員已可使用 GPUAdapter info 屬性同步取得 GPUAdapterInfo，因此 GPUAdapter requestAdapterInfo() 非同步方法已不必要。因此，非標準的 GPUAdapter requestAdapterInfo() 方法現已淘汰。請參閱「意圖淘汰」一文。

開發人員工具控制台會針對 requestAdapterInfo() 顯示已淘汰的警告。
Chrome 開發人員工具中 requestAdapterInfo() 的已淘汰功能警告。

黎明更新

webgpu.h C API 已為擴充資料結構定義了一些命名慣例。請參閱以下名稱變更和 問題 42241174。

WGPURenderPassDescriptor 擴充功能
WGPURenderPassDescriptorMaxDrawCount -> WGPURenderPassMaxDrawCount
WGPUShaderModuleDescriptor 擴充功能
WGPUShaderModuleSPIRVDescriptor -> WGPUShaderSourceSPIRV
WGPUShaderModuleWGSLDescriptor -> WGPUShaderSourceWGSL
WGPUSurfaceDescriptor 擴充功能
WGPUSurfaceDescriptorFromMetalLayer -> WGPUSurfaceSourceMetalLayer
WGPUSurfaceDescriptorFromWindowsHWND -> WGPUSurfaceSourceWindowsHWND
WGPUSurfaceDescriptorFromXlibWindow -> WGPUSurfaceSourceXlibWindow
WGPUSurfaceDescriptorFromWaylandSurface -> WGPUSurfaceSourceWaylandSurface
WGPUSurfaceDescriptorFromAndroidNativeWindow -> WGPUSurfaceSourceAndroidNativeWindow
WGPUSurfaceDescriptorFromXcbWindow -> WGPUSurfaceSourceXCBWindow
WGPUSurfaceDescriptorFromCanvasHTMLSelector -> WGPUSurfaceSourceCanvasHTMLSelector_Emscripten

WGPUDepthStencilState 的 depthWriteEnabled 屬性類型會從布林值切換為 WGPUOptionalBool，以便更準確地反映其三種可能的狀態 (true、false 和 undefined)，就像在 JavaScript API 中一樣。如需更多資訊，請參閱以下程式碼片段和 webgpu-headers PR。

wgpu::DepthStencilState depthStencilState = {};
depthStencilState.depthWriteEnabled = wgpu::OptionalBool::True; // Undefined by default

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

WebGPU 新功能

以下是「WebGPU 最新消息」系列文章中涵蓋的所有內容。

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