stats-gl 3.7.0 → 4.0.0

package/dist/main.cjs

@@ -1,11 +1,18 @@
 "use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const core = require("./core.cjs");
 const panel = require("./panel.cjs");
 const panelVsync = require("./panelVsync.cjs");
-const _Stats = class _Stats2 {
+const panelTexture = require("./panelTexture.cjs");
+const textureCapture = require("./textureCapture.cjs");
+const profiler = require("./profiler.cjs");
+const statsGLNode = require("./statsGLNode.cjs");
+const _Stats = class _Stats2 extends core.StatsCore {
   constructor({
     trackGPU = false,
     trackCPT = false,
     trackHz = false,
+    trackFPS = true,
     logsPerSecond = 4,
     graphsPerSecond = 30,
     samplesLog = 40,
@@ -15,23 +22,34 @@ const _Stats = class _Stats2 {
     horizontal = true,
     mode = 0
   } = {}) {
-    this.gl = null;
-    this.ext = null;
-    this.activeQuery = null;
-    this.gpuQueries = [];
-    this.threeRendererPatched = false;
-    this.frameTimes = [];
-    this.renderCount = 0;
-    this.totalCpuDuration = 0;
-    this.totalGpuDuration = 0;
-    this.totalGpuDurationCompute = 0;
+    super({
+      trackGPU,
+      trackCPT,
+      trackHz,
+      trackFPS,
+      logsPerSecond,
+      graphsPerSecond,
+      samplesLog,
+      samplesGraph,
+      precision
+    });
+    this.fpsPanel = null;
+    this.msPanel = null;
     this.gpuPanel = null;
     this.gpuPanelCompute = null;
     this.vsyncPanel = null;
-    this.averageFps = { logs: [], graph: [] };
-    this.averageCpu = { logs: [], graph: [] };
-    this.averageGpu = { logs: [], graph: [] };
-    this.averageGpuCompute = { logs: [], graph: [] };
+    this.workerCpuPanel = null;
+    this.texturePanels = /* @__PURE__ */ new Map();
+    this.texturePanelRow = null;
+    this.textureCaptureWebGL = null;
+    this.textureCaptureWebGPU = null;
+    this.textureSourcesWebGL = /* @__PURE__ */ new Map();
+    this.textureSourcesWebGPU = /* @__PURE__ */ new Map();
+    this.texturePreviewWidth = textureCapture.DEFAULT_PREVIEW_WIDTH;
+    this.texturePreviewHeight = textureCapture.DEFAULT_PREVIEW_HEIGHT;
+    this.lastRendererWidth = 0;
+    this.lastRendererHeight = 0;
+    this.textureUpdatePending = false;
     this.updateCounter = 0;
     this.lastMin = {};
     this.lastMax = {};
@@ -50,13 +68,21 @@ const _Stats = class _Stats2 {
     this.HISTORY_SIZE = 120;
     this.VSYNC_THRESHOLD = 0.05;
     this.lastFrameTime = 0;
+    this.externalData = null;
+    this.hasNewExternalData = false;
+    this.isWorker = false;
+    this.averageWorkerCpu = { logs: [], graph: [] };
     this.handleClick = (event) => {
       event.preventDefault();
       this.showPanel(++this.mode % this.dom.children.length);
     };
     this.handleResize = () => {
-      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)
@@ -65,24 +91,19 @@ const _Stats = class _Stats2 {
     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;
     this.dom = document.createElement("div");
     this.initializeDOM();
-    this.beginTime = performance.now();
-    this.prevTextTime = this.beginTime;
-    this.prevCpuTime = this.beginTime;
     this._panelId = 0;
-    this.fpsPanel = this.addPanel(new _Stats2.Panel("FPS", "#0ff", "#002"));
-    this.msPanel = this.addPanel(new _Stats2.Panel("CPU", "#0f0", "#020"));
+    if (this.trackFPS) {
+      this.fpsPanel = this.addPanel(new _Stats2.Panel("FPS", "#0ff", "#002"));
+      this.msPanel = this.addPanel(new _Stats2.Panel("CPU", "#0f0", "#020"));
+    }
+    if (this.trackGPU) {
+      this.gpuPanel = this.addPanel(new _Stats2.Panel("GPU", "#ff0", "#220"));
+    }
+    if (this.trackCPT) {
+      this.gpuPanelCompute = this.addPanel(new _Stats2.Panel("CPT", "#e1e1e1", "#212121"));
+    }
     if (this.trackHz === true) {
       this.vsyncPanel = new panelVsync.PanelVSync("", "#f0f", "#202");
       this.dom.appendChild(this.vsyncPanel.canvas);
@@ -108,124 +129,163 @@ const _Stats = class _Stats2 {
       window.addEventListener("resize", this.handleResize);
     }
   }
-  async init(canvasOrGL) {
-    if (!canvasOrGL) {
-      console.error('Stats: The "canvas" parameter is undefined.');
-      return;
-    }
-    if (this.handleThreeRenderer(canvasOrGL))
+  /**
+   * Compute and update texture preview dimensions based on renderer aspect ratio
+   */
+  updateTexturePreviewDimensions() {
+    var _a, _b;
+    if (!this.renderer)
       return;
-    if (await this.handleWebGPURenderer(canvasOrGL))
+    const rendererWidth = ((_a = this.renderer.domElement) == null ? void 0 : _a.width) || 0;
+    const rendererHeight = ((_b = this.renderer.domElement) == null ? void 0 : _b.height) || 0;
+    if (rendererWidth === this.lastRendererWidth && rendererHeight === this.lastRendererHeight) {
       return;
-    if (this.initializeWebGL(canvasOrGL)) {
-      if (this.trackGPU) {
-        this.initializeGPUTracking();
-      }
+    }
+    if (rendererWidth === 0 || rendererHeight === 0)
       return;
+    this.lastRendererWidth = rendererWidth;
+    this.lastRendererHeight = rendererHeight;
+    const sourceAspect = rendererWidth / rendererHeight;
+    const panelAspect = textureCapture.DEFAULT_PREVIEW_WIDTH / textureCapture.DEFAULT_PREVIEW_HEIGHT;
+    let newWidth;
+    let newHeight;
+    if (sourceAspect > panelAspect) {
+      newWidth = textureCapture.DEFAULT_PREVIEW_WIDTH;
+      newHeight = Math.round(textureCapture.DEFAULT_PREVIEW_WIDTH / sourceAspect);
     } else {
-      console.error("Stats-gl: Failed to initialize WebGL context");
-    }
-  }
-  handleThreeRenderer(renderer) {
-    if (renderer.isWebGLRenderer && !this.threeRendererPatched) {
-      this.patchThreeRenderer(renderer);
-      this.gl = renderer.getContext();
-      if (this.trackGPU) {
-        this.initializeGPUTracking();
+      newHeight = textureCapture.DEFAULT_PREVIEW_HEIGHT;
+      newWidth = Math.round(textureCapture.DEFAULT_PREVIEW_HEIGHT * sourceAspect);
+    }
+    newWidth = Math.max(newWidth, 16);
+    newHeight = Math.max(newHeight, 16);
+    if (newWidth !== this.texturePreviewWidth || newHeight !== this.texturePreviewHeight) {
+      this.texturePreviewWidth = newWidth;
+      this.texturePreviewHeight = newHeight;
+      if (this.textureCaptureWebGL) {
+        this.textureCaptureWebGL.resize(newWidth, newHeight);
       }
-      return true;
-    }
-    return false;
-  }
-  async handleWebGPURenderer(renderer) {
-    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();
-        }
+      if (this.textureCaptureWebGPU) {
+        this.textureCaptureWebGPU.resize(newWidth, newHeight);
+      }
+      for (const panel2 of this.texturePanels.values()) {
+        panel2.setSourceSize(rendererWidth, rendererHeight);
       }
-      this.info = renderer.info;
-      this.patchThreeWebGPU(renderer);
-      return true;
     }
-    return false;
   }
-  initializeWebGPUPanels() {
-    if (this.trackGPU) {
-      this.gpuPanel = this.addPanel(new _Stats2.Panel("GPU", "#ff0", "#220"));
-    }
-    if (this.trackCPT) {
-      this.gpuPanelCompute = this.addPanel(new _Stats2.Panel("CPT", "#e1e1e1", "#212121"));
-    }
+  onWebGPUTimestampSupported() {
   }
-  initializeWebGL(canvasOrGL) {
-    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;
+  onGPUTrackingInitialized() {
   }
-  initializeGPUTracking() {
-    if (this.gl) {
-      this.ext = this.gl.getExtension("EXT_disjoint_timer_query_webgl2");
-      if (this.ext) {
-        this.gpuPanel = this.addPanel(new _Stats2.Panel("GPU", "#ff0", "#220"));
+  setData(data) {
+    this.externalData = data;
+    this.hasNewExternalData = true;
+    if (!this.isWorker && this.msPanel) {
+      this.isWorker = true;
+      this.workerCpuPanel = new _Stats2.Panel("WRK", "#f90", "#220");
+      const insertPosition = this.msPanel.id + 1;
+      this.workerCpuPanel.id = insertPosition;
+      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);
       }
+      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++;
     }
   }
-  begin() {
-    this.beginProfiling("cpu-started");
-    if (!this.gl || !this.ext)
-      return;
-    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);
+  update() {
+    if (this.externalData) {
+      this.updateFromExternalData();
+    } else {
+      this.updateFromInternalData();
     }
   }
-  end() {
-    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;
-    }
+  updateFromExternalData() {
+    const data = this.externalData;
     this.endProfiling("cpu-started", "cpu-finished", "cpu-duration");
+    this.addToAverage(this.totalCpuDuration, this.averageCpu);
+    this.totalCpuDuration = 0;
+    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();
   }
-  update() {
+  updateFromInternalData() {
     this.endProfiling("cpu-started", "cpu-finished", "cpu-duration");
-    if (!this.info) {
+    if (this.webgpuNative) {
+      this.resolveTimestampsAsync();
+    } else if (!this.info) {
       this.processGpuQueries();
     } else {
       this.processWebGPUTimestamps();
     }
     this.updateAverages();
     this.resetCounters();
+    this.renderPanels();
   }
-  processWebGPUTimestamps() {
-    this.totalGpuDuration = this.info.render.timestamp;
-    this.totalGpuDurationCompute = this.info.compute.timestamp;
+  renderPanels() {
+    var _a;
+    const currentTime = performance.now();
+    if (!this.isWorker) {
+      this.frameTimes.push(currentTime);
+      while (this.frameTimes.length > 0 && this.frameTimes[0] <= currentTime - 1e3) {
+        this.frameTimes.shift();
+      }
+      const fps = Math.round(this.frameTimes.length);
+      this.addToAverage(fps, this.averageFps);
+    }
+    const shouldUpdateText = currentTime >= this.prevTextTime + 1e3 / this.logsPerSecond;
+    const shouldUpdateGraph = currentTime >= this.prevGraphTime + 1e3 / this.graphsPerSecond;
+    const suffix = this.isWorker ? " ⛭" : "";
+    this.updatePanelComponents(this.fpsPanel, this.averageFps, 0, shouldUpdateText, shouldUpdateGraph, suffix);
+    this.updatePanelComponents(this.msPanel, this.averageCpu, this.precision, shouldUpdateText, shouldUpdateGraph, "");
+    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;
+      if (this.texturePanels.size > 0 && !this.textureUpdatePending) {
+        this.textureUpdatePending = true;
+        this.updateTexturePanels().finally(() => {
+          this.textureUpdatePending = false;
+        });
+      }
+      this.captureStatsGLNodes();
+    }
+    if (this.vsyncPanel !== null) {
+      this.detectVSync(currentTime);
+      const vsyncValue = ((_a = this.detectedVSync) == null ? void 0 : _a.refreshRate) || 0;
+      if (shouldUpdateText && vsyncValue > 0) {
+        this.vsyncPanel.update(vsyncValue, vsyncValue);
+      }
+    }
   }
   resetCounters() {
     this.renderCount = 0;
     this.totalCpuDuration = 0;
-    this.beginTime = this.endInternal();
+    this.beginTime = performance.now();
   }
   resizePanel(panel2) {
     panel2.canvas.style.position = "absolute";
@@ -258,23 +318,179 @@ const _Stats = class _Stats2 {
     }
     this.mode = id;
   }
-  processGpuQueries() {
-    if (!this.gl || !this.ext)
+  // ==========================================================================
+  // Texture Panel API
+  // ==========================================================================
+  /**
+   * Add a new texture preview panel
+   * @param name - Label for the texture panel
+   * @returns The created PanelTexture instance
+   */
+  addTexturePanel(name) {
+    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 panel2 = new panelTexture.PanelTexture(name);
+    panel2.canvas.style.position = "relative";
+    panel2.canvas.style.left = "";
+    panel2.canvas.style.top = "";
+    this.texturePanelRow.appendChild(panel2.canvas);
+    this.texturePanels.set(name, panel2);
+    return panel2;
+  }
+  /**
+   * 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
+   */
+  setTexture(name, source) {
+    this.updateTexturePreviewDimensions();
+    if (this.gl && !this.textureCaptureWebGL) {
+      this.textureCaptureWebGL = new textureCapture.TextureCaptureWebGL(this.gl, this.texturePreviewWidth, this.texturePreviewHeight);
+    }
+    if (this.gpuDevice && !this.textureCaptureWebGPU) {
+      this.textureCaptureWebGPU = new textureCapture.TextureCaptureWebGPU(this.gpuDevice, this.texturePreviewWidth, this.texturePreviewHeight);
+    }
+    const panel2 = this.texturePanels.get(name);
+    if (source.isWebGLRenderTarget && this.gl) {
+      const webglSource = textureCapture.extractWebGLSource(source, this.gl);
+      if (webglSource) {
+        this.textureSourcesWebGL.set(name, {
+          target: source,
+          ...webglSource
+        });
+        if (panel2) {
+          panel2.setSourceSize(webglSource.width, webglSource.height);
+        }
+      }
       return;
-    this.totalGpuDuration = 0;
-    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);
-        if (available && !disjoint) {
-          const elapsed = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT);
-          const duration = elapsed * 1e-6;
-          this.totalGpuDuration += duration;
-          this.gl.deleteQuery(queryInfo.query);
-          this.gpuQueries.splice(index, 1);
+    }
+    if (source.isRenderTarget && this.gpuBackend) {
+      const gpuTexture = textureCapture.extractWebGPUSource(source, this.gpuBackend);
+      if (gpuTexture) {
+        this.textureSourcesWebGPU.set(name, gpuTexture);
+        if (panel2 && source.width && source.height) {
+          panel2.setSourceSize(source.width, source.height);
         }
       }
+      return;
+    }
+    if (source && typeof source.createView === "function") {
+      this.textureSourcesWebGPU.set(name, source);
+      return;
+    }
+  }
+  /**
+   * Set WebGL framebuffer source with explicit dimensions
+   * @param name - Panel name
+   * @param framebuffer - WebGL framebuffer
+   * @param width - Texture width
+   * @param height - Texture height
+   */
+  setTextureWebGL(name, framebuffer, width, height) {
+    this.updateTexturePreviewDimensions();
+    if (this.gl && !this.textureCaptureWebGL) {
+      this.textureCaptureWebGL = new textureCapture.TextureCaptureWebGL(this.gl, this.texturePreviewWidth, this.texturePreviewHeight);
+    }
+    this.textureSourcesWebGL.set(name, {
+      target: { isWebGLRenderTarget: true },
+      framebuffer,
+      width,
+      height
     });
+    const panel2 = this.texturePanels.get(name);
+    if (panel2) {
+      panel2.setSourceSize(width, height);
+    }
+  }
+  /**
+   * 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
+   */
+  setTextureBitmap(name, bitmap, sourceWidth, sourceHeight) {
+    const panel2 = this.texturePanels.get(name);
+    if (panel2) {
+      if (sourceWidth !== void 0 && sourceHeight !== void 0) {
+        panel2.setSourceSize(sourceWidth, sourceHeight);
+      }
+      panel2.updateTexture(bitmap);
+    }
+  }
+  /**
+   * Remove a texture panel
+   * @param name - Panel name to remove
+   */
+  removeTexturePanel(name) {
+    const panel2 = this.texturePanels.get(name);
+    if (panel2) {
+      panel2.dispose();
+      panel2.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
+   */
+  async updateTexturePanels() {
+    this.updateTexturePreviewDimensions();
+    if (this.textureCaptureWebGL) {
+      for (const [name, source] of this.textureSourcesWebGL) {
+        const panel2 = this.texturePanels.get(name);
+        if (panel2) {
+          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) {
+            panel2.updateTexture(bitmap);
+          }
+        }
+      }
+    }
+    if (this.textureCaptureWebGPU) {
+      for (const [name, gpuTexture] of this.textureSourcesWebGPU) {
+        const panel2 = this.texturePanels.get(name);
+        if (panel2) {
+          const bitmap = await this.textureCaptureWebGPU.capture(gpuTexture);
+          if (bitmap) {
+            panel2.updateTexture(bitmap);
+          }
+        }
+      }
+    }
+  }
+  /**
+   * Capture StatsGL nodes registered by the addon
+   */
+  captureStatsGLNodes() {
+    const captures = this._statsGLCaptures;
+    if (!captures || captures.size === 0 || !this.renderer)
+      return;
+    for (const captureData of captures.values()) {
+      if (captureData.capture) {
+        captureData.capture(this.renderer);
+      }
+    }
   }
   detectVSync(currentTime) {
     if (this.lastFrameTime === 0) {
@@ -311,52 +527,19 @@ const _Stats = class _Stats2 {
       this.detectedVSync = null;
     }
   }
-  endInternal() {
-    var _a;
-    const currentTime = performance.now();
-    this.frameTimes.push(currentTime);
-    while (this.frameTimes.length > 0 && this.frameTimes[0] <= currentTime - 1e3) {
-      this.frameTimes.shift();
-    }
-    const fps = Math.round(this.frameTimes.length);
-    this.addToAverage(fps, this.averageFps);
-    const shouldUpdateText = currentTime >= this.prevTextTime + 1e3 / this.logsPerSecond;
-    const shouldUpdateGraph = currentTime >= this.prevGraphTime + 1e3 / 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 = ((_a = this.detectedVSync) == null ? void 0 : _a.refreshRate) || 0;
-      if (shouldUpdateText && vsyncValue > 0) {
-        this.vsyncPanel.update(vsyncValue, vsyncValue);
-      }
-    }
-    return currentTime;
-  }
-  updatePanelComponents(panel2, averageArray, precision, shouldUpdateText, shouldUpdateGraph) {
+  updatePanelComponents(panel2, averageArray, precision, shouldUpdateText, shouldUpdateGraph, suffix = "") {
     if (!panel2 || averageArray.logs.length === 0)
       return;
-    if (!(panel2.name in this.lastMin)) {
-      this.lastMin[panel2.name] = Infinity;
-      this.lastMax[panel2.name] = 0;
-      this.lastValue[panel2.name] = 0;
+    const key = String(panel2.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[panel2.name] = Math.max(...averageArray.logs);
-    this.lastMin[panel2.name] = Math.min(this.lastMin[panel2.name], currentValue);
-    this.lastValue[panel2.name] = this.lastValue[panel2.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;
     const graphMax = Math.max(
       Math.max(...averageArray.logs),
       ...averageArray.graph.slice(-this.samplesGraph)
@@ -364,9 +547,10 @@ const _Stats = class _Stats2 {
     this.updateCounter++;
     if (shouldUpdateText) {
       panel2.update(
-        this.lastValue[panel2.name],
-        this.lastMax[panel2.name],
-        precision
+        this.lastValue[key],
+        this.lastMax[key],
+        precision,
+        suffix
       );
     }
     if (shouldUpdateGraph) {
@@ -376,36 +560,6 @@ const _Stats = class _Stats2 {
       );
     }
   }
-  beginProfiling(marker) {
-    if (window.performance) {
-      try {
-        window.performance.clearMarks(marker);
-        window.performance.mark(marker);
-      } catch (error) {
-        console.debug("Stats: Performance marking failed:", error);
-      }
-    }
-  }
-  endProfiling(startMarker, endMarker, measureName) {
-    if (!window.performance || !endMarker || !startMarker)
-      return;
-    try {
-      const entries = window.performance.getEntriesByName(startMarker, "mark");
-      if (entries.length === 0) {
-        this.beginProfiling(startMarker);
-      }
-      window.performance.clearMarks(endMarker);
-      window.performance.mark(endMarker);
-      window.performance.clearMeasures(measureName);
-      const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
-      this.totalCpuDuration += cpuMeasure.duration;
-      window.performance.clearMarks(startMarker);
-      window.performance.clearMarks(endMarker);
-      window.performance.clearMeasures(measureName);
-    } catch (error) {
-      console.debug("Stats: Performance measurement failed:", error);
-    }
-  }
   updatePanel(panel2, averageArray, precision = 2) {
     if (!panel2 || averageArray.logs.length === 0)
       return;
@@ -445,46 +599,65 @@ const _Stats = class _Stats2 {
       }
     }
   }
-  updateAverages() {
-    this.addToAverage(this.totalCpuDuration, this.averageCpu);
-    this.addToAverage(this.totalGpuDuration, this.averageGpu);
-    if (this.info && this.totalGpuDurationCompute !== void 0) {
-      this.addToAverage(this.totalGpuDurationCompute, this.averageGpuCompute);
-    }
-  }
-  addToAverage(value, averageArray) {
-    averageArray.logs.push(value);
-    if (averageArray.logs.length > this.samplesLog) {
-      averageArray.logs = averageArray.logs.slice(-this.samplesLog);
-    }
-    averageArray.graph.push(value);
-    if (averageArray.graph.length > this.samplesGraph) {
-      averageArray.graph = averageArray.graph.slice(-this.samplesGraph);
-    }
-  }
   get domElement() {
     return this.dom;
   }
-  patchThreeWebGPU(renderer) {
-    const originalAnimationLoop = renderer.info.reset;
-    const statsInstance = this;
-    renderer.info.reset = function() {
-      statsInstance.beginProfiling("cpu-started");
-      originalAnimationLoop.call(this);
-    };
-  }
-  patchThreeRenderer(renderer) {
-    const originalRenderMethod = renderer.render;
-    const statsInstance = this;
-    renderer.render = function(scene, camera) {
-      statsInstance.begin();
-      originalRenderMethod.call(this, scene, camera);
-      statsInstance.end();
-    };
-    this.threeRendererPatched = true;
+  /**
+   * Dispose of all resources. Call when done using Stats.
+   */
+  dispose() {
+    if (this.minimal) {
+      this.dom.removeEventListener("click", this.handleClick);
+    } else {
+      window.removeEventListener("resize", this.handleResize);
+    }
+    if (this.textureCaptureWebGL) {
+      this.textureCaptureWebGL.dispose();
+      this.textureCaptureWebGL = null;
+    }
+    if (this.textureCaptureWebGPU) {
+      this.textureCaptureWebGPU.dispose();
+      this.textureCaptureWebGPU = null;
+    }
+    for (const panel2 of this.texturePanels.values()) {
+      panel2.dispose();
+    }
+    this.texturePanels.clear();
+    this.textureSourcesWebGL.clear();
+    this.textureSourcesWebGPU.clear();
+    const captures = this._statsGLCaptures;
+    if (captures) {
+      for (const captureData of captures.values()) {
+        if (captureData.dispose) {
+          captureData.dispose();
+        }
+      }
+      captures.clear();
+    }
+    if (this.texturePanelRow) {
+      this.texturePanelRow.remove();
+      this.texturePanelRow = null;
+    }
+    this.dom.remove();
+    this.fpsPanel = null;
+    this.msPanel = null;
+    this.gpuPanel = null;
+    this.gpuPanelCompute = null;
+    this.vsyncPanel = null;
+    this.workerCpuPanel = null;
+    this.frameTimeHistory.length = 0;
+    this.averageWorkerCpu.logs.length = 0;
+    this.averageWorkerCpu.graph.length = 0;
+    super.dispose();
   }
 };
 _Stats.Panel = panel.Panel;
+_Stats.PanelTexture = panelTexture.PanelTexture;
 let Stats = _Stats;
-module.exports = Stats;
+exports.PanelTexture = panelTexture.PanelTexture;
+exports.TextureCaptureWebGL = textureCapture.TextureCaptureWebGL;
+exports.TextureCaptureWebGPU = textureCapture.TextureCaptureWebGPU;
+exports.StatsProfiler = profiler.StatsProfiler;
+exports.StatsGLCapture = statsGLNode.StatsGLCapture;
+exports.default = Stats;
 //# sourceMappingURL=main.cjs.map