stats-gl 0.2.0 → 1.0.0

package/README.md

@@ -1,32 +1,31 @@
-# stats-gl
+# 📈 stats-gl
+[![Version](https://img.shields.io/npm/v/stats-gl?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/stats-gl)
 
-stats-gl is a simple, yet powerful JavaScript library designed to help you monitor and visualize your web application's performance in real-time. The library provides panels that display Frames per Second (FPS), Central Processing Unit (CPU) usage, and if supported, Graphics Processing Unit (GPU) usage.
+WebGL Performance Monitor tool.
 
-Note: GPU Monitoring will be available on Safari after the v17 release.
+🔗 [Live Demo](https://stats.renaudrohlinger.com/)
 
-## Table of Contents
-- [Description](#description)
-- [Installation](#installation)
-- [Example Usage](#example-usage)
-- [Parameters](#parameters)
-- [Contributing](#contributing)
-- [License](#license)
 
-## Description
+https://github.com/RenaudRohlinger/stats-gl/assets/15867665/3fdafff4-1357-4872-9baf-0629dbaf9d8c
 
-The Stats class exposes methods to create performance panels, log performance metrics, and manage the display and layout of these panels. The performance metrics are logged for FPS CPU and GPU. The GPU logging is only available if the user's browser supports the WebGL 2.0 `EXT_disjoint_timer_query_webgl2` extension.
+
+### ❗📢 Note: GPU Monitoring will be available on Safari after the v17 release.
+
+## 📚 Description
+
+`stats-gl` is a comprehensive tool to monitor WebGL performance. The Stats class provides methods to create performance panels, log performance metrics, and manage the display and layout of these panels. The performance metrics logged include FPS, CPU, and GPU. The GPU logging is available only if the user's browser supports the WebGL 2.0 `EXT_disjoint_timer_query_webgl2` extension.
 
 In addition to logging real-time performance data, the class also provides methods to calculate and display average performance metrics over a specified interval.
 
-## Installation
+## ⬇️ Installation
 
-Stats.js is available as an npm package. You can install it using the following command:
+Stats-gl is available as an npm package. You can install it using the following command:
 
 ```bash
 npm install stats-gl
 ```
 
-## Example Usage
+## 🧑‍💻 Example Usage
 
 Below is an example of how you can use this class in your code:
 ```js
@@ -38,6 +37,7 @@ const stats = new Stats({
     samplesLog: 100, 
     samplesGraph: 10, 
     precision: 2, 
+    horizontal: true,
     minimal: false, 
     mode: 0 
 });
@@ -52,24 +52,62 @@ stats.begin();
 stats.end();
 ```
 
-## Parameters
+
+Quick start with threejs:
+```js
+import * as THREE from 'three';
+
+import Stats from 'https://www.unpkg.com/stats-gl';
+
+const container = document.getElementById( 'container' );
+
+const stats = new Stats();
+container.appendChild( stats.container );
+
+const renderer = new THREE.WebGLRenderer( { antialias: true } );
+container.appendChild( renderer.domElement );
+
+const scene = new THREE.Scene();
+
+stats.init( renderer.domElement );
+
+scene.onBeforeRender = function () {
+
+    stats.begin();
+
+};
+
+scene.onAfterRender = function () {
+
+    stats.end();
+
+};
+```
+
+
+## ⚙️ Parameters
 The constructor for the Stats class accepts an options object with the following properties:
 
-- logsPerSecond: How often to log performance data, in logs per second.
-- samplesLog: Number of recent log samples to keep for computing averages.
-- samplesGraph: Number of recent graph samples to keep for computing averages.
-- precision: Precision of the data, in number of decimal places.
-- minimal: A boolean value to control the minimalistic mode of the panel display. If set to true, a simple click on the panel will switch between different metrics.
-- mode: Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).
+- `logsPerSecond`: How often to log performance data, in logs per second.
+- `samplesLog`: Number of recent log samples to keep for computing averages.
+- `samplesGraph`: Number of recent graph samples to keep for computing averages.
+- `precision`: Precision of the data, in number of decimal places (only affects CPU and GPU).
+- `minimal`: A boolean value to control the minimalistic mode of the panel display. If set to true, a simple click on the panel will switch between different metrics.
+- `mode`: Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).
+- `horizontal`: Display the canvases on the X axis, set to align on vertical axis.
 
 All the parameters are optional and have default values. The class also provides other methods such as begin(), end(), init(canvas), etc. which can be used based on the requirement.
 
-Note: The init(canvas) method is used to start the GPU monitoring and must be called with a canvas context before begin().
 
-## Contributing
-We welcome contributions to Stats.js. Before contributing, please read our contributing guidelines and code of conduct.
+## 🤝 Contributing
+Contributions to Stats-gl are welcome.
 
 Please report any issues or bugs you encounter.
 
-## License
-This project is licensed under the MIT License.
+## 📜 License
+This project is licensed under the MIT License.
+
+## 🧑‍🎨 Maintainers :
+
+- [`twitter 🐈‍⬛ @onirenaud`](https://twitter.com/onirenaud)
+- [`twitter @utsuboco`](https://twitter.com/utsuboco)

package/dist/main.cjs

@@ -0,0 +1,191 @@
+"use strict";
+const panel = require("./panel.cjs");
+class Stats {
+  constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, horizontal = true, mode = 0 } = {}) {
+    this.mode = mode;
+    this.horizontal = horizontal;
+    this.container = document.createElement("div");
+    this.container.style.cssText = "position:fixed;top:0;left:0;opacity:0.9;z-index:10000;";
+    if (minimal) {
+      this.container.style.cssText += "cursor:pointer";
+    }
+    this.canvasGpu = null;
+    this.gl = null;
+    this.query = null;
+    this.minimal = minimal;
+    this.beginTime = (performance || Date).now();
+    this.prevTime = this.beginTime;
+    this.prevCpuTime = this.beginTime;
+    this.frames = 0;
+    this.averageCpu = {
+      logs: [],
+      graph: []
+    };
+    this.averageGpu = {
+      logs: [],
+      graph: []
+    };
+    this.queryCreated = false;
+    this.fpsPanel = this.addPanel(new Stats.Panel("FPS", "#0ff", "#002"), 0);
+    this.msPanel = this.addPanel(new Stats.Panel("CPU", "#0f0", "#020"), 1);
+    this.gpuPanel = null;
+    this.samplesLog = samplesLog;
+    this.samplesGraph = samplesGraph;
+    this.precision = precision;
+    this.logsPerSecond = logsPerSecond;
+    if (this.minimal) {
+      this.container.addEventListener("click", (event) => {
+        event.preventDefault();
+        this.showPanel(++this.mode % this.container.children.length);
+      }, false);
+      this.mode = mode;
+      this.showPanel(this.mode);
+    } else {
+      window.addEventListener("resize", () => {
+        this.resizePanel(this.fpsPanel, 0);
+        this.resizePanel(this.msPanel, 1);
+        if (this.gpuPanel) {
+          this.resizePanel(this.gpuPanel, 2);
+        }
+      });
+    }
+  }
+  resizePanel(panel2, offset) {
+    if (this.minimal) {
+      panel2.canvas.style.display = "none";
+    } else {
+      panel2.canvas.style.display = "block";
+      if (this.horizontal) {
+        panel2.canvas.style.top = "0px";
+        panel2.canvas.style.left = offset * panel2.WIDTH / panel2.PR + "px";
+      } else {
+        panel2.canvas.style.left = "0px";
+        panel2.canvas.style.top = offset * panel2.HEIGHT / panel2.PR + "px";
+      }
+    }
+  }
+  addPanel(panel2, offset) {
+    if (panel2.canvas) {
+      this.container.appendChild(panel2.canvas);
+      this.resizePanel(panel2, offset);
+    }
+    return panel2;
+  }
+  showPanel(id) {
+    for (let i = 0; i < this.container.children.length; i++) {
+      const child = this.container.children[i];
+      child.style.display = i === id ? "block" : "none";
+    }
+    this.mode = id;
+  }
+  init(canvas) {
+    this.canvasGpu = canvas;
+    if (!this.canvasGpu)
+      return;
+    this.gl = this.canvasGpu.getContext("webgl2");
+    this.ext = this.gl ? this.gl.getExtension("EXT_disjoint_timer_query_webgl2") : null;
+    if (this.ext) {
+      this.gpuPanel = this.addPanel(new Stats.Panel("GPU", "#ff0", "#220"), 2);
+    }
+  }
+  begin() {
+    this.beginProfiling("cpu-started");
+    if (!this.gl || !this.ext)
+      return;
+    if (this.query) {
+      const available = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT_AVAILABLE);
+      this.disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
+      if (available && !this.disjoint) {
+        this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
+        const ms = this.ns * 1e-6;
+        if (available || this.disjoint) {
+          this.gl.deleteQuery(this.query);
+          this.query = null;
+        }
+        if (available) {
+          this.addToAverage(ms, this.averageGpu);
+        }
+      }
+    }
+    if (!this.query) {
+      this.queryCreated = true;
+      this.query = this.gl.createQuery();
+      if (this.query) {
+        this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.query);
+      }
+    }
+  }
+  end() {
+    this.beginTime = this.endInternal();
+    this.endProfiling("cpu-started", "cpu-finished", "cpu-duration", this.averageCpu);
+    if (!this.gl || !this.ext)
+      return;
+    if (this.queryCreated && this.gl.getQuery(this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY)) {
+      this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
+    }
+  }
+  endInternal() {
+    this.frames++;
+    const time = (performance || Date).now();
+    if (time >= this.prevCpuTime + 1e3 / this.logsPerSecond) {
+      this.updatePanel(this.msPanel, this.averageCpu);
+      this.updatePanel(this.gpuPanel, this.averageGpu);
+      this.prevCpuTime = time;
+    }
+    if (time >= this.prevTime + 1e3) {
+      const fps = this.frames * 1e3 / (time - this.prevTime);
+      this.fpsPanel.update(fps, fps, 100, 100, 0);
+      this.prevTime = time;
+      this.frames = 0;
+    }
+    return time;
+  }
+  addToAverage(value, averageArray) {
+    averageArray.logs.push(value);
+    if (averageArray.logs.length > this.samplesLog) {
+      averageArray.logs.shift();
+    }
+    averageArray.graph.push(value);
+    if (averageArray.graph.length > this.samplesGraph) {
+      averageArray.graph.shift();
+    }
+  }
+  beginProfiling(marker) {
+    if (window.performance) {
+      window.performance.mark(marker);
+    }
+  }
+  endProfiling(startMarker, endMarker, measureName, averageArray) {
+    if (window.performance && endMarker) {
+      window.performance.mark(endMarker);
+      const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
+      this.addToAverage(cpuMeasure.duration, averageArray);
+    }
+  }
+  updatePanel(panel2, averageArray) {
+    if (averageArray.logs.length > 0) {
+      let sumLog = 0;
+      let max = 0.01;
+      for (let i = 0; i < averageArray.logs.length; i++) {
+        sumLog += averageArray.logs[i];
+        if (averageArray.logs[i] > max) {
+          max = averageArray.logs[i];
+        }
+      }
+      let sumGraph = 0;
+      let maxGraph = 0.01;
+      for (let i = 0; i < averageArray.graph.length; i++) {
+        sumGraph += averageArray.graph[i];
+        if (averageArray.graph[i] > maxGraph) {
+          maxGraph = averageArray.graph[i];
+        }
+      }
+      if (panel2) {
+        panel2.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, this.precision);
+      }
+    }
+  }
+}
+Stats.Panel = panel;
+module.exports = Stats;
+//# sourceMappingURL=main.cjs.map

package/dist/main.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.cjs","sources":["../lib/main.ts"],"sourcesContent":null,"names":["panel","Panel"],"mappings":"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"}

package/dist/main.js

@@ -0,0 +1,192 @@
+import Panel from "./panel.js";
+class Stats {
+  constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, horizontal = true, mode = 0 } = {}) {
+    this.mode = mode;
+    this.horizontal = horizontal;
+    this.container = document.createElement("div");
+    this.container.style.cssText = "position:fixed;top:0;left:0;opacity:0.9;z-index:10000;";
+    if (minimal) {
+      this.container.style.cssText += "cursor:pointer";
+    }
+    this.canvasGpu = null;
+    this.gl = null;
+    this.query = null;
+    this.minimal = minimal;
+    this.beginTime = (performance || Date).now();
+    this.prevTime = this.beginTime;
+    this.prevCpuTime = this.beginTime;
+    this.frames = 0;
+    this.averageCpu = {
+      logs: [],
+      graph: []
+    };
+    this.averageGpu = {
+      logs: [],
+      graph: []
+    };
+    this.queryCreated = false;
+    this.fpsPanel = this.addPanel(new Stats.Panel("FPS", "#0ff", "#002"), 0);
+    this.msPanel = this.addPanel(new Stats.Panel("CPU", "#0f0", "#020"), 1);
+    this.gpuPanel = null;
+    this.samplesLog = samplesLog;
+    this.samplesGraph = samplesGraph;
+    this.precision = precision;
+    this.logsPerSecond = logsPerSecond;
+    if (this.minimal) {
+      this.container.addEventListener("click", (event) => {
+        event.preventDefault();
+        this.showPanel(++this.mode % this.container.children.length);
+      }, false);
+      this.mode = mode;
+      this.showPanel(this.mode);
+    } else {
+      window.addEventListener("resize", () => {
+        this.resizePanel(this.fpsPanel, 0);
+        this.resizePanel(this.msPanel, 1);
+        if (this.gpuPanel) {
+          this.resizePanel(this.gpuPanel, 2);
+        }
+      });
+    }
+  }
+  resizePanel(panel, offset) {
+    if (this.minimal) {
+      panel.canvas.style.display = "none";
+    } else {
+      panel.canvas.style.display = "block";
+      if (this.horizontal) {
+        panel.canvas.style.top = "0px";
+        panel.canvas.style.left = offset * panel.WIDTH / panel.PR + "px";
+      } else {
+        panel.canvas.style.left = "0px";
+        panel.canvas.style.top = offset * panel.HEIGHT / panel.PR + "px";
+      }
+    }
+  }
+  addPanel(panel, offset) {
+    if (panel.canvas) {
+      this.container.appendChild(panel.canvas);
+      this.resizePanel(panel, offset);
+    }
+    return panel;
+  }
+  showPanel(id) {
+    for (let i = 0; i < this.container.children.length; i++) {
+      const child = this.container.children[i];
+      child.style.display = i === id ? "block" : "none";
+    }
+    this.mode = id;
+  }
+  init(canvas) {
+    this.canvasGpu = canvas;
+    if (!this.canvasGpu)
+      return;
+    this.gl = this.canvasGpu.getContext("webgl2");
+    this.ext = this.gl ? this.gl.getExtension("EXT_disjoint_timer_query_webgl2") : null;
+    if (this.ext) {
+      this.gpuPanel = this.addPanel(new Stats.Panel("GPU", "#ff0", "#220"), 2);
+    }
+  }
+  begin() {
+    this.beginProfiling("cpu-started");
+    if (!this.gl || !this.ext)
+      return;
+    if (this.query) {
+      const available = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT_AVAILABLE);
+      this.disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
+      if (available && !this.disjoint) {
+        this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
+        const ms = this.ns * 1e-6;
+        if (available || this.disjoint) {
+          this.gl.deleteQuery(this.query);
+          this.query = null;
+        }
+        if (available) {
+          this.addToAverage(ms, this.averageGpu);
+        }
+      }
+    }
+    if (!this.query) {
+      this.queryCreated = true;
+      this.query = this.gl.createQuery();
+      if (this.query) {
+        this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.query);
+      }
+    }
+  }
+  end() {
+    this.beginTime = this.endInternal();
+    this.endProfiling("cpu-started", "cpu-finished", "cpu-duration", this.averageCpu);
+    if (!this.gl || !this.ext)
+      return;
+    if (this.queryCreated && this.gl.getQuery(this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY)) {
+      this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
+    }
+  }
+  endInternal() {
+    this.frames++;
+    const time = (performance || Date).now();
+    if (time >= this.prevCpuTime + 1e3 / this.logsPerSecond) {
+      this.updatePanel(this.msPanel, this.averageCpu);
+      this.updatePanel(this.gpuPanel, this.averageGpu);
+      this.prevCpuTime = time;
+    }
+    if (time >= this.prevTime + 1e3) {
+      const fps = this.frames * 1e3 / (time - this.prevTime);
+      this.fpsPanel.update(fps, fps, 100, 100, 0);
+      this.prevTime = time;
+      this.frames = 0;
+    }
+    return time;
+  }
+  addToAverage(value, averageArray) {
+    averageArray.logs.push(value);
+    if (averageArray.logs.length > this.samplesLog) {
+      averageArray.logs.shift();
+    }
+    averageArray.graph.push(value);
+    if (averageArray.graph.length > this.samplesGraph) {
+      averageArray.graph.shift();
+    }
+  }
+  beginProfiling(marker) {
+    if (window.performance) {
+      window.performance.mark(marker);
+    }
+  }
+  endProfiling(startMarker, endMarker, measureName, averageArray) {
+    if (window.performance && endMarker) {
+      window.performance.mark(endMarker);
+      const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
+      this.addToAverage(cpuMeasure.duration, averageArray);
+    }
+  }
+  updatePanel(panel, averageArray) {
+    if (averageArray.logs.length > 0) {
+      let sumLog = 0;
+      let max = 0.01;
+      for (let i = 0; i < averageArray.logs.length; i++) {
+        sumLog += averageArray.logs[i];
+        if (averageArray.logs[i] > max) {
+          max = averageArray.logs[i];
+        }
+      }
+      let sumGraph = 0;
+      let maxGraph = 0.01;
+      for (let i = 0; i < averageArray.graph.length; i++) {
+        sumGraph += averageArray.graph[i];
+        if (averageArray.graph[i] > maxGraph) {
+          maxGraph = averageArray.graph[i];
+        }
+      }
+      if (panel) {
+        panel.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, this.precision);
+      }
+    }
+  }
+}
+Stats.Panel = Panel;
+export {
+  Stats as default
+};
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sources":["../lib/main.ts"],"sourcesContent":null,"names":[],"mappings":";AAQA,MAAM,MAAM;AAAA,EA2BV,YAAa,EAAE,gBAAgB,IAAI,aAAa,KAAK,eAAe,IAAI,YAAY,GAAG,UAAU,OAAO,aAAa,MAAM,OAAO,EAAE,IAAI,IAAK;AAE3I,SAAK,OAAO;AACZ,SAAK,aAAa;AACb,SAAA,YAAY,SAAS,cAAe,KAAM;AAC1C,SAAA,UAAU,MAAM,UAAU;AAE/B,QAAK,SAAU;AAER,WAAA,UAAU,MAAM,WAAW;AAAA,IAElC;AAEA,SAAK,YAAY;AACjB,SAAK,KAAK;AACV,SAAK,QAAS;AAEd,SAAK,UAAU;AAEV,SAAA,aAAc,eAAe,MAAO,IAAI;AAC7C,SAAK,WAAW,KAAK;AACrB,SAAK,cAAc,KAAK;AACxB,SAAK,SAAS;AACd,SAAK,aAAa;AAAA,MAChB,MAAM,CAAC;AAAA,MACP,OAAO,CAAC;AAAA,IAAA;AAEV,SAAK,aAAa;AAAA,MAChB,MAAM,CAAC;AAAA,MACP,OAAO,CAAC;AAAA,IAAA;AAGV,SAAK,eAAe;AAEf,SAAA,WAAW,KAAK,SAAU,IAAI,MAAM,MAAO,OAAO,QAAQ,MAAO,GAAG,CAAE;AACtE,SAAA,UAAU,KAAK,SAAU,IAAI,MAAM,MAAO,OAAO,QAAQ,MAAO,GAAG,CAAE;AAC1E,SAAK,WAAW;AAEhB,SAAK,aAAa;AAClB,SAAK,eAAe;AACpB,SAAK,YAAY;AACjB,SAAK,gBAAgB;AAErB,QAAK,KAAK,SAAU;AAElB,WAAK,UAAU,iBAAkB,SAAS,CAAE,UAAW;AAErD,cAAM,eAAe;AACrB,aAAK,UAAW,EAAG,KAAK,OAAO,KAAK,UAAU,SAAS,MAAO;AAAA,SAE7D,KAAM;AAET,WAAK,OAAO;AACP,WAAA,UAAW,KAAK,IAAK;AAAA,IAAA,OAErB;AAEE,aAAA,iBAAiB,UAAU,MAAK;AAEhC,aAAA,YAAa,KAAK,UAAU,CAAE;AAC9B,aAAA,YAAa,KAAK,SAAS,CAAE;AAElC,YAAI,KAAK,UAAU;AACZ,eAAA,YAAa,KAAK,UAAU,CAAE;AAAA,QACrC;AAAA,MAAA,CACD;AAAA,IACH;AAAA,EAEF;AAAA,EAEA,YAAa,OAAc,QAAgB;AAEzC,QAAK,KAAK,SAAU;AAEZ,YAAA,OAAO,MAAM,UAAU;AAAA,IAAA,OAExB;AAEC,YAAA,OAAO,MAAM,UAAU;AAC7B,UAAI,KAAK,YAAY;AACb,cAAA,OAAO,MAAM,MAAM;AACzB,cAAM,OAAO,MAAM,OAAO,SAAS,MAAM,QAAQ,MAAM,KAAK;AAAA,MAAA,OACvD;AACC,cAAA,OAAO,MAAM,OAAO;AAC1B,cAAM,OAAO,MAAM,MAAM,SAAS,MAAM,SAAS,MAAM,KAAM;AAAA,MAE/D;AAAA,IACF;AAAA,EACF;AAAA,EAEA,SAAS,OAAc,QAAgB;AAErC,QAAG,MAAM,QAAQ;AAEV,WAAA,UAAU,YAAY,MAAM,MAAM;AAElC,WAAA,YAAY,OAAO,MAAM;AAAA,IAEhC;AAEO,WAAA;AAAA,EAET;AAAA,EAEA,UAAW,IAAa;AAEtB,aAAU,IAAI,GAAG,IAAI,KAAK,UAAU,SAAS,QAAQ,KAAO;AAC1D,YAAM,QAAQ,KAAK,UAAU,SAAS,CAAC;AAEvC,YAAM,MAAM,UAAU,MAAM,KAAK,UAAU;AAAA,IAE7C;AAEA,SAAK,OAAO;AAAA,EAEd;AAAA,EAEA,KAAM,QAAc;AAElB,SAAK,YAAY;AACjB,QAAK,CAAE,KAAK;AAAY;AACxB,SAAK,KAAK,KAAK,UAAU,WAAY,QAAS;AAC9C,SAAK,MAAM,KAAK,KAAK,KAAK,GAAG,aAAc,iCAAkC,IAAI;AACjF,QAAK,KAAK,KAAM;AAET,WAAA,WAAW,KAAK,SAAU,IAAI,MAAM,MAAO,OAAO,QAAQ,MAAO,GAAG,CAAE;AAAA,IAE7E;AAAA,EAEF;AAAA,EAEA,QAAQ;AAEN,SAAK,eAAgB,aAAc;AACnC,QAAK,CAAE,KAAK,MAAM,CAAE,KAAK;AAAM;AAG/B,QAAK,KAAK,OAAQ;AAEV,YAAA,YAAY,KAAK,GAAG,kBAAmB,KAAK,OAAO,KAAK,GAAG,sBAAuB;AACxF,WAAK,WAAW,KAAK,GAAG,aAAc,KAAK,IAAI,gBAAiB;AAE3D,UAAA,aAAa,CAAE,KAAK,UAAW;AAE7B,aAAA,KAAK,KAAK,GAAG,kBAAmB,KAAK,OAAO,KAAK,GAAG,YAAa;AAChE,cAAA,KAAK,KAAK,KAAK;AAEhB,YAAA,aAAa,KAAK,UAAW;AAE3B,eAAA,GAAG,YAAa,KAAK,KAAM;AAChC,eAAK,QAAQ;AAAA,QAEf;AAEA,YAAK,WAAY;AAEV,eAAA,aAAc,IAAI,KAAK,UAAW;AAAA,QAEzC;AAAA,MAEF;AAAA,IAEF;AAEK,QAAA,CAAE,KAAK,OAAQ;AAElB,WAAK,eAAe;AACf,WAAA,QAAQ,KAAK,GAAG,YAAY;AAEjC,UAAK,KAAK,OAAQ;AAChB,aAAK,GAAG,WAAY,KAAK,IAAI,kBAAkB,KAAK,KAAM;AAAA,MAC5D;AAAA,IAEF;AAAA,EAEF;AAAA,EAEA,MAAM;AAEC,SAAA,YAAY,KAAK;AAEtB,SAAK,aAAc,eAAe,gBAAgB,gBAAgB,KAAK,UAAW;AAElF,QAAK,CAAE,KAAK,MAAM,CAAE,KAAK;AAAM;AAG1B,QAAA,KAAK,gBAAgB,KAAK,GAAG,SAAU,KAAK,IAAI,kBAAkB,KAAK,GAAG,aAAc,GAAI;AAE/F,WAAK,GAAG,SAAU,KAAK,IAAI,gBAAiB;AAAA,IAE9C;AAAA,EAGF;AAAA,EAEA,cAAc;AAEP,SAAA;AACC,UAAA,QAAS,eAAe,MAAO,IAAI;AAEzC,QAAI,QAAQ,KAAK,cAAc,MAAO,KAAK,eAAe;AACxD,WAAK,YAAa,KAAK,SAAS,KAAK,UAAW;AAChD,WAAK,YAAa,KAAK,UAAU,KAAK,UAAW;AAEjD,WAAK,cAAc;AAAA,IACrB;AAEK,QAAA,QAAQ,KAAK,WAAW,KAAO;AAElC,YAAM,MAAQ,KAAK,SAAS,OAAW,OAAO,KAAK;AAEnD,WAAK,SAAS,OAAO,KAAK,KAAK,KAAK,KAAK,CAAC;AAE1C,WAAK,WAAW;AAChB,WAAK,SAAS;AAAA,IAEhB;AAEO,WAAA;AAAA,EAET;AAAA,EAEA,aAAc,OAAe,cAA2C;AAEzD,iBAAA,KAAK,KAAM,KAAM;AAC9B,QAAK,aAAa,KAAK,SAAS,KAAK,YAAa;AAEhD,mBAAa,KAAK;IAEpB;AAEa,iBAAA,MAAM,KAAM,KAAM;AAC/B,QAAK,aAAa,MAAM,SAAS,KAAK,cAAe;AAEnD,mBAAa,MAAM;IAErB;AAAA,EAEF;AAAA,EAEA,eAAgB,QAAiB;AAE/B,QAAK,OAAO,aAAc;AAEjB,aAAA,YAAY,KAAM,MAAO;AAAA,IAElC;AAAA,EAEF;AAAA,EAEA,aAAc,aAA6D,WAA+B,aAAqB,cAAkD;AAE1K,QAAA,OAAO,eAAe,WAAY;AAE9B,aAAA,YAAY,KAAM,SAAU;AACnC,YAAM,aAAa,YAAY,QAAS,aAAa,aAAa,SAAU;AACvE,WAAA,aAAc,WAAW,UAAU,YAAa;AAAA,IAEvD;AAAA,EAEF;AAAA,EAEA,YAAY,OAAgC,cAAiD;AAEvF,QAAA,aAAa,KAAK,SAAS,GAAG;AAEhC,UAAI,SAAS;AACb,UAAI,MAAM;AAEV,eAAS,IAAI,GAAG,IAAI,aAAa,KAAK,QAAQ,KAAK;AAEvC,kBAAA,aAAa,KAAK,CAAC;AAE7B,YAAI,aAAa,KAAK,CAAC,IAAI,KAAK;AACxB,gBAAA,aAAa,KAAK,CAAC;AAAA,QAC3B;AAAA,MAEF;AAEA,UAAI,WAAW;AACf,UAAI,WAAW;AACf,eAAS,IAAI,GAAG,IAAI,aAAa,MAAM,QAAQ,KAAK;AAEtC,oBAAA,aAAa,MAAM,CAAC;AAEhC,YAAI,aAAa,MAAM,CAAC,IAAI,UAAU;AACzB,qBAAA,aAAa,MAAM,CAAC;AAAA,QACjC;AAAA,MAEF;AAEA,UAAI,OAAO;AACH,cAAA,OAAO,SAAS,KAAK,IAAI,aAAa,KAAK,QAAO,KAAK,UAAU,GAAG,WAAW,KAAK,IAAI,aAAa,MAAM,QAAO,KAAK,YAAY,GAAG,KAAK,UAAU,KAAK,SAAS;AAAA,MAC3K;AAAA,IAEF;AAAA,EACF;AAGF;AAEA,MAAM,QAAQ;"}

