imp: avatar rate checking amortization

Author: ashconnell

src/core/World.js

@@ -5,6 +5,7 @@ import { Settings } from './systems/Settings'
 import { Collections } from './systems/Collections'
 import { Apps } from './systems/Apps'
 import { Anchors } from './systems/Anchors'
+import { Avatars } from './systems/Avatars'
 import { Events } from './systems/Events'
 import { Chat } from './systems/Chat'
 import { Blueprints } from './systems/Blueprints'
@@ -38,6 +39,7 @@ export class World extends EventEmitter {
     this.register('collections', Collections)
     this.register('apps', Apps)
     this.register('anchors', Anchors)
+    this.register('avatars', Avatars)
     this.register('events', Events)
     this.register('scripts', Scripts)
     this.register('chat', Chat)

src/core/extras/createVRMFactory.js

@@ -13,12 +13,13 @@ const m1 = new THREE.Matrix4()
 
 const FORWARD = new THREE.Vector3(0, 0, -1)
 
-const DIST_CHECK_RATE = 2 // once every second
 const DIST_MIN_RATE = 1 / 5 // 5 times per second
 const DIST_MAX_RATE = 1 / 60 // 40 times per second
 const DIST_MIN = 5 // <= 5m = max rate
 const DIST_MAX = 60 // >= 60m = min rate
 
+const MAX_GAZE_DISTANCE = 40
+
 const material = new THREE.MeshBasicMaterial()
 
 const AimAxis = {
@@ -285,35 +286,31 @@ export function createVRMFactory(glb, setupMaterial) {
 
     let elapsed = 0
     let rate = 0
-    let rateCheckedAt = 999
     let rateCheck = true
+    let distance
+
+    const updateRate = () => {
+      const vrmPos = v1.setFromMatrixPosition(vrm.scene.matrix)
+      const camPos = v2.setFromMatrixPosition(hooks.camera.matrixWorld) // prettier-ignore
+      distance = vrmPos.distanceTo(camPos)
+      const clampedDistance = Math.max(distance - DIST_MIN, 0)
+      const normalizedDistance = Math.min(clampedDistance / (DIST_MAX - DIST_MIN), 1) // prettier-ignore
+      rate = DIST_MAX_RATE + normalizedDistance * (DIST_MIN_RATE - DIST_MAX_RATE) // prettier-ignore
+      // console.log('distance', distance)
+      // console.log('rate per second', 1 / rate)
+    }
+
     const update = delta => {
       elapsed += delta
-      let should = true
-      if (rateCheck) {
-        // periodically calculate update rate based on distance to camera
-        rateCheckedAt += delta
-        if (rateCheckedAt >= DIST_CHECK_RATE) {
-          const vrmPos = v1.setFromMatrixPosition(vrm.scene.matrix)
-          const camPos = v2.setFromMatrixPosition(hooks.camera.matrixWorld) // prettier-ignore
-          const distance = vrmPos.distanceTo(camPos)
-          const clampedDistance = Math.max(distance - DIST_MIN, 0)
-          const normalizedDistance = Math.min(clampedDistance / (DIST_MAX - DIST_MIN), 1) // prettier-ignore
-          rate = DIST_MAX_RATE + normalizedDistance * (DIST_MIN_RATE - DIST_MAX_RATE) // prettier-ignore
-          // console.log('distance', distance)
-          // console.log('rate per second', 1 / rate)
-          rateCheckedAt = 0
-        }
-        should = elapsed >= rate
-      }
+      const should = rateCheck ? elapsed >= rate : true
       if (should) {
         mixer.update(elapsed)
         skeleton.bones.forEach(bone => bone.updateMatrixWorld())
         skeleton.update = THREE.Skeleton.prototype.update
         if (!currentEmote) {
           updateLocomotion(delta)
         }
-        if (loco.gazeDir && (currentEmote ? currentEmote.gaze : true)) {
+        if (loco.gazeDir && distance < MAX_GAZE_DISTANCE && (currentEmote ? currentEmote.gaze : true)) {
           aimBone('neck', loco.gazeDir, delta, {
             minAngle: -30,
             maxAngle: 30,
@@ -619,6 +616,7 @@ export function createVRMFactory(glb, setupMaterial) {
       setEmote,
       setFirstPerson,
       update,
+      updateRate,
       getBoneTransform,
       setLocomotion,
       setVisible(visible) {

src/core/nodes/Avatar.js

@@ -44,6 +44,7 @@ export class Avatar extends Node {
         // this._disableRateCheck = null
       }
       this.ctx.world?.setHot(this.instance, true)
+      this.ctx.world?.avatars.add(this.instance)
       this.onLoad?.()
     }
   }
@@ -62,6 +63,7 @@ export class Avatar extends Node {
     this.n++
     if (this.instance) {
       this.ctx.world?.setHot(this.instance, false)
+      this.ctx.world?.avatars.remove(this.instance)
       this.instance.destroy()
       this.instance = null
     }

src/core/systems/Avatars.js

@@ -0,0 +1,36 @@
+import { System } from './System'
+
+/**
+ * Avatars System
+ *
+ * - Runs rate checks one avatar per frame (amortization)
+ *
+ */
+export class Avatars extends System {
+  constructor(world) {
+    super(world)
+    this.avatars = []
+    this.cursor = 0
+  }
+
+  add(avatar) {
+    this.avatars.push(avatar)
+  }
+
+  remove(avatar) {
+    const idx = this.avatars.indexOf(avatar)
+    if (idx === -1) return
+    this.avatars.splice(idx, 1)
+  }
+
+  update() {
+    if (!this.avatars.length) return
+    const avatar = this.avatars[this.cursor % this.avatars.length]
+    avatar.updateRate()
+    this.cursor++
+  }
+
+  destroy() {
+    this.avatars = []
+  }
+}