r3f-performance 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2021-2023 Renaud Destrem (utsuboco)
+Copyright (c) 2026 Hoàng Anh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# R3F-Performance
+
+**[Changelog](https://github.com/anhldh/r3f-performace/blob/main/CHANGELOG.md)**
+
+A lightweight and easy-to-use tool to monitor the performance of your @react-three/fiber application.
+
+<table>
+  <tr>
+    <td>Add the <code>&lt;PerformanceMonitor /&gt;</code> component anywhere in your R3F Canvas.</td>
+    <td>
+      <a href="https://wtp9t.csb.app/">
+        <img src="https://bf3xu0otcy.ufs.sh/f/lSBP1EY5xRSnLHNlxKuvoRAdugXS39mBlIzpHEcwjKqeLFNJ" alt="R3F Performance Monitor" />
+      </a>
+    </td>
+  </tr>
+</table>
+
+## Installation
+
+```bash
+# npm
+npm install r3f-performance
+
+# yarn
+yarn add r3f-performance
+
+# pnpm
+pnpm add r3f-performance
+```
+
+## Options
+
+```jsx
+logsPerSecond?: 10, // Refresh rate of the logs
+
+antialias?: true, // Take a bit more performances but render the text with antialiasing
+
+overClock?: false, // Disable the limitation of the monitor refresh rate for the fps
+
+deepAnalyze?: false, // More detailed informations about gl programs
+
+showGraph?: Toggles the visibility of the performance graphs. Default true
+
+graphType?: Style of the graph. Options: 'line' or 'bar'.
+
+minimal?: false // condensed version with the most important informations (gpu/memory/fps/memory/vram)
+
+matrixUpdate?: false // count the number of time matrixWorldUpdate is called per frame
+
+chart?: {
+  hz: 60, // graphs refresh frequency parameter
+  length: 120, // number of values shown on the monitor
+}
+
+className?: '' // override CSS class
+
+style?: {} // override style
+
+position?: Sets the position of the panel. Options: 'top-right', 'top-left', 'bottom-right', 'bottom-left'.
+
+```
+
+## Usage
+
+```jsx
+import { Canvas } from "@react-three/fiber";
+import { PerformanceMonitor } from "r3f-performance";
+
+function App() {
+  return (
+    <Canvas>
+      <PerformanceMonitor />
+    </Canvas>
+  );
+}
+```
+
+### Maintainers :
+
+- [`@anhldh`](https://github.com/anhldh/r3f-performance)
+
+### Thanks
+
+Special thanks to [`twitter @utsuboco`](https://twitter.com/utsuboco). This library is a port/fork based on the original r3f-perf.

package/dist/components/Graph.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { PerfUIProps } from '../types';
+import * as THREE from "three";
+export interface graphData {
+    curve: THREE.SplineCurve;
+    maxVal: number;
+    element: string;
+}
+export declare const ChartUI: FC<PerfUIProps>;
+//# sourceMappingURL=Graph.d.ts.map

package/dist/components/Graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Graph.d.ts","sourceRoot":"","sources":["../../src/components/Graph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAmB,MAAM,OAAO,CAAC;AAKjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAkJD,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,WAAW,CAwDnC,CAAC"}

package/dist/components/GraphStats.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export declare function ChartStats({ show, opacity, // Tăng opacity lên 1 để bớt trong suốt
+className, style, }: {
+    show?: boolean;
+    opacity?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=GraphStats.d.ts.map

package/dist/components/GraphStats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphStats.d.ts","sourceRoot":"","sources":["../../src/components/GraphStats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAiCpE,wBAAgB,UAAU,CAAC,EACzB,IAAW,EACX,OAAW,EAAE,uCAAuC;AACpD,SAAS,EACT,KAAK,GACN,EAAE;IACD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,kDAgLA"}

package/dist/components/HtmlMinimal.d.ts

@@ -0,0 +1,10 @@
+import { default as React, ReactNode } from 'react';
+interface HtmlProps {
+    portal?: React.RefObject<HTMLElement>;
+    className?: string;
+    name?: string;
+    children?: ReactNode;
+}
+declare const HtmlMinimal: React.ForwardRefExoticComponent<HtmlProps & React.RefAttributes<HTMLDivElement>>;
+export { HtmlMinimal };
+//# sourceMappingURL=HtmlMinimal.d.ts.map

package/dist/components/HtmlMinimal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlMinimal.d.ts","sourceRoot":"","sources":["../../src/components/HtmlMinimal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAGf,UAAU,SAAS;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,kFAoChB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/PerfHeadless.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { PerfProps } from '../types';
+export declare const matriceWorldCount: {
+    value: number;
+};
+export declare const matriceCount: {
+    value: number;
+};
+/**
+ * Performance profiler component (StrictMode-safe)
+ */
+export declare const PerfHeadless: FC<PerfProps>;
+//# sourceMappingURL=PerfHeadless.d.ts.map

package/dist/components/PerfHeadless.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerfHeadless.d.ts","sourceRoot":"","sources":["../../src/components/PerfHeadless.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAYpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAW1C,eAAO,MAAM,iBAAiB;;CAAe,CAAC;AAC9C,eAAO,MAAM,YAAY;;CAAe,CAAC;AAoCzC;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,SAAS,CA8TtC,CAAC"}

package/dist/components/PerfMonitor.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { PerfPropsGui } from '../types';
+export declare const colorsGraph: {
+    overClock: string;
+    fps: string;
+    cpu: string;
+    gpu: string;
+    memory: string;
+    vram: string;
+};
+export declare const PerformanceMonitor: FC<PerfPropsGui>;
+//# sourceMappingURL=PerfMonitor.d.ts.map

package/dist/components/PerfMonitor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerfMonitor.d.ts","sourceRoot":"","sources":["../../src/components/PerfMonitor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAoB,MAAM,OAAO,CAAC;AAMlD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA2B7C,eAAO,MAAM,WAAW;;;;;;;CAOvB,CAAC;AAyRF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,YAAY,CA4D/C,CAAC"}

package/dist/components/Program.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { PerfProps } from '../types';
+export declare const ProgramsUI: FC<PerfProps>;
+//# sourceMappingURL=Program.d.ts.map

package/dist/components/Program.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Program.d.ts","sourceRoot":"","sources":["../../src/components/Program.tsx"],"names":[],"mappings":"AAmYA,OAAO,EAAE,KAAK,EAAE,EAAuB,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAkZ1C,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,SAAS,CAiBpC,CAAC"}

package/dist/events/react.d.ts

@@ -0,0 +1,8 @@
+import { EventHandler, EventOptions } from './types';
+/**
+ * React hook để đăng ký lắng nghe event (wrapper cho EventEmitter)
+ * - Tự động cleanup khi unmount
+ * - Không bị stale closure
+ */
+export declare function useEvent(eventName: string, handler: EventHandler, deps?: any[], options?: EventOptions): void;
+//# sourceMappingURL=react.d.ts.map

package/dist/events/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/events/react.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE1D;;;;GAIG;AACH,wBAAgB,QAAQ,CACtB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,YAAY,EACrB,IAAI,GAAE,GAAG,EAAO,EAChB,OAAO,CAAC,EAAE,YAAY,GACrB,IAAI,CAuBN"}

package/dist/events/types.d.ts

@@ -0,0 +1,19 @@
+import { default as EventEmitter } from 'eventemitter3';
+/**
+ * Callback cho event
+ */
+export type EventHandler = (...args: any[]) => any;
+/**
+ * EventEmitter context
+ */
+export type EventContext = EventEmitter;
+/**
+ * Tuỳ chọn cho event
+ */
+export interface EventOptions {
+    /** Chỉ lắng nghe 1 lần */
+    once?: boolean;
+    /** EventEmitter cụ thể (mặc định global) */
+    context?: EventContext;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/events/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/events/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,YAAY,MAAM,eAAe,CAAC;AAE9C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC;AAExC;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,4CAA4C;IAC5C,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB"}

package/dist/events/vanilla.d.ts

@@ -0,0 +1,14 @@
+import { EventHandler, EventOptions, EventContext } from './types';
+/**
+ * Đăng ký event
+ */
+export declare function onEvent(eventName: string, handler: EventHandler, options?: EventOptions): EventContext;
+/**
+ * Huỷ đăng ký event
+ */
+export declare function offEvent(eventName: string, handler: EventHandler, options?: EventOptions): void;
+/**
+ * Emit event
+ */
+export declare function emitEvent(eventName: string, payload?: any): void;
+//# sourceMappingURL=vanilla.d.ts.map

package/dist/events/vanilla.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vanilla.d.ts","sourceRoot":"","sources":["../../src/events/vanilla.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAKxE;;GAEG;AACH,wBAAgB,OAAO,CACrB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,YAAY,EACrB,OAAO,CAAC,EAAE,YAAY,GACrB,YAAY,CAId;AAED;;GAEG;AACH,wBAAgB,QAAQ,CACtB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,YAAY,EACrB,OAAO,CAAC,EAAE,YAAY,GACrB,IAAI,CAON;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,GAAG,IAAI,CAEhE"}

package/dist/helpers/countGeoDrawCalls.d.ts

@@ -0,0 +1,3 @@
+import { ProgramsPerfs } from '../store';
+export declare const countGeoDrawCalls: (programs: ProgramsPerfs) => void;
+//# sourceMappingURL=countGeoDrawCalls.d.ts.map

package/dist/helpers/countGeoDrawCalls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"countGeoDrawCalls.d.ts","sourceRoot":"","sources":["../../src/helpers/countGeoDrawCalls.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,aAAa,EAAE,MAAM,UAAU,CAAC;AAE1D,eAAO,MAAM,iBAAiB,GAAI,UAAU,aAAa,SA8ExD,CAAC"}

package/dist/helpers/estimateBytesUsed.d.ts

@@ -0,0 +1,7 @@
+import { BufferGeometry } from 'three';
+/**
+ * @param {Array<BufferGeometry>} geometry
+ * @return {number}
+ */
+export declare function estimateBytesUsed(geometry: BufferGeometry): number;
+//# sourceMappingURL=estimateBytesUsed.d.ts.map

package/dist/helpers/estimateBytesUsed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"estimateBytesUsed.d.ts","sourceRoot":"","sources":["../../src/helpers/estimateBytesUsed.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,CAiBlE"}

package/dist/helpers/estimateMemory.d.ts

@@ -0,0 +1,7 @@
+import * as THREE from "three";
+export declare function estimateMemory(scene: THREE.Object3D): {
+    geometry: number;
+    texture: number;
+    total: number;
+};
+//# sourceMappingURL=estimateMemory.d.ts.map

package/dist/helpers/estimateMemory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"estimateMemory.d.ts","sourceRoot":"","sources":["../../src/helpers/estimateMemory.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ;;;;EAuEnD"}

package/dist/helpers/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare function cx(...classes: (string | undefined | false)[]): string;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/helpers/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/helpers/helpers.ts"],"names":[],"mappings":"AAAA,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,EAAE,UAE5D"}

package/dist/index.cjs

@@ -0,0 +1,2 @@
+(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)}})();
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),j=require("react"),F=require("@react-three/fiber"),be=require("react-dom/client"),he=require("three"),_e=require("zustand/traditional"),Ee=require("zustand/shallow"),Ce=require("eventemitter3");function Me(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const s in r)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(r,s);Object.defineProperty(e,s,i.get?i:{enumerable:!0,get:()=>r[s]})}}return e.default=r,Object.freeze(e)}const E=Me(he),ge=j.forwardRef(({portal:r,className:e,children:s,name:i,...m},o)=>{const a=F.useThree(d=>d.gl),c=j.useRef(null),x=j.useRef(null),n=(r==null?void 0:r.current)!=null?r.current:a.domElement.parentNode;return j.useLayoutEffect(()=>{if(!c.current||!n)return;const d=document.createElement("div"),p=x.current=be.createRoot(d);return n.appendChild(d),()=>{p.unmount(),x.current=null,n.removeChild(d)}},[n]),j.useLayoutEffect(()=>{const d=x.current;d&&d.render(t.jsx("div",{ref:o,className:e,children:s}))}),t.jsx("group",{name:i,...m,ref:c})});ge.displayName="HtmlMinimal";const Y=_e.createWithEqualityFn((r,e)=>{function s(){var v;const{accumulated:i,startTime:m,infos:o,estimatedMemory:a}=e(),c=(v=e().log)==null?void 0:v.maxMemory,{totalFrames:x,log:n,gl:d,max:p}=i,f={calls:d.calls/x,triangles:d.triangles/x,points:d.points/x,lines:d.lines/x},h={gpu:n.gpu/x,cpu:n.cpu/x,mem:n.mem/x,fps:n.fps/x};return{sessionTime:(window.performance.now()-m)/1e3,infos:o,memory:a,log:h,gl:f,max:p,maxMemory:c,totalFrames:x}}return{log:null,paused:!1,triggerProgramsUpdate:0,startTime:0,customData:0,fpsLimit:60,overclockingFps:!1,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:new Map,sceneLength:void 0,tab:"infos",getReport:s}}),M=r=>Y(r,Ee.shallow);Object.assign(M,Y);const{getState:S,setState:C}=Y,T={value:0,fpsLimit:60,isOverLimit:0},O=r=>(r==null?void 0:r.reduce((e,s)=>e+s,0))/r.length;class Ie{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=he.MathUtils.generateUUID(),this.gl&&(this.isWebGL2=!0,this.extension||(this.extension=this.gl.getExtension("EXT_disjoint_timer_query_webgl2")),this.extension===null&&(this.isWebGL2=!1))}is120hz(){let e=0;const s=i=>{++e<20?this.rafId=window.requestAnimationFrame(s):(this.detected=Math.ceil(1e3*e/(i-this.t0)/70),window.cancelAnimationFrame(this.rafId)),this.t0||(this.t0=i)};this.rafId=window.requestAnimationFrame(s)}addUI(e){this.names.indexOf(e)===-1&&(this.names.push(e),this.gpuAccums.push(0),this.activeAccums.push(!1))}nextFps(e){const s=16.666666666666668,i=s-e.timeRemaining(),m=s*T.fpsLimit/10/i;m<0||(T.value=m,T.isOverLimit<25?T.isOverLimit++:C({overclockingFps:!0}))}nextFrame(e){this.frameId++;const s=e||this.now(),i=s-this.paramTime;let m=0;if(this.frameId<=1)this.paramFrame=this.frameId,this.paramTime=s;else if(s>=this.paramTime){this.maxMemory=window.performance.memory?window.performance.memory.jsHeapSizeLimit/1048576:0;const o=this.frameId-this.paramFrame,a=o*1e3/i,c=S().overclockingFps?T.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 x=performance.measure("cpu-duration","cpu-started","cpu-finished");this.currentCpu=(x==null?void 0:x.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"&&(T.isOverLimit>0&&c>a?T.isOverLimit--:S().overclockingFps&&C({overclockingFps:!1})),s>=this.paramTime+1e3/this.logsPerSecond&&(this.paramLogger({cpu:O(this.logsAccums.cpu),gpu:O(this.logsAccums.gpu),mem:O(this.logsAccums.mem),fps:O(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=s),this.overClock&&s-this.lastCalculateFixed>=2*1e3&&(this.lastCalculateFixed=e,T.fpsLimit=Math.round(O(this.logsAccums.fpsFixed)/10)*100,C({fpsLimit:T.fpsLimit/10}),this.logsAccums.fpsFixed=[],this.paramFrame=this.frameId,this.paramTime=s)}if(!this.detected||!this.chartFrame)this.chartFrame=this.frameId,this.chartTime=s,this.circularId=0;else{const o=s-this.chartTime;let a=this.chartHz*o/1e3;for(;--a>0&&this.detected;){const x=(this.frameId-this.chartFrame)/o*1e3,n=S().overclockingFps?T.value:x;this.fpsChart[this.circularId%this.chartLen]=n;const d=1e3/this.currentMem,p=this.currentCpu,f=(this.isWebGL2?this.gpuAccums[1]*2:Math.round(this.gpuAccums[1]/i*100))+4;f>0&&(this.gpuChart[this.circularId%this.chartLen]=f),p>0&&(this.cpuChart[this.circularId%this.chartLen]=p),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=s}}}startGpu(){const e=this.gl,s=this.extension;if(!(!e||!s)&&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(s.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((x,n)=>{this.gpuAccums[n]=c}))}}(i||!this.query)&&(this.queryCreated=!0,this.query=e.createQuery(),e.beginQuery(s.TIME_ELAPSED_EXT,this.query))}}endGpu(){const e=this.extension,s=this.gl;this.isWebGL2&&this.queryCreated&&s.getQuery(e.TIME_ELAPSED_EXT,s.CURRENT_QUERY)&&s.endQuery(e.TIME_ELAPSED_EXT)}begin(e){this.startGpu(),this.updateAccums(e)}end(e){this.endGpu(),this.updateAccums(e)}updateAccums(e){let s=this.names.indexOf(e);s===-1&&(s=this.names.length,this.addUI(e));const i=this.now();this.activeAccums[s]=!this.activeAccums[s],this.t0=i}dispose(){const e=this.gl,s=this.extension;try{this.isWebGL2&&e&&s&&e.getQuery(s.TIME_ELAPSED_EXT,e.CURRENT_QUERY)&&e.endQuery(s.TIME_ELAPSED_EXT)}catch{}if(e&&this.query){try{e.deleteQuery(this.query)}catch{}this.query=null}this.queryCreated=!1,this.queryHasResult=!1}}const Le=r=>{r.forEach(e=>{const{meshes:s}=e;if(!s)return;const i={total:0,type:"Triangle",data:[]};Object.keys(s).forEach(m=>{const o=s[m],{geometry:a,material:c}=o,x=a.index,n=a.attributes.position;if(!n)return;let d=1;c.wireframe===!0&&(d=0);const p=x!==null?x.count:n.count,f=a.drawRange.start*d,h=a.drawRange.count*d,u=f,v=Math.min(p,f+h)-1;let g=1;const w=o.count||1;let y="Triangle",b=0;o.isMesh?c.wireframe===!0?(y="Line",g=g/2):(y="Triangle",g=g/3):o.isLine?(y="Line",o.isLineSegments?g=g/2:o.isLineLoop?g=g:g=g-1):o.isPoints?(y="Point",g=g):o.isSprite&&(y="Triangle",g=g/3);const _=Math.round(Math.max(0,v-u+1)*(g*w));_>b&&(b=_,i.type=y),i.total+=_,i.data.push({drawCount:_,type:y}),o.userData.drawCount={type:y,count:_}}),e.drawCounts=i})},K=new Ce;function Te(r,e,s){return K.on(r,e)}function Re(r,e,s){K.removeListener(r,e,(s==null?void 0:s.context)??null,s==null?void 0:s.once)}function Se(r,e){K.emit(r,e)}function Ae(r){let e=0,s=0;const i=new Set,m=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 n=a.geometry.attributes;for(const d in n){const p=n[d];p.array&&(s+=p.array.byteLength)}a.geometry.index&&a.geometry.index.array&&(s+=a.geometry.index.array.byteLength)}const c=a.material;(Array.isArray(c)?c:[c]).forEach(n=>{if(n)for(const d in n){const p=n[d];if(p&&p.isTexture){const f=p;if(!m.has(f.uuid)){if(m.add(f.uuid),f.isCompressedTexture&&f.mipmaps)f.mipmaps.forEach(h=>{h.data&&(e+=h.data.byteLength)});else if(f.image){const h=f.image,u=h.width||0,v=h.height||0,g=f.generateMipmaps?1.33:1;e+=u*v*4*g}}}}})}}),{geometry:s,texture:e,total:s+e}}const re=E.Object3D.prototype.updateMatrixWorld,ne=E.Object3D.prototype.updateWorldMatrix,ie=E.Object3D.prototype.updateMatrix,ae=["calls","triangles","points","lines"],oe=["gpu","cpu","mem","fps"],Ne=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),ce=(r,e)=>{r.defines||(r.defines={}),r.defines.muiPerf||(r.defines=Object.assign(r.defines||{},{muiPerf:r.uuid}),r.needsUpdate=!0);const s=r.uuid;return e[s]||(e[s]={meshes:{},material:r}),r.needsUpdate=!1,s},Fe=r=>r==="muiPerf",Pe=({overClock:r,logsPerSecond:e,chart:s,deepAnalyze:i,matrixUpdate:m})=>{const{gl:o,scene:a}=F.useThree();C({gl:o,scene:a});const c=1e3;let x=0;const n=j.useMemo(()=>{const d=new Ie({trackGPU:!0,overClock:r,chartLen:s?s.length:120,chartHz:s?s.hz:60,logsPerSecond:e||10,gl:o.getContext(),chartLogger:g=>{C({chart:g})},paramLogger:g=>{var I;const w={maxMemory:g.maxMemory,gpu:g.gpu,cpu:g.cpu,mem:g.mem,fps:g.fps,totalTime:g.duration,frameCount:g.frameCount};C({log:w});const{accumulated:y}=S(),b=o.info.render;y.totalFrames++,y.gl.calls+=b.calls,y.gl.triangles+=b.triangles,y.gl.points+=b.points,y.gl.lines+=b.lines,y.log.gpu+=g.gpu,y.log.cpu+=g.cpu,y.log.mem+=g.mem,y.log.fps+=g.fps;for(let A=0;A<ae.length;A++){const L=ae[A],N=b[L];N>y.max.gl[L]&&(y.max.gl[L]=N)}for(let A=0;A<oe.length;A++){const L=oe[A],N=g[L];N>y.max.log[L]&&(y.max.log[L]=N)}C({accumulated:y});const _={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:((I=o.info.programs)==null?void 0:I.length)||0};Se("log",[w,_])}}),p=o.getContext();let f=null,h=null;const u=p.getExtension("WEBGL_debug_renderer_info"),v=p.getParameter(p.VERSION);return u&&(f=p.getParameter(u.UNMASKED_RENDERER_WEBGL),h=p.getParameter(u.UNMASKED_VENDOR_WEBGL)),h||(h="Unknown vendor"),f||(f=p.getParameter(p.RENDERER)),C({startTime:window.performance.now(),infos:{version:v,renderer:f,vendor:h}}),d},[r,s,e,o]);return j.useEffect(()=>{n&&(n.overClock=r||!1,r===!1&&(C({overclockingFps:!1}),T.value=0,T.isOverLimit=0),n.chartHz=(s==null?void 0:s.hz)||60,n.chartLen=(s==null?void 0:s.length)||120)},[n,r,s==null?void 0:s.hz,s==null?void 0:s.length]),j.useEffect(()=>{if(!o.info)return;o.info.autoReset=!1,m&&(E.Object3D.prototype.updateMatrixWorld=function(...f){return this.matrixWorldNeedsUpdate||f[0],re.apply(this,f)},E.Object3D.prototype.updateWorldMatrix=function(...f){return ne.apply(this,f)},E.Object3D.prototype.updateMatrix=function(...f){return ie.apply(this,f)});const d=F.addEffect(()=>{S().paused&&C({paused:!1}),n==null||n.begin("profiler"),window.performance&&(window.performance.mark("cpu-started"),n.startCpuProfiling=!0),o.info.reset()}),p=F.addAfterEffect(()=>{var v,g;n==null||n.end("profiler"),n&&!n.paused&&(n.nextFrame(window.performance.now()),r&&typeof window.requestIdleCallback<"u"&&(n.idleCbId=requestIdleCallback(n.nextFps)));const f=window.performance.now();if(f-x>c){x=f;const w=Ae(a),y=n.currentMem||0;C({estimatedMemory:{vram:w.total/1024/1024,tex:w.texture/1024/1024,geo:w.geometry/1024/1024,ram:y}})}if(!i)return;const h={},u=new Map;a.traverse(w=>{if(w instanceof E.Mesh||w instanceof E.Points){if(!w.material)return;let y=w.material.uuid;const b=Array.isArray(w.material)&&w.material.length>1;y=ce(b?w.material[1]:w.material,h),h[y].meshes[w.uuid]=w}}),(g=(v=o==null?void 0:o.info)==null?void 0:v.programs)==null||g.forEach(w=>{const y=w.cacheKey.split(","),b=y[y.findIndex(Fe)+1];if(Ne(b)&&h[b]){const{material:_,meshes:I}=h[b];u.set(b,{program:w,material:_,meshes:I,drawCounts:{total:0,type:"triangle",data:[]},expand:!1,visible:!0})}}),u.size!==S().programs.size&&(Le(u),C({programs:u,triggerProgramsUpdate:S().triggerProgramsUpdate+1}))});return()=>{var f;n&&typeof window.cancelIdleCallback<"u"&&window.cancelIdleCallback(n.idleCbId),(f=n==null?void 0:n.dispose)==null||f.call(n),m&&(E.Object3D.prototype.updateMatrixWorld=re,E.Object3D.prototype.updateWorldMatrix=ne,E.Object3D.prototype.updateMatrix=ie),d(),p()}},[n,o,a,i,r,m]),j.useEffect(()=>{const d=F.addTail(()=>(n&&(n.paused=!0,C({paused:!0,log:{maxMemory:0,gpu:0,mem:0,cpu:0,fps:0,totalTime:0,frameCount:0}})),!1));return()=>d()},[n]),null};function J(r,e,s=[],i){const m=j.useRef(e);j.useEffect(()=>{m.current=e},[e]),j.useEffect(()=>{const o=c=>{var x;return(x=m.current)==null?void 0:x.call(m,c)},a=Te(r,o);return()=>Re(r,o,{...i,context:a})},[r,i==null?void 0:i.once,...s])}function Ue(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 s=r.getIndex();return e+=s?s.count*s.itemSize*s.array.BYTES_PER_ELEMENT:0,e}const Ge="_perfS_ans5i_1",De="_containerHeight_ans5i_16",Be="_topLeft_ans5i_21",Oe="_topRight_ans5i_22",We="_bottomLeft_ans5i_23",qe="_bottomRight_ans5i_24",ke="_minimal_ans5i_26",He="_perfIContainer_ans5i_30",ze="_perfI_ans5i_30",Ve="_perfB_ans5i_69",$e="_toggleContainer_ans5i_83",Qe="_toggle_ans5i_83",Xe="_activeTab_ans5i_105",Ye="_containerScroll_ans5i_110",Ke="_programGeo_ans5i_115",Je="_programHeader_ans5i_120",Ze="_headerLeft_ans5i_149",et="_programTitle_ans5i_156",tt="_toggleArrow_ans5i_166",st="_programConsole_ans5i_200",rt="_programsContainer_ans5i_218",nt="_headerRight_ans5i_222",it="_metricBadge_ans5i_228",at="_programsULHeader_ans5i_246",ot="_programsUL_ans5i_246",ct="_programsGeoLi_ans5i_309",lt="_graph_ans5i_324",ut="_visibilityBtn_ans5i_354",mt="_active_ans5i_105",l={perfS:Ge,containerHeight:De,topLeft:Be,topRight:Oe,bottomLeft:We,bottomRight:qe,minimal:ke,perfIContainer:He,perfI:ze,perfB:Ve,toggleContainer:$e,toggle:Qe,activeTab:Xe,containerScroll:Ye,programGeo:Ke,programHeader:Je,headerLeft:Ze,programTitle:et,toggleArrow:tt,programConsole:st,programsContainer:rt,headerRight:nt,metricBadge:it,programsULHeader:at,programsUL:ot,programsGeoLi:ct,graph:lt,visibilityBtn:ut,active:mt},le=(r,e)=>{var m,o;const s=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:s(e.wrapT),flipY:(o=e.flipY)==null?void 0:o.toString()}},X=({value:r,label:e,unit:s,title:i})=>r==null||r===0||r==="0"?null:t.jsxs("div",{className:l.metricBadge,title:i,children:[t.jsx("b",{children:r})," ",s||e]}),dt=({program:r,material:e,setTexNumber:s})=>{const i=M(a=>a.gl),[m,o]=j.useState(null);return j.useEffect(()=>{if(i){const a=r==null?void 0:r.getUniforms();let c=0;const x=new Map;a&&a.seq&&a.seq.forEach(n=>{if(!n.id.includes("uTroika")&&!["isOrthographic","uvTransform","lightProbe","projectionMatrix","viewMatrix","normalMatrix","modelMatrix","modelViewMatrix"].includes(n.id)){const d=[],p={name:n.id};n.cache&&(n.cache.forEach(f=>{typeof f<"u"&&d.push(f.toString().substring(0,4))}),p.value=d.join(),e[n.id]&&e[n.id].image&&(c++,p.value=le(n.id,e[n.id])),p.value||(p.value="empty"),x.set(n.id,p))}}),e.uniforms&&Object.keys(e.uniforms).forEach(n=>{const d=e.uniforms[n];if(d.value){const{value:p}=d,f={name:n};if(n.includes("uTroika"))return;if(p.isTexture)c++,f.value=le(n,p);else{let h=JSON.stringify(p);try{h=JSON.stringify(p)}catch{h=p.toString()}f.value=h}x.set(n,f)}}),s(c),o(x)}},[i,e,r,s]),t.jsx("ul",{className:l.programsUL,children:m&&Array.from(m.values()).map(a=>t.jsx("span",{children:typeof a.value=="string"?t.jsx("li",{children:t.jsxs("span",{children:[a.name," :"," ",t.jsxs("b",{children:[a.value.substring(0,30),a.value.length>30?"...":""]})]})}):t.jsxs(t.Fragment,{children:[t.jsx("li",{children:t.jsxs("b",{children:[a.value.name,":"]})}),t.jsxs("div",{children:[Object.keys(a.value).map(c=>c!=="name"?t.jsx("div",{children:c==="url"?t.jsx("a",{href:a.value[c],target:"_blank",rel:"noreferrer",children:t.jsx("img",{src:a.value[c],alt:"texture"})}):t.jsxs("li",{children:[c,": ",t.jsx("b",{children:a.value[c]})]})},c):null),t.jsxs("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))})},ft=({el:r})=>{const[e,s]=j.useState(r.visible),[i,m]=j.useState(r.expand),[o,a]=j.useState(0),{meshes:c,program:x,material:n}=r,d=M(u=>u.gl),p=()=>{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 v=Math.round(r.drawCounts.total/u*100*10)/10;return isFinite(v)&&v||0},f=Object.keys(c).length,h=p();return t.jsxs("div",{className:l.programGeo,children:[t.jsxs("div",{className:l.programHeader,onClick:()=>{Object.keys(c).forEach(u=>{c[u].material.wireframe=!1}),m(!i)},children:[t.jsxs("div",{className:l.headerLeft,children:[t.jsx("div",{className:l.toggleArrow,style:{transform:i?"rotate(90deg)":"rotate(0deg)"},children:"▶"}),x&&t.jsx("span",{className:l.programTitle,children:x.name})]}),t.jsxs("div",{className:l.headerRight,children:[t.jsx(X,{value:f,unit:f>1?"users":"user"}),t.jsx(X,{value:o,unit:"tex"}),r.drawCounts.total>0&&t.jsxs("div",{className:l.metricBadge,title:`${h}% of total render`,children:[t.jsx("b",{children:r.drawCounts.total}),r.drawCounts.type==="Triangle"?"tris":r.drawCounts.type,r.visible&&!r.material.wireframe&&t.jsxs("span",{style:{marginLeft:"4px",opacity:.6,fontSize:"9px"},children:["(",h,"%)"]})]}),n.glslVersion==="300 es"&&t.jsx(X,{value:"300",unit:"es"}),t.jsx("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 v=!e;Object.keys(c).forEach(g=>{c[g]&&(c[g].visible=v)}),s(v)},children:e?"👁":"×"})]})]}),t.jsxs("div",{style:{display:i?"block":"none"},children:[t.jsx("div",{className:l.programsULHeader,style:{marginTop:"4px"},children:"Uniforms"}),t.jsx(dt,{program:x,material:n,setTexNumber:a}),t.jsx("div",{className:l.programsULHeader,children:"Geometries"}),t.jsx("ul",{className:l.programsUL,children:c&&Object.keys(c).map(u=>c[u]&&c[u].geometry&&t.jsx("li",{className:l.programsGeoLi,children:t.jsxs("div",{style:{width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center"},children:[t.jsx("span",{children:c[u].geometry.type}),c[u].userData&&c[u].userData.drawCount&&t.jsxs("span",{style:{color:"#aaa",fontSize:"10px",display:"flex",gap:"6px"},children:[t.jsxs("span",{children:[t.jsx("b",{children:c[u].userData.drawCount.count})," ",c[u].userData.drawCount.type,"s"]}),t.jsx("span",{style:{opacity:.3},children:"|"}),t.jsxs("span",{children:[t.jsx("b",{children:Math.round(Ue(c[u].geometry)/1024*100)/100})," ","KB"]})]})]})},u))}),t.jsxs("button",{className:l.programConsole,onClick:()=>console.info(n),children:["Log Material (",n.type,")"]})]})]})},pt=()=>{M(e=>e.triggerProgramsUpdate);const r=M(e=>e.programs);return t.jsx("div",{className:l.programsContainer,onWheel:e=>e.stopPropagation(),children:r&&Array.from(r.values()).map(e=>e?t.jsx(ft,{el:e},e.material.uuid):null)})},ht=({minimal:r,chart:e={length:120,hz:60}})=>{const s=j.useMemo(()=>({fps:new Float32Array(e.length*3),cpu:new Float32Array(e.length*3),gpu:new Float32Array(e.length*3)}),[e]),i=j.useRef(null),m=j.useRef(null),o=j.useRef(null),a=j.useRef(null),c=j.useMemo(()=>new E.Vector3(0,0,0),[]),x=(n,d=1,p,f)=>{let h=0;const{width:u,height:v}=f,g=S().chart.data[n];if(!g||g.length===0)return;const w=r?2:6,y=r?12:50,b=g.length;for(let _=0;_<b;_++){const I=(S().chart.circularId+_+1)%b;g[I]!==void 0&&(g[I]>h&&(h=g[I]*d),c.set(w+_/(b-1)*(u-w*2)-u/2,Math.min(100,g[I])*d/100*(v-w*2-y)-v/2,0),c.toArray(p.attributes.position.array,_*3))}p.attributes.position.needsUpdate=!0};return F.useFrame(function({viewport:d}){x("fps",1,i.current,d),m.current&&m.current.color.set(S().overclockingFps?R.overClock:R.fps),x("gpu",5,o.current,d),x("cpu",5,a.current,d)}),t.jsxs(t.Fragment,{children:[t.jsxs("line",{onUpdate:n=>{n.updateMatrix(),n.matrixWorld.copy(n.matrix)},children:[t.jsx("bufferGeometry",{ref:i,children:t.jsx("bufferAttribute",{attach:"attributes-position",count:e.length,args:[s.fps,3],array:s.fps,itemSize:3,usage:E.DynamicDrawUsage,needsUpdate:!0})}),t.jsx("lineBasicMaterial",{ref:m,color:R.fps,transparent:!0,opacity:.5})]}),t.jsxs("line",{onUpdate:n=>{n.updateMatrix(),n.matrixWorld.copy(n.matrix)},children:[t.jsx("bufferGeometry",{ref:o,children:t.jsx("bufferAttribute",{attach:"attributes-position",count:e.length,array:s.gpu,args:[s.gpu,3],itemSize:3,usage:E.DynamicDrawUsage,needsUpdate:!0})}),t.jsx("lineBasicMaterial",{color:R.gpu,transparent:!0,opacity:.5})]}),t.jsxs("line",{onUpdate:n=>{n.updateMatrix(),n.matrixWorld.copy(n.matrix)},children:[t.jsx("bufferGeometry",{ref:a,children:t.jsx("bufferAttribute",{attach:"attributes-position",count:e.length,array:s.cpu,args:[s.cpu,3],itemSize:3,usage:E.DynamicDrawUsage,needsUpdate:!0})}),t.jsx("lineBasicMaterial",{color:R.cpu,transparent:!0,opacity:.5})]})]})},gt=({chart:r,showGraph:e=!0,antialias:s=!0,minimal:i})=>{const m=j.useRef(void 0),o=M(a=>a.paused);return t.jsx("div",{className:l.graph,style:{display:"flex",marginTop:6,position:"absolute",width:"100%",height:`${i?37:e?100:60}px`},children:t.jsx(F.Canvas,{ref:m,orthographic:!0,camera:{rotation:[0,0,0]},dpr:s?[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:t.jsxs(t.Fragment,{children:[t.jsx(xt,{}),e&&t.jsx(ht,{minimal:i,chart:r})]})})})},xt=()=>(F.useFrame(function({gl:e,scene:s,camera:i}){i.updateMatrix(),i.matrixWorld.copy(i.matrix),i.matrixWorldInverse.copy(i.matrixWorld).invert(),e.render(s,i)},1/0),null),ue={fps:{fg:"#00ffff",bg:"#000022"},cpu:{fg:"#00ff00",bg:"#002200"},gpu:{fg:"#ff0080",bg:"#220011"}},G=[{key:"fps",label:"FPS",maxVal:120},{key:"cpu",label:"CPU",maxVal:40},{key:"gpu",label:"GPU",maxVal:40}],D=48,xe=15,z=2,q=xe,W=D-q-2,V=6,yt=15,me=1e3/yt;function jt({show:r=!0,opacity:e=1,className:s,style:i}){const m=M(h=>h.paused),o=j.useRef(null),a=j.useRef(null),[c,x]=j.useState(300),n=j.useMemo(()=>Math.max(1,Math.round(window.devicePixelRatio||1)),[]);j.useEffect(()=>{if(!a.current)return;const h=new ResizeObserver(u=>{for(const v of u)x(v.contentRect.width)});return h.observe(a.current),()=>h.disconnect()},[]);const d=(G.length-1)*V,p=Math.max(0,(c-d)/G.length),f=Math.max(0,p-z);return j.useEffect(()=>{const h=o.current;if(!h)return;h.width=c*n,h.height=D*n,h.style.width="100%",h.style.height=`${D}px`;const u=h.getContext("2d");if(u){u.setTransform(1,0,0,1,0,0),u.scale(n,n),u.imageSmoothingEnabled=!1,u.font="bold 9px Roboto Mono, monospace",u.textBaseline="top",u.clearRect(0,0,c,D);for(let v=0;v<G.length;v++){const{key:g}=G[v],w=v*(p+V),{bg:y}=ue[g];u.fillStyle=y,u.globalAlpha=e,u.fillRect(w,0,p,D),u.globalAlpha=1}}},[n,c,p,e]),j.useEffect(()=>{if(!r)return;const h=o.current;if(!h)return;const u=h.getContext("2d");if(!u)return;let v=0,g=0;const w={fps:{min:1/0,max:0},cpu:{min:1/0,max:0},gpu:{min:1/0,max:0}};function y(b){if(!h||!u||(v=requestAnimationFrame(y),m))return;const _=b-g;if(_<me)return;g=b-_%me;const I=S(),A=I.chart.circularId;for(let L=0;L<G.length;L++){const{key:N,label:ye,maxVal:Z}=G[L],B=L*(p+V),{fg:ee,bg:te}=ue[N],k=I.chart.data[N],$=(k==null?void 0:k.length)||0;let H=0;if($>0){const we=(A-1+$)%$;H=k[we]??0}const U=w[N];U.min=Math.min(U.min,H),U.max=Math.max(U.max,H),u.fillStyle=te,u.globalAlpha=1,u.fillRect(B,0,p,xe),u.fillStyle=ee;const je=`${ye} (${Math.round(U.min)}-${Math.round(U.max)})`;u.fillText(je,B+3,2),f>1&&u.drawImage(h,(B+z+1)*n,q*n,(f-1)*n,W*n,B+z,q,f-1,W);const se=B+z+f-1;u.fillStyle=te,u.globalAlpha=1,u.fillRect(se,q,1,W),u.fillStyle=ee,u.globalAlpha=1;const ve=Math.min(H,Z)/Z,Q=Math.round(ve*W);Q>0&&u.fillRect(se,q+W-Q,1,Q)}}return v=requestAnimationFrame(y),()=>cancelAnimationFrame(v)},[m,r,n,p,f]),r?t.jsx("div",{ref:a,className:s,style:{width:"100%",...i,marginTop:V},children:t.jsx("canvas",{ref:o,style:{display:"block",pointerEvents:"none",width:"100%",height:`${D}px`}})}):null}const R={overClock:"#ff6eff",fps:"#00FFFF",cpu:"#00FF00",gpu:"#FD007F",memory:"#FFD000",vram:"#FF8C00"},de=({metric:r,decimal:e=0,suffix:s=""})=>{const i=j.useRef(null);return J("log",m=>{const[o]=m;if(o&&i.current){const a=o[r];i.current.innerText=(typeof a=="number"?a.toFixed(e):"0")+s}}),t.jsxs("span",{ref:i,children:["0",s]})},P=({metric:r,suffix:e=""})=>{const s=j.useRef(null);return J("log",i=>{const[,m]=i;if(m&&s.current){let o=m[r];r==="calls"&&o===1&&(o="--"),s.current.innerText=o+e}}),t.jsxs("span",{ref:s,children:["0",e]})},fe=({type:r})=>{const e=M(s=>s.estimatedMemory[r]);return t.jsxs("span",{children:[e.toFixed(0)," MB"]})},vt=()=>{const r=M(m=>m.overclockingFps),e=M(m=>m.fpsLimit),s=j.useRef(null);J("log",m=>{const[o]=m;o&&s.current&&(s.current.innerText=Math.round(o.fps).toString())});const i=r?R.overClock:R.fps;return t.jsxs("div",{className:l.perfI,children:[t.jsxs("span",{className:l.perfB,style:{color:i},children:["FPS ",r?` ${e}🚀`:""]}),t.jsx("small",{className:l.perfSmallI,ref:s,children:"0"})]})},wt=({showGraph:r,minimal:e})=>M(i=>i.gl)?t.jsxs("div",{className:l.perfIContainer,children:[t.jsx(vt,{showGraph:r}),t.jsxs("div",{className:l.perfI,children:[t.jsx("span",{className:l.perfB,style:{color:R.cpu},children:"CPU"}),t.jsx("small",{className:l.perfSmallI,children:t.jsx(de,{metric:"cpu",decimal:2,suffix:" ms"})})]}),t.jsxs("div",{className:l.perfI,children:[t.jsx("span",{className:l.perfB,style:{color:R.gpu},children:"GPU"}),t.jsx("small",{className:l.perfSmallI,children:t.jsx(de,{metric:"gpu",decimal:2,suffix:" ms"})})]}),t.jsxs("div",{className:l.perfI,children:[t.jsx("span",{className:l.perfB,style:{color:R.memory},children:"MEMORY"}),t.jsx("small",{className:l.perfSmallI,children:t.jsx(fe,{type:"ram"})})]}),t.jsxs("div",{className:l.perfI,children:[t.jsx("span",{className:l.perfB,style:{color:R.vram},children:"VRAM"}),t.jsx("small",{className:l.perfSmallI,children:t.jsx(fe,{type:"vram"})})]}),!e&&t.jsxs("div",{className:l.perfI,children:[t.jsx("span",{className:l.perfB,children:"Calls"}),t.jsx("small",{className:l.perfSmallI,children:t.jsx(P,{metric:"calls"})})]})]}):null,bt=({matrixUpdate:r})=>t.jsxs("div",{className:l.perfIContainer,children:[t.jsxs("div",{className:l.perfI,children:[t.jsx("span",{className:l.perfB,children:"Geometries"}),t.jsx("small",{className:l.perfSmallI,children:t.jsx(P,{metric:"geometries"})})]}),t.jsxs("div",{className:l.perfI,children:[t.jsx("span",{className:l.perfB,children:"Textures"}),t.jsx("small",{className:l.perfSmallI,children:t.jsx(P,{metric:"textures"})})]}),t.jsxs("div",{className:l.perfI,children:[t.jsx("span",{className:l.perfB,children:"Shaders"}),t.jsx("small",{className:l.perfSmallI,children:t.jsx(P,{metric:"programs"})})]}),t.jsxs("div",{className:l.perfI,children:[t.jsx("span",{className:l.perfB,children:"Triangles"}),t.jsx("small",{className:l.perfSmallI,children:t.jsx(P,{metric:"triangles"})})]}),t.jsxs("div",{className:l.perfI,children:[t.jsx("span",{className:l.perfB,children:"Lines"}),t.jsx("small",{className:l.perfSmallI,children:t.jsx(P,{metric:"lines"})})]}),t.jsxs("div",{className:l.perfI,children:[t.jsx("span",{className:l.perfB,children:"Points"}),t.jsx("small",{className:l.perfSmallI,children:t.jsx(P,{metric:"points"})})]}),r&&t.jsxs("div",{className:l.perfI,children:[t.jsx("span",{className:l.perfB,children:"Matrices"}),t.jsx("small",{className:l.perfSmallI,children:r})]})]}),pe=({tab:r,title:e,set:s})=>{const i=M(m=>m.tab);return t.jsx("div",{className:`${l.toggle} ${i===r?l.activeTab:""}`,onClick:()=>{s(!0),C({tab:r})},children:e})},_t=({openByDefault:r,showGraph:e,deepAnalyze:s,matrixUpdate:i,graphType:m,perfContainerRef:o,antialias:a,chart:c,minimal:x})=>{const[n,d]=j.useState(r||!1),p=M(f=>f.tab);return t.jsxs(t.Fragment,{children:[t.jsxs("div",{style:{display:n?"block":"none",marginTop:"4px"},children:[t.jsx(bt,{matrixUpdate:i}),e&&(m==="bar"?t.jsx(jt,{}):t.jsx(gt,{perfContainerRef:o,chart:c,showGraph:e,antialias:a,minimal:x,matrixUpdate:i})),n&&t.jsx("div",{className:l.containerScroll,children:p==="programs"&&t.jsx(pt,{})})]}),r&&!s?null:t.jsxs("div",{className:l.toggleContainer,style:n&&e&&m==="line"?{marginTop:50}:{marginTop:6},children:[s&&t.jsx(pe,{tab:"programs",title:"Programs",set:d}),s&&t.jsx(pe,{tab:"infos",title:"Infos",set:d}),t.jsx("div",{className:l.toggle,onClick:()=>d(!n),children:n?"Minimize":"More"})]})]})},Et=({showGraph:r=!0,openByDefault:e=!0,className:s,overClock:i=!1,graphType:m="bar",style:o,position:a="top-right",chart:c,logsPerSecond:x,deepAnalyze:n=!1,antialias:d=!0,matrixUpdate:p,minimal:f})=>{const h=j.useRef(null),u=a==="top-left"?l.topLeft:a==="bottom-left"?l.bottomLeft:a==="bottom-right"?l.bottomRight:l.topRight,v=r&&m==="line"&&!n;return t.jsxs(t.Fragment,{children:[t.jsx(Pe,{logsPerSecond:x,chart:c,overClock:i,deepAnalyze:n,matrixUpdate:p}),t.jsx(ge,{name:"r3f-perf",children:t.jsxs("div",{className:`${l.perfS} ${u} ${f?l.minimal:""} ${s||""} ${v?l.containerHeight:""}`,style:o,ref:h,children:[t.jsx(wt,{showGraph:r,minimal:f}),!f&&t.jsx(_t,{showGraph:r,deepAnalyze:n,matrixUpdate:p,openByDefault:e,graphType:m,perfContainerRef:h,antialias:d,chart:c,minimal:f})]})})]})};exports.PerformanceMonitor=Et;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { PerformanceMonitor } from './components/PerfMonitor';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC"}