What's New in WebGPU (Chrome 130)

François Beaufort
François Beaufort
GitHub

Dual source blending

Combining two fragment shader outputs into a single framebuffer is called dual source blending. This technique is particularly useful for applications that require complex blending operations, such as those based on Porter-Duff blend modes. By replacing subsequent render passes with a single render pass, dual source blending can enhance performance and flexibility.

The new "dual-source-blending" WebGPU feature lets you use the WGSL @blend_src attribute at @location(0) to denote the blending source index and the following blend factors: "src1", "one-minus-src1", "src1-alpha", and "one-minus-src1-alpha". See the following snippet, the chromestatus entry, and issue 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...

Shader compilation time improvements on Metal

The Chrome team is enhancing Tint, the WebGPU shader language compiler, by introducing an intermediate representation (IR) for devices that support WebGPU with the Metal backend. This IR, positioned between Tint's abstract syntax tree (AST) and the Metal backend writer, will make the compiler more efficient and maintainable, ultimately benefiting both developers and users. Initial tests show that the new version of Tint is up to 10 times faster when translating Unity's WGSL shaders to MSL.

A flowchart shows the process of converting WGSL shader code into low-level GPU instructions.
Render pipeline creation in macOS.

These improvements, already accessible on Android and ChromeOS, are being progressively expanded to macOS devices that support WebGPU with the Metal backend. See issue 42251016.

Deprecation of GPUAdapter requestAdapterInfo()

The GPUAdapter requestAdapterInfo() asynchronous method is redundant as developers can already get GPUAdapterInfo synchronously using the GPUAdapter info attribute. Hence, the non-standard GPUAdapter requestAdapterInfo() method is now deprecated. See intent to deprecate.

DevTools console displays a deprecation warning for requestAdapterInfo().
Deprecated feature warning for requestAdapterInfo() in Chrome DevTools.

Dawn updates

The webgpu.h C API has defined some naming conventions for extension structs. See the following name changes and issue 42241174.

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

The WGPUDepthStencilState's depthWriteEnabled attribute type switches from boolean to WGPUOptionalBool to better reflect its three possible states (true, false, and undefined) as in the JavaScript API. To learn more, see the following code snippet and the webgpu-headers PR.

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

This covers only some of the key highlights. Check out the exhaustive list of commits.

What's New in WebGPU

A list of everything that has been covered in the What's New in WebGPU series.

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