XRLayer: depth sorting prototype

- XRLayerEntry now requires an Object3D prop
- depth sorting is calculated in onBeforeRender

Author: acrilique

packages/react/xr/src/layer.tsx

@@ -239,7 +239,11 @@ export const XRLayerImplementation = forwardRef<
       if (layer == null) {
         return
       }
-      const layerEntry = (layerEntryRef.current = { layer, renderOrder: renderOrderRef.current })
+      const layerEntry = (layerEntryRef.current = {
+        layer,
+        renderOrder: renderOrderRef.current,
+        object3D: internalRef.current!,
+      })
       store.addLayerEntry(layerEntry)
       if (resolvedSrc instanceof HTMLVideoElement || resolvedSrc instanceof WebGLRenderTarget) {
         return () => {

packages/xr/src/layer.ts

@@ -20,7 +20,11 @@ import { getSpaceFromAncestors } from './space.js'
 import { XRState, XRStore } from './store.js'
 import { toDOMPointInit } from './utils.js'
 
-export type XRLayerEntry = { renderOrder: number; readonly layer: XRCylinderLayer | XRQuadLayer | XREquirectLayer }
+export type XRLayerEntry = {
+  renderOrder: number
+  readonly layer: XRCylinderLayer | XRQuadLayer | XREquirectLayer
+  readonly object3D: Object3D
+}
 
 export type XRLayerOptions = Pick<
   Partial<XRCylinderLayerInit & XRQuadLayerInit & XREquirectLayerInit>,

packages/xr/src/store.ts

@@ -1,5 +1,5 @@
 import { XRDevice } from 'iwer'
-import { Camera, Object3D, WebXRManager } from 'three'
+import { Camera, Object3D, WebXRManager, Vector3 } from 'three'
 import { StoreApi, createStore } from 'zustand/vanilla'
 import { XRControllerLayoutLoaderOptions, updateXRControllerState } from './controller/index.js'
 import { XRHandLoaderOptions } from './hand/index.js'
@@ -427,6 +427,10 @@ declare global {
   }
 }
 
+//helpers for layer sorting
+const cameraWorldPosition = new Vector3()
+const tempLayerWorldPosition = new Vector3()
+
 export function createXRStore<T extends XRElementImplementations>(options?: XRStoreOptions<T>): XRStore<T> {
   //dom overlay root element creation
   const domOverlayRoot =
@@ -678,8 +682,24 @@ export function createXRStore<T extends XRElementImplementations>(options?: XRSt
       if (currentLayers == null) {
         return
       }
-      //TODO: sort by distance to camera
-      ;(layerEntries as Array<(typeof layerEntries)[number]>).sort((l1, l2) => l1.renderOrder - l2.renderOrder)
+      //sort by distance to camera
+      const xrCamera = xrManager.getCamera()
+      xrCamera.getWorldPosition(cameraWorldPosition)
+      ;(layerEntries as Array<XRLayerEntry>).sort((entryA, entryB) => {
+        entryA.object3D.getWorldPosition(tempLayerWorldPosition)
+        const distA_sq = tempLayerWorldPosition.distanceToSquared(cameraWorldPosition)
+
+        entryB.object3D.getWorldPosition(tempLayerWorldPosition)
+        const distB_sq = tempLayerWorldPosition.distanceToSquared(cameraWorldPosition)
+
+        const depthDifference = distB_sq - distA_sq
+
+        //if the distance is the same, fall back to renderOrder
+        if (Math.abs(depthDifference) < 0.00001) {
+          return entryA.renderOrder - entryB.renderOrder
+        }
+        return depthDifference
+      })
       let changed = false
       const layers = layerEntries.map<XRLayer>(({ layer }, i) => {
         if (layer != currentLayers[i]) {