fix: crashing app when xr layers are scaled to 0 due to nan values when inveritng a matrix scaled to 0

Author: bbohlender

packages/xr/src/layer.ts

@@ -18,7 +18,7 @@ import {
 } from 'three'
 import { getSpaceFromAncestors } from './space.js'
 import { XRState, XRStore } from './store.js'
-import { toDOMPointInit } from './utils.js'
+import { nanToDefault, toDOMPointInit } from './utils.js'
 
 export type XRLayerEntry = {
   renderOrder: number
@@ -134,8 +134,15 @@ const vectorHelper = new Vector3()
 const quaternionHelper = new Quaternion()
 const scaleHelper = new Vector3()
 
+/**
+ * @param matrix is allowed to contain nan values
+ */
 function matrixToRigidTransform(matrix: Matrix4, scaleTarget: Vector3 = scaleHelper): XRRigidTransform {
+  //assume matrix can contain nan values
   matrix.decompose(vectorHelper, quaternionHelper, scaleTarget)
+  scaleTarget.x = nanToDefault(scaleTarget.x)
+  scaleTarget.y = nanToDefault(scaleTarget.y)
+  scaleTarget.z = nanToDefault(scaleTarget.z)
   return new XRRigidTransform(toDOMPointInit(vectorHelper), toDOMPointInit(quaternionHelper))
 }
 
@@ -332,7 +339,7 @@ function applyXRLayerScale(
     const radius = scaleXZ
     const layerWidth = radius * (centralAngle ?? DefaultCentralAngle)
     target.radius = radius
-    target.aspectRatio = layerWidth / scale.y
+    target.aspectRatio = scale.y === 0 ? 1 : layerWidth / scale.y
   } else if (shape === 'quad') {
     target.width = scale.x / 2
     target.height = scale.y / 2

packages/xr/src/space.ts

@@ -22,13 +22,19 @@ export function createGetXRSpaceMatrix(
   }
 }
 
+/**
+ * @param targetOffsetMatrix might contain NaN values as a result of this operation
+ */
 export function getSpaceFromAncestors(
   object: Object3D,
   origin: Object3D | undefined,
   originReferenceSpace: XRReferenceSpace,
   targetOffsetMatrix?: Matrix4,
 ): XRSpace
 
+/**
+ * @param targetOffsetMatrix might contain NaN values as a result of this operation
+ */
 export function getSpaceFromAncestors(
   object: Object3D,
   origin?: Object3D,

packages/xr/src/utils.ts

@@ -1,11 +1,26 @@
 import { Quaternion, Vector3 } from 'three'
 
+/**
+ * @param value is allowed to contain nan values
+ */
 export function toDOMPointInit(
   value: Vector3 | Quaternion | undefined,
   defaultW: number = 1,
 ): DOMPointInit | undefined {
   if (value == null) {
     return undefined
   }
-  return { x: value.x, y: value.y, z: value.z, w: 'w' in value ? value.w : defaultW }
+  return {
+    x: nanToDefault(value.x),
+    y: nanToDefault(value.y),
+    z: nanToDefault(value.z),
+    w: 'w' in value ? nanToDefault(value.w, defaultW) : defaultW,
+  }
+}
+
+export function nanToDefault(value: number, defaultValue: number = 0): number {
+  if (isNaN(value)) {
+    return defaultValue
+  }
+  return nanToDefault(value)
 }