API
Adding Babylon.js to Your Web Project|
Support|
WebGPU

WebGPU Support

Introduction

Since the Babylon.js 5.0 release in May 2022, WebGPU support has been available and backward compatible with the WebGL implementation of the engine. It was a huge milestone after many iterations on the specification from the GPU for the Web Working Group, along with close collaboration with the teams implementing WebGPU in browsers. In 2024, we also rewrote all core engine shaders in native WGSL to avoid the use of TintWASM in full WGSL applications.

Inspector

Benefits of WebGPU

The promise behind WebGPU is a faster API, provided through lower-level control over system graphics resources from JavaScript, along with new capabilities. We hope to bring these improvements to developers so they can create even higher-quality 3D web games and experiences through a tool they are already familiar with: Babylon.js.

Some features WebGPU brings to the table are:

  • Compute shaders
  • Ray tracing (in-progress)
  • Improved performance across the board
  • and more...

Progress

See the dedicated progress page.

The current implementation of WebGPU is merged in the main branch of the Babylon.js GitHub repository.

WebGPU is also supported by Node Material and can be defined in the editor.

Migration of Existing Games and Apps

Because backward compatibility is one of our pillars, the only difference is that engine initialization must be asynchronous:

import { WebGPUEngine } from "@babylonjs/core/Engines/webgpuEngine";
const engine = new WebGPUEngine(canvas);
await engine.initAsync();

Canvas tone mapping and output color space

The WebGPUEngineOptions interface can pass tone-mapping and color-space settings to the browser's WebGPU canvas:

  • canvasToneMapping accepts { mode: "standard" } or { mode: "extended" }. If you omit it, the browser uses standard tone mapping.
  • canvasColorSpace accepts "srgb" or "display-p3". If you omit it, the browser uses sRGB.

The following example requests extended tone mapping and Display P3 output:

import { WebGPUEngine } from "@babylonjs/core/Engines/webgpuEngine";
const engine = new WebGPUEngine(canvas, {
    swapChainFormat: "rgba16float",
    canvasToneMapping: { mode: "extended" },
    canvasColorSpace: "display-p3",
});
await engine.initAsync();

Extended tone mapping can present HDR output, but the canvas setting alone does not create an HDR image. It requires the "rgba16float" swap-chain format, support from the browser and display, and a rendering pipeline that keeps color values above 1. It does not replace tone mapping in materials or post-processes.

Display P3 changes how the browser interprets output color values. It does not convert the scene's colors to Display P3. The rendering pipeline must produce the correct values for that color space.

Babylon.js uses these settings again whenever it configures the canvas context. Existing applications that omit them keep the browser's standard tone-mapping and sRGB defaults.

Is WebGL still supported?

Yes! Support for WebGL and WebGPU is maintained side by side for the foreseeable future.

WebXR support

Babylon.js supports experimental WebGPU-backed WebXR through XRGPUBinding. WebGPU support alone does not imply WebGPU-XR support: check the target immersive session mode and WebXRSessionManager.IsWebGPUXRSupported separately. The WebGPU-XR getter verifies both the projection binding APIs and XRGPUSubImage.prototype.getViewDescriptor, which Babylon requires when creating projection texture views.

A WebGPU engine intended for XR must be created with new WebGPUEngine(canvas, { xrCompatible: true }), and the WebXR Layers feature must be enabled before entering XR. Because Babylon cannot swap an existing WebGPU scene to WebGL, choose the engine before creating the scene and its resources. See WebGPU in WebXR for setup, fallback guidance, and current limitations.

Testing WebGPU

You can refer to this page for detailed information on browser support.

Assuming you are using a browser that supports WebGPU, you can try it out yourself in the Playground.

WebGPU

All demo code is available on GitHub, so you can compare the WebGL and WebGPU versions and note that there are currently no differences besides initialization. We will try to keep it this way. :-)

Coming next

WebGPU Breaking Changes
Details the breaking changes and differences in behavior from WebGL
WebGPU Breaking Changes
WebGPU Status
Learn the current status of the port to WebGPU as well as the next steps and caveats to be aware of.
WebGPU Status
Writing shaders for WebGPU in WGSL
Explain how to use WGSL in shaders when using the WebGPU engine
Writing shaders for WebGPU in WGSL
WebGPU Optimizations
Learn how to optimize WebGPU for speed
WebGPU Optimizations
WebGPU Internals
Learn how the WebGPU engine has been implemented in Babylon.js
WebGPU Internals