home/ modules/ writing-wgsl-shaders

Writing WGSL vertex and fragment shaders

L2First instrument 5h G · Shaders & GPU programming 8 atoms

Learning objectives

learner can write WGSL vertex and fragment shaders returning position and color with correct location tags
learner can declare data with var/let/const and bundle shader IO with structs
learner can pass interpolated inter-stage variables and reuse the vertex output struct as fragment input
learner can transform a unit quad into an N-grid cell using clip-space scale/translate math with a per-instance offset

Capstone — one whole task that evidences the objectives

Author a complete WGSL shader pair that transforms grid-cell vertices to clip space, passes an interpolated color via a shared IO struct, and renders instanced cells with correct declarations and location tags.

Prerequisite modules

Building a WebGPU render pipeline from scratch

In a browser-based live-visuals rig, the shader is where your ideas become pixels: a grid of instanced cells pulsing to the beat is the classic first “real” WebGPU visual, and every audio-reactive patch you build later — waveform grids, cellular automata driven by onset detection — reuses exactly the WGSL skills this module drills. You already have a render pipeline from the prerequisite module; now you write the code that runs on it.

The arc starts supported: write the smallest legal vertex shader (an @vertex function returning a @builtin(position) vec4f) and pair it with a fragment shader that returns one flat @location(0) color — keep the vertex- and fragment-shader basics atoms open as just-in-time references for the attribute syntax. Next, refactor loose parameters into a shared IO struct, leaning on the struct shader-IO atom, and practice the var/let/const distinctions as you introduce runtime values. Then make color travel: emit an extra @location field from the vertex stage and watch the rasterizer interpolate it across each triangle, reusing the vertex output struct as the fragment input so locations stay consistent by construction. Finally, apply the grid coordinate transform — scale by 1/N, translate, add the per-instance cell offset — to place each instance in its own cell, unsupported.

The required atoms are exactly what the capstone cannot ship without: both shader entry points, correct declarations, a shared IO struct, interpolated inter-stage color, struct reuse, and the grid-cell math. The supporting atom on how the vertex stage, rasterizer, and fragment stage divide the work is the mental model that makes interpolation unsurprising — read it when the blended colors first appear and you want to know why.