New System Defintions

packages/client-core/i18n/en/common.json

@@ -51,6 +51,10 @@
     "stats": "Stats",
     "debugOptions": "Debug Options",
     "debug": "Debug Helpers",
+    "preSystems": "Pre Systems",
+    "simulation": "Simulation Group",
+    "subSystems": "Sub System",
+    "postSystems": "Post Systems",
     "nodeHelperDebug": "Node Helper",
     "gridDebug": "Grid",
     "tick": "Tick",

packages/client-core/i18n/en/editor.json

@@ -602,7 +602,8 @@
     "systemnode": {
       "description": "Attach script.",
       "lbl-filePath": "Url",
-      "lbl-systemUpdateType": "Injection Point",
+      "lbl-insertUUID": "Insertion Point",
+      "lbl-insertOrder": "Insertion Order",
       "lbl-enableClient": "Client",
       "lbl-enableServer": "Server",
       "lbl-args": "Args",

packages/client-core/src/admin/adminRoutes.tsx

@@ -2,31 +2,22 @@ import React, { lazy, Suspense, useEffect } from 'react'
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
 
 import { EngineActions } from '@etherealengine/engine/src/ecs/classes/EngineState'
-import { initSystems } from '@etherealengine/engine/src/ecs/functions/SystemFunctions'
-import { SystemUpdateType } from '@etherealengine/engine/src/ecs/functions/SystemUpdateType'
+import { PresentationSystemGroup } from '@etherealengine/engine/src/ecs/functions/EngineFunctions'
+import { startSystems } from '@etherealengine/engine/src/ecs/functions/SystemFunctions'
 import { dispatchAction } from '@etherealengine/hyperflux'
 import Dashboard from '@etherealengine/ui/src/Dashboard'
 
 import { LoadingCircle } from '../components/LoadingCircle'
-import AdminSystem from '../systems/AdminSystem'
+import { AdminSystem } from '../systems/AdminSystem'
 import { useAuthState } from '../user/services/AuthService'
-import UserUISystem from '../user/UserUISystem'
+import { UserUISystem } from '../user/UserUISystem'
 import Analytics from './components/Analytics'
 
 const $allowed = lazy(() => import('@etherealengine/client-core/src/admin/allowedRoutes'))
 
-const AdminSystemInjection = [
-  {
-    uuid: 'core.admin.AdminSystem',
-    type: SystemUpdateType.POST_RENDER,
-    systemLoader: () => Promise.resolve({ default: AdminSystem })
-  },
-  {
-    uuid: 'ee.client.core.UserUISystem',
-    type: SystemUpdateType.POST_RENDER,
-    systemLoader: () => Promise.resolve({ default: UserUISystem })
-  }
-]
+const AdminSystemInjection = () => {
+  startSystems([AdminSystem, UserUISystem], { after: PresentationSystemGroup })
+}
 
 const AdminRoutes = () => {
   const location = useLocation()
@@ -53,10 +44,8 @@ const AdminRoutes = () => {
   const scopes = admin?.scopes?.value || []
 
   useEffect(() => {
-    initSystems(AdminSystemInjection).then(async () => {
-      // @ts-ignore
-      dispatchAction(EngineActions.initializeEngine({ initialised: true }))
-    })
+    AdminSystemInjection()
+    dispatchAction(EngineActions.initializeEngine({ initialised: true }))
   }, [])
 
   scopes.forEach((scope) => {

packages/client-core/src/admin/components/Avatars/index.tsx

@@ -2,13 +2,15 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import ConfirmDialog from '@etherealengine/client-core/src/common/components/ConfirmDialog'
-import { AvatarClientModule } from '@etherealengine/engine/src/avatar/AvatarClientModule'
-import { AvatarCommonModule } from '@etherealengine/engine/src/avatar/AvatarCommonModule'
-import { useSystems } from '@etherealengine/engine/src/ecs/functions/useSystems'
-import { RendererModule } from '@etherealengine/engine/src/renderer/RendererModule'
-import { SceneClientModule } from '@etherealengine/engine/src/scene/SceneClientModule'
-import { SceneCommonModule } from '@etherealengine/engine/src/scene/SceneCommonModule'
-import { TransformModule } from '@etherealengine/engine/src/transform/TransformModule'
+import { AnimationSystem } from '@etherealengine/engine/src/avatar/AnimationSystem'
+import { AvatarAnimationSystem } from '@etherealengine/engine/src/avatar/AvatarAnimationSystem'
+import { AvatarSpawnSystem } from '@etherealengine/engine/src/avatar/AvatarSpawnSystem'
+import { DebugRendererSystem } from '@etherealengine/engine/src/debug/systems/DebugRendererSystem'
+import { AnimationSystemGroup, PresentationSystemGroup } from '@etherealengine/engine/src/ecs/functions/EngineFunctions'
+import { useSystem, useSystems } from '@etherealengine/engine/src/ecs/functions/SystemFunctions'
+import { WebGLRendererSystem } from '@etherealengine/engine/src/renderer/WebGLRendererSystem'
+import { SceneSystemLoadGroup, SceneSystemUpdateGroup } from '@etherealengine/engine/src/scene/SceneClientModule'
+import { SceneObjectSystem } from '@etherealengine/engine/src/scene/systems/SceneObjectSystem'
 import Box from '@etherealengine/ui/src/Box'
 import Button from '@etherealengine/ui/src/Button'
 import Grid from '@etherealengine/ui/src/Grid'
@@ -28,14 +30,24 @@ const Avatar = () => {
   const [openDeleteAvatarModal, setOpenDeleteAvatarModal] = React.useState(false)
   const [selectedAvatarIds, setSelectedAvatarIds] = useState(() => new Set<string>())
 
-  useSystems([
-    ...TransformModule(),
-    ...RendererModule(),
-    ...SceneCommonModule(),
-    ...SceneClientModule(),
-    ...AvatarCommonModule(),
-    ...AvatarClientModule()
-  ])
+  /** Avatar / Animation */
+  useSystems([AnimationSystem, AvatarSpawnSystem, AvatarAnimationSystem], {
+    with: AnimationSystemGroup
+  })
+
+  /** Post Transform / Pre Render */
+  useSystems([SceneObjectSystem, DebugRendererSystem, SceneSystemUpdateGroup], {
+    before: PresentationSystemGroup
+  })
+
+  /** Render */
+  useSystem(WebGLRendererSystem, {
+    with: PresentationSystemGroup
+  })
+
+  useSystem(SceneSystemLoadGroup, {
+    after: PresentationSystemGroup
+  })
 
   const handleChange = (e: any) => {
     setSearch(e.target.value)

packages/client-core/src/admin/components/Project/index.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { initSystems } from '@etherealengine/engine/src/ecs/functions/SystemFunctions'
+import { PresentationSystemGroup } from '@etherealengine/engine/src/ecs/functions/EngineFunctions'
+import { useSystem } from '@etherealengine/engine/src/ecs/functions/SystemFunctions'
 import { useHookstate } from '@etherealengine/hyperflux'
 import Box from '@etherealengine/ui/src/Box'
 import Button from '@etherealengine/ui/src/Button'
@@ -10,6 +11,7 @@ import CircularProgress from '@etherealengine/ui/src/CircularProgress'
 import Grid from '@etherealengine/ui/src/Grid'
 
 import { ProjectService, useProjectState } from '../../../common/services/ProjectService'
+import { ProjectUpdateSystem } from '../../../systems/ProjectUpdateSystem'
 import { useAuthState } from '../../../user/services/AuthService'
 import styles from '../../styles/admin.module.scss'
 import BuildStatusDrawer from './BuildStatusDrawer'
@@ -34,14 +36,9 @@ const Projects = () => {
     ProjectService.refreshGithubRepoAccess()
   }
 
-  const ProjectUpdateSystemInjection = {
-    uuid: 'core.admin.ProjectUpdateSystem',
-    type: 'PRE_RENDER',
-    systemLoader: () => import('../../../systems/ProjectUpdateSystem')
-  } as const
+  useSystem(ProjectUpdateSystem, { after: PresentationSystemGroup })
 
   useEffect(() => {
-    initSystems([ProjectUpdateSystemInjection])
     ProjectService.checkReloadStatus()
   }, [])
 

packages/client-core/src/components/Debug/index.tsx

@@ -3,7 +3,6 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import JSONTree from 'react-json-tree'
 
-import { mapToObject } from '@etherealengine/common/src/utils/mapToObject'
 import { AvatarControllerComponent } from '@etherealengine/engine/src/avatar/components/AvatarControllerComponent'
 import { respawnAvatar } from '@etherealengine/engine/src/avatar/functions/respawnAvatar'
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
@@ -15,20 +14,63 @@ import {
   getOptionalComponent,
   hasComponent
 } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
+import { RootSystemGroup, SimulationSystemGroup } from '@etherealengine/engine/src/ecs/functions/EngineFunctions'
 import { entityExists } from '@etherealengine/engine/src/ecs/functions/EntityFunctions'
-import { EntityOrObjectUUID, EntityTreeComponent } from '@etherealengine/engine/src/ecs/functions/EntityTree'
-import { SystemInstance } from '@etherealengine/engine/src/ecs/functions/SystemFunctions'
+import { EntityTreeComponent } from '@etherealengine/engine/src/ecs/functions/EntityTree'
+import { System, SystemDefinitions, SystemUUID } from '@etherealengine/engine/src/ecs/functions/SystemFunctions'
 import { NetworkState } from '@etherealengine/engine/src/networking/NetworkState'
 import { RendererState } from '@etherealengine/engine/src/renderer/RendererState'
 import { NameComponent } from '@etherealengine/engine/src/scene/components/NameComponent'
 import { UUIDComponent } from '@etherealengine/engine/src/scene/components/UUIDComponent'
-import { ObjectLayers } from '@etherealengine/engine/src/scene/constants/ObjectLayers'
-import { dispatchAction, getMutableState, useHookstate } from '@etherealengine/hyperflux'
+import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import Icon from '@etherealengine/ui/src/Icon'
 
 import { StatsPanel } from './StatsPanel'
 import styles from './styles.module.scss'
 
+type DesiredType =
+  | {
+      enabled?: boolean
+      preSystems?: Record<SystemUUID, DesiredType>
+      simulation?: DesiredType
+      subSystems?: Record<SystemUUID, DesiredType>
+      postSystems?: Record<SystemUUID, DesiredType>
+    }
+  | boolean // enabled
+
+const convertSystemTypeToDesiredType = (system: System): DesiredType => {
+  const { preSystems, subSystems, postSystems } = system
+  if (preSystems.length === 0 && subSystems.length === 0 && postSystems.length === 0) {
+    return Engine.instance.activeSystems.has(system.uuid)
+  }
+  const desired: DesiredType = {
+    enabled: Engine.instance.activeSystems.has(system.uuid)
+  }
+  if (preSystems.length > 0) {
+    desired.preSystems = preSystems.reduce((acc, uuid) => {
+      acc[uuid] = convertSystemTypeToDesiredType(SystemDefinitions.get(uuid)!)
+      return acc
+    }, {} as Record<SystemUUID, DesiredType>)
+  }
+  if (system.uuid === RootSystemGroup) {
+    desired.simulation = convertSystemTypeToDesiredType(SystemDefinitions.get(SimulationSystemGroup)!)
+  }
+  if (subSystems.length > 0) {
+    desired.subSystems = subSystems.reduce((acc, uuid) => {
+      acc[uuid] = convertSystemTypeToDesiredType(SystemDefinitions.get(uuid)!)
+      return acc
+    }, {} as Record<SystemUUID, DesiredType>)
+  }
+  if (postSystems.length > 0) {
+    desired.postSystems = postSystems.reduce((acc, uuid) => {
+      acc[uuid] = convertSystemTypeToDesiredType(SystemDefinitions.get(uuid)!)
+      return acc
+    }, {} as Record<SystemUUID, DesiredType>)
+  }
+  if (system.uuid === RootSystemGroup) delete desired.enabled
+  return desired
+}
+
 export const Debug = ({ showingStateRef }) => {
   useHookstate(getMutableState(EngineState).frameTime).value
   const rendererState = useHookstate(getMutableState(RendererState))
@@ -127,7 +169,8 @@ export const Debug = ({ showingStateRef }) => {
 
   const namedEntities = useHookstate({})
   const entityTree = useHookstate({} as any)
-  const pipelines = Engine.instance.pipelines
+
+  const dag = convertSystemTypeToDesiredType(SystemDefinitions.get(RootSystemGroup)!)
 
   namedEntities.set(renderAllEntities())
   entityTree.set(renderEntityTreeRoots())
@@ -181,41 +224,34 @@ export const Debug = ({ showingStateRef }) => {
       <div className={styles.jsonPanel}>
         <h1>{t('common:debug.systems')}</h1>
         <JSONTree
-          data={pipelines}
-          postprocessValue={(v: SystemInstance) => {
-            if (!v?.name) return v
-            const s = new String(v.sceneSystem ? v.name : v.uuid) as any
-            if (v.subsystems?.length) {
-              s.parentSystem = v
-              return {
-                [s]: s,
-                subsystems: v.subsystems
-              }
-            }
-            s.instance = v
-            return s
-          }} // yes, all this is a hack. We probably shouldn't use JSONTree for this
-          valueRenderer={(raw, value: { instance: SystemInstance; parentSystem: SystemInstance }) => {
-            return value.parentSystem ? (
+          data={dag}
+          labelRenderer={(raw, ...keyPath) => {
+            const label = raw[0]
+            if (label === 'preSystems') return <span style={{ color: 'red' }}>{t('common:debug.preSystems')}</span>
+            if (label === 'simulation') return <span style={{ color: 'green' }}>{t('common:debug.simulation')}</span>
+            if (label === 'subSystems') return <span style={{ color: 'red' }}>{t('common:debug.subSystems')}</span>
+            if (label === 'postSystems') return <span style={{ color: 'red' }}>{t('common:debug.postSystems')}</span>
+            return <span style={{ color: 'black' }}>{label}</span>
+          }}
+          valueRenderer={(raw, value, ...keyPath) => {
+            const system = SystemDefinitions.get((keyPath[0] === 'enabled' ? keyPath[1] : keyPath[0]) as SystemUUID)!
+            return (
               <>
                 <input
                   type="checkbox"
-                  checked={value?.parentSystem?.enabled}
-                  onChange={() => (value.parentSystem.enabled = !value.parentSystem.enabled)}
+                  checked={value}
+                  onChange={() => {
+                    if (Engine.instance.activeSystems.has(system.uuid)) {
+                      Engine.instance.activeSystems.delete(system.uuid)
+                    } else {
+                      Engine.instance.activeSystems.add(system.uuid)
+                    }
+                  }}
                 ></input>
               </>
-            ) : (
-              <>
-                <input
-                  type="checkbox"
-                  checked={value?.instance?.enabled}
-                  onChange={() => (value.instance.enabled = !value.instance.enabled)}
-                ></input>{' '}
-                — {value}
-              </>
             )
           }}
-          shouldExpandNode={(keyPath, data, level) => level > 0}
+          shouldExpandNode={() => true}
         />
       </div>
       <div className={styles.jsonPanel}>