Add Mirror to bitecs

src/bit-components.js

@@ -199,3 +199,4 @@ export const Billboard = defineComponent({
   onlyY: Types.ui8
 });
 export const SimpleWater = defineComponent();
+export const Mirror = defineComponent();

src/inflators/mirror.ts

@@ -0,0 +1,51 @@
+import { addComponent } from "bitecs";
+import { PlaneGeometry } from "three";
+import { Reflector } from "three/examples/jsm/objects/Reflector";
+import { addObject3DComponent } from "../utils/jsx-entity";
+import { Mirror } from "../bit-components";
+import { HubsWorld } from "../app";
+import { Layers } from "../camera-layers";
+
+const DEFAULT_MIRROR_GEOMETRY = new PlaneGeometry();
+const DEFAULT_TEXTURE_WIDTH = window.innerWidth * window.devicePixelRatio;
+const DEFAULT_TEXTURE_HEIGHT = window.innerHeight * window.devicePixelRatio;
+
+export type MirrorParams = {
+  color?: string;
+};
+
+const DEFAULTS = {
+  color: '#7f7f7f'
+};
+
+export function inflateMirror(world: HubsWorld, eid: number, params: MirrorParams) {
+  params = Object.assign({}, DEFAULTS, params);
+  const geometry = DEFAULT_MIRROR_GEOMETRY;
+  const reflector = new Reflector(geometry, {
+    color: params.color,
+    textureWidth: DEFAULT_TEXTURE_WIDTH,
+    textureHeight: DEFAULT_TEXTURE_HEIGHT
+  });
+
+  // HACK the first time we render this, add the appropriate camera layers
+  // to the virtual camera. There is no other way to easily access camera
+  // used for Reflector. We may remove with Three.js r149 or newer because
+  // Reflector will expose camera.
+  const originalOnBeforeRender = reflector.onBeforeRender;
+  reflector.onBeforeRender = function (renderer, scene, camera, geometry, material, group) {
+    const originalRender = renderer.render;
+    renderer.render = function (scene, camera) {
+      camera.layers.enable(Layers.CAMERA_LAYER_THIRD_PERSON_ONLY);
+      camera.layers.enable(Layers.CAMERA_LAYER_VIDEO_TEXTURE_TARGET);
+      reflector.onBeforeRender = originalOnBeforeRender;
+      originalRender.call(renderer, scene, camera);
+    };
+    originalOnBeforeRender(renderer, scene, camera, geometry, material, group);
+    renderer.render = originalRender;
+  };
+
+  addObject3DComponent(world, eid, reflector);
+  addComponent(world, Mirror, eid);
+  return eid;
+}
+

src/systems/remove-object3D-system.js

@@ -7,6 +7,7 @@ import {
   MediaImage,
   MediaFrame,
   MediaVideo,
+  Mirror,
   Object3DTag,
   Slice9,
   Text,
@@ -73,6 +74,7 @@ const cleanupSimpleWaters = cleanupObjOnExit(SimpleWater, obj => {
     obj.material.dispose();
   }
 });
+const cleanupMirrors = cleanupObjOnExit(Mirror, obj => obj.dispose());
 
 // TODO This feels messy and brittle
 //
@@ -127,6 +129,7 @@ export function removeObject3DSystem(world) {
   cleanupAudioEmitters(world);
   cleanupSkyboxes(world);
   cleanupSimpleWaters(world);
+  cleanupMirrors(world);
 
   // Finally remove all the entities we just removed from the eid2obj map
   entities.forEach(removeFromMap);

src/utils/jsx-entity.ts

@@ -34,7 +34,8 @@ import {
   NetworkDebug,
   WaypointPreview,
   NetworkedFloatyObject,
-  Billboard
+  Billboard,
+  Mirror
 } from "../bit-components";
 import { inflateMediaLoader } from "../inflators/media-loader";
 import { inflateMediaFrame } from "../inflators/media-frame";
@@ -66,6 +67,7 @@ import { ProjectionMode } from "./projection-mode";
 import { inflateSkybox, SkyboxParams } from "../inflators/skybox";
 import { inflateSpawner, SpawnerParams } from "../inflators/spawner";
 import { SimpleWaterParams, inflateSimpleWater } from "../inflators/simple-water";
+import { MirrorParams, inflateMirror } from "../inflators/mirror";
 
 preload(
   new Promise(resolve => {
@@ -213,6 +215,7 @@ export interface ComponentData {
   grabbable?: GrabbableParams;
   billboard?: { onlyY: boolean };
   simpleWater?: SimpleWaterParams;
+  mirror?: MirrorParams;
 }
 
 export interface JSXComponentData extends ComponentData {
@@ -344,7 +347,8 @@ export const commonInflators: Required<{ [K in keyof ComponentData]: InflatorFn
 
   // inflators that create Object3Ds
   directionalLight: inflateDirectionalLight,
-  simpleWater: inflateSimpleWater
+  simpleWater: inflateSimpleWater,
+  mirror: inflateMirror
 };
 
 const jsxInflators: Required<{ [K in keyof JSXComponentData]: InflatorFn }> = {