Having fun with Linear Interpolation

What is linear interpolation

Interpolation is a cornerstone of computer science, particularly in rendering. Whether it’s triangle rasterization, shaders, image magnification, or skeletal animation, linear interpolation plays a crucial role.
In this blog post, I’ll demonstrate some practical uses of interpolation that I incorporate into all my playgrounds and demos. You don’t need to be a math expert; with just a few lines of code, you can significantly enhance your animations, controls, cameras, and more.

Interpolation smooth value over time

Linear interpolation exposed above is useful when you know the start,end value and the time it takes to interpolate. This is an easy way to smooth animation over time for example:
https://playground.babylonjs.com/#EU3YIP

The lower the factor, the smoother it is. It’s like ‘bluring’ the position over time.

This technique is incredibly useful for smooth interpolation of camera movements, including targeting, aiming, and angle adjustments. You can find it applied in the camera controller featured in this blog post.

The formula is simple:

value = value + (target - value) * factor;

Here, the factor ranges between 0 and 1. The closer the factor is to 1, the faster the value will converge to the target.

Framerate Independent

This simple interpolation has a big drawback: It’s dependent of the framerate. Experience will be different depending on the framerate. As the code is executed once per frame, having more frames per second will make the effect run faster or slower. But with just a small update, it’s possible to make it framerate independent.

With https://playground.babylonjs.com/#T6KNCC#4 you can test the influence of the display frequency with and without framerate independent computation.

The interpolation code becomes:

value = value + (target - value) * (1-Math.pow(2, -frequency / factor));

It’s just a tiny change to be sure to have the same experience with different device configurations.

Acceleration and end value

With constant speed (zero acceleration), a moving entity can be seen as an interpolation between two locations. Imagine the ISS orbiting around the earth at constant speed.
But what about a bit more complexity with an acceleration? Let’s say we are coding a car simulator and need precise control on its acceleration curve. You end up with some code like this:

speed += acceleration * deltaTime;
position += speed * deltaTime;

Acceleration value is 1 when going faster, and -1 when braking. Values, 1 and -1 can be tweaked by car to make cars different. It’s fine but if acceleration is always the same, then you’ll get infinite speed. The trick here is to interpolate acceleration between (1 = full acceleration to 0 = can’t accelerate more). As an analogy, a car will have maximum acceleration when its speed is 0 and no acceleration with it reaches its maximum speed.

Resulting code:

acceleration = maximumAcceleration * (1 - speed / maximumSpeed);
speed += acceleration * deltaTime;
position += speed * deltaTime;

It’s possible to have precise control on jumping behavior thanks to speed linear interpolation.

Another use case for this is the jump control for characters. For a game featuring characters like Celeste or Mario, you’ll need very precise control on jump height, jump distance, etc. This can be evaluated with this Playground : https://playground.babylonjs.com/#VNFPQL#3

In this jump example, speed is interpolated based on height but the principle is the same.

Linear Interpolation in Babylon.js

Helper function are available in Babylon math class. Like Lerp method in Vector3 https://doc.babylonjs.com/typedoc/classes/BABYLON.Vector3#Lerp

The animation feature provide ways to animate and interpolate object position easily : https://doc.babylonjs.com/features/featuresDeepDive/animation/animation_design

This is just 2 examples of Liner interpolation in Babylon. Check shader code for example. Any use of mix function is an interpolation. Each triangle rendered is using hardware interpolation on the GPU and so on.

Takeaways

Linear interpolation is ubiquitous in 3D experiences. Understanding and utilizing it extensively can significantly enhance your projects. However, it’s crucial to consider the influence of time on interpolation. With a few mathematical tricks and analogies, you’ll be able to create incredible and enjoyable experiences.