diff --git a/src/App/components/Develop.tsx b/src/App/components/Develop.tsx index d4a4433e..ef3687f8 100644 --- a/src/App/components/Develop.tsx +++ b/src/App/components/Develop.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Sparkles, StatsGl } from '@react-three/drei'; +import { StatsGl } from '@react-three/drei'; import { Avatar } from 'src/components/Avatar'; import { EnvironmentModel } from 'src/components/Models'; @@ -21,7 +21,6 @@ export const AvatarDevelop: React.FC = () => ( > - ); diff --git a/src/App/components/Nova.tsx b/src/App/components/Nova.tsx index ffe31804..0f515684 100644 --- a/src/App/components/Nova.tsx +++ b/src/App/components/Nova.tsx @@ -76,6 +76,9 @@ export const AvatarNova: FC = () => { style={{ background: 'rgb(9,20,26)' }} fov={45} cameraInitialDistance={CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE} + effects={{ + ambientOcclusion: false + }} > diff --git a/src/components/Avatar/Avatar.component.tsx b/src/components/Avatar/Avatar.component.tsx index 19f956a2..86e44b50 100644 --- a/src/components/Avatar/Avatar.component.tsx +++ b/src/components/Avatar/Avatar.component.tsx @@ -10,20 +10,21 @@ import { EffectConfiguration, LightingProps, MaterialConfiguration, - AnimationsT + AnimationsT, + CanvasConfiguration } from 'src/types'; import { BaseCanvas } from 'src/components/BaseCanvas'; import { AnimationModel, HalfBodyModel, StaticModel, PoseModel, MultipleAnimationModel } from 'src/components/Models'; import { isValidFormat, triggerCallback } from 'src/services'; import { Dpr } from '@react-three/fiber'; -import { BrightnessContrast, EffectComposer, HueSaturation, SSAO, Vignette } from '@react-three/postprocessing'; +import { BrightnessContrast, EffectComposer, HueSaturation, N8AO, 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'; import { BackgroundColor } from 'src/components/Background'; 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 'src/state/spawnAtom'; @@ -162,6 +163,10 @@ export interface AvatarProps extends LightingProps, EnvironmentProps, Omit void; controlsMinDistance?: number; controlsMaxDistance?: number; + /** + * Control properties of the BaseCanvas. + */ + canvasConfig?: CanvasConfiguration; } /** @@ -209,7 +214,8 @@ const Avatar: FC = ({ onAnimationEnd, materialConfig, controlsMinDistance, - controlsMaxDistance + controlsMaxDistance, + canvasConfig }) => { const setSpawnState = useSetAtom(spawnState); @@ -336,6 +342,7 @@ const Avatar: FC = ({ style={style} dpr={dpr} className={className} + canvasConfig={canvasConfig} > = ({ /> {AvatarModel} {children} - {shadows && } + {shadows && ( + + )} {background?.src && } {capture && } {background?.color && } {enablePostProcessing && ( - + <> {effects?.ambientOcclusion && ( - + )} {effects?.bloom && ( = ({ /> )} {effects?.vignette && } - - + + )} diff --git a/src/components/BaseCanvas/BaseCanvas.component.tsx b/src/components/BaseCanvas/BaseCanvas.component.tsx index 7e9b1677..1460aa8a 100644 --- a/src/components/BaseCanvas/BaseCanvas.component.tsx +++ b/src/components/BaseCanvas/BaseCanvas.component.tsx @@ -1,7 +1,7 @@ import React, { ReactNode, FC, CSSProperties } from 'react'; import { Canvas, Dpr } from '@react-three/fiber'; import { ACESFilmicToneMapping, Vector3 } from 'three'; -import { CameraProps } from 'src/types'; +import { CameraProps, CanvasConfiguration } from 'src/types'; import { hasWindow } from 'src/services/Client.service'; import styles from './BaseCanvas.module.scss'; @@ -12,6 +12,7 @@ interface BaseCanvasProps extends CameraProps { dpr?: Dpr; className?: string; enablePostProcessing?: boolean; + canvasConfig?: CanvasConfiguration; } const BASE_DPR = hasWindow ? window.devicePixelRatio : 1; @@ -22,8 +23,9 @@ export const BaseCanvas: FC = ({ fov = 50, position = new Vector3(0, 0, 5), style, - dpr = [BASE_DPR * 0.5, 2], - className + dpr = [BASE_DPR * 0.5, 1], + className, + canvasConfig = { alpha: true } }) => ( = ({ shadows="soft" gl={{ preserveDrawingBuffer: true, - alpha: true, + alpha: canvasConfig.alpha, toneMapping: ACESFilmicToneMapping, toneMappingExposure: 1.8 }} @@ -39,7 +41,7 @@ export const BaseCanvas: FC = ({ dpr={dpr} camera={{ fov, position }} resize={{ scroll: true, debounce: { scroll: 50, resize: 0 } }} - style={{ ...style, background: 'transparent' }} + style={{ ...style, background: canvasConfig.alpha ? 'transparent' : style?.background }} > {children} diff --git a/src/components/Lights/Lights.component.tsx b/src/components/Lights/Lights.component.tsx index 4563267b..c940af30 100644 --- a/src/components/Lights/Lights.component.tsx +++ b/src/components/Lights/Lights.component.tsx @@ -84,7 +84,6 @@ const Lights: FC = (lightingProps) => { angle={LIGHT_CONFIG.keyLightAngle} color={keyLightColor} intensity={keyLightIntensity} - castShadow /> {/* Lift light that creates soft light on body and shoes. */} = (lightingProps) => { angle={LIGHT_CONFIG.keyLightAngle} color={keyLightColor} intensity={keyLightIntensity * 0.25} - castShadow /> {/* Silhouette light on arms and legs. */} = (lightingProps) => { angle={LIGHT_CONFIG.silhouetteLightAngle} color={keyLightColor} intensity={keyLightIntensity * 0.25} - castShadow /> ); diff --git a/src/components/Models/Model/Model.component.tsx b/src/components/Models/Model/Model.component.tsx index 3e194cac..3140a895 100644 --- a/src/components/Models/Model/Model.component.tsx +++ b/src/components/Models/Model/Model.component.tsx @@ -67,9 +67,6 @@ export const Model: FC = ({ if ((node as Mesh).isMesh) { node.castShadow = true; - } - - if (node.type === 'SkinnedMesh') { node.receiveShadow = true; } }); diff --git a/src/components/Shadow/Shadow.component.tsx b/src/components/Shadow/Shadow.component.tsx index e61e82e7..4b62a39c 100644 --- a/src/components/Shadow/Shadow.component.tsx +++ b/src/components/Shadow/Shadow.component.tsx @@ -9,4 +9,4 @@ const Shadow: FC = () => ( ); -export default Shadow; +export default Shadow; \ No newline at end of file diff --git a/src/types/index.ts b/src/types/index.ts index 87132087..bbe603a7 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -203,3 +203,7 @@ export type AnimationsT = Record< fadeTime?: number; } >; + +export type CanvasConfiguration = { + alpha?: boolean +} \ No newline at end of file diff --git a/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-0.5-side-[1].png b/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-0.5-side-[1].png old mode 100644 new mode 100755 index 03d2b016..104c366c Binary files a/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-0.5-side-[1].png and b/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-0.5-side-[1].png differ diff --git a/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-3-side-[1].png b/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-3-side-[1].png old mode 100644 new mode 100755 index 6d04f73e..c1943677 Binary files a/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-3-side-[1].png and b/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-3-side-[1].png differ