From 59ba57233da907be35e5e6483e3f4ca44d354ee5 Mon Sep 17 00:00:00 2001 From: HexaField Date: Wed, 11 Oct 2023 09:56:01 +1100 Subject: [PATCH] allow the loading screen to be re-enabled upon --- .../src/systems/LoadingUISystem.tsx | 51 +++++++------------ .../src/avatar/functions/avatarFunctions.ts | 7 +-- .../src/camera/systems/CameraSystem.tsx | 1 + .../engine/src/ecs/classes/EngineState.ts | 7 +-- 4 files changed, 25 insertions(+), 41 deletions(-) diff --git a/packages/client-core/src/systems/LoadingUISystem.tsx b/packages/client-core/src/systems/LoadingUISystem.tsx index 477de4e642..511d7ece3a 100755 --- a/packages/client-core/src/systems/LoadingUISystem.tsx +++ b/packages/client-core/src/systems/LoadingUISystem.tsx @@ -31,7 +31,7 @@ import { AssetLoader } from '@etherealengine/engine/src/assets/classes/AssetLoad import createReadableTexture from '@etherealengine/engine/src/assets/functions/createReadableTexture' import { AppLoadingState, AppLoadingStates } from '@etherealengine/engine/src/common/AppLoadingService' import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine' -import { EngineActions, EngineState } from '@etherealengine/engine/src/ecs/classes/EngineState' +import { EngineState } from '@etherealengine/engine/src/ecs/classes/EngineState' import { SceneState } from '@etherealengine/engine/src/ecs/classes/Scene' import { addComponent, @@ -52,7 +52,7 @@ import { import { XRUIComponent } from '@etherealengine/engine/src/xrui/components/XRUIComponent' import { createTransitionState } from '@etherealengine/engine/src/xrui/functions/createTransitionState' import { ObjectFitFunctions } from '@etherealengine/engine/src/xrui/functions/ObjectFitFunctions' -import { defineActionQueue, defineState, getMutableState, getState, useHookstate } from '@etherealengine/hyperflux' +import { defineState, getMutableState, getState, useHookstate } from '@etherealengine/hyperflux' import type { WebLayer3D } from '@etherealengine/xrui' import { CameraComponent } from '@etherealengine/engine/src/camera/components/CameraComponent' @@ -86,7 +86,6 @@ const LoadingUISystemState = defineState({ setObjectLayers(mesh, ObjectLayers.UI) return { - metadataLoaded: false, ui, mesh, transition @@ -94,9 +93,6 @@ const LoadingUISystemState = defineState({ } }) -const avatarModelChangedQueue = defineActionQueue(EngineActions.avatarModelChanged.matches) -const spectateUserQueue = defineActionQueue(EngineActions.spectateUser.matches) - /** Scene Colors */ function setDefaultPalette() { const uiState = getState(LoadingUISystemState).ui.state @@ -120,25 +116,29 @@ const setColors = (image: HTMLImageElement) => { function LoadingReactor() { const loadingState = useHookstate(getMutableState(AppLoadingState)) const loadingProgress = useHookstate(getMutableState(EngineState).loadingProgress) + const sceneLoaded = useHookstate(getMutableState(EngineState).sceneLoaded) + const userReady = useHookstate(getMutableState(EngineState).userReady) const state = useHookstate(getMutableState(LoadingUISystemState)) const sceneData = useHookstate(getMutableState(SceneState).sceneData) const mesh = state.mesh.value - const metadataLoaded = state.metadataLoaded /** Handle loading state changes */ useEffect(() => { const transition = getState(LoadingUISystemState).transition + if (loadingState.state.value === AppLoadingStates.SCENE_LOADING && transition.state === 'OUT') + return transition.setState('IN') + + if (loadingState.state.value === AppLoadingStates.FAIL && transition.state === 'IN') + return transition.setState('OUT') + if ( - loadingState.state.value === AppLoadingStates.SCENE_LOADING && - transition.state === 'OUT' && - metadataLoaded.value - ) { - transition.setState('IN') - } - if (loadingState.state.value === AppLoadingStates.FAIL && transition.state === 'IN') { - transition.setState('OUT') - } - }, [loadingState.state, metadataLoaded]) + loadingState.state.value === AppLoadingStates.SUCCESS && + transition.state === 'IN' && + userReady.value && + sceneLoaded.value + ) + return transition.setState('OUT') + }, [loadingState.state, userReady, sceneLoaded]) /** Scene data changes */ useEffect(() => { @@ -204,25 +204,11 @@ const mainThemeColor = new Color() const defaultColor = new Color() const execute = () => { - const { transition, ui, mesh, metadataLoaded } = getState(LoadingUISystemState) + const { transition, ui, mesh } = getState(LoadingUISystemState) if (!transition) return - const appLoadingState = getState(AppLoadingState) const engineState = getState(EngineState) - for (const action of spectateUserQueue()) { - if (appLoadingState.state === AppLoadingStates.SUCCESS && engineState.sceneLoaded) transition.setState('OUT') - } - - for (const action of avatarModelChangedQueue()) { - if ( - (action.entity === Engine.instance.localClientEntity || engineState.spectating) && - appLoadingState.state === AppLoadingStates.SUCCESS && - engineState.sceneLoaded - ) - transition.setState('OUT') - } - if (transition.state === 'OUT' && transition.alpha === 0) { removeComponent(ui.entity, ComputedTransformComponent) return @@ -299,7 +285,6 @@ const reactor = () => { // removeEntity(ui.entity) // mesh.removeFromParent() // getMutableState(LoadingUISystemState).set({ - // metadataLoaded: false, // ui: null!, // mesh: null!, // transition: null! diff --git a/packages/engine/src/avatar/functions/avatarFunctions.ts b/packages/engine/src/avatar/functions/avatarFunctions.ts index d8c371c274..739b77fc8a 100644 --- a/packages/engine/src/avatar/functions/avatarFunctions.ts +++ b/packages/engine/src/avatar/functions/avatarFunctions.ts @@ -38,12 +38,12 @@ import { Vector3 } from 'three' -import { dispatchAction, getMutableState, getState } from '@etherealengine/hyperflux' +import { getMutableState, getState } from '@etherealengine/hyperflux' import { AssetLoader } from '../../assets/classes/AssetLoader' import { isClient } from '../../common/functions/getEnvironment' import { iOS } from '../../common/functions/isMobile' -import { EngineActions, EngineState } from '../../ecs/classes/EngineState' +import { EngineState } from '../../ecs/classes/EngineState' import { Entity } from '../../ecs/classes/Entity' import { addComponent, @@ -64,6 +64,7 @@ import { AnimationState } from '../AnimationManager' // import { retargetSkeleton, syncModelSkeletons } from '../animation/retargetSkeleton' import config from '@etherealengine/common/src/config' import { GLTF } from '../../assets/loaders/gltf/GLTFLoader' +import { Engine } from '../../ecs/classes/Engine' import avatarBoneMatching, { BoneNames, findSkinnedMeshes, @@ -148,7 +149,7 @@ export const loadAvatarForUser = async ( }) } - dispatchAction(EngineActions.avatarModelChanged({ entity })) + if (entity === Engine.instance.localClientEntity) getMutableState(EngineState).userReady.set(true) } export const setupAvatarForUser = (entity: Entity, model: VRM) => { diff --git a/packages/engine/src/camera/systems/CameraSystem.tsx b/packages/engine/src/camera/systems/CameraSystem.tsx index 9c82a0a969..f2859dd54f 100755 --- a/packages/engine/src/camera/systems/CameraSystem.tsx +++ b/packages/engine/src/camera/systems/CameraSystem.tsx @@ -289,6 +289,7 @@ const execute = () => { for (const action of cameraSpawnActions()) cameraSpawnReceptor(action) for (const action of spectateUserActions()) { + getMutableState(EngineState).userReady.set(true) const cameraEntity = Engine.instance.cameraEntity if (action.user) setComponent(cameraEntity, SpectatorComponent, { userId: action.user as UserID }) else diff --git a/packages/engine/src/ecs/classes/EngineState.ts b/packages/engine/src/ecs/classes/EngineState.ts index dd8ade4172..873860647a 100644 --- a/packages/engine/src/ecs/classes/EngineState.ts +++ b/packages/engine/src/ecs/classes/EngineState.ts @@ -36,6 +36,8 @@ export const EngineState = defineState({ frameTime: Date.now(), simulationTime: Date.now(), + userReady: false, + deltaSeconds: 0, elapsedSeconds: 0, @@ -109,9 +111,4 @@ export class EngineActions { targetEntity: matchesEntity.optional(), handedness: matches.string as Validator }) - - static avatarModelChanged = defineAction({ - type: 'xre.engine.Engine.AVATAR_MODEL_CHANGED' as const, - entity: matchesEntity - }) }