enable rendering even when tab is out of focus

[ashleymvanduzer]

Hi everyone!

is there a prop to force rendering even when the tab is out of focus? or maybe there is a way if using a custom renderer?

[drcmda]

render loops should normally use requestAnimationFrame which the browser can schedule and interupt. your components could still rely on time and deltas, it shouldn't make any difference if the tab is active or not. not sure why you'd want that, all it does is waste energy, but here's something that will more or less work.

function Render() {
  const { gl, scene, came, invalidate, clock, internal } = useThree()
  useEffect(() => {
    const interval = setInterval(() => {
      const delta = state.clock.getDelta()      
      // Call subscribers (useFrame)
      const subscribers = internal.subscribers
      for (i = 0; i < subscribers.length; i++) {
        subscription = subscribers[i]
        subscription.ref.current(subscription.store.getState(), delta)
      }
      // Render out
      gl.render(scene, camera)
    }, 1000 / 60)
    return () => clearInterval(interval)
  }, [gl, scene, camera, clock, internal])
}

<Canvas frameloop="never">
  <Render />

[ashleymvanduzer]

Thanks as always for the insight. The project I am working on uses some polling to track things like image uploads for example. This polling is used with a renderer (a separate instance of the scene for taking snapshots), and we seem to have a problem where the renderer is no longer running automatically, and it may be due to the scene not rendering when the tab is out of focus.

[janrembold]

Hey Ashley,

when your tab gets out of focus you can't rely on any calculations in there anymore. Timers are getting completely out of control in this state. I usually see my app in a "Possible Data Loss" state when the document.visibilityState changes to hidden. I use this simple timer alarm to detect any anomalies while loosing the tab focus:

const timeout = 5000;
const tolerance = 500;

let lastTime: number;
let interval: number;
let alarm = false;

const visibilitychangeCallback = () => {
  if (document.visibilityState === 'visible') {
    window.clearInterval(interval);
    alarm && console.log('possible data loss');
  }

  if (document.visibilityState === 'hidden') {
    lastTime = Date.now();

    interval = window.setInterval(() => {
      const currentTime = Date.now();
      if (currentTime > lastTime + timeout + tolerance) {
        window.clearInterval(interval);
        console.log('now we are in trouble');
        alarm = true;
      }
      lastTime = currentTime;
    }, timeout);
  }
};

document.addEventListener('visibilitychange', visibilitychangeCallback);

[ashleymvanduzer]

@janrembold that's really interesting. thanks for sharing!

[ashleymvanduzer]

render loops should normally use requestAnimationFrame which the browser can schedule and interupt. your components could still rely on time and deltas, it shouldn't make any difference if the tab is active or not. not sure why you'd want that, all it does is waste energy, but here's something that will more or less work.

function Render() {
  const { gl, scene, came, invalidate, clock, internal } = useThree()
  useEffect(() => {
    const interval = setInterval(() => {
      const delta = state.clock.getDelta()      
      // Call subscribers (useFrame)
      const subscribers = internal.subscribers
      for (i = 0; i < subscribers.length; i++) {
        subscription = subscribers[i]
        subscription.ref.current(subscription.store.getState(), delta)
      }
      // Render out
      gl.render(scene, camera)
    }, 1000 / 60)
    return () => clearInterval(interval)
  }, [gl, scene, camera, clock, internal])
}

<Canvas frameloop="never">
  <Render />

a few questions:
subscription.ref.current(subscription.store.getState(), delta) when I try this line, subscription doesn't seem to have a property of store. looks like zustand kind of. does r3f use zustand to manage internal state, and is that what this is referring to?
is that useEffect running in the Render function basically just what useFrame does?