Merge pull request #7 from EtherealEngine/IR-2746-Optimize-performanc…

…e-of-webpages-when-not-rendering-3d-world

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

package.json

@@ -2,6 +2,7 @@
   "name": "ee-static-build-template",
   "version": "0.0.0",
   "description": "",
+  "type": "module",
   "main": "",
   "etherealEngine": {
     "version": "1.3.0"
@@ -11,10 +12,14 @@
     "check-errors": "tsc --noemit",
     "dev": "cross-env APP_ENV=development NODE_OPTIONS=--max_old_space_size=20480 vite",
     "build": "cross-env NODE_OPTIONS=--max_old_space_size=10240 vite build",
+    "start": "node server.js",
     "format": "prettier --write \"**/*.{ts,tsx}\"",
     "format-scss": "stylelint \"**/*.scss\" --fix",
     "format-staged": "lint-staged",
-    "precommit": "no-master-commits -b main"
+    "precommit": "no-master-commits -b main",
+    "local": "npm run localbuild && npm run localstart",
+    "localbuild": "cross-env APP_ENV=production VITE_LOCAL_BUILD=true npm run build",
+    "localstart": "cross-env APP_ENV=production VITE_LOCAL_BUILD=true npm run start"
   },
   "peerDependencies": {},
   "dependencies": {},

server.js

@@ -0,0 +1,72 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { koa } from '@feathersjs/koa'
+import packageRoot from 'app-root-path'
+import dotenv from 'dotenv'
+import { createServer as _createServer } from 'http'
+import { createServer } from 'https'
+import send from 'koa-send'
+import serve from 'koa-static'
+import { readFileSync } from 'node:fs'
+import path from 'path'
+
+const cwd = process.cwd()
+
+dotenv.config({ path: cwd + '/../../../../.env.local' })
+
+const app = new koa()
+const PORT = parseInt(process.env.VITE_APP_PORT) || 3000
+const HTTPS = process.env.VITE_LOCAL_BUILD ?? false
+const key = process.env.KEY || 'certs/key.pem'
+const cert = process.env.CERT || 'certs/cert.pem'
+
+app.use(
+  serve(path.join(cwd, 'dist'), {
+    brotli: true,
+    setHeaders: (ctx) => {
+      ctx.setHeader('Origin-Agent-Cluster', '?1')
+    }
+  })
+)
+
+app.use(async (ctx) => {
+  await send(ctx, path.join('dist', 'index.html'), {
+    root: cwd
+  })
+})
+
+app.listen = function () {
+  let server
+  if (HTTPS) {
+    const pathedkey = readFileSync(path.join(packageRoot.path, key))
+    const pathedcert = readFileSync(path.join(packageRoot.path, cert))
+    server = createServer({ key: pathedkey, cert: pathedcert }, this.callback())
+  } else {
+    server = _createServer(this.callback())
+  }
+  return server.listen.apply(server, arguments)
+}
+app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`))

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,18 @@ 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 { getMutableState, getState } from '@etherealengine/hyperflux'
 import { EngineState } from '@etherealengine/spatial/src/EngineState'
 import { createEngine } from '@etherealengine/spatial/src/initializeEngine'
+import { ECSState } from '@etherealengine/ecs'
 
-createEngine(document.getElementById('engine-renderer-canvas') as HTMLCanvasElement)
+createEngine()
+getState(ECSState).timer.start()
 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>
 }