package/dist/panel.cjs

@@ -0,0 +1,57 @@
+"use strict";
+class Panel {
+  constructor(name, fg, bg) {
+    this.name = name;
+    this.fg = fg;
+    this.bg = bg;
+    this.PR = Math.round(window.devicePixelRatio || 1);
+    this.WIDTH = 90 * this.PR;
+    this.HEIGHT = 48 * this.PR;
+    this.TEXT_X = 3 * this.PR;
+    this.TEXT_Y = 2 * this.PR;
+    this.GRAPH_X = 3 * this.PR;
+    this.GRAPH_Y = 15 * this.PR;
+    this.GRAPH_WIDTH = 84 * this.PR;
+    this.GRAPH_HEIGHT = 30 * this.PR;
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = 90 * this.PR;
+    this.canvas.height = 48 * this.PR;
+    this.canvas.style.width = "90px";
+    this.canvas.style.height = "48px";
+    this.canvas.style.cssText = "width:90px;height:48px";
+    this.context = this.canvas.getContext("2d");
+    if (this.context) {
+      this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
+      this.context.textBaseline = "top";
+      this.context.fillStyle = this.bg;
+      this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
+      this.context.fillStyle = this.fg;
+      this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
+      this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
+      this.context.fillStyle = this.bg;
+      this.context.globalAlpha = 0.9;
+      this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
+    }
+  }
+  update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
+    let min = Infinity, max = 0;
+    if (!this.context)
+      return;
+    min = Math.min(min, value);
+    max = Math.max(maxValue, value);
+    maxGraph = Math.max(maxGraph, valueGraph);
+    this.context.fillStyle = this.bg;
+    this.context.globalAlpha = 1;
+    this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
+    this.context.fillStyle = this.fg;
+    this.context.fillText(value.toFixed(decimals) + " " + this.name + " (" + min.toFixed(decimals) + "-" + parseFloat(max.toFixed(decimals)) + ")", this.TEXT_X, this.TEXT_Y);
+    this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT);
+    this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
+    this.context.fillStyle = this.bg;
+    this.context.globalAlpha = 0.9;
+    this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT);
+  }
+}
+;
+module.exports = Panel;
+//# sourceMappingURL=panel.cjs.map

