feat/ambient occlusion (#48)

* feat(ambient-occlusion): add ambient occlusion under the effects with default values

src/App/App.component.tsx

@@ -25,6 +25,9 @@ function App() {
             onLoaded={() => console.log('female avatar loaded')}
             fov={45}
             ambientLightIntensity={0}
+            effects={{
+              ambientOcclusion: true
+            }}
           >
             <StatsGl />
             <EnvironmentModel environment="spaceStation" scale={1} />

src/components/Avatar/Avatar.component.tsx

@@ -2,19 +2,27 @@ import React, { Suspense, FC, useMemo, CSSProperties, ReactNode, useEffect } fro
 import { Vector3 } from 'three';
 import { CameraLighting } from 'src/components/Scene/CameraLighting.component';
 import { Environment } from 'src/components/Scene/Environment.component';
-import { LightingProps, BaseModelProps, EnvironmentProps, BloomConfiguration, SpawnState } from 'src/types';
+import {
+  LightingProps,
+  BaseModelProps,
+  EnvironmentProps,
+  BloomConfiguration,
+  SpawnState,
+  EffectConfiguration
+} from 'src/types';
 import { BaseCanvas } from 'src/components/BaseCanvas';
-import { AnimationModel, HalfBodyModel, StaticModel, PoseModel } from 'src/components/Models';
+import {AnimationModel, HalfBodyModel, StaticModel, PoseModel} from 'src/components/Models';
 import { isValidFormat, triggerCallback } from 'src/services';
 import { Dpr } from '@react-three/fiber';
-import { EffectComposer } from '@react-three/postprocessing';
+import {EffectComposer, SSAO} 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 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 { spawnState } from '../../state/spawnAtom';
 
 export const CAMERA = {
@@ -135,7 +143,13 @@ export interface AvatarProps extends LightingProps, EnvironmentProps, Omit<BaseM
    * Field of view of the camera.
    */
   fov?: number;
-
+  /**
+   * Control some effects like post-processing effects
+   */
+  effects?: EffectConfiguration;
+  /**
+   * Use any three.js(fiber, post-processing) compatible components to render in the scene.
+   */
   children?: ReactNode;
 }
 
@@ -177,6 +191,7 @@ const Avatar: FC<AvatarProps> = ({
   onLoadedEffect,
   onLoadedAnimation,
   children,
+                                   effects,
   fov = 50
 }) => {
   const setSpawnState = useSetAtom(spawnState);
@@ -262,14 +277,30 @@ const Avatar: FC<AvatarProps> = ({
       {background?.src && <Box {...background} />}
       {capture && <Capture {...capture} />}
       {style?.background && <BackgroundColor color={style.background as string} />}
-      <EffectComposer disableNormalPass>
+      <EffectComposer multisampling={0} autoClear={false}>
         <Bloom
           luminanceThreshold={bloom?.luminanceThreshold}
           luminanceSmoothing={bloom?.luminanceSmoothing}
           intensity={bloom?.intensity}
           kernelSize={bloom?.kernelSize}
           mipmapBlur={bloom?.mipmapBlur}
         />
+        <>
+          {effects?.ambientOcclusion && (
+              <SSAO
+                blendFunction={BlendFunction.MULTIPLY}
+                distanceScaling={false}
+                radius={0.09}
+                bias={0.02}
+                intensity={3}
+                samples={20}
+                worldDistanceThreshold={24}
+                worldDistanceFalloff={0}
+                worldProximityThreshold={0}
+                worldProximityFalloff={6}
+              />
+          )}
+        </>
       </EffectComposer>
     </BaseCanvas>
   );

src/components/Avatar/Examples.stories.tsx

@@ -140,7 +140,7 @@ Posing.argTypes = {
 export const environmentModel: StoryFn<typeof Avatar> = (
   args: AvatarProps & { environmentModel: string; environmentScale: number }
 ) => (
-  <Avatar {...args}>
+  <Avatar {...args} effects={{ ambientOcclusion: true }}>
     <EnvironmentModel environment={args.environmentModel! as string} scale={args.environmentScale! as number} />
   </Avatar>
 );

src/types/index.ts

@@ -137,6 +137,13 @@ export type BloomConfiguration = {
   materialIntensity?: number;
 };
 
+export type EffectConfiguration = {
+  /**
+   * Enables ambient occlusion for the current scene.
+   */
+  ambientOcclusion?: boolean
+}
+
 export interface SpawnState {
   /**
    * Add a custom loaded effect like particles when avatar is loaded, animate them with a custom animation.