feat: add fog when using reflection

readyplayerme · Sep 19, 2023 · 9599567 · 9599567
1 parent d897076
commit 9599567
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 30 deletions.
diff --git a/src/components/Avatar/Examples.stories.tsx b/src/components/Avatar/Examples.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StoryFn } from '@storybook/react';
-import { Sparkles as SparklesDrei } from '@react-three/drei';
+import { Sparkles as SparklesDrei, StatsGl } from '@react-three/drei';
 import type { Meta } from '@storybook/react';
 import { Avatar as AvatarWrapper, CAMERA } from 'src/components/Avatar';
 import { getStoryAssetPath } from 'src/services';
@@ -194,9 +194,12 @@ environmentModel.argTypes = {
   environment: { options: Object.keys(environmentPresets), control: { type: 'select' } }
 };
 // @ts-ignore
-export const ReflectiveFloor: StoryFn<typeof Avatar> = (args: AvatarProps & FloorReflectionProps) => (
-  <Avatar {...args} effects={{ ambientOcclusion: true }}>
+export const ReflectiveFloor: StoryFn<typeof Avatar> = (
+  args: AvatarProps & FloorReflectionProps & { debug: boolean }
+) => (
+  <Avatar {...args} effects={{ ambientOcclusion: true }} style={{ background: args.color }}>
     <FloorReflection {...args} />
+    {args?.debug && <StatsGl />}
   </Avatar>
 );
 ReflectiveFloor.args = {
@@ -210,9 +213,8 @@ ReflectiveFloor.args = {
   /* eslint-disable no-console */
   onLoaded: () => console.info('EVENT: environment model loaded'),
   /* eslint-enable no-console */
-  style: { background: '#050B2D' },
   // @ts-ignore
-  resolution: 2048,
+  resolution: 512,
   mixBlur: 0.8,
   mixStrength: 80,
   metalness: 0.5,
@@ -226,7 +228,8 @@ ReflectiveFloor.args = {
   mixContrast: 1,
   reflectorOffset: 0,
   roughness: 1,
-  color: '#020411'
+  color: 'rgb(9,20,26)',
+  debug: false
 };
 
 ReflectiveFloor.argTypes = {

diff --git a/src/components/FloorReflection/FloorReflection.component.tsx b/src/components/FloorReflection/FloorReflection.component.tsx
@@ -16,10 +16,13 @@ export interface FloorReflectionProps {
   mixContrast?: number;
   reflectorOffset?: number;
   roughness?: number;
-  color?: string;
+  /**
+   * The color should match the canvas background color to provide a seamless transition from background to the reflective plane.
+   */
+  color: string;
 }
 export const FloorReflection: FC<FloorReflectionProps> = ({
-  resolution = 2048,
+  resolution = 512,
   mixBlur = 0.8,
   mixStrength = 80,
   metalness = 0.5,
@@ -33,28 +36,34 @@ export const FloorReflection: FC<FloorReflectionProps> = ({
   mixContrast = 1,
   reflectorOffset = 0,
   roughness = 1,
+  color,
   ...props
 }) => (
-  <group position={[0, -0.01, 0]}>
-    <mesh rotation={[-Math.PI / 2, 0, 0]}>
-      <planeGeometry args={[20, 5]} />
-      <MeshReflectorMaterial
-        resolution={resolution}
-        mixBlur={mixBlur}
-        mixStrength={mixStrength}
-        metalness={metalness}
-        blur={blur}
-        mirror={mirror}
-        minDepthThreshold={minDepthThreshold}
-        maxDepthThreshold={maxDepthThreshold}
-        depthScale={depthScale}
-        depthToBlurRatioBias={depthToBlurRatioBias}
-        distortion={distortion}
-        mixContrast={mixContrast}
-        reflectorOffset={reflectorOffset}
-        roughness={roughness}
-        {...props}
-      />
-    </mesh>
-  </group>
+  <>
+    <fog attach="fog" args={[color, 4, 8]} />
+    <group position={[0, 0, 0]}>
+      <mesh rotation={[-Math.PI / 2, 0, 0]}>
+        <planeGeometry args={[20, 10]} />
+        <MeshReflectorMaterial
+          resolution={resolution}
+          mixBlur={mixBlur}
+          mixStrength={mixStrength}
+          metalness={metalness}
+          blur={blur}
+          mirror={mirror}
+          minDepthThreshold={minDepthThreshold}
+          maxDepthThreshold={maxDepthThreshold}
+          depthScale={depthScale}
+          depthToBlurRatioBias={depthToBlurRatioBias}
+          distortion={distortion}
+          mixContrast={mixContrast}
+          reflectorOffset={reflectorOffset}
+          roughness={roughness}
+          color={color}
+          envMapIntensity={0}
+          {...props}
+        />
+      </mesh>
+    </group>
+  </>
 );