Merge pull request #93 from EtherealEngine/IR-2746-Optimize-performan…

…ce-of-webpages-when-not-rendering-3d-world Ir 2746 optimize performance of webpages when not rendering 3d world
EtherealEngine · Jun 25, 2024 · 7b93735 · 7b93735
2 parents e9c976d + fc66af0
commit 7b93735
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 34 deletions.
diff --git a/public/scenes/Benchmarks.gltf b/public/scenes/Benchmarks.gltf
@@ -42,7 +42,7 @@
           "bakeType": "Baked",
           "resolution": 2048,
           "refreshMode": "OnAwake",
-          "envMapOrigin": "https://localhost:8642/projects/default-project/default.envmap.ktx2",
+          "envMapOrigin": "__$project$__/default-project/default.envmap.ktx2",
           "boxProjection": true
         },
         "EE_fog": {
@@ -211,8 +211,8 @@
           "shadowMapType": 2
         },
         "EE_scene_settings": {
-          "thumbnailURL": "https://localhost:8642/projects/default-project/default.thumbnail.jpg",
-          "loadingScreenURL": "https://localhost:8642/projects/default-project/default.loadingscreen.ktx2",
+          "thumbnailURL": "__$project$__/default-project/public/scenes/default.thumbnail.jpg",
+          "loadingScreenURL": "__$project$__/default-project/public/scenes/default.loadingscreen.ktx2",
           "primaryColor": "#38620D",
           "backgroundColor": "rgb(214, 214, 211)",
           "alternativeColor": "#376312",
@@ -254,7 +254,7 @@
         "EE_skybox": {
           "backgroundColor": 0,
           "equirectangularPath": "",
-          "cubemapPath": "https://localhost:8642/projects/default-project/assets/skyboxsun25deg/",
+          "cubemapPath": "__$project$__/default-project/assets/skyboxsun25deg/",
           "backgroundType": 1,
           "skyboxProps": {
             "turbidity": 10,

diff --git a/public/scenes/Examples.gltf b/public/scenes/Examples.gltf
@@ -210,8 +210,8 @@
           "shadowMapType": 2
         },
         "EE_scene_settings": {
-          "thumbnailURL": "__$project$__/default-project/default.thumbnail.jpg",
-          "loadingScreenURL": "__$project$__/default-project/default.loadingscreen.ktx2",
+          "thumbnailURL": "__$project$__/default-project/public/scenes/default.thumbnail.jpg",
+          "loadingScreenURL": "__$project$__/default-project/public/scenesdefault.loadingscreen.ktx2",
           "primaryColor": "#38620D",
           "backgroundColor": "rgb(214, 214, 211)",
           "alternativeColor": "#376312",

diff --git a/src/sceneRoute.tsx b/src/sceneRoute.tsx
@@ -5,16 +5,18 @@ import React, { useEffect, useRef, useState } from 'react'
 
 import { useLoadEngineWithScene, useNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
 import { useLoadScene } from '@etherealengine/client-core/src/components/World/LoadLocationScene'
+import { useEngineCanvas } from '@etherealengine/client-core/src/hooks/useEngineCanvas'
+import '@etherealengine/client-core/src/world/LocationModule'
+import { staticResourcePath } from '@etherealengine/common/src/schema.type.module'
+import { Entity, getComponent, setComponent } from '@etherealengine/ecs'
 import '@etherealengine/engine/src/EngineModule'
-import { Engine, Entity, getComponent, setComponent } from '@etherealengine/ecs'
 import { GLTFAssetState } from '@etherealengine/engine/src/gltf/GLTFState'
 import { useHookstate, useImmediateEffect, useMutableState } from '@etherealengine/hyperflux'
+import { EngineState } from '@etherealengine/spatial/src/EngineState'
 import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
 import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/components/CameraOrbitComponent'
-import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
-import { RendererComponent } from '@etherealengine/spatial/src/renderer/WebGLRendererSystem'
-import { staticResourcePath } from '@etherealengine/common/src/schema.type.module'
 import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
+import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
 
 type Metadata = {
   name: string
@@ -62,6 +64,7 @@ export const useRouteScene = (projectName = 'ee-development-test-suite', sceneNa
 
   const gltfState = useMutableState(GLTFAssetState)
   const sceneEntity = useHookstate<undefined | Entity>(undefined)
+  const viewerEntity = useMutableState(EngineState).viewerEntity.value
 
   useEffect(() => {
     if (!assetQuery.data[0]) return
@@ -72,11 +75,11 @@ export const useRouteScene = (projectName = 'ee-development-test-suite', sceneNa
   }, [assetQuery.data, gltfState])
 
   useImmediateEffect(() => {
-    const entity = Engine.instance.viewerEntity
-    setComponent(entity, CameraOrbitComponent)
-    setComponent(entity, InputComponent)
-    getComponent(entity, CameraComponent).position.set(0, 0, 4)
-  }, [])
+    if (!viewerEntity) return
+    setComponent(viewerEntity, CameraOrbitComponent)
+    setComponent(viewerEntity, InputComponent)
+    getComponent(viewerEntity, CameraComponent).position.set(0, 0, 4)
+  }, [viewerEntity])
 
   return sceneEntity
 }
@@ -91,6 +94,8 @@ const Routes = (props: { routes: RouteData[]; header: string }) => {
 
   const ref = useRef(null as null | HTMLDivElement)
 
+  useEngineCanvas(ref)
+
   const onClick = (routeIndex: number) => {
     setCurrentRoute(routeIndex)
     setCurrentSubRoute(0)
@@ -123,29 +128,11 @@ const Routes = (props: { routes: RouteData[]; header: string }) => {
     window.history.pushState(null, '', url.toString())
   }, [currentRoute, currentSubRoute])
 
-  useEffect(() => {
-    if (!ref?.current) return
-
-    const canvas = getComponent(Engine.instance.viewerEntity, RendererComponent).renderer.domElement
-    canvas.parentElement?.removeChild(canvas)
-    ref.current.appendChild(canvas)
-
-    getComponent(Engine.instance.viewerEntity, RendererComponent).needsResize = true
-
-    const observer = new ResizeObserver(() => {
-      getComponent(Engine.instance.viewerEntity, RendererComponent).needsResize = true
-    })
-
-    observer.observe(ref.current)
-    return () => {
-      observer.disconnect()
-    }
-  }, [ref])
-
   const selectedRoute = currentRoute !== null ? routes[currentRoute] : null
   const selectedSub = selectedRoute && selectedRoute.sub && selectedRoute.sub[currentSubRoute]
   const Entry = selectedRoute && selectedRoute.entry
   const subProps = selectedSub ? selectedSub.props : {}
+
   return (
     <>
       <style type="text/css">{styles.toString()}</style>