WGSL struct layout, worked out in JavaScript
No GPU needed: the WGSL rules for uniform structs.
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 was printed)Expected console output
packed order: 32 bytes for 32 bytes of data
centre: vec2f @ 0
radius: f32 @ 8
brightness: f32 @ 12
colour: vec3f @ 16
time: f32 @ 28
naive order : 48 bytes for 32 bytes of data
colour: vec3f @ 0
centre: vec2f @ 16 (after 4 bytes of padding)
radius: f32 @ 24
brightness: f32 @ 28
time: f32 @ 32
shader reads centre 75, 60 | radius 1 | brightness 0