Smoothstep

A plot of the smoothstep(x) and smootherstep(x) functions, using 0 as the left edge and 1 as the right edge.

Smoothstep is an interpolation function commonly used in computer graphics^[1][2] and video game engines.^[3]

The function depends on two parameters, the "left edge" and the "right edge", with the left edge being assumed smaller than the right edge. The function takes a real number x as input and outputs 0 if x is less than or equal to the left edge, 1 if x is greater than or equal to the right edge, and smoothly interpolates between 0 and 1 otherwise. The slope of the smoothstep function is zero at both edges. This makes it easy to create a sequence of transitions using smoothstep to interpolate each segment rather than using a more sophisticated or expensive interpolation technique.

As pointed out in MSDN and OpenGL documentation, smoothstep implements cubic Hermite interpolation after doing a clamp:

$\operatorname{smoothstep}(x) = 3x^2 - 2x^3$

where we assume that the left edge is 0, the right edge is 1, and 0 ≤ x ≤ 1.

A C/C++ example implementation provided by AMD^[4] follows.

float smoothstep(float edge0, float edge1, float x)
{
    // Scale, bias and saturate x to 0..1 range
    x = clamp((x - edge0)/(edge1 - edge0), 0.0, 1.0); 
    // Evaluate polynomial
    return x*x*(3 - 2*x);
}

Variations

Ken Perlin suggests^[5] an improved version of the smoothstep function which has zero 1st and 2nd order derivatives at x=0 and x=1:

$\operatorname{smootherstep}(x) = 6x^5 - 15x^4 + 10x^3$

C/C++ reference implementation:

float smootherstep(float edge0, float edge1, float x)
{
    // Scale, and clamp x to 0..1 range
    x = clamp((x - edge0)/(edge1 - edge0), 0.0, 1.0);
    // Evaluate polynomial
    return x*x*x*(x*(x*6 - 15) + 10);
}

Origin

3rd order equation

We start with a generic third order polynomial function and its first derivative:

$\begin{alignat}{9} f(x) &&\; = \;&& a_3 x^3 &&\; + \;&& a_2 x^2 &&\; + \;&& a_1 x &&\; + \;&& a_0 & \\ f'(x) &&\; = \;&& 3 a_3 x^2 &&\; + \;&& 2 a_2 x &&\; + \;&& a_1 & \end{alignat}$

Applying the desired values for the function at both endpoints we get:

$\begin{alignat}{13} f(0) &&\; = \;&& 0 \;\;\;\;\;&& \Rightarrow &&\;\;\;\;\; 0 \;&& + &&\; 0 \;&& + &&\; 0 \;&& + &&\; a_0 &&\; = \;&& 0 & \\ f(1) &&\; = \;&& 1 \;\;\;\;\;&& \Rightarrow &&\;\;\;\;\; a_3 \;&& + &&\; a_2 \;&& + &&\; a_1 \;&& + &&\; a_0 &&\; = \;&& 1 & \end{alignat}$

Applying the desired values for the first derivative of the function at both endpoints we get:

$\begin{alignat}{11} f'(0) &&\; = \;&& 0 \;\;\;\;&& \Rightarrow &&\;\;\;\; 0 \;&& + &&\; 0 \;&& + &&\; a_1 \;&& = \;&& 0 & \\ f'(1) &&\; = \;&& 0 \;\;\;\;&& \Rightarrow &&\;\;\;\; 3 a_3 \;&& + &&\; 2 a_2 \;&& + &&\; a_1 \;&& = \;&& 0 & \end{alignat}$

Solving the system of 4 unknowns formed by the last 4 equations we obtain the values of the polynomial coefficients:

$a_0 = 0 , \;\;\;\;\;\; a_1 = 0 , \;\;\;\;\;\; a_2 = 3 , \;\;\;\;\;\; a_3 = -2$

Introducing these coefficients back into the first equation gives the third order smoothstep function:

$f(x) = -2x^3 + 3x^2$

5th order equation

We start with a generic fifth order polynomial function, its first derivative and its second derivative:

