Move environment specific components to bundle

scripts/default.env

@@ -4,3 +4,4 @@ ORIGIN_TRIAL_TOKEN="AgN/JtqSF6qpD3OZk8KgM5/UYqUUrwc166cOQSRCqvU+TIpHWdiwBUWH5V1K
 ORIGIN_TRIAL_EXPIRES="2018-05-15"
 JANUS_SERVER="wss://prod-janus.reticulum.io"
 DEV_RETICULUM_SERVER="dev.reticulum.io"
+ASSET_BUNDLE_SERVER="https://asset-bundles-prod.reticulum.io"

src/assets/environments/environments.js

@@ -0,0 +1,7 @@
+export const ENVIRONMENT_URLS = [
+  process.env.ASSET_BUNDLE_SERVER + "/rooms/meetingroom/MeetingRoom.bundle.json",
+  process.env.ASSET_BUNDLE_SERVER + "/rooms/atrium/Atrium.bundle.json",
+  process.env.ASSET_BUNDLE_SERVER + "/rooms/MedievalFantasyBook/MedievalFantasyBook.bundle.json"
+];
+
+export const DEFAULT_ENVIRONMENT_URL = ENVIRONMENT_URLS[0];

src/components/css-class.js

@@ -0,0 +1,17 @@
+AFRAME.registerComponent("css-class", {
+  schema: {
+    type: "string"
+  },
+  init() {
+    this.el.classList.add(this.data);
+  },
+  update(oldData) {
+    if (this.data !== oldData) {
+      this.el.classList.remove(oldData);
+      this.el.classList.add(this.data);
+    }
+  },
+  remove() {
+    this.el.classList.remove(this.data);
+  }
+});

src/components/scene-shadow.js

@@ -0,0 +1,30 @@
+// For use in environment gltf bundles to set scene shadow properties.
+AFRAME.registerComponent("scene-shadow", {
+  schema: {
+    autoUpdate: {
+      type: "boolean",
+      default: true
+    },
+    type: {
+      type: "string",
+      default: "pcf"
+    },
+    renderReverseSided: {
+      type: "boolean",
+      default: true
+    },
+    renderSingleSided: {
+      type: "boolean",
+      default: true
+    }
+  },
+  init() {
+    this.originalShadowProperties = this.el.sceneEl.getAttribute("shadow");
+  },
+  update() {
+    this.el.sceneEl.setAttribute("shadow", this.data);
+  },
+  remove() {
+    this.el.sceneEl.setAttribute("shadow", this.originalShadowProperties);
+  }
+});

src/components/spawn-controller.js

@@ -1,31 +1,26 @@
 AFRAME.registerComponent("spawn-controller", {
   schema: {
-    radius: { type: "number", default: 1 }
+    target: { type: "selector" },
+    loadedEvent: { type: "string" }
   },
-
   init() {
-    const el = this.el;
-    const center = el.getAttribute("position");
+    this.onLoad = this.onLoad.bind(this);
+    this.data.target.addEventListener(this.data.loadedEvent, this.onLoad);
+  },
+  onLoad() {
+    const spawnPoints = document.querySelectorAll("[spawn-point]");
 
-    const angleRad = Math.random() * 2 * Math.PI;
-    const circlePoint = this.getPointOnCircle(this.data.radius, angleRad);
-    const worldPoint = {
-      x: circlePoint.x + center.x,
-      y: center.y,
-      z: circlePoint.z + center.z
-    };
-    el.setAttribute("position", worldPoint);
+    if (spawnPoints.length === 0) {
+      // Keep default position
+      return;
+    }
 
-    const angleDeg = angleRad * THREE.Math.RAD2DEG;
-    const angleToCenter = -1 * angleDeg + 90;
-    el.setAttribute("rotation", { x: 0, y: angleToCenter, z: 0 });
+    const spawnPointIndex = Math.round((spawnPoints.length - 1) * Math.random());
+    const spawnPoint = spawnPoints[spawnPointIndex];
 
-    el.object3D.updateMatrix();
-  },
-
-  getPointOnCircle(radius, angleRad) {
-    const x = Math.cos(angleRad) * radius;
-    const z = Math.sin(angleRad) * radius;
-    return { x: x, z: z };
+    spawnPoint.object3D.getWorldPosition(this.el.object3D.position);
+    this.el.object3D.rotation.copy(spawnPoint.object3D.rotation);
   }
 });
+
+AFRAME.registerComponent("spawn-point", {});

src/components/water.js

