Drawing before init, and forcing WebGL 2
forceWebGL: true gives the same result in every browser, so this example has a fixed output. The error text is three.js's own.
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
too early: THREE.Renderer: .render() called before the backend is initialized. Use "await renderer.init();" before rendering.
backend: WebGL 2
first frame: draw calls 2 | triangles 13