show more info with FPS Counter

backend/templates/visualizer.html.tera

@@ -9,7 +9,7 @@
 <div id=wrapper>
 
     <div id="main" class="loading">
-        <canvas id="c"></canvas>
+        <canvas id="canvas"></canvas>
         <div id="name"></div>
         <div id="addbutton" class="button"></div>
 

frontend/www/src/index.ts

@@ -7,6 +7,14 @@ import { VertexBuffer, IndexBuffer } from "./webgl/buffer";
 import { VertexBufferLayout, VertexArray } from "./webgl/vertexBufferLayout";
 import { defaultLabelFactory, LabelFactory, Align, Label } from "./webgl/text";
 import { VoronoiBuilder } from "./voronoi/voronoi";
+import { BBox } from "./voronoi/voronoi-core";
+
+function to_bbox(box: number[]): BBox {
+    return {
+        'xl': box[0], 'xr': box[0] + box[2],
+        'yt': box[1], 'yb': box[1] + box[3]
+    };
+}
 
 function f32v(ptr: number, size: number): Float32Array {
     return new Float32Array(memory.buffer, ptr, size);
@@ -117,11 +125,8 @@ class GameInstance {
         for (let i = 0; i < planets.length; i += 3) {
             planet_points.push({ 'x': -planets[i], 'y': -planets[i + 1] });
         }
-        const _bbox = this.resizer.get_viewbox();
-        const bbox = {
-            'xl': _bbox[0], 'xr': _bbox[0] + _bbox[2],
-            'yt': _bbox[1], 'yb': _bbox[1] + _bbox[3]
-        };
+
+        const bbox = to_bbox(this.resizer.get_viewbox());
 
         this.vor_builder = new VoronoiBuilder(GL, this.vor_shader, planet_points, bbox);
         this.renderer.addRenderable(this.vor_builder.getRenderable(), LAYERS.vor);
@@ -197,13 +202,7 @@ class GameInstance {
 
     on_resize() {
         this.resizer = new Resizer(CANVAS, [...f32v(this.game.get_viewbox(), 4)], true);
-
-        const _bbox = this.resizer.get_viewbox();
-        const bbox = {
-            'xl': _bbox[0], 'xr': _bbox[0] + _bbox[2],
-            'yt': _bbox[1], 'yb': _bbox[1] + _bbox[3]
-        };
-
+        const bbox = to_bbox(this.resizer.get_viewbox());
         this.vor_builder.resize(GL, bbox);
     }
 
@@ -322,6 +321,8 @@ class GameInstance {
 
         // Render
         this.renderer.render(GL);
+
+        COUNTER.frame_end();
     }
 
     updateTurn(turn: number) {

frontend/www/src/webgl/util.ts

@@ -36,7 +36,11 @@ export class FPSCounter {
   last: number;
   count: number;
   _delta: number;
-  _prev: number
+  _prev: number;
+
+  _frame_start: number;
+  _total_frametime: number;
+
   constructor() {
     this.last = 0;
     this.count = 0;
@@ -45,17 +49,23 @@ export class FPSCounter {
   }
 
   frame(now: number) {
+    this._frame_start = performance.now();
     this.count += 1;
     this._delta = now - this._prev;
     this._prev = now;
 
     if (now - this.last > 1000) {
       this.last = now;
-      console.log(this.count + " fps");
+      console.log(`${this.count} fps, ${(this._total_frametime / this.count).toFixed(2)}ms avg per frame`);
       this.count = 0;
+      this._total_frametime = 0;
     }
   }
 
+  frame_end() {
+    this._total_frametime += (performance.now() - this._frame_start);
+  }
+
   delta(now: number): number {
     return this._delta;
   }