fix(tonemapping): ACT-956 tonemapping fix (#91)

* fix(toneMapping): ACT-956 keep toneMapping on emissive

* fix(lighting): ACT-956 reduce default intensity of backLight

* fix(attachments): ACT-956 fix attachment position on fallback

* test(e2e): ACT-956 new test model url

* test(e2e): ACT-956 updated baseline

* fix(lighting): ACT-956 revert lighting config

* refactor(storybook): ACT-956 remove reflective and environment model stories

* refactor(storybook): ACT-956 remove environment model

* test(e2e): ACT-956 update baseline

src/components/Avatar/Examples.stories.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
 import { StoryFn } from '@storybook/react';
-import { Sparkles as SparklesDrei, StatsGl } from '@react-three/drei';
+import { Sparkles as SparklesDrei } from '@react-three/drei';
 import type { Meta } from '@storybook/react';
 import { Avatar as AvatarWrapper, CAMERA } from 'src/components/Avatar';
 import { getStoryAssetPath } from 'src/services';
 import { ignoreArgTypesOnExamples, emotions, modelPresets, animationPresets } from 'src/services/Stories.service';
-import { environmentModels, environmentPresets } from 'src/services/Environment.service';
-import { EnvironmentModel as EnvironmentModelContainer } from 'src/components/Models';
-import { FloorReflection, FloorReflectionProps } from 'src/components/FloorReflection';
 import { Vector3 } from 'three';
 import { AvatarProps } from './Avatar.component';
 import { Static } from './Avatar.stories';
@@ -16,13 +13,10 @@ import { BloomConfiguration } from '../../types';
 const Avatar = (args: AvatarProps) => <AvatarWrapper {...args} />;
 
 const Sparkles: StoryFn<typeof SparklesDrei> = (args: any) => <SparklesDrei {...args} />;
-const EnvironmentModel: StoryFn<typeof EnvironmentModelContainer> = (args: any) => (
-  <EnvironmentModelContainer {...args} />
-);
 const meta: Meta<typeof Avatar> = {
   component: Avatar,
   // @ts-ignore
-  subcomponents: { Sparkles, EnvironmentModel }
+  subcomponents: { Sparkles }
 };
 
 export default meta;
@@ -160,105 +154,3 @@ IdleBlinking.argTypes = {
   modelSrc: { options: Object.values({ seven: modelPresets.seven }), control: { type: 'select' } },
   animationSrc: { options: Object.values(animationPresets), control: { type: 'select' } }
 };
-
-// @ts-ignore
-export const environmentModel: StoryFn<typeof Avatar> = (
-  args: AvatarProps & { environmentModel: string; environmentScale: number }
-) => (
-  <Avatar {...args} effects={{ ambientOcclusion: true }}>
-    <EnvironmentModel environment={args.environmentModel! as string} scale={args.environmentScale! as number} />
-  </Avatar>
-);
-environmentModel.args = {
-  environmentModel: 'spaceStation',
-  ...Static.args,
-  fov: 50,
-  // @ts-ignore
-  environmentScale: 1.0,
-  shadows: true,
-  modelSrc: modelPresets.one,
-  animationSrc: animationPresets.one,
-  environment: 'soft',
-  /* eslint-disable no-console */
-  onLoaded: () => console.info('EVENT: environment model loaded')
-  /* eslint-enable no-console */
-};
-environmentModel.argTypes = {
-  ...ignoreArgTypesOnExamples,
-  onLoading: { table: { disable: true } },
-  scale: { table: { disable: true } },
-  keyLightColor: { table: { disable: true } },
-  fillLightColor: { table: { disable: true } },
-  fillLightPosition: { table: { disable: true } },
-  backLightColor: { table: { disable: true } },
-  backLightPosition: { table: { disable: true } },
-  lightTarget: { table: { disable: true } },
-  // @ts-ignore
-  environmentModel: { options: Object.keys(environmentModels), control: { type: 'select' } },
-  fov: { control: { type: 'range', min: 30, max: 100, step: 1 } },
-  // @ts-ignore
-  environmentScale: { control: { type: 'range', min: 0.01, max: 10, step: 0.01 } },
-  fillLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } },
-  backLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } },
-  environment: { options: Object.keys(environmentPresets), control: { type: 'select' } }
-};
-// @ts-ignore
-export const ReflectiveFloor: StoryFn<typeof Avatar> = (
-  args: AvatarProps & FloorReflectionProps & { debug: boolean }
-) => (
-  <Avatar {...args} effects={{ ambientOcclusion: true }} background={{ color: args?.color }}>
-    <FloorReflection {...args} />
-    {args?.debug && <StatsGl />}
-  </Avatar>
-);
-ReflectiveFloor.args = {
-  ...Static.args,
-  fov: 50,
-  // @ts-ignore
-  shadows: false,
-  modelSrc: modelPresets.one,
-  animationSrc: animationPresets.three,
-  environment: 'soft',
-  /* eslint-disable no-console */
-  onLoaded: () => console.info('EVENT: environment model loaded'),
-  /* eslint-enable no-console */
-  // @ts-ignore
-  resolution: 512,
-  mixBlur: 0.8,
-  mixStrength: 80,
-  metalness: 0.5,
-  blur: [300, 200],
-  mirror: 1,
-  minDepthThreshold: 0.4,
-  maxDepthThreshold: 1.4,
-  depthScale: 1.2,
-  depthToBlurRatioBias: 1,
-  distortion: 0,
-  mixContrast: 1,
-  reflectorOffset: 0,
-  roughness: 1,
-  color: 'rgb(9,20,26)',
-  debug: false
-};
-
-ReflectiveFloor.argTypes = {
-  ...ignoreArgTypesOnExamples,
-  // @ts-ignore
-  fov: { control: { type: 'range', min: 30, max: 100, step: 1 } },
-  // @ts-ignore
-  environment: { options: Object.keys(environmentPresets), control: { type: 'select' } },
-  // @ts-ignore
-  resolution: { control: { type: 'range', min: 64, max: 2048, step: 64 } },
-  mixBlur: { control: { type: 'range', min: 0, max: 10, step: 0.1 } },
-  mixStrength: { control: { type: 'range', min: 0, max: 100, step: 1 } },
-  metalness: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
-  mirror: { control: { type: 'range', min: 0, max: 1, step: 1 } },
-  minDepthThreshold: { control: { type: 'range', min: 0, max: 10, step: 0.01 } },
-  maxDepthThreshold: { control: { type: 'range', min: 0, max: 10, step: 0.01 } },
-  depthScale: { control: { type: 'range', min: 0, max: 20, step: 0.01 } },
-  depthToBlurRatioBias: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
-  distortion: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
-  mixContrast: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
-  reflectorOffset: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
-  roughness: { control: { type: 'range', min: 0, max: 1, step: 0.01 } }
-};

