Merge pull request #439 from acrilique/main

XRLayer: depth sorting prototype

Author: bbohlender

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,25 @@ 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)
+      //layer sorting
+      const xrCamera = xrManager.getCamera()
+      xrCamera.getWorldPosition(cameraWorldPosition)
+      ;(layerEntries as Array<XRLayerEntry>).sort((entryA, entryB) => {
+        const renderOrderDifference = entryA.renderOrder - entryB.renderOrder
+
+        //if renderOrder is the same, sort by distance to camera
+        if (renderOrderDifference !== 0) {
+          return renderOrderDifference
+        }
+
+        entryA.object3D.getWorldPosition(tempLayerWorldPosition)
+        const distA_sq = tempLayerWorldPosition.distanceToSquared(cameraWorldPosition)
+
+        entryB.object3D.getWorldPosition(tempLayerWorldPosition)
+        const distB_sq = tempLayerWorldPosition.distanceToSquared(cameraWorldPosition)
+
+        return distB_sq - distA_sq
+      })
       let changed = false
       const layers = layerEntries.map<XRLayer>(({ layer }, i) => {
         if (layer != currentLayers[i]) {

packages/xr/src/vanilla/layer.ts

@@ -69,7 +69,7 @@ export class XRLayer extends Mesh<BufferGeometry, MeshBasicMaterial> {
           this.cleanup = () => {}
           return
         }
-        const layerEntry = (this.layerEntry = { layer, renderOrder: this.layerRenderOrder })
+        const layerEntry = (this.layerEntry = { layer, renderOrder: this.layerRenderOrder, object3D: this })
         store.addLayerEntry(this.layerEntry)
         if (options.src instanceof HTMLVideoElement || options.src instanceof WebGLRenderTarget) {
           this.cleanup = () => this.store.removeLayerEntry(layerEntry)