WebGPUEngine Versus Engine

WebGPUEngine is a separate class. It requests an adapter and device (Adapters and Devices) and configures the canvas (Canvas and Presentation), which are promises, hence the extra await engine.initAsync(). Scenes are otherwise identical:

One scene function on Engine (left) and WebGPUEngine (right)HTMLLive

<style>canvas { width: 300px; height: 200px; margin-right: 6px }</style>
<canvas id="gl"></canvas><canvas id="gpu"></canvas>
<script src="https://cdn.jsdelivr.net/npm/babylonjs@9.28.0/babylon.js"></script>
<script>
function start(engine) {
  const scene = new BABYLON.Scene(engine);
  scene.clearColor = BABYLON.Color4.FromHexString('#b0bec5ff');
  new BABYLON.ArcRotateCamera('camera', -2, 1.2, 4.5, new BABYLON.Vector3(0, 0.6, 0), scene);
  new BABYLON.HemisphericLight('sky', new BABYLON.Vector3(0.4, 1, -0.5), scene);
  BABYLON.MeshBuilder.CreateGround('floor', { width: 4, height: 3 }, scene);
  const book = BABYLON.MeshBuilder.CreateBox('book', { width: 0.4, height: 1.2 }, scene);
  book.position.y = 0.6;
  book.material = new BABYLON.StandardMaterial('cover', scene);
  book.material.diffuseColor = BABYLON.Color3.FromHexString('#1f5f8b');
  scene.executeWhenReady(() => engine.runRenderLoop(() => scene.render()));
  return scene;
}
(async () => {
  start(new BABYLON.Engine(gl, true, {}, true));
  const webgpu = new BABYLON.WebGPUEngine(gpu, { antialias: true, adaptToDeviceRatio: true });
  await webgpu.initAsync();                             // adapter, device, canvas context
  const scene = start(webgpu);
  scene.onAfterRenderObservable.add(() => { window.__done = scene.getFrameId() > 3; });
})();
</script>

Browser output of 4

The images match. Babylon 89,603 's core shaders exist in native WGSL since 2024; only your custom GLSL is translated, by WebAssembly builds of glslang and TWGSL fetched from Babylon's CDN on first use (glslangOptions and twgslOptions point elsewhere). WebGPU adds compute shaders (BABYLON.ComputeShader) and snapshot rendering (Babylon.js WebGPUEngine). Choose Engine for every browser, and WebGPUEngine with a fallback (WebGPU Fallback) when compute or CPU-bound draw submission matters.

MENU

WebGPUEngine Versus Engine