Merge pull request #130 from ansonmiu0214/debug/fps-indicator

Add FPS indicator to debug mode

package.json

@@ -27,13 +27,15 @@
  "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"
  },
  "devDependencies": {
  "@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",

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 {