Limit framerate and Frame-skipping

[Jakobud]

If I have an animation that I want to play at a certain FPS on the users screen, how would I accomplish this? I've seen some people do this:

function render()
{
    setTimeout(draw(), 1000/60);  // 60 fps?
}

Is that the proper way to do it?

What happens if someone's computer is too slow to handle the geometry in the scene? Is there someway to do frame skipping in order to keep their framerate at the target rate but skipping certain frames in order to stay there?

[mrdoob]

I think this is the simplest and most respectful (for the other tabs and user's cpu) solution...

setInterval( function () {

    requestAnimationFrame( draw );

}, 1000 / 60 );

What happens if someone's computer is too slow to handle the geometry in the scene? Is there someway to do frame skipping in order to keep their framerate at the target rate but skipping certain frames in order to stay there?

Well, a proper way to deal with that is by animating using a timer instead (please, do it):

currentTime = new Date().getTime();
delta = currentTime - previousTime;
previousTime = currentTime;

object.position.z += delta;

[mrdoob]

Actually that solution is not right... using the Page Visibility API should be more correct. Albeit it would only work on webkit browsers by now:

setInterval( function () {

    if ( ! document.webkitHidden ) requestAnimationFrame( draw );

}, 1000 / 60 );

There is also this other more correct solution but also harder to grasp:

var start = window.animationTime;
var rate = 10; // Hz
var duration = 10; // s
var lastFrameNumber;
function animate() {
  var elapsed = window.animationTime - start;
  if (elapsed < duration) {
    window.requestAnimationFrame(animate);
  }
  var frameNumber = Math.round(elapsed/(1000/rate));
  if (frameNumber == lastFrameNumber)
    return;
  lastFrameNumber = frameNumber;
  // ... update the display based on frameNumber ...
}
window.requestAnimationFrame(animate);

[Jakobud]

I'll have to pick apart that last one to understand it a bit more. Thanks for the reply! They make sense now that I see them!

[Jakobud]

Where are you getting window.animationTime ?

[mrdoob]

you can probably replace that with new Date().getTime().

[Jakobud]

Any opinion on creating a new Date object on every frame?

[mrdoob]

Needs to be done.

[gero3]

Actually that is not completely true,
As normally requestAnimationFrame should give the timestamp as first argument on its callback.

requestAnimationFrame( draw );

var draw = function(timeStamp){

};

Altough I don't know the support of this argument in the different browsers.

[zz85]

i remembered time not passed in safari's requestAnimationFrame. ended using Date.now() if timestamp is not available.

[mrdoob]

As normally requestAnimationFrame should give the timestamp as first argument on its callback.

Oh wow, didn't knew that :)

i remembered time not passed in safari's requestAnimationFrame. ended using Date.now() if timestamp is not available.

No surprise there... :/

[zz85]

btw @mrdoob, any reasons to still use new Date().getTime(); if Date.now() is faster? IE perhaps?

http://jsperf.com/date-now-vs-date-gettime

[alteredq]

Cool, didn't know about Date.now().

Works on IE9 (and current stable Chrome / Firefox / Opera / Safari on Windows 7), maybe we can switch?