WebGPU (experimental)

A game can draw with three’s WebGPURenderer instead of WebGLRenderer. The mode is experimental: the step, the room, input, audio, the HUD and the devtools work, but many of the engine’s own looks need WebGL and stay off. They follow on WebGPU after launch. WebGL2 stays every game’s default, and the renderer is each game’s own choice.

Mount a game on WebGPU

Return a WebGPURenderer from Game’s gl factory, as Your renderer and your own three.js describes, and wait for its init() before you return it:

packages/engine/test/outside/WebGPUGame.tsx

import { Game, Scene, World } from "@spawnite/engine";
import { noon } from "@spawnite/engine/looks/noon";

//  A game drawn by three's WebGPURenderer, the engine's experimental mode.
//  The look keeps its sun and fog; its post stack is left out, and its sky
//  and baked light stay off on their own, each named once in the console.
function Lobby() {
    return <World map="grid" look={{ base: noon, postProcessing: false }} />;
}

export function App() {
    return (
        <Game
            name="lab"
            start="lobby"
            gl={async (defaults) => {
                //  Loaded here, so a page on WebGL never downloads it.
                const { WebGPURenderer } = await import("three/webgpu");
                const renderer = new WebGPURenderer({
                    ...defaults,
                    stencil: true,
                });
                await renderer.init();
                return renderer;
            }}
        >
            <Scene name="lobby" component={Lobby} />
        </Game>
    );
}

The canvas mounts nothing until init() resolves, and the loading screen waits for the first frame. The factory imports three/webgpu itself, so a page that draws with WebGL never downloads it. The example game opens this way with ?renderer=webgpu in its address.

On a browser or a device with no WebGPU, WebGPURenderer falls back to a WebGL2 backend of its own, not to WebGLRenderer. The engine treats both backends the same: every part on the list below stays off on either.

To check which renderer drew, read the page’s console, as spawnite play console prints it: under WebGPU it holds the Off under WebGPURenderer lines below. useThree((state) => state.gl) reads the renderer the factory returned. Fiber types it as WebGLRenderer whatever it is, so a component that calls a WebGPU method reads it as a GameRenderer and checks "isWebGPURenderer" in gl first.

What stays off

Each part below needs WebGL. Under WebGPU it stays off, and the console names it once a page, with what stands in for it, in a line that starts Off under WebGPURenderer. Nothing crashes, and nothing goes quiet without a line.

Part	Under WebGPU
The daylight rig’s sky dome	The sky shows the canvas’s clear colour. A look’s sky image still draws.
The look’s light baked from the sky	Surfaces take the sun and the fill alone.
<PostProcessing> and the look’s stack	The frame draws with no pass. postProcessing: false on the look only silences the line.
<Shader>, WaterMaterial, the sea, CrtMaterial, PortalMaterial, EnergyOrbMaterial	The mesh draws nothing.
<Particles>	Every burst and Emitter plays nothing.
A weapon’s tracer, an ability’s line to its target, the terrain brush’s outlines	None draws. The brush shows its fill.
The World’s ground shading	The ground draws in one plain colour.
The World’s grass and scatter	Neither draws. The scatter’s colliders still stand.
A VRM avatar	She draws as the placeholder capsule. A GLB model on CharacterSpawn draws.
The skinned batch an animated Entity model and useSkinnedBatch draw in	Each copy draws its own meshes, one draw per mesh.
The shader warm-up under the loading screen	Each program builds as it first draws.
The performance overlay’s GPU time, and the GPU spans of spawnite play profile	The overlay shows the CPU time alone, and the profile lists no GPU span.

A material patched with onBeforeCompile draws unpatched: three’s WebGPU renderer ignores the hook without a word, so a game’s own patches stop too. A ShaderMaterial of your own draws nothing, and three logs Material "ShaderMaterial" is not compatible. Write your own materials as node materials from three/tsl instead.

spawnite play see refuses under WebGPU: it reads the canvas’s pixels back at once, which WebGPU cannot. spawnite play screenshot, dump, stats and the devtools’ capture work.

What draws

Everything three’s node materials draw from a standard material: an Entity or InstancedModel model, a GLB character and its clips, the sun’s shadow, fog, a look’s sky image, and the HUD, which draws in the page. Your own meshes take node materials from three/tsl, and three’s RenderPipeline from three/webgpu draws a post-processing pipeline of your own in a useFrame at priority 1, as the frame’s order says.

Unity marks its WebGPU web export experimental beside WebGL2, its default; Godot’s web export draws with WebGL2 alone; PlayCanvas’s engine keeps WebGL2 as its default and offers WebGPU. The engine follows them: WebGPU is a choice a game makes, and WebGL2 is what a game gets without one.