fix(troika-xr): destroy WristMountedUI contents when hidden

WristMountedUI contents are now destroyed when the UI is in inactive
state, by default, unless the user specifies keepContentAlive:true.
This fixes issues with instanced objects in the content remaining
visible and contributing to render times. Also fixed issue where the
wristband/container were sometimes rendered without a valid XR gripPose.

Author: lojjic

packages/troika-xr/src/facade/wrist-mounted-ui/ContentContainer.js

@@ -17,13 +17,15 @@ export class ContentContainer extends Object3DFacade {
     this.projectionSourcePosition = null //worldspace vec3
     this.gripPose = null
     this.active = false
+    this.keepContentAlive = false
   }
 
   /**
    * Sync to the current XRFrame's gripPose - all matrix syncing is localized here
    * to avoid a full afterUpdate pass on every frame.
    */
   syncPose(gripPose) {
+    let visible = false
     if (gripPose) {
       // Get current posed camera position, relative to the parent
       let cam = this.getCameraFacade().threeObject
@@ -50,9 +52,9 @@ export class ContentContainer extends Object3DFacade {
       let pos = this.threeObject.position
       pos.lerp(targetPos, 0.05) //move by 5% of distance each frame)
       this.scale += (targetScale - this.scale) * 0.3
-      this.visible = this.scale > 0.01 //hide below a certain size
+      visible = this.scale > 0.01 //hide below a certain size
 
-      if (this.visible) {
+      if (visible) {
         // Rotate to face camera
         this.rotateY = Math.atan2(camPos.x - pos.x, camPos.z - pos.z)
 
@@ -65,16 +67,17 @@ export class ContentContainer extends Object3DFacade {
         // Sync all matrices
         this.traverse(updateMatrices)
       }
-    } else {
-      this.visible = false
     }
-  }
-
-  shouldUpdateChildren () {
-    return !!this.visible
+    if (visible !== this.visible) {
+      this.update({visible})
+    }
   }
 
   describeChildren() {
+    if (!this.visible && !this.keepContentAlive) {
+      return null
+    }
+
     let kids = this._kidsTpl || (this._kidsTpl = [
       {
         key: '$platform',

packages/troika-xr/src/facade/wrist-mounted-ui/WristMountedUI.js

@@ -1,4 +1,4 @@
-import { Group3DFacade } from 'troika-3d'
+import { Facade, Group3DFacade } from 'troika-3d'
 import {
   Matrix4,
   Quaternion,
@@ -24,18 +24,29 @@ const upVec3 = new Vector3(0, 1, 0)
 export class WristMountedUI extends Group3DFacade {
   constructor (parent) {
     super(parent)
-    this.active = false
+    // Config:
     this.activeUpAngle = Math.PI / 7
     this.preferredHand = 'left'
     this.platformRadius = 0.25
     this.platformColor = 0x333333
     this.projectionColor = 0x3399ff
+    this.keepContentAlive = false
+    this.onActiveChange = null
+
+    // Internal state:
+    this.gripPose = null
+    this.active = false
 
     this._cogPos = new Vector3()
     this.addEventListener('xrframe', this.onXRFrame.bind(this))
   }
 
   describeChildren () {
+    // Only render children if we have a valid gripPose
+    if (!this.gripPose) {
+      return null
+    }
+
     let children = this._childTpl || (this._childTpl = [
       {
         key: 'wristband',
@@ -62,6 +73,7 @@ export class WristMountedUI extends Group3DFacade {
     contentDef.platformColor = this.platformColor
     contentDef.projectionColor = this.projectionColor
     contentDef.projectionSourcePosition = this._cogPos
+    contentDef.keepContentAlive = this.keepContentAlive
     contentDef.children = this.children
 
     return children
@@ -75,9 +87,9 @@ export class WristMountedUI extends Group3DFacade {
 
   onXRFrame (time, xrFrame) {
     let gripPose = null
+    let active = false
     let inputSources = xrFrame.session.inputSources
     if (inputSources) {
-      let active = false
       let gripSpace = null
       for (let i = 0, len = inputSources.length; i < len; i++) {
         if (inputSources[i].handedness === this.preferredHand) {
@@ -101,18 +113,22 @@ export class WristMountedUI extends Group3DFacade {
           active = tempVec3.angleTo(upVec3) < this.activeUpAngle
         }
       }
-      if (active !== this.active) {
-        this.active = active
-        this.afterUpdate()
+    }
+
+    if (active !== this.active) {
+      if (this.onActiveChange) {
+        this.onActiveChange(active)
       }
+      this.update({active})
     }
 
-    if (gripPose || !this.gripPose) {
-      this.gripPose = gripPose
+    if (!!gripPose !== !!this.gripPose) {
+      this.update({gripPose})
+    }
+    else if (gripPose) {
       // Skip full afterUpdate pass, just give the gripPose to children - they both have
       // a syncPose method to handle syncing matrices without a full afterUpdate.
       this.forEachChild(child => child.syncPose(gripPose))
     }
   }
-
 }