Puneet Varma (Editor)

Smoothstep

Updated on
Edit
Like
Comment
Share on FacebookTweet on TwitterShare on LinkedInShare on Reddit
Smoothstep

Smoothstep is an interpolation function commonly used in computer graphics and video game engines.

Contents

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:

smoothstep ( x ) = 3 x 2 2 x 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 follows.

Variations

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

smootherstep ( x ) = 6 x 5 15 x 4 + 10 x 3

C/C++ reference implementation:

3rd order equation

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

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

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

f ( 0 ) = 0 0 + 0 + 0 + a 0 = 0 f ( 1 ) = 1 a 3 + a 2 + a 1 + a 0 = 1

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

f ( 0 ) = 0 0 + 0 + a 1 = 0 f ( 1 ) = 0 3 a 3 + 2 a 2 + a 1 = 0

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 ) = 2 x 3 + 3 x 2

5th order equation

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

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

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

f ( 0 ) = 0 0 + 0 + 0 + 0 + 0 + a 0 = 0 f ( 1 ) = 1 a 5 + a 4 + a 3 + a 2 + a 1 + a 0 = 1

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

f ( 0 ) = 0 0 + 0 + 0 + 0 + a 1 = 0 f ( 1 ) = 0 5 a 5 + 4 a 4 + 3 a 3 + 2 a 2 + a 1 = 0

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

f ( 0 ) = 0 0 + 0 + 0 + 2 a 2 = 0 f ( 1 ) = 0 20 a 5 + 12 a 4 + 6 a 3 + 2 a 2 = 0

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 ) = 6 x 5 15 x 4 + 10 x 3

7th order equation

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

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

Generalization of higher-order equations

All smoothstep equations can be generalized as:

S a ( x ) = n = 0 a 1 ( a n ) ( 2 a 1 a n 1 ) x a + n

where a determines the order of the resulting polynomial equation, with the order being calculated as 2a - 1. Evaluating this function for different values of a gives:

S 1 ( x ) = x S 2 ( x ) = 2 x 3 + 3 x 2 S 3 ( x ) = 6 x 5 15 x 4 + 10 x 3 S 4 ( x ) = 20 x 7 + 70 x 6 84 x 5 + 35 x 4 S 5 ( x ) = 70 x 9 315 x 8 + 540 x 7 420 x 6 + 126 x 5 S 6 ( x ) = 252 x 11 + 1386 x 10 3080 x 9 + 3465 x 8 1980 x 7 + 462 x 6 S 7 ( x ) = 924 x 13 6006 x 12 + 16380 x 11 24024 x 10 + 20020 x 9 9009 x 8 + 1716 x 7

For any value a where a > 0, this generalization will smoothly interpolate from 0 to 1 for any value x on the interval 0 ≤ x ≤ 1 while retaining the property Sa(0.5) = 0.5.

An implementation of this function in Javascript

References

Smoothstep Wikipedia