feat: never render off screen

src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx

@@ -17,6 +17,7 @@ import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawL
 import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
 import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
+import useOnScreen from '../../../../../../hooks/useOnScreen';
 import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
 import * as Duel from '../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemeral';
@@ -45,6 +46,9 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
       tankModelDefinition.turrets[protagonist.turret.id];
     const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
     const display = TankopediaPersistent.use((state) => state.display);
+    const onScreen = useOnScreen(canvas);
+
+    console.log(onScreen);
 
     useImperativeHandle(ref, () => canvas.current!, []);
 
@@ -155,7 +159,7 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
 
     return (
       <Canvas
-        frameloop="demand"
+        frameloop={onScreen ? 'demand' : 'never'}
         gl={{
           clippingPlanes: Object.freeze([]),
           localClippingEnabled: true,

src/hooks/useOnScreen.ts

@@ -0,0 +1,26 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+
+/**
+ * Thanks GuCier!
+ *
+ * https://stackoverflow.com/a/65008608/12294756
+ */
+export default function useOnScreen(ref: RefObject<HTMLElement>) {
+  const [isIntersecting, setIntersecting] = useState(false);
+  const observer = useRef<IntersectionObserver>();
+
+  useEffect(() => {
+    observer.current = new IntersectionObserver(([entry]) =>
+      setIntersecting(entry.isIntersecting),
+    );
+  }, [ref]);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    observer.current?.observe(ref.current);
+    return () => observer.current?.disconnect();
+  }, [ref]);
+
+  return isIntersecting;
+}