04-09-2018, 10:29 AM
Blog: Here’s an easy way to improve lerp smoothing
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgamedev.win/wp-content/uploads/2018/04/blog-heres-an-easy-way-to-improve-lerp-smoothing.png" width="457" height="208" title="" alt="" /></div><div><p><strong><em><small>The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.<br />The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.</small></em></strong></p>
<hr />
<h2 class="code-line" id="a-useful-snippet">A Useful Snippet:</h2>
<p class="code-line">A lot of game developers will instantly recognize this line of code:</p>
<p><code>value = lerp(value, targetValue, 0.1)</code></p>
<p class="code-line">It’s super useful, and can be used for all sorts of things. With a higher constant, it’s a good way to smooth out jittery input from a mouse or joystick. With a low constant, it’s a nice way to smoothly animate a progress bar or a camera following a player. It will never overshoot the target value even if it’s changing, and it changes the speed based on how far away it is so it will always quickly converge on the target. Pretty good for a one liner!</p>
<h2 class="code-line" id="but">BUT!</h2>
<p class="code-line">Unfortunately it has a couple problems that are often ignored to some extent:</p>
<p class="code-line">The first is that it’s highly dependent on frame rate. The common advice is to use a fixed time step, but that’s not great advice. If it’s for player or camera animation, you will likely end up with visible jitters. If you change your fixed time step, you need to retune.</p>
<p class="code-line">The second is that the <code>lerp()</code> constant that you need to use is relatively hard to tune. It’s not uncommon to start adding some extra 0’s or 9’s to the front of the <code>lerp()</code> constant to get the desired smoothing amount. Assuming 60 fps, if you want to move halfway towards an object in a second you need to use a <code>lerp()</code> constant of 0.0115. To move halfway in a minute, you need to use 0.000193. On the other end of the spectrum if you use a <code>lerp()</code> constant of 0.9 you will run out of 32 floating point precision within 7 frames, and it will be exactly at the target value. That is insanely sensitive to hand tune with a UI slider, or even a hand typed value.</p>
<p class="code-line">Fortunately, with a little math, both issues are easy to fix!</p>
<h2 class="code-line" id="improved-version">Improved Version:</h2>
<p class="code-line">The key is to replace the simple <code>lerp()</code> constant with an exponential function that involves time. The choice of <code>exp2()</code> is arbitrary. Any base will work fine, you’ll just end up with a different rate value.</p>
<p><code>value = lerp(target, value, exp2(-rate*deltaTime))</code></p>
<p class="code-line">In this version, <code>rate</code> controls how quickly the value converges on the target. With a rate of 1.0, the value will move halfway to the target each second. If you double the rate, the value will move in twice as fast. If you halve the rate, it will move in half as fast. This is much more intuitive.</p>
<p class="code-line">Even better, it’s frame rate independent. If you <code>lerp()</code> this way 60 times with a delta time of 1/60 s, it will be the same result as 30 times with 1/30 s, or once with 1 s. No fixed time step is needed, or the jittery movement it causes.</p>
<p class="code-line">If you are worried about the performance, don’t be. Even mobile CPUs have instructions to help calculate exponents and logarithms in a few CPU cycles. In 2018, you should be <em>much</em> more worried about cache misses than math lib costs, but that’s a post for another day.</p>
<h2 class="code-line" id="conversion">Conversion:</h2>
<p class="code-line">So this new version is frame rate independent, and easier to tune. How do you convert your old <code>lerp()</code> statements into the new ones without changing the smoothing coefficients that already work well at 60 fps? Math to the rescue again. The following formula will can convert them: <em>(Note: Make sure to change the log base if you didn’t use exp2())</em></p>
<p><code>rate = -fps*log2(1 - coef)</code></p>
<p class="code-line">Recalculate them and don’t look back!</p>
<h2 class="code-line" id="going-further">Going Further:</h2>
<p class="code-line">Adjusting the numbers by hand is much easier now, but it’s still not slider friendly. Negative rates cause the math to blow up, and slowing the rate down will be very sensitive. Just add more exponents!</p>
<p><code>rate = exp2(logRate)<br />value = lerp(target, value, exp2(-rate*deltaTime))</code></p>
<p class="code-line">This will make sliders more intuitive. Moving the slider a certain amount will always change the rate by the same fraction, and you can precompute <code>rate</code> if you want.</p>
<h2 class="code-line" id="the-math">Why Does It Work?</h2>
<p class="code-line">Say you are lerping by 0.9 each frame. That means you are leaving <code>(1 - 0.9) = 0.1 = 10%</code> of the remaining value. After 2 frames, there will be <code>(1 - 0.9)*(1 - 0.9) = 0.01 = 1%</code> of the remaining value. After 3, <code>(1 - 0.9)*(1 - 0.9)*(1 - 0.9) = 0.001 = 0.1%.</code> After n frames you’ll have <code>(1 - 0.9)^n</code> of the remaining value. In graph form:</p>
<p class="code-line"><img alt="" src="https://www.sickgamedev.win/wp-content/uploads/2018/04/blog-heres-an-easy-way-to-improve-lerp-smoothing.png" /></p>
<p class="code-line">So really all you are doing by repeatedly lerping is evaluating an exponential curve, and that’s why you can replace it with an actual exponential curve based on time.</p>
<p class="code-line">As an interesting aside, since you are moving partway towards the targe value each frame, you’ll never actually arrive at the target… or will you? <code>float</code> can store ~7 significant digits, and <code>double</code> ~16. Here’s a quick snippet of Ruby code to test what happens:</p>
<p><code>value = 0.0<br />target = 1.0<br />alpha = 0.9<br />100.times do|i|<br /> value = (1 - alpha)*value + alpha*target<br /> puts "#{i + 1}: #{value == target}"<br />end</code></p>
<p class="code-line">And the output?</p>
<p><code>1: false<br />2: false<br />... (more false values)<br />15: false<br />16: false<br />17: true</code></p>
<p class="code-line">It shouldn’t be too surprising that precision runs out after the 16th iteration. <code>(1 - 0.9)^17</code> is quite small. 1e-18 to be exact. That is so small, that in order to store <code>1 - 1e-17</code> you would need 18 significant digits, and doubles can only store 16! More interestingly, no matter what your starting and ending values are, it will always run out of precision after 16 iterations. Most game engines use floats instead of doubles, and those can only store ~7 significant digits. So you should expect precision to run out after only the 7th iteration. What about for other constants? (Keep in mind I’m using doubles, and floats would run out in half as many iterations.) For 0.8 you run out of precision after 23 iterations, 53 for 0.5.</p>
<p class="code-line">With constants less than 0.5 the pattern changes and something curious happens. Say you keep lerping with a constant of 0.5. Eventually, you will run out of precision and the next possible floating point number after <code>value</code> will be <code>target</code>. When you try to find the new value half way between, it will cause it to round up to <code>target</code> instead. If you use a constant smaller than 0.5, it will round down to <code>value</code>. So instead of arriving at target, it will get permanently stuck at the floating point number immediately before it. For a constant of 0.4, the value gets stuck at 70 iterations, or 332 for 0.1.</p>
</div>
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgamedev.win/wp-content/uploads/2018/04/blog-heres-an-easy-way-to-improve-lerp-smoothing.png" width="457" height="208" title="" alt="" /></div><div><p><strong><em><small>The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.<br />The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.</small></em></strong></p>
<hr />
<h2 class="code-line" id="a-useful-snippet">A Useful Snippet:</h2>
<p class="code-line">A lot of game developers will instantly recognize this line of code:</p>
<p><code>value = lerp(value, targetValue, 0.1)</code></p>
<p class="code-line">It’s super useful, and can be used for all sorts of things. With a higher constant, it’s a good way to smooth out jittery input from a mouse or joystick. With a low constant, it’s a nice way to smoothly animate a progress bar or a camera following a player. It will never overshoot the target value even if it’s changing, and it changes the speed based on how far away it is so it will always quickly converge on the target. Pretty good for a one liner!</p>
<h2 class="code-line" id="but">BUT!</h2>
<p class="code-line">Unfortunately it has a couple problems that are often ignored to some extent:</p>
<p class="code-line">The first is that it’s highly dependent on frame rate. The common advice is to use a fixed time step, but that’s not great advice. If it’s for player or camera animation, you will likely end up with visible jitters. If you change your fixed time step, you need to retune.</p>
<p class="code-line">The second is that the <code>lerp()</code> constant that you need to use is relatively hard to tune. It’s not uncommon to start adding some extra 0’s or 9’s to the front of the <code>lerp()</code> constant to get the desired smoothing amount. Assuming 60 fps, if you want to move halfway towards an object in a second you need to use a <code>lerp()</code> constant of 0.0115. To move halfway in a minute, you need to use 0.000193. On the other end of the spectrum if you use a <code>lerp()</code> constant of 0.9 you will run out of 32 floating point precision within 7 frames, and it will be exactly at the target value. That is insanely sensitive to hand tune with a UI slider, or even a hand typed value.</p>
<p class="code-line">Fortunately, with a little math, both issues are easy to fix!</p>
<h2 class="code-line" id="improved-version">Improved Version:</h2>
<p class="code-line">The key is to replace the simple <code>lerp()</code> constant with an exponential function that involves time. The choice of <code>exp2()</code> is arbitrary. Any base will work fine, you’ll just end up with a different rate value.</p>
<p><code>value = lerp(target, value, exp2(-rate*deltaTime))</code></p>
<p class="code-line">In this version, <code>rate</code> controls how quickly the value converges on the target. With a rate of 1.0, the value will move halfway to the target each second. If you double the rate, the value will move in twice as fast. If you halve the rate, it will move in half as fast. This is much more intuitive.</p>
<p class="code-line">Even better, it’s frame rate independent. If you <code>lerp()</code> this way 60 times with a delta time of 1/60 s, it will be the same result as 30 times with 1/30 s, or once with 1 s. No fixed time step is needed, or the jittery movement it causes.</p>
<p class="code-line">If you are worried about the performance, don’t be. Even mobile CPUs have instructions to help calculate exponents and logarithms in a few CPU cycles. In 2018, you should be <em>much</em> more worried about cache misses than math lib costs, but that’s a post for another day.</p>
<h2 class="code-line" id="conversion">Conversion:</h2>
<p class="code-line">So this new version is frame rate independent, and easier to tune. How do you convert your old <code>lerp()</code> statements into the new ones without changing the smoothing coefficients that already work well at 60 fps? Math to the rescue again. The following formula will can convert them: <em>(Note: Make sure to change the log base if you didn’t use exp2())</em></p>
<p><code>rate = -fps*log2(1 - coef)</code></p>
<p class="code-line">Recalculate them and don’t look back!</p>
<h2 class="code-line" id="going-further">Going Further:</h2>
<p class="code-line">Adjusting the numbers by hand is much easier now, but it’s still not slider friendly. Negative rates cause the math to blow up, and slowing the rate down will be very sensitive. Just add more exponents!</p>
<p><code>rate = exp2(logRate)<br />value = lerp(target, value, exp2(-rate*deltaTime))</code></p>
<p class="code-line">This will make sliders more intuitive. Moving the slider a certain amount will always change the rate by the same fraction, and you can precompute <code>rate</code> if you want.</p>
<h2 class="code-line" id="the-math">Why Does It Work?</h2>
<p class="code-line">Say you are lerping by 0.9 each frame. That means you are leaving <code>(1 - 0.9) = 0.1 = 10%</code> of the remaining value. After 2 frames, there will be <code>(1 - 0.9)*(1 - 0.9) = 0.01 = 1%</code> of the remaining value. After 3, <code>(1 - 0.9)*(1 - 0.9)*(1 - 0.9) = 0.001 = 0.1%.</code> After n frames you’ll have <code>(1 - 0.9)^n</code> of the remaining value. In graph form:</p>
<p class="code-line"><img alt="" src="https://www.sickgamedev.win/wp-content/uploads/2018/04/blog-heres-an-easy-way-to-improve-lerp-smoothing.png" /></p>
<p class="code-line">So really all you are doing by repeatedly lerping is evaluating an exponential curve, and that’s why you can replace it with an actual exponential curve based on time.</p>
<p class="code-line">As an interesting aside, since you are moving partway towards the targe value each frame, you’ll never actually arrive at the target… or will you? <code>float</code> can store ~7 significant digits, and <code>double</code> ~16. Here’s a quick snippet of Ruby code to test what happens:</p>
<p><code>value = 0.0<br />target = 1.0<br />alpha = 0.9<br />100.times do|i|<br /> value = (1 - alpha)*value + alpha*target<br /> puts "#{i + 1}: #{value == target}"<br />end</code></p>
<p class="code-line">And the output?</p>
<p><code>1: false<br />2: false<br />... (more false values)<br />15: false<br />16: false<br />17: true</code></p>
<p class="code-line">It shouldn’t be too surprising that precision runs out after the 16th iteration. <code>(1 - 0.9)^17</code> is quite small. 1e-18 to be exact. That is so small, that in order to store <code>1 - 1e-17</code> you would need 18 significant digits, and doubles can only store 16! More interestingly, no matter what your starting and ending values are, it will always run out of precision after 16 iterations. Most game engines use floats instead of doubles, and those can only store ~7 significant digits. So you should expect precision to run out after only the 7th iteration. What about for other constants? (Keep in mind I’m using doubles, and floats would run out in half as many iterations.) For 0.8 you run out of precision after 23 iterations, 53 for 0.5.</p>
<p class="code-line">With constants less than 0.5 the pattern changes and something curious happens. Say you keep lerping with a constant of 0.5. Eventually, you will run out of precision and the next possible floating point number after <code>value</code> will be <code>target</code>. When you try to find the new value half way between, it will cause it to round up to <code>target</code> instead. If you use a constant smaller than 0.5, it will round down to <code>value</code>. So instead of arriving at target, it will get permanently stuck at the floating point number immediately before it. For a constant of 0.4, the value gets stuck at 70 iterations, or 332 for 0.1.</p>
</div>