From 1906b0ea1927b65fc4fa37e38ab27de51197514f Mon Sep 17 00:00:00 2001
From: Anson Miu <me@ansonmiu.dev>
Date: Fri, 20 Nov 2020 15:46:21 +0000
Subject: [PATCH] Add FPS indicator to debug mode

---
 package.json        |  2 ++
 src/engine/Sim3D.ts | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/package.json b/package.json
index abb19b3..b531b41 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
   "homepage": "https://github.com/FRUK-Simulator/SimulatorCore#readme",
   "dependencies": {
     "planck-js": "^0.3.18",
+    "stats.js": "^0.17.0",
     "three": "^0.117.1",
     "uuid": "^8.3.0"
   },
@@ -34,6 +35,7 @@
     "@types/dat.gui": "^0.7.5",
     "@types/faker": "^4.1.12",
     "@types/jest": "^26.0.14",
+    "@types/stats.js": "^0.17.0",
     "@types/uuid": "^8.3.0",
     "@types/webpack": "^4.41.22",
     "@typescript-eslint/eslint-plugin": "^3.10.1",
diff --git a/src/engine/Sim3D.ts b/src/engine/Sim3D.ts
index 29f4c82..895287d 100644
--- a/src/engine/Sim3D.ts
+++ b/src/engine/Sim3D.ts
@@ -38,6 +38,7 @@ import { ZoneHandle } from "./handles/ZoneHandle";
 
 import { EventEmitter } from "events";
 import { wallSpecs } from "./utils/WallUtil";
+import Stats from "stats.js";
 
 interface ISimObjectContainer {
   type: string;
@@ -68,6 +69,8 @@ export class Sim3D extends EventEmitter {
   private renderer: THREE.Renderer;
 
   private debugMesh: THREE.Mesh;
+  private perfMonitor: Stats;
+  private fpsIndicator?: Node;
 
   private camera: THREE.PerspectiveCamera;
   private cameraControls: OrbitControls;
@@ -100,6 +103,9 @@ export class Sim3D extends EventEmitter {
 
     this.config = config;
 
+    this.perfMonitor = new Stats();
+    this.perfMonitor.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+
     this.resetSimulator();
   }
 
@@ -153,11 +159,19 @@ export class Sim3D extends EventEmitter {
       const dt = (time - this.lastAnimateTime) / 1000;
       this.lastAnimateTime = time;
 
+      if (this.isDebugMode()) {
+        this.perfMonitor.begin();
+      }
+
       window.requestAnimationFrame(r);
       if (this.physicsActive) {
         this.updatePhysics(dt);
       }
       this.render(dt);
+
+      if (this.isDebugMode()) {
+        this.perfMonitor.end();
+      }
     };
 
     this.isRendering = true;
@@ -301,6 +315,12 @@ export class Sim3D extends EventEmitter {
 
   setDebugMode(enabled: boolean): void {
     this.debugMesh.visible = enabled;
+    if (enabled) {
+      this.fpsIndicator = document.body.appendChild(this.perfMonitor.dom);
+    } else {
+      document.body.removeChild(this.fpsIndicator!);
+      this.fpsIndicator = undefined;
+    }
   }
 
   setCameraMode(spec: CameraModeSpec): void {