smoothstepElement
A convenience alias for `smoothstep` with identical functionality but a more intuitive `(x, low, high)` parameter order, placing the value to be evaluated first.
Core Advantages
Enhances code readability by placing the value being processed, `x`, first, aligning it with the style of functions like `clamp` and reducing the risk of errors from incorrect parameter order.
Common Uses
Procedurally generating soft-edged masks (same usage as smoothstep)
Smoothly blending materials (same usage as smoothstep)
Adding easing to animations (same usage as smoothstep)
How to adjust
Adjustment effects are identical to `smoothstep`. Control the softness of the transition area by adjusting the difference between the `low` and `high` parameters. Swapping the order of `low` and `high` 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 using the (x, high, low) order
5// Note that 'dist', the value being tested, is the first parameter.
6const circle = smoothstepElement(dist, 0.3, 0.2);