From e86006affa35eb4e8e03a34418b372b71f55fb5e Mon Sep 17 00:00:00 2001 From: Rupert Rawnsley Date: Wed, 25 Aug 2021 09:43:18 +0100 Subject: [PATCH] Added more console logging to track progress during loading --- src/components/gltf-model-plus.js | 1 + src/hub.js | 14 ++++++++++++++ src/react-components/room/useRoomLoadingState.js | 2 ++ src/react-components/ui-root.js | 12 +++++++++++- src/scene-entry-manager.js | 4 ++++ src/scene.js | 6 ++++++ src/subscriptions.js | 12 +++++++----- src/utils/media-devices-manager.js | 3 +++ 8 files changed, 48 insertions(+), 6 deletions(-) diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js index 86a410b802..cea0f54c25 100644 --- a/src/components/gltf-model-plus.js +++ b/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); diff --git a/src/hub.js b/src/hub.js index c2106241ab..c4b435fd02 100644 --- a/src/hub.js +++ b/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(); } diff --git a/src/react-components/room/useRoomLoadingState.js b/src/react-components/room/useRoomLoadingState.js index 92d79167a5..1279a55256 100644 --- a/src/react-components/room/useRoomLoadingState.js +++ b/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); diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js index 88186fd844..7b834ed279 100644 --- a/src/react-components/ui-root.js +++ b/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,6 +587,7 @@ 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(); @@ -586,10 +595,11 @@ class UIRoot extends Component { 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"); } }; diff --git a/src/scene-entry-manager.js b/src/scene-entry-manager.js index 7e8d73bc52..2f2e75baea 100644 --- a/src/scene-entry-manager.js +++ b/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); } }; diff --git a/src/scene.js b/src/scene.js index d7aa88b632..7e54e5ae0f 100644 --- a/src/scene.js +++ b/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", ""); diff --git a/src/subscriptions.js b/src/subscriptions.js index 54c5d75457..767c3be4ec 100644 --- a/src/subscriptions.js +++ b/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; }; diff --git a/src/utils/media-devices-manager.js b/src/utils/media-devices-manager.js index 253ee300c1..dcc1310d61 100644 --- a/src/utils/media-devices-manager.js +++ b/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];