@2112-lab/central-plant 0.1.0

package/dist/esm/src/performanceMonitor.js

@@ -0,0 +1,712 @@
+import { createClass as _createClass, classCallCheck as _classCallCheck } from '../_virtual/_rollupPluginBabelHelpers.js';
+import 'three';
+import { logger } from './debugLogger.js';
+
+var PerformanceMonitor = /*#__PURE__*/function () {
+  function PerformanceMonitor() {
+    var renderer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    _classCallCheck(this, PerformanceMonitor);
+    this.renderer = renderer;
+    this.stats = {
+      fps: {
+        current: 0,
+        average: 0,
+        min: Infinity,
+        max: 0,
+        history: []
+      },
+      frameTime: {
+        current: 0,
+        average: 0,
+        min: Infinity,
+        max: 0,
+        history: []
+      },
+      memory: {
+        geometries: 0,
+        textures: 0,
+        programs: 0,
+        heapUsed: 0,
+        heapTotal: 0
+      },
+      drawCalls: {
+        current: 0,
+        average: 0,
+        triangles: 0,
+        points: 0,
+        lines: 0
+      },
+      gpu: {
+        memoryUsage: 0,
+        extensions: []
+      },
+      scene: {
+        objects: 0,
+        lights: 0,
+        meshes: 0,
+        materials: 0,
+        visible: 0
+      }
+    };
+    this.frameCount = 0;
+    this.historySize = 120; // 120 frames = ~2 seconds at 60fps
+    this.isRunning = false;
+    this.lastUpdateTime = 0;
+    this.warningThresholds = {
+      fps: 30,
+      frameTime: 16,
+      // ms (60fps)
+      drawCalls: 1000,
+      triangles: 1000000,
+      geometries: 1000,
+      textures: 100
+    };
+
+    // Event callbacks
+    this.callbacks = {
+      update: [],
+      warning: []
+    };
+
+    // Bind methods
+    this._update = this._update.bind(this);
+  }
+
+  /**
+   * Start the performance monitor
+   */
+  return _createClass(PerformanceMonitor, [{
+    key: "start",
+    value: function start() {
+      if (this.isRunning) return;
+      this.isRunning = true;
+      this.lastUpdateTime = performance.now();
+
+      // Get GPU info if available
+      this._getGPUInfo();
+
+      // Start update loop
+      requestAnimationFrame(this._update);
+      logger.info('Performance monitoring started');
+    }
+
+    /**
+     * Stop the performance monitor
+     */
+  }, {
+    key: "stop",
+    value: function stop() {
+      this.isRunning = false;
+      logger.info('Performance monitoring stopped');
+    }
+
+    /**
+     * Reset statistics
+     */
+  }, {
+    key: "reset",
+    value: function reset() {
+      // Reset FPS stats
+      this.stats.fps = {
+        current: 0,
+        average: 0,
+        min: Infinity,
+        max: 0,
+        history: []
+      };
+
+      // Reset frame time stats
+      this.stats.frameTime = {
+        current: 0,
+        average: 0,
+        min: Infinity,
+        max: 0,
+        history: []
+      };
+
+      // Reset frame count
+      this.frameCount = 0;
+      logger.info('Performance statistics reset');
+    }
+
+    /**
+     * Update method called every animation frame
+     */
+  }, {
+    key: "_update",
+    value: function _update() {
+      if (!this.isRunning) return;
+
+      // Calculate frame time
+      var now = performance.now();
+      var frameTime = now - this.lastUpdateTime;
+      this.lastUpdateTime = now;
+
+      // Calculate FPS
+      var fps = 1000 / frameTime;
+
+      // Update frame time stats
+      this._updateStat('frameTime', frameTime);
+
+      // Update FPS stats
+      this._updateStat('fps', fps);
+
+      // Get WebGL info if renderer is available
+      if (this.renderer) {
+        this._getWebGLInfo();
+      }
+
+      // Get memory info
+      this._getMemoryInfo();
+
+      // Increment frame count
+      this.frameCount++;
+
+      // Check for warnings
+      this._checkWarnings();
+
+      // Trigger update callbacks
+      this._triggerCallbacks('update', this.stats);
+
+      // Continue update loop
+      requestAnimationFrame(this._update);
+    }
+
+    /**
+     * Update statistics for a specific metric
+     */
+  }, {
+    key: "_updateStat",
+    value: function _updateStat(metric, value) {
+      if (!this.stats[metric]) return;
+      var stats = this.stats[metric];
+
+      // Update current value
+      stats.current = value;
+
+      // Update min and max
+      stats.min = Math.min(stats.min, value);
+      stats.max = Math.max(stats.max, value);
+
+      // Add to history
+      stats.history.push(value);
+
+      // Limit history size
+      if (stats.history.length > this.historySize) {
+        stats.history.shift();
+      }
+
+      // Calculate average
+      stats.average = stats.history.reduce(function (sum, val) {
+        return sum + val;
+      }, 0) / stats.history.length;
+    }
+
+    /**
+     * Get WebGL info from the renderer
+     */
+  }, {
+    key: "_getWebGLInfo",
+    value: function _getWebGLInfo() {
+      var _info$render, _info$render2, _info$memory, _info$memory2, _info$programs;
+      if (!this.renderer) return;
+      var info = this.renderer.info;
+
+      // Update draw calls
+      this.stats.drawCalls.current = ((_info$render = info.render) === null || _info$render === void 0 ? void 0 : _info$render.calls) || 0;
+      this.stats.drawCalls.triangles = ((_info$render2 = info.render) === null || _info$render2 === void 0 ? void 0 : _info$render2.triangles) || 0;
+
+      // Add draw calls to history and calculate average
+      if (!this.stats.drawCalls.history) {
+        this.stats.drawCalls.history = [];
+      }
+      this.stats.drawCalls.history.push(this.stats.drawCalls.current);
+      if (this.stats.drawCalls.history.length > this.historySize) {
+        this.stats.drawCalls.history.shift();
+      }
+      this.stats.drawCalls.average = this.stats.drawCalls.history.reduce(function (sum, val) {
+        return sum + val;
+      }, 0) / this.stats.drawCalls.history.length;
+
+      // Update memory stats
+      this.stats.memory.geometries = ((_info$memory = info.memory) === null || _info$memory === void 0 ? void 0 : _info$memory.geometries) || 0;
+      this.stats.memory.textures = ((_info$memory2 = info.memory) === null || _info$memory2 === void 0 ? void 0 : _info$memory2.textures) || 0;
+
+      // Update programs count
+      this.stats.memory.programs = ((_info$programs = info.programs) === null || _info$programs === void 0 ? void 0 : _info$programs.length) || 0;
+    }
+
+    /**
+     * Get system memory info
+     */
+  }, {
+    key: "_getMemoryInfo",
+    value: function _getMemoryInfo() {
+      if (typeof window !== 'undefined' && window.performance && window.performance.memory) {
+        this.stats.memory.heapUsed = window.performance.memory.usedJSHeapSize;
+        this.stats.memory.heapTotal = window.performance.memory.totalJSHeapSize;
+      } else {
+        // Fallback to navigator.deviceMemory if available
+        if (typeof navigator !== 'undefined' && navigator.deviceMemory) {
+          this.stats.memory.deviceMemory = navigator.deviceMemory;
+        }
+      }
+    }
+
+    /**
+     * Get GPU info if available
+     */
+  }, {
+    key: "_getGPUInfo",
+    value: function _getGPUInfo() {
+      if (!this.renderer) return;
+      var gl = this.renderer.getContext();
+
+      // Get extensions
+      var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+      if (debugInfo) {
+        this.stats.gpu.vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
+        this.stats.gpu.renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+      } else {
+        this.stats.gpu.vendor = gl.getParameter(gl.VENDOR);
+        this.stats.gpu.renderer = gl.getParameter(gl.RENDERER);
+      }
+
+      // Get extensions
+      this.stats.gpu.extensions = gl.getSupportedExtensions();
+    }
+
+    /**
+     * Check for performance warnings
+     */
+  }, {
+    key: "_checkWarnings",
+    value: function _checkWarnings() {
+      var warnings = [];
+
+      // Check FPS
+      if (this.stats.fps.average < this.warningThresholds.fps) {
+        warnings.push({
+          type: 'fps',
+          message: "Low FPS: ".concat(this.stats.fps.average.toFixed(1), " (threshold: ").concat(this.warningThresholds.fps, ")"),
+          value: this.stats.fps.average,
+          threshold: this.warningThresholds.fps
+        });
+      }
+
+      // Check frame time
+      if (this.stats.frameTime.average > this.warningThresholds.frameTime) {
+        warnings.push({
+          type: 'frameTime',
+          message: "High frame time: ".concat(this.stats.frameTime.average.toFixed(1), "ms (threshold: ").concat(this.warningThresholds.frameTime, "ms)"),
+          value: this.stats.frameTime.average,
+          threshold: this.warningThresholds.frameTime
+        });
+      }
+
+      // Check draw calls
+      if (this.stats.drawCalls.average > this.warningThresholds.drawCalls) {
+        warnings.push({
+          type: 'drawCalls',
+          message: "High draw calls: ".concat(this.stats.drawCalls.average.toFixed(0), " (threshold: ").concat(this.warningThresholds.drawCalls, ")"),
+          value: this.stats.drawCalls.average,
+          threshold: this.warningThresholds.drawCalls
+        });
+      }
+
+      // Check triangles
+      if (this.stats.drawCalls.triangles > this.warningThresholds.triangles) {
+        warnings.push({
+          type: 'triangles',
+          message: "High triangle count: ".concat(this.stats.drawCalls.triangles.toFixed(0), " (threshold: ").concat(this.warningThresholds.triangles, ")"),
+          value: this.stats.drawCalls.triangles,
+          threshold: this.warningThresholds.triangles
+        });
+      }
+
+      // Check geometries
+      if (this.stats.memory.geometries > this.warningThresholds.geometries) {
+        warnings.push({
+          type: 'geometries',
+          message: "High geometry count: ".concat(this.stats.memory.geometries, " (threshold: ").concat(this.warningThresholds.geometries, ")"),
+          value: this.stats.memory.geometries,
+          threshold: this.warningThresholds.geometries
+        });
+      }
+
+      // Check textures
+      if (this.stats.memory.textures > this.warningThresholds.textures) {
+        warnings.push({
+          type: 'textures',
+          message: "High texture count: ".concat(this.stats.memory.textures, " (threshold: ").concat(this.warningThresholds.textures, ")"),
+          value: this.stats.memory.textures,
+          threshold: this.warningThresholds.textures
+        });
+      }
+
+      // Trigger warnings if any
+      if (warnings.length > 0) {
+        this._triggerCallbacks('warning', warnings);
+      }
+    }
+
+    /**
+     * Register an event callback
+     */
+  }, {
+    key: "on",
+    value: function on(event, callback) {
+      if (!this.callbacks[event]) return;
+      this.callbacks[event].push(callback);
+    }
+
+    /**
+     * Remove an event callback
+     */
+  }, {
+    key: "off",
+    value: function off(event, callback) {
+      if (!this.callbacks[event]) return;
+      var index = this.callbacks[event].indexOf(callback);
+      if (index !== -1) {
+        this.callbacks[event].splice(index, 1);
+      }
+    }
+
+    /**
+     * Trigger callbacks for an event
+     */
+  }, {
+    key: "_triggerCallbacks",
+    value: function _triggerCallbacks(event, data) {
+      if (!this.callbacks[event]) return;
+      this.callbacks[event].forEach(function (callback) {
+        try {
+          callback(data);
+        } catch (error) {
+          console.error("Error in performance monitor ".concat(event, " callback:"), error);
+        }
+      });
+    }
+
+    /**
+     * Log performance summary to console
+     */
+  }, {
+    key: "logSummary",
+    value: function logSummary() {
+      console.group('📊 Performance Summary');
+      console.log("FPS: ".concat(this.stats.fps.current.toFixed(1), " (avg: ").concat(this.stats.fps.average.toFixed(1), ", min: ").concat(this.stats.fps.min.toFixed(1), ", max: ").concat(this.stats.fps.max.toFixed(1), ")"));
+      console.log("Frame Time: ".concat(this.stats.frameTime.current.toFixed(1), "ms (avg: ").concat(this.stats.frameTime.average.toFixed(1), "ms)"));
+      console.log("Draw Calls: ".concat(this.stats.drawCalls.current, " (avg: ").concat(this.stats.drawCalls.average.toFixed(1), ")"));
+      console.log("Triangles: ".concat(this.stats.drawCalls.triangles));
+      console.log("Geometries: ".concat(this.stats.memory.geometries));
+      console.log("Textures: ".concat(this.stats.memory.textures));
+      console.log("Shader Programs: ".concat(this.stats.memory.programs));
+      if (this.stats.gpu.renderer) {
+        console.log("GPU: ".concat(this.stats.gpu.renderer));
+      }
+      console.log("Total Frames: ".concat(this.frameCount));
+      console.groupEnd();
+      return this.stats;
+    }
+
+    /**
+     * Export performance data
+     */
+  }, {
+    key: "exportData",
+    value: function exportData() {
+      return {
+        timestamp: new Date().toISOString(),
+        frameCount: this.frameCount,
+        stats: JSON.parse(JSON.stringify(this.stats)),
+        gpu: this.stats.gpu,
+        warnings: this._getActiveWarnings()
+      };
+    }
+
+    /**
+     * Get active warnings
+     */
+  }, {
+    key: "_getActiveWarnings",
+    value: function _getActiveWarnings() {
+      var warnings = [];
+
+      // Check all thresholds
+      if (this.stats.fps.average < this.warningThresholds.fps) {
+        warnings.push({
+          type: 'fps',
+          value: this.stats.fps.average
+        });
+      }
+      if (this.stats.frameTime.average > this.warningThresholds.frameTime) {
+        warnings.push({
+          type: 'frameTime',
+          value: this.stats.frameTime.average
+        });
+      }
+      if (this.stats.drawCalls.average > this.warningThresholds.drawCalls) {
+        warnings.push({
+          type: 'drawCalls',
+          value: this.stats.drawCalls.average
+        });
+      }
+      if (this.stats.drawCalls.triangles > this.warningThresholds.triangles) {
+        warnings.push({
+          type: 'triangles',
+          value: this.stats.drawCalls.triangles
+        });
+      }
+      if (this.stats.memory.geometries > this.warningThresholds.geometries) {
+        warnings.push({
+          type: 'geometries',
+          value: this.stats.memory.geometries
+        });
+      }
+      if (this.stats.memory.textures > this.warningThresholds.textures) {
+        warnings.push({
+          type: 'textures',
+          value: this.stats.memory.textures
+        });
+      }
+      return warnings;
+    }
+
+    /**
+     * Set warning thresholds
+     */
+  }, {
+    key: "setWarningThresholds",
+    value: function setWarningThresholds(thresholds) {
+      Object.assign(this.warningThresholds, thresholds);
+    }
+  }]);
+}();
+
+/**
+ * Performance UI class for displaying performance statistics
+ */
+var PerformanceUI = /*#__PURE__*/function () {
+  function PerformanceUI(monitor, container) {
+    var theme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'dark';
+    _classCallCheck(this, PerformanceUI);
+    this.monitor = monitor;
+    this.container = container;
+    this.theme = theme;
+    this.isVisible = false;
+    this.element = null;
+    this.graphs = {};
+    this._createUI();
+    this._setupUpdateLoop();
+  }
+
+  /**
+   * Create the UI element
+   */
+  return _createClass(PerformanceUI, [{
+    key: "_createUI",
+    value: function _createUI() {
+      var _this = this;
+      // Create container element
+      this.element = document.createElement('div');
+      this.element.className = 'performance-monitor';
+      this.element.style.position = 'absolute';
+      this.element.style.top = '10px';
+      this.element.style.right = '10px';
+      this.element.style.zIndex = '1000';
+      this.element.style.padding = '10px';
+      this.element.style.borderRadius = '5px';
+      this.element.style.fontFamily = 'monospace';
+      this.element.style.fontSize = '12px';
+      this.element.style.lineHeight = '1.2';
+      this.element.style.transition = 'opacity 0.3s ease';
+      this.element.style.userSelect = 'none';
+
+      // Apply theme
+      this.setTheme(this.theme);
+
+      // Create header with close button
+      var header = document.createElement('div');
+      header.style.display = 'flex';
+      header.style.justifyContent = 'space-between';
+      header.style.marginBottom = '5px';
+      var title = document.createElement('div');
+      title.textContent = 'Performance Monitor';
+      title.style.fontWeight = 'bold';
+      var closeButton = document.createElement('div');
+      closeButton.textContent = '×';
+      closeButton.style.cursor = 'pointer';
+      closeButton.style.paddingLeft = '10px';
+      closeButton.onclick = function () {
+        return _this.hide();
+      };
+      header.appendChild(title);
+      header.appendChild(closeButton);
+      this.element.appendChild(header);
+
+      // Create stats container
+      var statsContainer = document.createElement('div');
+      this.statsElement = statsContainer;
+      this.element.appendChild(statsContainer);
+
+      // Hide initially
+      this.element.style.opacity = '0';
+      this.element.style.pointerEvents = 'none';
+    }
+
+    /**
+     * Set UI theme
+     */
+  }, {
+    key: "setTheme",
+    value: function setTheme(theme) {
+      this.theme = theme;
+      if (theme === 'dark') {
+        this.element.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+        this.element.style.color = 'white';
+        this.element.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
+      } else {
+        this.element.style.backgroundColor = 'rgba(255, 255, 255, 0.85)';
+        this.element.style.color = 'black';
+        this.element.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';
+      }
+    }
+
+    /**
+     * Setup update loop for refreshing the UI
+     */
+  }, {
+    key: "_setupUpdateLoop",
+    value: function _setupUpdateLoop() {
+      var _this2 = this;
+      var updateStats = function updateStats() {
+        if (!_this2.isVisible || !_this2.monitor) return;
+
+        // Create stats HTML
+        var html = '';
+
+        // FPS
+        var fpsColor = _this2._getMetricColor(_this2.monitor.stats.fps.current, 60, 30);
+        html += "<div>FPS: <span style=\"color: ".concat(fpsColor, "\">").concat(_this2.monitor.stats.fps.current.toFixed(1), "</span> ");
+        html += "(avg: ".concat(_this2.monitor.stats.fps.average.toFixed(1), ")</div>");
+
+        // Frame time
+        var frameTimeColor = _this2._getMetricColor(16 - _this2.monitor.stats.frameTime.current, 0, 16, true);
+        html += "<div>Frame: <span style=\"color: ".concat(frameTimeColor, "\">").concat(_this2.monitor.stats.frameTime.current.toFixed(1), "ms</span></div>");
+
+        // Draw calls
+        var drawCallColor = _this2._getMetricColor(1000 - _this2.monitor.stats.drawCalls.current, 0, 1000, true);
+        html += "<div>Calls: <span style=\"color: ".concat(drawCallColor, "\">").concat(_this2.monitor.stats.drawCalls.current, "</span> ");
+        html += "Tris: ".concat(_this2._formatNumber(_this2.monitor.stats.drawCalls.triangles), "</div>");
+
+        // Memory
+        html += "<div>Geo: ".concat(_this2.monitor.stats.memory.geometries, " ");
+        html += "Tex: ".concat(_this2.monitor.stats.memory.textures, "</div>");
+
+        // Update stats element
+        _this2.statsElement.innerHTML = html;
+      };
+
+      // Update every 500ms to avoid performance impact
+      setInterval(updateStats, 500);
+    }
+
+    /**
+     * Get color for a metric based on its value
+     */
+  }, {
+    key: "_getMetricColor",
+    value: function _getMetricColor(value, good, bad) {
+      var invert = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      // Normalize value between 0 and 1
+      var normalized = (value - bad) / (good - bad);
+
+      // Clamp between 0 and 1
+      normalized = Math.max(0, Math.min(1, normalized));
+      if (invert) {
+        normalized = 1 - normalized;
+      }
+
+      // Green to yellow to red
+      var r = normalized < 0.5 ? 255 : Math.floor(255 * (1 - normalized) * 2);
+      var g = normalized > 0.5 ? 255 : Math.floor(255 * normalized * 2);
+      var b = 0;
+      return "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
+    }
+
+    /**
+     * Format number for display
+     */
+  }, {
+    key: "_formatNumber",
+    value: function _formatNumber(number) {
+      if (number >= 1000000) {
+        return (number / 1000000).toFixed(1) + 'M';
+      } else if (number >= 1000) {
+        return (number / 1000).toFixed(1) + 'K';
+      }
+      return number.toString();
+    }
+
+    /**
+     * Show the UI
+     */
+  }, {
+    key: "show",
+    value: function show() {
+      if (this.isVisible) return;
+      this.isVisible = true;
+      this.element.style.opacity = '1';
+      this.element.style.pointerEvents = 'auto';
+
+      // Add to container if not already added
+      if (!this.element.parentElement) {
+        this.container.appendChild(this.element);
+      }
+    }
+
+    /**
+     * Hide the UI
+     */
+  }, {
+    key: "hide",
+    value: function hide() {
+      if (!this.isVisible) return;
+      this.isVisible = false;
+      this.element.style.opacity = '0';
+      this.element.style.pointerEvents = 'none';
+    }
+
+    /**
+     * Toggle visibility
+     */
+  }, {
+    key: "toggle",
+    value: function toggle() {
+      if (this.isVisible) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+
+    /**
+     * Clean up resources
+     */
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      if (this.element.parentElement) {
+        this.element.parentElement.removeChild(this.element);
+      }
+    }
+  }]);
+}();
+var performanceMonitor = {
+  PerformanceMonitor: PerformanceMonitor,
+  PerformanceUI: PerformanceUI
+};
+
+export { PerformanceMonitor, PerformanceUI, performanceMonitor as default };