Merge pull request #51 from readyplayerme/ACT-32-Reflective-surfaces-…

…in-scene

Act 32 reflective surfaces in scene

src/components/Avatar/Examples.stories.tsx

@@ -1,12 +1,13 @@
 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';
 import { ignoreArgTypesOnExamples, emotions, modelPresets, animationPresets } from 'src/services/Stories.service';
 import { environmentModels, environmentPresets } from 'src/services/Environment.service';
 import { EnvironmentModel as EnvironmentModelContainer } from 'src/components/Models';
+import { FloorReflection, FloorReflectionProps } from 'src/components/FloorReflection';
 import { AvatarProps } from './Avatar.component';
 import { Static } from './Avatar.stories';
 import { BloomConfiguration } from '../../types';
@@ -192,3 +193,63 @@ environmentModel.argTypes = {
   spotLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } },
   environment: { options: Object.keys(environmentPresets), control: { type: 'select' } }
 };
+// @ts-ignore
+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 = {
+  ...Static.args,
+  fov: 50,
+  // @ts-ignore
+  shadows: false,
+  modelSrc: modelPresets.one,
+  animationSrc: animationPresets.three,
+  environment: 'warehouse',
+  /* eslint-disable no-console */
+  onLoaded: () => console.info('EVENT: environment model loaded'),
+  /* eslint-enable no-console */
+  // @ts-ignore
+  resolution: 512,
+  mixBlur: 0.8,
+  mixStrength: 80,
+  metalness: 0.5,
+  blur: [300, 200],
+  mirror: 1,
+  minDepthThreshold: 0.4,
+  maxDepthThreshold: 1.4,
+  depthScale: 1.2,
+  depthToBlurRatioBias: 1,
+  distortion: 0,
+  mixContrast: 1,
+  reflectorOffset: 0,
+  roughness: 1,
+  color: 'rgb(9,20,26)',
+  debug: false
+};
+
+ReflectiveFloor.argTypes = {
+  ...ignoreArgTypesOnExamples,
+  // @ts-ignore
+  fov: { control: { type: 'range', min: 30, max: 100, step: 1 } },
+  // @ts-ignore
+  environment: { options: Object.keys(environmentPresets), control: { type: 'select' } },
+  // @ts-ignore
+  resolution: { control: { type: 'range', min: 64, max: 2048, step: 64 } },
+  mixBlur: { control: { type: 'range', min: 0, max: 10, step: 0.1 } },
+  mixStrength: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+  metalness: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
+  mirror: { control: { type: 'range', min: 0, max: 1, step: 1 } },
+  minDepthThreshold: { control: { type: 'range', min: 0, max: 10, step: 0.01 } },
+  maxDepthThreshold: { control: { type: 'range', min: 0, max: 10, step: 0.01 } },
+  depthScale: { control: { type: 'range', min: 0, max: 20, step: 0.01 } },
+  depthToBlurRatioBias: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
+  distortion: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
+  mixContrast: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
+  reflectorOffset: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
+  roughness: { control: { type: 'range', min: 0, max: 1, step: 0.01 } }
+};

src/components/FloorReflection/FloorReflection.component.tsx

@@ -0,0 +1,69 @@
+import React, { FC } from 'react';
+import { MeshReflectorMaterial } from '@react-three/drei';
+
+export interface FloorReflectionProps {
+  resolution?: number;
+  mixBlur?: number;
+  mixStrength?: number;
+  metalness?: number;
+  blur?: [number, number] | number;
+  mirror: number;
+  minDepthThreshold?: number;
+  maxDepthThreshold?: number;
+  depthScale?: number;
+  depthToBlurRatioBias?: number;
+  distortion?: number;
+  mixContrast?: number;
+  reflectorOffset?: number;
+  roughness?: number;
+  /**
+   * 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 = 512,
+  mixBlur = 0.8,
+  mixStrength = 80,
+  metalness = 0.5,
+  blur = [300, 200],
+  mirror = 1,
+  minDepthThreshold = 0.4,
+  maxDepthThreshold = 1.4,
+  depthScale = 1.2,
+  depthToBlurRatioBias = 1,
+  distortion = 0,
+  mixContrast = 1,
+  reflectorOffset = 0,
+  roughness = 1,
+  color,
+  ...props
+}) => (
+  <>
+    <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>
+  </>
+);

src/components/FloorReflection/index.ts

@@ -0,0 +1,2 @@
+export { FloorReflection } from './FloorReflection.component';
+export type { FloorReflectionProps } from './FloorReflection.component';

src/library.ts

@@ -6,6 +6,7 @@ import { StaticModel } from './components/Models/StaticModel';
 import { PoseModel } from './components/Models/PoseModel';
 import { EnvironmentModel } from './components/Models/EnvironmentModel';
 import { Avatar, CAMERA } from './components/Avatar';
+import { FloorReflection } from './components/FloorReflection';
 
 export {
   Exhibit,
@@ -16,5 +17,6 @@ export {
   StaticModel,
   PoseModel,
   Avatar,
-  CAMERA
+  CAMERA,
+  FloorReflection
 };