javascripthtmlcanvasthree.jsrequestanimationframe

Limiting framerate in Three.js to increase performance, requestAnimationFrame?


I was thinking that for some projects I do 60fps is not totally needed. I figured I could have more objects and things that ran at 30fps if I could get it to run smoothly at that framerate. I figured if I edited the requestAnimationFrame shim inside of three.js I could limit it to 30 that way. But I was wondering if there was a better way to do this using three.js itself as provided. Also, will this give me the kind of performance increase I am thinking. Will I be able to render twice as many objects at 30fps as I will at 60? I know the difference between running things at 30 and 60, but will I be able to get it to run at a smooth constant 30fps?

I generally use the WebGLRenderer, and fall back to Canvas if needed except for projects that are targeting one specifically, and typically those are webgl shader projects.


Solution

  • What about something like this:

    function animate() {
    
        setTimeout( function() {
    
            requestAnimationFrame( animate );
    
        }, 1000 / 30 );
    
        renderer.render();
    
    }