fix(performance): ACT-1219 performance optimisations

src/App/components/Develop.tsx

@@ -18,6 +18,7 @@ export const AvatarDevelop: React.FC = () => (
       effects={{
         ambientOcclusion: true
       }}
+      canvasConfig={{ alpha: false }}
     >
       <StatsGl />
       <EnvironmentModel environment="spaceStation" scale={1} />

src/App/components/Nova.tsx

@@ -76,6 +76,9 @@ export const AvatarNova: FC = () => {
         style={{ background: 'rgb(9,20,26)' }}
         fov={45}
         cameraInitialDistance={CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE}
+        effects={{
+          ambientOcclusion: false
+        }}
       >
         <StatsGl />
       </Avatar>

src/components/Avatar/Avatar.component.tsx

@@ -10,20 +10,21 @@ import {
   EffectConfiguration,
   LightingProps,
   MaterialConfiguration,
-  AnimationsT
+  AnimationsT,
+  CanvasConfiguration
 } from 'src/types';
 import { BaseCanvas } from 'src/components/BaseCanvas';
 import { AnimationModel, HalfBodyModel, StaticModel, PoseModel, MultipleAnimationModel } from 'src/components/Models';
 import { isValidFormat, triggerCallback } from 'src/services';
 import { Dpr } from '@react-three/fiber';
-import { BrightnessContrast, EffectComposer, HueSaturation, SSAO, Vignette } from '@react-three/postprocessing';
+import { BrightnessContrast, EffectComposer, HueSaturation, N8AO, Vignette } from '@react-three/postprocessing';
 import { Provider, useSetAtom } from 'jotai';
 import Capture, { CaptureType } from 'src/components/Capture/Capture.component';
 import { Box, Background } from 'src/components/Background/Box/Box.component';
 import { BackgroundColor } from 'src/components/Background';
 import Loader from 'src/components/Loader';
 import Bloom from 'src/components/Bloom/Bloom.component';
-import { BlendFunction } from 'postprocessing';
+
 import Lights from 'src/components/Lights/Lights.component';
 import { spawnState } from 'src/state/spawnAtom';
 
@@ -162,6 +163,10 @@ export interface AvatarProps extends LightingProps, EnvironmentProps, Omit<BaseM
   onAnimationEnd?: (action: AnimationAction) => void;
   controlsMinDistance?: number;
   controlsMaxDistance?: number;
+  /**
+   * Control properties of the BaseCanvas.
+   */
+  canvasConfig?: CanvasConfiguration;
 }
 
 /**
@@ -209,7 +214,8 @@ const Avatar: FC<AvatarProps> = ({
   onAnimationEnd,
   materialConfig,
   controlsMinDistance,
-  controlsMaxDistance
+  controlsMaxDistance,
+  canvasConfig
 }) => {
   const setSpawnState = useSetAtom(spawnState);
 
@@ -336,6 +342,7 @@ const Avatar: FC<AvatarProps> = ({
       style={style}
       dpr={dpr}
       className={className}
+      canvasConfig={canvasConfig}
     >
       <Environment environment={environment} enablePostProcessing={enablePostProcessing} />
       <CameraControls
@@ -348,28 +355,17 @@ const Avatar: FC<AvatarProps> = ({
       />
       {AvatarModel}
       {children}
-      {shadows && <ContactShadows position={[0, 0, 0]} opacity={2} scale={10} blur={1.0} far={1.0} />}
+      {shadows && (
+        <ContactShadows opacity={effects?.ambientOcclusion ? 1 : 2} scale={4} blur={2} far={1.0} resolution={256} />
+      )}
       {background?.src && <Box {...background} />}
       {capture && <Capture {...capture} />}
       {background?.color && <BackgroundColor color={background.color} />}
       {enablePostProcessing && (
-        <EffectComposer autoClear multisampling={4} enableNormalPass={effects?.ambientOcclusion}>
+        <EffectComposer autoClear enableNormalPass={effects?.ambientOcclusion}>
           <>
             {effects?.ambientOcclusion && (
-              <SSAO
-                blendFunction={BlendFunction.MULTIPLY}
-                distanceScaling={false}
-                radius={0.08}
-                bias={0.01}
-                intensity={3}
-                samples={31}
-                worldDistanceThreshold={24}
-                worldDistanceFalloff={0}
-                worldProximityThreshold={0}
-                worldProximityFalloff={6}
-                fade={0.02}
-                rings={8}
-              />
+              <N8AO quality="performance" aoRadius={5} distanceFalloff={0.25} intensity={3} screenSpaceRadius halfRes />
             )}
             {effects?.bloom && (
               <Bloom
@@ -381,8 +377,8 @@ const Avatar: FC<AvatarProps> = ({
               />
             )}
             {effects?.vignette && <Vignette eskil={false} offset={0.5} darkness={0.5} />}
-            <BrightnessContrast brightness={0.025} contrast={0.25} />
-            <HueSaturation hue={0} saturation={-0.2} />
+            <BrightnessContrast brightness={0.025} contrast={0.1} />
+            <HueSaturation hue={0} saturation={-0.1} />
           </>
         </EffectComposer>
       )}

src/components/BaseCanvas/BaseCanvas.component.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, FC, CSSProperties } from 'react';
 import { Canvas, Dpr } from '@react-three/fiber';
 import { ACESFilmicToneMapping, Vector3 } from 'three';
-import { CameraProps } from 'src/types';
+import { CameraProps, CanvasConfiguration } from 'src/types';
 import { hasWindow } from 'src/services/Client.service';
 import styles from './BaseCanvas.module.scss';
 
@@ -12,6 +12,7 @@ interface BaseCanvasProps extends CameraProps {
   dpr?: Dpr;
   className?: string;
   enablePostProcessing?: boolean;
+  canvasConfig?: CanvasConfiguration;
 }
 
 const BASE_DPR = hasWindow ? window.devicePixelRatio : 1;
@@ -22,24 +23,25 @@ export const BaseCanvas: FC<BaseCanvasProps> = ({
   fov = 50,
   position = new Vector3(0, 0, 5),
   style,
-  dpr = [BASE_DPR * 0.5, 2],
-  className
+  dpr = [BASE_DPR * 0.5, 1],
+  className,
+  canvasConfig = { alpha: true }
 }) => (
   <Canvas
     key={fov}
     className={`${styles['base-canvas']} ${className ?? ''}`}
     shadows="soft"
     gl={{
       preserveDrawingBuffer: true,
-      alpha: true,
+      alpha: canvasConfig.alpha,
       toneMapping: ACESFilmicToneMapping,
       toneMappingExposure: 1.8
     }}
     flat={enablePostProcessing}
     dpr={dpr}
     camera={{ fov, position }}
     resize={{ scroll: true, debounce: { scroll: 50, resize: 0 } }}
-    style={{ ...style, background: 'transparent' }}
+    style={{ ...style, background: canvasConfig.alpha ? 'transparent' : style?.background }}
   >
     {children}
   </Canvas>

src/components/Lights/Lights.component.tsx

@@ -84,7 +84,6 @@ const Lights: FC<LightingProps> = (lightingProps) => {
         angle={LIGHT_CONFIG.keyLightAngle}
         color={keyLightColor}
         intensity={keyLightIntensity}
-        castShadow
       />
       {/* Lift light that creates soft light on body and shoes. */}
       <spotLight
