Not hitting 60fps while rendering an "idling" onFrame loop

[jhewt]

While taking a look at the Trisolaris example, if I'm not moving the camera the scene does not render at 60fps despite Chrome's debugger displaying 59.4 fps.

What I've noticed is that if there is not interaction like moving the camera, each frame takes 33ms (like 30-ish fps) but once I start moving the camera it does look and feel like 60fps.

This can clearly be seen here, I start moving the camera at the 1750ms mark:

Here you can see where I started moving my mouse to update the camera position, once this happens each frame takes 16ms. My mouse driver is configured to pull data at 1000 Hz, so probably this is updating the camera position way faster resulting in onFrame actually firing every 16.7ms

[jhewt]

Here's a rough test, click the button at the bottom to switch from interval update vs onFrame update: https://stackblitz.com/edit/sveltekit-mkngaz?file=src/routes/index.svelte

[jhewt]

I'll write this before I totally forget at the end of the day.

I've noticed that requestAnimationFrame seems to be called twice on each frame (16.7ms * 2 = 33.4ms, like we see above), once in svelte-cubed's loop and apparently a second time inside threejs renderer. Probably something that can be fixed by passing a custom loop function to the setAnimationLoop method at WebGLRenderer. By default it is using requestAnimationFrame, and calling render() call the loop once with that request frame call adding a total of 2 calls.

[DefinitelyMaybe]

now that's something to look into and double check. Good stuff thus far.