Merge pull request #59 from readyplayerme/feature/optimise-effects

Feature/optimise effects
readyplayerme · Oct 10, 2023 · a2e8d3c · a2e8d3c
2 parents b05c65b + 4ecafc7
commit a2e8d3c
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 50 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -5,4 +5,4 @@
 
 # The '*' pattern is global owners.
 
-*       @Zaehiel @blanxii @chikul @tiivik @hanWolf3D
+*       @readyplayerme/avatars-content-tech-team
diff --git a/src/components/Avatar/Avatar.component.tsx b/src/components/Avatar/Avatar.component.tsx
@@ -2,14 +2,7 @@ import React, { Suspense, FC, useMemo, CSSProperties, ReactNode, useEffect } fro
 import { Vector3 } from 'three';
 import { CameraLighting } from 'src/components/Scene/CameraLighting.component';
 import { Environment } from 'src/components/Scene/Environment.component';
-import {
-  LightingProps,
-  BaseModelProps,
-  EnvironmentProps,
-  BloomConfiguration,
-  SpawnState,
-  EffectConfiguration
-} from 'src/types';
+import { LightingProps, BaseModelProps, EnvironmentProps, SpawnState, EffectConfiguration } from 'src/types';
 import { BaseCanvas } from 'src/components/BaseCanvas';
 import { AnimationModel, HalfBodyModel, StaticModel, PoseModel } from 'src/components/Models';
 import { isValidFormat, triggerCallback } from 'src/services';
@@ -131,10 +124,6 @@ export interface AvatarProps extends LightingProps, EnvironmentProps, Omit<BaseM
    * Defaults to full-body zoom distance.
    */
   cameraZoomTarget?: Vector3;
-  /**
-   * Bloom post-processing effect.
-   */
-  bloom?: BloomConfiguration;
   /**
    * Spawn effect when model is loaded into scene.
    */
@@ -191,7 +180,6 @@ const Avatar: FC<AvatarProps> = ({
   className,
   headMovement = false,
   cameraZoomTarget = CAMERA.CONTROLS.FULL_BODY.ZOOM_TARGET,
-  bloom,
   onLoadedEffect,
   onLoadedAnimation,
   children,
@@ -218,7 +206,7 @@ const Avatar: FC<AvatarProps> = ({
           idleRotation={idleRotation}
           onLoaded={onLoaded}
           headMovement={headMovement}
-          bloom={bloom}
+          bloom={effects?.bloom}
         />
       );
     }
@@ -232,7 +220,7 @@ const Avatar: FC<AvatarProps> = ({
           idleRotation={idleRotation}
           onLoaded={onLoaded}
           headMovement={headMovement}
-          bloom={bloom}
+          bloom={effects?.bloom}
         />
       );
     }
@@ -245,13 +233,15 @@ const Avatar: FC<AvatarProps> = ({
           scale={scale}
           poseSrc={poseSrc!}
           onLoaded={onLoaded}
-          bloom={bloom}
+          bloom={effects?.bloom}
         />
       );
     }
 
-    return <StaticModel modelSrc={modelSrc} scale={scale} onLoaded={onLoaded} emotion={emotion} bloom={bloom} />;
-  }, [halfBody, animationSrc, modelSrc, scale, poseSrc, idleRotation, emotion, onLoaded, headMovement, bloom]);
+    return (
+      <StaticModel modelSrc={modelSrc} scale={scale} onLoaded={onLoaded} emotion={emotion} bloom={effects?.bloom} />
+    );
+  }, [halfBody, animationSrc, modelSrc, scale, poseSrc, idleRotation, emotion, onLoaded, headMovement, effects?.bloom]);
 
   useEffect(() => triggerCallback(onLoading), [modelSrc, animationSrc, onLoading]);
 
