Initial project import

node_modules/stats-gl/lib/main.ts

@@ -0,0 +1,501 @@
+import * as THREE from 'three';
+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 {
+  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 averageFps: AverageData = { logs: [], graph: [] };
+  private averageCpu: AverageData = { logs: [], graph: [] };
+  private averageGpu: AverageData = { logs: [], graph: [] };
+  private averageGpuCompute: AverageData = { logs: [], graph: [] };
+
+  static Panel = Panel;
+
+  constructor({
+    trackGPU = false,
+    logsPerSecond = 30,
+    samplesLog = 60,
+    samplesGraph = 10,
+    precision = 2,
+    minimal = false,
+    horizontal = true,
+    mode = 0
+  }: StatsOptions = {}) {
+    this.mode = mode;
+    this.horizontal = horizontal;
+    this.minimal = minimal;
+    this.trackGPU = trackGPU;
+    this.samplesLog = samplesLog;
+    this.samplesGraph = samplesGraph;
+    this.precision = precision;
+    this.logsPerSecond = logsPerSecond;
+
+    // Initialize DOM
+    this.dom = document.createElement('div');
+    this.initializeDOM();
+
+    // Initialize timing
+    this.beginTime = performance.now();
+    this.prevTime = this.beginTime;
+    this.prevCpuTime = this.beginTime;
+
+    // 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.setupEventListeners();
+  }
+
+
+  private initializeDOM(): void {
+    this.dom.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      opacity: 0.9;
+      z-index: 10000;
+      ${this.minimal ? 'cursor: pointer;' : ''}
+    `;
+  }
+
+  private setupEventListeners(): void {
+    if (this.minimal) {
+      this.dom.addEventListener('click', this.handleClick);
+      this.showPanel(this.mode);
+    } else {
+      window.addEventListener('resize', this.handleResize);
+    }
+  }
+
+  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;
+    }
+
+    if (this.handleThreeRenderer(canvasOrGL)) return;
+    if (await this.handleWebGPURenderer(canvasOrGL)) return;
+    if (!this.initializeWebGL(canvasOrGL)) return;
+
+  }
+
+  private handleThreeRenderer(renderer: any): boolean {
+    if (renderer.isWebGLRenderer && !this.threeRendererPatched) {
+      this.patchThreeRenderer(renderer);
+      this.gl = renderer.getContext();
+
+      if (this.trackGPU) {
+        this.initializeGPUTracking();
+      }
+      return true;
+    }
+    return false;
+  }
+
+  private async handleWebGPURenderer(renderer: any): Promise<boolean> {
+    if (renderer.isWebGPURenderer) {
+      if (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;
+  }
+
+  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);
+      }
+    }
+  }
+
+  public begin(): void {
+    if (!this.isRunningCPUProfiling) {
+      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);
+    }
+  }
+
+  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.info) {
+      this.processGpuQueries();
+    } else {
+      this.processWebGPUTimestamps();
+    }
+
+    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);
+  }
+
+  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';
+
+    if (this.minimal) {
+
+      panel.canvas.style.display = 'none';
+
+    } else {
+
+      panel.canvas.style.display = 'block';
+      if (this.horizontal) {
+        panel.canvas.style.top = '0px';
+        panel.canvas.style.left = offset * panel.WIDTH / panel.PR + 'px';
+      } else {
+        panel.canvas.style.left = '0px';
+        panel.canvas.style.top = offset * panel.HEIGHT / panel.PR + 'px';
+
+      }
+    }
+
+  }
+  addPanel(panel: Panel, offset: number) {
+
+    if (panel.canvas) {
+
+      this.dom.appendChild(panel.canvas);
+
+      this.resizePanel(panel, offset);
+
+    }
+
+    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;
+
+  }
+
+  processGpuQueries() {
+
+
+    if (!this.gl || !this.ext) 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;  // Convert nanoseconds to milliseconds
+          this.totalGpuDuration += duration;
+          this.gl.deleteQuery(queryInfo.query);
+          this.gpuQueries.splice(index, 1);  // Remove the processed query
+        }
+      }
+    });
+
+  }
+
+  endInternal() {
+
+    this.frames++;
+    const time = (performance || Date).now();
+    const elapsed = time - this.prevTime;
+
+    // Calculate FPS more frequently based on logsPerSecond
+    if (time >= this.prevCpuTime + 1000 / this.logsPerSecond) {
+      // Calculate FPS and round to nearest integer
+      const fps = Math.round((this.frames * 1000) / elapsed);
+
+      // Add to FPS averages
+      this.addToAverage(fps, this.averageFps);
+
+      // Update all panels
+      this.updatePanel(this.fpsPanel, this.averageFps, 0);
+      this.updatePanel(this.msPanel, this.averageCpu, this.precision);
+      this.updatePanel(this.gpuPanel, this.averageGpu, this.precision);
+
+      if (this.gpuPanelCompute) {
+        this.updatePanel(this.gpuPanelCompute, this.averageGpuCompute);
+      }
+
+      // Reset frame counter for next interval
+      this.frames = 0;
+      this.prevCpuTime = time;
+      this.prevTime = time;
+    }
+
+    return time;
+
+  }
+
+  addToAverage(value: number, averageArray: { logs: any; graph: any; }) {
+
+    averageArray.logs.push(value);
+    if (averageArray.logs.length > this.samplesLog) {
+
+      averageArray.logs.shift();
+
+    }
+
+    averageArray.graph.push(value);
+    if (averageArray.graph.length > this.samplesGraph) {
+
+      averageArray.graph.shift();
+
+    }
+
+  }
+
+  beginProfiling(marker: string) {
+
+    if (window.performance) {
+
+      window.performance.mark(marker);
+      this.isRunningCPUProfiling = true
+
+    }
+
+  }
+
+  endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string) {
+
+    if (window.performance && endMarker && this.isRunningCPUProfiling) {
+
+      window.performance.mark(endMarker);
+      const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
+      this.totalCpuDuration += cpuMeasure.duration;
+      this.isRunningCPUProfiling = false
+
+    }
+
+  }
+
+  updatePanel(panel: { update: any; } | null, averageArray: { logs: number[], graph: number[] }, precision = 2) {
+
+    if (averageArray.logs.length > 0) {
+
+      let sumLog = 0;
+      let max = 0.01;
+
+      for (let i = 0; i < averageArray.logs.length; i++) {
+
+        sumLog += averageArray.logs[i];
+
+        if (averageArray.logs[i] > max) {
+          max = averageArray.logs[i];
+        }
+
+      }
+
+      let sumGraph = 0;
+      let maxGraph = 0.01;
+      for (let i = 0; i < averageArray.graph.length; i++) {
+
+        sumGraph += averageArray.graph[i];
+
+        if (averageArray.graph[i] > maxGraph) {
+          maxGraph = averageArray.graph[i];
+        }
+
+      }
+
+      if (panel) {
+        panel.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, precision);
+      }
+
+    }
+  }
+
+  get domElement() {
+    // patch for some use case in threejs
+    return this.dom;
+
+  }
+
+  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
+
+      // Call the original render method
+      originalRenderMethod.call(this, scene, camera);
+
+      statsInstance.end(); // End tracking for this render call
+    };
+
+
+    this.threeRendererPatched = true;
+
+  }
+}
+
+
+export default Stats;

node_modules/stats-gl/lib/panel.ts

@@ -0,0 +1,167 @@
+class Panel {
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D | null;
+    name: string;
+    fg: string;
+    bg: string;
+    gradient: CanvasGradient | null;
+    PR: number;
+    WIDTH: number;
+    HEIGHT: number;
+    TEXT_X: number;
+    TEXT_Y: number;
+    GRAPH_X: number;
+    GRAPH_Y: number;
+    GRAPH_WIDTH: number;
+    GRAPH_HEIGHT: number;
+
+    constructor(name: string, fg: string, bg: string) {
+        this.name = name;
+        this.fg = fg;
+        this.bg = bg;
+        this.gradient = null;
+        this.PR = Math.round(window.devicePixelRatio || 1);
+
+        this.WIDTH = 90 * this.PR;
+        this.HEIGHT = 48 * this.PR;
+        this.TEXT_X = 3 * this.PR;
+        this.TEXT_Y = 2 * this.PR;
+        this.GRAPH_X = 3 * this.PR;
+        this.GRAPH_Y = 15 * this.PR;
+        this.GRAPH_WIDTH = 84 * this.PR;
+        this.GRAPH_HEIGHT = 30 * this.PR;
+
+        this.canvas = document.createElement('canvas');
+        this.canvas.width = this.WIDTH;
+        this.canvas.height = this.HEIGHT;
+        this.canvas.style.width = '90px';
+        this.canvas.style.height = '48px';
+        this.canvas.style.position = 'absolute';
+        this.canvas.style.cssText = 'width:90px;height:48px';
+
+        this.context = this.canvas.getContext('2d');
+        this.initializeCanvas();
+    }
+
+    private createGradient(): CanvasGradient {
+        if (!this.context) throw new Error('No context');
+
+        const gradient = this.context.createLinearGradient(
+            0,
+            this.GRAPH_Y,
+            0,
+            this.GRAPH_Y + this.GRAPH_HEIGHT
+        );
+
+        let startColor: string;
+        const endColor: string = this.fg;
+
+        switch (this.fg.toLowerCase()) {
+            case '#0ff': // Cyan
+                startColor = '#006666'; // Dark Cyan
+                break;
+            case '#0f0': // Green
+                startColor = '#006600'; // Dark Green
+                break;
+            case '#ff0': // Yellow
+                startColor = '#666600'; // Dark Yellow
+                break;
+            case '#e1e1e1': // Light Gray
+                startColor = '#666666'; // Medium Gray
+                break;
+            default:
+                startColor = this.bg;
+                break;
+        }
+
+        gradient.addColorStop(0, startColor);
+        gradient.addColorStop(1, endColor);
+
+        return gradient;
+    }
+
+    private initializeCanvas() {
+        if (!this.context) return;
+
+        this.context.font = 'bold ' + (9 * this.PR) + 'px Helvetica,Arial,sans-serif';
+        this.context.textBaseline = 'top';
+
+        // Create gradient
+        this.gradient = this.createGradient();
+
+        // Fill background
+        this.context.fillStyle = this.bg;
+        this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
+
+        // Draw text
+        this.context.fillStyle = this.fg;
+        this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
+
+        // Draw initial graph area
+        this.context.fillStyle = this.fg;
+        this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
+
+        // Apply semi-transparent background
+        this.context.fillStyle = this.bg;
+        this.context.globalAlpha = 0.9;
+        this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
+    }
+
+    update(
+        value: number,
+        valueGraph: number,
+        maxValue: number,
+        maxGraph: number,
+        decimals = 0
+    ) {
+        if (!this.context || !this.gradient) return;
+
+        const min = Math.min(Infinity, value);
+        const max = Math.max(maxValue, value);
+        maxGraph = Math.max(maxGraph, valueGraph);
+
+        // Clear and redraw background
+        this.context.globalAlpha = 1;
+        this.context.fillStyle = this.bg;
+        this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
+
+        // Draw text
+        this.context.fillStyle = this.fg;
+        this.context.fillText(
+            `${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
+                max.toFixed(decimals)
+            )})`,
+            this.TEXT_X,
+            this.TEXT_Y
+        );
+
+        // Shift the graph left
+        this.context.drawImage(
+            this.canvas,
+            this.GRAPH_X + this.PR,
+            this.GRAPH_Y,
+            this.GRAPH_WIDTH - this.PR,
+            this.GRAPH_HEIGHT,
+            this.GRAPH_X,
+            this.GRAPH_Y,
+            this.GRAPH_WIDTH - this.PR,
+            this.GRAPH_HEIGHT
+        );
+
+        // Draw new column with gradient
+        const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
+
+        if (columnHeight > 0) {
+            this.context.globalAlpha = 1;
+            this.context.fillStyle = this.gradient;
+            this.context.fillRect(
+                this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
+                this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
+                this.PR,
+                columnHeight
+            );
+        }
+    }
+}
+
+export { Panel };