r3f-performance 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1386 @@
+(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");i.appendChild(document.createTextNode('._perfS_ans5i_1{position:fixed;z-index:9999;font-family:Roboto Mono,-apple-system,BlinkMacSystemFont,monospace;background-color:#000c;color:#fff;padding:6px 0 6px 6px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column}._containerHeight_ans5i_16{min-height:110px}._topLeft_ans5i_21{top:0;left:0}._topRight_ans5i_22{top:0;right:0}._bottomLeft_ans5i_23{bottom:0;left:0}._bottomRight_ans5i_24{bottom:0;right:0}._minimal_ans5i_26{background-color:#242424d9}._perfIContainer_ans5i_30{display:flex;flex-wrap:wrap;gap:5px 10px}._perfIContainer_ans5i_30{display:flex;flex-wrap:wrap;gap:6px 12px;width:100%;padding-right:6px;box-sizing:border-box}._perfI_ans5i_30{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:55px;height:auto;position:relative;margin-right:4px}._perfI_ans5i_30 small{font-size:12px;color:#e0e0e0;font-weight:500;padding-left:0;margin-bottom:2px;white-space:nowrap}._perfB_ans5i_69{position:relative;bottom:auto;right:auto;text-align:left;font-size:8px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#65c5bc;width:100%;opacity:.9}._toggleContainer_ans5i_83{display:flex;justify-content:flex-end;padding-right:4px}._toggle_ans5i_83{cursor:pointer;font-size:10px;background-color:#ffffff1a;color:#fff;padding:4px 8px;border-radius:2px;margin-left:4px;transition:all .2s}._toggle_ans5i_83:hover{background-color:#fff3;color:#fff}._activeTab_ans5i_105{background-color:#65c5bc4d;color:#fff}._containerScroll_ans5i_110{max-height:50vh;overflow-y:auto}._programGeo_ans5i_115{margin-bottom:2px;pointer-events:auto}._programHeader_ans5i_120{display:flex;align-items:center;justify-content:space-between;background-color:#ffffff0f;padding:6px 8px;border-radius:4px;cursor:pointer;transition:background-color .2s;min-height:24px;border:1px solid transparent}._programHeader_ans5i_120:hover{background-color:#ffffff1a;border-color:#ffffff1a}._programHeader_ans5i_120 *{cursor:pointer!important}._programHeader_ans5i_120 small{font-size:9px}._programHeader_ans5i_120>b{margin-right:4px;cursor:pointer}._headerLeft_ans5i_149{display:flex;align-items:center;flex:1;overflow:hidden}._programTitle_ans5i_156{font-weight:700;font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:10px}._toggleArrow_ans5i_166{font-size:10px;margin-right:8px;color:#888;width:12px;text-align:center;transition:transform .2s}._toggleVisible_ans5i_175{pointer-events:auto;justify-content:center;cursor:pointer;font-size:12px;background-color:#292b2d;width:auto;margin:0;color:#919191;text-align:center;display:inline-block;vertical-align:middle;padding:4px 6px}._toggleVisible_ans5i_175:hover{background-color:#1f1f1f}._toggleVisible_ans5i_175 svg{width:12px;height:12px;float:left}._programConsole_ans5i_200{font-weight:700;letter-spacing:.02em;background-color:#292b2d;color:#d3d3d3;overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:block;font-size:11px;padding:5px;margin:4px auto;border:none;width:100%;text-align:center}._programsContainer_ans5i_218{margin-top:0}._headerRight_ans5i_222{display:flex;align-items:center;gap:6px}._metricBadge_ans5i_228{display:flex;align-items:center;background-color:#0000004d;padding:2px 6px;border-radius:3px;font-size:10px;color:#aaa;white-space:nowrap}._metricBadge_ans5i_228 b{color:#4fd1c5;margin-right:4px;font-weight:600;font-size:11px}._programsULHeader_ans5i_246{display:flex;position:relative;font-weight:700;color:#fff;line-height:14px;margin:4px 0}._programsULHeader_ans5i_246 svg{margin-right:4px;display:inline-block}._programsUL_ans5i_246{display:block;position:relative;padding-left:10px;margin:6px;list-style:none}._programsUL_ans5i_246 img{max-height:60px;max-width:100%;margin:6px auto;display:block}._programsUL_ans5i_246:after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background-color:gray;transform:translate(-50%);max-height:50vh;overflow-y:auto}._programsUL_ans5i_246 li{border-bottom:1px solid #313131;display:block;padding:4px;margin:0;line-height:1}._programsUL_ans5i_246 b{font-weight:700}._programsUL_ans5i_246 small{text-align:revert;letter-spacing:1px;font-size:10px;font-weight:500;margin-left:2px;color:#65c5bc}._programsGeoLi_ans5i_309{display:flex!important;height:auto!important}._programsGeoLi_ans5i_309 span{display:block;position:relative}._programsGeoLi_ans5i_309 b{padding-left:12px}._graph_ans5i_324{width:100%;height:66px;overflow:hidden;position:absolute;pointer-events:none;display:flex;top:0;left:0;justify-content:center;z-index:0}._graphpc_ans5i_336{text-align:center;font-weight:700;font-size:12px;line-height:12px;display:flex;justify-content:center;align-items:center;vertical-align:middle;color:#f1f1f1;padding:7px;width:100%;background-color:#242425cc;z-index:1;position:absolute;height:100%}._visibilityBtn_ans5i_354{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;margin-left:4px;color:#666;background:transparent;transition:all .2s}._visibilityBtn_ans5i_354:hover{background-color:#fff3;color:#fff}._visibilityBtn_ans5i_354._active_ans5i_105{color:#fff}')),document.head.appendChild(i)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { jsx as n, jsxs as y, Fragment as z } from "react/jsx-runtime";
+import { forwardRef as Te, useRef as I, useLayoutEffect as oe, useMemo as Y, useEffect as U, useState as O } from "react";
+import { useThree as we, addEffect as Ae, addAfterEffect as Se, addTail as Ne, Canvas as Re, useFrame as _e } from "@react-three/fiber";
+import { createRoot as Fe } from "react-dom/client";
+import * as E from "three";
+import { MathUtils as Pe } from "three";
+import { createWithEqualityFn as Ue } from "zustand/traditional";
+import { shallow as Ge } from "zustand/shallow";
+import Be from "eventemitter3";
+const be = Te(
+  ({ portal: r, className: e, children: t, name: i, ...m }, o) => {
+    const a = we((d) => d.gl), c = I(null), v = I(null), s = (r == null ? void 0 : r.current) != null ? r.current : a.domElement.parentNode;
+    return oe(() => {
+      if (!c.current || !s) return;
+      const d = document.createElement("div"), f = v.current = Fe(d);
+      return s.appendChild(d), () => {
+        f.unmount(), v.current = null, s.removeChild(d);
+      };
+    }, [s]), oe(() => {
+      const d = v.current;
+      d && d.render(
+        /* @__PURE__ */ n("div", { ref: o, className: e, children: t })
+      );
+    }), /* @__PURE__ */ n("group", { name: i, ...m, ref: c });
+  }
+);
+be.displayName = "HtmlMinimal";
+const ee = Ue((r, e) => {
+  function t() {
+    var w;
+    const { accumulated: i, startTime: m, infos: o, estimatedMemory: a } = e(), c = (w = e().log) == null ? void 0 : w.maxMemory, { totalFrames: v, log: s, gl: d, max: f } = i, p = {
+      calls: d.calls / v,
+      triangles: d.triangles / v,
+      points: d.points / v,
+      lines: d.lines / v
+    }, h = {
+      gpu: s.gpu / v,
+      cpu: s.cpu / v,
+      mem: s.mem / v,
+      fps: s.fps / v
+    };
+    return {
+      sessionTime: (window.performance.now() - m) / 1e3,
+      infos: o,
+      memory: a,
+      // Thêm memory vào report
+      log: h,
+      gl: p,
+      max: f,
+      maxMemory: c,
+      totalFrames: v
+    };
+  }
+  return {
+    log: null,
+    paused: !1,
+    triggerProgramsUpdate: 0,
+    startTime: 0,
+    customData: 0,
+    fpsLimit: 60,
+    overclockingFps: !1,
+    // --- ADD: Khởi tạo giá trị mặc định ---
+    estimatedMemory: {
+      vram: 0,
+      tex: 0,
+      geo: 0,
+      ram: 0
+    },
+    // -------------------------------------
+    accumulated: {
+      totalFrames: 0,
+      gl: {
+        calls: 0,
+        triangles: 0,
+        points: 0,
+        lines: 0,
+        counts: 0
+      },
+      log: {
+        gpu: 0,
+        cpu: 0,
+        mem: 0,
+        fps: 0
+      },
+      max: {
+        gl: {
+          calls: 0,
+          triangles: 0,
+          points: 0,
+          lines: 0,
+          counts: 0
+        },
+        log: {
+          gpu: 0,
+          cpu: 0,
+          mem: 0,
+          fps: 0
+        }
+      }
+    },
+    chart: {
+      data: {
+        fps: [],
+        cpu: [],
+        gpu: [],
+        mem: []
+      },
+      circularId: 0
+    },
+    gl: void 0,
+    objectWithMaterials: null,
+    scene: void 0,
+    programs: /* @__PURE__ */ new Map(),
+    sceneLength: void 0,
+    tab: "infos",
+    getReport: t
+  };
+}), L = (r) => ee(r, Ge);
+Object.assign(L, ee);
+const { getState: R, setState: M } = ee, S = {
+  value: 0,
+  fpsLimit: 60,
+  isOverLimit: 0
+}, H = (r) => (r == null ? void 0 : r.reduce((e, t) => e + t, 0)) / r.length;
+class De {
+  constructor(e = {}) {
+    this.names = [""], this.finished = [], this.paused = !1, this.overClock = !1, this.queryHasResult = !1, this.queryCreated = !1, this.isWebGL2 = !0, this.memAccums = [], this.gpuAccums = [], this.activeAccums = [], this.logsAccums = {
+      mem: [],
+      gpu: [],
+      cpu: [],
+      fps: [],
+      fpsFixed: []
+    }, this.fpsChart = [], this.gpuChart = [], this.cpuChart = [], this.memChart = [], this.paramLogger = () => {
+    }, this.glFinish = () => {
+    }, this.chartLogger = () => {
+    }, this.chartLen = 60, this.logsPerSecond = 10, this.maxMemory = 1500, this.chartHz = 10, this.startCpuProfiling = !1, this.lastCalculateFixed = 0, this.chartFrame = 0, this.gpuTimeProcess = 0, this.chartTime = 0, this.activeQueries = 0, this.circularId = 0, this.detected = 0, this.frameId = 0, this.rafId = 0, this.idleCbId = 0, this.checkQueryId = 0, this.uuid = void 0, this.currentCpu = 0, this.currentMem = 0, this.paramFrame = 0, this.paramTime = 0, this.now = () => {
+    }, this.t0 = 0, window.GLPerf = window.GLPerf || {}, Object.assign(this, e), this.fpsChart = new Array(this.chartLen).fill(0), this.gpuChart = new Array(this.chartLen).fill(0), this.cpuChart = new Array(this.chartLen).fill(0), this.memChart = new Array(this.chartLen).fill(0), this.now = () => window.performance && window.performance.now ? window.performance.now() : Date.now(), this.initGpu(), this.is120hz();
+  }
+  initGpu() {
+    this.uuid = Pe.generateUUID(), this.gl && (this.isWebGL2 = !0, this.extension || (this.extension = this.gl.getExtension(
+      "EXT_disjoint_timer_query_webgl2"
+    )), this.extension === null && (this.isWebGL2 = !1));
+  }
+  /**
+   * 120hz device detection
+   */
+  is120hz() {
+    let e = 0;
+    const t = (i) => {
+      ++e < 20 ? this.rafId = window.requestAnimationFrame(t) : (this.detected = Math.ceil(1e3 * e / (i - this.t0) / 70), window.cancelAnimationFrame(this.rafId)), this.t0 || (this.t0 = i);
+    };
+    this.rafId = window.requestAnimationFrame(t);
+  }
+  /**
+   * Explicit UI add
+   * @param { string | undefined } name
+   */
+  addUI(e) {
+    this.names.indexOf(e) === -1 && (this.names.push(e), this.gpuAccums.push(0), this.activeAccums.push(!1));
+  }
+  nextFps(e) {
+    const t = 16.666666666666668, i = t - e.timeRemaining(), m = t * S.fpsLimit / 10 / i;
+    m < 0 || (S.value = m, S.isOverLimit < 25 ? S.isOverLimit++ : M({ overclockingFps: !0 }));
+  }
+  /**
+   * Increase frameID
+   * @param { any | undefined } now
+   */
+  nextFrame(e) {
+    this.frameId++;
+    const t = e || this.now(), i = t - this.paramTime;
+    let m = 0;
+    if (this.frameId <= 1)
+      this.paramFrame = this.frameId, this.paramTime = t;
+    else if (t >= this.paramTime) {
+      this.maxMemory = window.performance.memory ? window.performance.memory.jsHeapSizeLimit / 1048576 : 0;
+      const o = this.frameId - this.paramFrame, a = o * 1e3 / i, c = R().overclockingFps ? S.value : a;
+      if (m = this.isWebGL2 ? this.gpuAccums[0] : this.gpuAccums[0] / i, this.isWebGL2 ? this.gpuAccums[0] = 0 : Promise.all(this.finished).then(() => {
+        this.gpuAccums[0] = 0, this.finished = [];
+      }), this.currentMem = Math.round(
+        window.performance && window.performance.memory ? window.performance.memory.usedJSHeapSize / 1048576 : 0
+      ), window.performance && this.startCpuProfiling) {
+        window.performance.mark("cpu-finished");
+        const v = performance.measure(
+          "cpu-duration",
+          "cpu-started",
+          "cpu-finished"
+        );
+        this.currentCpu = (v == null ? void 0 : v.duration) || 0, this.logsAccums.cpu.push(this.currentCpu), this.startCpuProfiling = !1;
+      }
+      this.logsAccums.mem.push(this.currentMem), this.logsAccums.fpsFixed.push(a), this.logsAccums.fps.push(c), this.logsAccums.gpu.push(m), this.overClock && typeof window.requestIdleCallback < "u" && (S.isOverLimit > 0 && c > a ? S.isOverLimit-- : R().overclockingFps && M({ overclockingFps: !1 })), t >= this.paramTime + 1e3 / this.logsPerSecond && (this.paramLogger({
+        cpu: H(this.logsAccums.cpu),
+        gpu: H(this.logsAccums.gpu),
+        mem: H(this.logsAccums.mem),
+        fps: H(this.logsAccums.fps),
+        duration: Math.round(i),
+        maxMemory: this.maxMemory,
+        frameCount: o
+      }), this.logsAccums.mem = [], this.logsAccums.fps = [], this.logsAccums.gpu = [], this.logsAccums.cpu = [], this.paramFrame = this.frameId, this.paramTime = t), this.overClock && t - this.lastCalculateFixed >= 2 * 1e3 && (this.lastCalculateFixed = e, S.fpsLimit = Math.round(H(this.logsAccums.fpsFixed) / 10) * 100, M({ fpsLimit: S.fpsLimit / 10 }), this.logsAccums.fpsFixed = [], this.paramFrame = this.frameId, this.paramTime = t);
+    }
+    if (!this.detected || !this.chartFrame)
+      this.chartFrame = this.frameId, this.chartTime = t, this.circularId = 0;
+    else {
+      const o = t - this.chartTime;
+      let a = this.chartHz * o / 1e3;
+      for (; --a > 0 && this.detected; ) {
+        const v = (this.frameId - this.chartFrame) / o * 1e3, s = R().overclockingFps ? S.value : v;
+        this.fpsChart[this.circularId % this.chartLen] = s;
+        const d = 1e3 / this.currentMem, f = this.currentCpu, p = (this.isWebGL2 ? this.gpuAccums[1] * 2 : Math.round(this.gpuAccums[1] / i * 100)) + 4;
+        p > 0 && (this.gpuChart[this.circularId % this.chartLen] = p), f > 0 && (this.cpuChart[this.circularId % this.chartLen] = f), d > 0 && (this.memChart[this.circularId % this.chartLen] = d);
+        for (let h = 0; h < this.names.length; h++)
+          this.chartLogger({
+            i: h,
+            data: {
+              fps: this.fpsChart,
+              gpu: this.gpuChart,
+              cpu: this.cpuChart,
+              mem: this.memChart
+            },
+            circularId: this.circularId
+          });
+        this.circularId++, this.chartFrame = this.frameId, this.chartTime = t;
+      }
+    }
+  }
+  startGpu() {
+    const e = this.gl, t = this.extension;
+    if (!(!e || !t) && this.isWebGL2) {
+      let i = !1, m, o;
+      if (this.query) {
+        this.queryHasResult = !1;
+        let a = this.query;
+        if (i = e.getQueryParameter(a, e.QUERY_RESULT_AVAILABLE), m = e.getParameter(t.GPU_DISJOINT_EXT), i && !m) {
+          o = e.getQueryParameter(this.query, e.QUERY_RESULT);
+          const c = o * 1e-6;
+          (i || m) && (e.deleteQuery(this.query), a = null), i && c > 0 && (m || this.activeAccums.forEach((v, s) => {
+            this.gpuAccums[s] = c;
+          }));
+        }
+      }
+      (i || !this.query) && (this.queryCreated = !0, this.query = e.createQuery(), e.beginQuery(t.TIME_ELAPSED_EXT, this.query));
+    }
+  }
+  endGpu() {
+    const e = this.extension, t = this.gl;
+    this.isWebGL2 && this.queryCreated && t.getQuery(e.TIME_ELAPSED_EXT, t.CURRENT_QUERY) && t.endQuery(e.TIME_ELAPSED_EXT);
+  }
+  /**
+   * Begin named measurement
+   * @param { string | undefined } name
+   */
+  begin(e) {
+    this.startGpu(), this.updateAccums(e);
+  }
+  /**
+   * End named measure
+   * @param { string | undefined } name
+   */
+  end(e) {
+    this.endGpu(), this.updateAccums(e);
+  }
+  updateAccums(e) {
+    let t = this.names.indexOf(e);
+    t === -1 && (t = this.names.length, this.addUI(e));
+    const i = this.now();
+    this.activeAccums[t] = !this.activeAccums[t], this.t0 = i;
+  }
+  dispose() {
+    const e = this.gl, t = this.extension;
+    try {
+      this.isWebGL2 && e && t && e.getQuery(t.TIME_ELAPSED_EXT, e.CURRENT_QUERY) && e.endQuery(t.TIME_ELAPSED_EXT);
+    } catch {
+    }
+    if (e && this.query) {
+      try {
+        e.deleteQuery(this.query);
+      } catch {
+      }
+      this.query = null;
+    }
+    this.queryCreated = !1, this.queryHasResult = !1;
+  }
+}
+const We = (r) => {
+  r.forEach((e) => {
+    const { meshes: t } = e;
+    if (!t)
+      return;
+    const i = {
+      total: 0,
+      type: "Triangle",
+      data: []
+    };
+    Object.keys(t).forEach((m) => {
+      const o = t[m], { geometry: a, material: c } = o, v = a.index, s = a.attributes.position;
+      if (!s) return;
+      let d = 1;
+      c.wireframe === !0 && (d = 0);
+      const f = v !== null ? v.count : s.count, p = a.drawRange.start * d, h = a.drawRange.count * d, u = p, w = Math.min(f, p + h) - 1;
+      let g = 1;
+      const _ = o.count || 1;
+      let x = "Triangle", b = 0;
+      o.isMesh ? c.wireframe === !0 ? (x = "Line", g = g / 2) : (x = "Triangle", g = g / 3) : o.isLine ? (x = "Line", o.isLineSegments ? g = g / 2 : o.isLineLoop ? g = g : g = g - 1) : o.isPoints ? (x = "Point", g = g) : o.isSprite && (x = "Triangle", g = g / 3);
+      const C = Math.round(
+        Math.max(0, w - u + 1) * (g * _)
+      );
+      C > b && (b = C, i.type = x), i.total += C, i.data.push({ drawCount: C, type: x }), o.userData.drawCount = {
+        type: x,
+        count: C
+      };
+    }), e.drawCounts = i;
+  });
+}, te = new Be();
+function Oe(r, e, t) {
+  return te.on(r, e);
+}
+function ke(r, e, t) {
+  te.removeListener(
+    r,
+    e,
+    (t == null ? void 0 : t.context) ?? null,
+    t == null ? void 0 : t.once
+  );
+}
+function He(r, e) {
+  te.emit(r, e);
+}
+function qe(r) {
+  let e = 0, t = 0;
+  const i = /* @__PURE__ */ new Set(), m = /* @__PURE__ */ new Set();
+  return r.traverse((o) => {
+    if (o.isMesh) {
+      const a = o;
+      if (a.geometry && !i.has(a.geometry.uuid)) {
+        i.add(a.geometry.uuid);
+        const s = a.geometry.attributes;
+        for (const d in s) {
+          const f = s[d];
+          f.array && (t += f.array.byteLength);
+        }
+        a.geometry.index && a.geometry.index.array && (t += a.geometry.index.array.byteLength);
+      }
+      const c = a.material;
+      (Array.isArray(c) ? c : [c]).forEach((s) => {
+        if (s)
+          for (const d in s) {
+            const f = s[d];
+            if (f && f.isTexture) {
+              const p = f;
+              if (!m.has(p.uuid)) {
+                if (m.add(p.uuid), p.isCompressedTexture && p.mipmaps)
+                  p.mipmaps.forEach((h) => {
+                    h.data && (e += h.data.byteLength);
+                  });
+                else if (p.image) {
+                  const h = p.image, u = h.width || 0, w = h.height || 0, g = p.generateMipmaps ? 1.33 : 1;
+                  e += u * w * 4 * g;
+                }
+              }
+            }
+          }
+      });
+    }
+  }), {
+    geometry: t,
+    texture: e,
+    total: t + e
+  };
+}
+const ce = E.Object3D.prototype.updateMatrixWorld, le = E.Object3D.prototype.updateWorldMatrix, ue = E.Object3D.prototype.updateMatrix, me = ["calls", "triangles", "points", "lines"], de = ["gpu", "cpu", "mem", "fps"], je = (r) => /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(
+  r
+), pe = (r, e) => {
+  r.defines || (r.defines = {}), r.defines.muiPerf || (r.defines = Object.assign(r.defines || {}, {
+    muiPerf: r.uuid
+  }), r.needsUpdate = !0);
+  const t = r.uuid;
+  return e[t] || (e[t] = { meshes: {}, material: r }), r.needsUpdate = !1, t;
+}, ze = (r) => r === "muiPerf", Ve = ({
+  overClock: r,
+  logsPerSecond: e,
+  chart: t,
+  deepAnalyze: i,
+  matrixUpdate: m
+}) => {
+  const { gl: o, scene: a } = we();
+  M({ gl: o, scene: a });
+  const c = 1e3;
+  let v = 0;
+  const s = Y(() => {
+    const d = new De({
+      trackGPU: !0,
+      overClock: r,
+      chartLen: t ? t.length : 120,
+      chartHz: t ? t.hz : 60,
+      logsPerSecond: e || 10,
+      gl: o.getContext(),
+      chartLogger: (g) => {
+        M({ chart: g });
+      },
+      paramLogger: (g) => {
+        var T;
+        const _ = {
+          maxMemory: g.maxMemory,
+          gpu: g.gpu,
+          cpu: g.cpu,
+          mem: g.mem,
+          fps: g.fps,
+          totalTime: g.duration,
+          frameCount: g.frameCount
+        };
+        M({ log: _ });
+        const { accumulated: x } = R(), b = o.info.render;
+        x.totalFrames++, x.gl.calls += b.calls, x.gl.triangles += b.triangles, x.gl.points += b.points, x.gl.lines += b.lines, x.log.gpu += g.gpu, x.log.cpu += g.cpu, x.log.mem += g.mem, x.log.fps += g.fps;
+        for (let F = 0; F < me.length; F++) {
+          const A = me[F], P = b[A];
+          P > x.max.gl[A] && (x.max.gl[A] = P);
+        }
+        for (let F = 0; F < de.length; F++) {
+          const A = de[F], P = g[A];
+          P > x.max.log[A] && (x.max.log[A] = P);
+        }
+        M({ accumulated: x });
+        const C = {
+          calls: o.info.render.calls,
+          triangles: o.info.render.triangles,
+          points: o.info.render.points,
+          lines: o.info.render.lines,
+          geometries: o.info.memory.geometries,
+          textures: o.info.memory.textures,
+          programs: ((T = o.info.programs) == null ? void 0 : T.length) || 0
+        };
+        He("log", [_, C]);
+      }
+    }), f = o.getContext();
+    let p = null, h = null;
+    const u = f.getExtension("WEBGL_debug_renderer_info"), w = f.getParameter(f.VERSION);
+    return u && (p = f.getParameter(u.UNMASKED_RENDERER_WEBGL), h = f.getParameter(u.UNMASKED_VENDOR_WEBGL)), h || (h = "Unknown vendor"), p || (p = f.getParameter(f.RENDERER)), M({
+      startTime: window.performance.now(),
+      infos: {
+        version: w,
+        renderer: p,
+        vendor: h
+      }
+    }), d;
+  }, [r, t, e, o]);
+  return U(() => {
+    s && (s.overClock = r || !1, r === !1 && (M({ overclockingFps: !1 }), S.value = 0, S.isOverLimit = 0), s.chartHz = (t == null ? void 0 : t.hz) || 60, s.chartLen = (t == null ? void 0 : t.length) || 120);
+  }, [s, r, t == null ? void 0 : t.hz, t == null ? void 0 : t.length]), U(() => {
+    if (!o.info) return;
+    o.info.autoReset = !1, m && (E.Object3D.prototype.updateMatrixWorld = function(...p) {
+      return this.matrixWorldNeedsUpdate || p[0], ce.apply(this, p);
+    }, E.Object3D.prototype.updateWorldMatrix = function(...p) {
+      return le.apply(this, p);
+    }, E.Object3D.prototype.updateMatrix = function(...p) {
+      return ue.apply(this, p);
+    });
+    const d = Ae(() => {
+      R().paused && M({ paused: !1 }), s == null || s.begin("profiler"), window.performance && (window.performance.mark("cpu-started"), s.startCpuProfiling = !0), o.info.reset();
+    }), f = Se(() => {
+      var w, g;
+      s == null || s.end("profiler"), s && !s.paused && (s.nextFrame(window.performance.now()), r && typeof window.requestIdleCallback < "u" && (s.idleCbId = requestIdleCallback(s.nextFps)));
+      const p = window.performance.now();
+      if (p - v > c) {
+        v = p;
+        const _ = qe(a), x = s.currentMem || 0;
+        M({
+          estimatedMemory: {
+            vram: _.total / 1024 / 1024,
+            // Đổi ra MB
+            tex: _.texture / 1024 / 1024,
+            geo: _.geometry / 1024 / 1024,
+            ram: x
+            // Đã là MB
+          }
+        });
+      }
+      if (!i) return;
+      const h = {}, u = /* @__PURE__ */ new Map();
+      a.traverse((_) => {
+        if (_ instanceof E.Mesh || _ instanceof E.Points) {
+          if (!_.material) return;
+          let x = _.material.uuid;
+          const b = Array.isArray(_.material) && _.material.length > 1;
+          x = pe(b ? _.material[1] : _.material, h), h[x].meshes[_.uuid] = _;
+        }
+      }), (g = (w = o == null ? void 0 : o.info) == null ? void 0 : w.programs) == null || g.forEach((_) => {
+        const x = _.cacheKey.split(","), b = x[x.findIndex(ze) + 1];
+        if (je(b) && h[b]) {
+          const { material: C, meshes: T } = h[b];
+          u.set(b, {
+            program: _,
+            material: C,
+            meshes: T,
+            drawCounts: { total: 0, type: "triangle", data: [] },
+            expand: !1,
+            visible: !0
+          });
+        }
+      }), u.size !== R().programs.size && (We(u), M({
+        programs: u,
+        triggerProgramsUpdate: R().triggerProgramsUpdate + 1
+      }));
+    });
+    return () => {
+      var p;
+      s && typeof window.cancelIdleCallback < "u" && window.cancelIdleCallback(s.idleCbId), (p = s == null ? void 0 : s.dispose) == null || p.call(s), m && (E.Object3D.prototype.updateMatrixWorld = ce, E.Object3D.prototype.updateWorldMatrix = le, E.Object3D.prototype.updateMatrix = ue), d(), f();
+    };
+  }, [s, o, a, i, r, m]), U(() => {
+    const d = Ne(() => (s && (s.paused = !0, M({
+      paused: !0,
+      log: {
+        maxMemory: 0,
+        gpu: 0,
+        mem: 0,
+        cpu: 0,
+        fps: 0,
+        totalTime: 0,
+        frameCount: 0
+      }
+    })), !1));
+    return () => d();
+  }, [s]), null;
+};
+function re(r, e, t = [], i) {
+  const m = I(e);
+  U(() => {
+    m.current = e;
+  }, [e]), U(() => {
+    const o = (c) => {
+      var v;
+      return (v = m.current) == null ? void 0 : v.call(m, c);
+    }, a = Oe(r, o);
+    return () => ke(r, o, {
+      ...i,
+      context: a
+    });
+  }, [r, i == null ? void 0 : i.once, ...t]);
+}
+function $e(r) {
+  let e = 0;
+  for (const i in r.attributes) {
+    const m = r.getAttribute(i);
+    e += m.count * m.itemSize * m.array.BYTES_PER_ELEMENT;
+  }
+  const t = r.getIndex();
+  return e += t ? t.count * t.itemSize * t.array.BYTES_PER_ELEMENT : 0, e;
+}
+const Qe = "_perfS_ans5i_1", Xe = "_containerHeight_ans5i_16", Ye = "_topLeft_ans5i_21", Ke = "_topRight_ans5i_22", Je = "_bottomLeft_ans5i_23", Ze = "_bottomRight_ans5i_24", et = "_minimal_ans5i_26", tt = "_perfIContainer_ans5i_30", rt = "_perfI_ans5i_30", st = "_perfB_ans5i_69", nt = "_toggleContainer_ans5i_83", it = "_toggle_ans5i_83", at = "_activeTab_ans5i_105", ot = "_containerScroll_ans5i_110", ct = "_programGeo_ans5i_115", lt = "_programHeader_ans5i_120", ut = "_headerLeft_ans5i_149", mt = "_programTitle_ans5i_156", dt = "_toggleArrow_ans5i_166", pt = "_programConsole_ans5i_200", ft = "_programsContainer_ans5i_218", ht = "_headerRight_ans5i_222", gt = "_metricBadge_ans5i_228", yt = "_programsULHeader_ans5i_246", vt = "_programsUL_ans5i_246", xt = "_programsGeoLi_ans5i_309", wt = "_graph_ans5i_324", _t = "_visibilityBtn_ans5i_354", bt = "_active_ans5i_105", l = {
+  perfS: Qe,
+  containerHeight: Xe,
+  topLeft: Ye,
+  topRight: Ke,
+  bottomLeft: Je,
+  bottomRight: Ze,
+  minimal: et,
+  perfIContainer: tt,
+  perfI: rt,
+  perfB: st,
+  toggleContainer: nt,
+  toggle: it,
+  activeTab: at,
+  containerScroll: ot,
+  programGeo: ct,
+  programHeader: lt,
+  headerLeft: ut,
+  programTitle: mt,
+  toggleArrow: dt,
+  programConsole: pt,
+  programsContainer: ft,
+  headerRight: ht,
+  metricBadge: gt,
+  programsULHeader: yt,
+  programsUL: vt,
+  programsGeoLi: xt,
+  graph: wt,
+  visibilityBtn: _t,
+  active: bt
+}, fe = (r, e) => {
+  var m, o;
+  const t = (a) => {
+    switch (a) {
+      case 1e3:
+        return "RepeatWrapping";
+      case 1001:
+        return "ClampToEdgeWrapping";
+      case 1002:
+        return "MirroredRepeatWrapping";
+      default:
+        return "ClampToEdgeWrapping";
+    }
+  }, i = (a) => {
+    switch (a) {
+      case 3e3:
+        return "LinearEncoding";
+      case 3001:
+        return "sRGBEncoding";
+      case 3002:
+        return "RGBEEncoding";
+      case 3003:
+        return "LogLuvEncoding";
+      case 3004:
+        return "RGBM7Encoding";
+      case 3005:
+        return "RGBM16Encoding";
+      case 3006:
+        return "RGBDEncoding";
+      case 3007:
+        return "GammaEncoding";
+      default:
+        return "ClampToEdgeWrapping";
+    }
+  };
+  return {
+    name: r,
+    url: (m = e == null ? void 0 : e.image) == null ? void 0 : m.currentSrc,
+    encoding: i(e.encoding),
+    wrapT: t(e.wrapT),
+    flipY: (o = e.flipY) == null ? void 0 : o.toString()
+  };
+}, Z = ({
+  value: r,
+  label: e,
+  unit: t,
+  title: i
+}) => r == null || r === 0 || r === "0" ? null : /* @__PURE__ */ y("div", { className: l.metricBadge, title: i, children: [
+  /* @__PURE__ */ n("b", { children: r }),
+  " ",
+  t || e
+] }), Ct = ({ program: r, material: e, setTexNumber: t }) => {
+  const i = L((a) => a.gl), [m, o] = O(null);
+  return U(() => {
+    if (i) {
+      const a = r == null ? void 0 : r.getUniforms();
+      let c = 0;
+      const v = /* @__PURE__ */ new Map();
+      a && a.seq && a.seq.forEach((s) => {
+        if (!s.id.includes("uTroika") && ![
+          "isOrthographic",
+          "uvTransform",
+          "lightProbe",
+          "projectionMatrix",
+          "viewMatrix",
+          "normalMatrix",
+          "modelMatrix",
+          "modelViewMatrix"
+        ].includes(s.id)) {
+          const d = [], f = { name: s.id };
+          s.cache && (s.cache.forEach((p) => {
+            typeof p < "u" && d.push(p.toString().substring(0, 4));
+          }), f.value = d.join(), e[s.id] && e[s.id].image && (c++, f.value = fe(s.id, e[s.id])), f.value || (f.value = "empty"), v.set(s.id, f));
+        }
+      }), e.uniforms && Object.keys(e.uniforms).forEach((s) => {
+        const d = e.uniforms[s];
+        if (d.value) {
+          const { value: f } = d, p = { name: s };
+          if (s.includes("uTroika")) return;
+          if (f.isTexture)
+            c++, p.value = fe(s, f);
+          else {
+            let h = JSON.stringify(f);
+            try {
+              h = JSON.stringify(f);
+            } catch {
+              h = f.toString();
+            }
+            p.value = h;
+          }
+          v.set(s, p);
+        }
+      }), t(c), o(v);
+    }
+  }, [i, e, r, t]), /* @__PURE__ */ n("ul", { className: l.programsUL, children: m && Array.from(m.values()).map((a) => /* @__PURE__ */ n("span", { children: typeof a.value == "string" ? /* @__PURE__ */ n("li", { children: /* @__PURE__ */ y("span", { children: [
+    a.name,
+    " :",
+    " ",
+    /* @__PURE__ */ y("b", { children: [
+      a.value.substring(0, 30),
+      a.value.length > 30 ? "..." : ""
+    ] })
+  ] }) }) : /* @__PURE__ */ y(z, { children: [
+    /* @__PURE__ */ n("li", { children: /* @__PURE__ */ y("b", { children: [
+      a.value.name,
+      ":"
+    ] }) }),
+    /* @__PURE__ */ y("div", { children: [
+      Object.keys(a.value).map(
+        (c) => c !== "name" ? /* @__PURE__ */ n("div", { children: c === "url" ? /* @__PURE__ */ n(
+          "a",
+          {
+            href: a.value[c],
+            target: "_blank",
+            rel: "noreferrer",
+            children: /* @__PURE__ */ n("img", { src: a.value[c], alt: "texture" })
+          }
+        ) : /* @__PURE__ */ y("li", { children: [
+          c,
+          ": ",
+          /* @__PURE__ */ n("b", { children: a.value[c] })
+        ] }) }, c) : null
+      ),
+      /* @__PURE__ */ y(
+        "button",
+        {
+          className: l.programConsole,
+          onClick: () => {
+            var c;
+            console.info(
+              e[a.value.name] || ((c = e == null ? void 0 : e.uniforms[a.value.name]) == null ? void 0 : c.value)
+            );
+          },
+          children: [
+            "console.info(",
+            a.value.name,
+            ");"
+          ]
+        }
+      )
+    ] })
+  ] }) }, a.name)) });
+}, Et = ({ el: r }) => {
+  const [e, t] = O(r.visible), [i, m] = O(r.expand), [o, a] = O(0), { meshes: c, program: v, material: s } = r, d = L((u) => u.gl), f = () => {
+    if (!d || !d.info || !d.info.render) return 0;
+    const u = d.info.render.triangles + d.info.render.lines + d.info.render.points;
+    if (u === 0) return 0;
+    const w = Math.round(r.drawCounts.total / u * 100 * 10) / 10;
+    return isFinite(w) && w || 0;
+  }, p = Object.keys(c).length, h = f();
+  return /* @__PURE__ */ y("div", { className: l.programGeo, children: [
+    /* @__PURE__ */ y(
+      "div",
+      {
+        className: l.programHeader,
+        onClick: () => {
+          Object.keys(c).forEach((u) => {
+            c[u].material.wireframe = !1;
+          }), m(!i);
+        },
+        children: [
+          /* @__PURE__ */ y("div", { className: l.headerLeft, children: [
+            /* @__PURE__ */ n(
+              "div",
+              {
+                className: l.toggleArrow,
+                style: {
+                  transform: i ? "rotate(90deg)" : "rotate(0deg)"
+                },
+                children: "▶"
+              }
+            ),
+            v && /* @__PURE__ */ n("span", { className: l.programTitle, children: v.name })
+          ] }),
+          /* @__PURE__ */ y("div", { className: l.headerRight, children: [
+            /* @__PURE__ */ n(
+              Z,
+              {
+                value: p,
+                unit: p > 1 ? "users" : "user"
+              }
+            ),
+            /* @__PURE__ */ n(Z, { value: o, unit: "tex" }),
+            r.drawCounts.total > 0 && /* @__PURE__ */ y(
+              "div",
+              {
+                className: l.metricBadge,
+                title: `${h}% of total render`,
+                children: [
+                  /* @__PURE__ */ n("b", { children: r.drawCounts.total }),
+                  r.drawCounts.type === "Triangle" ? "tris" : r.drawCounts.type,
+                  r.visible && !r.material.wireframe && /* @__PURE__ */ y(
+                    "span",
+                    {
+                      style: { marginLeft: "4px", opacity: 0.6, fontSize: "9px" },
+                      children: [
+                        "(",
+                        h,
+                        "%)"
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            s.glslVersion === "300 es" && /* @__PURE__ */ n(Z, { value: "300", unit: "es" }),
+            /* @__PURE__ */ n(
+              "div",
+              {
+                className: `${l.visibilityBtn} ${e ? l.active : ""}`,
+                onPointerEnter: () => {
+                  Object.keys(c).forEach(
+                    (u) => c[u].material.wireframe = !0
+                  );
+                },
+                onPointerLeave: () => {
+                  Object.keys(c).forEach(
+                    (u) => c[u].material.wireframe = !1
+                  );
+                },
+                onClick: (u) => {
+                  u.stopPropagation();
+                  const w = !e;
+                  Object.keys(c).forEach((g) => {
+                    c[g] && (c[g].visible = w);
+                  }), t(w);
+                },
+                children: e ? "👁" : "×"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ y("div", { style: { display: i ? "block" : "none" }, children: [
+      /* @__PURE__ */ n("div", { className: l.programsULHeader, style: { marginTop: "4px" }, children: "Uniforms" }),
+      /* @__PURE__ */ n(
+        Ct,
+        {
+          program: v,
+          material: s,
+          setTexNumber: a
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: l.programsULHeader, children: "Geometries" }),
+      /* @__PURE__ */ n("ul", { className: l.programsUL, children: c && Object.keys(c).map(
+        (u) => c[u] && c[u].geometry && /* @__PURE__ */ n("li", { className: l.programsGeoLi, children: /* @__PURE__ */ y(
+          "div",
+          {
+            style: {
+              width: "100%",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ n("span", { children: c[u].geometry.type }),
+              c[u].userData && c[u].userData.drawCount && /* @__PURE__ */ y(
+                "span",
+                {
+                  style: {
+                    color: "#aaa",
+                    fontSize: "10px",
+                    display: "flex",
+                    gap: "6px"
+                  },
+                  children: [
+                    /* @__PURE__ */ y("span", { children: [
+                      /* @__PURE__ */ n("b", { children: c[u].userData.drawCount.count }),
+                      " ",
+                      c[u].userData.drawCount.type,
+                      "s"
+                    ] }),
+                    /* @__PURE__ */ n("span", { style: { opacity: 0.3 }, children: "|" }),
+                    /* @__PURE__ */ y("span", { children: [
+                      /* @__PURE__ */ n("b", { children: Math.round(
+                        $e(c[u].geometry) / 1024 * 100
+                      ) / 100 }),
+                      " ",
+                      "KB"
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ) }, u)
+      ) }),
+      /* @__PURE__ */ y(
+        "button",
+        {
+          className: l.programConsole,
+          onClick: () => console.info(s),
+          children: [
+            "Log Material (",
+            s.type,
+            ")"
+          ]
+        }
+      )
+    ] })
+  ] });
+}, Mt = () => {
+  L((e) => e.triggerProgramsUpdate);
+  const r = L((e) => e.programs);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: l.programsContainer,
+      onWheel: (e) => e.stopPropagation(),
+      children: r && Array.from(r.values()).map((e) => e ? /* @__PURE__ */ n(Et, { el: e }, e.material.uuid) : null)
+    }
+  );
+}, It = ({
+  minimal: r,
+  chart: e = { length: 120, hz: 60 }
+}) => {
+  const t = Y(() => ({
+    fps: new Float32Array(e.length * 3),
+    cpu: new Float32Array(e.length * 3),
+    gpu: new Float32Array(e.length * 3)
+  }), [e]), i = I(null), m = I(null), o = I(null), a = I(null), c = Y(() => new E.Vector3(0, 0, 0), []), v = (s, d = 1, f, p) => {
+    let h = 0;
+    const { width: u, height: w } = p, g = R().chart.data[s];
+    if (!g || g.length === 0)
+      return;
+    const _ = r ? 2 : 6, x = r ? 12 : 50, b = g.length;
+    for (let C = 0; C < b; C++) {
+      const T = (R().chart.circularId + C + 1) % b;
+      g[T] !== void 0 && (g[T] > h && (h = g[T] * d), c.set(
+        _ + C / (b - 1) * (u - _ * 2) - u / 2,
+        Math.min(100, g[T]) * d / 100 * (w - _ * 2 - x) - w / 2,
+        0
+      ), c.toArray(f.attributes.position.array, C * 3));
+    }
+    f.attributes.position.needsUpdate = !0;
+  };
+  return _e(function({ viewport: d }) {
+    v("fps", 1, i.current, d), m.current && m.current.color.set(
+      R().overclockingFps ? N.overClock : N.fps
+    ), v("gpu", 5, o.current, d), v("cpu", 5, a.current, d);
+  }), /* @__PURE__ */ y(z, { children: [
+    /* @__PURE__ */ y(
+      "line",
+      {
+        onUpdate: (s) => {
+          s.updateMatrix(), s.matrixWorld.copy(s.matrix);
+        },
+        children: [
+          /* @__PURE__ */ n("bufferGeometry", { ref: i, children: /* @__PURE__ */ n(
+            "bufferAttribute",
+            {
+              attach: "attributes-position",
+              count: e.length,
+              args: [t.fps, 3],
+              array: t.fps,
+              itemSize: 3,
+              usage: E.DynamicDrawUsage,
+              needsUpdate: !0
+            }
+          ) }),
+          /* @__PURE__ */ n(
+            "lineBasicMaterial",
+            {
+              ref: m,
+              color: N.fps,
+              transparent: !0,
+              opacity: 0.5
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ y(
+      "line",
+      {
+        onUpdate: (s) => {
+          s.updateMatrix(), s.matrixWorld.copy(s.matrix);
+        },
+        children: [
+          /* @__PURE__ */ n("bufferGeometry", { ref: o, children: /* @__PURE__ */ n(
+            "bufferAttribute",
+            {
+              attach: "attributes-position",
+              count: e.length,
+              array: t.gpu,
+              args: [t.gpu, 3],
+              itemSize: 3,
+              usage: E.DynamicDrawUsage,
+              needsUpdate: !0
+            }
+          ) }),
+          /* @__PURE__ */ n("lineBasicMaterial", { color: N.gpu, transparent: !0, opacity: 0.5 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ y(
+      "line",
+      {
+        onUpdate: (s) => {
+          s.updateMatrix(), s.matrixWorld.copy(s.matrix);
+        },
+        children: [
+          /* @__PURE__ */ n("bufferGeometry", { ref: a, children: /* @__PURE__ */ n(
+            "bufferAttribute",
+            {
+              attach: "attributes-position",
+              count: e.length,
+              array: t.cpu,
+              args: [t.cpu, 3],
+              itemSize: 3,
+              usage: E.DynamicDrawUsage,
+              needsUpdate: !0
+            }
+          ) }),
+          /* @__PURE__ */ n("lineBasicMaterial", { color: N.cpu, transparent: !0, opacity: 0.5 })
+        ]
+      }
+    )
+  ] });
+}, Lt = ({
+  chart: r,
+  showGraph: e = !0,
+  antialias: t = !0,
+  minimal: i
+}) => {
+  const m = I(void 0), o = L((a) => a.paused);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: l.graph,
+      style: {
+        display: "flex",
+        marginTop: 6,
+        position: "absolute",
+        width: "100%",
+        height: `${i ? 37 : e ? 100 : 60}px`
+      },
+      children: /* @__PURE__ */ n(
+        Re,
+        {
+          ref: m,
+          orthographic: !0,
+          camera: { rotation: [0, 0, 0] },
+          dpr: t ? [1, 2] : 1,
+          gl: {
+            antialias: !0,
+            alpha: !0,
+            stencil: !1,
+            depth: !1
+          },
+          onCreated: ({ scene: a }) => {
+            a.traverse((c) => {
+              c.matrixWorldAutoUpdate = !1, c.matrixAutoUpdate = !1;
+            });
+          },
+          flat: !0,
+          style: {
+            marginBottom: "-42px",
+            position: "relative",
+            pointerEvents: "none",
+            background: "transparent !important",
+            width: "100%",
+            height: `${i ? 37 : e ? 100 : 60}px`
+          },
+          children: o ? null : /* @__PURE__ */ y(z, { children: [
+            /* @__PURE__ */ n(Tt, {}),
+            e && /* @__PURE__ */ n(It, { minimal: i, chart: r })
+          ] })
+        }
+      )
+    }
+  );
+}, Tt = () => (_e(function({ gl: e, scene: t, camera: i }) {
+  i.updateMatrix(), i.matrixWorld.copy(i.matrix), i.matrixWorldInverse.copy(i.matrixWorld).invert(), e.render(t, i);
+}, 1 / 0), null), he = {
+  fps: { fg: "#00ffff", bg: "#000022" },
+  // Chỉnh màu nền đậm hơn chút
+  cpu: { fg: "#00ff00", bg: "#002200" },
+  gpu: { fg: "#ff0080", bg: "#220011" }
+}, D = [
+  { key: "fps", label: "FPS", maxVal: 120 },
+  { key: "cpu", label: "CPU", maxVal: 40 },
+  { key: "gpu", label: "GPU", maxVal: 40 }
+], W = 48, Ce = 15, Q = 2, j = Ce, q = W - j - 2, X = 6, At = 15, ge = 1e3 / At;
+function St({
+  show: r = !0,
+  opacity: e = 1,
+  // Tăng opacity lên 1 để bớt trong suốt
+  className: t,
+  style: i
+}) {
+  const m = L((h) => h.paused), o = I(null), a = I(null), [c, v] = O(300), s = Y(
+    () => Math.max(1, Math.round(window.devicePixelRatio || 1)),
+    []
+  );
+  U(() => {
+    if (!a.current) return;
+    const h = new ResizeObserver((u) => {
+      for (const w of u)
+        v(w.contentRect.width);
+    });
+    return h.observe(a.current), () => h.disconnect();
+  }, []);
+  const d = (D.length - 1) * X, f = Math.max(0, (c - d) / D.length), p = Math.max(0, f - Q);
+  return U(() => {
+    const h = o.current;
+    if (!h) return;
+    h.width = c * s, h.height = W * s, h.style.width = "100%", h.style.height = `${W}px`;
+    const u = h.getContext("2d");
+    if (u) {
+      u.setTransform(1, 0, 0, 1, 0, 0), u.scale(s, s), u.imageSmoothingEnabled = !1, u.font = "bold 9px Roboto Mono, monospace", u.textBaseline = "top", u.clearRect(0, 0, c, W);
+      for (let w = 0; w < D.length; w++) {
+        const { key: g } = D[w], _ = w * (f + X), { bg: x } = he[g];
+        u.fillStyle = x, u.globalAlpha = e, u.fillRect(_, 0, f, W), u.globalAlpha = 1;
+      }
+    }
+  }, [s, c, f, e]), U(() => {
+    if (!r) return;
+    const h = o.current;
+    if (!h) return;
+    const u = h.getContext("2d");
+    if (!u) return;
+    let w = 0, g = 0;
+    const _ = {
+      fps: { min: 1 / 0, max: 0 },
+      cpu: { min: 1 / 0, max: 0 },
+      gpu: { min: 1 / 0, max: 0 }
+    };
+    function x(b) {
+      if (!h || !u || (w = requestAnimationFrame(x), m)) return;
+      const C = b - g;
+      if (C < ge) return;
+      g = b - C % ge;
+      const T = R(), F = T.chart.circularId;
+      for (let A = 0; A < D.length; A++) {
+        const { key: P, label: Ee, maxVal: se } = D[A], k = A * (f + X), { fg: ne, bg: ie } = he[P], V = T.chart.data[P], K = (V == null ? void 0 : V.length) || 0;
+        let $ = 0;
+        if (K > 0) {
+          const Le = (F - 1 + K) % K;
+          $ = V[Le] ?? 0;
+        }
+        const B = _[P];
+        B.min = Math.min(B.min, $), B.max = Math.max(B.max, $), u.fillStyle = ie, u.globalAlpha = 1, u.fillRect(k, 0, f, Ce), u.fillStyle = ne;
+        const Me = `${Ee} (${Math.round(B.min)}-${Math.round(B.max)})`;
+        u.fillText(Me, k + 3, 2), p > 1 && u.drawImage(
+          h,
+          (k + Q + 1) * s,
+          j * s,
+          (p - 1) * s,
+          q * s,
+          k + Q,
+          j,
+          p - 1,
+          q
+        );
+        const ae = k + Q + p - 1;
+        u.fillStyle = ie, u.globalAlpha = 1, u.fillRect(ae, j, 1, q), u.fillStyle = ne, u.globalAlpha = 1;
+        const Ie = Math.min($, se) / se, J = Math.round(Ie * q);
+        J > 0 && u.fillRect(ae, j + q - J, 1, J);
+      }
+    }
+    return w = requestAnimationFrame(x), () => cancelAnimationFrame(w);
+  }, [m, r, s, f, p]), r ? /* @__PURE__ */ n(
+    "div",
+    {
+      ref: a,
+      className: t,
+      style: { width: "100%", ...i, marginTop: X },
+      children: /* @__PURE__ */ n(
+        "canvas",
+        {
+          ref: o,
+          style: {
+            display: "block",
+            pointerEvents: "none",
+            width: "100%",
+            height: `${W}px`
+          }
+        }
+      )
+    }
+  ) : null;
+}
+const N = {
+  overClock: "#ff6eff",
+  fps: "#00FFFF",
+  // 0,255,255
+  cpu: "#00FF00",
+  // 0,255,0
+  gpu: "#FD007F",
+  // 253,0,127
+  memory: "#FFD000",
+  // 255,208,0
+  vram: "#FF8C00"
+  // 255,140,0
+}, ye = ({
+  metric: r,
+  decimal: e = 0,
+  suffix: t = ""
+}) => {
+  const i = I(null);
+  return re("log", (m) => {
+    const [o] = m;
+    if (o && i.current) {
+      const a = o[r];
+      i.current.innerText = (typeof a == "number" ? a.toFixed(e) : "0") + t;
+    }
+  }), /* @__PURE__ */ y("span", { ref: i, children: [
+    "0",
+    t
+  ] });
+}, G = ({
+  metric: r,
+  suffix: e = ""
+}) => {
+  const t = I(null);
+  return re("log", (i) => {
+    const [, m] = i;
+    if (m && t.current) {
+      let o = m[r];
+      r === "calls" && o === 1 && (o = "--"), t.current.innerText = o + e;
+    }
+  }), /* @__PURE__ */ y("span", { ref: t, children: [
+    "0",
+    e
+  ] });
+}, ve = ({ type: r }) => {
+  const e = L((t) => t.estimatedMemory[r]);
+  return /* @__PURE__ */ y("span", { children: [
+    e.toFixed(0),
+    " MB"
+  ] });
+}, Nt = () => {
+  const r = L((m) => m.overclockingFps), e = L((m) => m.fpsLimit), t = I(null);
+  re("log", (m) => {
+    const [o] = m;
+    o && t.current && (t.current.innerText = Math.round(o.fps).toString());
+  });
+  const i = r ? N.overClock : N.fps;
+  return /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ y("span", { className: l.perfB, style: { color: i }, children: [
+      "FPS ",
+      r ? ` ${e}🚀` : ""
+    ] }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, ref: t, children: "0" })
+  ] });
+}, Rt = ({ showGraph: r, minimal: e }) => L((i) => i.gl) ? /* @__PURE__ */ y("div", { className: l.perfIContainer, children: [
+  /* @__PURE__ */ n(Nt, { showGraph: r }),
+  /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ n("span", { className: l.perfB, style: { color: N.cpu }, children: "CPU" }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(ye, { metric: "cpu", decimal: 2, suffix: " ms" }) })
+  ] }),
+  /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ n("span", { className: l.perfB, style: { color: N.gpu }, children: "GPU" }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(ye, { metric: "gpu", decimal: 2, suffix: " ms" }) })
+  ] }),
+  /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ n("span", { className: l.perfB, style: { color: N.memory }, children: "MEMORY" }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(ve, { type: "ram" }) })
+  ] }),
+  /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ n("span", { className: l.perfB, style: { color: N.vram }, children: "VRAM" }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(ve, { type: "vram" }) })
+  ] }),
+  !e && /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ n("span", { className: l.perfB, children: "Calls" }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "calls" }) })
+  ] })
+] }) : null, Ft = ({ matrixUpdate: r }) => /* @__PURE__ */ y("div", { className: l.perfIContainer, children: [
+  /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ n("span", { className: l.perfB, children: "Geometries" }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "geometries" }) })
+  ] }),
+  /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ n("span", { className: l.perfB, children: "Textures" }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "textures" }) })
+  ] }),
+  /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ n("span", { className: l.perfB, children: "Shaders" }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "programs" }) })
+  ] }),
+  /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ n("span", { className: l.perfB, children: "Triangles" }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "triangles" }) })
+  ] }),
+  /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ n("span", { className: l.perfB, children: "Lines" }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "lines" }) })
+  ] }),
+  /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ n("span", { className: l.perfB, children: "Points" }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: /* @__PURE__ */ n(G, { metric: "points" }) })
+  ] }),
+  r && /* @__PURE__ */ y("div", { className: l.perfI, children: [
+    /* @__PURE__ */ n("span", { className: l.perfB, children: "Matrices" }),
+    /* @__PURE__ */ n("small", { className: l.perfSmallI, children: r })
+  ] })
+] }), xe = ({ tab: r, title: e, set: t }) => {
+  const i = L((m) => m.tab);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: `${l.toggle} ${i === r ? l.activeTab : ""}`,
+      onClick: () => {
+        t(!0), M({ tab: r });
+      },
+      children: e
+    }
+  );
+}, Pt = ({
+  openByDefault: r,
+  showGraph: e,
+  deepAnalyze: t,
+  matrixUpdate: i,
+  graphType: m,
+  perfContainerRef: o,
+  antialias: a,
+  chart: c,
+  minimal: v
+}) => {
+  const [s, d] = O(r || !1), f = L((p) => p.tab);
+  return /* @__PURE__ */ y(z, { children: [
+    /* @__PURE__ */ y("div", { style: { display: s ? "block" : "none", marginTop: "4px" }, children: [
+      /* @__PURE__ */ n(Ft, { matrixUpdate: i }),
+      e && (m === "bar" ? /* @__PURE__ */ n(St, {}) : /* @__PURE__ */ n(
+        Lt,
+        {
+          perfContainerRef: o,
+          chart: c,
+          showGraph: e,
+          antialias: a,
+          minimal: v,
+          matrixUpdate: i
+        }
+      )),
+      s && /* @__PURE__ */ n("div", { className: l.containerScroll, children: f === "programs" && /* @__PURE__ */ n(Mt, {}) })
+    ] }),
+    r && !t ? null : /* @__PURE__ */ y(
+      "div",
+      {
+        className: l.toggleContainer,
+        style: s && e && m === "line" ? { marginTop: 50 } : { marginTop: 6 },
+        children: [
+          t && /* @__PURE__ */ n(xe, { tab: "programs", title: "Programs", set: d }),
+          t && /* @__PURE__ */ n(xe, { tab: "infos", title: "Infos", set: d }),
+          /* @__PURE__ */ n("div", { className: l.toggle, onClick: () => d(!s), children: s ? "Minimize" : "More" })
+        ]
+      }
+    )
+  ] });
+}, qt = ({
+  showGraph: r = !0,
+  openByDefault: e = !0,
+  className: t,
+  overClock: i = !1,
+  graphType: m = "bar",
+  style: o,
+  position: a = "top-right",
+  chart: c,
+  logsPerSecond: v,
+  deepAnalyze: s = !1,
+  antialias: d = !0,
+  matrixUpdate: f,
+  minimal: p
+}) => {
+  const h = I(null), u = a === "top-left" ? l.topLeft : a === "bottom-left" ? l.bottomLeft : a === "bottom-right" ? l.bottomRight : l.topRight, w = r && m === "line" && !s;
+  return /* @__PURE__ */ y(z, { children: [
+    /* @__PURE__ */ n(
+      Ve,
+      {
+        logsPerSecond: v,
+        chart: c,
+        overClock: i,
+        deepAnalyze: s,
+        matrixUpdate: f
+      }
+    ),
+    /* @__PURE__ */ n(be, { name: "r3f-perf", children: /* @__PURE__ */ y(
+      "div",
+      {
+        className: `${l.perfS} ${u} ${p ? l.minimal : ""} ${t || ""} ${w ? l.containerHeight : ""}`,
+        style: o,
+        ref: h,
+        children: [
+          /* @__PURE__ */ n(Rt, { showGraph: r, minimal: p }),
+          !p && /* @__PURE__ */ n(
+            Pt,
+            {
+              showGraph: r,
+              deepAnalyze: s,
+              matrixUpdate: f,
+              openByDefault: e,
+              graphType: m,
+              perfContainerRef: h,
+              antialias: d,
+              chart: c,
+              minimal: p
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  qt as PerformanceMonitor
+};