fix(memory): ACT-1185 Visage memory optimisations (#104)

* fix(memory): ACT-1185 dispose gltf on fallback

* fix(memory): ACT-1185 dispose after build

* refactor(memory): ACT-1185 memory leak rework

* refactor(memory): ACT-1185 gltf loader refactor

src/App/components/Nova.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StatsGl } from '@react-three/drei';
 
 import { Avatar, CAMERA } from 'src/components/Avatar';
@@ -8,25 +8,26 @@ import { SettingsPanel } from './SettingsPanel';
 const idleUrl = 'https://readyplayerme-assets.s3.amazonaws.com/animations/nova-male-idle.glb';
 const victoryUrl = 'https://readyplayerme-assets.s3.amazonaws.com/animations/nova-victory-03.glb';
 
-const animations: Record<string, string> = {
-  idle: idleUrl,
-  victory: victoryUrl
-};
-
-const modelOneUrl =
-  'https://api.readyplayer.dev/v3/avatars/66fa76b8fdea89a183c01341.glb?meshCompression=true&textureQuality=low&meshLOD=1&morphTargetsGroup=Basic expressions';
-const modelTwoUrl =
-  'https://api.readyplayer.dev/v3/avatars/66fa77cbfdea89a183c0134d.glb?meshCompression=true&textureQuality=low&meshLOD=1&morphTargetsGroup=Basic expressions';
-
 const models: Record<string, string> = {
-  one: modelOneUrl,
-  two: modelTwoUrl
+  one: 'https://avatars.readyplayer.me/673dc84d6874800e1db46095.glb?meshCompression=true&textureQuality=low&meshLOD=1&morphTargetsGroup=Basic expressions',
+  two: 'https://avatars.readyplayer.me/673f109553f9ed9312fafe70.glb?meshCompression=true&textureQuality=low&meshLOD=1&morphTargetsGroup=Basic expressions',
+  three:
+    'https://avatars.readyplayer.me/6745ca78c6e2d65e7b99d8e1.glb?meshCompression=true&textureQuality=low&meshLOD=1&morphTargetsGroup=Basic expressions',
+  four: 'https://avatars.readyplayer.me/6745df2bd7ae3ba1d340d019.glb?meshCompression=true&textureQuality=low&meshLOD=1&morphTargetsGroup=Basic expressions'
 };
 
 export const AvatarNova: React.FC = () => {
   const [activeAnimation, setActiveAnimation] = React.useState<string>('idle');
   const [modelSrc, setModelSrc] = React.useState<string>(models.one);
 
+  const animations = useMemo(
+    () => ({
+      idle: idleUrl,
+      victory: victoryUrl
+    }),
+    []
+  );
+
   return (
     <>
       <SettingsPanel>
@@ -42,6 +43,12 @@ export const AvatarNova: React.FC = () => {
         <button type="button" onClick={() => setModelSrc(models.two)}>
           Set Model2
         </button>
+        <button type="button" onClick={() => setModelSrc(models.three)}>
+          Set Model3
+        </button>
+        <button type="button" onClick={() => setModelSrc(models.four)}>
+          Set Model4
+        </button>
       </SettingsPanel>
       <Avatar
         modelSrc={modelSrc}

src/components/Models/Model/Model.component.tsx

@@ -1,7 +1,7 @@
 import React, { FC, Ref, useEffect, useState, useCallback, useMemo } from 'react';
 import { Group, Mesh } from 'three';
 import { normaliseMaterialsConfig, triggerCallback, usePersistantRotation } from 'src/services';
-import { useGraph, useThree } from '@react-three/fiber';
+import { useThree } from '@react-three/fiber';
 import { hasWindow } from 'src/services/Client.service';
 import { BaseModelProps } from 'src/types';
 import { Spawn } from '../../Spawn/Spawn';
@@ -24,7 +24,6 @@ export const Model: FC<ModelProps> = ({
   bloom,
   materialConfig
 }) => {
-  const { materials } = useGraph(scene);
   const { gl } = useThree();
   const [isTouching, setIsTouching] = useState(false);
   const [touchEvent, setTouchEvent] = useState<TouchEvent | null>(null);
@@ -61,7 +60,8 @@ export const Model: FC<ModelProps> = ({
     [isTouching, touchEvent, scene]
   );
 
-  normaliseMaterialsConfig(materials, bloom, materialConfig);
+  normaliseMaterialsConfig(scene, bloom, materialConfig);
+
   scene.traverse((object) => {
     const node = object;
 
@@ -74,7 +74,7 @@ export const Model: FC<ModelProps> = ({
     }
   });
 
-  useEffect(() => triggerCallback(onLoaded), [scene, materials, onLoaded]);
+  useEffect(() => triggerCallback(onLoaded), [scene, onLoaded]);
 
   useEffect(() => {
     gl.domElement.addEventListener('mousedown', setTouchingOn);

src/components/Models/MultipleAnimationModel/MultipleAnimationModel.component.tsx

@@ -1,10 +1,10 @@
 import React, { FC, useEffect, useRef } from 'react';
-import { useFrame, useGraph } from '@react-three/fiber';
+import { useFrame } from '@react-three/fiber';
 import { AnimationAction, AnimationMixer } from 'three';
 
 import { Model } from 'src/components/Models/Model';
 import { AnimationConfiguration, BaseModelProps } from 'src/types';
-import { useEmotion, useFallback, useGltfCachedLoader, useIdleExpression } from 'src/services';
+import { useEmotion, useFallbackScene, useGltfCachedLoader, useIdleExpression } from 'src/services';
 import { Emotion } from 'src/components/Avatar/Avatar.component';
 import { useAnimations } from 'src/services/Animation.service';
 
@@ -35,7 +35,6 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
 
   const loadedAnimations = useAnimations(animations);
   const { scene } = useGltfCachedLoader(modelSrc);
-  const { nodes } = useGraph(scene);
 
   useEffect(() => {
     if (scene) {
@@ -55,6 +54,7 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
     return () => {
       mixerRef.current?.stopAllAction();
       mixerRef.current?.uncacheRoot(scene);
+      mixerRef.current = null;
     };
   }, [scene]);
 
@@ -83,9 +83,9 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
     animationTimeRef.current = activeActionRef.current?.time || 0;
   });
 
-  useEmotion(nodes, emotion);
-  useIdleExpression('blink', nodes);
-  useFallback(nodes, setModelFallback);
+  useEmotion(scene, emotion);
+  useIdleExpression('blink', scene);
+  useFallbackScene(scene, setModelFallback);
 
   return <Model scene={scene} scale={scale} onLoaded={onLoaded} bloom={bloom} materialConfig={materialConfig} />;
 };

src/components/Models/MultipleAnimationModel/MultipleAnimationModel.container.tsx

@@ -1,4 +1,5 @@
 import React, { FC, Suspense, useState } from 'react';
+
 import { MultipleAnimationModel, MultipleAnimationModelProps } from './MultipleAnimationModel.component';
 
 /**