A uniform buffer, a bind group, and a size error
With WebGPU: a red glow, glow drawn: 32 bytes of uniforms, then too-small buffer: Binding size (16) of [Buffer (unlabeled)] is smaller than the minimum binding size (32). and three lines saying where. Without WebGPU it says so.
In WebGPU, the values a shader reads (uniforms) live in buffers you fill yourself, at offsets WGSL's alignment rules decide. A bind group connects buffers to the shader's bindings. A wrong layout makes the shader read wrong bytes silently; a wrong size is stopped by validation.
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.
Lay out struct Light { position: vec3f, intensity: f32, colour: vec3f, range: f32 }.
Fill the packed glow struct for a glow at (100, 50), radius 30, brightness 0.5, colour (1, 0.1, 0.05), time 2.
Explain it without notes
Why does vec3f cause layout bugs, and how do you avoid them?
What can WebGPU validation catch about uniforms, and what can't it?
Console
Nothing logged yet.