Merge pull request #66 from readyplayerme/PRD-357-Higher-quality-rend…

…ering Update lighting setup for higher quality rendering
readyplayerme · Jan 8, 2024 · 621c348 · 621c348
2 parents 046e4fb + b910499
commit 621c348
Show file tree

Hide file tree

Showing 12 changed files with 227 additions and 166 deletions.
diff --git a/src/App/App.component.tsx b/src/App/App.component.tsx
@@ -26,7 +26,6 @@ function App() {
             style={{ background: 'rgb(9,20,26)' }}
             onLoaded={() => console.log('female avatar loaded')}
             fov={45}
-            ambientLightIntensity={0}
             effects={{
               ambientOcclusion: true
             }}

diff --git a/src/components/Avatar/Avatar.component.tsx b/src/components/Avatar/Avatar.component.tsx
@@ -1,13 +1,13 @@
 import React, { Suspense, FC, useMemo, CSSProperties, ReactNode, useEffect } from 'react';
 import { Vector3 } from 'three';
-import { CameraLighting } from 'src/components/Scene/CameraLighting.component';
+import { CameraControls } from 'src/components/Scene/CameraControls.component';
 import { Environment } from 'src/components/Scene/Environment.component';
-import { LightingProps, BaseModelProps, EnvironmentProps, SpawnState, EffectConfiguration } from 'src/types';
+import { BaseModelProps, EnvironmentProps, SpawnState, EffectConfiguration, LightingProps } from 'src/types';
 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 } from '@react-three/postprocessing';
