stats-gl 2.2.8 → 2.3.0

package/lib/main.ts

@@ -1,156 +1,287 @@
-import Panel from "./panel";
 import * as THREE from 'three';
-export interface AverageArray {
+import { Panel } from './panel';
+
+interface StatsOptions {
+  trackGPU?: boolean;
+  logsPerSecond?: number;
+  samplesLog?: number;
+  samplesGraph?: number;
+  precision?: number;
+  minimal?: boolean;
+  horizontal?: boolean;
+  mode?: number;
+}
+
+interface QueryInfo {
+  query: WebGLQuery;
+}
+
+interface AverageData {
   logs: number[];
   graph: number[];
 }
 
+interface InfoData {
+  render: {
+    timestamp: number;
+  };
+  compute: {
+    timestamp: number;
+  };
+}
 
 class Stats {
-  totalCpuDuration: number = 0;
-  totalGpuDuration: number = 0;
-  totalGpuDurationCompute: number = 0;
-  totalFps: number = 0;
-  mode: number;
-  info: any;
-  dom: HTMLDivElement;
-  minimal: boolean;
-  horizontal: boolean;
-  beginTime: number;
-  prevTime: number;
-  prevCpuTime: number;
-  frames: number;
-  averageCpu: AverageArray;
-  averageGpu: AverageArray;
-  averageGpuCompute: AverageArray;
-  queryCreated: boolean;
-  isRunningCPUProfiling: boolean;
-  fpsPanel: Panel;
-  static Panel: typeof Panel = Panel;
-  msPanel: Panel;
-  gpuPanel: Panel | null;
-  gpuPanelCompute: Panel | null;
-  samplesLog: number;
-  samplesGraph: number;
-  logsPerSecond: number;
-  activeQuery: WebGLQuery | null = null;
-
-  precision: number;
-  gl: WebGL2RenderingContext | null;
-  ext: any;
-  query: WebGLQuery | null;
-  disjoint: any;
-  ns: any;
-  threeRendererPatched: boolean;
-  gpuQueries: { query: WebGLQuery }[] = [];
-  renderCount: number = 0;
-
-  constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, horizontal = true, mode = 0 } = {}) {
-
+  private dom: HTMLDivElement;
+  private mode: number;
+  private horizontal: boolean;
+  private minimal: boolean;
+  private trackGPU: boolean;
+  private samplesLog: number;
+  private samplesGraph: number;
+  private precision: number;
+  private logsPerSecond: number;
+
+  private gl: WebGL2RenderingContext | null = null;
+  private ext: any | null = null;
+  private info?: InfoData;
+  private activeQuery: WebGLQuery | null = null;
+  private gpuQueries: QueryInfo[] = [];
+  private threeRendererPatched = false;
+
+  private beginTime: number;
+  private prevTime: number;
+  private prevCpuTime: number;
+  private frames = 0;
+  private renderCount = 0;
+  private isRunningCPUProfiling = false;
+
+  private totalCpuDuration = 0;
+  private totalGpuDuration = 0;
+  private totalGpuDurationCompute = 0;
+  private totalFps = 0;
+
+  private fpsPanel: Panel;
+  private msPanel: Panel;
+  private gpuPanel: Panel | null = null;
+  private gpuPanelCompute: Panel | null = null;
+
+  private averageCpu: AverageData = { logs: [], graph: [] };
+  private averageGpu: AverageData = { logs: [], graph: [] };
+  private averageGpuCompute: AverageData = { logs: [], graph: [] };
+
+  static Panel = Panel;
+
+  constructor({
+    trackGPU = false,
+    logsPerSecond = 20,
+    samplesLog = 100,
+    samplesGraph = 10,
+    precision = 2,
+    minimal = false,
+    horizontal = true,
+    mode = 0
+  }: StatsOptions = {}) {
     this.mode = mode;
     this.horizontal = horizontal;
-    this.dom = document.createElement('div');
-    this.dom.style.cssText = 'position:fixed;top:0;left:0;opacity:0.9;z-index:10000;';
-
-    if (minimal) {
-
-      this.dom.style.cssText += 'cursor:pointer';
-
-    }
-
-    this.gl = null;
-    this.query = null;
-
-    this.isRunningCPUProfiling = false;
     this.minimal = minimal;
+    this.trackGPU = trackGPU;
+    console.log('trackGPU', trackGPU);
+    this.samplesLog = samplesLog;
+    this.samplesGraph = samplesGraph;
+    this.precision = precision;
+    this.logsPerSecond = logsPerSecond;
 
-    this.beginTime = (performance || Date).now();
+    // Initialize DOM
+    this.dom = document.createElement('div');
+    this.initializeDOM();
+
+    // Initialize timing
+    this.beginTime = performance.now();
     this.prevTime = this.beginTime;
     this.prevCpuTime = this.beginTime;
-    this.frames = 0;
-    this.renderCount = 0;
-    this.threeRendererPatched = false;
-    this.averageCpu = {
-      logs: [],
-      graph: []
-    };
-    this.averageGpu = {
-      logs: [],
-      graph: []
-    };
-    this.averageGpuCompute = {
-      logs: [],
-      graph: []
-    };
-
-    this.queryCreated = false;
 
+    // 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.gpuPanel = null;
-    this.gpuPanelCompute = null;
-
-    this.samplesLog = samplesLog;
-    this.samplesGraph = samplesGraph;
-    this.precision = precision;
-    this.logsPerSecond = logsPerSecond;
 
-    if (this.minimal) {
+    this.setupEventListeners();
+  }
 
-      this.dom.addEventListener('click', (event) => {
+  private initializeDOM(): void {
+    this.dom.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      opacity: 0.9;
+      z-index: 10000;
+      ${this.minimal ? 'cursor: pointer;' : ''}
+    `;
+  }
 
-        event.preventDefault();
-        this.showPanel(++this.mode % this.dom.children.length);
+  private setupEventListeners(): void {
+    if (this.minimal) {
+      this.dom.addEventListener('click', this.handleClick);
+      this.showPanel(this.mode);
+    } else {
+      window.addEventListener('resize', this.handleResize);
+    }
+  }
 
-      }, false);
+  private handleClick = (event: MouseEvent): void => {
+    event.preventDefault();
+    this.showPanel(++this.mode % this.dom.children.length);
+  };
+
+  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);
+  };
+
+  public async init(
+    canvasOrGL: WebGL2RenderingContext | HTMLCanvasElement | OffscreenCanvas | any
+  ): Promise<void> {
+    if (!canvasOrGL) {
+      console.error('Stats: The "canvas" parameter is undefined.');
+      return;
+    }
 
-      this.mode = mode;
-      this.showPanel(this.mode);
+    if (this.handleThreeRenderer(canvasOrGL)) return;
+    if (await this.handleWebGPURenderer(canvasOrGL)) return;
+    if (!this.initializeWebGL(canvasOrGL)) return;
 
-    } else {
+  }
 
-      window.addEventListener('resize', () => {
+  private handleThreeRenderer(renderer: any): boolean {
+    if (renderer.isWebGLRenderer && !this.threeRendererPatched) {
+      this.patchThreeRenderer(renderer);
+      this.gl = renderer.getContext();
 
-        this.resizePanel(this.fpsPanel, 0);
-        this.resizePanel(this.msPanel, 1);
+      if (this.trackGPU) {
+        this.initializeGPUTracking();
+      }
+      return true;
+    }
+    return false;
+  }
 
-        if (this.gpuPanel) {
-          this.resizePanel(this.gpuPanel, 2);
-        }
-        if (this.gpuPanelCompute) {
-          this.resizePanel(this.gpuPanelCompute, 3);
+  private async handleWebGPURenderer(renderer: any): Promise<boolean> {
+    console.log('renderer', renderer);
+    if (renderer.isWebGPURenderer) {
+      if (this.trackGPU) {
+        console.log('trackGPU', this.trackGPU);
+        renderer.backend.trackTimestamp = true;
+        if (await renderer.hasFeatureAsync('timestamp-query')) {
+          this.initializeWebGPUPanels();
         }
-      })
+      }
+      this.info = renderer.info;
+      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
+    );
+  }
 
+  private initializeWebGL(
+    canvasOrGL: WebGL2RenderingContext | HTMLCanvasElement | OffscreenCanvas
+  ): boolean {
+    if (canvasOrGL instanceof WebGL2RenderingContext) {
+      this.gl = canvasOrGL;
+    } else if (
+      canvasOrGL instanceof HTMLCanvasElement ||
+      canvasOrGL instanceof OffscreenCanvas
+    ) {
+      this.gl = canvasOrGL.getContext('webgl2');
+      if (!this.gl) {
+        console.error('Stats: Unable to obtain WebGL2 context.');
+        return false;
+      }
+    } else {
+      console.error(
+        'Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas.'
+      );
+      return false;
+    }
+    return true;
   }
 
-  patchThreeRenderer(renderer: any) {
+  private initializeGPUTracking(): void {
+    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);
+      }
+    }
+  }
 
-    // Store the original render method
-    const originalRenderMethod = renderer.render;
+  public begin(): void {
+    if (!this.isRunningCPUProfiling) {
+      this.beginProfiling('cpu-started');
+    }
 
-    // Reference to the stats instance
-    const statsInstance = this;
+    if (!this.gl || !this.ext) return;
 
-    // Override the render method on the prototype
-    renderer.render = function (scene: THREE.Scene, camera: THREE.Camera) {
+    if (this.activeQuery) {
+      this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
+    }
 
+    this.activeQuery = this.gl.createQuery();
+    if (this.activeQuery) {
+      this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.activeQuery);
+    }
+  }
 
-      statsInstance.begin(); // Start tracking for this render call
+  public end(): void {
+    this.renderCount++;
+    if (this.gl && this.ext && this.activeQuery) {
+      this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
+      this.gpuQueries.push({ query: this.activeQuery });
+      this.activeQuery = null;
+    }
+  }
 
-      // Call the original render method
-      originalRenderMethod.call(this, scene, camera);
+  public update(): void {
+    if (!this.info) {
+      this.processGpuQueries();
+    } else {
+      this.processWebGPUTimestamps();
+    }
 
-      statsInstance.end(); // End tracking for this render call
-    };
+    this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration');
+    this.updateAverages();
+    this.resetCounters();
+  }
 
+  private processWebGPUTimestamps(): void {
+    this.totalGpuDuration = this.info!.render.timestamp;
+    this.totalGpuDurationCompute = this.info!.compute.timestamp;
+    this.addToAverage(this.totalGpuDurationCompute, this.averageGpuCompute);
+  }
 
-    this.threeRendererPatched = true;
+  private updateAverages(): void {
+    this.addToAverage(this.totalCpuDuration, this.averageCpu);
+    this.addToAverage(this.totalGpuDuration, this.averageGpu);
+  }
 
+  private resetCounters(): void {
+    this.renderCount = 0;
+    if (this.totalCpuDuration === 0) {
+      this.beginProfiling('cpu-started');
+    }
+    this.totalCpuDuration = 0;
+    this.totalFps = 0;
+    this.beginTime = this.endInternal();
   }
 
+
   resizePanel(panel: Panel, offset: number) {
 
     panel.canvas.style.position = 'absolute';
@@ -171,8 +302,8 @@ class Stats {
 
       }
     }
-  }
 
+  }
   addPanel(panel: Panel, offset: number) {
 
     if (panel.canvas) {
@@ -200,98 +331,6 @@ class Stats {
 
   }
 
-  async init(canvasOrGL: any) {
-    if (!canvasOrGL) {
-      console.error('Stats: The "canvas" parameter is undefined.');
-      return;
-    }
-
-
-    // if ((canvasOrGL as any).isWebGPURenderer && !this.threeRendererPatched) {
-    // TODO Color GPU Analytic in another color than yellow to know webgpu or webgl context (blue)
-    //   const canvas: any = canvasOrGL
-    //   this.patchThreeRenderer(canvas as any);
-    //   this.gl = canvas.getContext();
-    // } else 
-    if ((canvasOrGL as any).isWebGLRenderer && !this.threeRendererPatched) {
-      const canvas: any = canvasOrGL
-      this.patchThreeRenderer(canvas as any);
-      this.gl = canvas.getContext();
-    } else if (!this.gl && canvasOrGL instanceof WebGL2RenderingContext) {
-      this.gl = canvasOrGL;
-    }
-
-    if (canvasOrGL.isWebGPURenderer) {
-
-      canvasOrGL.backend.trackTimestamp = true
-
-      if (await canvasOrGL.hasFeatureAsync('timestamp-query')) {
-        this.gpuPanel = this.addPanel(new Stats.Panel('GPU', '#ff0', '#220'), 2);
-        this.gpuPanelCompute = this.addPanel(new Stats.Panel('CPT', '#e1e1e1', '#212121'), 3);
-        this.info = canvasOrGL.info
-      }
-      return;
-    }
-    // Check if canvasOrGL is already a WebGL2RenderingContext
-
-
-    // Handle HTMLCanvasElement and OffscreenCanvas
-    else if (!this.gl && canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
-      this.gl = canvasOrGL.getContext('webgl2') as WebGL2RenderingContext;
-      if (!this.gl) {
-        console.error('Stats: Unable to obtain WebGL2 context.');
-        return;
-      }
-    } else if (!this.gl) {
-      console.error('Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas.');
-      return;
-    }
-
-    // Get the extension
-    this.ext = this.gl.getExtension('EXT_disjoint_timer_query_webgl2');
-    if (this.ext) {
-      this.gpuPanel = this.addPanel(new Stats.Panel('GPU', '#ff0', '#220'), 2);
-    }
-  }
-
-
-  begin() {
-
-    if (!this.isRunningCPUProfiling) {
-      this.beginProfiling('cpu-started');
-    }
-
-    if (!this.gl || !this.ext) return;
-
-    if (this.gl && this.ext) {
-      if (this.activeQuery) {
-        // End the previous query if it's still active
-        this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
-      }
-
-      this.activeQuery = this.gl.createQuery();
-      if (this.activeQuery !== null) {
-        this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.activeQuery);
-      }
-    }
-  }
-
-
-
-  end() {
-
-    // Increase render count
-    this.renderCount++;
-
-    if (this.gl && this.ext && this.activeQuery) {
-      this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
-      // Add the active query to the gpuQueries array and reset it
-      this.gpuQueries.push({ query: this.activeQuery });
-      this.activeQuery = null;
-    }
-
-  }
-
   processGpuQueries() {
 
 
@@ -316,39 +355,6 @@ class Stats {
 
   }
 
-  update() {
-
-    if (this.info === undefined) {
-      this.processGpuQueries();
-    } else {
-
-      this.totalGpuDuration = this.info.render.timestamp
-      this.totalGpuDurationCompute = this.info.compute.timestamp
-      this.addToAverage(this.totalGpuDurationCompute, this.averageGpuCompute);
-
-    }
-
-    this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration');
-
-    // Calculate the total duration of CPU and GPU work for this frame
-    this.addToAverage(this.totalCpuDuration, this.averageCpu);
-    this.addToAverage(this.totalGpuDuration, this.averageGpu);
-
-    this.renderCount = 0;
-
-    // If this.totalCpuDuration is 0, it means that the CPU query was not created and stats.begin() never called/overrided
-    if (this.totalCpuDuration === 0) {
-      this.beginProfiling('cpu-started');
-    }
-
-    this.totalCpuDuration = 0;
-
-    this.totalFps = 0;
-
-    this.beginTime = this.endInternal()
-
-  }
-
   endInternal() {
 
     this.frames++;
@@ -464,13 +470,30 @@ class Stats {
 
   }
 
-  get container() { // @deprecated
+  patchThreeRenderer(renderer: any) {
 
-    console.warn('Stats: Deprecated! this.container as been replaced to this.dom ')
-    return this.dom;
+    // Store the original render method
+    const originalRenderMethod = renderer.render;
 
-  }
+    // Reference to the stats instance
+    const statsInstance = this;
+
+    // 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
+    };
+
+
+    this.threeRendererPatched = true;
+
+  }
 }
 
 

package/lib/panel.ts

@@ -19,8 +19,8 @@ class Panel {
         this.name = name;
         this.fg = fg;
         this.bg = bg;
-        this.PR = Math.round( window.devicePixelRatio || 1 );
-        
+        this.PR = Math.round(window.devicePixelRatio || 1);
+
         this.WIDTH = 90 * this.PR;
         this.HEIGHT = 48 * this.PR;
         this.TEXT_X = 3 * this.PR;
@@ -84,4 +84,4 @@ class Panel {
     }
 };
 
-export default Panel;
+export { Panel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stats-gl",
-  "version": "2.2.8",
+  "version": "2.3.0",
   "type": "module",
   "author": "Renaud ROHLINGER (https://github.com/RenaudRohlinger)",
   "homepage": "https://github.com/RenaudRohlinger/stats-gl",
@@ -14,7 +14,7 @@
   "main": "./dist/main.cjs",
   "module": "./dist/main.js",
   "exports": {
-    ".": {
+  ".": {
       "types": "./dist/stats-gl.d.ts",
       "require": "./dist/main.cjs",
       "import": "./dist/main.js"
@@ -28,15 +28,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@types/three": "^0.163.0"
+    "@types/three": "*",
+    "three": "^0.170.0"
   },
   "devDependencies": {
-    "fs-extra": "^11.1.1",
+    "fs-extra": "^11.2.0",
     "path": "^0.12.7",
-    "rollup": "^4.12.1",
-    "rollup-plugin-dts": "^5.3.0",
-    "three": "^0.163.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.5.2"
+    "rollup": "^4.24.3",
+    "rollup-plugin-dts": "^5.3.1",
+    "typescript": "^5.6.3",
+    "vite": "^4.5.5"
+  },
+  "peerDependencies": {
+    "three": "*",
+    "@types/three": "*"
   }
 }