Fluorite
Guides

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 (vec2vec2). Checker outputs a float0 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 float output → 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 → Output

Optional: 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.

On this page