Is it possible to set a fixed fps?

Questions
,
1

I was hopping that one way to make my animation smoother would be forcing 25fps.

So instead of the typical
requestAnimationFrame(animate)

I have something like

    setTimeout( function() {
        this.render(); //this.renderer.requestAnimationFrame();
    }.bind(this), 1000 / 25 );   // 1000/10=10 fps 1000 / 30 = 30fps
     
     this.renderer.render( this.scene, this.camera );

Do you think that could be an issue? Is there a better way to manually set fps?

What would be the best way to avoid fps fluctuations?

My animation includes a sea with waves, skydome with azimuth, lighting, and clouds/rain which are not always animated or visible. It is normally smooth, but from time to time it blinks (i.e., fps seems to drop for 0.5seconds and comes back to normal).

2

Using setTimeout is unlikely to make the animation any smoother, it’s best to use requestAnimationFrame. If the framerate slows or stops for some amount of time, then presumably something is blocking the thread, and no callback can run. Two common causes of that are (a) garbage collection, and (b) the first time a texture renders and uploads to the GPU. Or perhaps rendering each frame is taking longer than 1/60th of a second. It should be possible to get more information on what’s happening by running a profile in your browser’s developer tools.

1 Like
3

Thanks @donmccurdy , I never ran a profile before. Where would you suggest I search for a nice example or docu?

BR

4

This guide is probably a good start: Analyze runtime performance - Chrome Developers … you don’t necessarily need to do the part about simulating a mobile CPU.