WIP

src/components/Avatar/Avatar.component.tsx

@@ -8,7 +8,7 @@ import { BaseCanvas } from 'src/components/BaseCanvas';
 import { AnimationModel, HalfBodyModel, StaticModel, PoseModel } from 'src/components/Models';
 import { isValidFormat, triggerCallback } from 'src/services';
 import { Dpr } from '@react-three/fiber';
-import { EffectComposer, SSAO, Vignette } from '@react-three/postprocessing';
+import { BrightnessContrast, EffectComposer, SSAO, 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';
@@ -44,9 +44,9 @@ export const CAMERA = {
     }
   }
 };
-
+// prettier-ignore
 export type Emotion = Record<string, number>;
-
+// prettier-ignore
 export interface AvatarProps extends LightingProps, EnvironmentProps, Omit<BaseModelProps, 'setModelFallback'> {
   /**
    * Arbitrary binary data (base64 string, Blob) of a `.glb` file or path (URL) to a `.glb` resource.
@@ -151,6 +151,7 @@ export interface AvatarProps extends LightingProps, EnvironmentProps, Omit<BaseM
  * Interactive avatar presentation with zooming and horizontal rotation controls.
  * Optimised for full-body and half-body avatars.
  */
+// prettier-ignore
 const Avatar: FC<AvatarProps> = ({
   modelSrc,
   animationSrc = undefined,
@@ -265,7 +266,7 @@ const Avatar: FC<AvatarProps> = ({
       {capture && <Capture {...capture} />}
       {background?.color && <BackgroundColor color={background.color} />}
       {(effects?.ambientOcclusion || effects?.bloom || effects?.vignette) && (
-        <EffectComposer autoClear multisampling={4}>
+        <EffectComposer autoClear multisampling={4} enableNormalPass={effects?.ambientOcclusion}>
           <>
             {effects?.ambientOcclusion && (
               <SSAO
@@ -293,6 +294,7 @@ const Avatar: FC<AvatarProps> = ({
               />
             )}
             {effects?.vignette && <Vignette eskil={false} offset={0.5} darkness={0.5} />}
+            <BrightnessContrast brightness={0.05} contrast={0.25} />
           </>
         </EffectComposer>
       )}

src/components/BaseCanvas/BaseCanvas.component.tsx

@@ -29,7 +29,6 @@ export const BaseCanvas: FC<BaseCanvasProps> = (
       toneMapping: ACESFilmicToneMapping,
       useLegacyLights: true,
     }}
-    legacy
     dpr={dpr}
     camera={{ fov, position }}
     resize={{ scroll: true, debounce: { scroll: 50, resize: 0 } }}

src/components/Scene/Environment.component.tsx

@@ -1,11 +1,12 @@
 import React, { FC, useMemo } from 'react';
 import { Environment as DreiEnvironment } from '@react-three/drei';
 import { environmentPresets, getPresetEnvironmentMap, EnvironmentPresets } from 'src/services/Environment.service';
+import { LinearEncoding } from '@react-three/drei/helpers/deprecated';
 
 export interface EnvironmentProps {
   environment: string | EnvironmentPresets;
 }
-
+// prettier-ignore
 export const Environment: FC<EnvironmentProps> = ({ environment }) => {
   const config = useMemo<{ files: string }>(() => {
     const isStaticPreset = environment in environmentPresets;
@@ -16,5 +17,5 @@ export const Environment: FC<EnvironmentProps> = ({ environment }) => {
     };
   }, [environment]);
 
-  return <DreiEnvironment files={config.files} />;
+  return <DreiEnvironment files={config.files} encoding={LinearEncoding} environmentIntensity={10}/>;
 };