Enable MeshoptCompression (#78)

* feat: update packages and enable useLegacyLights

* feat: remove vscode settings

* feat: enable meshopt decoder

* use brightness and contrast postprocessing instead of tonemapping

* handle tonemapping for postprocessing and without seperatly

* decrease saturation

* tweak light intensity, update storybook examples

* feat: package number

BREAKING CHANGE:
- legacy environment map presets can be overexposed with the updated color management

package.json

@@ -65,23 +65,23 @@
     ]
   },
   "peerDependencies": {
-    "@react-three/drei": ">=9.79.3",
-    "@react-three/fiber": ">=8.13.5",
-    "@react-three/postprocessing": ">=2.15.0",
-    "postprocessing": "6.32.2",
+    "@react-three/drei": "9.108.4",
+    "@react-three/fiber": "8.16.8",
+    "@react-three/postprocessing": "2.16.2",
+    "postprocessing": "6.35.6",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
     "suspend-react": ">=0.1.3",
-    "three": "0.154.0",
-    "three-stdlib": ">=2.23.13"
+    "three": "0.166.1",
+    "three-stdlib": "2.30.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
-    "@react-three/drei": "^9.79.3",
-    "@react-three/fiber": "^8.13.5",
-    "@react-three/postprocessing": "^2.15.0",
+    "@react-three/drei": "9.108.4",
+    "@react-three/fiber": "8.16.8",
+    "@react-three/postprocessing": "2.16.2",
     "@react-three/test-renderer": "^8.2.0",
     "@rollup/plugin-commonjs": "^25.0.3",
     "@rollup/plugin-node-resolve": "^15.1.0",
@@ -103,7 +103,7 @@
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@types/testing-library__jest-dom": "^5.14.8",
-    "@types/three": "^0.154.0",
+    "@types/three": "^0.166.0",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",
     "eslint": "^8.45.0",
@@ -118,7 +118,7 @@
     "eslint-plugin-storybook": "^0.6.13",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "postprocessing": "6.32.2",
+    "postprocessing": "6.35.6",
     "prettier": "^3.0.0",
     "r3f-perf": "^7.1.2",
     "react": "^18.2.0",
@@ -130,10 +130,10 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "storybook": "^7.3.2",
+    "storybook": "7.3.2",
     "suspend-react": "0.1.3",
-    "three": "^0.154.0",
-    "three-stdlib": "^2.23.13",
+    "three": "0.166.1",
+    "three-stdlib": "2.30.4",
     "typescript": "^4.1.6",
     "typescript-plugin-css-modules": "^5.0.1",
     "webpack": "^5.88.2"
@@ -150,6 +150,8 @@
     "npm": "8.6.0"
   },
   "dependencies": {
+    "gltfpack": "^0.21.0",
+    "jest-canvas-mock": "^2.5.2",
     "jotai": "^2.2.2"
   }
 }

src/App/App.component.tsx

