I’ve been going through The Book of Shaders, and chapter 5 on shaping functions stood out enough that I wanted to summarize it. These functions show up constantly in real shader work — masks, transitions, procedural patterns, sensor thresholding — so I built two small interactive graphs to actually see what each one does instead of just reading the definitions.
Feel free to tweak the values below and watch the curve change in real time.
brightness (color = vec3(y))
x axis is in radians, 0 to 2π (one full circle)
step(edge, x) A hard on/off switch. Returns 0.0 if x < edge, otherwise 1.0. No blending. Only an instant jump.
smoothstep(edge0, edge1, x) A soft version of step. Returns 0.0 below edge0, 1.0 above edge1, and eases smoothly between the two in an S-curve. This is the workhorse for anti-aliased edges, masks, and fades.
clamp(x, min, max) Restricts a value to a range — anything below min becomes min, anything above max becomes max. Useful for keeping a computed value safely inside 0–1 before it's used as a color or a mix factor.
fract(x) Returns just the decimal part of a number (x - floor(x)). Turns any smoothly increasing value into a repeating 0→1 ramp — the basis for tiling patterns and looping animations.
None of these are exotic. They're the basic vocabulary for shaping a value before it becomes a color, a mask, or a transition — the same thing a curve or easing function does in an animation tool, just written by hand. Worth having solid intuition for before moving further into the book.