Chapter 02

Types

WGSL types are more than names beside values. They decide overloads, memory layout, host-visible buffer shape, and which expressions the compiler can prove valid before the shader reaches the GPU.

Start with the type layout lab.

Open the module in Studio, then compare diagnostics, reflection, and generated host layout from the same struct.

Inspect in Studio

Plain types carry machine shape

Scalars, vectors, matrices, arrays, structs, and atomics are the values you normally move through shader code. Abstract numeric values help type checking, but host buffers eventually need concrete types such as f32, u32, vec4f, or a struct made from them.

typed valuesscalar to struct

alias Color = vec4f;

struct Particle {
  position : vec4f,
  velocity : vec4f,
  life : f32,
};

fn tint(base : Color, amount : f32) -> Color {
  return mix(base, vec4f(1.0), amount);
}

Automatic conversion is narrow on purpose

WGSL lets abstract literals settle into concrete numeric types, but it does not freely convert between every concrete type. That restraint keeps shader behavior and buffer layout predictable.

Expression	Habit
`let x = 1 + 2.5;`	Abstract numbers can resolve together.
`let x : f32 = 1.0;`	Use an explicit target when the result should be concrete.
`vec3f(1.0, 2.0, 3.0)`	Construct vectors at the intended component type.

Struct layout is part of the API

When a struct appears in uniform or storage, its type is also a promise to browser code. Use Studio's reflection surface to check size, alignment, bindings, and host code before debugging a visual artifact as if it were math.