Easing Functions

From Shader Forge Wiki
Jump to: navigation, search

Easing functions are common in computer animation; you might know them from Tweening libraries which expose them as options such as "EaseInOutCubic". An easing function takes an input, normalizes it into a 0 to 1 range, and provides an output that conforms to a mathematical curve. In a shader, easing functions are often used as forms of contrast control, and you have likely used them already without realizing it.

To understand what a given function does, it's easiest to graph them out. We can do this easily in a shader by performing a step operation on the U and V texture coordinates.

Sf ease linear.png

The step node compares the two inputs and outputs 1 if the first input is greater, or 0 if it is not. The step of the U vs. the V visualizes a linear easing function (in other words, an easing function which performs no changes to the input data).

Now lets use our first easing function, which you may have heard called an "EaseIn" by many tweening libraries. This function is also know as the Power function:

Sf ease pow.png

Graphed out we can see this produces a nice curve. Note that we can easily produce an "EaseOut" curve by applying a OneMinus to the input data before running it through the Power function, and we can increase or decrease the strength of the curve using the exponent input of the Power function. Note that many tweening libraries refer to different exponent values as different easing functions, such as "EaseInCubic" or "EaseInQuintic", but the only difference between many of these functions is the value passed into the exponent of the Power node.

A common use case for easing functions is the adjustment of contrast. Here you can see a comparison between the texture which has been computed with a power of 2 and the regular texture output:

Sf ease compare.png

More advanced functions

Here is an example of a Hermite easing curve, which is defined as x = x * x * (3 - 2 * x). The hermite curve is sometimes called a smooth step, and is commonly used in computer graphics; it can be thought of as an InOut function, in tweening terms.

Sf ease hermite.png

More advanced functions are available to produce different curves. You can find a detailed explanation of these functions, including visualizers and source code at Robert Penner's site:

http://www.robertpenner.com/easing/

However, many of the equations you'll find on these sites have an issue for shader development in that they use branching to perform their work (if-then statements). Branching can be extremely expensive on a GPU unless every pixel or vertex is likely to take the same branch, so it is best used with care.

An alternative is to use Time Groleau's Easing function generator, which produces branchless easing functions using a 5 point bezier curve as the input. You can interactively edit the curve, and it will spit out the code required for the easing function:

http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm


--Jason Booth (talk) 19:38, 13 March 2014 (UTC)