fix(performance): ACT-1219 shadow and ao tweaks

readyplayerme · Dec 18, 2024 · 1db4087 · 1db4087
1 parent 489c1d9
commit 1db4087
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 52 deletions.
diff --git a/src/App/components/Nova.tsx b/src/App/components/Nova.tsx
@@ -74,6 +74,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>

diff --git a/src/components/Avatar/Avatar.component.tsx b/src/components/Avatar/Avatar.component.tsx
@@ -16,14 +16,14 @@ 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 { 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';
 
@@ -330,28 +330,15 @@ const Avatar: FC<AvatarProps> = ({
       />
       {AvatarModel}
       {children}
-      {shadows && <ContactShadows position={[0, 0, 0]} opacity={2} scale={10} blur={1.0} far={1.0} />}
+      {shadows && <ContactShadows position={[0, 0, 0]} opacity={2} scale={10} blur={1.0} 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
@@ -363,7 +350,7 @@ 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} />
           </>
         </EffectComposer>

diff --git a/src/components/Background/Box/Box.component.tsx b/src/components/Background/Box/Box.component.tsx
@@ -10,7 +10,7 @@ export const Box: FC<Background> = ({ src = '', ...baseProps }) => {
   const texture = useLoader(TextureLoader, src);
 
   return (
-    <mesh ref={ref} castShadow receiveShadow {...baseProps}>
+    <mesh ref={ref} {...baseProps}>
       <boxGeometry />
       <meshPhysicalMaterial map={texture} />
     </mesh>

diff --git a/src/components/BaseCanvas/BaseCanvas.component.tsx b/src/components/BaseCanvas/BaseCanvas.component.tsx
@@ -22,18 +22,17 @@ export const BaseCanvas: FC<BaseCanvasProps> = ({
   fov = 50,
   position = new Vector3(0, 0, 5),
   style,
-  dpr = [BASE_DPR * 0.5, 2],
+  dpr = [BASE_DPR * 0.5, BASE_DPR * 0.75],
   className
 }) => (
   <Canvas
     key={fov}
     className={`${styles['base-canvas']} ${className ?? ''}`}
-    shadows="soft"
     gl={{
       preserveDrawingBuffer: true,
       alpha: true,
       toneMapping: ACESFilmicToneMapping,
-      toneMappingExposure: 1.8
+      toneMappingExposure: 1.8,
     }}
     flat={enablePostProcessing}
     dpr={dpr}

diff --git a/src/components/Exhibit/Exhibit.component.tsx b/src/components/Exhibit/Exhibit.component.tsx
@@ -90,7 +90,7 @@ export const Exhibit: FC<ExhibitProps> = ({
     <BaseCanvas position={position} style={style} className={className}>
       <Suspense fallback={null}>
         <ambientLight intensity={0.5} />
-        <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} shadow-mapSize={[512, 512]} castShadow />
+        <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
         <PresentationControls
           global
           config={{ mass: 2, tension: 500 }}

diff --git a/src/components/Lights/Lights.component.tsx b/src/components/Lights/Lights.component.tsx
@@ -66,7 +66,6 @@ const Lights: FC<LightingProps> = (lightingProps) => {
         angle={LIGHT_CONFIG.fillLightAngle}
         color={fillLightColor}
         intensity={fillLightIntensity}
-        castShadow
       />
       {/* Back light that by default creates light warm rim on the left face side. */}
       <spotLight
@@ -75,7 +74,6 @@ const Lights: FC<LightingProps> = (lightingProps) => {
         angle={LIGHT_CONFIG.backLightAngle}
         color={backLightColor}
         intensity={backLightIntensity}
-        castShadow
       />
       {/* Key light that creates soft face light. */}
       <spotLight
@@ -84,7 +82,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 +90,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 +98,6 @@ const Lights: FC<LightingProps> = (lightingProps) => {
         angle={LIGHT_CONFIG.silhouetteLightAngle}
         color={keyLightColor}
         intensity={keyLightIntensity * 0.25}
-        castShadow
       />
     </group>
   );

diff --git a/src/components/Models/EnvironmentModel/EnvironmentModel.component.tsx b/src/components/Models/EnvironmentModel/EnvironmentModel.component.tsx
@@ -24,7 +24,6 @@ export const EnvironmentModel: FC<EnvironmentModelProps> = ({ environment, scale
         if (node.type === 'Mesh') {
           return (
             <mesh
-              receiveShadow
               key={node.name}
               scale={scale}
               position={transform.position}

diff --git a/src/components/Models/Model/Model.component.tsx b/src/components/Models/Model/Model.component.tsx
@@ -1,5 +1,5 @@
 import React, { FC, Ref, useEffect, useState, useCallback, useMemo } from 'react';
-import { Group, Mesh } from 'three';
+import { Group } from 'three';
 import { normaliseMaterialsConfig, triggerCallback, usePersistantRotation } from 'src/services';
 import { useThree } from '@react-three/fiber';
 import { hasWindow } from 'src/services/Client.service';
@@ -65,12 +65,8 @@ export const Model: FC<ModelProps> = ({
   scene.traverse((object) => {
     const node = object;
 
-    if ((node as Mesh).isMesh) {
-      node.castShadow = true;
-    }
-
     if (node.type === 'SkinnedMesh') {
-      node.receiveShadow = true;
+      node.frustumCulled = false;
     }
   });
 
@@ -110,3 +106,4 @@ export const Model: FC<ModelProps> = ({
     </group>
   );
 };
+
diff --git a/src/components/Shadow/Shadow.component.tsx b/src/components/Shadow/Shadow.component.tsx
diff --git a/src/services/Models.service.tsx b/src/services/Models.service.tsx
@@ -394,8 +394,6 @@ function buildFallback(nodes: Nodes, transform: Transform = new Transform()): JS
         if (node.type === 'SkinnedMesh') {
           return (
             <skinnedMesh
-              castShadow
-              receiveShadow
               key={node.name}
               scale={transform.scale}
               position={transform.position}
@@ -416,8 +414,6 @@ function buildFallback(nodes: Nodes, transform: Transform = new Transform()): JS
                 self.parent = node.parent;
                 return () => parent.remove(self);
               }}
-              castShadow
-              receiveShadow
               key={node.name}
               scale={node.scale}
               position={node.position}