Persistent Anchors (#7207)

Author: HexaField

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

@@ -145,10 +145,10 @@
       "lbl-unload": "Unload",
       "lbl-reload": "Reload"
     },
-    "vps-wayspot": {
-      "name": "VPS Wayspot",
-      "description": "Assign a VPS Wayspot",
-      "lbl-name": "Wayspot Name"
+    "persistent-anchor": {
+      "name": "Persistent Anchor",
+      "description": "Anchors this entity to a real life reference",
+      "lbl-name": "Anchor Name"
     },
     "media": {
       "name": "Media",

packages/editor/src/components/properties/PersistentAnchorNodeEditor.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useComponent } from '@xrengine/engine/src/ecs/functions/ComponentFunctions'
+import { PersistentAnchorComponent } from '@xrengine/engine/src/xr/XRAnchorComponents'
+
+import InputGroup from '../inputs/InputGroup'
+import StringInput from '../inputs/StringInput'
+import NodeEditor from './NodeEditor'
+import { EditorComponentType, updateProperty } from './Util'
+
+export const PersistentAnchorNodeEditor: EditorComponentType = (props) => {
+  const { t } = useTranslation()
+
+  const anchor = useComponent(props.node.entity, PersistentAnchorComponent)
+
+  return (
+    <NodeEditor
+      {...props}
+      name={t('editor:properties.persistent-anchor.name')}
+      description={t('editor:properties.persistent-anchor.description')}
+    >
+      <InputGroup name="Volume" label={t('editor:properties.persistent-anchor.lbl-name')}>
+        <StringInput value={anchor.name.value} onChange={updateProperty(PersistentAnchorComponent, 'name')} />
+      </InputGroup>
+    </NodeEditor>
+  )
+}
+
+export default PersistentAnchorNodeEditor

packages/editor/src/components/properties/VPSWayspotNodeEditor.tsx

@@ -36,7 +36,7 @@ import { WaterComponent } from '@xrengine/engine/src/scene/components/WaterCompo
 import { LightPrefabs } from '@xrengine/engine/src/scene/systems/LightSystem'
 import { ScenePrefabs } from '@xrengine/engine/src/scene/systems/SceneObjectUpdateSystem'
 import { TransformComponent } from '@xrengine/engine/src/transform/components/TransformComponent'
-import { VPSWayspotComponent } from '@xrengine/engine/src/xr/VPSComponents'
+import { PersistentAnchorComponent } from '@xrengine/engine/src/xr/XRAnchorComponents'
 
 import ChairIcon from '@mui/icons-material/Chair'
 
@@ -59,6 +59,7 @@ import ModelNodeEditor from '../components/properties/ModelNodeEditor'
 import MountPointNodeEditor from '../components/properties/MountPointNodeEditor'
 import OceanNodeEditor from '../components/properties/OceanNodeEditor'
 import ParticleEmitterNodeEditor from '../components/properties/ParticleEmitterNodeEditor'
+import PersistentAnchorNodeEditor from '../components/properties/PersistentAnchorNodeEditor'
 import PointLightNodeEditor from '../components/properties/PointLightNodeEditor'
 import PortalNodeEditor from '../components/properties/PortalNodeEditor'
 import PositionalAudioNodeEditor from '../components/properties/PositionalAudioNodeEditor'
@@ -73,7 +74,6 @@ import TransformPropertyGroup from '../components/properties/TransformPropertyGr
 import { EditorComponentType } from '../components/properties/Util'
 import VideoNodeEditor from '../components/properties/VideoNodeEditor'
 import VolumetricNodeEditor from '../components/properties/VolumetricNodeEditor'
-import VPSWayspotNodeEditor from '../components/properties/VPSWayspotNodeEditor'
 import WaterNodeEditor from '../components/properties/WaterNodeEditor'
 
 export const EntityNodeEditor = new Map<Component, EditorComponentType>()
@@ -110,7 +110,7 @@ EntityNodeEditor.set(SplineComponent, SplineNodeEditor)
 EntityNodeEditor.set(EnvmapComponent, EnvMapEditor)
 EntityNodeEditor.set(EnvMapBakeComponent, EnvMapBakeNodeEditor)
 EntityNodeEditor.set(InstancingComponent, InstancingNodeEditor)
-EntityNodeEditor.set(VPSWayspotComponent, VPSWayspotNodeEditor)
+EntityNodeEditor.set(PersistentAnchorComponent, PersistentAnchorNodeEditor)
 
 export const prefabIcons = {
   [LightPrefabs.ambientLight]: AmbientLightNodeEditor.iconComponent,

packages/editor/src/functions/PrefabEditors.tsx

@@ -21,7 +21,7 @@ import {
 import { EngineRenderer } from '../../renderer/WebGLRendererSystem'
 import { SkyboxComponent } from '../../scene/components/SkyboxComponent'
 import { updateSkybox } from '../../scene/functions/loaders/SkyboxFunctions'
-import { VPSWayspotComponent } from '../VPSComponents'
+import { PersistentAnchorComponent } from '../XRAnchorComponents'
 import { endXRSession, requestXRSession } from '../XRSessionFunctions'
 import { XRAction, XRState } from '../XRState'
 import { XR8Pipeline } from './XR8Pipeline'
@@ -30,7 +30,7 @@ import { XR8Type } from './XR8Types'
 type XR8Assets = {
   xr8Script: HTMLScriptElement
   xrExtrasScript: HTMLScriptElement
-  xrCoachingOverlayScript: HTMLScriptElement
+  // xrCoachingOverlayScript: HTMLScriptElement
 }
 
 function loadScript(url): Promise<HTMLScriptElement> {
@@ -48,10 +48,10 @@ function loadScript(url): Promise<HTMLScriptElement> {
  * @returns
  */
 const initialize8thwall = async (): Promise<XR8Assets> => {
-  const [xr8Script, xrExtrasScript, xrCoachingOverlayScript] = await Promise.all([
+  const [xr8Script, xrExtrasScript /*, xrCoachingOverlayScript*/] = await Promise.all([
     loadScript(`https://apps.8thwall.com/xrweb?appKey=${config.client.key8thWall}`),
-    loadScript(`https://cdn.8thwall.com/web/xrextras/xrextras.js`),
-    loadScript(`https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js`)
+    loadScript(`https://cdn.8thwall.com/web/xrextras/xrextras.js`)
+    // loadScript(`https://cdn.8thwall.com/web/coaching-overlay/coaching-overlay.js`)
   ])
 
   /** the global XR8 object will not exist immediately, so wait for it */
@@ -71,18 +71,18 @@ const initialize8thwall = async (): Promise<XR8Assets> => {
 
   XR8 = globalThis.XR8
   XRExtras = globalThis.XRExtras
-  VpsCoachingOverlay = globalThis.VpsCoachingOverlay
+  // VpsCoachingOverlay = globalThis.VpsCoachingOverlay
 
   return {
     xr8Script,
-    xrExtrasScript,
-    xrCoachingOverlayScript
+    xrExtrasScript
+    // xrCoachingOverlayScript
   }
 }
 
 export let XR8: XR8Type
 export let XRExtras
-export let VpsCoachingOverlay
+// export let VpsCoachingOverlay
 
 const initialize8thwallDevice = async (existingCanvas: HTMLCanvasElement | null, world: World) => {
   if (existingCanvas) {
@@ -161,7 +161,7 @@ const initialize8thwallDevice = async (existingCanvas: HTMLCanvasElement | null,
 
     // if (enableVps) {
     //   VpsCoachingOverlay.configure({
-    //     // wayspotName: vpsWayspotName // todo - support multiple wayspots, for now just use the nearest one
+    //     // persistentanchorName: vpsPersistentAnchorName // todo - support multiple persistentanchors, for now just use the nearest one
     //   })
     // }
 
@@ -210,6 +210,10 @@ class XRHitTestResultProxy {
   createAnchor = undefined
 }
 
+class XRReferenceSpace {}
+
+class XRHitTestSource {}
+
 class XRSessionProxy extends EventDispatcher {
   readonly inputSources: XRInputSource[]
 
@@ -218,12 +222,12 @@ class XRSessionProxy extends EventDispatcher {
     this.inputSources = inputSources
   }
   async requestReferenceSpace(type: 'local' | 'viewer') {
-    const space = {}
-    return space as XRReferenceSpace
+    const space = new XRReferenceSpace()
+    return space
   }
 
   async requestHitTestSource(args: { space: XRReferenceSpace }) {
-    const source = {}
+    const source = new XRHitTestSource()
     return source as XRHitTestSource
   }
 }
@@ -269,7 +273,7 @@ class XRFrameProxy {
 }
 
 const skyboxQuery = defineQuery([SkyboxComponent])
-const vpsQuery = defineQuery([VPSWayspotComponent])
+const vpsQuery = defineQuery([PersistentAnchorComponent])
 
 export default async function XR8System(world: World) {
   let _8thwallScripts = null as XR8Assets | null
@@ -415,16 +419,16 @@ export default async function XR8System(world: World) {
    *     session, changing the overrides, and entering the session again
    */
   const vpsReactor = startReactor(function XR8VPSReactor() {
-    const hasWayspot = useQuery(vpsQuery).length
+    const hasPersistentAnchor = useQuery(vpsQuery).length
 
     useEffect(() => {
       /** data oriented approach to overriding functions, check if it's already changed, and abort if as such */
-      if (hasWayspot || using8thWall) {
+      if (hasPersistentAnchor || using8thWall) {
         overrideXRSessionFunctions()
       } else {
         revertXRSessionFunctions()
       }
-    }, [hasWayspot])
+    }, [hasPersistentAnchor])
 
     return null
   })
@@ -462,7 +466,7 @@ export default async function XR8System(world: World) {
     if (_8thwallScripts) {
       _8thwallScripts.xr8Script.remove()
       _8thwallScripts.xrExtrasScript.remove()
-      _8thwallScripts.xrCoachingOverlayScript.remove()
+      // _8thwallScripts.xrCoachingOverlayScript.remove()
     }
     if (cameraCanvas) cameraCanvas.remove()
     revertXRSessionFunctions()

packages/engine/src/xr/8thwall/XR8.ts

@@ -3,7 +3,7 @@ import { Quaternion, Vector3 } from 'three'
 import { dispatchAction } from '@xrengine/hyperflux'
 
 import { World } from '../../ecs/classes/World'
-import { VPSActions } from '../VPSComponents'
+import { PersistentAnchorActions } from '../XRAnchorComponents'
 import { XR8 } from './XR8'
 import {
   CameraPipelineModule,
@@ -44,17 +44,21 @@ export const XR8Pipeline = (world: World, cameraCanvas: HTMLCanvasElement): Came
 
   const onWayspotFound = (event: WayspotFoundEvent) => {
     const { name, position, rotation } = event.detail
-    dispatchAction(VPSActions.wayspotFound({ name, position: position as Vector3, rotation: rotation as Quaternion }))
+    dispatchAction(
+      PersistentAnchorActions.anchorFound({ name, position: position as Vector3, rotation: rotation as Quaternion })
+    )
   }
 
   const onWayspotUpdated = (event: WayspotUpdatedEvent) => {
     const { name, position, rotation } = event.detail
-    dispatchAction(VPSActions.wayspotUpdated({ name, position: position as Vector3, rotation: rotation as Quaternion }))
+    dispatchAction(
+      PersistentAnchorActions.anchorUpdated({ name, position: position as Vector3, rotation: rotation as Quaternion })
+    )
   }
 
   const onWayspotLost = (event: WayspotLostEvent) => {
     const { name } = event.detail
-    dispatchAction(VPSActions.wayspotLost({ name }))
+    dispatchAction(PersistentAnchorActions.anchorLost({ name }))
   }
 
   return {