Fix world interpolation

src/world/World.test.ts

@@ -276,4 +276,38 @@ describe('World', () => {
     expect(world.gravity).toEqual(gravity)
     expect(world.frictionGravity).toEqual(frictionGravity)
   })
+
+  test('step: should interpolate correctly', () => {
+    // In case of interpolation, we need to ensure the world
+    // has simulated enough steps to cover the entire time that
+    // has passed, even when the timeSinceLastCalled + accumulator
+    // falls somewhere inbetween steps
+
+    const gravity = new Vec3(0, -1, 0) // Simplifies the calculation
+    const world = new World({ gravity })
+    const body = new Body({ type: Body.DYNAMIC, mass: 1 })
+    body.linearDamping = 0
+    body.angularDamping = 0
+
+    const deltaTime = 1
+    const timeSinceLastCalled = 2.7
+    world.addBody(body)
+    world.step(deltaTime, timeSinceLastCalled, 10)
+
+    // v = a * t
+    expect(body.velocity.y).toEqual(-3)
+
+    const currentY = -1 - 2 - 3
+    expect(body.position.y).toEqual(currentY)
+
+    const previousY = -1 - 2
+    expect(body.previousPosition.y).toEqual(previousY)
+
+    expect(world.stepnumber).toEqual(3)
+    expect(world.simulationTime).toEqual(3)
+
+    // interpolationTime = (world.wallClockTime - world.simulationTime) / deltaTime + 1
+    const interpolationTime = (2.7 - 3) / deltaTime + 1
+    expect(body.interpolatedPosition.y).toEqual(interpolationTime * (currentY - previousY) + previousY)
+  })
 })

src/world/World.ts

@@ -62,6 +62,11 @@ export class World extends EventTarget {
    */
   time: number
 
+  /**
+   * Time that has passed in the simulation.
+   */
+  simulationTime: number
+
   /**
    * Number of timesteps taken since start.
    */
@@ -149,12 +154,6 @@ export class World extends EventTarget {
     narrowphase: number
   }
 
-  /**
-   * Time accumulator for interpolation.
-   * @see https://gafferongames.com/game-physics/fix-your-timestep/
-   */
-  accumulator: number
-
   subsystems: any[]
 
   /**
@@ -219,6 +218,7 @@ export class World extends EventTarget {
     this.quatNormalizeSkip = options.quatNormalizeSkip !== undefined ? options.quatNormalizeSkip : 0
     this.quatNormalizeFast = options.quatNormalizeFast !== undefined ? options.quatNormalizeFast : false
     this.time = 0.0
+    this.simulationTime = 0.0
     this.stepnumber = 0
     this.default_dt = 1 / 60
     this.nextId = 0
@@ -258,7 +258,6 @@ export class World extends EventTarget {
       narrowphase: 0,
     }
 
-    this.accumulator = 0
     this.subsystems = []
     this.addBodyEvent = { type: 'addBody', body: null }
     this.removeBodyEvent = { type: 'removeBody', body: null }
@@ -368,7 +367,7 @@ export class World extends EventTarget {
     body.world = this
     body.initPosition.copy(body.position)
     body.initVelocity.copy(body.velocity)
-    body.timeLastSleepy = this.time
+    body.timeLastSleepy = this.simulationTime
     if (body instanceof Body) {
       body.initAngularVelocity.copy(body.angularVelocity)
       body.initQuaternion.copy(body.quaternion)
@@ -491,15 +490,16 @@ export class World extends EventTarget {
 
       // Increment time
       this.time += dt
+      this.simulationTime += dt
     } else {
-      this.accumulator += timeSinceLastCalled
+      this.time += timeSinceLastCalled
 
       const t0 = performance.now()
       let substeps = 0
-      while (this.accumulator >= dt && substeps < maxSubSteps) {
+      while (this.time > this.simulationTime && substeps < maxSubSteps) {
         // Do fixed steps to catch up
         this.internalStep(dt)
-        this.accumulator -= dt
+        this.simulationTime += dt
         substeps++
         if (performance.now() - t0 > dt * 1000) {
           // The framerate is not interactive anymore.
@@ -509,18 +509,23 @@ export class World extends EventTarget {
         }
       }
 
-      // Remove the excess accumulator, since we may not
-      // have had enough substeps available to catch up
-      this.accumulator = this.accumulator % dt
+      if (this.time > this.simulationTime) {
+        // We could not catch up to the wall-clock time,
+        // so in order to keep the ball rolling (:D),
+        // we need to artificially catch up.
+        // To the user's eye, this will look like the simulation
+        // is running slower than expected.
+        const numberOfSteps = Math.ceil((this.time - this.simulationTime) / dt)
+        this.simulationTime += numberOfSteps * dt
+      }
 
-      const t = this.accumulator / dt
+      const t = (this.time - this.simulationTime) / dt + 1
       for (let j = 0; j !== this.bodies.length; j++) {
         const b = this.bodies[j]
         b.previousPosition.lerp(b.position, t, b.interpolatedPosition)
         b.previousQuaternion.slerp(b.quaternion, t, b.interpolatedQuaternion)
         b.previousQuaternion.normalize()
       }
-      this.time += timeSinceLastCalled
     }
   }
 
@@ -858,7 +863,7 @@ export class World extends EventTarget {
       hasActiveBodies = false
       for (i = 0; i !== N; i++) {
         const bi = bodies[i]
-        bi.sleepTick(this.time)
+        bi.sleepTick(this.simulationTime)
 
         if (bi.sleepState !== Body.SLEEPING) {
           hasActiveBodies = true