smoothstep
Generates a smooth, S-shaped interpolation (from 0 to 1) based on an input value `x` within a specified range (`low` to `high`), often used to create natural transitions.
Core Advantages
Its resulting interpolation curve has a zero rate of change at its start and end points, creating a more elegant and organic 'ease-in/ease-out' effect than linear interpolation, avoiding visual pops.
Common Uses
Procedurally generating soft-edged masks or shapes
Smoothly blending multiple terrain textures or materials
Adding ease-in/ease-out effects to animated properties
How to adjust
Control the width of the transition area (the softness) by adjusting the difference between the `low` and `high` parameters. A smaller difference creates a harder edge, while a larger difference creates a blurrier one. Swapping their order inverts the effect (interpolating from 1 to 0).
Code Examples
1// Calculate distance from the center (0.0 to ~0.707)
2const dist = distance(uv(), vec2(0.5));
3
4// Perform a reverse smooth transition as distance goes from 0.3 to 0.2
5// Effect: 1 (white) if dist < 0.2, 0 (black) if dist > 0.3
6// This draws a circle with a soft edge.
7const circle = smoothstep(0.3, 0.2, dist);