Value Steps (Quantization)

14 / 30
Quantize a smooth gradient into discrete steps using floor().

A gradient is continuous. Use floor to quantize it into discrete steps — like a limited color palette with only a few distinct shades.


floor quantizes

  • vUv.x * 6.0 stretches 0–1 into 0–6
  • floor(...) snaps to integers: 0, 1, 2, 3, 4, 5
  • Dividing by steps - 1.0 = 5.0 normalizes 0–5 back into 0–1

Result: t only has 6 values (0, 0.2, 0.4, 0.6, 0.8, 1.0), each producing a solid color band.


Exercise

The exercise starts with t = 0.0 (solid color a). Use floor(vUv.x * steps) / (steps - 1.0) to compute the quantized t and get 6 discrete color bands.

Answer Breakdown

floor "locks" neighboring pixels to the same integer whenever they fall in the same interval — producing identical color across each band. Dividing by (steps - 1.0) instead of steps ensures the last step reaches exactly 1.0 (full color b at the right edge).

Try steps = 3.0 for coarse 3-level posterization, or steps = 16.0 to approach a smooth gradient.

GLSL Code Editor

Correct Code Preview

Current Code Preview