Building a WebGPU render pipeline from scratch

Every browser-based visual rig for a live set — audio-reactive geometry, generative backdrops, projection material — ultimately stands on one skeleton: a WebGPU app that owns a device, feeds a pipeline, and pushes frames. This module builds that skeleton with no framework between you and the GPU, so that when a library abstracts it away later, you still know exactly what a dropped frame or a black canvas means mid-performance.

The arc starts fully supported: get pixels on screen with nothing but a cleared canvas. The two-step adapter-then-device handshake and canvas context configuration get you a device; the render pass with loadOp ‘clear’ proves the whole record-then-submit chain works before any geometry exists. That’s the first exercise — a solid colour, driven by a command encoder you built yourself. From there, scaffolding drops away in layers: declare triangle vertices in a Float32Array, describe their byte layout with a vertex buffer layout, upload them via a GPUBuffer, and wire it all into a render pipeline whose fragment targets match the canvas format. Clip space keeps you honest about where those vertices actually land. The capstone removes all support: a from-scratch app whose render loop re-records and re-submits a fresh command buffer every frame, drawing triangles through pipeline, bind group, and draw call.

Every required atom is load-bearing for that capstone — skip the format-matching rule or the bind-group mechanics and the app validates but renders nothing, or fails validation outright. The supporting atoms open the doors you’ll walk through next: uniforms turn this static skeleton into a time- and audio-driven instrument, instancing scales one triangle into a thousand, and the rasterizer’s vertex-to-fragment handoff explains why interpolated colour gradients appear for free.

Runnable examples

Generated from the context/ instrument corpus by concept (redistributable idioms only). Do not edit — regenerate with gen-module-examples.mjs.

solid-fill

[0.1, 0.1, 0.2] >> rgb

_{punctual-0017 · CC0-1.0}

solid(0.1, 0.1, 0.2).out()

_{hydra-0171 · MIT}