$\begin{alignat}{13} f(x) &&\; = \;&& a_5 x^5 &&\; + \;&& a_4 x^4 &&\; + \;&& a_3 x^3 &&\; + \;&& a_2 x^2 &&\; + \;&& a_1 x &&\; + \;&& a_0 & \\ f'(x) &&\; = \;&& 5 a_5 x^4 &&\; + \;&& 4 a_4 x^3 &&\; + \;&& 3 a_3 x^2 &&\; + \;&& 2 a_2 x &&\; + \;&& a_1 & \\ f''(x) &&\; = \;&& 20 a_5 x^3 &&\; + \;&& 12 a_4 x^2 &&\; + \;&& 6 a_3 x &&\; + \;&& 2 a_2 & \end{alignat}$

Applying the desired values for the function at both endpoints we get:

$\begin{alignat}{17} f(0) &&\; = \;&& 0 \;\;\;\;\;&& \Rightarrow &&\;\;\;\;\; 0 \;&& + &&\; 0 \;&& + &&\; 0 \;&& + &&\; 0 \;&& + &&\; 0 \;&& + &&\; a_0 &&\; = \;&& 0 & \\ f(1) &&\; = \;&& 1 \;\;\;\;\;&& \Rightarrow &&\;\;\;\;\; a_5 \;&& + &&\; a_4 \;&& + &&\; a_3 \;&& + &&\; a_2 \;&& + &&\; a_1 \;&& + &&\; a_0 &&\; = \;&& 1 & \end{alignat}$

Applying the desired values for the first derivative of the function at both endpoints we get:

$\begin{alignat}{15} f'(0) &&\; = \;&& 0 \;\;\;\;&& \Rightarrow &&\;\;\;\; 0 \;&& + &&\; 0 \;&& + &&\; 0 \;&& + &&\; 0 \;&& + &&\; a_1 \;&& = \;&& 0 & \\ f'(1) &&\; = \;&& 0 \;\;\;\;&& \Rightarrow &&\;\;\;\; 5 a_5 \;&& + &&\; 4 a_4 \;&& + &&\; 3 a_3 \;&& + &&\; 2 a_2 \;&& + &&\; a_1 \;&& = \;&& 0 & \end{alignat}$

Applying the desired values for the second derivative of the function at both endpoints we get:

$\begin{alignat}{15} f''(0) &&\; = \;&& 0 \;\;\;\;&& \Rightarrow &&\;\;\;\; 0 \;&& + &&\; 0 \;&& + &&\; 0 \;&& + &&\; 2 a_2 \;&& = \;&& 0 & \\ f''(1) &&\; = \;&& 0 \;\;\;\;&& \Rightarrow &&\;\;\;\; 20 a_5 \;&& + &&\; 12 a_4 \;&& + &&\; 6 a_3 \;&& + &&\; 2 a_2 \;&& = \;&& 0 & \end{alignat}$

Solving the system of 6 unknowns formed by the last 6 equations we obtain the values of the polynomial coefficients:

$a_0 = 0 , \;\;\;\;\;\; a_1 = 0 , \;\;\;\;\;\; a_2 = 0 , \;\;\;\;\;\; a_3 = 10 , \;\;\;\;\;\; a_4 = -15 , \;\;\;\;\;\; a_5 = 6$

Introducing these coefficients back into the first equation gives the fifth order smootherstep function:

$f(x) = 6x^5 - 15x^4 + 10x^3$

7th order equation

Also called "smootheststep", the 7th order equation was derived by Kyle McDonald and first posted to Twitter^[6] with a derivation on GitHub:^[7]

$f(x) = -20x^7 + 70x^6 - 84x^5 + 35x^4$

References

1. Smoothstep at Microsoft Developer Network
2. GLSL Language Specification, Version 1.40
3. Unity game engine SmoothStep documentation
4. ATI R3x0 Pixel Shaders
5. Texturing and Modeling, Third Edition: A Procedural Approach
6. kcimc (25 March 2015). "smootheststep(t)=-20*t^7+70*t^6-84*t^5+35*t^4 // when smootherstep's second derivative isn't enough" (Tweet).
7. Kyle McDonald (27 March 2015). "Derivation of 7th-order smoothstep function with zeros in third derivative.". Github.com. Retrieved 20 December 2015.

External links

• Using smoothstep (in the RenderMan Shading Language) by Prof. Malcolm Kesson.
• Interpolation tricks by Jari Komppa
• Swift Interpolation Playground demonstrates smoothStep(), smootherStep() and smoothestStep() in a Swift playground by Simon Gladman