demo · v143 · graphics

Layout byte grid

A visual byte-by-byte rendering of every field's offset in a WGSL uniform buffer under both strict (default) and v143 relaxed layouts. Type your struct and watch the padding shrink. The stats panel reports total bytes saved.

Pick a struct

strict WebGPU layout (default)

relaxed (uniform-buffer-standard-layout)

padding plus field colours

How layout is computed

  1. Each scalar is 4 bytes; vec2 is 8; vec3 takes 12 bytes but aligns to 16; vec4 is 16.
  2. Strict: arrays of any element type pad each element to 16 bytes ("array stride").
  3. Relaxed (v143): arrays of scalars or vec2 keep their native stride. Total footprint shrinks 4× for tight arrays.
  4. The byte grid below is the actual layout the GPU sees. Coloured squares are field bytes; pink squares are padding.
// WGSL
enable language_extension uniform_buffer_standard_layout;

struct Uniforms {
  weights: array<f32, 16>,    // strict: 16 × 16 = 256 bytes
                              // relaxed: 16 × 4 = 64 bytes
};

see also