Add some more WebGl

frontend/src/scripts/game.ts

@@ -1,4 +1,4 @@
-import { WebGl2Renderer } from './drawing/renderer';
+import { WebGl2Renderer } from './drawing/webgl2-renderer';
 import { KeyboardListener } from './input/keyboard-listener';
 import { MouseListener } from './input/mouse-listener';
 import { TouchListener } from './input/touch-listener';
@@ -11,16 +11,15 @@ import { Character } from './objects/types/character';
 import { InfoText } from './objects/types/info-text';
 import { timeIt } from './helper/timing';
 
-import { GlslShader, GlslVariable, GlslVariableMap } from 'webpack-glsl-minify';
-
-let passthroughVertexShader = require('../shaders/passthrough-vs.glsl') as GlslShader;
-let distanceFragmentShader = require('../shaders/cave-fs.glsl') as GlslShader;
+import caveFragmentShader from '../shaders/cave-fs.glsl';
+import { Dungeon } from './objects/types/dungeon';
+import { BeforeDrawCommand } from './commands/types/before-draw';
 
 export class Game {
   private previousTime: DOMHighResTimeStamp = 0;
   private objects: ObjectContainer = new ObjectContainer();
   private renderer: WebGl2Renderer;
-  private frameCount = 0;
+  private previousFpsValues: Array<number> = [];
 
   constructor() {
     const canvas: HTMLCanvasElement = document.querySelector('canvas#main');
@@ -35,12 +34,7 @@ export class Game {
       [this.objects]
     );
 
-    console.log(distanceFragmentShader);
-
-    this.renderer = new WebGl2Renderer(canvas, overlay, [
-      passthroughVertexShader.sourceCode,
-      distanceFragmentShader.sourceCode,
-    ]);
+    this.renderer = new WebGl2Renderer(canvas, overlay, [caveFragmentShader]);
 
     this.initializeScene();
     requestAnimationFrame(this.gameLoop.bind(this));
@@ -49,23 +43,37 @@ export class Game {
   private initializeScene() {
     this.objects.addObject(new Character(this.objects));
     this.objects.addObject(new InfoText());
+    this.objects.addObject(new Dungeon());
   }
 
   @timeIt()
   private gameLoop(time: DOMHighResTimeStamp) {
     const deltaTime = time - this.previousTime;
-    if (this.frameCount++ % 30 == 0) {
-      InfoText.modifyRecord('FPS', (1000 / deltaTime).toFixed(1));
-    }
-
     this.previousTime = time;
+    this.calculateFps(deltaTime);
 
     this.objects.sendCommand(new StepCommand(deltaTime));
 
     this.renderer.startFrame();
+    this.objects.sendCommand(new BeforeDrawCommand(this.renderer));
     this.objects.sendCommand(new DrawCommand(this.renderer));
     this.renderer.finishFrame();
 
     window.requestAnimationFrame(this.gameLoop.bind(this));
   }
+
+  private calculateFps(deltaTime: number) {
+    this.previousFpsValues.push(1000 / deltaTime);
+    if (this.previousFpsValues.length > 30) {
+      const text = `Min: ${this.previousFpsValues[0].toFixed(
+        2
+      )}\n\tMedian: ${this.previousFpsValues[
+        Math.floor(this.previousFpsValues.length / 2)
+      ].toFixed(2)}`;
+
+      InfoText.modifyRecord('FPS', text);
+
+      this.previousFpsValues = [];
+    }
+  }
 }