@@ -148,10 +148,14 @@ AFRAME.registerComponent("water", {
     distance: { type: "number", default: 1 },
     speed: { type: "number", default: 0.1 },
     forceMobile: { type: "boolean", default: false },
-    normalMap: { type: "asset" }
+    normalMap: { type: "asset", default: "#water-normal-map" }
   },
   init() {
-    const waterGeometry = new THREE.PlaneBufferGeometry(800, 800);
+    const waterMesh = this.el.getObject3D("mesh");
+    const waterGeometry = waterMesh.geometry;
+
+    // Render THREE.Water shader instead of THREE.Mesh
+    waterMesh.visible = false;
 
     const waterNormals = new THREE.Texture(this.data.normalMap);
     waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;
@@ -223,5 +227,7 @@ AFRAME.registerComponent("water", {
 
   remove() {
     this.el.removeObject3D("water");
+    const waterMesh = this.el.getObject3D("mesh");
+    waterMesh.visible = true;
   }
 });

src/gltf-component-mappings.js

@@ -1,10 +1,27 @@
 import "./components/gltf-model-plus";
 import { resolveURL } from "./utils/resolveURL";
 
+AFRAME.GLTFModelPlus.registerComponent("quack", "quack");
+AFRAME.GLTFModelPlus.registerComponent("sound", "sound");
+AFRAME.GLTFModelPlus.registerComponent("collision-filter", "collision-filter");
+AFRAME.GLTFModelPlus.registerComponent("css-class", "css-class");
+AFRAME.GLTFModelPlus.registerComponent("scene-shadow", "scene-shadow");
+AFRAME.GLTFModelPlus.registerComponent("super-spawner", "super-spawner");
+AFRAME.GLTFModelPlus.registerComponent("gltf-model-plus", "gltf-model-plus");
+AFRAME.GLTFModelPlus.registerComponent("body", "body");
+AFRAME.GLTFModelPlus.registerComponent("hide-when-quality", "hide-when-quality");
+AFRAME.GLTFModelPlus.registerComponent("light", "light");
+AFRAME.GLTFModelPlus.registerComponent("skybox", "skybox");
+AFRAME.GLTFModelPlus.registerComponent("layers", "layers");
+AFRAME.GLTFModelPlus.registerComponent("shadow", "shadow");
+AFRAME.GLTFModelPlus.registerComponent("xr", "xr");
+AFRAME.GLTFModelPlus.registerComponent("water", "water");
 AFRAME.GLTFModelPlus.registerComponent("scale-audio-feedback", "scale-audio-feedback");
+AFRAME.GLTFModelPlus.registerComponent("animation-mixer", "animation-mixer");
 AFRAME.GLTFModelPlus.registerComponent("loop-animation", "loop-animation");
 AFRAME.GLTFModelPlus.registerComponent("shape", "shape");
 AFRAME.GLTFModelPlus.registerComponent("visible", "visible");
+AFRAME.GLTFModelPlus.registerComponent("spawn-point", "spawn-point");
 AFRAME.GLTFModelPlus.registerComponent("nav-mesh", "nav-mesh", (el, componentName, componentData, gltfPath) => {
   if (componentData.src) {
     componentData.src = resolveURL(componentData.src, gltfPath);

src/hub.html

@@ -190,19 +190,6 @@
         <!-- Interactables -->
         <a-entity id="counter" networked-counter="max: 3; ttl: 120"></a-entity>
 
-        <a-entity 
-            gltf-model-plus="src: #interactable-duck"
-            scale="2 2 2"
-            class="interactable" 
-            super-spawner="template: #interactable-template;" 
-            position="2.9 1.2 0" 
-            body="mass: 0; type: static; shape: box;"
-            collision-filter="collisionForces: false;"
-            quack
-            sound__quack="src: #quack; on: quack; poolSize: 2;"
-            sound__specialquack="src: #specialquack; on: specialquack;"
-        ></a-entity>
-
         <a-entity
             id="cursor-controller"
             cursor-controller="
@@ -236,7 +223,7 @@
         <a-entity
             id="player-rig"
             networked="template: #remote-avatar-template; attachTemplateToLocal: false;"
-            spawn-controller="radius: 4;"
+            spawn-controller="loadedEvent: bundleloaded; target: #environment-root"
             wasd-to-analog2d
             character-controller="pivot: #player-camera"
             ik-root
@@ -357,37 +344,12 @@
             </a-entity>
         </a-entity>
 
-        <!-- Lights -->
-        <a-entity
-            hide-when-quality="low"
-            light="type: directional; color: #F9FFCE; intensity: 0.6"
-            position="0.002 5.231 -15.3"
-        ></a-entity>
-
         <!-- Environment -->
         <a-entity 
             id="environment-root" 
             nav-mesh-helper
             static-body="shape: none;"
         ></a-entity>
-
-        <a-entity
-            id="skybox"
-            scale="8000 8000 8000"
-            skybox="azimuth:0.280; inclination:0.440"
-            light="type: ambient; color: #FFF"
-            layers="reflection:true"
-            xr="ar: false"
-        ></a-entity>
-
-        <a-entity
-            id="water"
-            water="forceMobile: true; normalMap:#water-normal-map"
-            rotation="-90 0 0"
-            position="0 -88.358 -332.424"
-            xr="ar: false"
-        ></a-entity>
-
     </a-scene>
 
     <div id="ui-root"></div>

src/hub.js

@@ -57,6 +57,8 @@ import "./components/block-button";
 import "./components/visible-while-frozen";
 import "./components/stats-plus";
 import "./components/networked-avatar";
+import "./components/css-class";
+import "./components/scene-shadow";
 
 import ReactDOM from "react-dom";
 import React from "react";
@@ -68,6 +70,7 @@ import "./systems/app-mode";
 import "./systems/exit-on-blur";
 
 import "./gltf-component-mappings";
+import { DEFAULT_ENVIRONMENT_URL } from "./assets/environments/environments";
 
 import { App } from "./App";
 
@@ -347,10 +350,7 @@ const onReady = async () => {
     // If ?room is set, this is `yarn start`, so just use a default environment and query string room.
     remountUI({ janusRoomId: qs.room && !isNaN(parseInt(qs.room)) ? parseInt(qs.room) : 1 });
     initialEnvironmentEl.setAttribute("gltf-bundle", {
-      src: "https://asset-bundles-prod.reticulum.io/rooms/meetingroom/MeetingRoom.bundle.json"
-      // src: "https://asset-bundles-prod.reticulum.io/rooms/theater/TheaterMeshes.bundle.json"
-      // src: "https://asset-bundles-prod.reticulum.io/rooms/atrium/AtriumMeshes.bundle.json"
-      // src: "https://asset-bundles-prod.reticulum.io/rooms/courtyard/CourtyardMeshes.bundle.json"
+      src: DEFAULT_ENVIRONMENT_URL
     });
     return;
   }

src/react-components/home-root.js

@@ -4,6 +4,7 @@ import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
 import en from "react-intl/locale-data/en";
 import homeVideo from "../assets/video/home.webm";
 import classNames from "classnames";
+import { ENVIRONMENT_URLS } from "../assets/environments/environments";
 
 import HubCreatePanel from "./hub-create-panel.js";
 import InfoDialog from "./info-dialog.js";
@@ -17,14 +18,6 @@ addLocaleData([...en]);
 
 const messages = localeData[lang] || localeData.en;
 
-const ENVIRONMENT_URLS = [
-  "https://asset-bundles-prod.reticulum.io/rooms/meetingroom/MeetingRoom.bundle.json",
-  "https://asset-bundles-prod.reticulum.io/rooms/theater/Theater.bundle.json",
-  "https://asset-bundles-prod.reticulum.io/rooms/atrium/Atrium.bundle.json",
-  "https://asset-bundles-prod.reticulum.io/rooms/courtyard/Courtyard.bundle.json",
-  "https://asset-bundles-prod.reticulum.io/rooms/MedievalFantasyBook/MedievalFantasyBook.bundle.json"
-];
-
 class HomeRoot extends Component {
   static propTypes = {
     intl: PropTypes.object,

src/react-components/hub-create-panel.js

@@ -6,6 +6,7 @@ import classNames from "classnames";
 import faAngleLeft from "@fortawesome/fontawesome-free-solid/faAngleLeft";
 import faAngleRight from "@fortawesome/fontawesome-free-solid/faAngleRight";
 import FontAwesomeIcon from "@fortawesome/react-fontawesome";
+import { resolveURL, extractUrlBase } from "../utils/resolveURL";
 
 import default_scene_preview_thumbnail from "../assets/images/default_thumbnail.png";
 
@@ -42,11 +43,24 @@ class HubCreatePanel extends Component {
   _getEnvironmentThumbnail = environmentIndex => {
     const environment = this.props.environments[environmentIndex];
     const meta = environment.meta || {};
-    return (
-      (meta.images || []).find(i => i.type === "preview-thumbnail") || {
-        srcset: default_scene_preview_thumbnail
+
+    let environmentThumbnail = {
+      srcset: default_scene_preview_thumbnail
+    };
+
+    if (meta.images) {
+      const thumbnailImage = meta.images.find(i => i.type === "preview-thumbnail");
+
+      if (thumbnailImage) {
+        const baseURL = new URL(extractUrlBase(environment.bundle_url), window.location.href);
+
+        environmentThumbnail = {
+          srcset: resolveURL(thumbnailImage.srcset, baseURL)
+        };
       }
-    );
+    }
+
+    return environmentThumbnail;
   };
 
   createHub = async e => {

src/utils/resolveURL.js

@@ -15,3 +15,11 @@ export function resolveURL(url, path) {
   // Relative URL
   return path + url;
 }
+
+export function extractUrlBase(url) {
+  const index = url.lastIndexOf("/");
+
+  if (index === -1) return "./";
+
+  return url.substr(0, index + 1);
+}

webpack.config.js

@@ -234,7 +234,8 @@ const config = {
       "process.env": JSON.stringify({
         NODE_ENV: process.env.NODE_ENV,
         JANUS_SERVER: process.env.JANUS_SERVER,
-        DEV_RETICULUM_SERVER: process.env.DEV_RETICULUM_SERVER
+        DEV_RETICULUM_SERVER: process.env.DEV_RETICULUM_SERVER,
+        ASSET_BUNDLE_SERVER: process.env.ASSET_BUNDLE_SERVER
       })
     })
   ]