the-nexus/performance-monitor.js

/**
 * Performance Monitor for The Nexus
 * 
 * Integrates Three.js Stats.js overlay with custom metrics:
 * - FPS counter
 * - Frame time (ms)
 * - Draw calls
 * - Agent LOD stats
 * 
 * Usage:
 *   PerformanceMonitor.init();
 *   PerformanceMonitor.update(); // call in render loop
 *   PerformanceMonitor.show();
 *   PerformanceMonitor.hide();
 */

const PerformanceMonitor = (() => {
  let _stats = null;
  let _initialized = false;
  let _visible = false;
  let _panelMode = 0; // 0: FPS, 1: MS, 2: MB
  
  // Custom panel for draw calls
  let _drawCallsPanel = null;
  let _lodPanel = null;

  function init() {
    if (_initialized) return;
    
    // Create stats.js panels
    _stats = new Stats();
    _stats.showPanel(0); // 0: fps, 1: ms, 2: mb
    _stats.dom.style.cssText = 'position:fixed;top:10px;left:10px;z-index:10000;';
    _stats.dom.style.display = 'none'; // Hidden by default
    
    // Add custom draw calls panel
    _drawCallsPanel = _stats.addPanel(new Stats.Panel('DRAW', '#ff8', '#221'));
    
    // Add custom LOD panel
    _lodPanel = _stats.addPanel(new Stats.Panel('AGENTS', '#8ff', '#122'));
    
    document.body.appendChild(_stats.dom);
    _initialized = true;
    
    // Add keyboard shortcut (Shift+P)
    document.addEventListener('keydown', (e) => {
      if (e.shiftKey && e.key === 'P') {
        toggle();
      }
      if (_visible && e.key === ' ') {
        e.preventDefault();
        nextPanel();
      }
    });
    
    console.log('[PerformanceMonitor] Initialized. Press Shift+P to toggle, Space to cycle panels.');
  }

  function show() {
    if (!_initialized) init();
    _stats.dom.style.display = 'block';
    _visible = true;
  }

  function hide() {
    if (_stats) {
      _stats.dom.style.display = 'none';
      _visible = false;
    }
  }

  function toggle() {
    if (_visible) hide();
    else show();
  }

  function nextPanel() {
    if (!_stats) return;
    _panelMode = (_panelMode + 1) % 5;
    _stats.showPanel(_panelMode);
  }

  function update(renderer, scene, camera) {
    if (!_stats || !_visible) return;
    
    _stats.begin();
    
    // Update draw calls info
    if (renderer && renderer.info) {
      const info = renderer.info.render;
      _drawCallsPanel.update(info.calls, 1000);
    }
    
    // Update LOD stats
    if (window.LODSystem) {
      const lodStats = window.LODSystem.getStats();
      const total = lodStats.total || 1;
      const active = lodStats.mesh + lodStats.sprite;
      _lodPanel.update(active, total);
    }
    
    _stats.end();
  }

  function getSnapshot() {
    const snapshot = {
      timestamp: Date.now(),
      fps: _stats ? _stats.fps : 0,
      renderer: null,
      lod: null
    };
    
    if (typeof renderer !== 'undefined' && renderer && renderer.info) {
      snapshot.renderer = {
        calls: renderer.info.render.calls,
        triangles: renderer.info.render.triangles,
        points: renderer.info.render.points,
        lines: renderer.info.render.lines
      };
    }
    
    if (window.LODSystem) {
      snapshot.lod = window.LODSystem.getStats();
    }
    
    return snapshot;
  }

  return {
    init,
    show,
    hide,
    toggle,
    update,
    getSnapshot
  };
})();

// Stats.js library (inline for self-containment)
// From: https://github.com/mrdoob/stats.js
(function(global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.Stats = factory());
}(this, function() {
  var Stats = function() {
    var mode = 0;
    var container = document.createElement('div');
    container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
    container.addEventListener('click', function(event) {
      event.preventDefault();
      showPanel(++mode % container.children.length);
    }, false);

    function addPanel(panel) {
      container.appendChild(panel.dom);
      return panel;
    }

    function showPanel(id) {
      for (var i = 0; i < container.children.length; i++) {
        container.children[i].style.display = i === id ? 'block' : 'none';
      }
      mode = id;
    }

    var beginTime = (performance || Date).now();
    var prevTime = beginTime;
    var frames = 0;
    var fpsPanel = addPanel(new Stats.Panel('FPS', '#0ff', '#002'));
    var msPanel = addPanel(new Stats.Panel('MS', '#0f0', '#020'));

    if (self.performance && self.performance.memory) {
      var memPanel = addPanel(new Stats.Panel('MB', '#f08', '#201'));
    }

    showPanel(0);

    return {
      REVISION: 16,
      dom: container,
      addPanel: addPanel,
      showPanel: showPanel,
      begin: function() {
        beginTime = (performance || Date).now();
      },
      end: function() {
        frames++;
        var time = (performance || Date).now();
        msPanel.update(time - beginTime, 200);
        if (time >= prevTime + 1000) {
          fpsPanel.update((frames * 1000) / (time - prevTime), 100);
          prevTime = time;
          frames = 0;
          if (memPanel) {
            var memory = performance.memory;
            memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);
          }
        }
        return time;
      },
      update: function() {
        beginTime = this.end();
      },
      // Expose fps for getSnapshot
      get fps() {
        return fpsPanel ? fpsPanel._value : 0;
      }
    };
  };

  Stats.Panel = function(name, fg, bg) {
    var min = Infinity, max = 0, round = Math.round;
    var PR = round(window.devicePixelRatio || 1);

    var WIDTH = 80 * PR, HEIGHT = 48 * PR,
        TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
        GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
        GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;

    var canvas = document.createElement('canvas');
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    canvas.style.cssText = 'width:80px;height:48px';

    var context = canvas.getContext('2d');
    context.font = 'bold ' + (9 * PR) + 'px Helvetica,Arial,sans-serif';
    context.textBaseline = 'top';

    context.fillStyle = bg;
    context.fillRect(0, 0, WIDTH, HEIGHT);

    context.fillStyle = fg;
    context.fillText(name, TEXT_X, TEXT_Y);
    context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);

    context.fillStyle = bg;
    context.globalAlpha = 0.9;
    context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);

    return {
      dom: canvas,
      _value: 0,
      update: function(value, maxValue) {
        this._value = value;
        min = Math.min(min, value);
        max = Math.max(max, value);

        context.fillStyle = bg;
        context.globalAlpha = 1;
        context.fillRect(0, 0, WIDTH, GRAPH_Y);
        context.fillStyle = fg;
        context.fillText(round(value) + ' ' + name + ' (' + round(min) + '-' + round(max) + ')', TEXT_X, TEXT_Y);

        context.globalAlpha = 0.9;
        context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);

        context.fillStyle = bg;
        context.globalAlpha = 0.1;
        context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);

        context.fillStyle = fg;
        context.globalAlpha = 1;
        context.fillRect(GRAPH_X, GRAPH_Y + GRAPH_HEIGHT - (value / maxValue) * GRAPH_HEIGHT, 1, (value / maxValue) * GRAPH_HEIGHT);
      }
    };
  };

  return Stats;
}));

window.PerformanceMonitor = PerformanceMonitor;