IR-2746-Optimize-performance-of-webpages-when-not-rendering-3d-world

src/CustomLocationPage.tsx

@@ -1,14 +1,16 @@
 import React, { useEffect } from 'react'
 
 import Debug from '@etherealengine/client-core/src/components/Debug'
-import { defineState, getMutableState, getState } from '@etherealengine/hyperflux'
+import { defineState, getMutableState, getState, useMutableState } from '@etherealengine/hyperflux'
 import '@etherealengine/spatial/src/renderer/WebGLRendererSystem'
 
 import { BoxGeometry, Mesh, MeshBasicMaterial } from 'three'
 
-import { Entity, createEntity, defineSystem, getComponent, setComponent } from '@etherealengine/ecs'
+import { useEngineCanvas } from '@etherealengine/client-core/src/hooks/useEngineCanvas'
+import { UndefinedEntity, createEntity, defineSystem, getComponent, setComponent } from '@etherealengine/ecs'
 import { ECSState } from '@etherealengine/ecs/src/ECSState'
 import { Engine } from '@etherealengine/ecs/src/Engine'
+import { EngineState } from '@etherealengine/spatial/src/EngineState'
 import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
 import { Vector3_Up } from '@etherealengine/spatial/src/common/constants/MathConstants'
@@ -20,13 +22,8 @@ import { TransformSystem, computeTransformMatrix } from '@etherealengine/spatial
 
 const SceneState = defineState({
   name: 'ee.minimalist.SceneState',
-  initial: () => {
-    const entity = createEntity()
-    setComponent(entity, TransformComponent)
-    setComponent(entity, EntityTreeComponent, { parentEntity: Engine.instance.originEntity })
-    return {
-      entity
-    }
+  initial: {
+    entity: UndefinedEntity
   }
 })
 
@@ -35,37 +32,52 @@ const UpdateSystem = defineSystem({
   insert: { before: TransformSystem },
   execute: () => {
     const entity = getState(SceneState).entity
+    if (!entity) return
+
     const elapsedSeconds = getState(ECSState).elapsedSeconds
     const transformComponent = getComponent(entity, TransformComponent)
     transformComponent.rotation.setFromAxisAngle(Vector3_Up, elapsedSeconds)
   },
   reactor: function () {
-    const state = getMutableState(SceneState)
+    const viewerEntity = useMutableState(EngineState).viewerEntity.value
 
     useEffect(() => {
+      if (!viewerEntity) return
+
+      // Create a new entity
+      const entity = createEntity()
+      setComponent(entity, TransformComponent)
+      setComponent(entity, EntityTreeComponent, { parentEntity: Engine.instance.originEntity })
+
       // Create a box at the origin
-      const entity = state.entity.value as Entity
       const mesh = new Mesh(new BoxGeometry(1, 1, 1), new MeshBasicMaterial({ color: 0x00ff00 }))
       addObjectToGroup(entity, mesh)
       setComponent(entity, NameComponent, 'Box')
       setComponent(entity, VisibleComponent)
 
       // Make the camera look at the box
-      const cameraTransform = getComponent(Engine.instance.cameraEntity, TransformComponent)
-      const camera = getComponent(Engine.instance.cameraEntity, CameraComponent)
+      const cameraTransform = getComponent(viewerEntity, TransformComponent)
+      const camera = getComponent(viewerEntity, CameraComponent)
       cameraTransform.position.set(5, 2, 0)
       cameraTransform.rotation.copy(camera.quaternion)
-      computeTransformMatrix(Engine.instance.cameraEntity)
+      computeTransformMatrix(viewerEntity)
       camera.lookAt(0, 0, 0)
-    }, [])
+
+      getMutableState(SceneState).entity.set(entity)
+    }, [viewerEntity])
 
     return null
   }
 })
 
 export default function Template() {
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  useEngineCanvas(ref)
+
   return (
     <>
+      <div ref={ref} style={{ width: '100%', height: '100%' }} />
       <Debug />
     </>
   )

src/engine.tsx

@@ -27,20 +27,16 @@ import React, { Suspense } from 'react'
 
 /** @todo due to circular dependences, engine must be imported prior to other imports */
 import { LoadingCircle } from '@etherealengine/client-core/src/components/LoadingCircle'
-import { initializeBrowser } from '@etherealengine/engine/src/initializeBrowser'
 import { getMutableState } from '@etherealengine/hyperflux'
 import { EngineState } from '@etherealengine/spatial/src/EngineState'
 import { createEngine } from '@etherealengine/spatial/src/initializeEngine'
 
-createEngine(document.getElementById('engine-renderer-canvas') as HTMLCanvasElement)
+createEngine()
 getMutableState(EngineState).publicPath.set(
   // @ts-ignore
   import.meta.env.BASE_URL === '/client/' ? location.origin : import.meta.env.BASE_URL!.slice(0, -1) // remove trailing '/'
 )
-initializeBrowser()
 
 export default function ({ children }) {
-  return (
-    <Suspense fallback={<LoadingCircle message={'Loading...'} />}>{children}</Suspense>
-  )
+  return <Suspense fallback={<LoadingCircle message={'Loading...'} />}>{children}</Suspense>
 }