Is there a way to cap frame rate?

[Code47X]

I'm building a scene using react-three-fiber and the orbit controls from drei. The rotation speed seems to be tied to the framerate. When I view the scene on a 144hz monitor the orbit speed is significantly faster than when viewed on a standard 60hz monitor. I was wondering if there is an easy way to implement a frame rate cap with react-three-fiber so the orbit speed is consistent between monitors.

[hornegg]

I've got a FrameLimiter React component, but I don't know how advisable something like this is

const FrameLimiter = (props) => {
  const [clock] = React.useState(new THREE.Clock());

  useFrame((state) => {
    state.ready = false;
    const timeUntilNextFrame = (1000 / props.fps) - clock.getDelta();

    setTimeout(() => {
      state.ready = true;
      state.invalidate();
    }, Math.max(0, timeUntilNextFrame));

  });

  return <></>;
};

[Code47X]

Ah nice, that's basically what I was looking for. I think the ideal solution is to just make sure that framerate-dependent animations are using clock.getDelta(). But since that's not possible without rewriting the <OrbitControls /> this FrameLimiter should do the trick.

Not sure if there are any side effects to using setTimeout() in the threejs render loop, but it seems to work as expected. Thanks.

[iuriiiurevich]

I've got a FrameLimiter React component, but I don't know how advisable something like this is

If the frameloop is 'always' or something else calls invalidate(), this component will not affect fps properly.

But this one will:

function FPSLimiter({ fps }) {
    const set = useThree((state) => state.set);
    const get = useThree((state) => state.get);
    const advance = useThree((state) => state.advance);
    const frameloop = useThree((state) => state.frameloop);

    useLayoutEffect(() => {
        const initFrameloop = get().frameloop;

        return () => {
            set({ frameloop: initFrameloop });
        };
    }, []);

    useFrame((state) => {
        if (state.get().blocked) return;
        state.set({ blocked: true });

        setTimeout(() => {
            state.set({ blocked: false });

            state.advance();
        }, Math.max(0, 1000 / fps - state.clock.getDelta()));
    });

    useEffect(() => {
        if (frameloop !== 'never') {
            set({ frameloop: 'never' });
            advance();
        }
    }, [frameloop]);

    return null;
}

Although this code also has its weak point – when something else calls advance().

[nestorchura2019]

react-three-fiber/drei have stats
https://codesandbox.io/s/r3f-drei-stats-8p4ph

[Synaptickz]

I was looking for a frame limiting solution & i came to this post. setTimeout was not working properly for me, so i implemented it using requestAnimationFrame to trigger a frame update.

function FrameLimiter({limit = 60}) {
    const {invalidate, clock, advance} = useThree();
    useEffect(() => {
        let delta = 0;
        const interval = 1/limit;
        const update = () => {
            requestAnimationFrame(update);
            delta += clock.getDelta();

            if (delta > interval) {
                invalidate();
                delta = delta % interval;
            }
        }

        update();
    }, [])

    return null;
}

[symbiosdotwiki]

So I am also using post processing in my project and a few of their effects force-invalidate every frame
pmndrs/react-postprocessing#207

Would be great if R3F had a default frame limit feature that took into account invalidation throughout the app while still forcing a lower frame rate, esp useful for mobile devices

[drcmda]

imo calling state.clock.getDelta() is a problem because delta will reset, so all your useFrames relying on delta are having bad luck because they're getting served 0. if you set up a new clock no problem, but resetting state clock will have side effects.

function FrameLimiter({ fps = 60 }) {
  const { advance, set, frameloop: initFrameloop } = useThree()
  useLayoutEffect(() => {
    let elapsed = 0
    let then = 0
    let raf = null
    const interval = 1000 / fps
    function tick(t) {
      raf = requestAnimationFrame(tick)
      elapsed = t - then
      if (elapsed > interval) {
        advance()
        then = t - (elapsed % interval)
      }
    }
    // Set frameloop to never, it will shut down the default render loop
    set({ frameloop: 'never' })
    // Kick off custom render loop
    raf = requestAnimationFrame(tick)
    // Restore initial setting
    return () => {
      cancelAnimationFrame(raf)
      set({ frameloop: initFrameloop })
    }
  }, [fps])
}

https://codesandbox.io/s/vigilant-parm-2c65j3

[SGolab]

This code disables CameraControls animations. Do you have any idea how to solve this?

[davcri]

Thanks @drcmda for the snippet.
It works fine for me but I need to set <Canvas frameloop={'never'} /> explicitly.
I noticed that if the <Canvas /> component re-renders, the FrameLimiter stops working correctly.
MRP here: https://codesandbox.io/p/sandbox/sad-dream-9whm2w?file=%2Fsrc%2FApp.js%3A55%2C38

[ebeaufay]

Overriding the renderer's render function to skip rendering when not enough time has passed.

For multi-pass, the assumption is rendering to screen is the last render operation per-frame which I think is pretty much a sure thing.

The frequency at which useFrame is called is unaffected so that's either a good thing or not. Animations would need their own logic to match the frame-rate.

import { useEffect, useRef } from 'react';
import * as THREE from 'three';

/**
 * Overrides the renderer to only render at a limited frame rate 
 */
export const FrameLimiter = ({ fps, gl, scene, camera, invalidate }: { fps: number; gl: THREE.WebGLRenderer; scene: THREE.Scene; camera: THREE.Camera; invalidate: () => void; }) => {
    const time = useRef(performance.now());
    const renderedToScreen = useRef<Boolean>(false);

    useEffect(() => {
        const frameTime = 1000 / fps;
        const originalRender = gl.render.bind(gl);


        gl.render = (scene: THREE.Scene, camera: THREE.Camera) => {
            
            // logic to skip frames unless sufficient time has passed.
            // in order to handle multipass pipelines, time is only updated on the first render after a render to screen
            if (performance.now() - time.current >= frameTime) {
                if (renderedToScreen.current) {
                    time.current = performance.now();
                    renderedToScreen.current = false
                }
                if(gl.getRenderTarget() === null){
                    renderedToScreen.current = true;
                }
                originalRender(scene, camera);
            } else {
                invalidate();
            }
        };

        return () => {
            gl.render = originalRender;
        };
    }, [gl, scene, camera, fps, invalidate]);

    return null;
};

and in the main component something like this:

import {  useState, } from 'react';
import * as THREE from 'three';
import { FrameLimiter } from './FrameLimiter';

function App(){
    const [context, setContext] = useState<{
        gl: THREE.WebGLRenderer;
        scene: THREE.Scene;
        camera: THREE.Camera;
        invalidate: () => void;
    } | null>(null);
    
    return (
    <div className="App">
      <Canvas
        camera={{ position: [-50, 20, -0], fov: 75, near: 0.1, far: 10000 }}
        onCreated={
            ({ gl, scene, camera, invalidate }) => setContext({ gl, scene, camera, invalidate });
        } >
      </Canvas>
      {context && (
        <FrameLimiter
          fps={30}
          gl={context.gl}
          scene={context.scene}
          camera={context.camera}
          invalidate={context.invalidate}
        />
      )}
    </div>
  );
}