Migrate billboard to bit-ecs

src/aframe-to-bit-components.js

@@ -7,7 +7,8 @@ import {
   RemoteHoverTarget,
   NotRemoteHoverTarget,
   RemoveNetworkedEntityButton,
-  DestroyAtExtremeDistance
+  DestroyAtExtremeDistance,
+  Billboard
 } from "./bit-components";
 
 [
@@ -18,7 +19,8 @@ import {
   ["is-remote-hover-target", RemoteHoverTarget],
   ["is-not-remote-hover-target", NotRemoteHoverTarget],
   ["remove-networked-object-button", RemoveNetworkedEntityButton],
-  ["destroy-at-extreme-distances", DestroyAtExtremeDistance]
+  ["destroy-at-extreme-distances", DestroyAtExtremeDistance],
+  ["billboard", Billboard]
 ].forEach(([aframeComponentName, bitecsComponent]) => {
   AFRAME.registerComponent(aframeComponentName, {
     init: function () {

src/app.ts

@@ -1,4 +1,3 @@
-import * as bitecs from "bitecs";
 import { addEntity, createWorld, IWorld } from "bitecs";
 import "./aframe-to-bit-components";
 import { AEntity, Networked, Object3DTag, Owned } from "./bit-components";
@@ -14,6 +13,7 @@ import { EffectComposer, EffectPass } from "postprocessing";
 import {
   Audio,
   AudioListener,
+  Camera,
   Object3D,
   PerspectiveCamera,
   PositionalAudio,
@@ -94,6 +94,7 @@ export class App {
   sid2str: Map<number, string | null>;
   nextSid = 1;
 
+  camera: Camera;
   audioListener: AudioListener;
 
   dialog = new DialogAdapter();
@@ -195,6 +196,7 @@ export class App {
     const audioListener = new AudioListener();
     this.audioListener = audioListener;
     camera.add(audioListener);
+    this.camera = camera;
 
     this.world.time = {
       delta: 0,

src/bit-components.js

@@ -194,3 +194,6 @@ export const ObjectSpawner = defineComponent({
   src: Types.ui32,
   flags: Types.ui8
 });
+export const Billboard = defineComponent({
+  onlyY: Types.ui8
+});

src/bit-systems/billboard.ts

@@ -0,0 +1,93 @@
+import { FrameSchedulerSystem } from "aframe";
+import { defineQuery, enterQuery, exitQuery } from "bitecs";
+import { HubsWorld } from "../app";
+import { Billboard } from "../bit-components";
+
+const billboardQuery = defineQuery([Billboard]);
+const billboardEnterQuery = enterQuery(billboardQuery);
+const billboardExitQuery = exitQuery(billboardQuery);
+
+const isMobileVR = AFRAME.utils.device.isMobileVR();
+
+const targetPos = new THREE.Vector3();
+const worldPos = new THREE.Vector3();
+const inView = new Map();
+
+const updateIsInView = (world: HubsWorld, billboard: number) => {
+  const frustum = new THREE.Frustum();
+  const frustumMatrix = new THREE.Matrix4();
+  const box = new THREE.Box3();
+  const boxTemp = new THREE.Box3();
+
+  const expandBox = (child: THREE.Mesh) => {
+    if (child.geometry && child.geometry.boundingBox) {
+      child.updateMatrices();
+      child.geometry.computeBoundingBox();
+      boxTemp.copy(child.geometry.boundingBox).applyMatrix4(child.matrixWorld);
+      box.expandByPoint(boxTemp.min);
+      box.expandByPoint(boxTemp.max);
+    }
+  };
+
+  const isInViewOfCamera = (object3D: THREE.Object3D, camera: THREE.Camera) => {
+    frustumMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+    frustum.setFromProjectionMatrix(frustumMatrix);
+    box.makeEmpty();
+    object3D.traverse(expandBox);
+
+    // NOTE: not using box.setFromObject here because text nodes do not have Z values in their geometry buffer,
+    // and that routine ultimately assumes they do.
+    return frustum.intersectsBox(box);
+  };
+
+  return () => {
+    const object3D = world.eid2obj.get(billboard);
+    if (!object3D || !object3D.visible) {
+      inView.set(billboard, false);
+      return;
+    }
+
+    if (!APP.camera) return;
+
+    const inVR = APP.scene?.is("vr-mode");
+    inView.set(billboard, inVR ? true : isInViewOfCamera(object3D, APP.camera));
+  };
+};
+
+let updateIsInViewCallback: (world: HubsWorld, billboard: number) => void;
+
+export function billboardSystem(world: HubsWorld, frameScheduler: FrameSchedulerSystem) {
+  billboardEnterQuery(world).forEach(billboard => {
+    if (isMobileVR) {
+      updateIsInViewCallback = updateIsInView(world, billboard);
+      frameScheduler.schedule(updateIsInViewCallback, "billboards");
+    }
+  });
+  billboardExitQuery(world).forEach(billboard => {
+    if (isMobileVR && updateIsInViewCallback) {
+      frameScheduler.unschedule(updateIsInViewCallback, "billboards");
+    }
+  });
+  billboardQuery(world).forEach(billboard => {
+    const isInView = inView.get(billboard);
+    if (isInView || !isMobileVR) {
+      const object3D = world.eid2obj.get(billboard);
+      const onlyY = Billboard.onlyY[billboard];
+      if (!object3D || !object3D.visible) return;
+
+      const camera = APP.camera;
+      if (camera) {
+        // Set the camera world position as the target.
+        targetPos.setFromMatrixPosition(camera.matrixWorld);
+
+        if (onlyY) {
+          object3D.getWorldPosition(worldPos);
+          targetPos.y = worldPos.y;
+        }
+        object3D.lookAt(targetPos);
+
+        object3D.matrixNeedsUpdate = true;
+      }
+    }
+  });
+}

src/components/scene-components.js

@@ -2,7 +2,6 @@ import "./animation";
 import "./ambient-light";
 import "./animation-mixer";
 import "./audio-feedback";
-import "./billboard";
 import "./slice9";
 import "./css-class";
 import "./directional-light";

src/gltf-component-mappings.js

@@ -5,10 +5,13 @@ import { TYPE, SHAPE, FIT } from "three-ammo/constants";
 import { COLLISION_LAYERS } from "./constants";
 import { AudioType, DistanceModelType, SourceType } from "./components/audio-params";
 import { updateAudioSettings } from "./update-audio-settings";
-import { renderAsEntity } from "./utils/jsx-entity";
+import { billboardInflator, renderAsEntity } from "./utils/jsx-entity";
 import { Networked } from "./bit-components";
 import { addComponent } from "bitecs";
 
+const inflatorWrapper = inflator => (el, _componentName, componentData) =>
+  inflator(APP.world, el.object3D.eid, componentData);
+
 AFRAME.GLTFModelPlus.registerComponent("duck", "duck", el => {
   el.setAttribute("duck", "");
   el.setAttribute("quack", { quackPercentage: 0.1 });
@@ -57,7 +60,7 @@ AFRAME.GLTFModelPlus.registerComponent("directional-light", "directional-light")
 AFRAME.GLTFModelPlus.registerComponent("hemisphere-light", "hemisphere-light");
 AFRAME.GLTFModelPlus.registerComponent("point-light", "point-light");
 AFRAME.GLTFModelPlus.registerComponent("spot-light", "spot-light");
-AFRAME.GLTFModelPlus.registerComponent("billboard", "billboard");
+AFRAME.GLTFModelPlus.registerComponent("billboard", "billboard", inflatorWrapper(billboardInflator));
 AFRAME.GLTFModelPlus.registerComponent("simple-water", "simple-water");
 AFRAME.GLTFModelPlus.registerComponent("skybox", "skybox");
 AFRAME.GLTFModelPlus.registerComponent("layers", "layers");

src/systems/hubs-systems.ts

@@ -60,6 +60,7 @@ import { networkDebugSystem } from "../bit-systems/network-debug";
 import qsTruthy from "../utils/qs_truthy";
 import { waypointSystem } from "../bit-systems/waypoint";
 import { objectSpawnerSystem } from "../bit-systems/object-spawner";
+import { billboardSystem } from "../bit-systems/billboard";
 
 declare global {
   interface Window {
@@ -184,6 +185,7 @@ export function mainTick(xrFrame: XRFrame, renderer: WebGLRenderer, scene: Scene
   // We run this earlier in the frame so things have a chance to override properties run by animations
   hubsSystems.animationMixerSystem.tick(dt);
 
+  billboardSystem(world, aframeSystems["frame-scheduler"]);
   waypointSystem(world, hubsSystems.characterController, sceneEl.is("frozen"));
   hubsSystems.characterController.tick(t, dt);
   hubsSystems.cursorTogglingSystem.tick(aframeSystems.interaction, aframeSystems.userinput, hubsSystems.el);

src/utils/jsx-entity.ts

@@ -33,7 +33,8 @@ import {
   SceneRoot,
   NetworkDebug,
   WaypointPreview,
-  NetworkedFloatyObject
+  NetworkedFloatyObject,
+  Billboard
 } from "../bit-components";
 import { inflateMediaLoader } from "../inflators/media-loader";
 import { inflateMediaFrame } from "../inflators/media-frame";
@@ -301,6 +302,7 @@ export interface JSXComponentData extends ComponentData {
   model?: ModelParams;
   networkDebug?: boolean;
   waypointPreview?: boolean;
+  billboard?: { onlyY: boolean };
 }
 
 export interface GLTFComponentData extends ComponentData {
@@ -317,6 +319,7 @@ export interface GLTFComponentData extends ComponentData {
   skybox: SkyboxParams;
   fog: FogParams;
   background: BackgroundParams;
+  billboard?: { onlyY: boolean };
 }
 
 declare global {
@@ -334,6 +337,8 @@ declare global {
   }
 }
 
+export const billboardInflator = createDefaultInflator(Billboard);
+
 export const commonInflators: Required<{ [K in keyof ComponentData]: InflatorFn }> = {
   grabbable: inflateGrabbable,
 
@@ -374,6 +379,7 @@ const jsxInflators: Required<{ [K in keyof JSXComponentData]: InflatorFn }> = {
   networkDebug: createDefaultInflator(NetworkDebug),
   waypointPreview: createDefaultInflator(WaypointPreview),
   mediaLoader: inflateMediaLoader,
+  billboard: billboardInflator,
 
   // inflators that create Object3Ds
   mediaFrame: inflateMediaFrame,
@@ -397,7 +403,8 @@ export const gltfInflators: Required<{ [K in keyof GLTFComponentData]: InflatorF
   background: inflateBackground,
   spawnPoint: inflateSpawnpoint,
   skybox: inflateSkybox,
-  spawner: inflateSpawner
+  spawner: inflateSpawner,
+  billboard: billboardInflator
 };
 
 function jsxInflatorExists(name: string): name is keyof JSXComponentData {

types/aframe.d.ts

@@ -84,6 +84,11 @@ declare module "aframe" {
     mesh?: Mesh;
   }
 
+  interface FrameSchedulerSystem extends ASystem {
+    schedule(func: Function, queue: string);
+    unschedule(func: Function, queue: string);
+  }
+
   interface AScene extends AElement {
     object3D: Scene;
     renderStarted: boolean;
@@ -100,16 +105,25 @@ declare module "aframe" {
       /** @deprecated see bit-interaction-system */
       interaction: InteractionSystem;
       nav: NavSystem;
+      "frame-scheduler": FrameSchedulerSystem;
     };
     emit(string, any): void;
     addState(string): void;
     is(string): boolean;
   }
 
+  interface Device {
+    isMobileVR: Function;
+  }
+  interface Utils {
+    device: Device;
+  }
+
   declare global {
     const AFRAME: {
       registerSystem(name: string, def: Partial<ASystem>);
       scenes: AScene[];
+      utils: Util;
     };
   }
 }