Merge branch 'dev' into network-peer-transform-refactor

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",

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

src/engine/benchmarks/BenchmarkNodeEditors.tsx

@@ -1,5 +1,5 @@
-import NodeEditor from '@etherealengine/editor/src/components/properties/NodeEditor'
 import { EditorComponentType } from '@etherealengine/editor/src/components/properties/Util'
+import NodeEditor from '@etherealengine/ui/src/components/editor/properties/nodeEditor'
 import React from 'react'
 
 export const ProfilingComponentNodeEditor: EditorComponentType = (props) => {

src/examples/PostProcessing.tsx

@@ -6,13 +6,13 @@ import { LocationIcons } from '@etherealengine/client-core/src/components/Locati
 import { useQuery } from '@etherealengine/ecs'
 import { getComponent, updateComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { Entity } from '@etherealengine/ecs/src/Entity'
-import { PostProcessingSettingsEditor } from '@etherealengine/editor/src/components/properties/PostProcessingSettingsEditor'
 import { EditorControlFunctions } from '@etherealengine/editor/src/functions/EditorControlFunctions'
 import { SelectionState } from '@etherealengine/editor/src/services/SelectionServices'
 import { UUIDComponent } from '@etherealengine/ecs'
 import { useSearchParams } from 'react-router-dom'
 import { Template } from './utils/template'
 import { PostProcessingComponent } from '@etherealengine/spatial/src/renderer/components/PostProcessingComponent'
+import PostProcessingSettingsEditor from '@etherealengine/ui/src/components/editor/properties/postProcessing'
 
 export default function PostProcessing() {
   const entity = useHookstate<Entity | null>(null)

src/examples/VisualScript.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { setComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { createEntity } from '@etherealengine/ecs/src/EntityFunctions'
-import { ActiveVisualScript } from '@etherealengine/editor/src/components/visualScript/VisualFlow'
+import { ActiveVisualScript } from '@etherealengine/ui/src/components/editor/panels/VisualScript/container'
 import { VisualScriptComponent } from '@etherealengine/engine'
 import { GraphJSON } from '@etherealengine/visual-script'
 import AutoSizer from 'react-virtualized-auto-sizer'

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)
     }

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/apartment.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>
+    </>
+  )
+}

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 { 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')
+  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 (
+    <>
+      <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-vr" />
+      </div>
+    </>
+  )
+}