Added more console logging to track progress during loading

src/components/gltf-model-plus.js

@@ -540,6 +540,7 @@ export async function loadGLTF(src, contentType, onProgress, jsonPreprocessor) {
 }
 
 export async function loadModel(src, contentType = null, useCache = false, jsonPreprocessor = null) {
+  console.log(`Loading model ${src}`);
   if (useCache) {
     if (gltfCache.has(src)) {
       gltfCache.retain(src);

src/hub.js

@@ -277,6 +277,7 @@ if (!isOAuthModal) {
 }
 
 function setupLobbyCamera() {
+  console.log("Setting up lobby camera");
   const camera = document.getElementById("scene-preview-node");
   const previewCamera = document.getElementById("environment-scene").object3D.getObjectByName("scene-preview-camera");
 
@@ -388,6 +389,7 @@ export async function getSceneUrlForHub(hub) {
 }
 
 export async function updateEnvironmentForHub(hub, entryManager) {
+  console.log("Updating environment for hub");
   const sceneUrl = await getSceneUrlForHub(hub);
 
   const sceneErrorHandler = () => {
@@ -399,6 +401,7 @@ export async function updateEnvironmentForHub(hub, entryManager) {
   const sceneEl = document.querySelector("a-scene");
 
   console.log(`Scene URL: ${sceneUrl}`);
+  const loadStart = performance.now();
 
   let environmentEl = null;
 
@@ -410,6 +413,8 @@ export async function updateEnvironmentForHub(hub, entryManager) {
       () => {
         environmentEl.removeEventListener("model-error", sceneErrorHandler);
 
+        console.log(`Scene file inital load took ${Math.round(performance.now() - loadStart)}ms`);
+
         // Show the canvas once the model has loaded
         document.querySelector(".a-canvas").classList.remove("a-hidden");
 
@@ -441,6 +446,7 @@ export async function updateEnvironmentForHub(hub, entryManager) {
           "model-loaded",
           () => {
             environmentEl.removeEventListener("model-error", sceneErrorHandler);
+            console.log(`Scene file update load took ${Math.round(performance.now() - loadStart)}ms`);
             traverseMeshesAndAddShapes(environmentEl);
 
             // We've already entered, so move to new spawn point once new environment is loaded
@@ -589,6 +595,8 @@ function handleHubChannelJoined(entryManager, hubChannel, messageDispatch, data,
     while (!scene.components["networked-scene"] || !scene.components["networked-scene"].data) await nextTick();
 
     const loadEnvironmentAndConnect = () => {
+      console.log("Loading environment and connecting to dialog servers")
+
       updateEnvironmentForHub(hub, entryManager);
 
       // Disconnect in case this is a re-entry
@@ -628,10 +636,13 @@ function handleHubChannelJoined(entryManager, hubChannel, messageDispatch, data,
     scene.emit("hub_updated", { hub });
 
     if (!isEmbed) {
+      console.log("Page is not embedded so environment initialization will start immediately");
       loadEnvironmentAndConnect();
     } else {
+      console.log("Page is embedded so environment initialization will be deferred");
       remountUI({
         onPreloadLoadClicked: () => {
+          console.log("Preload has been activated");
           hubChannel.allowNAFTraffic(true);
           remountUI({ showPreload: false });
           loadEnvironmentAndConnect();
@@ -642,6 +653,7 @@ function handleHubChannelJoined(entryManager, hubChannel, messageDispatch, data,
 }
 
 async function runBotMode(scene, entryManager) {
+  console.log("Running in bot mode...");
   const noop = () => {};
   const alwaysFalse = () => false;
   scene.renderer = {
@@ -977,6 +989,8 @@ document.addEventListener("DOMContentLoaded", async () => {
   );
 
   environmentScene.addEventListener("model-loaded", ({ detail: { model } }) => {
+    console.log("Environment scene has loaded");
+
     if (!scene.is("entered")) {
       setupLobbyCamera();
     }

src/react-components/room/useRoomLoadingState.js

@@ -108,6 +108,7 @@ export function useRoomLoadingState(sceneEl) {
       // Once the scene has loaded the dependencies to this hook will change,
       // the event listeners will be removed, and we can prevent adding them again.
       if (loading) {
+        console.log("Attaching room state event listeners");
         sceneEl.addEventListener("model-loading", onObjectLoading);
         sceneEl.addEventListener("image-loading", onObjectLoading);
         sceneEl.addEventListener("pdf-loading", onObjectLoading);
@@ -120,6 +121,7 @@ export function useRoomLoadingState(sceneEl) {
       }
 
       return () => {
+        console.log("Removing room state event listeners");
         sceneEl.removeEventListener("model-loading", onObjectLoading);
         sceneEl.removeEventListener("image-loading", onObjectLoading);
         sceneEl.removeEventListener("pdf-loading", onObjectLoading);

src/react-components/ui-root.js

@@ -361,6 +361,7 @@ class UIRoot extends Component {
       this.props.scene.addEventListener(
         "loading_finished",
         () => {
+          console.log("Loading has finished. Checking for forced room entry")
           setTimeout(() => this.handleForceEntry(), 1000);
         },
         { once: true }
@@ -443,6 +444,7 @@ class UIRoot extends Component {
   };
 
   onLoadingFinished = () => {
+    console.log("UI root loading has finished");
     this.setState({ noMoreLoadingUpdates: true });
     this.props.scene.emit("loading_finished");
 
@@ -452,6 +454,7 @@ class UIRoot extends Component {
   };
 
   onSceneLoaded = () => {
+    console.log("UI root scene has loaded");
     this.setState({ sceneLoaded: true });
   };
 
@@ -491,6 +494,8 @@ class UIRoot extends Component {
   };
 
   handleForceEntry = () => {
+    console.log("Forced entry type: " + this.props.forcedVREntryType);
+
     if (!this.props.forcedVREntryType) return;
 
     if (this.props.forcedVREntryType.startsWith("daydream")) {
@@ -559,10 +564,12 @@ class UIRoot extends Component {
   };
 
   enter2D = async () => {
+    console.log("Entering in 2D mode");
     await this.performDirectEntryFlow(false);
   };
 
   enterVR = async () => {
+    console.log("Entering in VR mode");
     if (this.props.forcedVREntryType || this.props.availableVREntryTypes.generic !== VR_DEVICE_AVAILABILITY.maybe) {
       await this.performDirectEntryFlow(true);
     } else {
@@ -571,6 +578,7 @@ class UIRoot extends Component {
   };
 
   enterDaydream = async () => {
+    console.log("Entering in Daydream mode");
     await this.performDirectEntryFlow(true);
   };
 
@@ -579,17 +587,19 @@ class UIRoot extends Component {
   };
 
   onRequestMicPermission = async () => {
+    console.log("Microphone permission requested");
     // TODO: Show an error state if getting the microphone permissions fails
     await this.mediaDevicesManager.startLastUsedMicShare();
     this.beginOrSkipAudioSetup();
   };
 
   beginOrSkipAudioSetup = () => {
     const skipAudioSetup = this.props.forcedVREntryType && this.props.forcedVREntryType.endsWith("_now");
-
     if (skipAudioSetup) {
+      console.log(`Skipping audio setup (forcedVREntryType = ${this.props.forcedVREntryType})`);
       this.onAudioReadyButton();
     } else {
+      console.log(`Starting audio setup`);
       this.pushHistoryState("entry_step", "audio");
     }
   };

src/scene-entry-manager.js

@@ -41,6 +41,7 @@ export default class SceneEntryManager {
 
   init = () => {
     this.whenSceneLoaded(() => {
+      console.log("Scene is loaded so setting up controllers");
       this.rightCursorController.components["cursor-controller"].enabled = false;
       this.leftCursorController.components["cursor-controller"].enabled = false;
       this.mediaDevicesManager = window.APP.mediaDevicesManager;
@@ -53,6 +54,7 @@ export default class SceneEntryManager {
   };
 
   enterScene = async (enterInVR, muteOnEntry) => {
+    console.log("Entering scene...");
     document.getElementById("viewing-camera").removeAttribute("scene-preview-camera");
 
     if (isDebug && NAF.connection.adapter.session) {
@@ -124,8 +126,10 @@ export default class SceneEntryManager {
 
   whenSceneLoaded = callback => {
     if (this.scene.hasLoaded) {
+      console.log("Scene already loaded so callback invoked directly");
       callback();
     } else {
+      console.log("Scene not yet loaded so callback is deferred");
       this.scene.addEventListener("loaded", callback);
     }
   };

src/scene.js

@@ -63,6 +63,9 @@ function mountUI(scene, props = {}) {
 }
 
 const onReady = async () => {
+
+  console.log("Scene is ready");
+
   const scene = document.querySelector("a-scene");
   window.APP.scene = scene;
 
@@ -108,9 +111,12 @@ const onReady = async () => {
     const previewCamera = gltfEl.object3D.getObjectByName("scene-preview-camera");
 
     if (previewCamera) {
+      console.log("Setting up preview camera");
       camera.object3D.position.copy(previewCamera.position);
       camera.object3D.rotation.copy(previewCamera.rotation);
       camera.object3D.matrixNeedsUpdate = true;
+    } else {
+      console.warn("No preview camera found");
     }
 
     camera.setAttribute("scene-preview-camera", "");

src/subscriptions.js

@@ -29,14 +29,14 @@ export default class Subscriptions {
           .then(() => {
             navigator.serviceWorker.ready
               .then(registration => this.setRegistration(registration))
-              .catch(() => this.setRegistrationFailed());
+              .catch((e) => this.setRegistrationFailed(e));
           })
-          .catch(() => this.setRegistrationFailed());
+          .catch((e) => this.setRegistrationFailed(e));
       } catch (e) {
-        this.setRegistrationFailed();
+        this.setRegistrationFailed(e);
       }
     } else {
-      this.setRegistrationFailed();
+      this.setRegistrationFailed("Not supported");
     }
   }
 
@@ -45,10 +45,12 @@ export default class Subscriptions {
   };
 
   setRegistration = registration => {
+    console.log("Service worker registered");
     this.registration = registration;
   };
 
-  setRegistrationFailed = () => {
+  setRegistrationFailed = (e) => {
+    console.error("Service worker registration failed", e);
     this.registration = null;
   };
 

src/utils/media-devices-manager.js

@@ -94,6 +94,7 @@ export default class MediaDevicesManager {
   };
 
   async fetchMediaDevices() {
+    console.log("Fetching media devices");
     return new Promise(resolve => {
       navigator.mediaDevices.enumerateDevices().then(mediaDevices => {
         this.micDevices = mediaDevices
@@ -108,6 +109,7 @@ export default class MediaDevicesManager {
   }
 
   async startMicShare(deviceId) {
+    console.log("Starting microphone sharing");
     let constraints = { audio: {} };
     if (deviceId) {
       constraints = { audio: { deviceId: { exact: [deviceId] } } };
@@ -165,6 +167,7 @@ export default class MediaDevicesManager {
     }
 
     try {
+      console.log("Adding microphone media stream");
       const newStream = await navigator.mediaDevices.getUserMedia(constraints);
       this.audioSystem.addStreamToOutboundAudio("microphone", newStream);
       this.audioTrack = newStream.getAudioTracks()[0];