Pause rendering whilst out of frame

[marklundin]

This may have already been discussed, but it would a nice feature to be able to pause/defer the render whilst the canvas is outside of view. I understand there may be a use case for keeping useFrame running, due to physics etc, but it would be great to stop issuing draw commands whilst the canvas is out of frame. Not sure if this fits in well with the overall architecture, but just a thought

[drcmda]

@marklundin you can do that:

import { useInView } from 'react-intersection-observer'

const DisableRender = () => useFrame(() => null, 1000)

function App() {
  const { ref, inView } = useInView()
  return (
    <div ref={ref} className="canvasContainer">
      <Canvas>
        {!inView && <DisableRender />}

to detect if the canvas is out is probably a user-land thing, this would be too overarching as a r3f feature imo. just throw an intersection observer around the canvas and you basically have it.

[marklundin]

That's perfect, and yes you're right, they're separate concerns. Do you know how this relates to the invalidate function? That triggers a render correct?

[Irev-Dev]

Chiming in just to add if you already have react-use installed and don't want to install a new dependancy, this (albeit more verbose) solution will also work.

import { useIntersection } from 'react-use'
const DisableRender = () => useFrame(() => null, 1000)

const useInView = () => {
    const ref = useRef(null)
    const threshold = 0.05
    const intersection = useIntersection(ref, {
        root: null,
        rootMargin: '0px',
        threshold,
    })

    return {
        ref,
        inView: intersection && intersection.intersectionRatio > threshold,
    }
}

function App() {
  const { ref, inView } = useInView()
  return (
    <div ref={ref} className="canvasContainer">
      <Canvas>
        {!inView && <DisableRender />}

[mhmdjaw]

@drcmda is there a way to do this with offscreen canvas by any chance? it doesn't seem to work for some reason. it only works with normal canvas.

[drcmda]

yes, invalidateFrameloop disables the automatic loop, there's none. you need to trigger each frame manually via invalidate(). the code above lets the loop stand and takes over rendering with a null function if the camvas is out. the loop is harmless, and in theory this would also be safe for physics if you have them.

[janniks]

Is settings useFrame to null (as in the proposed solution by @marklundin) as efficient as enabling invalidateFrameLoop.

i.e. would this also work?

import { useInView } from 'react-intersection-observer'

function App() {
  const { ref, inView } = useInView()
  return (
    <div ref={ref} className="canvasContainer">
      <Canvas invalidateFrameloop={!inView}>

[drcmda]

i guess its the same. invalidate is great if youre only dealing with prop changes but as soon as you have render-loop logic i wouldn't recommend it. useFrame(() => null, 1) keeps the loop running but just won't render anything. but it will still run things like raycasting on mousemove - but that's not your issue anyway if the canvas is out of view.

[janniks]

Thanks for the quick response 🙏

[AlexanderProd]

@drcmda Is invalidateFrameloop still a valid prop of Canvas in the latest version, because it's not getting suggested by VSCode autocomplete?

[oallouch]

Changing Canvas' frameloop doesn't seem to change anything. Only the first passed value matters.

[oallouch]

If someone also needs it. Here's what I used :

import { forwardRef, useEffect, useRef } from 'react';
import { Canvas as FiberCanvas, useThree, useFrame } from '@react-three/fiber';
import mergeRefs from 'react-merge-refs';
import { useIntersection } from 'react-use';

const RenderTrigger = ({active}) => {
	const { invalidate } = useThree();
	const currentActive = useRef();
	currentActive.current = active;
	useEffect(() => {
		if (active) {
			const render = () => {
				if (currentActive.current) {
					invalidate();
					requestAnimationFrame(render);
				}
			}
			render();
		}
	}, [active]);
	return null;
}

/**
 * Calls 'invalidate' at each frame when the canvas is visible.
 * Note that useSpring or scroll also calls invalidate.
 * @param props.forceActive sometimes, we want to disable rendering even if the canvas is visible
 */
const Canvas = forwardRef(({children, forceActive, ...otherProps}, ref) => {
	const canvasRef = useRef(null);
	const intersection = useIntersection(canvasRef, { threshold: 0 });
	return (
		<FiberCanvas
			frameloop="demand"
			ref={mergeRefs([canvasRef, ref])}
			{...otherProps}
		>
			<RenderTrigger active={forceActive != null ? forceActive : !!intersection?.isIntersecting}/>
			{children}
		</FiberCanvas>
	)
});

export default Canvas;

[drcmda]

@oallouch im thinking, why dont we make intersection observing a default. it could test if there is an observer (node probably doesnt have one so it has to be opt in), and if there is it should shut down the loop if the canvas is invisible. that probably wouldn't even add that much code.

[valentincognito]

In case someone come accross this in 2023, for me

const DisableRender = () => useFrame(() => null, 1000)

didn't work, so I ended up switching between frameloop always and never

const { ref, inView } = useInView()
  return (
    <div ref={ref} className="glContainer">
       <Canvas frameloop={inView ? 'always' : 'never'} />

[tresabhi]

This is the way. And if you trying to squeeze even more performance, try "demand" frame loop instead of "always".