Checkerboard Pattern
Divide the canvas into an 8×8 grid and use a single formula to decide whether each cell is black or white:
Here's how it works.
floor turns coordinates into cell IDs
vUv.x is a 0–1 horizontal coordinate. Multiplying by 8 gives 0–8. floor() rounds down, converting the continuous value into an integer column ID:
- Left column: coordinates 0.0–1.0 → floor gives 0
- Second column: coordinates 1.0–2.0 → floor gives 1
- And so on…
y works the same way, turning the vertical coordinate into a row ID from 0 to 7.
mod decides black or white
Add the column ID to the row ID, then take the remainder when dividing by 2:
- Even total (remainder = 0) →
pattern = 0.0→mix(white, black, 0.0)→ white - Odd total (remainder = 1) →
pattern = 1.0→mix(white, black, 1.0)→ black
Since adjacent cells always differ by 1 in their combined ID, the parity (and color) always alternates — that's the checkerboard.
Try changing it
| Change | Effect |
|---|---|
Set 8.0 to 4.0 | Larger cells, a 4×4 board |
Set 8.0 to 16.0 | Smaller cells, a 16×16 board |
Swap the colors in mix() | Red/white, blue/yellow, any palette |
Use only mod(x, 2.0) without adding y | Turns into vertical stripes |
Exercise
Write the complete 8×8 checkerboard shader from scratch, producing alternating black and white squares.
Answer Breakdown
floor(vUv.x * 8.0) discretizes the horizontal coordinate into a column ID from 0 to 7. floor(vUv.y * 8.0) does the same vertically. Adding both IDs and taking mod 2 gives a value that alternates between 0 and 1 between adjacent cells — the checkerboard mask. mix(vec3(1.0), vec3(0.0), pattern) maps 0 to white and 1 to black.
The starting code has no variables at all, so nothing is output. The key steps are: build a grid with floor, generate the parity check with mod, then map to colors with mix.
Try changing the mix call to mix(vec3(0.2, 0.4, 0.8), vec3(0.9, 0.3, 0.1), pattern) to replace black/white with blue and orange.