stats-gl 3.7.0 → 4.0.0

package/lib/panel.ts

@@ -105,7 +105,7 @@ class Panel {
     }
 
     // Update only text portion
-    public update(value: number, maxValue: number, decimals: number = 0) {
+    public update(value: number, maxValue: number, decimals: number = 0, suffix: string = '') {
         if (!this.context || !this.gradient) return;
 
         const min = Math.min(Infinity, value);
@@ -116,11 +116,25 @@ class Panel {
         this.context.fillStyle = this.bg;
         this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
 
-        // Draw text
+        // Draw value and name
+        const valueAndName = `${value.toFixed(decimals)} ${this.name}`;
+        this.context.fillStyle = this.fg;
+        this.context.fillText(valueAndName, this.TEXT_X, this.TEXT_Y);
+
+        let textX = this.TEXT_X + this.context.measureText(valueAndName).width;
+
+        // Draw suffix in orange if present
+        if (suffix) {
+            this.context.fillStyle = '#f90';
+            this.context.fillText(suffix, textX, this.TEXT_Y);
+            textX += this.context.measureText(suffix).width;
+        }
+
+        // Draw range
         this.context.fillStyle = this.fg;
         this.context.fillText(
-            `${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(max.toFixed(decimals))})`,
-            this.TEXT_X,
+            ` (${min.toFixed(decimals)}-${parseFloat(max.toFixed(decimals))})`,
+            textX,
             this.TEXT_Y
         );
     }

package/lib/panelTexture.ts

@@ -0,0 +1,122 @@
+import { Panel } from './panel';
+
+class PanelTexture extends Panel {
+  private currentBitmap: ImageBitmap | null = null;
+  private sourceAspect: number = 1; // Source texture aspect ratio (width/height)
+
+  constructor(name: string) {
+    super(name, '#fff', '#111');
+    this.initializeCanvas();
+  }
+
+  public override initializeCanvas() {
+    if (!this.context) return;
+
+    this.context.imageSmoothingEnabled = true;
+    this.context.font = 'bold ' + (9 * this.PR) + 'px Helvetica,Arial,sans-serif';
+    this.context.textBaseline = 'top';
+
+    // Fill entire panel with black background for texture display
+    this.context.fillStyle = '#000';
+    this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
+
+    // Draw label overlay
+    this.drawLabelOverlay();
+  }
+
+  private drawLabelOverlay(): void {
+    if (!this.context) return;
+
+    // Semi-transparent background for label
+    this.context.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
+
+    // Draw label text
+    this.context.fillStyle = this.fg;
+    this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
+  }
+
+  /**
+   * Set the source texture aspect ratio for proper display
+   * @param width - Source texture width
+   * @param height - Source texture height
+   */
+  public setSourceSize(width: number, height: number): void {
+    this.sourceAspect = width / height;
+  }
+
+  public updateTexture(bitmap: ImageBitmap): void {
+    if (!this.context) return;
+
+    // Close previous bitmap to release GPU resources
+    if (this.currentBitmap) {
+      this.currentBitmap.close();
+    }
+    this.currentBitmap = bitmap;
+
+    // Clear entire panel
+    this.context.fillStyle = '#000';
+    this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
+
+    // Calculate destination rect maintaining aspect ratio for full panel
+    const panelAspect = this.WIDTH / this.HEIGHT;
+    let destWidth: number;
+    let destHeight: number;
+    let destX: number;
+    let destY: number;
+
+    if (this.sourceAspect > panelAspect) {
+      // Source is wider than panel - fit to width, letterbox top/bottom
+      destWidth = this.WIDTH;
+      destHeight = this.WIDTH / this.sourceAspect;
+      destX = 0;
+      destY = (this.HEIGHT - destHeight) / 2;
+    } else {
+      // Source is taller than panel - fit to height, pillarbox left/right
+      destHeight = this.HEIGHT;
+      destWidth = this.HEIGHT * this.sourceAspect;
+      destX = (this.WIDTH - destWidth) / 2;
+      destY = 0;
+    }
+
+    // Draw the bitmap with proper aspect ratio
+    this.context.drawImage(
+      bitmap,
+      destX,
+      destY,
+      destWidth,
+      destHeight
+    );
+
+    // Draw label overlay on top
+    this.drawLabelOverlay();
+  }
+
+  public setLabel(label: string): void {
+    this.name = label;
+    // Redraw label overlay with new name
+    this.drawLabelOverlay();
+  }
+
+  // Override update - not used for texture panels
+  public override update(_value: number, _maxValue: number, _decimals: number = 0, _suffix: string = ''): void {
+    // No-op for texture panels
+  }
+
+  // Override updateGraph - not used for texture panels
+  public override updateGraph(_valueGraph: number, _maxGraph: number): void {
+    // No-op for texture panels
+  }
+
+  /**
+   * Dispose of resources
+   */
+  public dispose(): void {
+    if (this.currentBitmap) {
+      this.currentBitmap.close();
+      this.currentBitmap = null;
+    }
+  }
+}
+
+export { PanelTexture };

package/lib/profiler.ts

@@ -0,0 +1,124 @@
+import { StatsCore, StatsCoreOptions, StatsData } from './core';
+import {
+  TextureCaptureWebGL,
+  TextureCaptureWebGPU,
+  extractWebGLSource,
+  extractWebGPUSource,
+  ThreeTextureSource
+} from './textureCapture';
+
+export interface StatsProfilerOptions extends StatsCoreOptions {}
+
+export class StatsProfiler extends StatsCore {
+  private textureCaptureWebGL: TextureCaptureWebGL | null = null;
+  private textureCaptureWebGPU: TextureCaptureWebGPU | null = null;
+
+  constructor(options: StatsProfilerOptions = {}) {
+    super(options);
+  }
+
+  public update(): void {
+    this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration');
+
+    if (!this.info) {
+      this.processGpuQueries();
+    } else {
+      this.processWebGPUTimestamps();
+    }
+
+    const fps = this.calculateFps();
+    this.addToAverage(fps, this.averageFps);
+
+    this.updateAverages();
+    this.resetCounters();
+  }
+
+  public getData(): StatsData {
+    return super.getData();
+  }
+
+  /**
+   * Capture a texture/render target to ImageBitmap for transfer to main thread
+   * @param source - Three.js RenderTarget, GPUTexture, or WebGLFramebuffer with dimensions
+   * @param sourceId - Unique identifier for this texture source (for per-source PBO buffering)
+   * @returns ImageBitmap suitable for postMessage transfer
+   */
+  public async captureTexture(
+    source: ThreeTextureSource | { framebuffer: WebGLFramebuffer; width: number; height: number } | any,
+    sourceId: string = 'default'
+  ): Promise<ImageBitmap | null> {
+    // Handle WebGL sources
+    if (this.gl) {
+      if (!this.textureCaptureWebGL) {
+        this.textureCaptureWebGL = new TextureCaptureWebGL(this.gl);
+      }
+
+      // Three.js WebGLRenderTarget
+      if ((source as ThreeTextureSource).isWebGLRenderTarget) {
+        const webglSource = extractWebGLSource(source as ThreeTextureSource, this.gl);
+        if (webglSource) {
+          return this.textureCaptureWebGL.capture(
+            webglSource.framebuffer,
+            webglSource.width,
+            webglSource.height,
+            sourceId
+          );
+        }
+      }
+
+      // Raw framebuffer with dimensions
+      if (source.framebuffer && source.width && source.height) {
+        return this.textureCaptureWebGL.capture(
+          source.framebuffer,
+          source.width,
+          source.height,
+          sourceId
+        );
+      }
+    }
+
+    // Handle WebGPU sources
+    if (this.gpuDevice) {
+      if (!this.textureCaptureWebGPU) {
+        this.textureCaptureWebGPU = new TextureCaptureWebGPU(this.gpuDevice);
+      }
+
+      // Three.js WebGPU RenderTarget
+      if ((source as ThreeTextureSource).isRenderTarget && this.gpuBackend) {
+        const gpuTexture = extractWebGPUSource(source as ThreeTextureSource, this.gpuBackend);
+        if (gpuTexture) {
+          return this.textureCaptureWebGPU.capture(gpuTexture);
+        }
+      }
+
+      // Raw GPUTexture
+      if (source && typeof source.createView === 'function') {
+        return this.textureCaptureWebGPU.capture(source);
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Dispose texture capture resources
+   */
+  public disposeTextureCapture(): void {
+    if (this.textureCaptureWebGL) {
+      this.textureCaptureWebGL.dispose();
+      this.textureCaptureWebGL = null;
+    }
+    if (this.textureCaptureWebGPU) {
+      this.textureCaptureWebGPU.dispose();
+      this.textureCaptureWebGPU = null;
+    }
+  }
+
+  /**
+   * Dispose of all resources
+   */
+  public override dispose(): void {
+    this.disposeTextureCapture();
+    super.dispose();
+  }
+}

package/lib/statsGLNode.ts

@@ -0,0 +1,124 @@
+/**
+ * TSL Node capture utilities for stats-gl
+ *
+ * For WebGPU TSL node capture with proper Node integration, use the addon:
+ *   import { statsGL } from 'stats-gl/addons/StatsGLNode.js';
+ *
+ * This file provides a simpler capture system that doesn't require
+ * extending Three.js Node class.
+ */
+
+interface StatsGLNodeData {
+  canvas: HTMLCanvasElement | OffscreenCanvas;
+  canvasTarget: any;
+  quad: any;
+  material: any;
+  node: any;
+}
+
+/**
+ * Manages TSL node capture for stats-gl (used internally)
+ */
+export class StatsGLCapture {
+  nodes: Map<string, StatsGLNodeData> = new Map();
+  width = 90;
+  height = 48;
+  private THREE: any;
+
+  constructor(THREE: any, width = 90, height = 48) {
+    this.THREE = THREE;
+    this.width = width;
+    this.height = height;
+  }
+
+  /**
+   * Update capture dimensions (e.g., on resize)
+   */
+  resize(width: number, height: number): void {
+    this.width = width;
+    this.height = height;
+
+    // Update all existing nodes
+    for (const [name, data] of this.nodes) {
+      if (data.canvas instanceof HTMLCanvasElement) {
+        data.canvas.width = width;
+        data.canvas.height = height;
+      } else if (data.canvas instanceof OffscreenCanvas) {
+        // OffscreenCanvas can't be resized - recreate
+        const newCanvas = new OffscreenCanvas(width, height);
+        data.canvas = newCanvas;
+        data.canvasTarget.setCanvas?.(newCanvas);
+      }
+      data.canvasTarget.setSize(width, height);
+    }
+  }
+
+  register(name: string, targetNode: any): StatsGLNodeData {
+    if (this.nodes.has(name)) return this.nodes.get(name)!;
+
+    const { CanvasTarget, NodeMaterial, QuadMesh, NoToneMapping, LinearSRGBColorSpace } = this.THREE;
+    const { renderOutput, vec3, vec4 } = this.THREE;
+
+    const canvas = typeof OffscreenCanvas !== 'undefined'
+      ? new OffscreenCanvas(this.width, this.height)
+      : document.createElement('canvas');
+    if (canvas instanceof HTMLCanvasElement) {
+      canvas.width = this.width;
+      canvas.height = this.height;
+    }
+
+    const canvasTarget = new CanvasTarget(canvas);
+    canvasTarget.setSize(this.width, this.height);
+
+    const material = new NodeMaterial();
+    material.outputNode = renderOutput(
+      vec4(vec3(targetNode), 1),
+      NoToneMapping,
+      LinearSRGBColorSpace
+    );
+
+    const quad = new QuadMesh(material);
+    const data: StatsGLNodeData = { canvas, canvasTarget, quad, material, node: targetNode };
+    this.nodes.set(name, data);
+    return data;
+  }
+
+  async capture(name: string, renderer: any): Promise<ImageBitmap | null> {
+    const data = this.nodes.get(name);
+    if (!data) return null;
+
+    try {
+      data.quad.render(renderer, data.canvasTarget);
+      return await createImageBitmap(data.canvas);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  remove(name: string): void {
+    const data = this.nodes.get(name);
+    if (data) {
+      // Dispose material if it has dispose method
+      if (data.material && data.material.dispose) {
+        data.material.dispose();
+      }
+      // Remove canvas from DOM if attached
+      if (data.canvas instanceof HTMLCanvasElement && data.canvas.parentNode) {
+        data.canvas.parentNode.removeChild(data.canvas);
+      }
+      this.nodes.delete(name);
+    }
+  }
+
+  /**
+   * Dispose all capture resources
+   */
+  dispose(): void {
+    // Copy keys to array to avoid modifying map while iterating
+    const names = Array.from(this.nodes.keys());
+    for (const name of names) {
+      this.remove(name);
+    }
+    this.nodes.clear();
+  }
+}