A browser without WebGPU (Firefox on Linux, for example)
The example hides navigator.gpu to act like such a browser. The renderer does not throw: it warns and switches. The output is the same in every browser here, including the warning line.
WebGPURenderer from three/webgpu uses WebGPU when the browser has it and WebGL 2 when it does not, with the same code. It starts asynchronously, so you await renderer.init() before the first frame and read renderer.backend to see what you got.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 3 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a function createRenderer(container) that returns a started WebGPURenderer and logs the backend name. What must it be?
Using the first example, make a version that stays on WebGL 2 when the URL contains ?gl=1.
Explain it without notes
Why must you await renderer.init() with WebGPURenderer, and what happens if you do not?
A visitor reports the scene looks different in Firefox on Linux. What do you check first?
Console
Nothing logged yet.Expected console output
navigator.gpu: undefined
THREE.WebGPURenderer: WebGPU is not available, running under WebGL2 backend.
backend: WebGL 2 (fallback)