A triangle in raw WebGPU
No output is checked: it depends on the browser. With WebGPU it prints drew one triangle with WebGPU, canvas format bgra8unorm (or rgba8unorm); without, why not.
WebGPU draws the same triangle with other ideas: ask for an adapter and a device (both asynchronous), write both shaders in one WGSL module, fix every setting in advance in a pipeline, record commands into an encoder, and submit them at once. Errors are checked and reported in detail.
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.
Clear to Lumen blue instead of the stage colour.
Print the adapter's largest texture size and largest uniform binding.
Explain it without notes
List the objects you create to draw one triangle with WebGPU, in order, and what each is for.
What can requestAdapter() return, and how should a page react?
Console
Nothing logged yet.