# Fake cubic Hermite spline interpolation with smoothstep

When scaling an image with Bicubic Interpolation, the Cubic Hermite spline interpolation is used. smoothstep is one of the four basis/blend functions of this kind of interpolation.

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

I've seen a trick used in quite a few places in Computer Graphics. Say something is interpolated linearly

$$L(t) = (1-t)A + t(B - A)$$

What people often do to make it interesting is remap the interpolation parameter $$t$$ with smoothstep and then lerp

$$u = smoothstep(t) \\ L(u) = (1-u)A + u(B - A)$$

The result (interpolant) is still linear but the speed at which the output varies isn't constant: starts slow and ends up slow, speeds up in the middle. When interpolating a value, by remapping the interpolation parameter, an illusion of non-linear output is achived since the linearly increasing parameter was looped through smoothstep (non-linear).

Some examples

I'm trying to better understand this trick. I think this trick is done to avoid doing a full blown Cubic Hermite spline interpolation which involves looking up 16 values and evaluating the cubic Hermite spline equation 5 times. Is this just a remapping trick or is there some mathematical concept behind it?

When I looked up smoothstep in Wikipedia, it says

In HLSL and GLSL, smoothstep implements the $$S_1(x)$$ the cubic Hermite interpolation after clamping

However, Hermite interpolation it links to is different from Cubic Hermite spline interpolation; they're two different articles. Former seems to be a kind of Polynomial Interpolation. I'm confused as to what this function really is/does at a deeper level.

• "Is this just a remapping trick or is there some mathematical concept behind it?" Why don't "remapping tricks" count has having "some mathematical concept"? "a full blown Cubic Hermite spline interpolation which involves looking up 16 values" Hermit spline interpolation only requires 4 values/control points. Jan 10 at 3:22
• @NicolBolas I should've been more precise; sorry. bicubic interpolation needs 16 lookups and 5 evaluations of cubic Hermite spline equation. Yes, remapping itself is a mathematical concept, agreed. Just curious if there's something more; cool if there isn't. Like for instance, when I first learned about barycentric coordinates I didn't know their connection to Bernstein polynomials. Jan 10 at 4:32
• I put the bounty on this to attract interesting answers to this interesting question but I wish I could split the bounty amongst multiple good answers! In the interests of fairness I'll award it to the one with the most upvotes at the end of the bounty period.
– AJP
Jan 11 at 18:28

A Hermite cubic polynomial interpolates 2 points and the derivatives at those points. To be exact, let us have the points $$p_0, p_1$$ and the derivatives (tangents) at those $$d_0, d_1$$. Then we want a cubic polynomial $$p(t) = a_0 + a_1 t + a_2 t^2 + a_3 t^3$$ which interpolates the points and derivatives: $$p(0) = p_0,\,\, p(1) = p_1,\,\, p'(0) = d_0,\,\, p'(1) = d_1.$$ We can take the derivative of $$p(t)$$ with respect to $$t$$ in order to get $$p'(t) = a_1 + 2a_2 t + 3a_3 t^2$$. We can compute two of the coefficients easily: $$p(0) = a_0 = p_0$$ and $$p'(0) = a_1 = d_0$$. For the remaining two equations we have $$p(1) = p_0 + d_0 + a_2 + a_3 = p_1,\quad p'(1) = d_0 + 2a_2 + 3a_3 = d_1.$$ Solving the system we get $$a_3 = 2(p_0-p_1) + d_0 + d_1, \quad a_2 = 3(p_1 - p_0)-2d_0 - d_1.$$ You can then rewrite the solution using the following system $$p(t) = \begin{bmatrix} 1 & t & t^2 & t^3 \end{bmatrix} \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ -3 & 3 & -2 & -1 \\ 2& -2 & 1 & 1\end{bmatrix} \begin{bmatrix} p_0 \\ p_1 \\ d_0 \\ d_1 \end{bmatrix}.$$ If you perform the vector-matrix multiplication first, then you would get the Hermite basis functions: $$p(t) = (1-3t^2+2t^3)p_0 + (3t^2-2t^3)p_1 + (t-2t^2+t^3)d_0 + (t^3-t^2)d_1.$$ You can now identify the basis function in front of $$p_1$$ with the smoothstep function, and the basis function in front of $$p_0$$ is one minus smoothstep. If you were to additionally set $$d_0=d_1=0$$, then it turns out that this is the only function you need. Thus when you do $$p(t) = (1-S(t)) p_0 + S(t) p_1$$ you are performing cubic polynomial Hermite interpolation with derivatives set to zero.

