The showroom after Phase 14
Every project file, joined into one (local imports can't run in the preview). This site's test browser has no WebGPU, so the glow uses the WebGL 2 drawer here; Chrome with a GPU uses WebGPU.
The showroom gets its rear light: a small red lamp on the seat tube, and a pulsing glow drawn by your own GPU code on a transparent canvas over the scene (WebGPU where available, WebGL 2 elsewhere). It follows the lamp, fades from the front, and stops pulsing with the pause button or reduced motion.
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 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make the glow amber in both drawers.
Skip drawing when the lamp is well outside the screen.
Explain it without notes
Why does the build use a separate canvas instead of three.js's context?
How does the glow know where to draw, every frame?
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, rear-light, headlight
rear light at -0.12, 0.74, 0.00