handle tonemapping for postprocessing and without seperatly

package.json

@@ -69,15 +69,15 @@
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
     "suspend-react": ">=0.1.3",
-    "@react-three/drei": "9.108.3",
+    "@react-three/drei": "9.108.4",
     "@react-three/fiber": "8.16.8",
     "@react-three/postprocessing": "2.16.2",
     "three": "0.166.1",
     "three-stdlib": "2.30.4"
   },
   "devDependencies": {
     "postprocessing": "6.35.6",
-    "@react-three/drei": "9.108.3",
+    "@react-three/drei": "9.108.4",
     "@react-three/fiber": "8.16.8",
     "@react-three/postprocessing": "2.16.2",
     "three": "0.166.1",

src/components/Avatar/Avatar.component.tsx

@@ -248,9 +248,11 @@ const Avatar: FC<AvatarProps> = ({
 
   useEffect(() => triggerCallback(onLoading), [modelSrc, animationSrc, onLoading]);
 
+  const enablePostProcessing = Boolean(effects?.ambientOcclusion || effects?.bloom || effects?.vignette);
+
   return (
-    <BaseCanvas position={new Vector3(0, 0, 3)} fov={fov} style={style} dpr={dpr} className={className}>
-      <Environment environment={environment} />
+    <BaseCanvas enablePostProcessing={enablePostProcessing} position={new Vector3(0, 0, 3)} fov={fov} style={style} dpr={dpr} className={className}>
+      <Environment environment={environment} enablePostProcessing={enablePostProcessing}/>
       <CameraControls
         cameraTarget={cameraTarget}
         cameraInitialDistance={cameraInitialDistance}
@@ -265,7 +267,7 @@ const Avatar: FC<AvatarProps> = ({
       {background?.src && <Box {...background} />}
       {capture && <Capture {...capture} />}
       {background?.color && <BackgroundColor color={background.color} />}
-      {(effects?.ambientOcclusion || effects?.bloom || effects?.vignette) && (
+      {enablePostProcessing && (
         <EffectComposer autoClear multisampling={4} enableNormalPass={effects?.ambientOcclusion}>
           <>
             {effects?.ambientOcclusion && (

src/components/BaseCanvas/BaseCanvas.component.tsx

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

src/components/Scene/Environment.component.tsx

@@ -4,9 +4,10 @@ import { environmentPresets, getPresetEnvironmentMap, EnvironmentPresets } from
 
 export interface EnvironmentProps {
   environment: string | EnvironmentPresets;
+  enablePostProcessing?: boolean | undefined;
 }
 
-export const Environment: FC<EnvironmentProps> = ({ environment }) => {
+export const Environment: FC<EnvironmentProps> = ({ environment, enablePostProcessing }) => {
   const config = useMemo<{ files: string }>(() => {
     const isStaticPreset = environment in environmentPresets;
     const files = isStaticPreset ? getPresetEnvironmentMap(environment as EnvironmentPresets) : environment;
@@ -16,5 +17,7 @@ export const Environment: FC<EnvironmentProps> = ({ environment }) => {
     };
   }, [environment]);
 
-  return <DreiEnvironment files={config.files} environmentIntensity={12}/>;
+  const environmentIntensity = enablePostProcessing ? 12 : 4;
+
+  return <DreiEnvironment files={config.files} environmentIntensity={environmentIntensity}/>;
 };