You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 ...
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 FBOs
useRenderLoop().onRender() – for actually rendering to the screen
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.
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: