v143 · graphics

WebGPU: Uniform buffer standard layout

Functionality added to the WebGPU spec after its first shipment in a browser.

concepts

  1. UBO Layout

    Type a struct definition; the calculator shows the strict UBO layout vs the v143 relaxed layout, byte by byte, including padding and array stride. Probes the WebGPU adapter feature.

  2. GLSL port friction

    The motivating case: porting a GLSL shader with a tight float[]. Strict layout quadruples the footprint; v143 matches GLSL byte-for-byte.

  3. Layout byte grid

    Byte-by-byte visual: type a WGSL struct, watch the strict and relaxed layouts render as coloured byte grids with padding called out in red, plus a savings stat. Handles arrays, vec3, nested structs.

  4. UBO Struct Editor

    A live WGSL struct field editor (name/type/align-override) with a visual byte-grid showing colour-coded field and padding cells. A std140 vs packed toggle shows size savings. "Generate WGSL" outputs annotated @align annotations and "Generate JS" produces an ArrayBuffer DataView write sequence. Real GPUBuffer validation shows minUniformBufferOffsetAlignment, with three presets for MVP, lighting, and skinning structs.

why it shipped

This feature simplifies the use of uniform buffers in WGSL shaders by unifying their constraints with those of storage buffers. Without this, developers are required to align all array elements to 16 bytes and pad nested structures to achieve a 16-byte offset.

references