package/dist/panel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":";AAAA,MAAM,MAAM;AAAA,EAgBR,YAAY,MAAc,IAAY,IAAY;AAE9C,SAAK,OAAO;AACZ,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK,KAAK,MAAO,OAAO,oBAAoB,CAAE;AAE9C,SAAA,QAAQ,KAAK,KAAK;AAClB,SAAA,SAAS,KAAK,KAAK;AACnB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,UAAU,IAAI,KAAK;AACnB,SAAA,UAAU,KAAK,KAAK;AACpB,SAAA,cAAc,KAAK,KAAK;AACxB,SAAA,eAAe,KAAK,KAAK;AAEzB,SAAA,SAAS,SAAS,cAAc,QAAQ;AACxC,SAAA,OAAO,QAAQ,KAAK,KAAK;AACzB,SAAA,OAAO,SAAS,KAAK,KAAK;AAC1B,SAAA,OAAO,MAAM,QAAQ;AACrB,SAAA,OAAO,MAAM,SAAS;AACtB,SAAA,OAAO,MAAM,UAAU;AAE5B,SAAK,UAAU,KAAK,OAAO,WAAW,IAAI;AAE1C,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,OAAO,UAAW,IAAI,KAAK,KAAM;AAC9C,WAAK,QAAQ,eAAe;AAEvB,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,MAAM;AAE9C,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AACpD,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAEhF,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,cAAc;AACtB,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAAA,IACzF;AAAA,EAEJ;AAAA,EAEA,OAAO,OAAe,YAAoB,UAAkB,UAAkB,WAAW,GAAG;AACpF,QAAA,MAAM,UAAU,MAAM;AAE1B,QAAI,CAAC,KAAK;AAAS;AAEb,UAAA,KAAK,IAAI,KAAK,KAAK;AACnB,UAAA,KAAK,IAAI,UAAU,KAAK;AACnB,eAAA,KAAK,IAAI,UAAU,UAAU;AAEnC,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAC3B,SAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,OAAO;AAC/C,SAAA,QAAQ,YAAY,KAAK;AACzB,SAAA,QAAQ,SAAS,MAAM,QAAQ,QAAQ,IAAI,MAAM,KAAK,OAAO,OAAO,IAAI,QAAQ,QAAQ,IAAI,MAAM,WAAW,IAAI,QAAQ,QAAQ,CAAC,IAAI,KAAK,KAAK,QAAQ,KAAK,MAAM;AAEnK,SAAA,QAAQ,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,IAAI,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,cAAc,KAAK,SAAS,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,YAAY;AAElM,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK,YAAY;AAEpG,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAE3B,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,KAAM,IAAK,aAAa,YAAc,KAAK,YAAY;AAAA,EAC/I;AACJ;AAAC;;"}

