The glow overlay on its own (WebGL 2)
The real glow-webgl2.js, inlined. Edge pixels are rounded to the nearest 20: soft edges can differ by a step or two between GPUs.
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
brightness 1: centre 255, 31, 20, 255 | 25 px out alpha about 60 | 60 px out 0, 0, 0, 0
brightness 0.4: centre 102, 12, 8, 102 | 25 px out alpha about 20 | 60 px out 0, 0, 0, 0
brightness 0: centre 0, 0, 0, 0 | 25 px out alpha about 0 | 60 px out 0, 0, 0, 0
pulse over one cycle: 0.65, 1.00, 0.65, 0.30, 0.65
motion off (pause or reduced motion): 0.8