Linear Interpolation – Useful Math for Game Developers

In this installment of our Useful Math for Game Developers Series, we will cover the world of Linear Interpolation. It is an incredibly useful mathematical function that every Game Developer should know and try to master. In this article we will explain what it is, why it is so incredibly useful and why you should try to use it as often as you can. If this sounds intriguing to you, we urge you to read on!

What is Linear Interpolation?

Simply put, Linear Interpolation is a mathematical function that you can use to determine a value that is relative to 2 other values. You can compare it to determining a value given by a percentage.

For example, if you were given $100 dollars and we would ask you to donate 10% to charity then you would instinctively know to donate $10. Next to that, if we would ask you to donate 50% then naturally you would know to donate $50, exactly half the original amount.

What is important here, is that we were able to intuitively deduce a value, given by a percentage. Yet, we can also do it the other way around. We can use an Inverse Linear Interpolation.

Another example, if there was a basket of 10 apples and we would ask you to eat 1 of them, you would also instinctively know that you just ate 10% of the apples in the basket.

Simple right? That’s exactly the main motivation behind using Linear Interpolation in Game Development. It makes things easy, flexible and intuitive for everybody in the team actively working on the project.

What is the Linear Interpolation Formula?

Now that we sort of know about the concept behind Linear Interpolation, we can introduce you to a formula that will help you to apply Linear Interpolation in your projects. Don’t worry if it looks intimidating right now as we’ll explain it in a moment. To make it easier, we have written the formula down in pseudocode:

// Function for Linear Interpolation
float lerp(float min, float max, float t) 
{
  return (1 - t) * min + t * max;
}
 
// Function for Inverse Linear Interpolation
float inverseLerp(float min, float max, float current) 
{
  return (current - min) / (max - min);
}

As can be seen above, we have a function called lerp that represents our Linear Interpolation formula. it takes in a minimum value, a maximum value and a value named t that represents our ‘ percentage’. We also have a function called inverseLerp with which we can do an Inverse Linear Interpolation.

Now that we have a function, we can actually use it on our example from the previous paragraph. The snippet below uses the function to calculate how much 50% of the total sum (our maximum) is. Easy right?

float money = lerp(0, 100, 0.5);

How does Linear Interpolation Work?

So how does this formula actually work? To start off, we will need to define a minimum value and a maximum value. In the case of our example this is pretty easy to determine. The minimum is $0 while the maximum is $100. To see how this function works in detail, we can try filling in some of the values:

float lerp(float min, float max, float t) 
{
  return (1 - t) * $0 + t * $100;
}

In this function, the magic happens when we consider the values that our percentage (t) can represent. Usually, we assume the value of t is normalized, meaning it is between 0.0 and 1.0. To put that in percentages: 0.0 is 0% and 1.0 is 100%. Let’s see what happens when we use 0.0 and 1.0 for the value of t

// t = 0.0
{
  return (1 - 0.0) * $0 + 0.0 * $100;
}
 
// t = 1.0
{
  return (1 - 1.0) * $0 + 1.0 * $100;
}

Now, if you manually evaluate the return value for both t = 0.0 and t = 1.0, then you will see how certain parts of the formula get cancelled out because they get multiplied with 0. You can also do this for values where t = 0.25 (25%), t = 0.5 (50%) and see what happens to the values inside the formula.

Pretty neat right? What is amazing about this function is that it also works for negative percentages and percentages above 100% even though this would technically be called linear extrapolation.

How to use Linear Interpolation in Game Development?

Actually, without knowing it, you may have already been using Linear Interpolation for many different things. For example, it’s used extensively in 3D Software Packages such as Blender and Unity for creating animations. Also, the entire rasterization process that happens on your GPU makes use of linear Interpolation. So where else can we use Linear Interpolation in Game Development?

Blending

Most often, Linear Interpolation is used as some form of blending. In the previous paragraph we showed you how you can calculate a point between two other points. Technically, we are doing some blending here between two points. Often, blending is done using some weight or percentage in the form of a normalized value between 0.0 and 1.0.

In the example below, we blend between two different speeds that we can assign to a player. The weight in this case is the input from a joy stick. The further the player pushes down the stick, the faster the player will go.

float idleSpeed = 1.0f;
float maxSpeed = 3.0f;
 
// Calculate the current speed based on joystick input
float currentSpeed = lerp(idleSpeed, maxSpeed, joyStickWeight);

Similarly, we can create blending between two different colors. For example, we can colorize a health bar based on the amount of health that a player has. We simply need to define a minimum and maximum health color, as well as create some kind of a percentage/weight that represents the player’s health.

Color minHealthColor = new Color(1.0f, 0.0f, 0.0f); // Red Color
Color maxHealthColor = new Color(0.0f, 1.0f, 0.0f); // Green Color
 
// Create a new color by blending min and max health colors using a player health weight
Color blend = Lerp(minHealthColo, maxHealthColor, playerHealthWeight);

Vector Math

The formula also works on Vector types. You can use it to calculate a point between two other points. For example, you might have two points called A and B, and you would like to calculate the mid point C Because it’s a midpoint, we know that value of t should be 0.5 or 50%.

Vector A = new Vector3(5.0f, 0.0f, 2.0f);
Vector B = new Vector3(10.0f, 0.0f, 1.0f);
 
// Calculate the midpoint between A and B
Vector midPointC = Lerp(A, B, 0.5f);

Shaders

Often in shaders, a developer can implement some form of blending based on a weight. The blending is not only limited to colors alone, but could also be used to blend different (normal) vectors in order to create a particular effect.

Pathing

Now that we know that we can use Linear Interpolation to find a point between two different points, you can imagine that it can also be used to place an object on a path. This is because a path is usually constructed from a collection of points in order. It’s very common for a pathing system to have function that allows you to position an object on a path. Usually, the pathing system will use linear interpolation internally to figure out where to place the object. In the example below, you can find pseudocode of what this could look like.

Vector3[] pathPoints =
{
  new Vector3(0.0f, 0.0f, 0.0f), 
  new Vector3(10.0f, 5.0f, 0.0f), 
  new Vector3(20.0f, 8.0f, 0.0f)
};
 
Path path = Path.ConstructFromPoints(pathPoints )
 
// Calculate a position on the path.
Vector3 pathPosition = path.GetPositionAt(0.3f);

Linear Interpolation in Popular Game Engines

After reading the above paragraphs, you might be interested to experiment some more with Linear Interpolation. Pretty much every popular Game Engine today has functionality built-in to perform interpolations.

Unity3D

in Unity, you can perform Linear interpolation on a variety of types. Most often you will use the Mathf.Lerp() method or Vector3.Lerp() method to perform interpolation on floats and Vector types respectively. However, the engine also offers supports for performing interpolation on Quaternions for rotations and interpolation on Colors to blend colors together. If you are working in ShaderGraph you can use the Lerp Node which will works with a lot of different values types.

Unreal Engine

If you’re working in Unreal Engine, you can perform Linear Interpolation using the Lerp Node or the FMath::Lerp() method. You can also blend between rotations using the FQuat::Slerp() method.

Godot

Since GodotScript works with variants you can use the Variant lerp method in order to perform Linear Interpolation on a variety of different types.

Conclusion

To conclude, in this article we have looked at what exactly linear interpolation is and how it works by deconstructing the formula behind it. Next to that, we gave several examples that demonstrates why interpolation is such a useful tool. This becomes especially apparent when you realize that you can use it to blend between different values using a normalized weight. Finally we also listed several ways how you can start using linear interpolation in your engine of choice.