The showroom after Phase 13
Every project file of this phase, joined into one (local imports cannot run in the preview). It runs the default WebGL 2 path; change WEBGPU to true to run the WebGPU path (measured: backend: WebGPU in Chrome with a GPU, the fallback warning and backend: WebGL 2 (fallback) without).
The showroom gains a WebGPU path: with ?webgpu in the address it runs on WebGPURenderer (with its own WebGL 2 fallback) and paints the frame with the TSL twin of Phase 12's paint, src/materials/paint.tsl.js. WebGL 2 stays the default. Both paths get this phase's part, the headlight.
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.
Add a brightness control: write the line that sets the lens glow to 4 once the model is loaded.
Write the PARTS line for a part named rear-light with the label Rear light and a price of 30 (Phase 14 will add the part).
Explain it without notes
What changed in main.js and renderer.js to support WebGPU with fallback, and what did not need to change?
Why does loadEnvironment no longer use PMREMGenerator from three?
Console
Nothing logged yet.Expected console output
backend: WebGL 2
parts: down-tube, top-tube, seat-tube, chain-stays, seat-stays, fork, front-wheel, rear-wheel, handlebar, crankset, chain, headlight