stats-gl 3.7.0 → 4.0.0

package/lib/main.ts

@@ -1,95 +1,59 @@
-import type * as THREE from 'three';
+import { StatsCore, StatsCoreOptions, StatsData, AverageData } from './core';
 import { Panel } from './panel';
 import { PanelVSync } from './panelVsync';
-
-interface StatsOptions {
-  trackGPU?: boolean;
-  trackCPT?: boolean;
-  trackHz?: boolean;
-  logsPerSecond?: number;
-  graphsPerSecond?: number;
-  samplesLog?: number;
-  samplesGraph?: number;
-  precision?: number;
+import { PanelTexture } from './panelTexture';
+import {
+  TextureCaptureWebGL,
+  TextureCaptureWebGPU,
+  extractWebGLSource,
+  extractWebGPUSource,
+  ThreeTextureSource,
+  DEFAULT_PREVIEW_WIDTH,
+  DEFAULT_PREVIEW_HEIGHT
+} from './textureCapture';
+
+interface StatsOptions extends StatsCoreOptions {
   minimal?: boolean;
   horizontal?: boolean;
   mode?: number;
 }
 
-interface QueryInfo {
-  query: WebGLQuery;
-}
-
-interface AverageData {
-  logs: number[];
-  graph: number[];
-}
-
-
 interface VSyncInfo {
   refreshRate: number;
   frameTime: number;
 }
 
-
-interface InfoData {
-  render: {
-    timestamp: number;
-  };
-  compute: {
-    timestamp: number;
-  };
-}
-
-class Stats {
+class Stats extends StatsCore {
   public dom: HTMLDivElement;
   public mode: number;
   public horizontal: boolean;
   public minimal: boolean;
-  public trackGPU: boolean;
-  public trackHz: boolean;
-  public trackCPT: boolean;
-  public samplesLog: number;
-  public samplesGraph: number;
-  public precision: number;
-  public logsPerSecond: number;
-  public graphsPerSecond: number;
-
-  public gl: WebGL2RenderingContext | null = null;
-  public ext: any | null = null;
-  public info?: InfoData;
-  private activeQuery: WebGLQuery | null = null;
-  private gpuQueries: QueryInfo[] = [];
-  private threeRendererPatched = false;
-
-  private beginTime: number;
-  private prevCpuTime: number;
-  private frameTimes: number[] = [];  // Store frame timestamps
-
-  private renderCount = 0;
-
-  private totalCpuDuration = 0;
-  private totalGpuDuration = 0;
-  private totalGpuDurationCompute = 0;
 
   private _panelId: number;
-  private fpsPanel: Panel;
-  private msPanel: Panel;
+  private fpsPanel: Panel | null = null;
+  private msPanel: Panel | null = null;
   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: [] };
-  public averageGpu: AverageData = { logs: [], graph: [] };
-  public averageGpuCompute: AverageData = { logs: [], graph: [] };
+  private workerCpuPanel: Panel | null = null;
+
+  // Texture panel support
+  public texturePanels: Map<string, PanelTexture> = new Map();
+  private texturePanelRow: HTMLDivElement | null = null;
+  private textureCaptureWebGL: TextureCaptureWebGL | null = null;
+  private textureCaptureWebGPU: TextureCaptureWebGPU | null = null;
+  private textureSourcesWebGL: Map<string, { target: ThreeTextureSource; framebuffer: WebGLFramebuffer; width: number; height: number }> = new Map();
+  private textureSourcesWebGPU: Map<string, any> = new Map(); // GPUTexture
+  private texturePreviewWidth = DEFAULT_PREVIEW_WIDTH;
+  private texturePreviewHeight = DEFAULT_PREVIEW_HEIGHT;
+  private lastRendererWidth = 0;
+  private lastRendererHeight = 0;
+  private textureUpdatePending = false;
 
   private updateCounter = 0;
-  private prevGraphTime: number;
   private lastMin: { [key: string]: number } = {};
   private lastMax: { [key: string]: number } = {};
   private lastValue: { [key: string]: number } = {};
-  private prevTextTime: number;
 
   private readonly VSYNC_RATES: VSyncInfo[] = [
     { refreshRate: 60, frameTime: 16.67 },
@@ -102,18 +66,23 @@ class Stats {
   ];
   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 readonly HISTORY_SIZE = 120;
+  private readonly VSYNC_THRESHOLD = 0.05;
   private lastFrameTime: number = 0;
 
-
+  private externalData: StatsData | null = null;
+  private hasNewExternalData = false;
+  private isWorker = false;
+  private averageWorkerCpu: AverageData = { logs: [], graph: [] };
 
   static Panel = Panel;
+  static PanelTexture = PanelTexture;
 
   constructor({
     trackGPU = false,
     trackCPT = false,
     trackHz = false,
+    trackFPS = true,
     logsPerSecond = 4,
     graphsPerSecond = 30,
     samplesLog = 40,
@@ -123,34 +92,39 @@ class Stats {
     horizontal = true,
     mode = 0
   }: StatsOptions = {}) {
+    super({
+      trackGPU,
+      trackCPT,
+      trackHz,
+      trackFPS,
+      logsPerSecond,
+      graphsPerSecond,
+      samplesLog,
+      samplesGraph,
+      precision
+    });
+
     this.mode = mode;
     this.horizontal = horizontal;
     this.minimal = minimal;
-    this.trackGPU = trackGPU;
-    this.trackCPT = trackCPT;
-    this.trackHz = trackHz;
-    this.samplesLog = samplesLog;
-    this.samplesGraph = samplesGraph;
-    this.precision = precision;
-    this.logsPerSecond = logsPerSecond;
-    this.graphsPerSecond = graphsPerSecond;
-    const prevGraphTime = performance.now();
-    this.prevGraphTime = prevGraphTime
-
-    // Initialize DOM
+
     this.dom = document.createElement('div');
     this.initializeDOM();
 
-    // Initialize timing
-    this.beginTime = performance.now();
-    this.prevTextTime = this.beginTime;
+    this._panelId = 0;
 
-    this.prevCpuTime = this.beginTime;
+    if (this.trackFPS) {
+      this.fpsPanel = this.addPanel(new Stats.Panel('FPS', '#0ff', '#002'));
+      this.msPanel = this.addPanel(new Stats.Panel('CPU', '#0f0', '#020'));
+    }
 
-    this._panelId = 0
-    // Create panels
-    this.fpsPanel = this.addPanel(new Stats.Panel('FPS', '#0ff', '#002'));
-    this.msPanel = this.addPanel(new Stats.Panel('CPU', '#0f0', '#020'));
+    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'));
+    }
 
     if (this.trackHz === true) {
       this.vsyncPanel = new PanelVSync('', '#f0f', '#202');
@@ -161,7 +135,6 @@ class Stats {
     this.setupEventListeners();
   }
 
-
   private initializeDOM(): void {
     this.dom.style.cssText = `
       position: fixed;
@@ -188,167 +161,234 @@ class Stats {
   };
 
   private handleResize = (): void => {
-    this.resizePanel(this.fpsPanel);
-    this.resizePanel(this.msPanel);
+    if (this.fpsPanel) this.resizePanel(this.fpsPanel);
+    if (this.msPanel) this.resizePanel(this.msPanel);
+    if (this.workerCpuPanel) this.resizePanel(this.workerCpuPanel);
     if (this.gpuPanel) this.resizePanel(this.gpuPanel);
     if (this.gpuPanelCompute) this.resizePanel(this.gpuPanelCompute);
   };
 
-  public async init(
-    canvasOrGL: WebGL2RenderingContext | HTMLCanvasElement | OffscreenCanvas | any
-  ): Promise<void> {
-    if (!canvasOrGL) {
-      console.error('Stats: The "canvas" parameter is undefined.');
+  /**
+   * Compute and update texture preview dimensions based on renderer aspect ratio
+   */
+  private updateTexturePreviewDimensions(): void {
+    if (!this.renderer) return;
+
+    const rendererWidth = this.renderer.domElement?.width || 0;
+    const rendererHeight = this.renderer.domElement?.height || 0;
+
+    // Skip if dimensions unchanged
+    if (rendererWidth === this.lastRendererWidth && rendererHeight === this.lastRendererHeight) {
       return;
     }
+    if (rendererWidth === 0 || rendererHeight === 0) return;
 
-    if (this.handleThreeRenderer(canvasOrGL)) return;
-    if (await this.handleWebGPURenderer(canvasOrGL)) return;
+    this.lastRendererWidth = rendererWidth;
+    this.lastRendererHeight = rendererHeight;
 
-    if (this.initializeWebGL(canvasOrGL)) {
-      if (this.trackGPU) {
-        this.initializeGPUTracking();
-      }
-      return;
+    // Compute preview size maintaining aspect ratio
+    // Base dimensions: 90x48 panel, compute to fit source aspect
+    const sourceAspect = rendererWidth / rendererHeight;
+    const panelAspect = DEFAULT_PREVIEW_WIDTH / DEFAULT_PREVIEW_HEIGHT;
+
+    let newWidth: number;
+    let newHeight: number;
+
+    if (sourceAspect > panelAspect) {
+      // Source wider than panel - fit to width
+      newWidth = DEFAULT_PREVIEW_WIDTH;
+      newHeight = Math.round(DEFAULT_PREVIEW_WIDTH / sourceAspect);
     } else {
-      console.error('Stats-gl: Failed to initialize WebGL context');
+      // Source taller than panel - fit to height
+      newHeight = DEFAULT_PREVIEW_HEIGHT;
+      newWidth = Math.round(DEFAULT_PREVIEW_HEIGHT * sourceAspect);
     }
-  }
 
-  private handleThreeRenderer(renderer: any): boolean {
-    if (renderer.isWebGLRenderer && !this.threeRendererPatched) {
-      this.patchThreeRenderer(renderer);
-      this.gl = renderer.getContext();
+    // Ensure minimum dimensions
+    newWidth = Math.max(newWidth, 16);
+    newHeight = Math.max(newHeight, 16);
 
-      if (this.trackGPU) {
-        this.initializeGPUTracking();
+    if (newWidth !== this.texturePreviewWidth || newHeight !== this.texturePreviewHeight) {
+      this.texturePreviewWidth = newWidth;
+      this.texturePreviewHeight = newHeight;
+
+      // Resize capture helpers
+      if (this.textureCaptureWebGL) {
+        this.textureCaptureWebGL.resize(newWidth, newHeight);
+      }
+      if (this.textureCaptureWebGPU) {
+        this.textureCaptureWebGPU.resize(newWidth, newHeight);
       }
-      return true;
-    }
-    return false;
-  }
 
-  private async handleWebGPURenderer(renderer: any): Promise<boolean> {
-    if (renderer.isWebGPURenderer) {
-      if (this.trackGPU || this.trackCPT) {
-        renderer.backend.trackTimestamp = true;
-        if (!renderer._initialized) {
-          await renderer.init();
-        }
-        if (renderer.hasFeature('timestamp-query')) {
-          this.initializeWebGPUPanels();
-        }
+      // Update panel source sizes
+      for (const panel of this.texturePanels.values()) {
+        panel.setSourceSize(rendererWidth, rendererHeight);
       }
-      this.info = renderer.info;
-      this.patchThreeWebGPU(renderer);
-      return true;
     }
-    return false;
   }
 
-  private initializeWebGPUPanels(): void {
-    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'));
-    }
+  protected override onWebGPUTimestampSupported(): void {
+    // Panels already created in constructor
   }
 
-  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;
+  protected override onGPUTrackingInitialized(): void {
+    // Panel already created in constructor
   }
 
-  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'));
-      }
-    }
-  }
+  public setData(data: StatsData): void {
+    this.externalData = data;
+    this.hasNewExternalData = true;
 
-  public begin(): void {
-    this.beginProfiling('cpu-started');
+    // Dynamically add worker CPU panel right after main CPU panel
+    if (!this.isWorker && this.msPanel) {
+      this.isWorker = true;
 
-    if (!this.gl || !this.ext) return;
+      this.workerCpuPanel = new Stats.Panel('WRK', '#f90', '#220');
+      const insertPosition = this.msPanel.id + 1;
+      this.workerCpuPanel.id = insertPosition;
 
-    if (this.activeQuery) {
-      this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
-    }
+      // Shift IDs of panels that come after
+      if (this.gpuPanel && this.gpuPanel.id >= insertPosition) {
+        this.gpuPanel.id++;
+        this.resizePanel(this.gpuPanel);
+      }
+      if (this.gpuPanelCompute && this.gpuPanelCompute.id >= insertPosition) {
+        this.gpuPanelCompute.id++;
+        this.resizePanel(this.gpuPanelCompute);
+      }
 
-    this.activeQuery = this.gl.createQuery();
-    if (this.activeQuery) {
-      this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.activeQuery);
+      // Insert canvas after msPanel in DOM
+      const msCanvas = this.msPanel.canvas;
+      if (msCanvas.nextSibling) {
+        this.dom.insertBefore(this.workerCpuPanel.canvas, msCanvas.nextSibling);
+      } else {
+        this.dom.appendChild(this.workerCpuPanel.canvas);
+      }
+
+      this.resizePanel(this.workerCpuPanel);
+      this._panelId++;
     }
   }
 
-  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;
+  public update(): void {
+    if (this.externalData) {
+      this.updateFromExternalData();
+    } else {
+      this.updateFromInternalData();
     }
+  }
 
+  private updateFromExternalData(): void {
+    const data = this.externalData!;
+
+    // Track main thread CPU (measures from begin() call if user called it)
     this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration');
-  }
+    this.addToAverage(this.totalCpuDuration, this.averageCpu);
+    this.totalCpuDuration = 0;
 
-  public update(): void {
+    // Only add worker data when new message arrived
+    if (this.hasNewExternalData) {
+      this.addToAverage(data.cpu, this.averageWorkerCpu);
+      this.addToAverage(data.fps, this.averageFps);
+      this.addToAverage(data.gpu, this.averageGpu);
+      this.addToAverage(data.gpuCompute, this.averageGpuCompute);
+      this.hasNewExternalData = false;
+    }
 
+    this.renderPanels();
+  }
 
+  private updateFromInternalData(): void {
     this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration');
 
-    if (!this.info) {
+    if (this.webgpuNative) {
+      // Native WebGPU: resolve timestamps async
+      this.resolveTimestampsAsync();
+    } else if (!this.info) {
       this.processGpuQueries();
     } else {
       this.processWebGPUTimestamps();
     }
 
-    this.updateAverages()
+    this.updateAverages();
     this.resetCounters();
+    this.renderPanels();
   }
 
-  private processWebGPUTimestamps(): void {
-    this.totalGpuDuration = this.info!.render.timestamp;
-    this.totalGpuDurationCompute = this.info!.compute.timestamp;
+  private renderPanels(): void {
+    const currentTime = performance.now();
+
+    // Only calculate FPS locally when not using worker data
+    if (!this.isWorker) {
+      this.frameTimes.push(currentTime);
+
+      while (this.frameTimes.length > 0 && this.frameTimes[0] <= currentTime - 1000) {
+        this.frameTimes.shift();
+      }
+
+      const fps = Math.round(this.frameTimes.length);
+      this.addToAverage(fps, this.averageFps);
+    }
+
+    const shouldUpdateText = currentTime >= this.prevTextTime + 1000 / this.logsPerSecond;
+    const shouldUpdateGraph = currentTime >= this.prevGraphTime + 1000 / this.graphsPerSecond;
+
+    const suffix = this.isWorker ? ' ⛭' : '';
+    this.updatePanelComponents(this.fpsPanel, this.averageFps, 0, shouldUpdateText, shouldUpdateGraph, suffix);
+    // Main thread CPU (no suffix)
+    this.updatePanelComponents(this.msPanel, this.averageCpu, this.precision, shouldUpdateText, shouldUpdateGraph, '');
+    // Worker CPU panel (with ⛭ suffix)
+    if (this.workerCpuPanel && this.isWorker) {
+      this.updatePanelComponents(this.workerCpuPanel, this.averageWorkerCpu, this.precision, shouldUpdateText, shouldUpdateGraph, ' ⛭');
+    }
+    if (this.gpuPanel) {
+      this.updatePanelComponents(this.gpuPanel, this.averageGpu, this.precision, shouldUpdateText, shouldUpdateGraph, suffix);
+    }
+    if (this.trackCPT && this.gpuPanelCompute) {
+      this.updatePanelComponents(this.gpuPanelCompute, this.averageGpuCompute, this.precision, shouldUpdateText, shouldUpdateGraph, suffix);
+    }
+
+    if (shouldUpdateText) {
+      this.prevTextTime = currentTime;
+    }
+    if (shouldUpdateGraph) {
+      this.prevGraphTime = currentTime;
+
+      // Update texture panels at graph rate (prevent overlapping async updates)
+      if (this.texturePanels.size > 0 && !this.textureUpdatePending) {
+        this.textureUpdatePending = true;
+        this.updateTexturePanels().finally(() => {
+          this.textureUpdatePending = false;
+        });
+      }
+
+      // Capture StatsGL nodes (registered by addon)
+      this.captureStatsGLNodes();
+    }
+
+    if (this.vsyncPanel !== null) {
+      this.detectVSync(currentTime);
+
+      const vsyncValue = this.detectedVSync?.refreshRate || 0;
+
+      if (shouldUpdateText && vsyncValue > 0) {
+        this.vsyncPanel.update(vsyncValue, vsyncValue);
+      }
+    }
   }
 
-  private resetCounters(): void {
+  protected override resetCounters(): void {
     this.renderCount = 0;
     this.totalCpuDuration = 0;
-    this.beginTime = this.endInternal();
+    this.beginTime = performance.now();
   }
 
   resizePanel(panel: Panel) {
-
     panel.canvas.style.position = 'absolute';
 
     if (this.minimal) {
-
       panel.canvas.style.display = 'none';
-
     } else {
-
       panel.canvas.style.display = 'block';
       if (this.horizontal) {
         panel.canvas.style.top = '0px';
@@ -356,96 +396,267 @@ class Stats {
       } else {
         panel.canvas.style.left = '0px';
         panel.canvas.style.top = panel.id * panel.HEIGHT / panel.PR + 'px';
-
       }
     }
-
   }
-  addPanel(panel: Panel) {
 
+  addPanel(panel: Panel) {
     if (panel.canvas) {
-
       this.dom.appendChild(panel.canvas);
       panel.id = this._panelId;
       this.resizePanel(panel);
-
       this._panelId++;
     }
-
     return panel;
-
   }
 
   showPanel(id: number) {
-
     for (let i = 0; i < this.dom.children.length; i++) {
       const child = this.dom.children[i] as HTMLElement;
-
       child.style.display = i === id ? 'block' : 'none';
-
     }
-
     this.mode = id;
+  }
+
+  // ==========================================================================
+  // Texture Panel API
+  // ==========================================================================
+
+  /**
+   * Add a new texture preview panel
+   * @param name - Label for the texture panel
+   * @returns The created PanelTexture instance
+   */
+  public addTexturePanel(name: string): PanelTexture {
+    // Create texture panel row if not exists
+    if (!this.texturePanelRow) {
+      this.texturePanelRow = document.createElement('div');
+      this.texturePanelRow.style.cssText = `
+        position: absolute;
+        top: 48px;
+        left: 0;
+        display: flex;
+        flex-direction: row;
+      `;
+      this.dom.appendChild(this.texturePanelRow);
+    }
+
+    const panel = new PanelTexture(name);
+    panel.canvas.style.position = 'relative';
+    panel.canvas.style.left = '';
+    panel.canvas.style.top = '';
+    this.texturePanelRow.appendChild(panel.canvas);
+    this.texturePanels.set(name, panel);
 
+    return panel;
   }
 
-  processGpuQueries() {
+  /**
+   * Set texture source for a panel (Three.js render target)
+   * Auto-detects WebGL/WebGPU and extracts native handles
+   * @param name - Panel name
+   * @param source - Three.js RenderTarget or native texture
+   */
+  public setTexture(name: string, source: ThreeTextureSource | any): void {
+    // Update preview dimensions based on current renderer
+    this.updateTexturePreviewDimensions();
+
+    // Initialize capture helpers if needed
+    if (this.gl && !this.textureCaptureWebGL) {
+      this.textureCaptureWebGL = new TextureCaptureWebGL(this.gl, this.texturePreviewWidth, this.texturePreviewHeight);
+    }
+    if (this.gpuDevice && !this.textureCaptureWebGPU) {
+      this.textureCaptureWebGPU = new TextureCaptureWebGPU(this.gpuDevice, this.texturePreviewWidth, this.texturePreviewHeight);
+    }
+
+    const panel = this.texturePanels.get(name);
+
+    // Handle Three.js WebGLRenderTarget
+    if ((source as ThreeTextureSource).isWebGLRenderTarget && this.gl) {
+      const webglSource = extractWebGLSource(source as ThreeTextureSource, this.gl);
+      if (webglSource) {
+        this.textureSourcesWebGL.set(name, {
+          target: source as ThreeTextureSource,
+          ...webglSource
+        });
+        // Set source aspect ratio on panel
+        if (panel) {
+          panel.setSourceSize(webglSource.width, webglSource.height);
+        }
+      }
+      return;
+    }
 
+    // Handle Three.js WebGPU RenderTarget
+    if ((source as ThreeTextureSource).isRenderTarget && this.gpuBackend) {
+      const gpuTexture = extractWebGPUSource(source as ThreeTextureSource, this.gpuBackend);
+      if (gpuTexture) {
+        this.textureSourcesWebGPU.set(name, gpuTexture);
+        // Set source aspect ratio on panel (use source dimensions if available)
+        if (panel && (source as ThreeTextureSource).width && (source as ThreeTextureSource).height) {
+          panel.setSourceSize((source as ThreeTextureSource).width!, (source as ThreeTextureSource).height!);
+        }
+      }
+      return;
+    }
 
-    if (!this.gl || !this.ext) return;
+    // Handle raw GPUTexture (check for createView method)
+    if (source && typeof source.createView === 'function') {
+      this.textureSourcesWebGPU.set(name, source);
+      return;
+    }
 
-    this.totalGpuDuration = 0;
+    // Handle raw WebGLFramebuffer (need width/height from user)
+    // For raw FBOs, user should call setTextureWebGL directly
+  }
 
-    this.gpuQueries.forEach((queryInfo, index) => {
-      if (this.gl) {
-        const available = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT_AVAILABLE);
-        const disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
+  /**
+   * Set WebGL framebuffer source with explicit dimensions
+   * @param name - Panel name
+   * @param framebuffer - WebGL framebuffer
+   * @param width - Texture width
+   * @param height - Texture height
+   */
+  public setTextureWebGL(name: string, framebuffer: WebGLFramebuffer, width: number, height: number): void {
+    // Update preview dimensions based on current renderer
+    this.updateTexturePreviewDimensions();
+
+    if (this.gl && !this.textureCaptureWebGL) {
+      this.textureCaptureWebGL = new TextureCaptureWebGL(this.gl, this.texturePreviewWidth, this.texturePreviewHeight);
+    }
+    this.textureSourcesWebGL.set(name, {
+      target: { isWebGLRenderTarget: true } as ThreeTextureSource,
+      framebuffer,
+      width,
+      height
+    });
+    // Set source aspect ratio on panel
+    const panel = this.texturePanels.get(name);
+    if (panel) {
+      panel.setSourceSize(width, height);
+    }
+  }
 
-        if (available && !disjoint) {
-          const elapsed = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT);
-          const duration = elapsed * 1e-6;  // Convert nanoseconds to milliseconds
-          this.totalGpuDuration += duration;
-          this.gl.deleteQuery(queryInfo.query);
-          this.gpuQueries.splice(index, 1);  // Remove the processed query
+  /**
+   * Set texture from ImageBitmap (for worker mode)
+   * @param name - Panel name
+   * @param bitmap - ImageBitmap transferred from worker
+   * @param sourceWidth - Optional source texture width for aspect ratio
+   * @param sourceHeight - Optional source texture height for aspect ratio
+   */
+  public setTextureBitmap(name: string, bitmap: ImageBitmap, sourceWidth?: number, sourceHeight?: number): void {
+    const panel = this.texturePanels.get(name);
+    if (panel) {
+      // Set source size for proper aspect ratio if provided
+      if (sourceWidth !== undefined && sourceHeight !== undefined) {
+        panel.setSourceSize(sourceWidth, sourceHeight);
+      }
+      panel.updateTexture(bitmap);
+    }
+  }
+
+  /**
+   * Remove a texture panel
+   * @param name - Panel name to remove
+   */
+  public removeTexturePanel(name: string): void {
+    const panel = this.texturePanels.get(name);
+    if (panel) {
+      panel.dispose();
+      panel.canvas.remove();
+      this.texturePanels.delete(name);
+      this.textureSourcesWebGL.delete(name);
+      this.textureSourcesWebGPU.delete(name);
+    }
+  }
+
+  /**
+   * Capture and update all texture panels
+   * Called automatically during renderPanels at graphsPerSecond rate
+   */
+  private async updateTexturePanels(): Promise<void> {
+    // Check for renderer dimension changes every frame
+    this.updateTexturePreviewDimensions();
+
+    // Update WebGL textures
+    if (this.textureCaptureWebGL) {
+      for (const [name, source] of this.textureSourcesWebGL) {
+        const panel = this.texturePanels.get(name);
+        if (panel) {
+          // Re-extract framebuffer for Three.js targets (may change each frame)
+          let framebuffer = source.framebuffer;
+          let width = source.width;
+          let height = source.height;
+
+          if (source.target.isWebGLRenderTarget && source.target.__webglFramebuffer) {
+            framebuffer = source.target.__webglFramebuffer;
+            width = source.target.width || width;
+            height = source.target.height || height;
+          }
+
+          const bitmap = await this.textureCaptureWebGL.capture(framebuffer, width, height, name);
+          if (bitmap) {
+            panel.updateTexture(bitmap);
+          }
         }
       }
-    });
+    }
 
+    // Update WebGPU textures
+    if (this.textureCaptureWebGPU) {
+      for (const [name, gpuTexture] of this.textureSourcesWebGPU) {
+        const panel = this.texturePanels.get(name);
+        if (panel) {
+          const bitmap = await this.textureCaptureWebGPU.capture(gpuTexture);
+          if (bitmap) {
+            panel.updateTexture(bitmap);
+          }
+        }
+      }
+    }
   }
+
+  /**
+   * Capture StatsGL nodes registered by the addon
+   */
+  private captureStatsGLNodes(): void {
+    const captures = (this as any)._statsGLCaptures as Map<string, any> | undefined;
+    if (!captures || captures.size === 0 || !this.renderer) return;
+
+    for (const captureData of captures.values()) {
+      if (captureData.capture) {
+        captureData.capture(this.renderer);
+      }
+    }
+  }
+
   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
+    if (stability > 2) {
       this.detectedVSync = null;
       return;
     }
 
-    // Find the closest VSync rate based on frame time
     let closestMatch: VSyncInfo | null = null;
     let smallestDiff = Infinity;
 
@@ -462,54 +673,6 @@ class Stats {
     } else {
       this.detectedVSync = null;
     }
-
-  }
-
-  endInternal() {
-    const currentTime = performance.now();
-
-    this.frameTimes.push(currentTime);
-
-    // Remove frames older than 1 second
-    while (this.frameTimes.length > 0 && this.frameTimes[0] <= currentTime - 1000) {
-      this.frameTimes.shift();
-    }
-
-    // Calculate FPS based on frames in the last second
-    const fps = Math.round(this.frameTimes.length);
-
-    this.addToAverage(fps, this.averageFps);
-
-    const shouldUpdateText = currentTime >= this.prevTextTime + 1000 / this.logsPerSecond;
-    const shouldUpdateGraph = currentTime >= this.prevGraphTime + 1000 / this.graphsPerSecond;
-
-    this.updatePanelComponents(this.fpsPanel, this.averageFps, 0, shouldUpdateText, shouldUpdateGraph);
-    this.updatePanelComponents(this.msPanel, this.averageCpu, this.precision, shouldUpdateText, shouldUpdateGraph);
-    if (this.gpuPanel) {
-      this.updatePanelComponents(this.gpuPanel, this.averageGpu, this.precision, shouldUpdateText, shouldUpdateGraph);
-    }
-    if (this.trackCPT && this.gpuPanelCompute) {
-      this.updatePanelComponents(this.gpuPanelCompute, this.averageGpuCompute, this.precision, shouldUpdateText, shouldUpdateGraph);
-    }
-
-    if (shouldUpdateText) {
-      this.prevTextTime = currentTime;
-    }
-    if (shouldUpdateGraph) {
-      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;
   }
 
   private updatePanelComponents(
@@ -517,25 +680,26 @@ class Stats {
     averageArray: { logs: number[], graph: number[] },
     precision: number,
     shouldUpdateText: boolean,
-    shouldUpdateGraph: boolean
+    shouldUpdateGraph: boolean,
+    suffix = ''
   ) {
     if (!panel || averageArray.logs.length === 0) return;
 
-    // Initialize tracking for this panel if not exists
-    if (!(panel.name in this.lastMin)) {
-      this.lastMin[panel.name] = Infinity;
-      this.lastMax[panel.name] = 0;
-      this.lastValue[panel.name] = 0;
+    // Use panel.id as key to avoid collision between panels with same name
+    const key = String(panel.id);
+
+    if (!(key in this.lastMin)) {
+      this.lastMin[key] = Infinity;
+      this.lastMax[key] = 0;
+      this.lastValue[key] = 0;
     }
 
     const currentValue = averageArray.logs[averageArray.logs.length - 1];
 
-    this.lastMax[panel.name] = Math.max(...averageArray.logs);
-    this.lastMin[panel.name] = Math.min(this.lastMin[panel.name], currentValue);
-    // Smooth the display value
-    this.lastValue[panel.name] = this.lastValue[panel.name] * 0.7 + currentValue * 0.3;
+    this.lastMax[key] = Math.max(...averageArray.logs);
+    this.lastMin[key] = Math.min(this.lastMin[key], currentValue);
+    this.lastValue[key] = this.lastValue[key] * 0.7 + currentValue * 0.3;
 
-    // Calculate graph max considering both recent values and graph history
     const graphMax = Math.max(
       Math.max(...averageArray.logs),
       ...averageArray.graph.slice(-this.samplesGraph)
@@ -543,16 +707,15 @@ class Stats {
 
     this.updateCounter++;
 
-    // Update text if it's time
     if (shouldUpdateText) {
       panel.update(
-        this.lastValue[panel.name],
-        this.lastMax[panel.name],
-        precision
+        this.lastValue[key],
+        this.lastMax[key],
+        precision,
+        suffix
       );
     }
 
-    // Update graph if it's time
     if (shouldUpdateGraph) {
       panel.updateGraph(
         currentValue,
@@ -561,84 +724,35 @@ class Stats {
     }
   }
 
-  private beginProfiling(marker: string): void {
-    if (window.performance) {
-      try {
-        window.performance.clearMarks(marker);
-        window.performance.mark(marker);
-      } catch (error) {
-        console.debug('Stats: Performance marking failed:', error);
-      }
-    }
-  }
-
-  private endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string): void {
-    if (!window.performance || !endMarker || !startMarker) return;
-
-    try {
-      // First check if the start mark exists
-      const entries = window.performance.getEntriesByName(startMarker as string, 'mark');
-      if (entries.length === 0) {
-        // If start mark doesn't exist, create it now with the same timestamp as end
-        this.beginProfiling(startMarker as string);
-      }
-
-      // Create the end mark
-      window.performance.clearMarks(endMarker);
-      window.performance.mark(endMarker);
-
-      // Clear any existing measure with the same name
-      window.performance.clearMeasures(measureName);
-
-      // Create the measurement
-      const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
-      this.totalCpuDuration += cpuMeasure.duration;
-
-      // Clean up
-      window.performance.clearMarks(startMarker as string);
-      window.performance.clearMarks(endMarker);
-      window.performance.clearMeasures(measureName);
-    } catch (error) {
-      console.debug('Stats: Performance measurement failed:', error);
-    }
-  }
-
   updatePanel(panel: { update: any; updateGraph: any; name: string; } | null, averageArray: { logs: number[], graph: number[] }, precision = 2) {
     if (!panel || averageArray.logs.length === 0) return;
 
     const currentTime = performance.now();
 
-    // Initialize tracking for this panel if not exists
     if (!(panel.name in this.lastMin)) {
       this.lastMin[panel.name] = Infinity;
       this.lastMax[panel.name] = 0;
       this.lastValue[panel.name] = 0;
     }
 
-    // Get the current value and recent max
     const currentValue = averageArray.logs[averageArray.logs.length - 1];
     const recentMax = Math.max(...averageArray.logs.slice(-30));
 
-    // Update running statistics
     this.lastMin[panel.name] = Math.min(this.lastMin[panel.name], currentValue);
     this.lastMax[panel.name] = Math.max(this.lastMax[panel.name], currentValue);
 
-    // Smooth the display value
     this.lastValue[panel.name] = this.lastValue[panel.name] * 0.7 + currentValue * 0.3;
 
-    // Calculate graph scaling value
     const graphMax = Math.max(recentMax, ...averageArray.graph.slice(-this.samplesGraph));
 
     this.updateCounter++;
 
-    // Reset min/max periodically
     if (this.updateCounter % (this.logsPerSecond * 2) === 0) {
       this.lastMax[panel.name] = recentMax;
       this.lastMin[panel.name] = currentValue;
     }
 
     if (panel.update) {
-      // Check if it's time to update the text (based on logsPerSecond)
       if (currentTime >= this.prevCpuTime + 1000 / this.logsPerSecond) {
         panel.update(
           this.lastValue[panel.name],
@@ -649,7 +763,6 @@ class Stats {
         );
       }
 
-      // Check if it's time to update the graph (based on graphsPerSecond)
       if (currentTime >= this.prevGraphTime + 1000 / this.graphsPerSecond) {
         panel.updateGraph(
           currentValue,
@@ -660,82 +773,80 @@ 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
-    if (this.info && this.totalGpuDurationCompute !== undefined) {
-      this.addToAverage(this.totalGpuDurationCompute, this.averageGpuCompute);
-    }
-  }
-
-  addToAverage(value: number, averageArray: { logs: any; graph: any; }) {
-    // Validate value
-    // if (value === undefined || value === null || isNaN(value) || value === 0) {
-    //   return;
-    // }
-
-    // Store raw values for logs
-    averageArray.logs.push(value);
-    if (averageArray.logs.length > this.samplesLog) {
-      averageArray.logs = averageArray.logs.slice(-this.samplesLog);
-    }
-
-    // For graph, store raw values
-    averageArray.graph.push(value);
-    if (averageArray.graph.length > this.samplesGraph) {
-      averageArray.graph = averageArray.graph.slice(-this.samplesGraph);
-    }
-  }
-
   get domElement() {
-    // patch for some use case in threejs
     return this.dom;
-
   }
 
-  patchThreeWebGPU(renderer: any) {
-
-    const originalAnimationLoop = renderer.info.reset
-
-    const statsInstance = this;
-
-    renderer.info.reset = function () {
-
-      statsInstance.beginProfiling('cpu-started');
-
-      originalAnimationLoop.call(this);
-
+  /**
+   * Dispose of all resources. Call when done using Stats.
+   */
+  public override dispose(): void {
+    // Remove event listeners
+    if (this.minimal) {
+      this.dom.removeEventListener('click', this.handleClick);
+    } else {
+      window.removeEventListener('resize', this.handleResize);
     }
 
-  }
-
-  patchThreeRenderer(renderer: any) {
-
-    // 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
+    // Dispose texture capture helpers
+    if (this.textureCaptureWebGL) {
+      this.textureCaptureWebGL.dispose();
+      this.textureCaptureWebGL = null;
+    }
+    if (this.textureCaptureWebGPU) {
+      this.textureCaptureWebGPU.dispose();
+      this.textureCaptureWebGPU = null;
+    }
 
-      // Call the original render method
-      originalRenderMethod.call(this, scene, camera);
+    // Dispose all texture panels
+    for (const panel of this.texturePanels.values()) {
+      panel.dispose();
+    }
+    this.texturePanels.clear();
+    this.textureSourcesWebGL.clear();
+    this.textureSourcesWebGPU.clear();
 
-      statsInstance.end(); // End tracking for this render call
+    // Dispose StatsGL captures if any
+    const captures = (this as any)._statsGLCaptures as Map<string, any> | undefined;
+    if (captures) {
+      for (const captureData of captures.values()) {
+        if (captureData.dispose) {
+          captureData.dispose();
+        }
+      }
+      captures.clear();
+    }
 
-    };
+    // Remove DOM element
+    if (this.texturePanelRow) {
+      this.texturePanelRow.remove();
+      this.texturePanelRow = null;
+    }
+    this.dom.remove();
 
+    // Clear panel references
+    this.fpsPanel = null;
+    this.msPanel = null;
+    this.gpuPanel = null;
+    this.gpuPanelCompute = null;
+    this.vsyncPanel = null;
+    this.workerCpuPanel = null;
 
-    this.threeRendererPatched = true;
+    // Clear tracking arrays
+    this.frameTimeHistory.length = 0;
+    this.averageWorkerCpu.logs.length = 0;
+    this.averageWorkerCpu.graph.length = 0;
 
+    // Call parent dispose
+    super.dispose();
   }
 }
 
 
 export default Stats;
+export type { StatsData } from './core';
+export { StatsProfiler } from './profiler';
+export { PanelTexture } from './panelTexture';
+export { TextureCaptureWebGL, TextureCaptureWebGPU } from './textureCapture';
+export { StatsGLCapture } from './statsGLNode';
+