src/services/Models.service.tsx

@@ -89,7 +89,6 @@ export const normaliseMaterialsConfig = (materials: Record<string, Material>, bl
 
     if (mat.emissiveMap) {
       mat.emissiveIntensity = bloomConfig?.materialIntensity || 3.3;
-      mat.toneMapped = false;
     }
   });
 };
@@ -287,12 +286,17 @@ function buildFallback(nodes: Nodes, transform: Transform = new Transform()): JS
         if (node.type === 'Mesh') {
           return (
             <mesh
+              attach={(parent, self) => {
+                parent.add(self);
+                self.parent = node.parent;
+                return () => parent.remove(self);
+              }}
               castShadow
               receiveShadow
               key={node.name}
-              scale={transform.scale}
-              position={transform.position}
-              rotation={transform.rotation}
+              scale={node.scale}
+              position={node.position}
+              rotation={node.rotation}
               geometry={node.geometry}
               material={node.material}
               morphTargetInfluences={node.morphTargetInfluences || []}

test/functional/cypress/e2e/visual.cy.ts

@@ -8,7 +8,7 @@ const VISUAL_TEST_CONFIG = Object.freeze({
     back: -1
   },
   testUrl: 'http://localhost:3000/test',
-  modelUrl: 'https://api.readyplayer.dev/v3/avatars/65f82db95462c113fe5c5bb6.glb',
+  modelUrl: 'https://api.readyplayer.dev/v3/avatars/66e06ad13f0d3ce06690b656.glb',
   testThreshold: 0.05
 });