Replies: 6 comments 4 replies
-
I've got a FrameLimiter React component, but I don't know how advisable something like this is
|
Beta Was this translation helpful? Give feedback.
-
react-three-fiber/drei have stats |
Beta Was this translation helpful? Give feedback.
-
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.
|
Beta Was this translation helpful? Give feedback.
-
So I am also using post processing in my project and a few of their effects force-invalidate every frame 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 |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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.
and in the main component something like this:
|
Beta Was this translation helpful? Give feedback.
-
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.
Beta Was this translation helpful? Give feedback.
All reactions