The fallback matrix, six browsers
The environment is passed in, so every row is testable. In the showroom, wantsWebGPU is location.search.includes("webgpu").
Never assume the visitor's browser can draw 3D. Ask it, in order: WebGPU if you want it, then WebGL 2, then show a still image with a text alternative. Each answer is a path, and every path must leave the page useful.
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.
Write supportsWebGL2() so it returns false instead of throwing when getContext itself throws.
Write the three lines that show a #fallback element with a reason and an alt text when the start fails.
Explain it without notes
Describe the order of checks for a page that prefers WebGPU, accepts WebGL 2 and has a still image. What can go wrong at each step?
Why does three.js r186 have no WebGL 1 fallback, and what does that change for your fallback design?
Console
Nothing logged yet.Expected console output
WebGPU adapter, ?webgpu asked -> webgpu
WebGPU adapter, not asked -> webgl2
no navigator.gpu -> webgl2
adapter is null (blocked) -> webgl2
requestAdapter throws -> webgl2
no WebGL 2 either -> image
poster: 960 x 600 | alt text: 65 characters