 | Time Based Movement |  |
Instead of just hardcoding an arbirary value for movement each frame - you calculate how much time has elapsed since the last call. This means, as the frame rate increases and decreases the movements don't become jittery and unnatural - they remain consistent and smooooooth.
Functions Used: peformance.now(), setVertexBuffer(), setIndexBuffer(), drawIndexed(), createBuffer(), getMappedRange(), getContext(), requestAdapter(), getPreferredCanvasFormat(), createCommandEncoder(), beginRenderPass(), setPipeline(), draw(), end(), submit(), getCurrentTexture(), createView(), createShaderModule()
We can use the peformance.now() function to get timing information and calculation dt (time in milliseconds since the last frame update).
<?php
let lastTime = performance.now();
function frame()
{
var dt = startTime - lastTime;
lastTime = performance.now();
....
}
The current version of requestAnimationFrame automatically feeds a timestamp to the animation function. You can use that timestamp to calculate how much time has elapsed since you were last in the animation loop.
<?php
let start, previousTimeStamp;
function step(timeStamp)
{
if (start === undefined) { start = timeStamp; }
const totalElapsed = timeStamp - start;
if (previousTimeStamp !== timeStamp)
{
// Math.min() is used here to make sure the element stops at exactly 200px
const count = Math.min(0.1 * elapsed, 200);
if (count === 200) // exist loop when finished
break;
}
}
requestAnimationFrame(step);
|
