Add THREE.js stats and fix rendering jitter

I've been getting frustrated by the jittery, difficult performance
that RTT has shown recently. I already did some profiling in the
`profile-performance` branch to start tracking it down, and that led
to a major pathfinding improvement. This is all part of #13.

To help track things down I added the THREE.js Stats visualiser [1].
To my complete surprise, I was not using `requestAnimationFrame` to
schedule updates. Instead I was using `setTimeout` and aiming for
30fps.

I think I found strange `requestAnimationFrame` behaviour when frames
regularly took a long time to compute, but that is no longer the case.
Switching back to `requestAnimationFrame` shows an enormous
improvement in game experience! :)

[1] https://www.npmjs.com/package/stats-js

Author: 46bit

package-lock.json

@@ -34,6 +34,7 @@
     "nanoid": "^3.1.12",
     "navmesh": "^2.0.3",
     "source-map-support": "^0.5.19",
+    "stats-js": "1.0.1",
     "three": "0.120.1",
     "three.meshline": "v1.2.0",
     "tslib": "^2.0.1",

package.json

@@ -1,3 +1,6 @@
+// These definitions are for RTT. If considering re-using them, be aware
+// they probably miss important information that RTT doesn't need to know.
+
 type Point = [number, number];
 type Edge = [number, number];
 
@@ -20,3 +23,13 @@ declare module "navmesh" {
   }
   export = NavMesh;
 }
+
+declare module "stats-js" {
+  class Stats {
+    dom: HTMLElement;
+    showPanel(panelNumber: number): void;
+    begin(): void;
+    end(): void;
+  }
+  export = Stats;
+}

src/dependency_types.d.ts

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import Stats from 'stats-js';
 import * as rtt_engine from './rtt_engine';
 import * as rtt_renderer from './rtt_renderer';
 import { IAI, ExistingAI, AttackNearestAI, ExpansionAI } from './ai';
@@ -168,19 +169,20 @@ function main() {
   const rttSidebar = rttDiv.getElementsByClassName("game--sidebar")[0]! as HTMLElement;
   let gameRenderer = new rtt_renderer.GameRenderer(map, game, rttViewport, rttSidebar);
 
-  setInterval(() => {
-    if (window.paused) {
-      return;
-    }
+  const stats = new Stats();
+  stats.showPanel(0);
+  document.body.appendChild(stats.dom);
 
-    rtt_renderer.time("update", () => {
+  const animate = () => {
+    stats.begin();
+    if (!window.paused) {
       game.update(context);
-    });
-
-    rtt_renderer.time("update rendering", () => {
       gameRenderer.update();
-    });
-  }, 1000 / 30);
+    }
+    stats.end();
+    requestAnimationFrame(animate);
+  };
+  requestAnimationFrame(animate);
 }
 
 main();

src/main.ts

@@ -98,7 +98,7 @@ export class UI {
   }
 
   update() {
-    const timeElapsedInSeconds = this.game.updateCounter / 30;
+    const timeElapsedInSeconds = this.game.updateCounter / 60;
     let minutesElapsed = Math.floor(timeElapsedInSeconds / 60);
     let secondsElapsed = Math.floor(timeElapsedInSeconds % 60);
     if (secondsElapsed == 60) {