Build your first shader
A two-colour checkerboard with UV, Checker and Mix.
You'll build a two-colour checkerboard from scratch with UV, Checker, two Color nodes and Mix.
Start with UV
Create a new shader. It already has a UV node connected to the output.
UV gives each pixel its position, from (0,0) at the bottom left to (1,1) at
the top right.
Add a Checker node
Press ⌘+K, add Checker from procedural and connect UV to its uv input. It outputs
0 or 1 in a checkerboard pattern, which you can see in its preview.
Add two colours
Add two Color nodes and pick a colour on each.
Blend with Mix
Add Mix from interpolation. It blends from a to b by t. Connect:
- the first Color to
a - the second Color to
b - Checker to
t
Since t is always 0 or 1, each tile gets one colour or the other.
Connect the output
Connect Mix to the output node's color input:
Optional: more tiles
Add a Multiply node from operators between UV and Checker, and connect a
Float node set to 4 to its second input. You get an 8×8 board.
To make it move, add a Time node from inputs to the UV.
Next: publish it or add it to your React app.