From 3bb448c143c8a6e36e80449240f81c4b09486ee7 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Sat, 22 Jun 2024 15:35:12 +1000
Subject: [PATCH 01/20] add multiple scene test example

---
 src/examples/multipleScenes.tsx | 127 ++++++++++++++++++++++++++++++++
 src/examplesRoute.tsx           |   6 ++
 2 files changed, 133 insertions(+)
 create mode 100644 src/examples/multipleScenes.tsx

diff --git a/src/examples/multipleScenes.tsx b/src/examples/multipleScenes.tsx
new file mode 100644
index 0000000..80e9da7
--- /dev/null
+++ b/src/examples/multipleScenes.tsx
@@ -0,0 +1,127 @@
+import { useLoadEngineWithScene, useNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
+import { Engine, EntityUUID, createEntity, getComponent, getMutableComponent, setComponent } from '@etherealengine/ecs'
+import { GLTFAssetState, GLTFSourceState } from '@etherealengine/engine/src/gltf/GLTFState'
+import { getMutableState, useHookstate, useImmediateEffect } from '@etherealengine/hyperflux'
+import { DirectionalLightComponent, TransformComponent } from '@etherealengine/spatial'
+import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
+import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/components/CameraOrbitComponent'
+import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
+import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
+import { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
+import { SceneComponent } from '@etherealengine/spatial/src/renderer/components/SceneComponents'
+import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent'
+import { GLTF } from '@gltf-transform/core'
+import React, { useEffect } from 'react'
+import { Cache, Color, Euler, Quaternion, Vector3 } from 'three'
+
+export const metadata = {
+  title: 'Avatar Test',
+  description: ''
+}
+
+// create scene with a rigidbody loaded offset from the origin
+const createSceneGLTF = (id: string): GLTF.IGLTF => ({
+  asset: {
+    version: '2.0',
+    generator: 'iR Engine'
+  },
+  scenes: [{ nodes: [0] }],
+  scene: 0,
+  nodes: [
+    {
+      matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1],
+      name: 'Rigidbody',
+      extensions: {
+        EE_uuid: 'rigidbody-' + id,
+        EE_visible: true,
+        EE_rigidbody: {
+          type: 'fixed'
+        },
+        EE_collider: {
+          shape: 'box'
+        },
+        EE_primitive_geometry: {
+          geometryType: 0,
+          geometryParams: {
+            width: 1,
+            height: 1,
+            depth: 1
+          }
+        }
+      }
+    }
+  ],
+  extensionsUsed: ['EE_uuid', 'EE_visible', 'EE_rigidbody', 'EE_collider', 'EE_primitive_geometry']
+})
+
+const SceneReactor = (props: { coord: Vector3 }) => {
+  const { coord } = props
+  useEffect(() => {
+    const sceneID = `scene-${coord.x}-${coord.z}`
+    const gltf = createSceneGLTF(sceneID)
+
+    const sceneURL = `/${sceneID}.gltf`
+
+    Cache.add(sceneURL, gltf)
+
+    const gltfEntity = GLTFSourceState.load(sceneURL, sceneURL as EntityUUID)
+    setComponent(gltfEntity, TransformComponent, {
+      position: coord
+        .clone()
+        .sub(new Vector3(0.5, 0, 0.5))
+        .multiplyScalar(gridSpacing)
+    })
+    getMutableComponent(Engine.instance.viewerEntity, SceneComponent).scenes.merge([gltfEntity])
+    getMutableState(GLTFAssetState)[sceneURL].set(gltfEntity)
+
+    return () => {
+      GLTFSourceState.unload(gltfEntity)
+      getMutableState(GLTFAssetState)[sceneURL].set(gltfEntity)
+    }
+  }, [])
+
+  return null
+}
+
+const gridCount = 10
+const gridSpacing = 10
+
+export default function MultipleScenesEntry() {
+  useNetwork({ online: false })
+  useLoadEngineWithScene()
+
+  useImmediateEffect(() => {
+    const lightEntity = createEntity()
+    setComponent(lightEntity, TransformComponent, { rotation: new Quaternion().setFromEuler(new Euler(-4, -0.5, 0)) })
+    setComponent(lightEntity, NameComponent, 'directional light')
+    setComponent(lightEntity, VisibleComponent)
+    setComponent(lightEntity, DirectionalLightComponent, { intensity: 1, color: new Color(0xffffff) })
+    getMutableComponent(Engine.instance.viewerEntity, SceneComponent).scenes.merge([lightEntity])
+
+    getMutableState(RendererState).gridVisibility.set(true)
+    const entity = Engine.instance.viewerEntity
+    setComponent(entity, CameraOrbitComponent)
+    setComponent(entity, InputComponent)
+    getComponent(entity, CameraComponent).position.set(0, 3, 4)
+  }, [])
+
+  const coordsState = useHookstate<Vector3[]>([])
+
+  useEffect(() => {
+    const coords = [] as Vector3[]
+    for (let i = -gridCount * 0.5; i < gridCount * 0.5; i++) {
+      for (let j = -gridCount * 0.5; j < gridCount * 0.5; j++) {
+        coords.push(new Vector3(i, 0, j))
+      }
+    }
+    coordsState.set(coords)
+  }, [])
+
+  return (
+    <>
+      {coordsState.value.map((coord) => (
+        <SceneReactor key={`${coord.x}-${coord.z}`} coord={coord} />
+      ))}
+    </>
+  )
+}
diff --git a/src/examplesRoute.tsx b/src/examplesRoute.tsx
index 8a1b530..9f4a1ed 100644
--- a/src/examplesRoute.tsx
+++ b/src/examplesRoute.tsx
@@ -6,6 +6,7 @@ import AvatarTestEntry from './examples/avatarTest'
 import ComponentExamplesRoute, { subComponentExamples } from './examples/componentExamples/componentExamples'
 import GLTFViewer from './examples/gltf'
 import Routes, { RouteData } from './sceneRoute'
+import MultipleScenesEntry from './examples/multipleScenes'
 
 export const examples: RouteData[] = [
   {
@@ -32,6 +33,11 @@ export const examples: RouteData[] = [
     name: 'GLTF Viewer',
     description: 'Drag and drop GLTF files',
     entry: GLTFViewer
+  },
+  {
+    name: 'Multiple Scenes',
+    description: 'multiple scenes example',
+    entry: MultipleScenesEntry
   }
 ]
 

From e498d3a0e9213385e68dcb4b02868ed205eac747 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Sun, 23 Jun 2024 12:09:38 +1000
Subject: [PATCH 02/20] hide sidebar

---
 src/examples/multipleScenes.tsx |  1 +
 src/sceneRoute.tsx              | 28 ++++++++++++++++++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/examples/multipleScenes.tsx b/src/examples/multipleScenes.tsx
index 80e9da7..db411aa 100644
--- a/src/examples/multipleScenes.tsx
+++ b/src/examples/multipleScenes.tsx
@@ -99,6 +99,7 @@ export default function MultipleScenesEntry() {
     getMutableComponent(Engine.instance.viewerEntity, SceneComponent).scenes.merge([lightEntity])
 
     getMutableState(RendererState).gridVisibility.set(true)
+    getMutableState(RendererState).physicsDebug.set(true)
     const entity = Engine.instance.viewerEntity
     setComponent(entity, CameraOrbitComponent)
     setComponent(entity, InputComponent)
diff --git a/src/sceneRoute.tsx b/src/sceneRoute.tsx
index c927f3f..a9a0b47 100644
--- 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 '@etherealengine/engine/src/EngineModule'
+import { staticResourcePath } from '@etherealengine/common/src/schema.type.module'
 import { Engine, Entity, getComponent, setComponent } from '@etherealengine/ecs'
+import '@etherealengine/engine/src/EngineModule'
 import { GLTFAssetState } from '@etherealengine/engine/src/gltf/GLTFState'
 import { useHookstate, useImmediateEffect, useMutableState } from '@etherealengine/hyperflux'
 import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
 import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/components/CameraOrbitComponent'
+import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 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 Button from '@etherealengine/ui/src/primitives/tailwind/Button'
+import { HiChevronDoubleLeft, HiChevronDoubleRight } from 'react-icons/hi2'
 
 type Metadata = {
   name: string
@@ -88,6 +90,7 @@ const Routes = (props: { routes: RouteData[]; header: string }) => {
   const { routes, header } = props
   const [currentRoute, setCurrentRoute] = useState(null as null | number)
   const [currentSubRoute, setCurrentSubRoute] = useState(0)
+  const hidden = useHookstate(false)
 
   const ref = useRef(null as null | HTMLDivElement)
 
@@ -150,7 +153,24 @@ const Routes = (props: { routes: RouteData[]; header: string }) => {
     <>
       <style type="text/css">{styles.toString()}</style>
       <div className="ScreenContainer">
-        <div className="NavBarContainer">
+        <Button
+          className="z-10 mb-1 px-0"
+          rounded="full"
+          variant="outline"
+          style={{ position: 'absolute', top: '10px', left: hidden.value ? '10px' : '310px', pointerEvents: 'all' }}
+          onClick={() => hidden.set(!hidden.value)}
+          startIcon={
+            hidden.value ? (
+              <HiChevronDoubleRight className="pointer-events-none place-self-center text-theme-primary" />
+            ) : (
+              <HiChevronDoubleLeft className="pointer-events-none place-self-center text-theme-primary" />
+            )
+          }
+        />
+        <div
+          className="NavBarContainer"
+          style={{ zIndex: '100', width: hidden.value ? '0%' : '' }}
+        >
           <Header header={header} />
           <div className="NavBarSelectionContainer">
             {routes.map((route, index) => {

From 8d3d37671a13b2b61daa02a234fcfee011c4528e Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Mon, 24 Jun 2024 13:30:23 +1000
Subject: [PATCH 03/20] add scene placement and updates

---
 src/examples/multipleScenes.tsx  | 85 +++++++++++++++++++++++++-------
 src/examples/scenePlacement.tsx  | 72 +++++++++++++++++++++++++++
 src/examples/utils/transform.tsx | 46 +++++++++++++++++
 src/examplesRoute.tsx            |  6 +++
 src/sceneRoute.tsx               |  2 +-
 5 files changed, 193 insertions(+), 18 deletions(-)
 create mode 100644 src/examples/scenePlacement.tsx
 create mode 100644 src/examples/utils/transform.tsx

diff --git a/src/examples/multipleScenes.tsx b/src/examples/multipleScenes.tsx
index db411aa..31fea14 100644
--- a/src/examples/multipleScenes.tsx
+++ b/src/examples/multipleScenes.tsx
@@ -1,5 +1,13 @@
 import { useLoadEngineWithScene, useNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
-import { Engine, EntityUUID, createEntity, getComponent, getMutableComponent, setComponent } from '@etherealengine/ecs'
+import {
+  Engine,
+  EntityUUID,
+  UndefinedEntity,
+  createEntity,
+  getComponent,
+  getMutableComponent,
+  setComponent
+} from '@etherealengine/ecs'
 import { GLTFAssetState, GLTFSourceState } from '@etherealengine/engine/src/gltf/GLTFState'
 import { getMutableState, useHookstate, useImmediateEffect } from '@etherealengine/hyperflux'
 import { DirectionalLightComponent, TransformComponent } from '@etherealengine/spatial'
@@ -10,14 +18,11 @@ import { InputComponent } from '@etherealengine/spatial/src/input/components/Inp
 import { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
 import { SceneComponent } from '@etherealengine/spatial/src/renderer/components/SceneComponents'
 import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent'
+import { computeTransformMatrix } from '@etherealengine/spatial/src/transform/systems/TransformSystem'
 import { GLTF } from '@gltf-transform/core'
 import React, { useEffect } from 'react'
-import { Cache, Color, Euler, Quaternion, Vector3 } from 'three'
-
-export const metadata = {
-  title: 'Avatar Test',
-  description: ''
-}
+import { Cache, Color, Euler, Matrix4, Quaternion, Vector3 } from 'three'
+import { Transform } from './utils/transform'
 
 // create scene with a rigidbody loaded offset from the origin
 const createSceneGLTF = (id: string): GLTF.IGLTF => ({
@@ -54,8 +59,14 @@ const createSceneGLTF = (id: string): GLTF.IGLTF => ({
   extensionsUsed: ['EE_uuid', 'EE_visible', 'EE_rigidbody', 'EE_collider', 'EE_primitive_geometry']
 })
 
-const SceneReactor = (props: { coord: Vector3 }) => {
-  const { coord } = props
+const SceneReactor = (props: {
+  coord: Vector3
+  transform: { position: Vector3; rotation: Quaternion; scale: Vector3 }
+}) => {
+  const { coord, transform } = props
+
+  const gltfEntityState = useHookstate(UndefinedEntity)
+
   useEffect(() => {
     const sceneID = `scene-${coord.x}-${coord.z}`
     const gltf = createSceneGLTF(sceneID)
@@ -65,25 +76,56 @@ const SceneReactor = (props: { coord: Vector3 }) => {
     Cache.add(sceneURL, gltf)
 
     const gltfEntity = GLTFSourceState.load(sceneURL, sceneURL as EntityUUID)
-    setComponent(gltfEntity, TransformComponent, {
-      position: coord
-        .clone()
-        .sub(new Vector3(0.5, 0, 0.5))
-        .multiplyScalar(gridSpacing)
-    })
     getMutableComponent(Engine.instance.viewerEntity, SceneComponent).scenes.merge([gltfEntity])
     getMutableState(GLTFAssetState)[sceneURL].set(gltfEntity)
 
+    gltfEntityState.set(gltfEntity)
+
     return () => {
       GLTFSourceState.unload(gltfEntity)
       getMutableState(GLTFAssetState)[sceneURL].set(gltfEntity)
     }
   }, [])
 
+  useEffect(() => {
+    const gltfEntity = gltfEntityState.value
+
+    // reset transform
+    setComponent(gltfEntity, TransformComponent, {
+      position: coord
+        .clone()
+        .sub(new Vector3(0.5, 0, 0.5))
+        .multiplyScalar(gridSpacing),
+      rotation: new Quaternion(),
+      scale: new Vector3(0.5, 0.5, 0.5)
+    })
+
+    // apply transform state
+    const transformComponent = getComponent(gltfEntity, TransformComponent)
+    const mat4 = new Matrix4()
+    transformComponent.matrix.multiply(mat4.compose(transform.position, transform.rotation, transform.scale))
+    transformComponent.matrix.decompose(
+      transformComponent.position,
+      transformComponent.rotation,
+      transformComponent.scale
+    )
+    computeTransformMatrix(gltfEntity)
+
+    console.log('position', transformComponent.position.x, transformComponent.position.y, transformComponent.position.z)
+    console.log(
+      'rotation',
+      transformComponent.rotation.x,
+      transformComponent.rotation.y,
+      transformComponent.rotation.z,
+      transformComponent.rotation.w
+    )
+    console.log('scale', transformComponent.scale.x, transformComponent.scale.y, transformComponent.scale.z)
+  }, [transform.position, transform.rotation, transform.scale])
+
   return null
 }
 
-const gridCount = 10
+const gridCount = 5
 const gridSpacing = 10
 
 export default function MultipleScenesEntry() {
@@ -118,11 +160,20 @@ export default function MultipleScenesEntry() {
     coordsState.set(coords)
   }, [])
 
+  const transformState = useHookstate({
+    position: new Vector3(),
+    rotation: new Quaternion(),
+    scale: new Vector3(1, 1, 1)
+  })
+
   return (
     <>
       {coordsState.value.map((coord) => (
-        <SceneReactor key={`${coord.x}-${coord.z}`} coord={coord} />
+        <SceneReactor key={`${coord.x}-${coord.z}`} coord={coord} transform={transformState.value} />
       ))}
+      <div className="pointer-events-auto absolute right-0 w-fit flex flex-col flex-grid justify-start gap-1.5">
+        <Transform transformState={transformState} />
+      </div>
     </>
   )
 }
diff --git a/src/examples/scenePlacement.tsx b/src/examples/scenePlacement.tsx
new file mode 100644
index 0000000..75e9452
--- /dev/null
+++ b/src/examples/scenePlacement.tsx
@@ -0,0 +1,72 @@
+import { useLoadEngineWithScene, useNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
+import { Engine, getComponent, setComponent } from '@etherealengine/ecs'
+import { getMutableState, useHookstate, useImmediateEffect } from '@etherealengine/hyperflux'
+import { TransformComponent } from '@etherealengine/spatial'
+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 { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
+import { updateWorldOriginFromScenePlacement } from '@etherealengine/spatial/src/transform/updateWorldOrigin'
+import { XRState } from '@etherealengine/spatial/src/xr/XRState'
+import React, { useEffect } from 'react'
+import { Quaternion, Vector3 } from 'three'
+import { useRouteScene } from '../sceneRoute'
+import { Transform } from './utils/transform'
+
+export default function ScenePlacement() {
+  const sceneEntity = useRouteScene('default-project', 'public/scenes/apartment.gltf')
+  useNetwork({ online: false })
+  useLoadEngineWithScene()
+
+  useImmediateEffect(() => {
+    getMutableState(RendererState).gridVisibility.set(true)
+    getMutableState(RendererState).physicsDebug.set(true)
+    const entity = Engine.instance.viewerEntity
+    setComponent(entity, CameraOrbitComponent)
+    setComponent(entity, InputComponent)
+    getComponent(entity, CameraComponent).position.set(0, 3, 4)
+  }, [])
+
+  /** Origin Transform */
+  const transformState = useHookstate({
+    position: new Vector3(),
+    rotation: new Quaternion(),
+    scale: new Vector3(1, 1, 1)
+  })
+
+  useEffect(() => {
+    const xrState = getMutableState(XRState)
+    xrState.scenePosition.value.copy(transformState.position.value)
+    xrState.sceneRotation.value.copy(transformState.rotation.value)
+    xrState.sceneScale.set(transformState.scale.value.x)
+    updateWorldOriginFromScenePlacement()
+  }, [transformState.position, transformState.rotation, transformState.scale])
+
+  /** Scene Transform */
+  const transformState2 = useHookstate({
+    position: new Vector3(2, 0, 2),
+    rotation: new Quaternion(),
+    scale: new Vector3().setScalar(0.1)
+  })
+
+  useEffect(() => {
+    if (!sceneEntity.value) return
+    setComponent(sceneEntity.value, TransformComponent, {
+      position: transformState2.position.value,
+      rotation: transformState2.rotation.value,
+      scale: transformState2.scale.value
+    })
+  }, [sceneEntity, transformState2.position, transformState2.rotation, transformState2.scale])
+
+  return (
+    <div className="pointer-events-auto absolute right-0 w-fit flex flex-col flex-grid justify-start gap-1.5">
+      <Transform title={'Origin'} transformState={transformState} />
+      <Transform title={'Scene'} transformState={transformState2} />
+    </div>
+  )
+}
+
+/**
+ * Scene placement
+ * -
+ */
diff --git a/src/examples/utils/transform.tsx b/src/examples/utils/transform.tsx
new file mode 100644
index 0000000..745cc8e
--- /dev/null
+++ b/src/examples/utils/transform.tsx
@@ -0,0 +1,46 @@
+import { State } from '@etherealengine/hyperflux'
+import EulerInput from '@etherealengine/ui/src/components/editor/input/Euler'
+import InputGroup from '@etherealengine/ui/src/components/editor/input/Group'
+import Vector3Input from '@etherealengine/ui/src/components/editor/input/Vector3'
+import PropertyGroup from '@etherealengine/ui/src/components/editor/properties/group'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Euler, Quaternion, Vector3 } from 'three'
+
+export const Transform = (props: {
+  title?: string
+  transformState: State<{ position: Vector3; rotation: Quaternion; scale: Vector3 }>
+}) => {
+  const { transformState } = props
+  const { t } = useTranslation()
+
+  const { position, rotation, scale } = transformState.value
+
+  const onChangePosition = (value: Vector3) => transformState.position.set(new Vector3().copy(value))
+  const onChangeRotation = (value: Euler) => transformState.rotation.set(new Quaternion().setFromEuler(value))
+  const onChangeScale = (value: Vector3) => transformState.scale.set(new Vector3().copy(value))
+
+  return (
+    <PropertyGroup
+      minimizedDefault={false}
+      name={props.title ?? t('editor:properties.transform.title')}
+    >
+      <InputGroup name="Position" label={t('editor:properties.transform.lbl-position')}>
+        <Vector3Input smallStep={0.01} mediumStep={0.1} largeStep={1} value={position} onChange={onChangePosition} />
+      </InputGroup>
+      <InputGroup name="Rotation" label={t('editor:properties.transform.lbl-rotation')}>
+        <EulerInput quaternion={rotation} onChange={onChangeRotation} unit="°" />
+      </InputGroup>
+      <InputGroup name="Scale" label={t('editor:properties.transform.lbl-scale')}>
+        <Vector3Input
+          uniformScaling
+          smallStep={0.01}
+          mediumStep={0.1}
+          largeStep={1}
+          value={scale}
+          onChange={onChangeScale}
+        />
+      </InputGroup>
+    </PropertyGroup>
+  )
+}
diff --git a/src/examplesRoute.tsx b/src/examplesRoute.tsx
index 9f4a1ed..0a641d1 100644
--- a/src/examplesRoute.tsx
+++ b/src/examplesRoute.tsx
@@ -7,6 +7,7 @@ import ComponentExamplesRoute, { subComponentExamples } from './examples/compone
 import GLTFViewer from './examples/gltf'
 import Routes, { RouteData } from './sceneRoute'
 import MultipleScenesEntry from './examples/multipleScenes'
+import ScenePlacement from './examples/scenePlacement'
 
 export const examples: RouteData[] = [
   {
@@ -38,6 +39,11 @@ export const examples: RouteData[] = [
     name: 'Multiple Scenes',
     description: 'multiple scenes example',
     entry: MultipleScenesEntry
+  },
+  {
+    name: 'Scene Placement',
+    description: 'place scenes relative to the origin example',
+    entry: ScenePlacement
   }
 ]
 
diff --git a/src/sceneRoute.tsx b/src/sceneRoute.tsx
index a9a0b47..aa123af 100644
--- a/src/sceneRoute.tsx
+++ b/src/sceneRoute.tsx
@@ -209,8 +209,8 @@ const Routes = (props: { routes: RouteData[]; header: string }) => {
           </div>
         </div>
         <div id="examples-panel" ref={ref} style={{ flexGrow: 1, pointerEvents: 'none' }} />
+        {Entry && <Entry {...subProps} />}
       </div>
-      {Entry && <Entry {...subProps} />}
     </>
   )
 }

From baf5e92dbb41f37a8cd2e1e9c9a2ee365a9e784c Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Mon, 24 Jun 2024 16:05:45 +1000
Subject: [PATCH 04/20] physics for multiple scene test

---
 src/examples/multipleScenes.tsx | 100 ++++++++++++++++++++++++++------
 1 file changed, 83 insertions(+), 17 deletions(-)

diff --git a/src/examples/multipleScenes.tsx b/src/examples/multipleScenes.tsx
index 31fea14..aa8a58a 100644
--- a/src/examples/multipleScenes.tsx
+++ b/src/examples/multipleScenes.tsx
@@ -1,29 +1,72 @@
 import { useLoadEngineWithScene, useNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
 import {
   Engine,
+  Entity,
   EntityUUID,
+  UUIDComponent,
   UndefinedEntity,
   createEntity,
+  defineComponent,
+  defineQuery,
+  defineSystem,
   getComponent,
   getMutableComponent,
-  setComponent
+  removeEntity,
+  setComponent,
+  useOptionalComponent
 } from '@etherealengine/ecs'
+import { GLTFComponent } from '@etherealengine/engine/src/gltf/GLTFComponent'
 import { GLTFAssetState, GLTFSourceState } from '@etherealengine/engine/src/gltf/GLTFState'
+import { PrimitiveGeometryComponent } from '@etherealengine/engine/src/scene/components/PrimitiveGeometryComponent'
+import { GeometryTypeEnum } from '@etherealengine/engine/src/scene/constants/GeometryTypeEnum'
 import { getMutableState, useHookstate, useImmediateEffect } from '@etherealengine/hyperflux'
-import { DirectionalLightComponent, TransformComponent } from '@etherealengine/spatial'
+import { DirectionalLightComponent, PhysicsPreTransformSystem, PhysicsSystem, TransformComponent } from '@etherealengine/spatial'
 import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
 import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/components/CameraOrbitComponent'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
 import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
+import { ColliderComponent } from '@etherealengine/spatial/src/physics/components/ColliderComponent'
+import { RigidBodyComponent } from '@etherealengine/spatial/src/physics/components/RigidBodyComponent'
 import { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
+import { RendererComponent } from '@etherealengine/spatial/src/renderer/WebGLRendererSystem'
+import { Object3DComponent } from '@etherealengine/spatial/src/renderer/components/Object3DComponent'
 import { SceneComponent } from '@etherealengine/spatial/src/renderer/components/SceneComponents'
 import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent'
+import { EntityTreeComponent } from '@etherealengine/spatial/src/transform/components/EntityTree'
 import { computeTransformMatrix } from '@etherealengine/spatial/src/transform/systems/TransformSystem'
 import { GLTF } from '@gltf-transform/core'
 import React, { useEffect } from 'react'
-import { Cache, Color, Euler, Matrix4, Quaternion, Vector3 } from 'three'
+import { Cache, Color, Euler, Group, MathUtils, Matrix4, Quaternion, Vector3 } from 'three'
 import { Transform } from './utils/transform'
 
+const TestSuiteBallTagComponent = defineComponent({ name: 'TestSuiteBallTagComponent' })
+
+export const createPhysicsEntity = (sceneEntity: Entity) => {
+  const entity = createEntity()
+
+  const position = new Vector3(Math.random() * 10 - 5, Math.random() * 2 + 2, Math.random() * 10 - 5)
+  const obj3d = new Group()
+  obj3d.entity = entity
+  setComponent(entity, UUIDComponent, MathUtils.generateUUID() as EntityUUID)
+  setComponent(entity, EntityTreeComponent, { parentEntity: sceneEntity })
+  setComponent(entity, Object3DComponent, obj3d)
+  setComponent(entity, TransformComponent, { position, scale: new Vector3(0.5, 0.5, 0.5) })
+  setComponent(entity, PrimitiveGeometryComponent, {
+    geometryType: GeometryTypeEnum.SphereGeometry
+  })
+  setComponent(entity, VisibleComponent, true)
+  setComponent(entity, RigidBodyComponent, { type: 'dynamic' })
+  setComponent(entity, ColliderComponent, {
+    shape: 'sphere',
+    mass: MathUtils.randFloat(0.5, 1.5),
+    friction: MathUtils.randFloat(0.1, 1.0),
+    restitution: MathUtils.randFloat(0.1, 1.0)
+  })
+  setComponent(entity, TestSuiteBallTagComponent)
+
+  return entity
+}
+
 // create scene with a rigidbody loaded offset from the origin
 const createSceneGLTF = (id: string): GLTF.IGLTF => ({
   asset: {
@@ -34,7 +77,7 @@ const createSceneGLTF = (id: string): GLTF.IGLTF => ({
   scene: 0,
   nodes: [
     {
-      matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1],
+      matrix: [5, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 5, 0, 0, 1, 0, 1],
       name: 'Rigidbody',
       extensions: {
         EE_uuid: 'rigidbody-' + id,
@@ -66,6 +109,7 @@ const SceneReactor = (props: {
   const { coord, transform } = props
 
   const gltfEntityState = useHookstate(UndefinedEntity)
+  const gltfComponent = useOptionalComponent(gltfEntityState.value, GLTFComponent)
 
   useEffect(() => {
     const sceneID = `scene-${coord.x}-${coord.z}`
@@ -76,7 +120,8 @@ const SceneReactor = (props: {
     Cache.add(sceneURL, gltf)
 
     const gltfEntity = GLTFSourceState.load(sceneURL, sceneURL as EntityUUID)
-    getMutableComponent(Engine.instance.viewerEntity, SceneComponent).scenes.merge([gltfEntity])
+    getMutableComponent(Engine.instance.viewerEntity, RendererComponent).scenes.merge([gltfEntity])
+    setComponent(gltfEntity, SceneComponent)
     getMutableState(GLTFAssetState)[sceneURL].set(gltfEntity)
 
     gltfEntityState.set(gltfEntity)
@@ -110,21 +155,42 @@ const SceneReactor = (props: {
       transformComponent.scale
     )
     computeTransformMatrix(gltfEntity)
-
-    console.log('position', transformComponent.position.x, transformComponent.position.y, transformComponent.position.z)
-    console.log(
-      'rotation',
-      transformComponent.rotation.x,
-      transformComponent.rotation.y,
-      transformComponent.rotation.z,
-      transformComponent.rotation.w
-    )
-    console.log('scale', transformComponent.scale.x, transformComponent.scale.y, transformComponent.scale.z)
   }, [transform.position, transform.rotation, transform.scale])
 
+  useEffect(() => {
+    if (gltfComponent?.progress?.value !== 100) return
+    const entities = [] as Entity[]
+    for (let i = 0; i < 10; i++) {
+      entities.push(createPhysicsEntity(gltfEntityState.value))
+    }
+    return () => {
+      for (const entity of entities) {
+        removeEntity(entity)
+      }
+    }
+  }, [gltfComponent?.progress?.value])
+
   return null
 }
 
+const testSuiteBallTagQuery = defineQuery([TestSuiteBallTagComponent])
+
+const execute = () => {
+  for (const entity of testSuiteBallTagQuery()) {
+    const rigidbody = getComponent(entity, RigidBodyComponent)
+    const transform = getComponent(entity, TransformComponent)
+    if (rigidbody.position.y < -10) {
+      transform.position.set(Math.random() * 10 - 5, Math.random() * 2 + 2, Math.random() * 10 - 5)
+    }
+  }
+}
+
+export const BallResetSystem = defineSystem({
+  uuid: 'ee-development-test-suite.multiplescenes.ball-reset-system',
+  insert: { before: PhysicsPreTransformSystem },
+  execute
+})
+
 const gridCount = 5
 const gridSpacing = 10
 
@@ -138,7 +204,7 @@ export default function MultipleScenesEntry() {
     setComponent(lightEntity, NameComponent, 'directional light')
     setComponent(lightEntity, VisibleComponent)
     setComponent(lightEntity, DirectionalLightComponent, { intensity: 1, color: new Color(0xffffff) })
-    getMutableComponent(Engine.instance.viewerEntity, SceneComponent).scenes.merge([lightEntity])
+    getMutableComponent(Engine.instance.viewerEntity, RendererComponent).scenes.merge([lightEntity])
 
     getMutableState(RendererState).gridVisibility.set(true)
     getMutableState(RendererState).physicsDebug.set(true)
@@ -171,7 +237,7 @@ export default function MultipleScenesEntry() {
       {coordsState.value.map((coord) => (
         <SceneReactor key={`${coord.x}-${coord.z}`} coord={coord} transform={transformState.value} />
       ))}
-      <div className="pointer-events-auto absolute right-0 w-fit flex flex-col flex-grid justify-start gap-1.5">
+      <div className="flex-grid pointer-events-auto absolute right-0 flex w-fit flex-col justify-start gap-1.5">
         <Transform transformState={transformState} />
       </div>
     </>

From 77d05b1356e32f6f892a53daa3f8e75d67f42281 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Tue, 25 Jun 2024 15:29:20 +1000
Subject: [PATCH 05/20] highlight balls on hover

---
 src/examples/multipleScenes.tsx | 60 +++++++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/examples/multipleScenes.tsx b/src/examples/multipleScenes.tsx
index aa8a58a..0235b07 100644
--- a/src/examples/multipleScenes.tsx
+++ b/src/examples/multipleScenes.tsx
@@ -11,6 +11,7 @@ import {
   defineSystem,
   getComponent,
   getMutableComponent,
+  getOptionalComponent,
   removeEntity,
   setComponent,
   useOptionalComponent
@@ -19,37 +20,44 @@ import { GLTFComponent } from '@etherealengine/engine/src/gltf/GLTFComponent'
 import { GLTFAssetState, GLTFSourceState } from '@etherealengine/engine/src/gltf/GLTFState'
 import { PrimitiveGeometryComponent } from '@etherealengine/engine/src/scene/components/PrimitiveGeometryComponent'
 import { GeometryTypeEnum } from '@etherealengine/engine/src/scene/constants/GeometryTypeEnum'
-import { getMutableState, useHookstate, useImmediateEffect } from '@etherealengine/hyperflux'
-import { DirectionalLightComponent, PhysicsPreTransformSystem, PhysicsSystem, TransformComponent } from '@etherealengine/spatial'
+import { getMutableState, getState, useHookstate, useImmediateEffect } from '@etherealengine/hyperflux'
+import { DirectionalLightComponent, PhysicsPreTransformSystem, TransformComponent } from '@etherealengine/spatial'
 import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
 import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/components/CameraOrbitComponent'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
 import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
+import { InputPointerComponent } from '@etherealengine/spatial/src/input/components/InputPointerComponent'
+import { InputState } from '@etherealengine/spatial/src/input/state/InputState'
+import { Physics, RaycastArgs } from '@etherealengine/spatial/src/physics/classes/Physics'
 import { ColliderComponent } from '@etherealengine/spatial/src/physics/components/ColliderComponent'
 import { RigidBodyComponent } from '@etherealengine/spatial/src/physics/components/RigidBodyComponent'
+import { CollisionGroups } from '@etherealengine/spatial/src/physics/enums/CollisionGroups'
+import { getInteractionGroups } from '@etherealengine/spatial/src/physics/functions/getInteractionGroups'
+import { SceneQueryType } from '@etherealengine/spatial/src/physics/types/PhysicsTypes'
 import { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
 import { RendererComponent } from '@etherealengine/spatial/src/renderer/WebGLRendererSystem'
 import { Object3DComponent } from '@etherealengine/spatial/src/renderer/components/Object3DComponent'
 import { SceneComponent } from '@etherealengine/spatial/src/renderer/components/SceneComponents'
 import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent'
-import { EntityTreeComponent } from '@etherealengine/spatial/src/transform/components/EntityTree'
+import {
+  MaterialInstanceComponent,
+  MaterialStateComponent
+} from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
+import { EntityTreeComponent, isAncestor } from '@etherealengine/spatial/src/transform/components/EntityTree'
 import { computeTransformMatrix } from '@etherealengine/spatial/src/transform/systems/TransformSystem'
 import { GLTF } from '@gltf-transform/core'
 import React, { useEffect } from 'react'
-import { Cache, Color, Euler, Group, MathUtils, Matrix4, Quaternion, Vector3 } from 'three'
+import { Cache, Color, Euler, Group, MathUtils, Matrix4, MeshLambertMaterial, Quaternion, Vector3 } from 'three'
 import { Transform } from './utils/transform'
 
 const TestSuiteBallTagComponent = defineComponent({ name: 'TestSuiteBallTagComponent' })
-
+let physicsEntityCount = 0
 export const createPhysicsEntity = (sceneEntity: Entity) => {
   const entity = createEntity()
 
   const position = new Vector3(Math.random() * 10 - 5, Math.random() * 2 + 2, Math.random() * 10 - 5)
-  const obj3d = new Group()
-  obj3d.entity = entity
-  setComponent(entity, UUIDComponent, MathUtils.generateUUID() as EntityUUID)
+  setComponent(entity, UUIDComponent, ('Ball-' + physicsEntityCount++) as EntityUUID)
   setComponent(entity, EntityTreeComponent, { parentEntity: sceneEntity })
-  setComponent(entity, Object3DComponent, obj3d)
   setComponent(entity, TransformComponent, { position, scale: new Vector3(0.5, 0.5, 0.5) })
   setComponent(entity, PrimitiveGeometryComponent, {
     geometryType: GeometryTypeEnum.SphereGeometry
@@ -63,6 +71,7 @@ export const createPhysicsEntity = (sceneEntity: Entity) => {
     restitution: MathUtils.randFloat(0.1, 1.0)
   })
   setComponent(entity, TestSuiteBallTagComponent)
+  setComponent(entity, InputComponent)
 
   return entity
 }
@@ -172,6 +181,30 @@ const SceneReactor = (props: {
 
   return null
 }
+const interactionGroups = getInteractionGroups(CollisionGroups.Default, CollisionGroups.Default)
+const raycastComponentData = {
+  type: SceneQueryType.Closest,
+  origin: new Vector3(),
+  direction: new Vector3(),
+  maxDistance: 10000,
+  groups: interactionGroups
+} as RaycastArgs
+
+const getPointerOverBall = (entity: Entity) => {
+  if (getComponent(entity, InputComponent).inputSources.length) console.log(entity)
+  const inputPointerEntity = InputPointerComponent.getPointerForCanvas(Engine.instance.viewerEntity)
+  if (!inputPointerEntity) return
+  const physicsWorld = Physics.getWorld(entity)
+  if (!physicsWorld) return
+  const pointerPosition = getComponent(inputPointerEntity, InputPointerComponent).position
+  const hits = Physics.castRayFromCamera(
+    physicsWorld,
+    getComponent(Engine.instance.viewerEntity, CameraComponent),
+    pointerPosition,
+    raycastComponentData
+  )
+  return hits.find((hit) => hit.entity === entity) !== undefined
+}
 
 const testSuiteBallTagQuery = defineQuery([TestSuiteBallTagComponent])
 
@@ -182,6 +215,13 @@ const execute = () => {
     if (rigidbody.position.y < -10) {
       transform.position.set(Math.random() * 10 - 5, Math.random() * 2 + 2, Math.random() * 10 - 5)
     }
+
+    const isPointerOver = getPointerOverBall(entity)
+    const materialInstance = getOptionalComponent(entity, MaterialInstanceComponent)
+    if (!materialInstance) continue
+    const materialEntity = UUIDComponent.getEntityByUUID(materialInstance.uuid[0])
+    const material = getComponent(materialEntity, MaterialStateComponent).material as MeshLambertMaterial
+    material.color.set(isPointerOver ? 'red' : 'white')
   }
 }
 
@@ -191,7 +231,7 @@ export const BallResetSystem = defineSystem({
   execute
 })
 
-const gridCount = 5
+const gridCount = 3
 const gridSpacing = 10
 
 export default function MultipleScenesEntry() {

From d1151013a15e907226a42b5da0afc12e85eca644 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Tue, 25 Jun 2024 15:59:39 +1000
Subject: [PATCH 06/20] fix

---
 src/examples/multipleScenes.tsx | 26 +-------------------------
 1 file changed, 1 insertion(+), 25 deletions(-)

diff --git a/src/examples/multipleScenes.tsx b/src/examples/multipleScenes.tsx
index 0235b07..055764a 100644
--- a/src/examples/multipleScenes.tsx
+++ b/src/examples/multipleScenes.tsx
@@ -181,30 +181,6 @@ const SceneReactor = (props: {
 
   return null
 }
-const interactionGroups = getInteractionGroups(CollisionGroups.Default, CollisionGroups.Default)
-const raycastComponentData = {
-  type: SceneQueryType.Closest,
-  origin: new Vector3(),
-  direction: new Vector3(),
-  maxDistance: 10000,
-  groups: interactionGroups
-} as RaycastArgs
-
-const getPointerOverBall = (entity: Entity) => {
-  if (getComponent(entity, InputComponent).inputSources.length) console.log(entity)
-  const inputPointerEntity = InputPointerComponent.getPointerForCanvas(Engine.instance.viewerEntity)
-  if (!inputPointerEntity) return
-  const physicsWorld = Physics.getWorld(entity)
-  if (!physicsWorld) return
-  const pointerPosition = getComponent(inputPointerEntity, InputPointerComponent).position
-  const hits = Physics.castRayFromCamera(
-    physicsWorld,
-    getComponent(Engine.instance.viewerEntity, CameraComponent),
-    pointerPosition,
-    raycastComponentData
-  )
-  return hits.find((hit) => hit.entity === entity) !== undefined
-}
 
 const testSuiteBallTagQuery = defineQuery([TestSuiteBallTagComponent])
 
@@ -216,7 +192,7 @@ const execute = () => {
       transform.position.set(Math.random() * 10 - 5, Math.random() * 2 + 2, Math.random() * 10 - 5)
     }
 
-    const isPointerOver = getPointerOverBall(entity)
+    const isPointerOver = getComponent(entity, InputComponent).inputSources.length > 0
     const materialInstance = getOptionalComponent(entity, MaterialInstanceComponent)
     if (!materialInstance) continue
     const materialEntity = UUIDComponent.getEntityByUUID(materialInstance.uuid[0])

From 4e2e404d2bd9756f37391150dbf1291780d56357 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Sun, 30 Jun 2024 11:56:35 +1000
Subject: [PATCH 07/20] xr emulator works!

---
 src/examples/scenePlacement.tsx | 29 ++++++++++++++++++-----------
 src/sceneRoute.tsx              |  2 +-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/examples/scenePlacement.tsx b/src/examples/scenePlacement.tsx
index 75e9452..df92687 100644
--- a/src/examples/scenePlacement.tsx
+++ b/src/examples/scenePlacement.tsx
@@ -1,13 +1,16 @@
 import { useLoadEngineWithScene, useNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
-import { Engine, getComponent, setComponent } from '@etherealengine/ecs'
-import { getMutableState, useHookstate, useImmediateEffect } from '@etherealengine/hyperflux'
+import { getComponent, setComponent } from '@etherealengine/ecs'
+import { getMutableState, useHookstate, useImmediateEffect, useMutableState } from '@etherealengine/hyperflux'
 import { TransformComponent } from '@etherealengine/spatial'
+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 { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
 import { updateWorldOriginFromScenePlacement } from '@etherealengine/spatial/src/transform/updateWorldOrigin'
 import { XRState } from '@etherealengine/spatial/src/xr/XRState'
+import { EmulatorDevtools } from 'ee-bot/devtool/EmulatorDevtools'
+import 'ee-bot/src/functions/BotHookSystem'
 import React, { useEffect } from 'react'
 import { Quaternion, Vector3 } from 'three'
 import { useRouteScene } from '../sceneRoute'
@@ -17,15 +20,17 @@ export default function ScenePlacement() {
   const sceneEntity = useRouteScene('default-project', 'public/scenes/apartment.gltf')
   useNetwork({ online: false })
   useLoadEngineWithScene()
+  const viewerEntity = useMutableState(EngineState).viewerEntity.value
+  const localFloorEntity = useMutableState(EngineState).localFloorEntity.value
 
   useImmediateEffect(() => {
+    if (!viewerEntity) return
     getMutableState(RendererState).gridVisibility.set(true)
     getMutableState(RendererState).physicsDebug.set(true)
-    const entity = Engine.instance.viewerEntity
-    setComponent(entity, CameraOrbitComponent)
-    setComponent(entity, InputComponent)
-    getComponent(entity, CameraComponent).position.set(0, 3, 4)
-  }, [])
+    setComponent(viewerEntity, CameraOrbitComponent)
+    setComponent(viewerEntity, InputComponent)
+    getComponent(viewerEntity, CameraComponent).position.set(0, 3, 4)
+  }, [viewerEntity])
 
   /** Origin Transform */
   const transformState = useHookstate({
@@ -35,18 +40,19 @@ export default function ScenePlacement() {
   })
 
   useEffect(() => {
+    if (!localFloorEntity) return
     const xrState = getMutableState(XRState)
     xrState.scenePosition.value.copy(transformState.position.value)
     xrState.sceneRotation.value.copy(transformState.rotation.value)
     xrState.sceneScale.set(transformState.scale.value.x)
     updateWorldOriginFromScenePlacement()
-  }, [transformState.position, transformState.rotation, transformState.scale])
+  }, [localFloorEntity, transformState.position, transformState.rotation, transformState.scale])
 
   /** Scene Transform */
   const transformState2 = useHookstate({
-    position: new Vector3(2, 0, 2),
+    position: new Vector3(), //(2, 0, 2),
     rotation: new Quaternion(),
-    scale: new Vector3().setScalar(0.1)
+    scale: new Vector3() //.setScalar(0.1)
   })
 
   useEffect(() => {
@@ -59,9 +65,10 @@ export default function ScenePlacement() {
   }, [sceneEntity, transformState2.position, transformState2.rotation, transformState2.scale])
 
   return (
-    <div className="pointer-events-auto absolute right-0 w-fit flex flex-col flex-grid justify-start gap-1.5">
+    <div className="flex-grid pointer-events-auto absolute right-0 flex h-full w-fit flex-col justify-start gap-1.5">
       <Transform title={'Origin'} transformState={transformState} />
       <Transform title={'Scene'} transformState={transformState2} />
+      <EmulatorDevtools />
     </div>
   )
 }
diff --git a/src/sceneRoute.tsx b/src/sceneRoute.tsx
index 5583202..a63ece8 100644
--- a/src/sceneRoute.tsx
+++ b/src/sceneRoute.tsx
@@ -6,7 +6,7 @@ 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 '@etherealengine/client-core/src/world/LocationModule' // enable this to spawn avatar - todo: make configurable
 import { staticResourcePath } from '@etherealengine/common/src/schema.type.module'
 import { Entity, getComponent, setComponent } from '@etherealengine/ecs'
 import '@etherealengine/engine/src/EngineModule'

From 4dea71d27654fd338cab9cd312aaaf9a50e99d76 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Sun, 30 Jun 2024 13:54:10 +1000
Subject: [PATCH 08/20] can enter and exit spectate cleanly

---
 src/examples/scenePlacement.tsx | 31 ++++++++++++-------------------
 src/sceneRoute.tsx              |  7 +++++--
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/examples/scenePlacement.tsx b/src/examples/scenePlacement.tsx
index df92687..be51395 100644
--- a/src/examples/scenePlacement.tsx
+++ b/src/examples/scenePlacement.tsx
@@ -1,11 +1,9 @@
+import { MediaIconsBox } from '@etherealengine/client-core/src/components/MediaIconsBox'
 import { useLoadEngineWithScene, useNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
-import { getComponent, setComponent } from '@etherealengine/ecs'
+import { setComponent } from '@etherealengine/ecs'
 import { getMutableState, useHookstate, useImmediateEffect, useMutableState } from '@etherealengine/hyperflux'
 import { TransformComponent } from '@etherealengine/spatial'
 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 { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
 import { updateWorldOriginFromScenePlacement } from '@etherealengine/spatial/src/transform/updateWorldOrigin'
 import { XRState } from '@etherealengine/spatial/src/xr/XRState'
@@ -27,9 +25,6 @@ export default function ScenePlacement() {
     if (!viewerEntity) return
     getMutableState(RendererState).gridVisibility.set(true)
     getMutableState(RendererState).physicsDebug.set(true)
-    setComponent(viewerEntity, CameraOrbitComponent)
-    setComponent(viewerEntity, InputComponent)
-    getComponent(viewerEntity, CameraComponent).position.set(0, 3, 4)
   }, [viewerEntity])
 
   /** Origin Transform */
@@ -50,9 +45,9 @@ export default function ScenePlacement() {
 
   /** Scene Transform */
   const transformState2 = useHookstate({
-    position: new Vector3(), //(2, 0, 2),
+    position: new Vector3(2, 0, 2),
     rotation: new Quaternion(),
-    scale: new Vector3() //.setScalar(0.1)
+    scale: new Vector3().setScalar(0.1)
   })
 
   useEffect(() => {
@@ -65,15 +60,13 @@ export default function ScenePlacement() {
   }, [sceneEntity, transformState2.position, transformState2.rotation, transformState2.scale])
 
   return (
-    <div className="flex-grid pointer-events-auto absolute right-0 flex h-full w-fit flex-col justify-start gap-1.5">
-      <Transform title={'Origin'} transformState={transformState} />
-      <Transform title={'Scene'} transformState={transformState2} />
-      <EmulatorDevtools />
-    </div>
+    <>
+      <MediaIconsBox />
+      <div className="flex-grid pointer-events-auto absolute right-0 flex h-full w-fit flex-col justify-start gap-1.5">
+        <Transform title={'Origin'} transformState={transformState} />
+        <Transform title={'Scene'} transformState={transformState2} />
+        <EmulatorDevtools />
+      </div>
+    </>
   )
 }
-
-/**
- * Scene placement
- * -
- */
diff --git a/src/sceneRoute.tsx b/src/sceneRoute.tsx
index a63ece8..7f4fa6a 100644
--- a/src/sceneRoute.tsx
+++ b/src/sceneRoute.tsx
@@ -6,7 +6,7 @@ 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' // enable this to spawn avatar - todo: make configurable
+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'
@@ -19,6 +19,7 @@ import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHo
 import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
 import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
 import { HiChevronDoubleLeft, HiChevronDoubleRight } from 'react-icons/hi2'
+import { SearchParamState } from '@etherealengine/client-core/src/common/services/RouterService'
 
 type Metadata = {
   name: string
@@ -80,7 +81,9 @@ export const useRouteScene = (projectName = 'ee-development-test-suite', sceneNa
     if (!viewerEntity) return
     setComponent(viewerEntity, CameraOrbitComponent)
     setComponent(viewerEntity, InputComponent)
-    getComponent(viewerEntity, CameraComponent).position.set(0, 0, 4)
+    getComponent(viewerEntity, CameraComponent).position.set(0, 3, 4)
+
+    SearchParamState.set('spectate', '')
   }, [viewerEntity])
 
   return sceneEntity

From ff14012eece5be0d90cf1e1a948faabed0542ced Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Wed, 3 Jul 2024 15:47:20 +1000
Subject: [PATCH 09/20] add immersive vr route

---
 src/examples/immersiveVR.tsx    | 37 +++++++++++++++++++++++++++++++++
 src/examples/scenePlacement.tsx |  6 +++---
 src/examplesRoute.tsx           |  6 ++++++
 src/sceneRoute.tsx              |  2 +-
 4 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 src/examples/immersiveVR.tsx

diff --git a/src/examples/immersiveVR.tsx b/src/examples/immersiveVR.tsx
new file mode 100644
index 0000000..79a565a
--- /dev/null
+++ b/src/examples/immersiveVR.tsx
@@ -0,0 +1,37 @@
+import { MediaIconsBox } from '@etherealengine/client-core/src/components/MediaIconsBox'
+import { useLoadEngineWithScene, useNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
+import { setComponent } from '@etherealengine/ecs'
+import { getMutableState, useHookstate, useImmediateEffect, useMutableState } from '@etherealengine/hyperflux'
+import { TransformComponent } from '@etherealengine/spatial'
+import { EngineState } from '@etherealengine/spatial/src/EngineState'
+import { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
+import { updateWorldOriginFromScenePlacement } from '@etherealengine/spatial/src/transform/updateWorldOrigin'
+import { XRState } from '@etherealengine/spatial/src/xr/XRState'
+import { EmulatorDevtools } from 'ee-bot/devtool/EmulatorDevtools'
+import 'ee-bot/src/functions/BotHookSystem'
+import React, { useEffect } from 'react'
+import { Quaternion, Vector3 } from 'three'
+import { useRouteScene } from '../sceneRoute'
+import { Transform } from './utils/transform'
+
+export default function ImmersiveVR() {
+  const sceneEntity = useRouteScene('default-project', 'public/scenes/default.gltf')
+  useNetwork({ online: false })
+  useLoadEngineWithScene()
+  const viewerEntity = useMutableState(EngineState).viewerEntity.value
+
+  useImmediateEffect(() => {
+    if (!viewerEntity) return
+    getMutableState(RendererState).gridVisibility.set(true)
+    getMutableState(RendererState).physicsDebug.set(true)
+  }, [viewerEntity])
+
+  return (
+    <>
+      <MediaIconsBox />
+      <div className="flex-grid pointer-events-auto absolute right-0 flex h-full w-fit flex-col justify-start gap-1.5">
+        <EmulatorDevtools />
+      </div>
+    </>
+  )
+}
diff --git a/src/examples/scenePlacement.tsx b/src/examples/scenePlacement.tsx
index be51395..26b88e2 100644
--- a/src/examples/scenePlacement.tsx
+++ b/src/examples/scenePlacement.tsx
@@ -15,7 +15,7 @@ import { useRouteScene } from '../sceneRoute'
 import { Transform } from './utils/transform'
 
 export default function ScenePlacement() {
-  const sceneEntity = useRouteScene('default-project', 'public/scenes/apartment.gltf')
+  const sceneEntity = useRouteScene('default-project', 'public/scenes/default.gltf')
   useNetwork({ online: false })
   useLoadEngineWithScene()
   const viewerEntity = useMutableState(EngineState).viewerEntity.value
@@ -45,9 +45,9 @@ export default function ScenePlacement() {
 
   /** Scene Transform */
   const transformState2 = useHookstate({
-    position: new Vector3(2, 0, 2),
+    position: new Vector3(),//(2, 0, 2),
     rotation: new Quaternion(),
-    scale: new Vector3().setScalar(0.1)
+    scale: new Vector3()//.setScalar(0.1)
   })
 
   useEffect(() => {
diff --git a/src/examplesRoute.tsx b/src/examplesRoute.tsx
index 0a641d1..5d1e698 100644
--- a/src/examplesRoute.tsx
+++ b/src/examplesRoute.tsx
@@ -8,6 +8,7 @@ import GLTFViewer from './examples/gltf'
 import Routes, { RouteData } from './sceneRoute'
 import MultipleScenesEntry from './examples/multipleScenes'
 import ScenePlacement from './examples/scenePlacement'
+import ImmersiveVR from './examples/immersiveVR'
 
 export const examples: RouteData[] = [
   {
@@ -44,6 +45,11 @@ export const examples: RouteData[] = [
     name: 'Scene Placement',
     description: 'place scenes relative to the origin example',
     entry: ScenePlacement
+  },
+  {
+    name: 'Immersive VR',
+    description: 'Immersive VR example',
+    entry: ImmersiveVR
   }
 ]
 
diff --git a/src/sceneRoute.tsx b/src/sceneRoute.tsx
index 7f4fa6a..722ca3c 100644
--- a/src/sceneRoute.tsx
+++ b/src/sceneRoute.tsx
@@ -83,7 +83,7 @@ export const useRouteScene = (projectName = 'ee-development-test-suite', sceneNa
     setComponent(viewerEntity, InputComponent)
     getComponent(viewerEntity, CameraComponent).position.set(0, 3, 4)
 
-    SearchParamState.set('spectate', '')
+    // SearchParamState.set('spectate', '')
   }, [viewerEntity])
 
   return sceneEntity

From 973bd93167a0bbbbd67e935f2b0479d343875668 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Wed, 3 Jul 2024 19:11:02 +1000
Subject: [PATCH 10/20] merge examples

---
 src/examples/immersiveVR.tsx    | 12 ++----
 src/examples/scenePlacement.tsx | 72 ---------------------------------
 src/examplesRoute.tsx           | 10 +----
 3 files changed, 5 insertions(+), 89 deletions(-)
 delete mode 100644 src/examples/scenePlacement.tsx

diff --git a/src/examples/immersiveVR.tsx b/src/examples/immersiveVR.tsx
index 79a565a..acb1559 100644
--- a/src/examples/immersiveVR.tsx
+++ b/src/examples/immersiveVR.tsx
@@ -1,21 +1,15 @@
 import { MediaIconsBox } from '@etherealengine/client-core/src/components/MediaIconsBox'
 import { useLoadEngineWithScene, useNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
-import { setComponent } from '@etherealengine/ecs'
-import { getMutableState, useHookstate, useImmediateEffect, useMutableState } from '@etherealengine/hyperflux'
-import { TransformComponent } from '@etherealengine/spatial'
+import { getMutableState, useImmediateEffect, useMutableState } from '@etherealengine/hyperflux'
 import { EngineState } from '@etherealengine/spatial/src/EngineState'
 import { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
-import { updateWorldOriginFromScenePlacement } from '@etherealengine/spatial/src/transform/updateWorldOrigin'
-import { XRState } from '@etherealengine/spatial/src/xr/XRState'
 import { EmulatorDevtools } from 'ee-bot/devtool/EmulatorDevtools'
 import 'ee-bot/src/functions/BotHookSystem'
-import React, { useEffect } from 'react'
-import { Quaternion, Vector3 } from 'three'
+import React from 'react'
 import { useRouteScene } from '../sceneRoute'
-import { Transform } from './utils/transform'
 
 export default function ImmersiveVR() {
-  const sceneEntity = useRouteScene('default-project', 'public/scenes/default.gltf')
+  useRouteScene('default-project', 'public/scenes/default.gltf')
   useNetwork({ online: false })
   useLoadEngineWithScene()
   const viewerEntity = useMutableState(EngineState).viewerEntity.value
diff --git a/src/examples/scenePlacement.tsx b/src/examples/scenePlacement.tsx
deleted file mode 100644
index 26b88e2..0000000
--- a/src/examples/scenePlacement.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { MediaIconsBox } from '@etherealengine/client-core/src/components/MediaIconsBox'
-import { useLoadEngineWithScene, useNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
-import { setComponent } from '@etherealengine/ecs'
-import { getMutableState, useHookstate, useImmediateEffect, useMutableState } from '@etherealengine/hyperflux'
-import { TransformComponent } from '@etherealengine/spatial'
-import { EngineState } from '@etherealengine/spatial/src/EngineState'
-import { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
-import { updateWorldOriginFromScenePlacement } from '@etherealengine/spatial/src/transform/updateWorldOrigin'
-import { XRState } from '@etherealengine/spatial/src/xr/XRState'
-import { EmulatorDevtools } from 'ee-bot/devtool/EmulatorDevtools'
-import 'ee-bot/src/functions/BotHookSystem'
-import React, { useEffect } from 'react'
-import { Quaternion, Vector3 } from 'three'
-import { useRouteScene } from '../sceneRoute'
-import { Transform } from './utils/transform'
-
-export default function ScenePlacement() {
-  const sceneEntity = useRouteScene('default-project', 'public/scenes/default.gltf')
-  useNetwork({ online: false })
-  useLoadEngineWithScene()
-  const viewerEntity = useMutableState(EngineState).viewerEntity.value
-  const localFloorEntity = useMutableState(EngineState).localFloorEntity.value
-
-  useImmediateEffect(() => {
-    if (!viewerEntity) return
-    getMutableState(RendererState).gridVisibility.set(true)
-    getMutableState(RendererState).physicsDebug.set(true)
-  }, [viewerEntity])
-
-  /** Origin Transform */
-  const transformState = useHookstate({
-    position: new Vector3(),
-    rotation: new Quaternion(),
-    scale: new Vector3(1, 1, 1)
-  })
-
-  useEffect(() => {
-    if (!localFloorEntity) return
-    const xrState = getMutableState(XRState)
-    xrState.scenePosition.value.copy(transformState.position.value)
-    xrState.sceneRotation.value.copy(transformState.rotation.value)
-    xrState.sceneScale.set(transformState.scale.value.x)
-    updateWorldOriginFromScenePlacement()
-  }, [localFloorEntity, transformState.position, transformState.rotation, transformState.scale])
-
-  /** Scene Transform */
-  const transformState2 = useHookstate({
-    position: new Vector3(),//(2, 0, 2),
-    rotation: new Quaternion(),
-    scale: new Vector3()//.setScalar(0.1)
-  })
-
-  useEffect(() => {
-    if (!sceneEntity.value) return
-    setComponent(sceneEntity.value, TransformComponent, {
-      position: transformState2.position.value,
-      rotation: transformState2.rotation.value,
-      scale: transformState2.scale.value
-    })
-  }, [sceneEntity, transformState2.position, transformState2.rotation, transformState2.scale])
-
-  return (
-    <>
-      <MediaIconsBox />
-      <div className="flex-grid pointer-events-auto absolute right-0 flex h-full w-fit flex-col justify-start gap-1.5">
-        <Transform title={'Origin'} transformState={transformState} />
-        <Transform title={'Scene'} transformState={transformState2} />
-        <EmulatorDevtools />
-      </div>
-    </>
-  )
-}
diff --git a/src/examplesRoute.tsx b/src/examplesRoute.tsx
index 5d1e698..0abb193 100644
--- a/src/examplesRoute.tsx
+++ b/src/examplesRoute.tsx
@@ -5,10 +5,9 @@ import AvatarMocapEntry from './examples/avatarMocap'
 import AvatarTestEntry from './examples/avatarTest'
 import ComponentExamplesRoute, { subComponentExamples } from './examples/componentExamples/componentExamples'
 import GLTFViewer from './examples/gltf'
-import Routes, { RouteData } from './sceneRoute'
-import MultipleScenesEntry from './examples/multipleScenes'
-import ScenePlacement from './examples/scenePlacement'
 import ImmersiveVR from './examples/immersiveVR'
+import MultipleScenesEntry from './examples/multipleScenes'
+import Routes, { RouteData } from './sceneRoute'
 
 export const examples: RouteData[] = [
   {
@@ -41,11 +40,6 @@ export const examples: RouteData[] = [
     description: 'multiple scenes example',
     entry: MultipleScenesEntry
   },
-  {
-    name: 'Scene Placement',
-    description: 'place scenes relative to the origin example',
-    entry: ScenePlacement
-  },
   {
     name: 'Immersive VR',
     description: 'Immersive VR example',

From b5a0326760a32c2074dfaa0b30d7039ed934b9ab Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Thu, 4 Jul 2024 09:30:36 +1000
Subject: [PATCH 11/20] fix xr meshes and add ar example

---
 src/examples/XRMeshes.tsx    | 59 ++++++++++++++++++++++++++++++++++--
 src/examples/immersiveAR.tsx | 51 +++++++++++++++++++++++++++++++
 src/examples/immersiveVR.tsx |  8 ++++-
 src/examplesRoute.tsx        |  6 ++++
 4 files changed, 120 insertions(+), 4 deletions(-)
 create mode 100644 src/examples/immersiveAR.tsx

diff --git a/src/examples/XRMeshes.tsx b/src/examples/XRMeshes.tsx
index 5f7a812..8305efc 100644
--- a/src/examples/XRMeshes.tsx
+++ b/src/examples/XRMeshes.tsx
@@ -1,15 +1,29 @@
 import React, { useEffect } from 'react'
-import { BufferGeometry, Mesh, MeshBasicMaterial, MeshNormalMaterial } from 'three'
+import { BufferGeometry, Mesh, MeshBasicMaterial, MeshNormalMaterial, Vector3 } from 'three'
 
-import { setComponent, useComponent } from '@etherealengine/ecs/src/ComponentFunctions'
-import { useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
+import {
+  getComponent,
+  removeComponent,
+  setComponent,
+  useComponent,
+  useOptionalComponent
+} from '@etherealengine/ecs/src/ComponentFunctions'
+import { createEntity, removeEntity, useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
 import { addObjectToGroup, removeObjectFromGroup } from '@etherealengine/spatial/src/renderer/components/GroupComponent'
 
 import { QueryReactor } from '@etherealengine/ecs/src/QueryFunctions'
+import { TransformComponent } from '@etherealengine/spatial'
+import { ColliderComponent } from '@etherealengine/spatial/src/physics/components/ColliderComponent'
+import { RigidBodyComponent } from '@etherealengine/spatial/src/physics/components/RigidBodyComponent'
+import { CollisionGroups, DefaultCollisionMask } from '@etherealengine/spatial/src/physics/enums/CollisionGroups'
+import { BodyTypes, Shapes } from '@etherealengine/spatial/src/physics/types/PhysicsTypes'
+import { MeshComponent } from '@etherealengine/spatial/src/renderer/components/MeshComponent'
+import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent'
 import { XRDetectedMeshComponent } from '@etherealengine/spatial/src/xr/XRDetectedMeshComponent'
 import { XRDetectedPlaneComponent } from '@etherealengine/spatial/src/xr/XRDetectedPlaneComponent'
 import { Template } from './utils/template'
+import { EntityTreeComponent } from '@etherealengine/spatial/src/transform/components/EntityTree'
 
 const wireframeMaterial = new MeshBasicMaterial({ wireframe: true })
 const normalMaterial = new MeshNormalMaterial({ opacity: 0.5, transparent: true })
@@ -28,11 +42,41 @@ export const DetectedPlanes = () => {
       NameComponent,
       'Plane ' + (xrPlane.plane.value.semanticLabel ?? xrPlane.plane.orientation.value)
     )
+
+    const geometry = xrPlane.geometry.value as BufferGeometry
+    const box = geometry.boundingBox!
+    const height = box.max.x - box.min.x
+    const width = box.max.z - box.min.z
+
+    /** Create a child entity such that we can have a distinct scale for the collider */
+
+    const colliderEntity = createEntity()
+    setComponent(colliderEntity, NameComponent, 'Plane ' + entity + ' Collider')
+    setComponent(colliderEntity, EntityTreeComponent, {
+      parentEntity: entity,
+    })
+    setComponent(colliderEntity, TransformComponent, {
+      scale: new Vector3(height, 0.01, width)
+    })
+
+    setComponent(colliderEntity, RigidBodyComponent, {
+      type: BodyTypes.Fixed
+    })
+    setComponent(colliderEntity, ColliderComponent, {
+      shape: Shapes.Box,
+      collisionLayer: CollisionGroups.Ground,
+      collisionMask: DefaultCollisionMask
+    })
     return () => {
+      removeEntity(colliderEntity)
       removeObjectFromGroup(entity, transparentMesh)
     }
   }, [xrPlane.geometry])
 
+  useEffect(() => {
+    if (!xrPlane.value || !xrPlane.geometry.value) return
+  }, [xrPlane?.geometry])
+
   return null
 }
 
@@ -46,6 +90,15 @@ export const DetectedMeshes = () => {
     const outlineMesh = new Mesh(xrmesh.geometry.value as BufferGeometry, wireframeMaterial)
     addObjectToGroup(entity, outlineMesh)
     setComponent(entity, NameComponent, 'Plane ' + (xrmesh.mesh.value.semanticLabel ?? entity))
+
+    setComponent(entity, RigidBodyComponent, {
+      type: BodyTypes.Fixed
+    })
+    setComponent(entity, ColliderComponent, {
+      shape: Shapes.Mesh,
+      collisionLayer: CollisionGroups.Ground,
+      collisionMask: DefaultCollisionMask
+    })
     return () => {
       removeObjectFromGroup(entity, outlineMesh)
     }
diff --git a/src/examples/immersiveAR.tsx b/src/examples/immersiveAR.tsx
new file mode 100644
index 0000000..90e1a8a
--- /dev/null
+++ b/src/examples/immersiveAR.tsx
@@ -0,0 +1,51 @@
+import { MediaIconsBox } from '@etherealengine/client-core/src/components/MediaIconsBox'
+import { useLoadEngineWithScene, useNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
+import { QueryReactor, createEntity, removeEntity, setComponent } from '@etherealengine/ecs'
+import { GroundPlaneComponent } from '@etherealengine/engine/src/scene/components/GroundPlaneComponent'
+import { getMutableState, getState, useImmediateEffect, useMutableState } from '@etherealengine/hyperflux'
+import { TransformComponent } from '@etherealengine/spatial'
+import { EngineState } from '@etherealengine/spatial/src/EngineState'
+import { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
+import { EntityTreeComponent } from '@etherealengine/spatial/src/transform/components/EntityTree'
+import { XRDetectedMeshComponent } from '@etherealengine/spatial/src/xr/XRDetectedMeshComponent'
+import { XRDetectedPlaneComponent } from '@etherealengine/spatial/src/xr/XRDetectedPlaneComponent'
+import { EmulatorDevtools } from 'ee-bot/devtool/EmulatorDevtools'
+import 'ee-bot/src/functions/BotHookSystem'
+import React from 'react'
+import { useRouteScene } from '../sceneRoute'
+import { DetectedMeshes, DetectedPlanes } from './XRMeshes'
+
+export default function ImmersiveAR() {
+  useRouteScene('default-project', 'public/scenes/default.gltf')
+  useNetwork({ online: false })
+  useLoadEngineWithScene()
+  const viewerEntity = useMutableState(EngineState).viewerEntity.value
+
+  useImmediateEffect(() => {
+    if (!viewerEntity) return
+    getMutableState(RendererState).gridVisibility.set(true)
+    getMutableState(RendererState).physicsDebug.set(true)
+
+    /** Add ground plane to ensure the avatar never falls out of the world */
+    const localFloorEntity = getState(EngineState).localFloorEntity
+    const groundPlaneEntity = createEntity()
+    setComponent(groundPlaneEntity, EntityTreeComponent, { parentEntity: localFloorEntity })
+    setComponent(groundPlaneEntity, TransformComponent)
+    setComponent(groundPlaneEntity, GroundPlaneComponent, { visible: false })
+
+    return () => {
+      removeEntity(groundPlaneEntity)
+    }
+  }, [viewerEntity])
+
+  return (
+    <>
+      <QueryReactor Components={[XRDetectedPlaneComponent]} ChildEntityReactor={DetectedPlanes} />
+      <QueryReactor Components={[XRDetectedMeshComponent]} ChildEntityReactor={DetectedMeshes} />
+      <MediaIconsBox />
+      <div className="flex-grid pointer-events-auto absolute right-0 flex h-full w-fit flex-col justify-start gap-1.5">
+        <EmulatorDevtools mode="immersive-ar" />
+      </div>
+    </>
+  )
+}
diff --git a/src/examples/immersiveVR.tsx b/src/examples/immersiveVR.tsx
index acb1559..60d545f 100644
--- a/src/examples/immersiveVR.tsx
+++ b/src/examples/immersiveVR.tsx
@@ -1,12 +1,16 @@
 import { MediaIconsBox } from '@etherealengine/client-core/src/components/MediaIconsBox'
 import { useLoadEngineWithScene, useNetwork } from '@etherealengine/client-core/src/components/World/EngineHooks'
+import { QueryReactor } from '@etherealengine/ecs'
 import { getMutableState, useImmediateEffect, useMutableState } from '@etherealengine/hyperflux'
 import { EngineState } from '@etherealengine/spatial/src/EngineState'
 import { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
+import { XRDetectedMeshComponent } from '@etherealengine/spatial/src/xr/XRDetectedMeshComponent'
+import { XRDetectedPlaneComponent } from '@etherealengine/spatial/src/xr/XRDetectedPlaneComponent'
 import { EmulatorDevtools } from 'ee-bot/devtool/EmulatorDevtools'
 import 'ee-bot/src/functions/BotHookSystem'
 import React from 'react'
 import { useRouteScene } from '../sceneRoute'
+import { DetectedMeshes, DetectedPlanes } from './XRMeshes'
 
 export default function ImmersiveVR() {
   useRouteScene('default-project', 'public/scenes/default.gltf')
@@ -22,9 +26,11 @@ export default function ImmersiveVR() {
 
   return (
     <>
+      <QueryReactor Components={[XRDetectedPlaneComponent]} ChildEntityReactor={DetectedPlanes} />
+      <QueryReactor Components={[XRDetectedMeshComponent]} ChildEntityReactor={DetectedMeshes} />
       <MediaIconsBox />
       <div className="flex-grid pointer-events-auto absolute right-0 flex h-full w-fit flex-col justify-start gap-1.5">
-        <EmulatorDevtools />
+        <EmulatorDevtools mode="immersive-vr" />
       </div>
     </>
   )
diff --git a/src/examplesRoute.tsx b/src/examplesRoute.tsx
index 0abb193..e05dc0a 100644
--- a/src/examplesRoute.tsx
+++ b/src/examplesRoute.tsx
@@ -8,6 +8,7 @@ import GLTFViewer from './examples/gltf'
 import ImmersiveVR from './examples/immersiveVR'
 import MultipleScenesEntry from './examples/multipleScenes'
 import Routes, { RouteData } from './sceneRoute'
+import ImmersiveAR from './examples/immersiveAR'
 
 export const examples: RouteData[] = [
   {
@@ -40,6 +41,11 @@ export const examples: RouteData[] = [
     description: 'multiple scenes example',
     entry: MultipleScenesEntry
   },
+  {
+    name: 'Immersive AR',
+    description: 'Immersive AR example',
+    entry: ImmersiveAR
+  },
   {
     name: 'Immersive VR',
     description: 'Immersive VR example',

From 3ba27d73895c5ae81f1f7afd04d8b693eb37dac0 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Thu, 4 Jul 2024 10:55:21 +1000
Subject: [PATCH 12/20] apartment for AR

---
 src/examples/immersiveAR.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/examples/immersiveAR.tsx b/src/examples/immersiveAR.tsx
index 90e1a8a..313c093 100644
--- a/src/examples/immersiveAR.tsx
+++ b/src/examples/immersiveAR.tsx
@@ -16,7 +16,7 @@ import { useRouteScene } from '../sceneRoute'
 import { DetectedMeshes, DetectedPlanes } from './XRMeshes'
 
 export default function ImmersiveAR() {
-  useRouteScene('default-project', 'public/scenes/default.gltf')
+  useRouteScene('default-project', 'public/scenes/apartment.gltf')
   useNetwork({ online: false })
   useLoadEngineWithScene()
   const viewerEntity = useMutableState(EngineState).viewerEntity.value

From e302bc8d54afec1337bff1922583d60581ce8539 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Thu, 4 Jul 2024 12:00:17 +1000
Subject: [PATCH 13/20] rework routes into categories

---
 src/examplesRoute.tsx |  83 +++++++++++++++-----------
 src/sceneRoute.tsx    | 131 ++++++++++++++++++++----------------------
 2 files changed, 109 insertions(+), 105 deletions(-)

diff --git a/src/examplesRoute.tsx b/src/examplesRoute.tsx
index e05dc0a..d67e0e9 100644
--- a/src/examplesRoute.tsx
+++ b/src/examplesRoute.tsx
@@ -5,56 +5,69 @@ import AvatarMocapEntry from './examples/avatarMocap'
 import AvatarTestEntry from './examples/avatarTest'
 import ComponentExamplesRoute, { subComponentExamples } from './examples/componentExamples/componentExamples'
 import GLTFViewer from './examples/gltf'
+import ImmersiveAR from './examples/immersiveAR'
 import ImmersiveVR from './examples/immersiveVR'
 import MultipleScenesEntry from './examples/multipleScenes'
-import Routes, { RouteData } from './sceneRoute'
-import ImmersiveAR from './examples/immersiveAR'
+import Routes, { RouteCategories } from './sceneRoute'
 
-export const examples: RouteData[] = [
+export const examples: RouteCategories = [
+  {
+    category: 'WebXR',
+    routes: [
+      {
+        name: 'Immersive AR',
+        description: 'Immersive AR example',
+        entry: ImmersiveAR
+      },
+      {
+        name: 'Immersive VR',
+        description: 'Immersive VR example',
+        entry: ImmersiveVR
+      }
+    ]
+  },
   {
-    name: 'Components Example',
-    description: 'Component examples',
-    entry: ComponentExamplesRoute,
-    sub: subComponentExamples.map((sub) => ({
+    category: 'Components',
+    routes: subComponentExamples.map((sub) => ({
       name: sub.name,
       description: sub.description,
-      props: { Reactor: sub.Reactor }
+      entry: () => <ComponentExamplesRoute Reactor={sub.Reactor} />
     }))
   },
   {
-    name: 'Avatar Mocap',
-    description: 'Avatar mocap example',
-    entry: AvatarMocapEntry
-  },
-  {
-    name: 'Avatar Test',
-    description: 'Load many avatars',
-    entry: AvatarTestEntry
-  },
-  {
-    name: 'GLTF Viewer',
-    description: 'Drag and drop GLTF files',
-    entry: GLTFViewer
-  },
-  {
-    name: 'Multiple Scenes',
-    description: 'multiple scenes example',
-    entry: MultipleScenesEntry
-  },
-  {
-    name: 'Immersive AR',
-    description: 'Immersive AR example',
-    entry: ImmersiveAR
+    category: 'Avatar',
+    routes: [
+      {
+        name: 'Mocap',
+        description: 'Avatar mocap example',
+        entry: AvatarMocapEntry
+      },
+      {
+        name: 'Test',
+        description: 'Load many avatars',
+        entry: AvatarTestEntry
+      }
+    ]
   },
   {
-    name: 'Immersive VR',
-    description: 'Immersive VR example',
-    entry: ImmersiveVR
+    category: 'Scene',
+    routes: [
+      {
+        name: 'GLTF Viewer',
+        description: 'Drag and drop GLTF files',
+        entry: GLTFViewer
+      },
+      {
+        name: 'Multiple',
+        description: 'multiple scenes example',
+        entry: MultipleScenesEntry
+      }
+    ]
   }
 ]
 
 const ExampleRoutes = () => {
-  return <Routes routes={examples} header="Examples" />
+  return <Routes routeCategories={examples} header="Examples" />
 }
 
 export default ExampleRoutes
diff --git a/src/sceneRoute.tsx b/src/sceneRoute.tsx
index 722ca3c..ed887cf 100644
--- a/src/sceneRoute.tsx
+++ b/src/sceneRoute.tsx
@@ -1,8 +1,9 @@
 // @ts-ignore
 import styles from './sceneRoute.css?inline'
 
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect } from 'react'
 
+import { SearchParamState } from '@etherealengine/client-core/src/common/services/RouterService'
 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'
@@ -11,7 +12,13 @@ import { staticResourcePath } from '@etherealengine/common/src/schema.type.modul
 import { Entity, getComponent, setComponent } from '@etherealengine/ecs'
 import '@etherealengine/engine/src/EngineModule'
 import { GLTFAssetState } from '@etherealengine/engine/src/gltf/GLTFState'
-import { useHookstate, useImmediateEffect, useMutableState } from '@etherealengine/hyperflux'
+import {
+  getMutableState,
+  useHookstate,
+  useImmediateEffect,
+  useMutableState,
+  useReactiveRef
+} 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'
@@ -19,7 +26,6 @@ import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHo
 import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
 import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
 import { HiChevronDoubleLeft, HiChevronDoubleRight } from 'react-icons/hi2'
-import { SearchParamState } from '@etherealengine/client-core/src/common/services/RouterService'
 
 type Metadata = {
   name: string
@@ -35,6 +41,8 @@ export type RouteData = Metadata & {
   sub?: SubRoute[]
 }
 
+export type RouteCategories = Array<{ category: string; routes: RouteData[] }>
+
 export const buttonStyle = {
   width: 'auto',
   height: '100%',
@@ -59,6 +67,7 @@ const Header = (props: { header: string }) => {
 }
 
 export const useRouteScene = (projectName = 'ee-development-test-suite', sceneName = 'public/scenes/Examples.gltf') => {
+  const viewerEntity = useMutableState(EngineState).viewerEntity.value
   useLoadScene({ projectName: projectName, sceneName: sceneName })
   useNetwork({ online: false })
   useLoadEngineWithScene()
@@ -67,7 +76,6 @@ 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
@@ -83,61 +91,37 @@ export const useRouteScene = (projectName = 'ee-development-test-suite', sceneNa
     setComponent(viewerEntity, InputComponent)
     getComponent(viewerEntity, CameraComponent).position.set(0, 3, 4)
 
-    // SearchParamState.set('spectate', '')
+    SearchParamState.set('spectate', '')
   }, [viewerEntity])
 
   return sceneEntity
 }
 
-const routeKey = 'route'
-const subRouteKey = 'subroute'
+const getPathForRoute = (category: string, name: string) => {
+  return (category.toLowerCase() + '_' + name.toLocaleLowerCase()).replace(' ', '_')
+}
 
-const Routes = (props: { routes: RouteData[]; header: string }) => {
-  const { routes, header } = props
-  const [currentRoute, setCurrentRoute] = useState(null as null | number)
-  const [currentSubRoute, setCurrentSubRoute] = useState(0)
+const Routes = (props: { routeCategories: RouteCategories; header: string }) => {
+  const { routeCategories, header } = props
+  const currentRoute = useMutableState(SearchParamState).example.value
+  const categoriesShown = useHookstate({} as Record<string, boolean>)
   const hidden = useHookstate(false)
 
-  const ref = useRef(null as null | HTMLDivElement)
+  const [ref, setRef] = useReactiveRef<HTMLDivElement>()
 
   useEngineCanvas(ref)
 
-  const onClick = (routeIndex: number) => {
-    setCurrentRoute(routeIndex)
-    setCurrentSubRoute(0)
-  }
+  const viewerEntity = useHookstate(getMutableState(EngineState).viewerEntity).value
 
-  const onSubClick = (subIndex: number) => {
-    setCurrentSubRoute(subIndex)
+  const onClick = (category: string, route: string) => {
+    SearchParamState.set('example', getPathForRoute(category, route))
   }
 
-  useEffect(() => {
-    const queryString = window.location.search
-    const urlParams = new URLSearchParams(queryString)
-    const routeIndexStr = urlParams.get(routeKey) as any
-    if (routeIndexStr) {
-      const routeIndex = Number(routeIndexStr)
-      setCurrentRoute(routeIndex)
-      const subIndexStr = urlParams.get(subRouteKey) as any
-      if (subIndexStr) {
-        const subIndex = Number(subIndexStr)
-        setCurrentSubRoute(subIndex)
-      }
-    }
-  }, [])
+  const selectedRoute = routeCategories.flatMap((route) =>
+    route.routes.filter((r) => getPathForRoute(route.category, r.name) === currentRoute)
+  )[0]
 
-  useEffect(() => {
-    if (currentRoute === null) return
-    const url = new URL(window.location.href)
-    url.searchParams.set(routeKey, currentRoute.toString())
-    url.searchParams.set(subRouteKey, currentSubRoute.toString())
-    window.history.pushState(null, '', url.toString())
-  }, [currentRoute, currentSubRoute])
-
-  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 (
     <>
@@ -160,43 +144,50 @@ const Routes = (props: { routes: RouteData[]; header: string }) => {
         <div className="NavBarContainer" style={{ zIndex: '100', width: hidden.value ? '0%' : '' }}>
           <Header header={header} />
           <div className="NavBarSelectionContainer">
-            {routes.map((route, index) => {
-              const title = route.name
-              const desc = route.description
+            {routeCategories.map((category, index) => {
+              const categoryShown = categoriesShown[category.category]
               return (
-                <React.Fragment key={title}>
-                  <div
-                    className={index === currentRoute ? 'SelectedItemContainer' : 'RouteItemContainer'}
-                    onClick={() => onClick(index)}
-                  >
-                    <div className="RouteItemTitle">{title}</div>
-                    <div className="RouteItemDescription">{desc}</div>
+                <React.Fragment key={category.category}>
+                  <div className="flex flex-row text-white">
+                    {category.category}
+                    <Button
+                      className="z-10 m-1 px-0"
+                      rounded="full"
+                      variant="outline"
+                      onClick={() => categoryShown.set(!categoryShown.value)}
+                      startIcon={
+                        categoryShown.value ? (
+                          <HiChevronDoubleRight className="pointer-events-none place-self-center text-theme-primary" />
+                        ) : (
+                          <HiChevronDoubleLeft className="pointer-events-none place-self-center text-theme-primary" />
+                        )
+                      }
+                    />
                   </div>
-                  {index === currentRoute && routes[currentRoute]?.sub && (
-                    <div className="SubItemsContainer">
-                      {routes[currentRoute].sub?.map((sub, subIndex) => {
-                        const subTitle = sub.name
-                        const subDesc = sub.description
-                        return (
+                  {categoryShown.value &&
+                    category.routes.map((route, index) => {
+                      const title = route.name
+                      const desc = route.description
+                      const path = getPathForRoute(category.category, title)
+                      return (
+                        <React.Fragment key={title}>
                           <div
-                            key={subTitle}
-                            className={subIndex === currentSubRoute ? 'SelectedItemContainer' : 'RouteItemContainer'}
-                            onClick={() => onSubClick(subIndex)}
+                            className={path === currentRoute ? 'SelectedItemContainer' : 'RouteItemContainer'}
+                            onClick={() => onClick(category.category, title)}
                           >
-                            <div className="RouteItemTitle">{subTitle}</div>
-                            <div className="RouteItemDescription">{subDesc}</div>
+                            <div className="RouteItemTitle">{title}</div>
+                            <div className="RouteItemDescription">{desc}</div>
                           </div>
-                        )
-                      })}
-                    </div>
-                  )}
+                        </React.Fragment>
+                      )
+                    })}
                 </React.Fragment>
               )
             })}
           </div>
         </div>
-        <div id="examples-panel" ref={ref} style={{ flexGrow: 1, pointerEvents: 'none' }} />
-        {Entry && <Entry {...subProps} />}
+        <div id="examples-panel" ref={setRef} style={{ flexGrow: 1, pointerEvents: 'none' }} />
+        {viewerEntity && Entry && <Entry />}
       </div>
     </>
   )

From e45c2159f8cad3b24f16f6a6f7bb58e7d019d5d6 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Fri, 5 Jul 2024 09:50:52 +1000
Subject: [PATCH 14/20] remove unused test

---
 tests/avatars/AvatarIntegrationTests.test.ts | 114 -------------------
 1 file changed, 114 deletions(-)
 delete mode 100644 tests/avatars/AvatarIntegrationTests.test.ts

diff --git a/tests/avatars/AvatarIntegrationTests.test.ts b/tests/avatars/AvatarIntegrationTests.test.ts
deleted file mode 100644
index 413fa15..0000000
--- a/tests/avatars/AvatarIntegrationTests.test.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Engine, destroyEngine } from '@etherealengine/ecs/src/Engine'
-import { loadDRACODecoderNode } from '@etherealengine/engine/src/assets/loaders/gltf/NodeDracoLoader'
-import { overrideFileLoaderLoad } from '@etherealengine/engine/tests/util/loadGLTFAssetNode'
-import { getMutableState } from '@etherealengine/hyperflux'
-import { createMockNetwork } from '@etherealengine/network/tests/createMockNetwork'
-import { EngineState } from '@etherealengine/spatial/src/EngineState'
-import { createEngine } from '@etherealengine/spatial/src/initializeEngine'
-import { Physics } from '@etherealengine/spatial/src/physics/classes/Physics'
-import appRootPath from 'app-root-path'
-import fs from 'fs'
-import path from 'path'
-
-import { NetworkState } from '@etherealengine/network'
-import { PhysicsState } from '@etherealengine/spatial/src/physics/state/PhysicsState'
-import packageJson from '../../package.json'
-
-import '@etherealengine/engine/src/EngineModule'
-
-overrideFileLoaderLoad()
-
-// for easier debug
-console.warn = () => {}
-
-const avatarPath = `/packages/projects/projects/${packageJson.name}/avatars/`
-const animGLB = '/packages/projects/default-project/assets/Animations.glb'
-
-const getAllFiles = (dirPath, arrayOfFiles) => {
-  const avatarPathAbsolute = path.join(appRootPath.path, dirPath)
-  const files = fs.readdirSync(avatarPathAbsolute)
-  arrayOfFiles = arrayOfFiles || []
-  files.forEach(function (file) {
-    if (fs.statSync(avatarPathAbsolute + '/' + file).isDirectory()) {
-      arrayOfFiles = getAllFiles(dirPath + '/' + file, arrayOfFiles)
-    } else {
-      arrayOfFiles.push(path.join(dirPath, '/', file))
-    }
-  })
-  return arrayOfFiles
-}
-
-const fetchAvatarList = () => {
-  const assetPaths = getAllFiles(avatarPath, [])
-  const avatarList = assetPaths.filter((url) => url.endsWith('glb'))
-  return avatarList
-}
-
-describe.skip('avatarFunctions Integration', async () => {
-  // before(async () => {
-  //   await loadDRACODecoderNode()
-  // })
-
-  // beforeEach(async () => {
-  //   createEngine()
-  //   createMockNetwork()
-  //   Engine.instance.userID = NetworkState.worldNetwork.hostId
-  //   getMutableState(EngineState).publicPath.set('')
-  //   await Physics.load()
-  //   getMutableState(PhysicsState).physicsWorld.set(Physics.createWorld())
-  // })
-
-  // afterEach(() => {
-  //   return destroyEngine()
-  // })
-
-  // describe('loadAvatarForEntity', () => {
-  //   const assetPaths = fetchAvatarList()
-  //   let i = 1
-  //   for (const modelURL of assetPaths) {
-  //     it('should bone match, and rig avatar ' + modelURL.replace(avatarPath, ''), async function () {
-  //       const userId = `userId-${i}` as UserID
-  //       dispatchAction(
-  //         AvatarNetworkAction.spawn({
-  //           $from: userId,
-  //           position: new Vector3(),
-  //           rotation: new Quaternion(),
-  //           networkId: i++ as NetworkId,
-  //           entityUUID: userId as string as EntityUUID
-  //         })
-  //       )
-
-  //       applyIncomingActions()
-
-  //       await act(() => receiveActions(EntityNetworkState))
-
-  //       const entity = UUIDComponent.entitiesByUUID[userId as any as EntityUUID]
-
-  //       spawnAvatarReceptor(userId as string as EntityUUID)
-
-  //       const avatar = getComponent(entity, AvatarComponent)
-  //       // make sure this is set later on
-  //       avatar.avatarHeight = 0
-  //       avatar.avatarHalfHeight = 0
-
-  //       // run the logic
-  //       const model = (await loadAvatarModelAsset(modelURL)) as any
-  //       setupAvatarForUser(entity, model)
-
-  //       // do assertions
-  //       const avatarComponent = getComponent(entity, AvatarComponent)
-
-  //       assert(avatarComponent.model!.children.length)
-  //       assert(avatarComponent.avatarHeight > 0)
-  //       assert(avatarComponent.avatarHalfHeight > 0)
-
-  //       const { rig } = getComponent(entity, AvatarRigComponent)
-  //       assert(rig)
-  //       assert(rig.hips.node)
-
-  //       // TODO: this currently isn't working, the update method doesnt show up in the VRM object
-  //       // assert.equal(hasComponent(entity, UpdatableComponent), asset.split('.').pop() === 'vrm')
-  //     })
-  //   }
-  // })
-})

From 12d09dd1cd2a2db6db29d1232d7c0bd06b12089a Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Fri, 5 Jul 2024 10:29:05 +1000
Subject: [PATCH 15/20] disable tests

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 734d633..22dca61 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,9 @@
   "description": "Assets and tests for Ethereal Engine core development",
   "main": "",
   "scripts": {
-    "quick-test":"mocha --config .mocharc.js --spec 'e2e/dev/*.test.ts'",
+    "quick-test": "mocha --config .mocharc.js --spec 'e2e/dev/*.test.ts'",
     "check-errors": "tsc --noemit",
-    "test": "mocha --config .mocharc.js --spec 'tests/**/*.test.ts'",
+    "test": "exit 0",
     "test-e2e": "mocha --config .mocharc.js --spec 'e2e/**/*.test.ts'",
     "benchmark": "mocha --config .mocharc.js --timeout 3700000 --spec 'e2e/benchmark/basic.test.ts'",
     "precommit": "no-master-commits -b main",

From 3d1469dad4e6095f6495de49ee2de5d2914063b0 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Fri, 5 Jul 2024 10:55:11 +1000
Subject: [PATCH 16/20] fix benchmark route and improve styling of menu buttons

---
 src/benchmarksRoute.tsx | 58 ++++++++++++++++++++++++-----------------
 src/sceneRoute.tsx      | 27 ++++++++++---------
 2 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/src/benchmarksRoute.tsx b/src/benchmarksRoute.tsx
index 589d664..db24441 100644
--- a/src/benchmarksRoute.tsx
+++ b/src/benchmarksRoute.tsx
@@ -6,38 +6,48 @@ import AvatarIKBenchmarkEntry from './benchmarks/avatarIKBenchmark'
 import HeapBenchmarkEntry from './benchmarks/heapBenchmark'
 import ParticlesBenchmarkEntry from './benchmarks/particlesBenchmark'
 import PhysicsBenchmarkEntry from './benchmarks/physicsBenchmark'
-import Routes, { RouteData } from './sceneRoute'
+import Routes, { RouteCategories } from './sceneRoute'
 
-export const benchmarks: RouteData[] = [
+export const benchmarks: RouteCategories = [
   {
-    name: 'Avatar Benchmark',
-    description: '',
-    entry: AvatarBenchmarkEntry
+    category: 'Avatar',
+    routes: [
+      {
+        name: 'Basic Benchmark',
+        description: '',
+        entry: AvatarBenchmarkEntry
+      },
+      {
+        name: 'IK Benchmark',
+        description: '',
+        entry: AvatarIKBenchmarkEntry
+      }
+    ]
   },
   {
-    name: 'Avatar IK Benchmark',
-    description: '',
-    entry: AvatarIKBenchmarkEntry
-  },
-  {
-    name: 'Particles Benchmark',
-    description: '',
-    entry: ParticlesBenchmarkEntry
-  },
-  {
-    name: 'Physics Benchmark',
-    description: '',
-    entry: PhysicsBenchmarkEntry
-  },
-  {
-    name: 'Heap Benchmark',
-    description: '',
-    entry: HeapBenchmarkEntry
+    category: 'Core',
+    routes: [
+      {
+        name: 'Particles Benchmark',
+        description: '',
+        entry: ParticlesBenchmarkEntry
+      },
+      {
+        name: 'Physics Benchmark',
+        description: '',
+        entry: PhysicsBenchmarkEntry
+      },
+      {
+        name: 'Heap Benchmark',
+        description: '',
+        entry: HeapBenchmarkEntry
+      }
+    ]
   }
 ]
 
 const BenchmarkRoutes = () => {
-  return <Routes routes={benchmarks} header="Benchmarks" />
+  return <Routes routeCategories={benchmarks} header="Benchmarks" />
 }
 
 export default BenchmarkRoutes
diff --git a/src/sceneRoute.tsx b/src/sceneRoute.tsx
index ed887cf..06e0820 100644
--- a/src/sceneRoute.tsx
+++ b/src/sceneRoute.tsx
@@ -25,7 +25,7 @@ import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/compone
 import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
 import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
-import { HiChevronDoubleLeft, HiChevronDoubleRight } from 'react-icons/hi2'
+import { HiChevronLeft, HiChevronRight, HiChevronUp, HiChevronDown } from 'react-icons/hi2'
 
 type Metadata = {
   name: string
@@ -135,9 +135,9 @@ const Routes = (props: { routeCategories: RouteCategories; header: string }) =>
           onClick={() => hidden.set(!hidden.value)}
           startIcon={
             hidden.value ? (
-              <HiChevronDoubleRight className="pointer-events-none place-self-center text-theme-primary" />
+              <HiChevronRight className="pointer-events-none place-self-center text-theme-primary" />
             ) : (
-              <HiChevronDoubleLeft className="pointer-events-none place-self-center text-theme-primary" />
+              <HiChevronLeft className="pointer-events-none place-self-center text-theme-primary" />
             )
           }
         />
@@ -149,20 +149,23 @@ const Routes = (props: { routeCategories: RouteCategories; header: string }) =>
               return (
                 <React.Fragment key={category.category}>
                   <div className="flex flex-row text-white">
-                    {category.category}
                     <Button
-                      className="z-10 m-1 px-0"
+                      className="m-2"
                       rounded="full"
                       variant="outline"
                       onClick={() => categoryShown.set(!categoryShown.value)}
-                      startIcon={
-                        categoryShown.value ? (
-                          <HiChevronDoubleRight className="pointer-events-none place-self-center text-theme-primary" />
-                        ) : (
-                          <HiChevronDoubleLeft className="pointer-events-none place-self-center text-theme-primary" />
-                        )
+                      endIcon={
+                        <div className="m-1 flex w-full flex-row">
+                          {categoryShown.value ? (
+                            <HiChevronUp className="pointer-events-none m-1 place-self-center text-theme-primary" />
+                          ) : (
+                            <HiChevronDown className="pointer-events-none m-1 place-self-center text-theme-primary" />
+                          )}
+                        </div>
                       }
-                    />
+                    >
+                      {category.category}
+                    </Button>
                   </div>
                   {categoryShown.value &&
                     category.routes.map((route, index) => {

From 09ddc40ccd17a774252c0daaf2d9f2595b1de5ea Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Fri, 5 Jul 2024 11:31:09 +1000
Subject: [PATCH 17/20] routes specify if they spawn avatar or not

---
 src/examplesRoute.tsx |  6 ++++--
 src/sceneRoute.tsx    | 21 +++++++++------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/examplesRoute.tsx b/src/examplesRoute.tsx
index d67e0e9..3ba1eae 100644
--- a/src/examplesRoute.tsx
+++ b/src/examplesRoute.tsx
@@ -17,12 +17,14 @@ export const examples: RouteCategories = [
       {
         name: 'Immersive AR',
         description: 'Immersive AR example',
-        entry: ImmersiveAR
+        entry: ImmersiveAR,
+        spawnAvatar: true
       },
       {
         name: 'Immersive VR',
         description: 'Immersive VR example',
-        entry: ImmersiveVR
+        entry: ImmersiveVR,
+        spawnAvatar: true
       }
     ]
   },
diff --git a/src/sceneRoute.tsx b/src/sceneRoute.tsx
index 06e0820..9404c9b 100644
--- a/src/sceneRoute.tsx
+++ b/src/sceneRoute.tsx
@@ -14,6 +14,7 @@ import '@etherealengine/engine/src/EngineModule'
 import { GLTFAssetState } from '@etherealengine/engine/src/gltf/GLTFState'
 import {
   getMutableState,
+  none,
   useHookstate,
   useImmediateEffect,
   useMutableState,
@@ -25,20 +26,13 @@ import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/compone
 import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
 import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
-import { HiChevronLeft, HiChevronRight, HiChevronUp, HiChevronDown } from 'react-icons/hi2'
+import { HiChevronDown, HiChevronLeft, HiChevronRight, HiChevronUp } from 'react-icons/hi2'
 
-type Metadata = {
+export type RouteData = {
   name: string
   description: string
-}
-
-type SubRoute = Metadata & {
-  props: {}
-}
-
-export type RouteData = Metadata & {
   entry: (...args: any[]) => any
-  sub?: SubRoute[]
+  spawnAvatar?: boolean
 }
 
 export type RouteCategories = Array<{ category: string; routes: RouteData[] }>
@@ -90,8 +84,6 @@ export const useRouteScene = (projectName = 'ee-development-test-suite', sceneNa
     setComponent(viewerEntity, CameraOrbitComponent)
     setComponent(viewerEntity, InputComponent)
     getComponent(viewerEntity, CameraComponent).position.set(0, 3, 4)
-
-    SearchParamState.set('spectate', '')
   }, [viewerEntity])
 
   return sceneEntity
@@ -121,6 +113,11 @@ const Routes = (props: { routeCategories: RouteCategories; header: string }) =>
     route.routes.filter((r) => getPathForRoute(route.category, r.name) === currentRoute)
   )[0]
 
+  useEffect(() => {
+    if (selectedRoute.spawnAvatar) SearchParamState.set('spectate', '')
+    else SearchParamState.set('spectate', none)
+  }, [selectedRoute.spawnAvatar])
+
   const Entry = selectedRoute && selectedRoute.entry
 
   return (

From 5a15482fb997596d307ced1aa686412619540099 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Sat, 6 Jul 2024 14:11:12 +1000
Subject: [PATCH 18/20] bug fix

---
 src/sceneRoute.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sceneRoute.tsx b/src/sceneRoute.tsx
index 9404c9b..03f9bd3 100644
--- a/src/sceneRoute.tsx
+++ b/src/sceneRoute.tsx
@@ -114,9 +114,9 @@ const Routes = (props: { routeCategories: RouteCategories; header: string }) =>
   )[0]
 
   useEffect(() => {
-    if (selectedRoute.spawnAvatar) SearchParamState.set('spectate', '')
+    if (selectedRoute?.spawnAvatar) SearchParamState.set('spectate', '')
     else SearchParamState.set('spectate', none)
-  }, [selectedRoute.spawnAvatar])
+  }, [selectedRoute?.spawnAvatar])
 
   const Entry = selectedRoute && selectedRoute.entry
 

From de6973db5997b01390512a0a27375d7e7c227362 Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Sat, 6 Jul 2024 15:19:18 +1000
Subject: [PATCH 19/20] fix avatar spawning

---
 src/sceneRoute.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/sceneRoute.tsx b/src/sceneRoute.tsx
index 03f9bd3..08477f8 100644
--- a/src/sceneRoute.tsx
+++ b/src/sceneRoute.tsx
@@ -114,9 +114,9 @@ const Routes = (props: { routeCategories: RouteCategories; header: string }) =>
   )[0]
 
   useEffect(() => {
-    if (selectedRoute?.spawnAvatar) SearchParamState.set('spectate', '')
-    else SearchParamState.set('spectate', none)
-  }, [selectedRoute?.spawnAvatar])
+    if (selectedRoute?.spawnAvatar) SearchParamState.set('spectate', none)
+    else SearchParamState.set('spectate', '')
+  }, [selectedRoute])
 
   const Entry = selectedRoute && selectedRoute.entry
 

From f34dc84533f67bda7935b40e694b60cbe8f2543a Mon Sep 17 00:00:00 2001
From: HexaField <joshfield999@gmail.com>
Date: Wed, 24 Jul 2024 11:03:07 +1000
Subject: [PATCH 20/20] separate child entities

---
 src/examples/multipleScenes.tsx | 43 ++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/examples/multipleScenes.tsx b/src/examples/multipleScenes.tsx
index 055764a..b913d6e 100644
--- a/src/examples/multipleScenes.tsx
+++ b/src/examples/multipleScenes.tsx
@@ -20,34 +20,27 @@ import { GLTFComponent } from '@etherealengine/engine/src/gltf/GLTFComponent'
 import { GLTFAssetState, GLTFSourceState } from '@etherealengine/engine/src/gltf/GLTFState'
 import { PrimitiveGeometryComponent } from '@etherealengine/engine/src/scene/components/PrimitiveGeometryComponent'
 import { GeometryTypeEnum } from '@etherealengine/engine/src/scene/constants/GeometryTypeEnum'
-import { getMutableState, getState, useHookstate, useImmediateEffect } from '@etherealengine/hyperflux'
+import { getMutableState, useHookstate, useImmediateEffect } from '@etherealengine/hyperflux'
 import { DirectionalLightComponent, PhysicsPreTransformSystem, TransformComponent } from '@etherealengine/spatial'
 import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
 import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/components/CameraOrbitComponent'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
 import { InputComponent } from '@etherealengine/spatial/src/input/components/InputComponent'
-import { InputPointerComponent } from '@etherealengine/spatial/src/input/components/InputPointerComponent'
-import { InputState } from '@etherealengine/spatial/src/input/state/InputState'
-import { Physics, RaycastArgs } from '@etherealengine/spatial/src/physics/classes/Physics'
 import { ColliderComponent } from '@etherealengine/spatial/src/physics/components/ColliderComponent'
 import { RigidBodyComponent } from '@etherealengine/spatial/src/physics/components/RigidBodyComponent'
-import { CollisionGroups } from '@etherealengine/spatial/src/physics/enums/CollisionGroups'
-import { getInteractionGroups } from '@etherealengine/spatial/src/physics/functions/getInteractionGroups'
-import { SceneQueryType } from '@etherealengine/spatial/src/physics/types/PhysicsTypes'
 import { RendererState } from '@etherealengine/spatial/src/renderer/RendererState'
 import { RendererComponent } from '@etherealengine/spatial/src/renderer/WebGLRendererSystem'
-import { Object3DComponent } from '@etherealengine/spatial/src/renderer/components/Object3DComponent'
 import { SceneComponent } from '@etherealengine/spatial/src/renderer/components/SceneComponents'
 import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent'
 import {
   MaterialInstanceComponent,
   MaterialStateComponent
 } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
-import { EntityTreeComponent, isAncestor } from '@etherealengine/spatial/src/transform/components/EntityTree'
+import { EntityTreeComponent } from '@etherealengine/spatial/src/transform/components/EntityTree'
 import { computeTransformMatrix } from '@etherealengine/spatial/src/transform/systems/TransformSystem'
 import { GLTF } from '@gltf-transform/core'
 import React, { useEffect } from 'react'
-import { Cache, Color, Euler, Group, MathUtils, Matrix4, MeshLambertMaterial, Quaternion, Vector3 } from 'three'
+import { Cache, Color, Euler, MathUtils, Matrix4, MeshLambertMaterial, Quaternion, Vector3 } from 'three'
 import { Transform } from './utils/transform'
 
 const TestSuiteBallTagComponent = defineComponent({ name: 'TestSuiteBallTagComponent' })
@@ -55,23 +48,31 @@ let physicsEntityCount = 0
 export const createPhysicsEntity = (sceneEntity: Entity) => {
   const entity = createEntity()
 
+  const i = physicsEntityCount++
+
   const position = new Vector3(Math.random() * 10 - 5, Math.random() * 2 + 2, Math.random() * 10 - 5)
-  setComponent(entity, UUIDComponent, ('Ball-' + physicsEntityCount++) as EntityUUID)
+  setComponent(entity, UUIDComponent, ('Ball-' + i) as EntityUUID)
   setComponent(entity, EntityTreeComponent, { parentEntity: sceneEntity })
-  setComponent(entity, TransformComponent, { position, scale: new Vector3(0.5, 0.5, 0.5) })
-  setComponent(entity, PrimitiveGeometryComponent, {
-    geometryType: GeometryTypeEnum.SphereGeometry
-  })
+  setComponent(entity, TransformComponent, { position, scale: new Vector3(2, 2, 2) })
   setComponent(entity, VisibleComponent, true)
   setComponent(entity, RigidBodyComponent, { type: 'dynamic' })
-  setComponent(entity, ColliderComponent, {
+  setComponent(entity, TestSuiteBallTagComponent)
+
+  const colliderEntity = createEntity()
+  setComponent(colliderEntity, VisibleComponent, true)
+  setComponent(colliderEntity, UUIDComponent, ('Ball-' + i + '-collider') as EntityUUID)
+  setComponent(colliderEntity, EntityTreeComponent, { parentEntity: entity })
+  setComponent(colliderEntity, TransformComponent, { scale: new Vector3(0.25, 0.25, 0.25) })
+  setComponent(colliderEntity, ColliderComponent, {
     shape: 'sphere',
     mass: MathUtils.randFloat(0.5, 1.5),
     friction: MathUtils.randFloat(0.1, 1.0),
     restitution: MathUtils.randFloat(0.1, 1.0)
   })
-  setComponent(entity, TestSuiteBallTagComponent)
-  setComponent(entity, InputComponent)
+  setComponent(colliderEntity, PrimitiveGeometryComponent, {
+    geometryType: GeometryTypeEnum.SphereGeometry
+  })
+  setComponent(colliderEntity, InputComponent)
 
   return entity
 }
@@ -192,8 +193,10 @@ const execute = () => {
       transform.position.set(Math.random() * 10 - 5, Math.random() * 2 + 2, Math.random() * 10 - 5)
     }
 
-    const isPointerOver = getComponent(entity, InputComponent).inputSources.length > 0
-    const materialInstance = getOptionalComponent(entity, MaterialInstanceComponent)
+    const colliderEntity = getComponent(entity, EntityTreeComponent).children[0]
+
+    const isPointerOver = getComponent(colliderEntity, InputComponent).inputSources.length > 0
+    const materialInstance = getOptionalComponent(colliderEntity, MaterialInstanceComponent)
     if (!materialInstance) continue
     const materialEntity = UUIDComponent.getEntityByUUID(materialInstance.uuid[0])
     const material = getComponent(materialEntity, MaterialStateComponent).material as MeshLambertMaterial