Updated perf

spikes/card-harness/src/packOpening.ts

@@ -112,6 +112,8 @@ export class PackOpening {
   private readonly touch = new THREE.Vector3()
   private touchTarget = 0
   private lastTick: number | undefined
+  private wrapperDirty = false
+  private wrapperStripExit = 4.8
   private readonly pointers = new Map<number, THREE.Vector2>()
   private tap: { id: number; x: number; y: number; at: number } | undefined
   private pinchDistance: number | undefined
@@ -234,7 +236,7 @@ export class PackOpening {
     this.updateCamera()
     this.wrapper.root.visible = true
     setPose(this.wrapper.root, pose(0, 0, 0))
-    this.wrapper.deform(0, 0, 0, this.touch)
+    this.invalidateWrapper()
     this.cards.forEach((card, index) => {
       card.object.visible = true
       card.front.visible = false
@@ -244,17 +246,15 @@ export class PackOpening {
     this.setState('sealed')
   }
 
-  private shapeWrapper() {
-    const stripExit = (this.camera.position.z + 4)
+  private invalidateWrapper() {
+    this.wrapperDirty = true
+    this.wrapperStripExit = (this.camera.position.z + 4)
       * Math.tan(THREE.MathUtils.degToRad(this.camera.fov / 2)) * this.camera.aspect + 2
-    this.wrapper.deform(this.tearProgress,
-      THREE.MathUtils.smoothstep(this.openingProgress, 0.38, 0.52),
-      THREE.MathUtils.smoothstep(this.openingProgress, 0.5, 0.62), this.touch, stripExit)
   }
 
   private setOpeningProgress(value: number) {
     this.openingProgress = value
-    this.shapeWrapper()
+    this.invalidateWrapper()
     const smooth = THREE.MathUtils.smoothstep
     const settling = smooth(value, 0.87, 1)
     const framing = smooth(value, 0.52, 0.76) * (1 - settling)
@@ -397,13 +397,23 @@ export class PackOpening {
   }
 
   tick(now: number) {
+    this.updateMotion(now)
+    if (this.active && this.wrapperDirty && this.wrapper.root.visible) {
+      this.wrapper.deform(this.tearProgress,
+        THREE.MathUtils.smoothstep(this.openingProgress, 0.38, 0.52),
+        THREE.MathUtils.smoothstep(this.openingProgress, 0.5, 0.62), this.touch, this.wrapperStripExit)
+      this.wrapperDirty = false
+    }
+  }
+
+  private updateMotion(now: number) {
     const delta = Math.min(0.05, Math.max(0, (now - (this.lastTick ?? now)) / 1000))
     this.lastTick = now
     if (!this.active) return
     if (Math.abs(this.touch.z - this.touchTarget) > 0.001) {
       this.touch.z = this.reducedMotion.matches ? this.touchTarget
         : THREE.MathUtils.lerp(this.touch.z, this.touchTarget, 1 - Math.exp(-delta * 18))
-      this.shapeWrapper()
+      this.invalidateWrapper()
     }
     const motion = this.motion
     if (!motion || this.paused) return
@@ -423,7 +433,7 @@ export class PackOpening {
 
   private pause(now: number) {
     const interrupted = this.motion !== undefined
-    this.tick(now)
+    this.updateMotion(now)
     if (this.motion && !this.paused) {
       this.motion.elapsed += now - this.motion.startedAt
       this.paused = true
@@ -493,7 +503,7 @@ export class PackOpening {
       if (local) {
         this.touch.x = THREE.MathUtils.clamp(local.x, -1.68, 1.68)
         this.touch.y = THREE.MathUtils.clamp(local.y, -2.24, 1.7)
-        this.shapeWrapper()
+        this.invalidateWrapper()
       }
     }
   }