Build your first shader
A checkerboard that blends two colors — UV, Checker, Mix, done.
This walk-through builds a two-color checkerboard from scratch. It uses four node kinds: UV, Checker, two Color inputs, and Mix.
Add a UV node
Create a new workflow (blank template). Press Shift+A
and add UV (category inputs). It outputs the canvas's vec2 texture
coordinates — (0,0) bottom-left to (1,1) top-right.
Add a Checker node
Add Checker (category procedural). Connect the UV node's output to the
Checker node's uv input (vec2 → vec2). Checker outputs a float — 0
or 1 in a checkerboard pattern. Its node preview already shows the pattern.
Add two Color nodes
Add two Color input nodes and pick two colors you like. These are primitive input nodes — constants you edit in place.
Blend with Mix
Add Mix (category interpolation): a linear blend a → b by t.
Connect:
- first Color →
a - second Color →
b - Checker's
floatoutput →t
With t snapping between 0 and 1 per tile, Mix picks color a or b per
tile.
Wire the output
Connect Mix's output to the output node's color input. The output node
renders the full shader. That's the whole graph:
UV → Checker ─┐
Color A ──────┤
Color B ──────┴→ Mix → OutputOptional: more tiles
Checker's tile frequency follows its input coordinates. Insert a
Multiply node (category operators) between UV and Checker, and feed its
second input from a Float constructor node set to 8 — a float splats into a
vec2, so this scales both axes and gives you an 8×8 board. Try a Time
node (category inputs) added to the UV to make it scroll.
Next: publish it or embed it in React.