@@ -24,7 +24,6 @@ function App() {
             shadows
             animationSrc="/male-idle-2.fbx"
             style={{ background: 'rgb(9,20,26)' }}
-            onLoaded={() => console.log('female avatar loaded')}
             fov={45}
             effects={{
               ambientOcclusion: true

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, HueSaturation, 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';
@@ -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.
  */
+
 const Avatar: FC<AvatarProps> = ({
   modelSrc,
   animationSrc = undefined,
@@ -247,9 +248,18 @@ 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}
@@ -264,8 +274,8 @@ const Avatar: FC<AvatarProps> = ({
       {background?.src && <Box {...background} />}
       {capture && <Capture {...capture} />}
       {background?.color && <BackgroundColor color={background.color} />}
-      {(effects?.ambientOcclusion || effects?.bloom || effects?.vignette) && (
-        <EffectComposer autoClear multisampling={4}>
+      {enablePostProcessing && (
+        <EffectComposer autoClear multisampling={4} enableNormalPass={effects?.ambientOcclusion}>
           <>
             {effects?.ambientOcclusion && (
               <SSAO
@@ -293,6 +303,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} />
           </>
         </EffectComposer>
       )}

src/components/Avatar/Avatar.stories.tsx

@@ -37,8 +37,8 @@ Static.args = {
     luminanceSmoothing: 1.0,
     mipmapBlur: true,
     kernelSize: 1,
-    intensity: 0.1,
-    materialIntensity: 3.3
+    intensity: 1,
+    materialIntensity: 1
   },
   background: {
     color: 'rgb(9,20,26)'

src/components/Avatar/Examples.stories.tsx

@@ -42,7 +42,7 @@ export const Bloom: StoryFn<BloomConfiguration> = (args: BloomConfiguration | un
     backLightColor="#fff0d6"
     backLightPosition={new Vector3(0.5, 1.6, -1.0)}
     lightTarget={new Vector3(0.0, 1.7, 0.0)}
-    environment="apartment"
+    environment="soft"
     background={{
       color: 'rgb(9,20,26)'
     }}
@@ -54,7 +54,7 @@ Bloom.args = {
   luminanceSmoothing: 1.0,
   mipmapBlur: true,
   kernelSize: 1,
-  intensity: 4,
+  intensity: 1,
   materialIntensity: 1
 };
 
@@ -178,7 +178,7 @@ environmentModel.args = {
   shadows: true,
   modelSrc: modelPresets.one,
   animationSrc: animationPresets.one,
-  environment: 'warehouse',
+  environment: 'soft',
   /* eslint-disable no-console */
   onLoaded: () => console.info('EVENT: environment model loaded')
   /* eslint-enable no-console */
@@ -218,7 +218,7 @@ ReflectiveFloor.args = {
   shadows: false,
   modelSrc: modelPresets.one,
   animationSrc: animationPresets.three,
-  environment: 'warehouse',
+  environment: 'soft',
   /* eslint-disable no-console */
   onLoaded: () => console.info('EVENT: environment model loaded'),
   /* eslint-enable no-console */

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, ACESFilmicToneMapping } 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,11 +11,13 @@ interface BaseCanvasProps extends CameraProps {
   style?: CSSProperties;
   dpr?: Dpr;
   className?: string;
+  enablePostProcessing?: boolean;
 }
 
 const BASE_DPR = hasWindow ? window.devicePixelRatio : 1;
 
 export const BaseCanvas: FC<BaseCanvasProps> = ({
+  enablePostProcessing,
   children = undefined,
   fov = 50,
   position = new Vector3(0, 0, 5),
@@ -27,7 +29,13 @@ export const BaseCanvas: FC<BaseCanvasProps> = ({
     key={fov}
     className={`${styles['base-canvas']} ${className ?? ''}`}
     shadows="soft"
-    gl={{ preserveDrawingBuffer: true, alpha: true, toneMappingExposure: 1.6, toneMapping: ACESFilmicToneMapping }}
+    gl={{
+      preserveDrawingBuffer: true,
+      alpha: true,
+      toneMapping: ACESFilmicToneMapping,
+      toneMappingExposure: 1.8
+    }}
+    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} />;
+  const environmentIntensity = enablePostProcessing ? 12 : 4;
+
+  return <DreiEnvironment files={config.files} environmentIntensity={environmentIntensity} />;
 };

src/services/Animation.service.ts

@@ -1,6 +1,7 @@
 import { AnimationClip, Group } from 'three';
 
 import { FBXLoader, GLTFLoader } from 'three-stdlib';
+import { MeshoptDecoder } from './meshopt_decoder';
 
 interface ClipWithType {
   group: Group;
@@ -13,6 +14,7 @@ const MIXAMO_SCALE = 0.01;
 
 const fbxLoader = new FBXLoader();
 const gltfLoader = new GLTFLoader();
+gltfLoader.setMeshoptDecoder(MeshoptDecoder);
 
 function normaliseFbxAnimation(fbx: Group, index: number = 0) {
   const { tracks } = fbx.animations[index];

src/services/Models.service.tsx

@@ -18,6 +18,7 @@ import { GLTF, GLTFLoader, DRACOLoader } from 'three-stdlib';
 import { suspend } from 'suspend-react';
 import { Emotion } from 'src/components/Avatar/Avatar.component';
 import { BloomConfiguration } from 'src/types';
+import { MeshoptDecoder } from './meshopt_decoder';
 
 export interface CustomNode extends Object3D {
   geometry: BufferGeometry;
@@ -211,6 +212,8 @@ export const useEmotion = (nodes: ObjectMap['nodes'], emotion?: Emotion) => {
 };
 
 const loader = new GLTFLoader();
+loader.setMeshoptDecoder(MeshoptDecoder);
+
 const dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.5/');
 loader.setDRACOLoader(dracoLoader);

src/setupTests.ts

@@ -1,3 +1,5 @@
+import 'jest-canvas-mock';
+
 // jest-dom adds custom jest matchers for asserting on DOM nodes.
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)