Issue while trying to implement FPS Cap feature

[vicrsp]

I am trying to implement an FPS cap feature in my Typescript project, but it is not working the way I expect and I still have no clue if I am doing something wrong. What I want to achieve is to be able to reduce the FPS from 60 to 30, for example.

In my Canvas, the first thing I do is set the invalidateFrameloop property to true, like this:

    <Canvas invalidateFrameloop={true} pixelRatio={window.devicePixelRatio} orthographic concurrent>
      <Box />
      <Render fpsMax={30} />
      <ambientLight />
    </Canvas>

I also created a Render component that is responsible for manually triggering the the rendering of frames, and added to the Canvas. This is the code of the component:

import { useRef, useEffect } from 'react'
import { useThree } from 'react-three-fiber'

interface RenderProps {
  fpsMax: number
}

const Render = ({ fpsMax }: RenderProps): null => {
  const { gl, invalidate } = useThree()
  const maxTicks = Math.round(60 / fpsMax)
  const ticksCounter = useRef(0)

  const step = (): void => {
    // increases the tick counter
    ticksCounter.current += 1
    if (ticksCounter.current > maxTicks) {
      // call invalidate to render a new frame
      invalidate()
      ticksCounter.current = 0
    }
  }

  useEffect(() => {
    gl.setAnimationLoop(step)
    return (): void => {
      gl.setAnimationLoop(null)
    }
  }, [])

  return null
}

There is also the Box component that is just a rotating cube used for debugging, which is this file box.zip.

It appears to be working

but when I profile on Chrome the frames are being generated in an irregular way, there is always one frame taking ~33ms followed by a ~16.6ms one. So, in average I do not get 30 FPS in reality.

Do you guys have any idea what could be wrong, or maybe a better way to implement this feature?

Thanks!

Edit: I fixed the FPS target from 20 to 30.

[drcmda]

you can take a look into renderer.tsx, the first part of that file. if you see an obvious way to make this an official feature submit a pr. r3f has its own loop, and it will run regardless. since you invalidate the canvas (it needs to be set to invalidateFrameloop) you can in theory invalidate step by step and cap it that way. i don't know that the 30ms frame is, what's in it?

[vicrsp]

I got a closer look and here is what I found:

Inside the 33ms frame, at ~16msit calls my Render component animationLoop, in which it basically calls invalidate() on that frame, and it doesn't render anything. This is what is inside the red rectangle:

16ms later, when this frame ends, it will actually render the box, meaning we skipped one frame and reduced the FPS from 60 to 30. This is what is inside the green rectangle:

Although, what I am not understanding is why after this frame, there is always a 16ms one causing another render, see the other green rectangle. Is there something else I need to invalidate?

The same happens if I try, for example to reduce to 10 FPS:

Five frames are invalidated before rendering, but there is always this single 16ms frame in between.

By the way, I'll try to open a PR once we understand what is going on, this is a nice feature to have.