However, Hermite interpolation it links to is different from Cubic Hermite spline interpolation; they're two different articles.

These are nested subjects. That is, "Cubic Hermit interpolation" is a specific kind of "Hermite interpolation", just as a polygon is a specific kind of polytope.

Hermite interpolation is itself a particular scheme for doing polynomial interpolation. And polynomial interpolation is the construction of a polynomial (of the lowest possible degree) that passes through all of a given set of points in a field.

How this maps to smoothstep is as follows. For a given pair of start/end values, smoothstep defines a function f(X), where X is the given value. If we plot Y = f(X) on a graph, we get a function whose Y range is [0, 1] and its X range is [-inf, inf].

Now, when X is less than the start value, Y is always 0. When X is greater than the end value, Y is always one. When X is between those two values, it varies from 0 towards the start and 1 towards the end.

What that means is that we have 2 points in 2D space: (start, 0) and (end, 1). If we presume that start is 0 and end is 1 (we can linearly rescale the X value to map [start, end] to the [0, 1] range), then our points are (0, 0) and (1, 1).

Given this, we can perform Hermite interpolation between those two points. However, cubic Hermite interpolation requires 4 points: two points in space that act as the end points the curve must match and two first-derivatives which the curve must match at those points.

The first-derivatives are implied here by the nature of the smoothstep function. That is, the derivatives are chosen to be "smooth", relative to the flat parts of the function (ie: outside the X range of [0, 1]).

The derivatives can be defined in terms of 2D vectors that are tangent to the curve at those points, flowing in the direction of the curve from start to end. Since the values less than 0 are going to be a flat value of 0, and the values greater than 1 will have a flat value of 1, it makes sense that the tangents are also flat. So the two tangents are both (1, 0).

So our 4 Hermite interpolation positions are:

0th Derivative 1st Derivative
(0, 0) (1, 0)
(1, 1) (1, 0)

The rest is just plugging those numbers into the cubic Hermite interpolation formula and reducing the result. $$\boldsymbol{p}_0$$ and $$\boldsymbol{p}_1$$ are the start/end points, and $$\boldsymbol{k}_0$$ & $$\boldsymbol{k}_1$$ are the two tangents:

$$\boldsymbol{f}(t) = \left(2t^3 - 3t^2 + 1\right) \boldsymbol{p}_0 + \left(t^3 - 2t^2 + t\right) \boldsymbol{m}_0 + \left(-2t^3 + 3t^2\right) \boldsymbol{p}_1 + \left(t^3 - t^2\right) \boldsymbol{m}_1$$

The X and Y components are:

$$\begin{eqnarray*} f(t)_x &=& \left(2t^3 - 3t^2 + 1\right) p_{0x} + \left(t^3 - 2t^2 + t\right) m_{0x} + \left(-2t^3 + 3t^2\right) p_{1x} + \left(t^3 - t^2\right) m_{1x}\\ f(t)_y &=& \left(2t^3 - 3t^2 + 1\right) p_{0y} + \left(t^3 - 2t^2 + t\right) m_{0y} + \left(-2t^3 + 3t^2\right) p_{1y} + \left(t^3 - t^2\right) m_{1y} \end{eqnarray*}$$

If you insert the zeros and ones, then you get things reduced to:

$$\begin{eqnarray*} f(t)_x &=& (t^3 - 2t^2 + t) + (-2t^3 + 3t^2) + (t^3 - t^2)\\ &=& (t^3 - 2t^3 + t^3) + (-2t^2 + 3t^2 - t^2) + t\\ &=& t\\ f(t)_y &=& -2t^3 + 3t^2 \end{eqnarray*}$$

We're not actually looking for $$f(t)$$ however; we're looking for our function f(x) that yields Y. Because $$t$$ and $$f(t)_x$$ are the same however, that means $$f(t)_y$$ is just the $$f(x)$$ that we're looking for.

Does $$-2x^3 + 3x^2$$ look familiar? It's just a different form of t * t * (3.0 - 2.0 * t). Which is what smoothstep returns when t is between 0 and 1.

QED