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 }
}) => (
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