package/dist/panel.js

@@ -0,0 +1,58 @@
+class Panel {
+  constructor(name, fg, bg) {
+    this.name = name;
+    this.fg = fg;
+    this.bg = bg;
+    this.PR = Math.round(window.devicePixelRatio || 1);
+    this.WIDTH = 90 * this.PR;
+    this.HEIGHT = 48 * this.PR;
+    this.TEXT_X = 3 * this.PR;
+    this.TEXT_Y = 2 * this.PR;
+    this.GRAPH_X = 3 * this.PR;
+    this.GRAPH_Y = 15 * this.PR;
+    this.GRAPH_WIDTH = 84 * this.PR;
+    this.GRAPH_HEIGHT = 30 * this.PR;
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = 90 * this.PR;
+    this.canvas.height = 48 * this.PR;
+    this.canvas.style.width = "90px";
+    this.canvas.style.height = "48px";
+    this.canvas.style.cssText = "width:90px;height:48px";
+    this.context = this.canvas.getContext("2d");
+    if (this.context) {
+      this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
+      this.context.textBaseline = "top";
+      this.context.fillStyle = this.bg;
+      this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
+      this.context.fillStyle = this.fg;
+      this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
+      this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
+      this.context.fillStyle = this.bg;
+      this.context.globalAlpha = 0.9;
+      this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
+    }
+  }
+  update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
+    let min = Infinity, max = 0;
+    if (!this.context)
+      return;
+    min = Math.min(min, value);
+    max = Math.max(maxValue, value);
+    maxGraph = Math.max(maxGraph, valueGraph);
+    this.context.fillStyle = this.bg;
+    this.context.globalAlpha = 1;
+    this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
+    this.context.fillStyle = this.fg;
+    this.context.fillText(value.toFixed(decimals) + " " + this.name + " (" + min.toFixed(decimals) + "-" + parseFloat(max.toFixed(decimals)) + ")", this.TEXT_X, this.TEXT_Y);
+    this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT);
+    this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
+    this.context.fillStyle = this.bg;
+    this.context.globalAlpha = 0.9;
+    this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT);
+  }
+}
+;
+export {
+  Panel as default
+};
+//# sourceMappingURL=panel.js.map

package/dist/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"AAAA,MAAM,MAAM;AAAA,EAgBR,YAAY,MAAc,IAAY,IAAY;AAE9C,SAAK,OAAO;AACZ,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK,KAAK,MAAO,OAAO,oBAAoB,CAAE;AAE9C,SAAA,QAAQ,KAAK,KAAK;AAClB,SAAA,SAAS,KAAK,KAAK;AACnB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,UAAU,IAAI,KAAK;AACnB,SAAA,UAAU,KAAK,KAAK;AACpB,SAAA,cAAc,KAAK,KAAK;AACxB,SAAA,eAAe,KAAK,KAAK;AAEzB,SAAA,SAAS,SAAS,cAAc,QAAQ;AACxC,SAAA,OAAO,QAAQ,KAAK,KAAK;AACzB,SAAA,OAAO,SAAS,KAAK,KAAK;AAC1B,SAAA,OAAO,MAAM,QAAQ;AACrB,SAAA,OAAO,MAAM,SAAS;AACtB,SAAA,OAAO,MAAM,UAAU;AAE5B,SAAK,UAAU,KAAK,OAAO,WAAW,IAAI;AAE1C,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,OAAO,UAAW,IAAI,KAAK,KAAM;AAC9C,WAAK,QAAQ,eAAe;AAEvB,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,MAAM;AAE9C,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AACpD,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAEhF,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,cAAc;AACtB,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAAA,IACzF;AAAA,EAEJ;AAAA,EAEA,OAAO,OAAe,YAAoB,UAAkB,UAAkB,WAAW,GAAG;AACpF,QAAA,MAAM,UAAU,MAAM;AAE1B,QAAI,CAAC,KAAK;AAAS;AAEb,UAAA,KAAK,IAAI,KAAK,KAAK;AACnB,UAAA,KAAK,IAAI,UAAU,KAAK;AACnB,eAAA,KAAK,IAAI,UAAU,UAAU;AAEnC,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAC3B,SAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,OAAO;AAC/C,SAAA,QAAQ,YAAY,KAAK;AACzB,SAAA,QAAQ,SAAS,MAAM,QAAQ,QAAQ,IAAI,MAAM,KAAK,OAAO,OAAO,IAAI,QAAQ,QAAQ,IAAI,MAAM,WAAW,IAAI,QAAQ,QAAQ,CAAC,IAAI,KAAK,KAAK,QAAQ,KAAK,MAAM;AAEnK,SAAA,QAAQ,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,IAAI,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,cAAc,KAAK,SAAS,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,YAAY;AAElM,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK,YAAY;AAEpG,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAE3B,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,KAAM,IAAK,aAAa,YAAc,KAAK,YAAY;AAAA,EAC/I;AACJ;AAAC;"}

package/dist/stats-gl.d.ts

@@ -25,6 +25,7 @@ declare class Stats {
     mode: number;
     container: HTMLDivElement;
     minimal: boolean;
+    horizontal: boolean;
     beginTime: number;
     prevTime: number;
     prevCpuTime: number;
@@ -46,12 +47,13 @@ declare class Stats {
     query: WebGLQuery | null;
     disjoint: any;
     ns: any;
-    constructor({ logsPerSecond, samplesLog, samplesGraph, precision, minimal, mode }?: {
+    constructor({ logsPerSecond, samplesLog, samplesGraph, precision, minimal, horizontal, mode }?: {
         logsPerSecond?: number | undefined;
         samplesLog?: number | undefined;
         samplesGraph?: number | undefined;
         precision?: number | undefined;
         minimal?: boolean | undefined;
+        horizontal?: boolean | undefined;
         mode?: number | undefined;
     });
     resizePanel(panel: Panel, offset: number): void;

package/lib/main.ts

@@ -0,0 +1,339 @@
+import Panel from "./panel";
+
+export interface AverageArray {
+  logs: number[];
+  graph: number[];
+}
+
+
+class Stats {
+  mode: number;
+  container: HTMLDivElement;
+  minimal: boolean;
+  horizontal: boolean;
+  beginTime: number;
+  prevTime: number;
+  prevCpuTime: number;
+  frames: number;
+  averageCpu: AverageArray;
+  averageGpu: AverageArray;
+  queryCreated: boolean;
+  fpsPanel: Panel;
+  static Panel: any;
+  msPanel: Panel;
+  gpuPanel: Panel | null;
+  samplesLog: number;
+  samplesGraph: number;
+  logsPerSecond: number;
+  precision: number;
+  canvasGpu: HTMLCanvasElement | null;
+  gl: WebGL2RenderingContext | null;
+  ext: any;
+  query: WebGLQuery | null;
+  disjoint: any;
+  ns: any;
+
+  constructor( { logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, horizontal = true, mode = 0 } = {} ) {
+
+    this.mode = mode;
+    this.horizontal = horizontal;
+    this.container = document.createElement( 'div' );
+    this.container.style.cssText = 'position:fixed;top:0;left:0;opacity:0.9;z-index:10000;';
+
+    if ( minimal ) {
+
+      this.container.style.cssText += 'cursor:pointer';
+
+    }
+
+    this.canvasGpu = null;
+    this.gl = null;
+    this.query =  null;
+
+    this.minimal = minimal;
+
+    this.beginTime = ( performance || Date ).now();
+    this.prevTime = this.beginTime;
+    this.prevCpuTime = this.beginTime;
+    this.frames = 0;
+    this.averageCpu = {
+      logs: [],
+      graph: []
+    };
+    this.averageGpu = {
+      logs: [],
+      graph: []
+    };
+
+    this.queryCreated = false;
+
+    this.fpsPanel = this.addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ), 0 );
+    this.msPanel = this.addPanel( new Stats.Panel( 'CPU', '#0f0', '#020' ), 1 );
+    this.gpuPanel = null;
+
+    this.samplesLog = samplesLog;
+    this.samplesGraph = samplesGraph;
+    this.precision = precision;
+    this.logsPerSecond = logsPerSecond;
+
+    if ( this.minimal ) {
+
+      this.container.addEventListener( 'click', ( event ) => {
+
+        event.preventDefault();
+        this.showPanel( ++ this.mode % this.container.children.length );
+
+      }, false );
+
+      this.mode = mode;
+      this.showPanel( this.mode );
+
+    } else {
+
+      window.addEventListener('resize', () =>{
+        
+        this.resizePanel( this.fpsPanel, 0 );
+        this.resizePanel( this.msPanel, 1 );
+  
+        if (this.gpuPanel) {
+          this.resizePanel( this.gpuPanel, 2 );
+        }
+      })
+    }
+
+  }
+
+  resizePanel( panel: Panel, offset: number) {
+
+    if ( this.minimal ) {
+
+      panel.canvas.style.display = 'none';
+
+    } else {
+
+      panel.canvas.style.display = 'block';
+      if (this.horizontal) {
+        panel.canvas.style.top = '0px';
+        panel.canvas.style.left = offset * panel.WIDTH / panel.PR + 'px';
+      } else {
+        panel.canvas.style.left = '0px';
+        panel.canvas.style.top = offset * panel.HEIGHT / panel.PR  + 'px';
+
+      }
+    }
+  }
+    
+  addPanel(panel: Panel, offset: number) {
+
+    if(panel.canvas) {
+
+      this.container.appendChild(panel.canvas);
+    
+      this.resizePanel(panel, offset);
+
+    }
+
+    return panel;
+
+  }
+
+  showPanel( id: number ) {
+
+    for ( let i = 0; i < this.container.children.length; i ++ ) {
+      const child = this.container.children[i] as HTMLElement;
+
+      child.style.display = i === id ? 'block' : 'none';
+
+    }
+
+    this.mode = id;
+
+  }
+
+  init( canvas: any ) {
+
+    this.canvasGpu = canvas;
+    if ( ! this.canvasGpu ) return;
+    this.gl = this.canvasGpu.getContext( 'webgl2' );
+    this.ext = this.gl ? this.gl.getExtension( 'EXT_disjoint_timer_query_webgl2' ) : null;
+    if ( this.ext ) {
+
+      this.gpuPanel = this.addPanel( new Stats.Panel( 'GPU', '#ff0', '#220' ), 2 );
+
+    }
+
+  }
+
+  begin() {
+
+    this.beginProfiling( 'cpu-started' );
+    if ( ! this.gl || ! this.ext ) return;
+
+
+    if ( this.query ) {
+
+      const available = this.gl.getQueryParameter( this.query, this.gl.QUERY_RESULT_AVAILABLE );
+      this.disjoint = this.gl.getParameter( this.ext.GPU_DISJOINT_EXT );
+
+      if ( available && ! this.disjoint ) {
+
+        this.ns = this.gl.getQueryParameter( this.query, this.gl.QUERY_RESULT );
+        const ms = this.ns * 1e-6;
+
+        if ( available || this.disjoint ) {
+
+          this.gl.deleteQuery( this.query );
+          this.query = null;
+
+        }
+
+        if ( available ) {
+
+          this.addToAverage( ms, this.averageGpu );
+
+        }
+
+      }
+
+    }
+
+    if ( ! this.query ) {
+
+      this.queryCreated = true;
+      this.query = this.gl.createQuery();
+
+      if ( this.query ) {
+        this.gl.beginQuery( this.ext.TIME_ELAPSED_EXT, this.query );
+      }
+
+    }
+
+  }
+
+  end() {
+
+    this.beginTime = this.endInternal()
+
+    this.endProfiling( 'cpu-started', 'cpu-finished', 'cpu-duration', this.averageCpu );
+
+    if ( ! this.gl || ! this.ext ) return;
+
+
+    if ( this.queryCreated && this.gl.getQuery( this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY ) ) {
+
+      this.gl.endQuery( this.ext.TIME_ELAPSED_EXT );
+
+    }
+
+
+  }
+
+  endInternal() {
+
+    this.frames ++;
+    const time = ( performance || Date ).now();
+
+    if (time >= this.prevCpuTime + 1000 / this.logsPerSecond) {
+      this.updatePanel( this.msPanel, this.averageCpu );
+      this.updatePanel( this.gpuPanel, this.averageGpu );
+
+      this.prevCpuTime = time;
+    }
+
+    if ( time >= this.prevTime + 1000 ) {
+
+      const fps = ( this.frames * 1000 ) / ( time - this.prevTime );
+
+      this.fpsPanel.update(fps, fps, 100, 100, 0);
+
+      this.prevTime = time;
+      this.frames = 0;
+
+    }
+
+    return time;
+
+  }
+
+  addToAverage( value: number, averageArray: { logs: any; graph: any; } ) {
+
+    averageArray.logs.push( value );
+    if ( averageArray.logs.length > this.samplesLog ) {
+
+      averageArray.logs.shift();
+
+    }
+
+    averageArray.graph.push( value );
+    if ( averageArray.graph.length > this.samplesGraph ) {
+
+      averageArray.graph.shift();
+
+    }
+
+  }
+
+  beginProfiling( marker: string ) {
+
+    if ( window.performance ) {
+
+      window.performance.mark( marker );
+
+    }
+
+  }
+
+  endProfiling( startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string, averageArray: {logs: number[], graph: number[]} ) {
+
+    if ( window.performance && endMarker ) {
+
+      window.performance.mark( endMarker );
+      const cpuMeasure = performance.measure( measureName, startMarker, endMarker );
+      this.addToAverage( cpuMeasure.duration, averageArray );
+
+    }
+
+  }
+
+  updatePanel(panel: { update: any; } | null, averageArray: {logs: number[], graph: number[]}) {
+
+    if (averageArray.logs.length > 0) {
+
+      let sumLog = 0;
+      let max = 0.01;
+
+      for (let i = 0; i < averageArray.logs.length; i++) {
+
+        sumLog += averageArray.logs[i];
+
+        if (averageArray.logs[i] > max) {
+          max = averageArray.logs[i];
+        }
+
+      }
+
+      let sumGraph = 0;
+      let maxGraph = 0.01;
+      for (let i = 0; i < averageArray.graph.length; i++) {
+
+        sumGraph += averageArray.graph[i];
+
+        if (averageArray.graph[i] > maxGraph) {
+          maxGraph = averageArray.graph[i];
+        }
+
+      }
+
+      if (panel) {
+        panel.update(sumLog / Math.min(averageArray.logs.length,this.samplesLog), sumGraph / Math.min(averageArray.graph.length,this.samplesGraph), max, maxGraph, this.precision);
+      }
+
+    }
+  }
+
+
+}
+
+Stats.Panel = Panel
+
+export default Stats;

package/lib/panel.ts

@@ -0,0 +1,86 @@
+class Panel {
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D | null;
+    name: string;
+    fg: string;
+    bg: string;
+    PR: number;
+    WIDTH: number;
+    HEIGHT: number;
+    TEXT_X: number;
+    TEXT_Y: number;
+    GRAPH_X: number;
+    GRAPH_Y: number;
+    GRAPH_WIDTH: number;
+    GRAPH_HEIGHT: number;
+
+    constructor(name: string, fg: string, bg: string) {
+
+        this.name = name;
+        this.fg = fg;
+        this.bg = bg;
+        this.PR = Math.round( window.devicePixelRatio || 1 );
+        
+        this.WIDTH = 90 * this.PR;
+        this.HEIGHT = 48 * this.PR;
+        this.TEXT_X = 3 * this.PR;
+        this.TEXT_Y = 2 * this.PR;
+        this.GRAPH_X = 3 * this.PR;
+        this.GRAPH_Y = 15 * this.PR;
+        this.GRAPH_WIDTH = 84 * this.PR;
+        this.GRAPH_HEIGHT = 30 * this.PR;
+
+        this.canvas = document.createElement('canvas');
+        this.canvas.width = 90 * this.PR;
+        this.canvas.height = 48 * this.PR;
+        this.canvas.style.width = '90px';
+        this.canvas.style.height = '48px';
+        this.canvas.style.cssText = 'width:90px;height:48px';
+
+        this.context = this.canvas.getContext('2d');
+
+        if (this.context) {
+            this.context.font = 'bold ' + (9 * this.PR) + 'px Helvetica,Arial,sans-serif';
+            this.context.textBaseline = 'top';
+
+            this.context.fillStyle = this.bg;
+            this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
+
+            this.context.fillStyle = this.fg;
+            this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
+            this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
+
+            this.context.fillStyle = this.bg;
+            this.context.globalAlpha = 0.9;
+            this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
+        }
+
+    }
+
+    update(value: number, valueGraph: number, maxValue: number, maxGraph: number, decimals = 0) {
+        let min = Infinity, max = 0;
+
+        if (!this.context) return;
+
+        min = Math.min(min, value);
+        max = Math.max(maxValue, value);
+        maxGraph = Math.max(maxGraph, valueGraph);
+
+        this.context.fillStyle = this.bg;
+        this.context.globalAlpha = 1;
+        this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
+        this.context.fillStyle = this.fg;
+        this.context.fillText(value.toFixed(decimals) + ' ' + this.name + ' (' + min.toFixed(decimals) + '-' + parseFloat(max.toFixed(decimals)) + ')', this.TEXT_X, this.TEXT_Y);
+
+        this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT);
+
+        this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
+
+        this.context.fillStyle = this.bg;
+        this.context.globalAlpha = 0.9;
+
+        this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, ((1 - (valueGraph / maxGraph))) * this.GRAPH_HEIGHT);
+    }
+};
+
+export default Panel;

package/package.json

@@ -1,19 +1,31 @@
 {
   "name": "stats-gl",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "type": "module",
+  "author": "Renaud ROHLINGER (https://github.com/RenaudRohlinger)",
+  "homepage": "https://github.com/RenaudRohlinger/stats-gl",
+  "repository": "https://github.com/RenaudRohlinger/stats-gl",
+  "license": "MIT",
   "files": [
-    "dist"
+    "dist/*",
+    "lib/*"
   ],
-  "main": "./dist/stats-gl.umd.js",
-  "module": "./dist/stats-gl.js",
   "types": "./dist/stats-gl.d.ts",
+  "main": "./dist/main.js",
+  "module": "./dist/main.mjs",
   "exports": {
     ".": {
-      "import": "./dist/stats-gl.js",
-      "require": "./dist/stats-gl.umd.js"
+      "types": "./dist/main.d.ts",
+      "require": "./dist/main.js",
+      "import": "./dist/main.mjs"
+    },
+    "./panel": {
+      "types": "./dist/panel.d.ts",
+      "require": "./dist/panel.js",
+      "import": "./dist/panel.mjs"
     }
   },
+  "sideEffects": false,
   "scripts": {
     "dev": "vite demo",
     "serve": "vite serve demo",

package/dist/stats-gl.es.js

@@ -1,135 +0,0 @@
-var P = Object.defineProperty;
-var g = (o, t, i) => t in o ? P(o, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[t] = i;
-var s = (o, t, i) => (g(o, typeof t != "symbol" ? t + "" : t, i), i);
-class p {
-  constructor(t, i, h) {
-    s(this, "canvas");
-    s(this, "context");
-    s(this, "name");
-    s(this, "fg");
-    s(this, "bg");
-    s(this, "PR");
-    s(this, "WIDTH");
-    s(this, "HEIGHT");
-    s(this, "TEXT_X");
-    s(this, "TEXT_Y");
-    s(this, "GRAPH_X");
-    s(this, "GRAPH_Y");
-    s(this, "GRAPH_WIDTH");
-    s(this, "GRAPH_HEIGHT");
-    this.name = t, this.fg = i, this.bg = h, this.PR = Math.round(window.devicePixelRatio || 1), this.WIDTH = 90 * this.PR, this.HEIGHT = 48 * this.PR, this.TEXT_X = 3 * this.PR, this.TEXT_Y = 2 * this.PR, this.GRAPH_X = 3 * this.PR, this.GRAPH_Y = 15 * this.PR, this.GRAPH_WIDTH = 84 * this.PR, this.GRAPH_HEIGHT = 30 * this.PR, this.canvas = document.createElement("canvas"), this.canvas.width = 90 * this.PR, this.canvas.height = 48 * this.PR, this.canvas.style.width = "90px", this.canvas.style.height = "48px", this.canvas.style.cssText = "width:90px;height:48px", this.context = this.canvas.getContext("2d"), this.context && (this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif", this.context.textBaseline = "top", this.context.fillStyle = this.bg, this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT), this.context.fillStyle = this.fg, this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y), this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT), this.context.fillStyle = this.bg, this.context.globalAlpha = 0.9, this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT));
-  }
-  update(t, i, h, l, n = 0) {
-    let a = 1 / 0, e = 0;
-    this.context && (a = Math.min(a, t), e = Math.max(h, t), l = Math.max(l, i), this.context.fillStyle = this.bg, this.context.globalAlpha = 1, this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y), this.context.fillStyle = this.fg, this.context.fillText(t.toFixed(n) + " " + this.name + " (" + a.toFixed(n) + "-" + parseFloat(e.toFixed(n)) + ")", this.TEXT_X, this.TEXT_Y), this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT), this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT), this.context.fillStyle = this.bg, this.context.globalAlpha = 0.9, this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, parseFloat((1 - i / l).toFixed(n)) * this.GRAPH_HEIGHT));
-  }
-}
-const r = class r {
-  constructor({ logsPerSecond: t = 20, samplesLog: i = 100, samplesGraph: h = 10, precision: l = 2, minimal: n = !1, mode: a = 0 } = {}) {
-    s(this, "mode");
-    s(this, "container");
-    s(this, "minimal");
-    s(this, "beginTime");
-    s(this, "prevTime");
-    s(this, "prevCpuTime");
-    s(this, "frames");
-    s(this, "averageCpu");
-    s(this, "averageGpu");
-    s(this, "queryCreated");
-    s(this, "fpsPanel");
-    s(this, "msPanel");
-    s(this, "gpuPanel");
-    s(this, "samplesLog");
-    s(this, "samplesGraph");
-    s(this, "logsPerSecond");
-    s(this, "precision");
-    s(this, "canvasGpu");
-    s(this, "gl");
-    s(this, "ext");
-    s(this, "query");
-    s(this, "disjoint");
-    s(this, "ns");
-    this.mode = a, this.container = document.createElement("div"), this.container.style.cssText = "position:fixed;top:0;left:0;opacity:0.9;z-index:10000;", n && (this.container.style.cssText += "cursor:pointer"), this.canvasGpu = null, this.gl = null, this.query = null, this.minimal = n, this.beginTime = (performance || Date).now(), this.prevTime = this.beginTime, this.prevCpuTime = this.beginTime, this.frames = 0, this.averageCpu = {
-      logs: [],
-      graph: []
-    }, this.averageGpu = {
-      logs: [],
-      graph: []
-    }, this.queryCreated = !1, this.fpsPanel = this.addPanel(new r.Panel("FPS", "#0ff", "#002"), 0), this.msPanel = this.addPanel(new r.Panel("CPU", "#0f0", "#020"), 1), this.gpuPanel = null, this.samplesLog = i, this.samplesGraph = h, this.precision = l, this.logsPerSecond = t, this.minimal ? (this.container.addEventListener("click", (e) => {
-      e.preventDefault(), this.showPanel(++this.mode % this.container.children.length);
-    }, !1), this.mode = a, this.showPanel(this.mode)) : window.addEventListener("resize", () => {
-      this.resizePanel(this.fpsPanel, 0), this.resizePanel(this.msPanel, 1), this.gpuPanel && this.resizePanel(this.gpuPanel, 2);
-    });
-  }
-  resizePanel(t, i) {
-    this.minimal ? t.canvas.style.display = "none" : (t.canvas.style.display = "block", window.innerWidth < 700 ? (t.canvas.style.left = "0px", t.canvas.style.top = i * t.HEIGHT / t.PR + "px") : (t.canvas.style.top = "0px", t.canvas.style.left = i * t.WIDTH / t.PR + "px"));
-  }
-  addPanel(t, i) {
-    return t.canvas && (this.container.appendChild(t.canvas), this.resizePanel(t, i)), t;
-  }
-  showPanel(t) {
-    for (let i = 0; i < this.container.children.length; i++) {
-      const h = this.container.children[i];
-      h.style.display = i === t ? "block" : "none";
-    }
-    this.mode = t;
-  }
-  init(t) {
-    this.canvasGpu = t, this.canvasGpu && (this.gl = this.canvasGpu.getContext("webgl2"), this.ext = this.gl ? this.gl.getExtension("EXT_disjoint_timer_query_webgl2") : null, this.ext && (this.gpuPanel = this.addPanel(new r.Panel("GPU", "#ff0", "#220"), 2)));
-  }
-  begin() {
-    if (this.beginProfiling("cpu-started"), !(!this.gl || !this.ext)) {
-      if (this.query) {
-        const t = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT_AVAILABLE);
-        if (this.disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT), t && !this.disjoint) {
-          this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
-          const i = this.ns * 1e-6;
-          (t || this.disjoint) && (this.gl.deleteQuery(this.query), this.query = null), t && this.addToAverage(i, this.averageGpu);
-        }
-      }
-      this.query || (this.queryCreated = !0, this.query = this.gl.createQuery(), this.query && this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.query));
-    }
-  }
-  end() {
-    this.beginTime = this.endInternal(), this.endProfiling("cpu-started", "cpu-finished", "cpu-duration", this.averageCpu), !(!this.gl || !this.ext) && this.queryCreated && this.gl.getQuery(this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY) && this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
-  }
-  endInternal() {
-    this.frames++;
-    const t = (performance || Date).now();
-    if (t >= this.prevCpuTime + 1e3 / this.logsPerSecond && (this.updatePanel(this.msPanel, this.averageCpu), this.updatePanel(this.gpuPanel, this.averageGpu), this.prevCpuTime = t), t >= this.prevTime + 1e3) {
-      const i = this.frames * 1e3 / (t - this.prevTime);
-      this.fpsPanel.update(i, i, 100, 100, 0), this.prevTime = t, this.frames = 0;
-    }
-    return t;
-  }
-  addToAverage(t, i) {
-    i.logs.push(t), i.logs.length > this.samplesLog && i.logs.shift(), i.graph.push(t), i.graph.length > this.samplesGraph && i.graph.shift();
-  }
-  beginProfiling(t) {
-    window.performance && window.performance.mark(t);
-  }
-  endProfiling(t, i, h, l) {
-    if (window.performance && i) {
-      window.performance.mark(i);
-      const n = performance.measure(h, t, i);
-      this.addToAverage(n.duration, l);
-    }
-  }
-  updatePanel(t, i) {
-    if (i.logs.length > 0) {
-      let h = 0, l = 0.01;
-      for (let e = 0; e < i.logs.length; e++)
-        h += i.logs[e], i.logs[e] > l && (l = i.logs[e]);
-      let n = 0, a = 0.01;
-      for (let e = 0; e < i.graph.length; e++)
-        n += i.graph[e], i.graph[e] > a && (a = i.graph[e]);
-      t && t.update(h / Math.min(i.logs.length, this.samplesLog), n / Math.min(i.graph.length, this.samplesGraph), l, a, this.precision);
-    }
-  }
-};
-s(r, "Panel");
-let c = r;
-c.Panel = p;
-export {
-  c as default
-};

package/dist/stats-gl.umd.js

