Feature detection with throwaway canvases
Run it in your own browser too: the answers on a phone with a blocked GPU would differ. Note what happens when a canvas is asked for a second kind of context.
A web page reaches the GPU through WebGL 2 or the newer WebGPU, and almost nobody uses them directly: libraries such as three.js sit on top. You choose a library by what it costs and gives you, and you must always check that the browser can draw 3D before you try.
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.
Write a function canUseWebGPU() that returns true only when WebGPU is really usable.
Your client wants a 3D model of a chair on a product page, with nothing else interactive. Which tool would you try first and why?
Explain it without notes
Name the main differences between WebGL 2 and WebGPU a beginner needs to know, and say which one this course starts with and why.
Why is checking navigator.gpu alone not enough to use WebGPU?
Console
Nothing logged yet.Expected console output
webgl2: true
webgl (version 1): true
2d: true
a made-up type: false
first ask, 2d: true
then ask, webgl2: null
same object twice: true