improves RunTimeManager class to prevent bugs related to smoothDeltaT…

…ime updates after in background (#37)
mml-io · Jul 19, 2023 · 44d1d23 · 44d1d23
1 parent 4517462
commit 44d1d23
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 26 deletions.
diff --git a/packages/core/src/character/CharacterManager.ts b/packages/core/src/character/CharacterManager.ts
@@ -157,7 +157,7 @@ export class CharacterManager {
           characterController.update(
             update,
             this.runTimeManager.time,
-            this.runTimeManager.smoothDeltaTime,
+            this.runTimeManager.deltaTime,
           );
         }
       }

diff --git a/packages/core/src/character/LocalController.ts b/packages/core/src/character/LocalController.ts
@@ -85,17 +85,17 @@ export class LocalController {
 
     if (movementKeysPressed) {
       const targetAnimation = this.getTargetAnimation();
-      this.model.updateAnimation(targetAnimation, this.runTimeManager.smoothDeltaTime);
+      this.model.updateAnimation(targetAnimation, this.runTimeManager.deltaTime);
     } else {
-      this.model.updateAnimation(AnimationState.idle, this.runTimeManager.smoothDeltaTime);
+      this.model.updateAnimation(AnimationState.idle, this.runTimeManager.deltaTime);
     }
 
     if (Object.values(this.inputDirections).some((v) => v)) {
       this.updateRotation();
     }
 
     for (let i = 0; i < this.collisionDetectionSteps; i++) {
-      this.updatePosition(this.runTimeManager.smoothDeltaTime / this.collisionDetectionSteps, i);
+      this.updatePosition(this.runTimeManager.deltaTime / this.collisionDetectionSteps, i);
     }
 
     if (this.model.mesh.position.y < 0) {

diff --git a/packages/core/src/runtime/RunTimeManager.ts b/packages/core/src/runtime/RunTimeManager.ts
@@ -1,37 +1,49 @@
 import { Clock } from "three";
 
+import { ease } from "../helpers/math-helpers";
+
 export class RunTimeManager {
-  private clock: Clock;
-  private bufferSize: number = 30;
-  private deltaTimeBuffer: number[] = [];
+  private clock: Clock = new Clock();
+  private roundMagnitude: number = 200000;
+  private maxAverageFrames: number = 300;
+  private deltaTimes: number[] = [];
+  private targetAverageDeltaTime: number = 0;
+  private lerpedAverageMagDelta: number = 0;
   private fpsUpdateTime: number = 0;
   private framesSinceLastFPSUpdate: number = 0;
 
-  public time: number;
-  public deltaTime: number;
-  public smoothDeltaTime: number;
+  public time: number = 0;
+  public deltaTime: number = 0;
+  public rawDeltaTime: number = 0;
   public frame: number = 0;
   public fps: number = 0;
 
-  constructor() {
-    this.clock = new Clock();
-    this.time = 0;
-    this.deltaTime = 0;
-    this.smoothDeltaTime = 0;
-  }
-
   update() {
-    this.deltaTime = this.clock.getDelta();
-    this.time += this.deltaTime;
-    this.deltaTimeBuffer.push(this.deltaTime);
-    if (this.deltaTimeBuffer.length > this.bufferSize) {
-      this.deltaTimeBuffer.shift();
-    }
-    this.smoothDeltaTime =
-      this.deltaTimeBuffer.reduce((a, b) => a + b) / this.deltaTimeBuffer.length;
+    this.rawDeltaTime = this.clock.getDelta();
     this.frame++;
+    this.time += this.rawDeltaTime;
+    this.deltaTimes.push(this.rawDeltaTime);
+
+    if (this.deltaTimes.length > this.maxAverageFrames) {
+      this.deltaTimes.shift();
+    }
+
+    this.targetAverageDeltaTime =
+      this.deltaTimes.reduce((prev, curr) => prev + curr, 0) / this.deltaTimes.length;
+
+    this.lerpedAverageMagDelta += ease(
+      this.targetAverageDeltaTime * this.roundMagnitude,
+      this.lerpedAverageMagDelta,
+      0.12,
+    );
+
+    const revertMagnitude = this.lerpedAverageMagDelta / this.roundMagnitude;
+    const smoothDT = Math.round(revertMagnitude * this.roundMagnitude) / this.roundMagnitude;
+
+    this.deltaTime = smoothDT > this.rawDeltaTime * 1.75 ? this.rawDeltaTime : smoothDT;
+
     this.framesSinceLastFPSUpdate++;
-    if (this.framesSinceLastFPSUpdate >= this.bufferSize) {
+    if (this.framesSinceLastFPSUpdate >= this.maxAverageFrames) {
       this.fps =
         Math.round((this.framesSinceLastFPSUpdate / (this.time - this.fpsUpdateTime)) * 100) / 100;
       this.fpsUpdateTime = this.time;