+import { 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';
@@ -16,6 +16,7 @@ import Shadow from 'src/components/Shadow/Shadow.component';
 import Loader from 'src/components/Loader';
 import Bloom from 'src/components/Bloom/Bloom.component';
 import { BlendFunction } from 'postprocessing';
+import Lights from 'src/components/Lights/Lights.component';
 import { spawnState } from '../../state/spawnAtom';
 
 export const CAMERA = {
@@ -154,19 +155,10 @@ const Avatar: FC<AvatarProps> = ({
   modelSrc,
   animationSrc = undefined,
   poseSrc = undefined,
-  environment = 'city',
+  environment = 'soft',
   halfBody = false,
   shadows = false,
   scale = 1,
-  ambientLightColor = '#fff5b6',
-  ambientLightIntensity = 0.25,
-  dirLightPosition = new Vector3(-3, 5, -5),
-  dirLightColor = '#002aff',
-  dirLightIntensity = 5,
-  spotLightPosition = new Vector3(12, 10, 7.5),
-  spotLightColor = '#fff5b6',
-  spotLightAngle = 0.314,
-  spotLightIntensity = 1,
   cameraTarget = CAMERA.TARGET.FULL_BODY.MALE,
   cameraInitialDistance = CAMERA.INITIAL_DISTANCE.FULL_BODY,
   style,
@@ -184,6 +176,15 @@ const Avatar: FC<AvatarProps> = ({
   onLoadedAnimation,
   children,
   effects,
+  keyLightIntensity,
+  keyLightColor,
+  fillLightIntensity,
+  fillLightColor,
+  fillLightPosition,
+  backLightIntensity,
+  backLightColor,
+  backLightPosition,
+  lightTarget,
   fov = 50
 }) => {
   const setSpawnState = useSetAtom(spawnState);
@@ -249,19 +250,10 @@ const Avatar: FC<AvatarProps> = ({
   return (
     <BaseCanvas position={new Vector3(0, 0, 3)} fov={fov} style={style} dpr={dpr} className={className}>
       <Environment environment={environment} />
-      <CameraLighting
+      <CameraControls
         cameraTarget={cameraTarget}
         cameraInitialDistance={cameraInitialDistance}
         cameraZoomTarget={cameraZoomTarget}
-        ambientLightColor={ambientLightColor}
-        ambientLightIntensity={ambientLightIntensity}
-        dirLightPosition={dirLightPosition}
-        dirLightColor={dirLightColor}
-        dirLightIntensity={dirLightIntensity}
-        spotLightPosition={spotLightPosition}
-        spotLightColor={spotLightColor}
-        spotLightAngle={spotLightAngle}
-        spotLightIntensity={spotLightIntensity}
         controlsMinDistance={halfBody ? CAMERA.CONTROLS.HALF_BODY.MIN_DISTANCE : CAMERA.CONTROLS.FULL_BODY.MIN_DISTANCE}
         controlsMaxDistance={halfBody ? CAMERA.CONTROLS.HALF_BODY.MAX_DISTANCE : CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE}
         updateCameraTargetOnZoom={!halfBody}
@@ -272,23 +264,23 @@ const Avatar: FC<AvatarProps> = ({
       {background?.src && <Box {...background} />}
       {capture && <Capture {...capture} />}
       {background?.color && <BackgroundColor color={background.color} />}
-      {(effects?.ambientOcclusion || effects?.bloom) && (
+      {(effects?.ambientOcclusion || effects?.bloom || effects?.vignette) && (
         <EffectComposer autoClear multisampling={4}>
           <>
             {effects?.ambientOcclusion && (
               <SSAO
                 blendFunction={BlendFunction.MULTIPLY}
                 distanceScaling={false}
-                radius={0.09}
-                bias={0.02}
+                radius={0.08}
+                bias={0.01}
                 intensity={3}
-                samples={23}
+                samples={31}
                 worldDistanceThreshold={24}
                 worldDistanceFalloff={0}
                 worldProximityThreshold={0}
                 worldProximityFalloff={6}
                 fade={0.02}
-                rings={16}
+                rings={8}
               />
             )}
             {effects?.bloom && (
@@ -300,9 +292,21 @@ const Avatar: FC<AvatarProps> = ({
                 mipmapBlur={effects?.bloom?.mipmapBlur}
               />
             )}
+            {effects?.vignette && <Vignette eskil={false} offset={0.5} darkness={0.5} />}
           </>
         </EffectComposer>
       )}
+      <Lights
+        keyLightIntensity={keyLightIntensity}
+        keyLightColor={keyLightColor}
+        fillLightIntensity={fillLightIntensity}
+        fillLightColor={fillLightColor}
+        fillLightPosition={fillLightPosition}
+        backLightIntensity={backLightIntensity}
+        backLightColor={backLightColor}
+        backLightPosition={backLightPosition}
+        lightTarget={lightTarget}
+      />
     </BaseCanvas>
   );
 };

diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { StoryFn } from '@storybook/react';
 import { getStoryAssetPath } from 'src/services';
-import { Vector3 } from 'three';
 import { Sparkles as SparklesDrei } from '@react-three/drei';
 import { FileDropper } from 'src/components/FileDropper/FileDropper.component';
 import { environmentPresets } from 'src/services/Environment.service';
 import { ignoreArgTypesOnExamples, modelPresets, animationPresets, emotions } from 'src/services/Stories.service';
 import { Avatar as AvatarWrapper, CAMERA } from './index';
 import { AvatarProps } from './Avatar.component';
+import { LIGHT_CONFIG } from '../Lights/Lights.component';
 
 const Avatar = (args: AvatarProps) => <AvatarWrapper {...args}>{args.children}</AvatarWrapper>;
 const Sparkles: StoryFn<typeof SparklesDrei> = (args: any) => <SparklesDrei {...args} />;
@@ -23,20 +23,11 @@ Static.args = {
   modelSrc: getStoryAssetPath('female.glb'),
   animationSrc: undefined,
   poseSrc: undefined,
-  environment: 'hub',
+  environment: 'soft',
   scale: 1,
   shadows: true,
   idleRotation: false,
   headMovement: false,
-  ambientLightColor: '#fff5b6',
-  dirLightColor: '#002aff',
-  spotLightColor: '#fff5b6',
-  ambientLightIntensity: 0.25,
-  dirLightIntensity: 5,
-  spotLightIntensity: 1,
-  dirLightPosition: new Vector3(-3, 5, -5),
-  spotLightPosition: new Vector3(12, 10, 7.5),
-  spotLightAngle: 0.314,
   fov: 50,
   cameraZoomTarget: CAMERA.CONTROLS.FULL_BODY.ZOOM_TARGET,
   cameraInitialDistance: CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE,
@@ -55,8 +46,9 @@ Static.args = {
   style: {},
   /* eslint-disable no-console */
   onLoaded: () => console.info('EVENT: static avatar loaded'),
-  onLoading: () => console.info('EVENT: loading static avatar')
+  onLoading: () => console.info('EVENT: loading static avatar'),
   /* eslint-enable no-console */
+  ...LIGHT_CONFIG.defaultProps
 };
 Static.argTypes = {
   headMovement: { control: false },
@@ -134,13 +126,7 @@ Showcase.args = {
     color: '#282038'
   },
   dpr: 2,
-  ambientLightColor: '#ffffff',
-  dirLightColor: '#ffffff',
-  spotLightColor: '#adbfe5',
-  ambientLightIntensity: 0,
-  dirLightIntensity: 2.2,
-  spotLightIntensity: 0.5,
-  environment: 'apartment',
+  environment: 'soft',
   shadows: false,
   emotion: {
     jawOpen: 0.1,
@@ -153,19 +139,23 @@ Showcase.args = {
     mouthDimpleLeft: 0.3
   },
   // @ts-ignore
-  ambientOcclusion: false
+  ambientOcclusion: false,
+  ...LIGHT_CONFIG.defaultProps
 };
 Showcase.argTypes = {
   ...ignoreArgTypesOnExamples,
   modelSrc: { options: Object.values(modelPresets), control: { type: 'select' } },
   animationSrc: { options: Object.values(animationPresets), control: { type: 'select' } },
   environment: { table: { disable: true } },
-  ambientLightColor: { table: { disable: true } },
-  dirLightColor: { table: { disable: true } },
-  spotLightColor: { table: { disable: true } },
-  ambientLightIntensity: { table: { disable: true } },
-  dirLightIntensity: { table: { disable: true } },
-  spotLightIntensity: { table: { disable: true } },
+  keyLightIntensity: { table: { disable: true } },
+  keyLightColor: { table: { disable: true } },
+  fillLightIntensity: { table: { disable: true } },
+  fillLightColor: { table: { disable: true } },
+  fillLightPosition: { table: { disable: true } },
+  backLightIntensity: { table: { disable: true } },
+  backLightColor: { table: { disable: true } },
+  backLightPosition: { table: { disable: true } },
+  lightTarget: { table: { disable: true } },
   fov: { table: { disable: true } }
 };
 
@@ -219,7 +209,7 @@ _DragNDrop.args = {
   modelSrc: undefined,
   animationSrc: undefined,
   poseSrc: '',
-  environment: 'city',
+  environment: 'soft',
   cameraTarget: CAMERA.TARGET.FULL_BODY.FEMALE,
   cameraInitialDistance: CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE,
   /* eslint-disable no-console */
@@ -239,13 +229,12 @@ export default {
   title: 'Components/Avatar',
   component: Avatar,
   argTypes: {
-    ambientLightColor: { control: 'color' },
-    dirLightColor: { control: 'color' },
-    spotLightColor: { control: 'color' },
-    ambientLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } },
-    dirLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } },
-    spotLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } },
-    spotLightAngle: { control: { type: 'range', min: 0, max: 10, step: 0.01 } },
+    keyLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } },
+    keyLightColor: { control: 'color' },
+    fillLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } },
+    fillLightColor: { control: 'color' },
+    backLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } },
+    backLightColor: { control: 'color' },
     cameraTarget: { control: { type: 'range', min: 0, max: 10, step: 0.01 } },
     scale: { control: { type: 'range', min: 0.01, max: 10, step: 0.01 } },
     cameraInitialDistance: { control: { type: 'range', min: 0, max: 2.5, step: 0.01 } },

diff --git a/src/components/Avatar/Debug.stories.tsx b/src/components/Avatar/Debug.stories.tsx
@@ -3,8 +3,8 @@ import { StatsGl } from '@react-three/drei';
 import type { Meta } from '@storybook/react';
 import { Perf } from 'r3f-perf';
 import React from 'react';
-import { Vector3 } from 'three';
 import { getStoryAssetPath } from 'src/services';
+import { LIGHT_CONFIG } from '../Lights/Lights.component';
 import { Avatar as AvatarWrapper } from './index';
 import { AvatarProps } from './Avatar.component';
 
@@ -33,17 +33,9 @@ Debug.args = {
   shadows: true,
   idleRotation: false,
   headMovement: false,
-  ambientLightColor: '#fff5b6',
-  dirLightColor: '#002aff',
-  spotLightColor: '#fff5b6',
-  ambientLightIntensity: 0.25,
-  dirLightIntensity: 5,
-  spotLightIntensity: 1,
-  dirLightPosition: new Vector3(-3, 5, -5),
-  spotLightPosition: new Vector3(12, 10, 7.5),
-  spotLightAngle: 0.314,
   /* eslint-disable no-console */
   onLoaded: () => console.info('EVENT: static avatar loaded'),
-  onLoading: () => console.info('EVENT: loading static avatar')
+  onLoading: () => console.info('EVENT: loading static avatar'),
   /* eslint-enable no-console */
+  ...LIGHT_CONFIG.defaultProps
 };
diff --git a/src/components/Avatar/Examples.stories.tsx b/src/components/Avatar/Examples.stories.tsx
@@ -8,6 +8,7 @@ import { ignoreArgTypesOnExamples, emotions, modelPresets, animationPresets } fr
 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';
 import { BloomConfiguration } from '../../types';
@@ -32,12 +33,15 @@ export const Bloom: StoryFn<BloomConfiguration> = (args: BloomConfiguration | un
     cameraTarget={CAMERA.TARGET.FULL_BODY.FEMALE}
     cameraInitialDistance={CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE}
     effects={{ bloom: { ...args } }}
-    ambientLightColor="#ffffff"
-    dirLightColor="#ffffff"
-    spotLightColor="#adbfe5"
-    ambientLightIntensity={0}
-    dirLightIntensity={2.2}
-    spotLightIntensity={0.5}
+    keyLightIntensity={1.2}
+    keyLightColor="#e8e3df"
+    fillLightIntensity={2.0}
+    fillLightColor="#99ccff"
+    fillLightPosition={new Vector3(-0.5, 1.6, -0.5)}
+    backLightIntensity={1.2}
+    backLightColor="#fff0d6"
+    backLightPosition={new Vector3(0.5, 1.6, -1.0)}
+    lightTarget={new Vector3(0.0, 1.7, 0.0)}
     environment="apartment"
     background={{
       color: 'rgb(9,20,26)'
@@ -180,17 +184,20 @@ environmentModel.args = {
 environmentModel.argTypes = {
   ...ignoreArgTypesOnExamples,
   onLoading: { table: { disable: true } },
-  dirLightPosition: { table: { disable: true } },
-  spotLightPosition: { 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 } },
-  ambientLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } },
-  dirLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } },
-  spotLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } },
+  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

diff --git a/src/components/BaseCanvas/BaseCanvas.component.tsx b/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 { Vector3, ACESFilmicToneMapping } from 'three';
 import { CameraProps } from 'src/types';
 import { hasWindow } from 'src/services/Client.service';
 import styles from './BaseCanvas.module.scss';
@@ -27,7 +27,7 @@ export const BaseCanvas: FC<BaseCanvasProps> = ({
     key={fov}
     className={`${styles['base-canvas']} ${className ?? ''}`}
     shadows="soft"
-    gl={{ preserveDrawingBuffer: true, toneMappingExposure: 0.5, alpha: true }}
+    gl={{ preserveDrawingBuffer: true, alpha: true, toneMappingExposure: 1.6, toneMapping: ACESFilmicToneMapping }}
     dpr={dpr}
     camera={{ fov, position }}
     resize={{ scroll: true, debounce: { scroll: 50, resize: 0 } }}