@@ -93,7 +92,6 @@ const Lights: FC<LightingProps> = (lightingProps) => {
         angle={LIGHT_CONFIG.keyLightAngle}
         color={keyLightColor}
         intensity={keyLightIntensity * 0.25}
-        castShadow
       />
       {/* Silhouette light on arms and legs. */}
       <spotLight
@@ -102,7 +100,6 @@ const Lights: FC<LightingProps> = (lightingProps) => {
         angle={LIGHT_CONFIG.silhouetteLightAngle}
         color={keyLightColor}
         intensity={keyLightIntensity * 0.25}
-        castShadow
       />
     </group>
   );

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

@@ -67,9 +67,6 @@ export const Model: FC<ModelProps> = ({
 
     if ((node as Mesh).isMesh) {
       node.castShadow = true;
-    }
-
-    if (node.type === 'SkinnedMesh') {
       node.receiveShadow = true;
     }
   });

src/components/Shadow/Shadow.component.tsx

@@ -9,4 +9,4 @@ const Shadow: FC = () => (
   </group>
 );
 
-export default Shadow;
+export default Shadow;

src/types/index.ts

@@ -203,3 +203,7 @@ export type AnimationsT = Record<
     fadeTime?: number;
   }
 >;
+
+export type CanvasConfiguration = {
+  alpha?: boolean
+}