Grids & tiling
Repeat a cell across a surface with fract, and number each copy with floor.
Cards
One live example to tweak, learn and copy.
How it works
Almost every repeating pattern starts the same way: scale the UVA 2D position on a surface or the screen, usually from 0 to 1 on both axes. Shaders draw shapes and patterns as functions of it. UV coordinates A 2D position on a surface or the screen, usually from 0 to 1 on both axes. Shaders draw shapes and patterns as functions of it.uv = gl_FragCoord.xy / resolutionfloor 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 aliasingThe false pattern that appears when a signal changes faster than it is sampled. In a shader, detail finer than a pixel turns into jagged edges, shimmer and moiré, because each pixel takes one sample from its center. Aliasing The false pattern that appears when a signal changes faster than it is sampled. In a shader, detail finer than a pixel turns into jagged edges, shimmer and moiré, because each pixel takes one sample from its center.
Further reading
- fract (opens in a new tab)Reference
- mod (opens in a new tab)Reference
- Patterns (opens in a new tab)Book
- gl_FragCoord (opens in a new tab)Reference
- Uniforms (opens in a new tab)Book
- UV mapping (opens in a new tab)Reference
- floor (opens in a new tab)Reference
- Filterable procedurals (opens in a new tab)Article
- Aliasing (opens in a new tab)Reference
- CanvasItem shaders (opens in a new tab)Docs