New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useRenderLoop
: render after updates
#607
Comments
Thanks for opening this @andretchen0 is really insightful, I noticed that issue and didn't understand why it was happening but now I understand 🤔 Due to the amount of issues that useRenderLoop is giving lately I'm considering refactoring it to move away from the useRaFn and go for a more vanilla approach to ensure we have a unique loop per instance. Any suggestions? |
I don't think it'd be hard to roll our own. The only part I haven't implemented in other projects is unbinding callbacks transparently when their Vue component is unmounted. What timeline are you looking at? I've been holding off on discussions and eventual implementations of big changes until |
Description
Problem
Updates/renders share the same unordered-from-the-components-perspective callback "slot", leading to out-of-sync visuals.
Example
Here's the Cientos' playground demo for
MeshReflectionMaterial
. Notice the extra "jumps" in the reflection:Screen.Recording.2024-03-29.at.15.12.31.mov
Here are two adjacent frames. Notice that the "real" elements haven't moved, but the reflection "jumps" from one frame to the next:
Why it happens
The "jumps" occur because the updates/renders are all firing in
onLoop
, but out-of-order from the perspective of the FBO reflection. So for a file like this ...... a single "tick" of
onLoop
looks like this:With this ordering, if
DemoComponent
renders the scene to an FBO, and is then rendered to the screen, it'll always be 1 frame behindDemo
.Suggested solution
We could follow R3F's lead here:
onLoop
** https://docs.pmnd.rs/react-three-fiber/api/hooks#taking-over-the-render-loop
** https://docs.pmnd.rs/react-three-fiber/api/hooks#negative-indices
For example, R3F's
OrbitControls
uses a negative index:https://github.com/pmndrs/drei/blob/c147c2b1064bc4b457150f995bf714c2e43cf56f/src/core/OrbitControls.tsx#L58C1-L61C13
If I understand correctly, that means that the OrbitControls camera is updated before the rest of the scene, which is important in the case of FBOs like in the reflection material.
Alternative
As a simpler – though less flexible – solution, we could add a few callbacks:
useRenderLoop().onBeforeRender()
– for FBOsuseRenderLoop().onRender()
– for actually rendering to the screenAdditional context
No response
Validations
The text was updated successfully, but these errors were encountered: