stats-gl 3.2.0 → 3.4.0

package/lib/main.ts

@@ -1,8 +1,11 @@
 import type * as THREE from 'three';
 import { Panel } from './panel';
+import { PanelVSync } from './panelVsync';
 
 interface StatsOptions {
   trackGPU?: boolean;
+  trackCPT?: boolean;
+  trackHz?: boolean;
   logsPerSecond?: number;
   graphsPerSecond?: number;
   samplesLog?: number;
@@ -22,6 +25,13 @@ interface AverageData {
   graph: number[];
 }
 
+
+interface VSyncInfo {
+  refreshRate: number;
+  frameTime: number;
+}
+
+
 interface InfoData {
   render: {
     timestamp: number;
@@ -37,6 +47,8 @@ class Stats {
   public horizontal: boolean;
   public minimal: boolean;
   public trackGPU: boolean;
+  public trackHz: boolean;
+  public trackCPT: boolean;
   public samplesLog: number;
   public samplesGraph: number;
   public precision: number;
@@ -55,16 +67,17 @@ class Stats {
   private frameTimes: number[] = [];  // Store frame timestamps
 
   private renderCount = 0;
-  private isRunningCPUProfiling = false;
 
   private totalCpuDuration = 0;
   private totalGpuDuration = 0;
   private totalGpuDurationCompute = 0;
 
+  private _panelId: number;
   private fpsPanel: Panel;
   private msPanel: Panel;
   private gpuPanel: Panel | null = null;
   private gpuPanelCompute: Panel | null = null;
+  private vsyncPanel: PanelVSync | null = null;
 
   public averageFps: AverageData = { logs: [], graph: [] };
   public averageCpu: AverageData = { logs: [], graph: [] };
@@ -78,11 +91,29 @@ class Stats {
   private lastValue: { [key: string]: number } = {};
   private prevTextTime: number;
 
+  private readonly VSYNC_RATES: VSyncInfo[] = [
+    { refreshRate: 60, frameTime: 16.67 },
+    { refreshRate: 75, frameTime: 13.33 },
+    { refreshRate: 90, frameTime: 11.11 },
+    { refreshRate: 120, frameTime: 8.33 },
+    { refreshRate: 144, frameTime: 6.94 },
+    { refreshRate: 165, frameTime: 6.06 },
+    { refreshRate: 240, frameTime: 4.17 }
+  ];
+  private detectedVSync: VSyncInfo | null = null;
+  private frameTimeHistory: number[] = [];
+  private readonly HISTORY_SIZE = 120; // 2 seconds worth of frames at 60fps
+  private readonly VSYNC_THRESHOLD = 0.05; // 5% tolerance
+  private lastFrameTime: number = 0;
+
+
 
   static Panel = Panel;
 
   constructor({
     trackGPU = false,
+    trackCPT = false,
+    trackHz = false,
     logsPerSecond = 4,
     graphsPerSecond = 30,
     samplesLog = 40,
@@ -96,6 +127,8 @@ class Stats {
     this.horizontal = horizontal;
     this.minimal = minimal;
     this.trackGPU = trackGPU;
+    this.trackCPT = trackCPT;
+    this.trackHz = trackHz;
     this.samplesLog = samplesLog;
     this.samplesGraph = samplesGraph;
     this.precision = precision;
@@ -114,9 +147,16 @@ class Stats {
 
     this.prevCpuTime = this.beginTime;
 
+    this._panelId = 0
     // Create panels
-    this.fpsPanel = this.addPanel(new Stats.Panel('FPS', '#0ff', '#002'), 0);
-    this.msPanel = this.addPanel(new Stats.Panel('CPU', '#0f0', '#020'), 1);
+    this.fpsPanel = this.addPanel(new Stats.Panel('FPS', '#0ff', '#002'));
+    this.msPanel = this.addPanel(new Stats.Panel('CPU', '#0f0', '#020'));
+
+    if (this.trackHz === true) {
+      this.vsyncPanel = new PanelVSync('', '#f0f', '#202');
+      this.dom.appendChild(this.vsyncPanel.canvas);
+      this.vsyncPanel.setOffset(56, 35);
+    }
 
     this.setupEventListeners();
   }
@@ -148,10 +188,10 @@ class Stats {
   };
 
   private handleResize = (): void => {
-    this.resizePanel(this.fpsPanel, 0);
-    this.resizePanel(this.msPanel, 1);
-    if (this.gpuPanel) this.resizePanel(this.gpuPanel, 2);
-    if (this.gpuPanelCompute) this.resizePanel(this.gpuPanelCompute, 3);
+    this.resizePanel(this.fpsPanel);
+    this.resizePanel(this.msPanel);
+    if (this.gpuPanel) this.resizePanel(this.gpuPanel);
+    if (this.gpuPanelCompute) this.resizePanel(this.gpuPanelCompute);
   };
 
   public async init(
@@ -190,24 +230,26 @@ class Stats {
 
   private async handleWebGPURenderer(renderer: any): Promise<boolean> {
     if (renderer.isWebGPURenderer) {
-      if (this.trackGPU) {
+      if (this.trackGPU || this.trackCPT) {
         renderer.backend.trackTimestamp = true;
         if (await renderer.hasFeatureAsync('timestamp-query')) {
           this.initializeWebGPUPanels();
         }
       }
       this.info = renderer.info;
+      this.patchThreeWebGPU(renderer);
       return true;
     }
     return false;
   }
 
   private initializeWebGPUPanels(): void {
-    this.gpuPanel = this.addPanel(new Stats.Panel('GPU', '#ff0', '#220'), 2);
-    this.gpuPanelCompute = this.addPanel(
-      new Stats.Panel('CPT', '#e1e1e1', '#212121'),
-      3
-    );
+    if (this.trackGPU) {
+      this.gpuPanel = this.addPanel(new Stats.Panel('GPU', '#ff0', '#220'));
+    }
+    if (this.trackCPT) {
+      this.gpuPanelCompute = this.addPanel(new Stats.Panel('CPT', '#e1e1e1', '#212121'));
+    }
   }
 
   private initializeWebGL(
@@ -237,15 +279,13 @@ class Stats {
     if (this.gl) {
       this.ext = this.gl.getExtension('EXT_disjoint_timer_query_webgl2');
       if (this.ext) {
-        this.gpuPanel = this.addPanel(new Stats.Panel('GPU', '#ff0', '#220'), 2);
+        this.gpuPanel = this.addPanel(new Stats.Panel('GPU', '#ff0', '#220'));
       }
     }
   }
 
   public begin(): void {
-    if (!this.isRunningCPUProfiling) {
-      this.beginProfiling('cpu-started');
-    }
+    this.beginProfiling('cpu-started');
 
     if (!this.gl || !this.ext) return;
 
@@ -266,15 +306,14 @@ class Stats {
       this.gpuQueries.push({ query: this.activeQuery });
       this.activeQuery = null;
     }
+
+    this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration');
   }
 
   public update(): void {
-    // Always end the current CPU profiling if it's running
-    if (this.isRunningCPUProfiling) {
-      this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration');
-      // Add to averages immediately after getting the duration
-      // this.addToAverage(this.totalCpuDuration, this.averageCpu);
-    }
+
+
+    this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration');
 
     if (!this.info) {
       this.processGpuQueries();
@@ -294,11 +333,10 @@ class Stats {
   private resetCounters(): void {
     this.renderCount = 0;
     this.totalCpuDuration = 0;
-    this.beginProfiling('cpu-started');
     this.beginTime = this.endInternal();
   }
 
-  resizePanel(panel: Panel, offset: number) {
+  resizePanel(panel: Panel) {
 
     panel.canvas.style.position = 'absolute';
 
@@ -311,23 +349,24 @@ class Stats {
       panel.canvas.style.display = 'block';
       if (this.horizontal) {
         panel.canvas.style.top = '0px';
-        panel.canvas.style.left = offset * panel.WIDTH / panel.PR + 'px';
+        panel.canvas.style.left = panel.id * panel.WIDTH / panel.PR + 'px';
       } else {
         panel.canvas.style.left = '0px';
-        panel.canvas.style.top = offset * panel.HEIGHT / panel.PR + 'px';
+        panel.canvas.style.top = panel.id * panel.HEIGHT / panel.PR + 'px';
 
       }
     }
 
   }
-  addPanel(panel: Panel, offset: number) {
+  addPanel(panel: Panel) {
 
     if (panel.canvas) {
 
       this.dom.appendChild(panel.canvas);
+      panel.id = this._panelId;
+      this.resizePanel(panel);
 
-      this.resizePanel(panel, offset);
-
+      this._panelId++;
     }
 
     return panel;
@@ -369,6 +408,58 @@ class Stats {
       }
     });
 
+  }
+  private detectVSync(currentTime: number): void {
+    if (this.lastFrameTime === 0) {
+      this.lastFrameTime = currentTime;
+      return;
+    }
+
+    // Calculate frame time
+    const frameTime = currentTime - this.lastFrameTime;
+    this.lastFrameTime = currentTime;
+
+    // Add to histories
+    this.frameTimeHistory.push(frameTime);
+    if (this.frameTimeHistory.length > this.HISTORY_SIZE) {
+      this.frameTimeHistory.shift();
+    }
+
+    // Only start detection when we have enough samples
+    if (this.frameTimeHistory.length < 60) return;
+
+    // Calculate average frame time
+    const avgFrameTime = this.frameTimeHistory.reduce((a, b) => a + b) / this.frameTimeHistory.length;
+
+    // Calculate frame time stability (standard deviation)
+    const variance = this.frameTimeHistory.reduce((acc, time) =>
+      acc + Math.pow(time - avgFrameTime, 2), 0) / this.frameTimeHistory.length;
+    const stability = Math.sqrt(variance);
+
+    // Only proceed if frame timing is relatively stable
+    if (stability > 2) { // 2ms stability threshold
+      this.detectedVSync = null;
+      return;
+    }
+
+    // Find the closest VSync rate based on frame time
+    let closestMatch: VSyncInfo | null = null;
+    let smallestDiff = Infinity;
+
+    for (const rate of this.VSYNC_RATES) {
+      const diff = Math.abs(avgFrameTime - rate.frameTime);
+      if (diff < smallestDiff) {
+        smallestDiff = diff;
+        closestMatch = rate;
+      }
+    }
+
+    if (closestMatch && (smallestDiff / closestMatch.frameTime <= this.VSYNC_THRESHOLD)) {
+      this.detectedVSync = closestMatch;
+    } else {
+      this.detectedVSync = null;
+    }
+
   }
 
   endInternal() {
@@ -394,7 +485,7 @@ class Stats {
     if (this.gpuPanel) {
       this.updatePanelComponents(this.gpuPanel, this.averageGpu, this.precision, shouldUpdateText, shouldUpdateGraph);
     }
-    if (this.gpuPanelCompute) {
+    if (this.trackCPT && this.gpuPanelCompute) {
       this.updatePanelComponents(this.gpuPanelCompute, this.averageGpuCompute, this.precision, shouldUpdateText, shouldUpdateGraph);
     }
 
@@ -405,6 +496,16 @@ class Stats {
       this.prevGraphTime = currentTime;
     }
 
+    if (this.vsyncPanel !== null) {
+      this.detectVSync(currentTime);
+
+      const vsyncValue = this.detectedVSync?.refreshRate || 0;
+
+      if (shouldUpdateText && vsyncValue > 0) {
+        this.vsyncPanel.update(vsyncValue, vsyncValue);
+      }
+    }
+
     return currentTime;
   }
 
@@ -462,7 +563,6 @@ class Stats {
     if (window.performance) {
 
       window.performance.mark(marker);
-      this.isRunningCPUProfiling = true
 
     }
 
@@ -470,12 +570,11 @@ class Stats {
 
   endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string) {
 
-    if (window.performance && endMarker && this.isRunningCPUProfiling) {
+    if (window.performance && endMarker) {
 
       window.performance.mark(endMarker);
       const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
       this.totalCpuDuration += cpuMeasure.duration;
-      this.isRunningCPUProfiling = false
 
     }
 
@@ -539,6 +638,7 @@ class Stats {
   }
 
   private updateAverages(): void {
+
     this.addToAverage(this.totalCpuDuration, this.averageCpu);
     this.addToAverage(this.totalGpuDuration, this.averageGpu);
     // Add GPU Compute to the main update flow
@@ -549,7 +649,7 @@ class Stats {
 
   addToAverage(value: number, averageArray: { logs: any; graph: any; }) {
     // Validate value
-    // if (value === undefined || value === null || isNaN(value)) {
+    // if (value === undefined || value === null || isNaN(value) || value === 0) {
     //   return;
     // }
 
@@ -572,6 +672,22 @@ class Stats {
 
   }
 
+  patchThreeWebGPU(renderer: any) {
+
+    const originalAnimationLoop = renderer.info.reset
+
+    const statsInstance = this;
+
+    renderer.info.reset = function () {
+
+      statsInstance.beginProfiling('cpu-started');
+
+      originalAnimationLoop.call(this);
+
+    }
+
+  }
+
   patchThreeRenderer(renderer: any) {
 
     // Store the original render method
@@ -583,13 +699,13 @@ class Stats {
     // Override the render method on the prototype
     renderer.render = function (scene: THREE.Scene, camera: THREE.Camera) {
 
-
       statsInstance.begin(); // Start tracking for this render call
 
       // Call the original render method
       originalRenderMethod.call(this, scene, camera);
 
       statsInstance.end(); // End tracking for this render call
+
     };
 
 

package/lib/panel.ts

@@ -5,6 +5,7 @@ class Panel {
     fg: string;
     bg: string;
     gradient: CanvasGradient | null;
+    id: number = 0;
     PR: number;
     WIDTH: number;
     HEIGHT: number;
@@ -81,7 +82,7 @@ class Panel {
         return gradient;
     }
 
-    private initializeCanvas() {
+    public initializeCanvas() {
         if (!this.context) return;
 
         this.context.imageSmoothingEnabled = false;
@@ -104,7 +105,7 @@ class Panel {
     }
 
     // Update only text portion
-    update(value: number, maxValue: number, decimals: number = 0) {
+    public update(value: number, maxValue: number, decimals: number = 0) {
         if (!this.context || !this.gradient) return;
 
         const min = Math.min(Infinity, value);
@@ -125,7 +126,7 @@ class Panel {
     }
 
     // Update only graph portion
-    updateGraph(valueGraph: number, maxGraph: number) {
+    public updateGraph(valueGraph: number, maxGraph: number) {
         if (!this.context || !this.gradient) return;
 
         // Handle zero values appropriately

package/lib/panelVsync.ts

@@ -0,0 +1,74 @@
+import { Panel } from './panel';
+
+class PanelVSync extends Panel {
+    private readonly SMALL_HEIGHT: number;
+    private vsyncValue: number = 0;
+
+    constructor(name: string, fg: string, bg: string) {
+        super(name, fg, bg);
+
+        // Redefine dimensions for a smaller panel
+        this.SMALL_HEIGHT = 9 * this.PR; // Smaller height
+        this.HEIGHT = this.SMALL_HEIGHT;
+        this.TEXT_Y = 0 * this.PR; // Adjust text position
+
+        // Resize the canvas
+        this.canvas.height = this.HEIGHT;
+        this.canvas.style.height = '9px'; // Match the new height
+
+        // Style for overlay positioning
+        this.canvas.style.cssText = `
+            width: 90px;
+            height: 9px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            pointer-events: none; // Allow clicks to pass through
+        `;
+
+        // Reinitialize with new dimensions
+        this.initializeCanvas();
+    }
+
+    public initializeCanvas() {
+        if (!this.context) return;
+
+        this.context.imageSmoothingEnabled = false;
+
+        // Larger font for better visibility
+        this.context.font = 'bold ' + (9 * this.PR) + 'px Helvetica,Arial,sans-serif';
+        this.context.textBaseline = 'top';
+
+        this.context.globalAlpha = 1;
+    }
+
+    // Override update for VSync-specific display
+    public update(value: number, _maxValue: number, _decimals: number = 0) {
+        if (!this.context) return;
+
+        this.vsyncValue = value;
+
+        this.context.clearRect(0, 0, this.WIDTH, this.HEIGHT);
+        // Draw VSync text
+        this.context.globalAlpha = 1;
+        this.context.fillStyle = this.bg;
+        this.context.fillText(
+            `${value.toFixed(0)}Hz`,
+            this.TEXT_X,
+            this.TEXT_Y
+        );
+    }
+
+    // Override updateGraph to do nothing (we don't need a graph for VSync)
+    public updateGraph(_valueGraph: number, _maxGraph: number) {
+        // No graph needed for VSync display
+        return;
+    }
+
+    // Method to set the offset position relative to parent panel
+    public setOffset(x: number, y: number) {
+        this.canvas.style.transform = `translate(${x}px, ${y}px)`;
+    }
+}
+
+export { PanelVSync };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stats-gl",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "type": "module",
   "author": "Renaud ROHLINGER (https://github.com/RenaudRohlinger)",
   "homepage": "https://github.com/RenaudRohlinger/stats-gl",