Best practices to save performance, pause rendering when nothing happens?

[AlexanderProd]

Hi everyone,

I'm wondering what the best practices are to save performance when using r3f?

For example, can I pause the rendering of my canvas when nothing happens on the screen, like when an animation depends on scrolling?

Greetings
Alexander

[CodyJasonBennett]

You can render on demand by setting frameloop="demand". This will call invalidate to request a new frame when the scene graph has changed. Libraries like Drei and react-spring will call this for you.

Here are some guides on best practices and how to combine them with the new regress API:

• https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance
• https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls

As for pausing when the canvas isn't in view, you can use the observer API to know when the canvas is on screen:

• https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

We do this on the website to handle loading states (see component) but you can unmount the canvas or change the frameloop in the same way.

[AlexanderProd]

When using frameloop="demand" how can I make the scene graph listen to scroll events?

[CodyJasonBennett]

If you're changing the props of an element in three, this should happen automatically. Outside of that, you can call invalidate(), either by importing it or accessing it from three state.

[AlexanderProd]

When I use frameloop="demand" with this example (fork of the Camera Scroll example where the wobbling around of the objects has been removed) it doesn't work anymore either, it only works with frameloop="always". What changes would need to be made to make it work with "demand"?

[CodyJasonBennett]

You'd call invalidate in your scroll handler in Overlay:

• https://codesandbox.io/s/camera-scroll-forked-tkh51?file=/src/Overlay.js