Skip to content
Pattern · TechniqueBeginner

Grids & tiling

Repeat a cell across a surface with fract, and number each copy with floor.

UVSurface

Cards

One live example to tweak, learn and copy.

How it works

Almost every repeating pattern starts the same way: scale the UV up, then split it. floor of the scaled coordinate says which cell a pixel is in, and fract says where it sits inside that cell. Draw something with the fractional part and it repeats in every cell; use the cell number to make the copies differ, by alternating two colors, shifting every other row or giving each cell a random tint.

Floors, walls, fabric, UI backgrounds and the checker textures artists use to spot UV stretching are all grids. The technique is cheap, a handful of arithmetic per pixel and no texture, so it scales to any resolution and stays sharp up close.

Far away is another matter. Once a cell is smaller than a pixel, a grid with hard edges breaks into shimmer and false curves, a kind of aliasing. The checkerboard card shows it and says how to filter it once screen-space derivatives come along.

Further reading