fix #406: listen to originReferenceSpace

Author: bbohlender

packages/react/xr/src/layer.tsx

@@ -36,7 +36,7 @@ import {
   useState,
 } from 'react'
 import { useXRSessionFeatureEnabled } from './hooks.js'
-import { useXRStore } from './xr.js'
+import { useXR, useXRStore } from './xr.js'
 import {
   BufferGeometry,
   Mesh,
@@ -198,15 +198,18 @@ export const XRLayerImplementation = forwardRef<
     const renderOrderRef = useRef(renderOrder)
     renderOrderRef.current = renderOrder
 
+    const originReferenceSpace = useXR((s) => s.originReferenceSpace)
+
     //create layer
     useEffect(() => {
-      if (internalRef.current == null) {
+      if (internalRef.current == null || originReferenceSpace == null) {
         return
       }
       const resolvedSrc = src ?? (renderTargetRef.current = createXRLayerRenderTarget(pixelWidth, pixelHeight, dpr))
       const layer = createXRLayer(
         resolvedSrc,
         store.getState(),
+        originReferenceSpace,
         renderer.xr,
         internalRef.current,
         {
@@ -237,6 +240,7 @@ export const XRLayerImplementation = forwardRef<
         layer.destroy()
       }
     }, [
+      originReferenceSpace,
       colorFormat,
       depthFormat,
       invertStereo,

packages/xr/src/layer.ts

@@ -56,27 +56,26 @@ const DefaultUpperVerticalAngle = (30 / 180) * Math.PI
 export function createXRLayer(
   src: XRLayerSrc,
   state: XRState<any>,
+  originReferenceSpace: XRReferenceSpace,
   xrManager: WebXRManager,
   relativeTo: Object3D,
   options: XRLayerOptions,
   properties: XRLayerProperties,
 ) {
   return src instanceof HTMLVideoElement
-    ? createXRVideoLayer(src, state, relativeTo, options, properties)
-    : createXRNormalLayer(src, state, xrManager, relativeTo, options, properties)
+    ? createXRVideoLayer(src, state, originReferenceSpace, relativeTo, options, properties)
+    : createXRNormalLayer(src, state.origin, originReferenceSpace, xrManager, relativeTo, options, properties)
 }
 
 function createXRVideoLayer(
   src: HTMLVideoElement,
   state: XRState<any>,
+  originReferenceSpace: XRReferenceSpace,
   relativeTo: Object3D,
   { invertStereo, layout, shape = 'quad' }: XRLayerOptions,
   properties: XRLayerProperties = {},
 ) {
-  const space = getSpaceFromAncestors(relativeTo, state.origin, state.originReferenceSpace, matrixHelper)
-  if (space == null) {
-    return undefined
-  }
+  const space = getSpaceFromAncestors(relativeTo, state.origin, originReferenceSpace, matrixHelper)
   const transform = matrixToRigidTransform(matrixHelper, scaleHelper)
   const init: XRMediaCylinderLayerInit &
     XRMediaEquirectLayerInit &
@@ -90,24 +89,22 @@ function createXRVideoLayer(
   const fnName = `create${capitalize(shape)}Layer` as const
   const layer = state.mediaBinding?.[fnName](src, init)
   if (layer == null) {
-    return
+    return undefined
   }
   updateXRLayerProperties(layer, properties)
   return layer
 }
 
 function createXRNormalLayer(
   src: Exclude<TexImageSource, VideoFrame | HTMLVideoElement> | WebGLRenderTarget,
-  state: XRState<any>,
+  origin: Object3D | undefined,
+  originReferenceSpace: XRReferenceSpace,
   xrManager: WebXRManager,
   relativeTo: Object3D,
   { shape = 'quad', ...options }: XRLayerOptions,
   properties: XRLayerProperties = {},
 ) {
-  const space = getSpaceFromAncestors(relativeTo, state.origin, state.originReferenceSpace, matrixHelper)
-  if (space == null) {
-    return undefined
-  }
+  const space = getSpaceFromAncestors(relativeTo, origin, originReferenceSpace, matrixHelper)
   const transform = matrixToRigidTransform(matrixHelper, scaleHelper)
   const init: XRCylinderLayerInit & XREquirectLayerInit & XRQuadLayerInit & { transform: XRRigidTransform } = {
     ...options,
@@ -122,7 +119,7 @@ function createXRNormalLayer(
   const fnName = `create${capitalize(shape)}Layer` as const
   const layer = xrManager.getBinding()?.[fnName](init)
   if (layer == null) {
-    return
+    return undefined
   }
   updateXRLayerProperties(layer, properties)
   return layer

packages/xr/src/vanilla/layer.ts

@@ -43,7 +43,10 @@ export class XRLayer extends Mesh<BufferGeometry, MeshBasicMaterial> {
       if (aborted) {
         return
       }
-      const update = ({ session }: XRState<any>, prevState?: XRState<any>) => {
+      const update = ({ session, originReferenceSpace }: XRState<any>, prevState?: XRState<any>) => {
+        if (originReferenceSpace == null) {
+          return
+        }
         if (prevState != null && session === prevState.session) {
           return
         }
@@ -62,7 +65,15 @@ export class XRLayer extends Mesh<BufferGeometry, MeshBasicMaterial> {
         }
 
         this.material.map = null
-        const layer = createXRLayer(options.src, store.getState(), renderer.xr, this, options, properties)
+        const layer = createXRLayer(
+          options.src,
+          store.getState(),
+          originReferenceSpace,
+          renderer.xr,
+          this,
+          options,
+          properties,
+        )
         if (layer == null) {
           this.cleanup = () => {}
           return