@2112-lab/central-plant 0.1.4 → 0.1.6

package/dist/esm/src/managers/system/performanceMonitor.js

@@ -1 +1,858 @@
-import{createClass as t,createForOfIteratorHelper as e,classCallCheck as i}from"../../../_virtual/_rollupPluginBabelHelpers.js";var s=function(){return t(function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;i(this,t),this.renderer=e,this.stats={fps:{current:0,average:0,min:1/0,max:0,history:[]},frameTime:{current:0,average:0,min:1/0,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.lastTime=performance.now(),this.updateInterval=100,this.maxHistoryLength=300,this.thresholds={fps:{good:55,warning:45,critical:30},frameTime:{good:16.67,warning:22.22,critical:33.33},memory:{warning:200,critical:300},drawCalls:{warning:500,critical:1e3}},this.callbacks=new Map,this.isMonitoring=!1,this.update=this.update.bind(this),this.getGPUInfo=this.getGPUInfo.bind(this)},[{key:"start",value:function(){this.isMonitoring=!0,this.lastTime=performance.now(),this.getGPUInfo()}},{key:"stop",value:function(){this.isMonitoring=!1}},{key:"update",value:function(){if(this.isMonitoring){var t=performance.now(),e=t-this.lastTime;this.frameCount++;var i=1e3/e,s=e;this.stats.fps.current=i,this.stats.frameTime.current=s,this.addToHistory(this.stats.fps,i),this.addToHistory(this.stats.frameTime,s),this.frameCount%this.updateInterval===0&&(this.updateAverages(),this.updateMemoryStats(),this.updateDrawCallStats(),this.updateSceneStats(),this.checkThresholds()),this.lastTime=t}}},{key:"addToHistory",value:function(t,e){t.history.push(e),t.history.length>this.maxHistoryLength&&t.history.shift(),t.min=Math.min(t.min,e),t.max=Math.max(t.max,e)}},{key:"updateAverages",value:function(){this.stats.fps.history.length>0&&(this.stats.fps.average=this.stats.fps.history.reduce(function(t,e){return t+e},0)/this.stats.fps.history.length),this.stats.frameTime.history.length>0&&(this.stats.frameTime.average=this.stats.frameTime.history.reduce(function(t,e){return t+e},0)/this.stats.frameTime.history.length)}},{key:"updateMemoryStats",value:function(){var t;if(this.renderer){var e=this.renderer.info;this.stats.memory.geometries=e.memory.geometries,this.stats.memory.textures=e.memory.textures,this.stats.memory.programs=(null===(t=e.programs)||void 0===t?void 0:t.length)||0,performance.memory&&(this.stats.memory.heapUsed=Math.round(performance.memory.usedJSHeapSize/1024/1024),this.stats.memory.heapTotal=Math.round(performance.memory.totalJSHeapSize/1024/1024))}}},{key:"updateDrawCallStats",value:function(){if(this.renderer){var t=this.renderer.info.render;this.stats.drawCalls.current=t.calls,this.stats.drawCalls.triangles=t.triangles,this.stats.drawCalls.points=t.points,this.stats.drawCalls.lines=t.lines,this.stats.drawCalls.history||(this.stats.drawCalls.history=[]),this.addToHistory(this.stats.drawCalls,t.calls),this.stats.drawCalls.history.length>0&&(this.stats.drawCalls.average=this.stats.drawCalls.history.reduce(function(t,e){return t+e},0)/this.stats.drawCalls.history.length)}}},{key:"updateSceneStats",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(t){var i,s=0,n=0,a=0,r=new Set,o=0,l=e(t.children);try{for(l.s();!(i=l.n()).done;){var h=i.value;s++,h.visible&&o++,h.isLight&&n++,h.isMesh&&(a++,h.material&&(Array.isArray(h.material)?h.material.forEach(function(t){return r.add(t.uuid)}):r.add(h.material.uuid)))}}catch(t){l.e(t)}finally{l.f()}this.stats.scene={objects:s,lights:n,meshes:a,materials:r.size,visible:o}}}},{key:"getGPUInfo",value:function(){if(this.renderer){var t=this.renderer.getContext();this.stats.gpu.extensions=t.getSupportedExtensions()||[];var e=t.getExtension("WEBGL_debug_renderer_info");e&&(this.stats.gpu.renderer=t.getParameter(e.UNMASKED_RENDERER_WEBGL),this.stats.gpu.vendor=t.getParameter(e.UNMASKED_VENDOR_WEBGL))}}},{key:"checkThresholds",value:function(){var t=[];this.stats.fps.average<this.thresholds.fps.critical?t.push({type:"critical",category:"FPS",value:this.stats.fps.average.toFixed(1),threshold:this.thresholds.fps.critical}):this.stats.fps.average<this.thresholds.fps.warning&&t.push({type:"warning",category:"FPS",value:this.stats.fps.average.toFixed(1),threshold:this.thresholds.fps.warning}),this.stats.frameTime.average>this.thresholds.frameTime.critical?t.push({type:"critical",category:"Frame Time",value:this.stats.frameTime.average.toFixed(2)+"ms",threshold:this.thresholds.frameTime.critical+"ms"}):this.stats.frameTime.average>this.thresholds.frameTime.warning&&t.push({type:"warning",category:"Frame Time",value:this.stats.frameTime.average.toFixed(2)+"ms",threshold:this.thresholds.frameTime.warning+"ms"}),this.stats.memory.heapUsed>this.thresholds.memory.critical?t.push({type:"critical",category:"Memory",value:this.stats.memory.heapUsed+"MB",threshold:this.thresholds.memory.critical+"MB"}):this.stats.memory.heapUsed>this.thresholds.memory.warning&&t.push({type:"warning",category:"Memory",value:this.stats.memory.heapUsed+"MB",threshold:this.thresholds.memory.warning+"MB"}),this.stats.drawCalls.average>this.thresholds.drawCalls.critical?t.push({type:"critical",category:"Draw Calls",value:Math.round(this.stats.drawCalls.average),threshold:this.thresholds.drawCalls.critical}):this.stats.drawCalls.average>this.thresholds.drawCalls.warning&&t.push({type:"warning",category:"Draw Calls",value:Math.round(this.stats.drawCalls.average),threshold:this.thresholds.drawCalls.warning}),t.length>0&&this.triggerCallback("warning",t)}},{key:"on",value:function(t,e){this.callbacks.has(t)||this.callbacks.set(t,[]),this.callbacks.get(t).push(e)}},{key:"off",value:function(t,e){if(this.callbacks.has(t)){var i=this.callbacks.get(t),s=i.indexOf(e);s>-1&&i.splice(s,1)}}},{key:"triggerCallback",value:function(t,e){this.callbacks.has(t)&&this.callbacks.get(t).forEach(function(t){return t(e)})}},{key:"getSummary",value:function(){return{fps:{current:Math.round(this.stats.fps.current),average:Math.round(this.stats.fps.average),min:Math.round(this.stats.fps.min),max:Math.round(this.stats.fps.max)},frameTime:{current:this.stats.frameTime.current.toFixed(2)+"ms",average:this.stats.frameTime.average.toFixed(2)+"ms"},memory:{geometries:this.stats.memory.geometries,textures:this.stats.memory.textures,heapUsed:this.stats.memory.heapUsed+"MB",heapTotal:this.stats.memory.heapTotal+"MB"},drawCalls:{current:this.stats.drawCalls.current,average:Math.round(this.stats.drawCalls.average),triangles:this.stats.drawCalls.triangles.toLocaleString()},scene:this.stats.scene}}},{key:"logSummary",value:function(){this.getSummary()}},{key:"reset",value:function(){var t=this;Object.keys(this.stats).forEach(function(e){t.stats[e].history&&(t.stats[e].history=[]),void 0!==t.stats[e].min&&(t.stats[e].min=1/0,t.stats[e].max=0,t.stats[e].average=0)}),this.frameCount=0}},{key:"exportData",value:function(){return{timestamp:(new Date).toISOString(),stats:JSON.parse(JSON.stringify(this.stats)),thresholds:this.thresholds,frameCount:this.frameCount}}}])}(),n=function(){return t(function t(e){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document.body,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"dark";i(this,t),this.monitor=e,this.container=s,this.element=null,this.isVisible=!1,this.updateInterval=null,this.theme=n},[{key:"show",value:function(){var t=this;this.cleanupExistingElements(),this.element&&this.hide(),this.element=document.createElement("div"),this.element.id="performance-monitor-ui",this.element.innerHTML=this.getHTML(),this.addStyles(),this.container.appendChild(this.element),this.isVisible=!0,this.startUpdating(),this.element.querySelector("#perf-toggle").addEventListener("click",function(){return t.toggleDetails()}),this.toggleDetails()}},{key:"cleanupExistingElements",value:function(){document.querySelectorAll("#performance-monitor-ui").forEach(function(t){try{t.parentNode&&t.parentNode.removeChild(t)}catch(t){}})}},{key:"hide",value:function(){this.stopUpdating(),this.removeDOMElement(),this.isVisible=!1}},{key:"dispose",value:function(){this.hide(),this.cleanupExistingElements(),this.monitor=null,this.container=null,this.element=null}},{key:"stopUpdating",value:function(){this.updateInterval&&(clearInterval(this.updateInterval),this.updateInterval=null)}},{key:"removeDOMElement",value:function(){if(this.element){try{this.element.parentNode&&this.container&&this.container.contains(this.element)?this.container.removeChild(this.element):this.element.parentNode&&this.element.parentNode.removeChild(this.element)}catch(t){try{this.element.remove&&this.element.remove()}catch(t){}}this.element=null}}},{key:"toggleDetails",value:function(){var t=this.element.querySelector("#perf-details"),e="none"===t.style.display;t.style.display=e?"block":"none",this.element.querySelector("#perf-toggle").textContent=e?"▼":"▲"}},{key:"startUpdating",value:function(){var t=this;this.updateInterval=setInterval(function(){t.isVisible&&t.element&&t.updateContent()},500)}},{key:"updateContent",value:function(){var t=this.monitor.getSummary();this.updateElement("#fps-value",t.fps.current),this.updateElement("#frametime-value",t.frameTime.current),this.updateElement("#memory-value",t.memory.heapUsed),this.updateElement("#drawcalls-value",t.drawCalls.current),this.updateElement("#fps-avg",t.fps.average),this.updateElement("#fps-min",t.fps.min),this.updateElement("#fps-max",t.fps.max),this.updateElement("#geometries-value",t.memory.geometries),this.updateElement("#textures-value",t.memory.textures),this.updateElement("#triangles-value",t.drawCalls.triangles),this.updateElement("#objects-value",t.scene.objects),this.updateElement("#meshes-value",t.scene.meshes),this.updatePerformanceIndicators(t)}},{key:"updateElement",value:function(t,e){var i=this.element.querySelector(t);i&&(i.textContent=e)}},{key:"updatePerformanceIndicators",value:function(t){var e=this.element.querySelector("#fps-value"),i=this.element.querySelector("#frametime-value");if(e){var s=t.fps.current;e.className=this.getPerformanceClass("fps",s)}if(i){var n=parseFloat(t.frameTime.current);i.className=this.getPerformanceClass("frameTime",n)}}},{key:"getPerformanceClass",value:function(t,e){var i=this.monitor.thresholds[t];return"fps"===t?e>=i.good?"perf-good":e>=i.warning?"perf-warning":"perf-critical":"frameTime"===t?e<=i.good?"perf-good":e<=i.warning?"perf-warning":"perf-critical":""}},{key:"getHTML",value:function(){return'\n      <div class="perf-header">\n        <span class="perf-title">Performance</span>\n        <button id="perf-toggle">▼</button>\n      </div>\n      <div class="perf-main">\n        <div class="perf-stat">\n          <span class="perf-label">FPS:</span>\n          <span id="fps-value" class="perf-value">0</span>\n        </div>\n        <div class="perf-stat">\n          <span class="perf-label">Frame:</span>\n          <span id="frametime-value" class="perf-value">0ms</span>\n        </div>\n        <div class="perf-stat">\n          <span class="perf-label">Memory:</span>\n          <span id="memory-value" class="perf-value">0MB</span>\n        </div>\n        <div class="perf-stat">\n          <span class="perf-label">Calls:</span>\n          <span id="drawcalls-value" class="perf-value">0</span>\n        </div>\n      </div>\n      <div id="perf-details" class="perf-details">\n        <div class="perf-section">\n          <div class="perf-section-title">FPS Stats</div>\n          <div class="perf-detail">Avg: <span id="fps-avg">0</span></div>\n          <div class="perf-detail">Min: <span id="fps-min">0</span></div>\n          <div class="perf-detail">Max: <span id="fps-max">0</span></div>\n        </div>\n        <div class="perf-section">\n          <div class="perf-section-title">Memory</div>\n          <div class="perf-detail">Geometries: <span id="geometries-value">0</span></div>\n          <div class="perf-detail">Textures: <span id="textures-value">0</span></div>\n        </div>\n        <div class="perf-section">\n          <div class="perf-section-title">Rendering</div>\n          <div class="perf-detail">Triangles: <span id="triangles-value">0</span></div>\n          <div class="perf-detail">Objects: <span id="objects-value">0</span></div>\n          <div class="perf-detail">Meshes: <span id="meshes-value">0</span></div>\n        </div>\n      </div>\n    '}},{key:"addStyles",value:function(){if(!document.getElementById("performance-monitor-styles")){var t=document.createElement("style");t.id="performance-monitor-styles";var e={dark:{background:"rgba(0, 0, 0, 0.8)",color:"white",borderColor:"rgba(255, 255, 255, 0.1)",separatorColor:"rgba(255, 255, 255, 0.2)",sectionTitleColor:"#FFC107",goodColor:"#4CAF50",warningColor:"#FF9800",criticalColor:"#F44336"},light:{background:"rgba(255, 255, 255, 0.95)",color:"#333333",borderColor:"rgba(0, 0, 0, 0.15)",separatorColor:"rgba(0, 0, 0, 0.1)",sectionTitleColor:"#1565C0",goodColor:"#2E7D32",warningColor:"#E65100",criticalColor:"#C62828"}},i=e[this.theme]||e.dark;t.textContent="      #performance-monitor-ui {\n        position: fixed;\n        bottom: 10px;\n        right: 10px;\n        background: ".concat(i.background,";\n        color: ").concat(i.color,";\n        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;\n        font-size: 12px;\n        padding: 10px;\n        border-radius: 5px;\n        z-index: 10000;\n        min-width: 150px;\n        backdrop-filter: blur(5px);\n        border: 1px solid ").concat(i.borderColor,";\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n\n      .perf-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 8px;\n        border-bottom: 1px solid ").concat(i.separatorColor,";\n        padding-bottom: 5px;\n      }\n\n      .perf-title {\n        font-weight: bold;\n        font-size: 14px;\n      }\n\n      #perf-toggle {\n        background: none;\n        border: none;\n        color: ").concat(i.color,";\n        cursor: pointer;\n        font-size: 12px;\n        padding: 0;\n        width: 20px;\n        height: 20px;\n      }\n\n      .perf-main {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: 4px;\n      }\n\n      .perf-stat {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n\n      .perf-label {\n        opacity: 0.8;\n      }\n\n      .perf-value {\n        font-weight: bold;\n        text-align: right;\n        min-width: 50px;\n      }      .perf-good {\n        color: ").concat(i.goodColor,";\n      }\n\n      .perf-warning {\n        color: ").concat(i.warningColor,";\n      }\n\n      .perf-critical {\n        color: ").concat(i.criticalColor,";\n      }\n\n      .perf-details {\n        margin-top: 10px;\n        padding-top: 8px;\n        border-top: 1px solid ").concat(i.separatorColor,";\n      }\n\n      .perf-section {\n        margin-bottom: 8px;\n      }\n\n      .perf-section-title {\n        font-weight: bold;\n        font-size: 11px;\n        margin-bottom: 3px;\n        color: ").concat(i.sectionTitleColor,";\n      }\n\n      .perf-detail {\n        font-size: 10px;\n        display: flex;\n        justify-content: space-between;\n        margin-bottom: 2px;\n        opacity: 0.9;\n      }\n    "),document.head.appendChild(t)}}},{key:"setTheme",value:function(t){if("light"===t||"dark"===t){this.theme=t;var e=document.getElementById("performance-monitor-styles");e&&e.remove(),this.addStyles()}}}],[{key:"cleanupAllInstances",value:function(){var t=document.querySelectorAll("#performance-monitor-ui"),e=0;if(t.forEach(function(t){try{t.parentNode&&(t.parentNode.removeChild(t),e++)}catch(t){}}),0===document.querySelectorAll("#performance-monitor-ui").length){var i=document.getElementById("performance-monitor-styles");i&&i.remove()}return e}}])}();export{s as PerformanceMonitor,n as PerformanceUI};
+import { createClass as _createClass, createForOfIteratorHelper as _createForOfIteratorHelper, classCallCheck as _classCallCheck } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+
+/**
+ * Performance Monitor for Three.js Applications
+ * Tracks rendering performance across multiple categories
+ */
+
+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.lastTime = performance.now();
+    this.updateInterval = 100; // Update stats every 100 frames
+    this.maxHistoryLength = 300; // Keep 5 seconds of history at 60fps
+
+    // Performance thresholds
+    this.thresholds = {
+      fps: {
+        good: 55,
+        warning: 45,
+        critical: 30
+      },
+      frameTime: {
+        good: 16.67,
+        warning: 22.22,
+        critical: 33.33
+      },
+      // ms
+      memory: {
+        warning: 200,
+        critical: 300
+      },
+      // MB
+      drawCalls: {
+        warning: 500,
+        critical: 1000
+      }
+    };
+    this.callbacks = new Map();
+    this.isMonitoring = false;
+
+    // Bind methods
+    this.update = this.update.bind(this);
+    this.getGPUInfo = this.getGPUInfo.bind(this);
+  }
+
+  /**
+   * Start monitoring performance
+   */
+  return _createClass(PerformanceMonitor, [{
+    key: "start",
+    value: function start() {
+      this.isMonitoring = true;
+      this.lastTime = performance.now();
+      console.log('🔍 Performance monitoring started');
+
+      // Get initial GPU info
+      this.getGPUInfo();
+    }
+
+    /**
+     * Stop monitoring performance
+     */
+  }, {
+    key: "stop",
+    value: function stop() {
+      this.isMonitoring = false;
+      console.log('⏹️ Performance monitoring stopped');
+    }
+
+    /**
+     * Update performance stats - call this in your animation loop
+     */
+  }, {
+    key: "update",
+    value: function update() {
+      if (!this.isMonitoring) return;
+      var currentTime = performance.now();
+      var deltaTime = currentTime - this.lastTime;
+      this.frameCount++;
+
+      // Update FPS and frame time
+      var fps = 1000 / deltaTime;
+      var frameTime = deltaTime;
+      this.stats.fps.current = fps;
+      this.stats.frameTime.current = frameTime;
+
+      // Update history
+      this.addToHistory(this.stats.fps, fps);
+      this.addToHistory(this.stats.frameTime, frameTime);
+
+      // Update averages and min/max every updateInterval frames
+      if (this.frameCount % this.updateInterval === 0) {
+        this.updateAverages();
+        this.updateMemoryStats();
+        this.updateDrawCallStats();
+        this.updateSceneStats();
+        this.checkThresholds();
+      }
+      this.lastTime = currentTime;
+    }
+
+    /**
+     * Add value to history and update min/max
+     */
+  }, {
+    key: "addToHistory",
+    value: function addToHistory(statObject, value) {
+      statObject.history.push(value);
+      if (statObject.history.length > this.maxHistoryLength) {
+        statObject.history.shift();
+      }
+      statObject.min = Math.min(statObject.min, value);
+      statObject.max = Math.max(statObject.max, value);
+    }
+
+    /**
+     * Update average values
+     */
+  }, {
+    key: "updateAverages",
+    value: function updateAverages() {
+      // FPS average
+      if (this.stats.fps.history.length > 0) {
+        this.stats.fps.average = this.stats.fps.history.reduce(function (a, b) {
+          return a + b;
+        }, 0) / this.stats.fps.history.length;
+      }
+
+      // Frame time average
+      if (this.stats.frameTime.history.length > 0) {
+        this.stats.frameTime.average = this.stats.frameTime.history.reduce(function (a, b) {
+          return a + b;
+        }, 0) / this.stats.frameTime.history.length;
+      }
+    }
+
+    /**
+     * Update memory statistics
+     */
+  }, {
+    key: "updateMemoryStats",
+    value: function updateMemoryStats() {
+      var _info$programs;
+      if (!this.renderer) return;
+      var info = this.renderer.info;
+      this.stats.memory.geometries = info.memory.geometries;
+      this.stats.memory.textures = info.memory.textures;
+      this.stats.memory.programs = ((_info$programs = info.programs) === null || _info$programs === void 0 ? void 0 : _info$programs.length) || 0;
+
+      // Get JavaScript heap usage if available
+      if (performance.memory) {
+        this.stats.memory.heapUsed = Math.round(performance.memory.usedJSHeapSize / 1024 / 1024);
+        this.stats.memory.heapTotal = Math.round(performance.memory.totalJSHeapSize / 1024 / 1024);
+      }
+    }
+
+    /**
+     * Update draw call statistics
+     */
+  }, {
+    key: "updateDrawCallStats",
+    value: function updateDrawCallStats() {
+      if (!this.renderer) return;
+      var info = this.renderer.info.render;
+      this.stats.drawCalls.current = info.calls;
+      this.stats.drawCalls.triangles = info.triangles;
+      this.stats.drawCalls.points = info.points;
+      this.stats.drawCalls.lines = info.lines;
+
+      // Calculate draw calls average
+      if (!this.stats.drawCalls.history) {
+        this.stats.drawCalls.history = [];
+      }
+      this.addToHistory(this.stats.drawCalls, info.calls);
+      if (this.stats.drawCalls.history.length > 0) {
+        this.stats.drawCalls.average = this.stats.drawCalls.history.reduce(function (a, b) {
+          return a + b;
+        }, 0) / this.stats.drawCalls.history.length;
+      }
+    }
+
+    /**
+     * Update scene statistics
+     */
+  }, {
+    key: "updateSceneStats",
+    value: function updateSceneStats() {
+      var scene = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (!scene) return;
+      var objects = 0;
+      var lights = 0;
+      var meshes = 0;
+      var materials = new Set();
+      var visible = 0;
+      var _iterator = _createForOfIteratorHelper(scene.children),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var child = _step.value;
+          objects++;
+          if (child.visible) {
+            visible++;
+          }
+          if (child.isLight) {
+            lights++;
+          }
+          if (child.isMesh) {
+            meshes++;
+            if (child.material) {
+              if (Array.isArray(child.material)) {
+                child.material.forEach(function (mat) {
+                  return materials.add(mat.uuid);
+                });
+              } else {
+                materials.add(child.material.uuid);
+              }
+            }
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      this.stats.scene = {
+        objects: objects,
+        lights: lights,
+        meshes: meshes,
+        materials: materials.size,
+        visible: visible
+      };
+    }
+
+    /**
+     * Get GPU information
+     */
+  }, {
+    key: "getGPUInfo",
+    value: function getGPUInfo() {
+      if (!this.renderer) return;
+      var gl = this.renderer.getContext();
+
+      // Get GPU extensions
+      this.stats.gpu.extensions = gl.getSupportedExtensions() || [];
+
+      // Try to get GPU memory info (Chrome only)
+      var memInfo = gl.getExtension('WEBGL_debug_renderer_info');
+      if (memInfo) {
+        this.stats.gpu.renderer = gl.getParameter(memInfo.UNMASKED_RENDERER_WEBGL);
+        this.stats.gpu.vendor = gl.getParameter(memInfo.UNMASKED_VENDOR_WEBGL);
+      }
+      console.log('🎮 GPU Info:', {
+        renderer: this.stats.gpu.renderer,
+        vendor: this.stats.gpu.vendor,
+        extensions: this.stats.gpu.extensions.length
+      });
+    }
+
+    /**
+     * Check performance thresholds and trigger warnings
+     */
+  }, {
+    key: "checkThresholds",
+    value: function checkThresholds() {
+      var warnings = [];
+
+      // Check FPS
+      if (this.stats.fps.average < this.thresholds.fps.critical) {
+        warnings.push({
+          type: 'critical',
+          category: 'FPS',
+          value: this.stats.fps.average.toFixed(1),
+          threshold: this.thresholds.fps.critical
+        });
+      } else if (this.stats.fps.average < this.thresholds.fps.warning) {
+        warnings.push({
+          type: 'warning',
+          category: 'FPS',
+          value: this.stats.fps.average.toFixed(1),
+          threshold: this.thresholds.fps.warning
+        });
+      }
+
+      // Check frame time
+      if (this.stats.frameTime.average > this.thresholds.frameTime.critical) {
+        warnings.push({
+          type: 'critical',
+          category: 'Frame Time',
+          value: this.stats.frameTime.average.toFixed(2) + 'ms',
+          threshold: this.thresholds.frameTime.critical + 'ms'
+        });
+      } else if (this.stats.frameTime.average > this.thresholds.frameTime.warning) {
+        warnings.push({
+          type: 'warning',
+          category: 'Frame Time',
+          value: this.stats.frameTime.average.toFixed(2) + 'ms',
+          threshold: this.thresholds.frameTime.warning + 'ms'
+        });
+      }
+
+      // Check memory
+      if (this.stats.memory.heapUsed > this.thresholds.memory.critical) {
+        warnings.push({
+          type: 'critical',
+          category: 'Memory',
+          value: this.stats.memory.heapUsed + 'MB',
+          threshold: this.thresholds.memory.critical + 'MB'
+        });
+      } else if (this.stats.memory.heapUsed > this.thresholds.memory.warning) {
+        warnings.push({
+          type: 'warning',
+          category: 'Memory',
+          value: this.stats.memory.heapUsed + 'MB',
+          threshold: this.thresholds.memory.warning + 'MB'
+        });
+      }
+
+      // Check draw calls
+      if (this.stats.drawCalls.average > this.thresholds.drawCalls.critical) {
+        warnings.push({
+          type: 'critical',
+          category: 'Draw Calls',
+          value: Math.round(this.stats.drawCalls.average),
+          threshold: this.thresholds.drawCalls.critical
+        });
+      } else if (this.stats.drawCalls.average > this.thresholds.drawCalls.warning) {
+        warnings.push({
+          type: 'warning',
+          category: 'Draw Calls',
+          value: Math.round(this.stats.drawCalls.average),
+          threshold: this.thresholds.drawCalls.warning
+        });
+      }
+
+      // Trigger callbacks for warnings
+      if (warnings.length > 0) {
+        this.triggerCallback('warning', warnings);
+      }
+    }
+
+    /**
+     * Add callback for specific events
+     */
+  }, {
+    key: "on",
+    value: function on(event, callback) {
+      if (!this.callbacks.has(event)) {
+        this.callbacks.set(event, []);
+      }
+      this.callbacks.get(event).push(callback);
+    }
+
+    /**
+     * Remove callback
+     */
+  }, {
+    key: "off",
+    value: function off(event, callback) {
+      if (this.callbacks.has(event)) {
+        var callbacks = this.callbacks.get(event);
+        var index = callbacks.indexOf(callback);
+        if (index > -1) {
+          callbacks.splice(index, 1);
+        }
+      }
+    }
+
+    /**
+     * Trigger callbacks
+     */
+  }, {
+    key: "triggerCallback",
+    value: function triggerCallback(event, data) {
+      if (this.callbacks.has(event)) {
+        this.callbacks.get(event).forEach(function (callback) {
+          return callback(data);
+        });
+      }
+    }
+
+    /**
+     * Get performance summary
+     */
+  }, {
+    key: "getSummary",
+    value: function getSummary() {
+      return {
+        fps: {
+          current: Math.round(this.stats.fps.current),
+          average: Math.round(this.stats.fps.average),
+          min: Math.round(this.stats.fps.min),
+          max: Math.round(this.stats.fps.max)
+        },
+        frameTime: {
+          current: this.stats.frameTime.current.toFixed(2) + 'ms',
+          average: this.stats.frameTime.average.toFixed(2) + 'ms'
+        },
+        memory: {
+          geometries: this.stats.memory.geometries,
+          textures: this.stats.memory.textures,
+          heapUsed: this.stats.memory.heapUsed + 'MB',
+          heapTotal: this.stats.memory.heapTotal + 'MB'
+        },
+        drawCalls: {
+          current: this.stats.drawCalls.current,
+          average: Math.round(this.stats.drawCalls.average),
+          triangles: this.stats.drawCalls.triangles.toLocaleString()
+        },
+        scene: this.stats.scene
+      };
+    }
+
+    /**
+     * Log performance summary to console
+     */
+  }, {
+    key: "logSummary",
+    value: function logSummary() {
+      var summary = this.getSummary();
+      console.group('📊 Performance Summary');
+      console.log('🎯 FPS:', summary.fps);
+      console.log('⏱️ Frame Time:', summary.frameTime);
+      console.log('💾 Memory:', summary.memory);
+      console.log('🎨 Draw Calls:', summary.drawCalls);
+      console.log('🏗️ Scene:', summary.scene);
+      console.groupEnd();
+    }
+
+    /**
+     * Reset all statistics
+     */
+  }, {
+    key: "reset",
+    value: function reset() {
+      var _this = this;
+      Object.keys(this.stats).forEach(function (category) {
+        if (_this.stats[category].history) {
+          _this.stats[category].history = [];
+        }
+        if (_this.stats[category].min !== undefined) {
+          _this.stats[category].min = Infinity;
+          _this.stats[category].max = 0;
+          _this.stats[category].average = 0;
+        }
+      });
+      this.frameCount = 0;
+      console.log('🔄 Performance stats reset');
+    }
+
+    /**
+     * Export performance data for analysis
+     */
+  }, {
+    key: "exportData",
+    value: function exportData() {
+      return {
+        timestamp: new Date().toISOString(),
+        stats: JSON.parse(JSON.stringify(this.stats)),
+        thresholds: this.thresholds,
+        frameCount: this.frameCount
+      };
+    }
+  }]);
+}();
+
+/**
+ * Performance UI overlay for real-time monitoring
+ */
+var PerformanceUI = /*#__PURE__*/function () {
+  function PerformanceUI(monitor) {
+    var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
+    var theme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'dark';
+    _classCallCheck(this, PerformanceUI);
+    this.monitor = monitor;
+    this.container = container;
+    this.element = null;
+    this.isVisible = false;
+    this.updateInterval = null;
+    this.theme = theme;
+  }
+  /**
+   * Create and show the performance UI overlay
+   */
+  return _createClass(PerformanceUI, [{
+    key: "show",
+    value: function show() {
+      var _this2 = this;
+      // First, clean up any existing performance monitor UI elements globally
+      this.cleanupExistingElements();
+      if (this.element) {
+        this.hide();
+      }
+      this.element = document.createElement('div');
+      this.element.id = 'performance-monitor-ui';
+      this.element.innerHTML = this.getHTML();
+      this.addStyles();
+      this.container.appendChild(this.element);
+      this.isVisible = true;
+      this.startUpdating();
+
+      // Add toggle functionality
+      var toggleBtn = this.element.querySelector('#perf-toggle');
+      toggleBtn.addEventListener('click', function () {
+        return _this2.toggleDetails();
+      });
+
+      // Start in collapsed state
+      this.toggleDetails();
+    }
+
+    /**
+     * Clean up any existing performance monitor UI elements in the document
+     */
+  }, {
+    key: "cleanupExistingElements",
+    value: function cleanupExistingElements() {
+      // Remove all existing performance monitor UI elements
+      var existingElements = document.querySelectorAll('#performance-monitor-ui');
+      existingElements.forEach(function (element) {
+        try {
+          if (element.parentNode) {
+            element.parentNode.removeChild(element);
+          }
+        } catch (error) {
+          console.warn('⚠️ Error removing existing performance monitor element:', error);
+        }
+      });
+      console.log("\uD83E\uDDF9 Cleaned up ".concat(existingElements.length, " existing performance monitor elements"));
+    }
+
+    /**
+     * Hide the performance UI overlay
+     */
+  }, {
+    key: "hide",
+    value: function hide() {
+      this.stopUpdating();
+      this.removeDOMElement();
+      this.isVisible = false;
+    }
+
+    /**
+     * Proper disposal method for complete cleanup
+     */
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      console.log('🧹 Disposing PerformanceUI...');
+      this.hide();
+
+      // Clean up any remaining elements globally
+      this.cleanupExistingElements();
+
+      // Clean up all references
+      this.monitor = null;
+      this.container = null;
+      this.element = null;
+      console.log('✅ PerformanceUI disposed');
+    }
+
+    /**
+     * Stop the update interval
+     */
+  }, {
+    key: "stopUpdating",
+    value: function stopUpdating() {
+      if (this.updateInterval) {
+        clearInterval(this.updateInterval);
+        this.updateInterval = null;
+      }
+    }
+
+    /**
+     * Safely remove DOM element
+     */
+  }, {
+    key: "removeDOMElement",
+    value: function removeDOMElement() {
+      if (this.element) {
+        try {
+          // Check if element is still in the DOM and container exists
+          if (this.element.parentNode && this.container && this.container.contains(this.element)) {
+            this.container.removeChild(this.element);
+          } else if (this.element.parentNode) {
+            // Element exists but container reference is stale, remove from current parent
+            this.element.parentNode.removeChild(this.element);
+          }
+        } catch (error) {
+          console.warn('⚠️ Error removing performance UI element:', error);
+          // Try alternative removal method
+          try {
+            if (this.element.remove) {
+              this.element.remove();
+            }
+          } catch (fallbackError) {
+            console.warn('⚠️ Fallback removal also failed:', fallbackError);
+          }
+        }
+        this.element = null;
+      }
+    }
+
+    /**
+     * Toggle visibility of detailed stats
+     */
+  }, {
+    key: "toggleDetails",
+    value: function toggleDetails() {
+      var details = this.element.querySelector('#perf-details');
+      var isHidden = details.style.display === 'none';
+      details.style.display = isHidden ? 'block' : 'none';
+      var toggleBtn = this.element.querySelector('#perf-toggle');
+      toggleBtn.textContent = isHidden ? '▼' : '▲';
+    }
+
+    /**
+     * Start updating the UI
+     */
+  }, {
+    key: "startUpdating",
+    value: function startUpdating() {
+      var _this3 = this;
+      this.updateInterval = setInterval(function () {
+        if (_this3.isVisible && _this3.element) {
+          _this3.updateContent();
+        }
+      }, 500); // Update every 500ms
+    }
+
+    /**
+     * Update the UI content
+     */
+  }, {
+    key: "updateContent",
+    value: function updateContent() {
+      var summary = this.monitor.getSummary();
+
+      // Update main stats
+      this.updateElement('#fps-value', summary.fps.current);
+      this.updateElement('#frametime-value', summary.frameTime.current);
+      this.updateElement('#memory-value', summary.memory.heapUsed);
+      this.updateElement('#drawcalls-value', summary.drawCalls.current);
+
+      // Update detailed stats
+      this.updateElement('#fps-avg', summary.fps.average);
+      this.updateElement('#fps-min', summary.fps.min);
+      this.updateElement('#fps-max', summary.fps.max);
+      this.updateElement('#geometries-value', summary.memory.geometries);
+      this.updateElement('#textures-value', summary.memory.textures);
+      this.updateElement('#triangles-value', summary.drawCalls.triangles);
+      this.updateElement('#objects-value', summary.scene.objects);
+      this.updateElement('#meshes-value', summary.scene.meshes);
+
+      // Update performance indicators
+      this.updatePerformanceIndicators(summary);
+    }
+
+    /**
+     * Update individual element
+     */
+  }, {
+    key: "updateElement",
+    value: function updateElement(selector, value) {
+      var element = this.element.querySelector(selector);
+      if (element) {
+        element.textContent = value;
+      }
+    }
+
+    /**
+     * Update performance indicators (colors)
+     */
+  }, {
+    key: "updatePerformanceIndicators",
+    value: function updatePerformanceIndicators(summary) {
+      var fpsElement = this.element.querySelector('#fps-value');
+      var frameTimeElement = this.element.querySelector('#frametime-value');
+
+      // FPS indicator
+      if (fpsElement) {
+        var fps = summary.fps.current;
+        fpsElement.className = this.getPerformanceClass('fps', fps);
+      }
+
+      // Frame time indicator
+      if (frameTimeElement) {
+        var frameTime = parseFloat(summary.frameTime.current);
+        frameTimeElement.className = this.getPerformanceClass('frameTime', frameTime);
+      }
+    }
+
+    /**
+     * Get CSS class based on performance thresholds
+     */
+  }, {
+    key: "getPerformanceClass",
+    value: function getPerformanceClass(metric, value) {
+      var thresholds = this.monitor.thresholds[metric];
+      if (metric === 'fps') {
+        if (value >= thresholds.good) return 'perf-good';
+        if (value >= thresholds.warning) return 'perf-warning';
+        return 'perf-critical';
+      } else if (metric === 'frameTime') {
+        if (value <= thresholds.good) return 'perf-good';
+        if (value <= thresholds.warning) return 'perf-warning';
+        return 'perf-critical';
+      }
+      return '';
+    }
+    /**
+     * Get HTML for the UI
+     */
+  }, {
+    key: "getHTML",
+    value: function getHTML() {
+      return "\n      <div class=\"perf-header\">\n        <span class=\"perf-title\">Performance</span>\n        <button id=\"perf-toggle\">\u25BC</button>\n      </div>\n      <div class=\"perf-main\">\n        <div class=\"perf-stat\">\n          <span class=\"perf-label\">FPS:</span>\n          <span id=\"fps-value\" class=\"perf-value\">0</span>\n        </div>\n        <div class=\"perf-stat\">\n          <span class=\"perf-label\">Frame:</span>\n          <span id=\"frametime-value\" class=\"perf-value\">0ms</span>\n        </div>\n        <div class=\"perf-stat\">\n          <span class=\"perf-label\">Memory:</span>\n          <span id=\"memory-value\" class=\"perf-value\">0MB</span>\n        </div>\n        <div class=\"perf-stat\">\n          <span class=\"perf-label\">Calls:</span>\n          <span id=\"drawcalls-value\" class=\"perf-value\">0</span>\n        </div>\n      </div>\n      <div id=\"perf-details\" class=\"perf-details\">\n        <div class=\"perf-section\">\n          <div class=\"perf-section-title\">FPS Stats</div>\n          <div class=\"perf-detail\">Avg: <span id=\"fps-avg\">0</span></div>\n          <div class=\"perf-detail\">Min: <span id=\"fps-min\">0</span></div>\n          <div class=\"perf-detail\">Max: <span id=\"fps-max\">0</span></div>\n        </div>\n        <div class=\"perf-section\">\n          <div class=\"perf-section-title\">Memory</div>\n          <div class=\"perf-detail\">Geometries: <span id=\"geometries-value\">0</span></div>\n          <div class=\"perf-detail\">Textures: <span id=\"textures-value\">0</span></div>\n        </div>\n        <div class=\"perf-section\">\n          <div class=\"perf-section-title\">Rendering</div>\n          <div class=\"perf-detail\">Triangles: <span id=\"triangles-value\">0</span></div>\n          <div class=\"perf-detail\">Objects: <span id=\"objects-value\">0</span></div>\n          <div class=\"perf-detail\">Meshes: <span id=\"meshes-value\">0</span></div>\n        </div>\n      </div>\n    ";
+    }
+    /**
+     * Add CSS styles for the UI
+     */
+  }, {
+    key: "addStyles",
+    value: function addStyles() {
+      if (document.getElementById('performance-monitor-styles')) return;
+      var style = document.createElement('style');
+      style.id = 'performance-monitor-styles';
+      // Define theme-specific colors
+      var themes = {
+        dark: {
+          background: 'rgba(0, 0, 0, 0.8)',
+          color: 'white',
+          borderColor: 'rgba(255, 255, 255, 0.1)',
+          separatorColor: 'rgba(255, 255, 255, 0.2)',
+          sectionTitleColor: '#FFC107',
+          goodColor: '#4CAF50',
+          warningColor: '#FF9800',
+          criticalColor: '#F44336'
+        },
+        light: {
+          background: 'rgba(255, 255, 255, 0.95)',
+          color: '#333333',
+          borderColor: 'rgba(0, 0, 0, 0.15)',
+          separatorColor: 'rgba(0, 0, 0, 0.1)',
+          sectionTitleColor: '#1565C0',
+          goodColor: '#2E7D32',
+          warningColor: '#E65100',
+          criticalColor: '#C62828'
+        }
+      };
+      var currentTheme = themes[this.theme] || themes.dark;
+      style.textContent = "      #performance-monitor-ui {\n        position: fixed;\n        bottom: 10px;\n        right: 10px;\n        background: ".concat(currentTheme.background, ";\n        color: ").concat(currentTheme.color, ";\n        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;\n        font-size: 12px;\n        padding: 10px;\n        border-radius: 5px;\n        z-index: 10000;\n        min-width: 150px;\n        backdrop-filter: blur(5px);\n        border: 1px solid ").concat(currentTheme.borderColor, ";\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n\n      .perf-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 8px;\n        border-bottom: 1px solid ").concat(currentTheme.separatorColor, ";\n        padding-bottom: 5px;\n      }\n\n      .perf-title {\n        font-weight: bold;\n        font-size: 14px;\n      }\n\n      #perf-toggle {\n        background: none;\n        border: none;\n        color: ").concat(currentTheme.color, ";\n        cursor: pointer;\n        font-size: 12px;\n        padding: 0;\n        width: 20px;\n        height: 20px;\n      }\n\n      .perf-main {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: 4px;\n      }\n\n      .perf-stat {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n\n      .perf-label {\n        opacity: 0.8;\n      }\n\n      .perf-value {\n        font-weight: bold;\n        text-align: right;\n        min-width: 50px;\n      }      .perf-good {\n        color: ").concat(currentTheme.goodColor, ";\n      }\n\n      .perf-warning {\n        color: ").concat(currentTheme.warningColor, ";\n      }\n\n      .perf-critical {\n        color: ").concat(currentTheme.criticalColor, ";\n      }\n\n      .perf-details {\n        margin-top: 10px;\n        padding-top: 8px;\n        border-top: 1px solid ").concat(currentTheme.separatorColor, ";\n      }\n\n      .perf-section {\n        margin-bottom: 8px;\n      }\n\n      .perf-section-title {\n        font-weight: bold;\n        font-size: 11px;\n        margin-bottom: 3px;\n        color: ").concat(currentTheme.sectionTitleColor, ";\n      }\n\n      .perf-detail {\n        font-size: 10px;\n        display: flex;\n        justify-content: space-between;\n        margin-bottom: 2px;\n        opacity: 0.9;\n      }\n    ");
+      document.head.appendChild(style);
+    }
+
+    /**
+     * Change the theme of the performance UI
+     * @param {string} theme - 'light' or 'dark'
+     */
+  }, {
+    key: "setTheme",
+    value: function setTheme(theme) {
+      if (theme !== 'light' && theme !== 'dark') {
+        console.warn('Invalid theme. Use "light" or "dark"');
+        return;
+      }
+      this.theme = theme;
+
+      // Remove existing styles and reapply with new theme
+      var existingStyle = document.getElementById('performance-monitor-styles');
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+      this.addStyles();
+    }
+
+    /**
+     * Static method to clean up all performance monitor UI elements globally
+     * Useful for hot-reload cleanup
+     */
+  }], [{
+    key: "cleanupAllInstances",
+    value: function cleanupAllInstances() {
+      console.log('🧹 PerformanceUI: Global cleanup of all instances...');
+
+      // Remove all performance monitor UI elements
+      var allElements = document.querySelectorAll('#performance-monitor-ui');
+      var cleanedCount = 0;
+      allElements.forEach(function (element) {
+        try {
+          if (element.parentNode) {
+            element.parentNode.removeChild(element);
+            cleanedCount++;
+          }
+        } catch (error) {
+          console.warn('⚠️ Error during global cleanup:', error);
+        }
+      });
+
+      // Remove global styles if no elements remain
+      var remainingElements = document.querySelectorAll('#performance-monitor-ui');
+      if (remainingElements.length === 0) {
+        var existingStyle = document.getElementById('performance-monitor-styles');
+        if (existingStyle) {
+          existingStyle.remove();
+          console.log('🧹 Performance monitor global styles removed');
+        }
+      }
+      console.log("\u2705 PerformanceUI: Global cleanup completed - removed ".concat(cleanedCount, " elements"));
+      return cleanedCount;
+    }
+  }]);
+}();
+
+export { PerformanceMonitor, PerformanceUI };