Merge branch 'main' of https://github.com/pmndrs/xr

Author: bbohlender

docs/handles/screen-handle-components.md

@@ -52,4 +52,4 @@ Allows you to configure the pan speed and a filter function to disable panning o
 ## Map Handles  
 *alias for `MapControls`*
 
-Map handles have the same properties and functionality as the orbit handles but move the camera's transform origin only in the X and Y planes, which is perfect for building applications with a flat map.
+Map handles have the same properties and functionality as the orbit handles but move the camera's transform origin only in the X and Z plane, which is perfect for building applications with a flat map.

docs/tutorials/layers.md

@@ -1,10 +1,10 @@
 ---
 title: Layers
-description: How to use display images, videos, and custom renders at high quality on quad, cylinder, and equirectangular shapes?
+description: How to use display images, videos, and custom renders at high quality on quad, cylinder, and equirect shapes?
 nav: 15
 ---
 
-Layers allow to render videos, images, and complete scenes with higher performance and higher quality while preserving battery life and latency for quad, cylinder, and equirectangular shapes using the WebXR Layer API. Layers are perfect for use cases that display flat, high-quality content, such as videos, images, and user interfaces. The following example illustrates how to create a layer that renders a video.
+Layers allow to render videos, images, and complete scenes with higher performance and higher quality while preserving battery life and latency for quad, cylinder, and equirect shapes using the WebXR Layer API. Layers are perfect for use cases that display flat, high-quality content, such as videos, images, and user interfaces. The following example illustrates how to create a layer that renders a video.
 
 First, we create a layer at `0, 1.5, -0.5` with a scale of `0.5` that displays a video assigned to `src` and starts that video when clicked.
 

packages/handle/src/screen/map.ts

@@ -20,7 +20,7 @@ export function defaultMapHandlesScreenCameraApply(
   store: StoreApi<ScreenCameraState>,
 ) {
   if (update.pitch != null) {
-    update.pitch = clamp(update.pitch, 0, Math.PI / 2)
+    update.pitch = clamp(update.pitch, -Math.PI / 2, 0)
   }
   store.setState(update)
 }
@@ -60,6 +60,8 @@ export class MapHandles {
       this.getCamera,
       filterForOnePointerLeftClick,
       defaultMapHandlesScreenCameraApply,
+      1,
+      'xz',
     )
     this.zoom = new ZoomScreenHandleStore(store, this.getCamera, undefined, defaultMapHandlesScreenCameraApply)
   }

packages/react/xr/src/layer.tsx

@@ -67,16 +67,16 @@ export type XRLayerProperties = XRLayerOptions &
   }
 
 /**
- * Component for rendering high quality quad, cylinder, or equirectangular layers inside supported sessions. Also includes a fallback for non-supported sessions.
+ * Component for rendering high quality quad, cylinder, or equirect layers inside supported sessions. Also includes a fallback for non-supported sessions.
  *
  * @param props
  * #### `src` - Property for displaying images and videos onto the layer. For rendering dynamic content to the layer, leave the `src` empty and put the dynamic (3D) content into the children, so that the layer acts as a render target.
- * #### `shape` - Property to configure the shape of the layer ("quad", "cylinder", "equirectangular").
+ * #### `shape` - Property to configure the shape of the layer ("quad", "cylinder", "equirect").
  * #### `layout` - Property to configure the layout of the display content for stereo content ("default", "mono", "stereo-left-right", "stereo-top-bottom").
  * #### `centralAngle` - Property to configure the central angle in case the layer shape is a "cylinder".
- * #### `centralHorizontalAngle` - Property to configure the central horizontal angle in case the layer shape is "equirectangular".
- * #### `upperVerticalAngle` - Property to configure the upper vertical angle in case the layer shape is "equirectangular".
- * #### `lowerVerticalAngle` - Property to configure the lower verical angle in case the layer shape is "equirectangular".
+ * #### `centralHorizontalAngle` - Property to configure the central horizontal angle in case the layer shape is "equirect".
+ * #### `upperVerticalAngle` - Property to configure the upper vertical angle in case the layer shape is "equirect".
+ * #### `lowerVerticalAngle` - Property to configure the lower vertical angle in case the layer shape is "equirect".
  * #### `chromaticAberrationCorrection` - Property to configure whether chromatic abberration should be corrected by the layer.
  * #### `quality` - Property to configure for what type of content the layer should be optimized ("default", "text-optimized", "graphics-optimized").
  */
@@ -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)