The same page on a device with no WebGL 2
Five lines at the top pretend that every request for a webgl2 context fails. The page shows the message and the poster, and no 3D code runs.
The showroom now asks the browser whether it can draw 3D before it builds anything, and shows a message and a still picture when it can't. It also gets its first bike part: the orange down tube, placed with exact numbers.
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 5 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 poster text different for a device that has WebGL 2 turned off in settings (you can't tell this from "no GPU"). Why is one message for both the right call?
Add a second tube to the scene: the top tube, from (−0.10, 0.82, 0) to (0.44, 0.84, 0), radius 0.018. What are its centre and length?
Explain it without notes
Why does main.js ask supportsWebGL2() before it creates a renderer?
Where do the down tube's position (0.235, 0.5, 0) and angle −0.8657 come from?
Console
Nothing logged yet.