Chapter 856: WebGPURenderer (Manual)

Core Idea

WebGPURenderer is three.js's next-generation renderer, targeting the modern WebGPU API with automatic fallback to WebGL 2 on unsupported devices, and bringing a new node-based material system, TSL (three.js shading language), and a redesigned post-processing stack.

Key Concepts

• WebGPU-first with WebGL 2 fallback: WebGPURenderer prefers WebGPU for performance but automatically falls back to a WebGL 2 backend, so apps don't lose support for devices/browsers without WebGPU.
• Node-based material system: materials are built from composable nodes rather than fixed shader parameters, enabling more flexible custom shading.
• TSL (three.js shading language): write shader logic in JavaScript in a backend-independent way; three.js transpiles it to WGSL (WebGPU) or GLSL (WebGL) depending on which backend is active.
• Async initialization: WebGPU initializes asynchronously, so renderer.setAnimationLoop() is the recommended way to drive the render loop (it waits for initialization automatically); using a manual requestAnimationFrame loop or needing the renderer ready during init requires explicitly awaiting renderer.init().
• forceWebGL option: forces the WebGL 2 backend even on WebGPU-capable devices, useful for testing or intentionally opting out of WebGPU.
• Relationship to WebGLRenderer: WebGLRenderer remains maintained and is still the recommended choice for pure WebGL 2 apps, but new major features are focused on WebGPURenderer/TSL going forward, with limited node-material support for WebGLRenderer being explored to ease migration.

Code Examples

const renderer = new THREE.WebGPURenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(render);
document.body.appendChild(renderer.domElement);

• What it demonstrates: standard WebGPURenderer setup, relying on setAnimationLoop to handle the renderer's asynchronous initialization automatically.

Key Takeaways

1. WebGPURenderer targets WebGPU with automatic WebGL 2 fallback, so it's safe to adopt without dropping support for non-WebGPU devices.
2. Prefer renderer.setAnimationLoop() over a manual requestAnimationFrame loop, since WebGPU initializes asynchronously; otherwise explicitly await renderer.init() first.
3. TSL lets you write shader logic once in JavaScript and have it transpiled to either WGSL or GLSL depending on the active backend.
4. WebGLRenderer is still maintained for pure WebGL 2 use, but future major feature development is focused on WebGPURenderer.

Connects To

• WebGLRenderer: the renderer WebGPURenderer can fall back to, and the one it's positioned to eventually supersede.
• Post-Processing with WebGPURenderer (manual): the new RenderPipeline/MRT post-processing system built specifically for this renderer.