@@ -281,31 +271,35 @@ const Avatar: FC<AvatarProps> = ({
       {background?.src && <Box {...background} />}
       {capture && <Capture {...capture} />}
       {background?.color && <BackgroundColor color={background.color} />}
-      <EffectComposer autoClear={false}>
-        <Bloom
-          luminanceThreshold={bloom?.luminanceThreshold}
-          luminanceSmoothing={bloom?.luminanceSmoothing}
-          intensity={bloom?.intensity}
-          kernelSize={bloom?.kernelSize}
-          mipmapBlur={bloom?.mipmapBlur}
-        />
-        <>
-          {effects?.ambientOcclusion && (
-            <SSAO
-              blendFunction={BlendFunction.MULTIPLY}
-              distanceScaling={false}
-              radius={0.09}
-              bias={0.02}
-              intensity={3}
-              samples={20}
-              worldDistanceThreshold={24}
-              worldDistanceFalloff={0}
-              worldProximityThreshold={0}
-              worldProximityFalloff={6}
-            />
-          )}
-        </>
-      </EffectComposer>
+      {effects && (
+        <EffectComposer autoClear={false} multisampling={4}>
+          <>
+            {effects?.ambientOcclusion && (
+              <SSAO
+                blendFunction={BlendFunction.MULTIPLY}
+                distanceScaling={false}
+                radius={0.09}
+                bias={0.02}
+                intensity={3}
+                samples={20}
+                worldDistanceThreshold={24}
+                worldDistanceFalloff={0}
+                worldProximityThreshold={0}
+                worldProximityFalloff={6}
+              />
+            )}
+            {effects?.bloom && (
+              <Bloom
+                luminanceThreshold={effects?.bloom?.luminanceThreshold}
+                luminanceSmoothing={effects?.bloom?.luminanceSmoothing}
+                intensity={effects?.bloom?.intensity}
+                kernelSize={effects?.bloom?.kernelSize}
+                mipmapBlur={effects?.bloom?.mipmapBlur}
+              />
+            )}
+          </>
+        </EffectComposer>
+      )}
     </BaseCanvas>
   );
 };

diff --git a/src/components/FloorReflection/FloorReflection.component.tsx b/src/components/FloorReflection/FloorReflection.component.tsx
@@ -7,7 +7,7 @@ export interface FloorReflectionProps {
   mixStrength?: number;
   metalness?: number;
   blur?: [number, number] | number;
-  mirror: number;
+  mirror?: number;
   minDepthThreshold?: number;
   maxDepthThreshold?: number;
   depthScale?: number;
@@ -40,7 +40,7 @@ export const FloorReflection: FC<FloorReflectionProps> = ({
   ...props
 }) => (
   <>
-    <fog attach="fog" args={[color, 4, 8]} />
+    <fog attach="fog" args={[color, 2, 6]} />
     <group position={[0, 0, 0]}>
       <mesh rotation={[-Math.PI / 2, 0, 0]}>
         <planeGeometry args={[20, 10]} />

diff --git a/src/components/Models/AnimationModel/AnimationModel.component.tsx b/src/components/Models/AnimationModel/AnimationModel.component.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, FC, useMemo } from 'react';
+import React, { useRef, FC, useMemo, useState } from 'react';
 import { useFrame, useGraph } from '@react-three/fiber';
 import { AnimationMixer, Group } from 'three';
 import { Model } from 'src/components/Models/Model';
@@ -29,7 +29,7 @@ export const AnimationModel: FC<AnimationModelProps> = ({
   bloom
 }) => {
   const ref = useRef<Group>(null);
-  const [animationRunning, setAnimationRunning] = React.useState(true);
+  const [animationRunning, setAnimationRunning] = useState(true);
   const onSpawnAnimationFinish = () => {
     setAnimationRunning(false);
   };
@@ -46,7 +46,7 @@ export const AnimationModel: FC<AnimationModelProps> = ({
     }
 
     const animation = mixer.clipAction(await animationClip);
-    animation.fadeIn(0.5);
+    animation.fadeIn(0);
     animation.play();
 
     mixer.update(0);

diff --git a/src/components/Shadow/Shadow.component.tsx b/src/components/Shadow/Shadow.component.tsx
@@ -3,7 +3,7 @@ import React, { FC } from 'react';
 const Shadow: FC = () => (
   <group position={[0, 0, 0]}>
     <mesh key="shadow-catcher" receiveShadow position={[0, 0, 0]} rotation-x={-Math.PI / 2}>
-      <planeGeometry attach="geometry" args={[5, 5]} />
+      <planeGeometry attach="geometry" args={[3, 2]} />
       <shadowMaterial attach="material" transparent opacity={0.2} />
     </mesh>
   </group>

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -142,6 +142,10 @@ export type EffectConfiguration = {
    * Enables ambient occlusion for the current scene.
    */
   ambientOcclusion?: boolean;
+  /**
+   * Bloom post-processing effect.
+   */
+  bloom?: BloomConfiguration;
 };
 
 export interface SpawnState {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,4 +5,4 @@

		# The '*' pattern is global owners.

		* @Zaehiel @blanxii @chikul @tiivik @hanWolf3D
		* @readyplayerme/avatars-content-tech-team