@@ -1 +0,0 @@
-(function(o,e){typeof exports=="object"&&typeof module<"u"?module.exports=e():typeof define=="function"&&define.amd?define(e):(o=typeof globalThis<"u"?globalThis:o||self,o["Stats-Gl"]=e())})(this,function(){"use strict";var P=Object.defineProperty;var p=(o,e,n)=>e in o?P(o,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):o[e]=n;var s=(o,e,n)=>(p(o,typeof e!="symbol"?e+"":e,n),n);class o{constructor(t,i,l){s(this,"canvas");s(this,"context");s(this,"name");s(this,"fg");s(this,"bg");s(this,"PR");s(this,"WIDTH");s(this,"HEIGHT");s(this,"TEXT_X");s(this,"TEXT_Y");s(this,"GRAPH_X");s(this,"GRAPH_Y");s(this,"GRAPH_WIDTH");s(this,"GRAPH_HEIGHT");this.name=t,this.fg=i,this.bg=l,this.PR=Math.round(window.devicePixelRatio||1),this.WIDTH=90*this.PR,this.HEIGHT=48*this.PR,this.TEXT_X=3*this.PR,this.TEXT_Y=2*this.PR,this.GRAPH_X=3*this.PR,this.GRAPH_Y=15*this.PR,this.GRAPH_WIDTH=84*this.PR,this.GRAPH_HEIGHT=30*this.PR,this.canvas=document.createElement("canvas"),this.canvas.width=90*this.PR,this.canvas.height=48*this.PR,this.canvas.style.width="90px",this.canvas.style.height="48px",this.canvas.style.cssText="width:90px;height:48px",this.context=this.canvas.getContext("2d"),this.context&&(this.context.font="bold "+9*this.PR+"px Helvetica,Arial,sans-serif",this.context.textBaseline="top",this.context.fillStyle=this.bg,this.context.fillRect(0,0,this.WIDTH,this.HEIGHT),this.context.fillStyle=this.fg,this.context.fillText(this.name,this.TEXT_X,this.TEXT_Y),this.context.fillRect(this.GRAPH_X,this.GRAPH_Y,this.GRAPH_WIDTH,this.GRAPH_HEIGHT),this.context.fillStyle=this.bg,this.context.globalAlpha=.9,this.context.fillRect(this.GRAPH_X,this.GRAPH_Y,this.GRAPH_WIDTH,this.GRAPH_HEIGHT))}update(t,i,l,r,a=0){let c=1/0,h=0;this.context&&(c=Math.min(c,t),h=Math.max(l,t),r=Math.max(r,i),this.context.fillStyle=this.bg,this.context.globalAlpha=1,this.context.fillRect(0,0,this.WIDTH,this.GRAPH_Y),this.context.fillStyle=this.fg,this.context.fillText(t.toFixed(a)+" "+this.name+" ("+c.toFixed(a)+"-"+parseFloat(h.toFixed(a))+")",this.TEXT_X,this.TEXT_Y),this.context.drawImage(this.canvas,this.GRAPH_X+this.PR,this.GRAPH_Y,this.GRAPH_WIDTH-this.PR,this.GRAPH_HEIGHT,this.GRAPH_X,this.GRAPH_Y,this.GRAPH_WIDTH-this.PR,this.GRAPH_HEIGHT),this.context.fillRect(this.GRAPH_X+this.GRAPH_WIDTH-this.PR,this.GRAPH_Y,this.PR,this.GRAPH_HEIGHT),this.context.fillStyle=this.bg,this.context.globalAlpha=.9,this.context.fillRect(this.GRAPH_X+this.GRAPH_WIDTH-this.PR,this.GRAPH_Y,this.PR,parseFloat((1-i/r).toFixed(a))*this.GRAPH_HEIGHT))}}const n=class n{constructor({logsPerSecond:t=20,samplesLog:i=100,samplesGraph:l=10,precision:r=2,minimal:a=!1,mode:c=0}={}){s(this,"mode");s(this,"container");s(this,"minimal");s(this,"beginTime");s(this,"prevTime");s(this,"prevCpuTime");s(this,"frames");s(this,"averageCpu");s(this,"averageGpu");s(this,"queryCreated");s(this,"fpsPanel");s(this,"msPanel");s(this,"gpuPanel");s(this,"samplesLog");s(this,"samplesGraph");s(this,"logsPerSecond");s(this,"precision");s(this,"canvasGpu");s(this,"gl");s(this,"ext");s(this,"query");s(this,"disjoint");s(this,"ns");this.mode=c,this.container=document.createElement("div"),this.container.style.cssText="position:fixed;top:0;left:0;opacity:0.9;z-index:10000;",a&&(this.container.style.cssText+="cursor:pointer"),this.canvasGpu=null,this.gl=null,this.query=null,this.minimal=a,this.beginTime=(performance||Date).now(),this.prevTime=this.beginTime,this.prevCpuTime=this.beginTime,this.frames=0,this.averageCpu={logs:[],graph:[]},this.averageGpu={logs:[],graph:[]},this.queryCreated=!1,this.fpsPanel=this.addPanel(new n.Panel("FPS","#0ff","#002"),0),this.msPanel=this.addPanel(new n.Panel("CPU","#0f0","#020"),1),this.gpuPanel=null,this.samplesLog=i,this.samplesGraph=l,this.precision=r,this.logsPerSecond=t,this.minimal?(this.container.addEventListener("click",h=>{h.preventDefault(),this.showPanel(++this.mode%this.container.children.length)},!1),this.mode=c,this.showPanel(this.mode)):window.addEventListener("resize",()=>{this.resizePanel(this.fpsPanel,0),this.resizePanel(this.msPanel,1),this.gpuPanel&&this.resizePanel(this.gpuPanel,2)})}resizePanel(t,i){this.minimal?t.canvas.style.display="none":(t.canvas.style.display="block",window.innerWidth<700?(t.canvas.style.left="0px",t.canvas.style.top=i*t.HEIGHT/t.PR+"px"):(t.canvas.style.top="0px",t.canvas.style.left=i*t.WIDTH/t.PR+"px"))}addPanel(t,i){return t.canvas&&(this.container.appendChild(t.canvas),this.resizePanel(t,i)),t}showPanel(t){for(let i=0;i<this.container.children.length;i++){const l=this.container.children[i];l.style.display=i===t?"block":"none"}this.mode=t}init(t){this.canvasGpu=t,this.canvasGpu&&(this.gl=this.canvasGpu.getContext("webgl2"),this.ext=this.gl?this.gl.getExtension("EXT_disjoint_timer_query_webgl2"):null,this.ext&&(this.gpuPanel=this.addPanel(new n.Panel("GPU","#ff0","#220"),2)))}begin(){if(this.beginProfiling("cpu-started"),!(!this.gl||!this.ext)){if(this.query){const t=this.gl.getQueryParameter(this.query,this.gl.QUERY_RESULT_AVAILABLE);if(this.disjoint=this.gl.getParameter(this.ext.GPU_DISJOINT_EXT),t&&!this.disjoint){this.ns=this.gl.getQueryParameter(this.query,this.gl.QUERY_RESULT);const i=this.ns*1e-6;(t||this.disjoint)&&(this.gl.deleteQuery(this.query),this.query=null),t&&this.addToAverage(i,this.averageGpu)}}this.query||(this.queryCreated=!0,this.query=this.gl.createQuery(),this.query&&this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT,this.query))}}end(){this.beginTime=this.endInternal(),this.endProfiling("cpu-started","cpu-finished","cpu-duration",this.averageCpu),!(!this.gl||!this.ext)&&this.queryCreated&&this.gl.getQuery(this.ext.TIME_ELAPSED_EXT,this.gl.CURRENT_QUERY)&&this.gl.endQuery(this.ext.TIME_ELAPSED_EXT)}endInternal(){this.frames++;const t=(performance||Date).now();if(t>=this.prevCpuTime+1e3/this.logsPerSecond&&(this.updatePanel(this.msPanel,this.averageCpu),this.updatePanel(this.gpuPanel,this.averageGpu),this.prevCpuTime=t),t>=this.prevTime+1e3){const i=this.frames*1e3/(t-this.prevTime);this.fpsPanel.update(i,i,100,100,0),this.prevTime=t,this.frames=0}return t}addToAverage(t,i){i.logs.push(t),i.logs.length>this.samplesLog&&i.logs.shift(),i.graph.push(t),i.graph.length>this.samplesGraph&&i.graph.shift()}beginProfiling(t){window.performance&&window.performance.mark(t)}endProfiling(t,i,l,r){if(window.performance&&i){window.performance.mark(i);const a=performance.measure(l,t,i);this.addToAverage(a.duration,r)}}updatePanel(t,i){if(i.logs.length>0){let l=0,r=.01;for(let h=0;h<i.logs.length;h++)l+=i.logs[h],i.logs[h]>r&&(r=i.logs[h]);let a=0,c=.01;for(let h=0;h<i.graph.length;h++)a+=i.graph[h],i.graph[h]>c&&(c=i.graph[h]);t&&t.update(l/Math.min(i.logs.length,this.samplesLog),a/Math.min(i.graph.length,this.samplesGraph),r,c,this.precision)}}};s(n,"Panel");let e=n;return e.Panel=o,e});