Core Idea
One formula owns every smooth thing on screen:
lerp(a, b, t) = a + (b − a) · t t ∈ [0, 1]Read t as a percentage of the way there: 0 is a, 1 is b, 0.37 is 37% along. It works on anything with components — positions, colors, angles, whole vectors component by component. In the race above, all four movers run exactly this lerp between the same A and B on the same clock. The only thing that differs is what each one does to t first.
The Shape of t
Raw t marches at constant speed — and constant speed reads as dead: no object in the physical world starts or stops instantly. Animation lives in remapping t before the lerp:
smoothstep: t·t·(3 − 2t) ease-in: t³ ease-out: 1 − (1−t)³Grab the scrubber above and watch the trails: their spacing is speed, and the shared graph shows why — a steep stretch of curve is a fast moment, a flat stretch a slow one. Everyone still arrives at t = 1; easing changes the journey, never the destination. The same remap trick powers input mapping: normalize anything (scroll ÷ page height, pointer ÷ width) into a 0–1 t, shape it, lerp the output. Chain lerps inside lerps and you get Bézier curves — that story is told by curves.
The GPU Is an Interpolation Machine
A triangle has three vertices, but it covers thousands of pixels — so where does each fragment’s normal, color, or UV come from? The rasterizer lerps them, using barycentric weights:
Each corner’s weight is the area of the sub-triangle opposite it (they always sum to 1), and the fragment receives the weighted mix — for every varying, at every pixel, in hardware.
This is how three [normals](/kb/concepts/normals) become a smooth gradient of lighting across a flat triangle ([shading](/kb/techniques/shading) spends it), and how three UV coordinates become a stretched texture. One honesty note: for anything mid-triangle the GPU actually interpolates in a perspective-correct way — weights are adjusted by each vertex's depth so textures don't bend on slanted floors.What Lerp Can’t Do Naively
- Colors —
mix(dark, lit, t)in GLSL is lerp, andtis often a measurement:mix(shadow, sun, dot(N, L))turns alignment straight into blend — see dot product. - Angles wrap — lerping 350° → 10° swings 340° the long way around instead of 20° through zero. Rotations need shortest-path treatment (or quaternion slerp in 3D); naive component lerp of a rotation is a classic snap-glitch.
- Unit vectors shrink — the straight line between two directions cuts inside the sphere; renormalize after lerping normals or light directions.
Connections
Interpolation is the connective tissue of the pipeline: rasterization is a barycentric lerp over every triangle, shading lerps between light states using dot product results as t, and texture sampling is bilinear lerp between the four nearest texels (texturing). Stack lerps recursively and curves fall out — de Casteljau is nothing but lerp applied to its own results.