@nice2dev/game-engine 1.0.4 → 1.0.10

package/dist/cjs/editor/ProfilerPanel.js

@@ -0,0 +1,716 @@
+'use strict';
+
+/**
+ * @file ProfilerPanel.ts
+ * @description Advanced Profiler Panel System for Editor
+ * PRO-1.4: Professional Editor Features
+ *
+ * Features:
+ * - CPU profiling with hierarchical flame graph
+ * - GPU timing (WebGL/WebGPU)
+ * - Memory tracking (JS heap, textures, buffers)
+ * - Frame timeline visualization
+ * - System breakdown
+ * - Custom markers/regions
+ * - Export/import profiler data
+ * - Real-time graphs
+ */
+// ============================================================
+// Marker Colors
+// ============================================================
+const CATEGORY_COLORS = {
+    scripts: '#4FC3F7', // Light Blue
+    physics: '#AED581', // Light Green
+    rendering: '#FFB74D', // Orange
+    animation: '#BA68C8', // Purple
+    audio: '#F06292', // Pink
+    ai: '#4DB6AC', // Teal
+    networking: '#7986CB', // Indigo
+    loading: '#FFD54F', // Amber
+    gc: '#E57373', // Red
+    vsync: '#90A4AE', // Blue Grey
+    other: '#78909C', // Grey
+};
+const DEFAULT_PROFILER_CONFIG = {
+    enabled: true,
+    deepProfiling: false,
+    gpuProfiling: true,
+    memoryProfiling: true,
+    maxFrames: 300,
+    sampleInterval: 0,
+    recordAllocations: false,
+    categorize: true,
+    autoCapture: false,
+    captureThreshold: 33.33, // 30 FPS
+};
+// ============================================================
+// Profiler Panel System
+// ============================================================
+class ProfilerPanel {
+    constructor(config) {
+        this.config = { ...DEFAULT_PROFILER_CONFIG };
+        this.frames = [];
+        this.currentFrame = null;
+        this.markerStack = [];
+        this.pendingGPUQueries = [];
+        // Tracking
+        this.frameNumber = 0;
+        this.lastFrameTimestamp = 0;
+        this.isRecording = false;
+        this.capturedFrames = [];
+        // Memory tracking
+        this.lastMemory = null;
+        this.allocationCounter = 0;
+        this.deallocationCounter = 0;
+        this.gcCounter = 0;
+        // GPU Tracking (WebGL/WebGPU)
+        this.gl = null;
+        // EXT_disjoint_timer_query_webgl2 / EXT_disjoint_timer_query extension; shape varies between vendors
+        this.gpuTimerExtension = null;
+        this.activeGPUQueries = new Map();
+        // Rendering stats (set externally)
+        this.renderStats = {
+            drawCalls: 0,
+            triangles: 0,
+            vertices: 0,
+            setPassCalls: 0,
+            batchCount: 0,
+            shadowCasters: 0,
+            visibleObjects: 0,
+        };
+        if (config) {
+            this.config = { ...this.config, ...config };
+        }
+    }
+    // ─── Configuration ─────────────────────────────────────
+    setConfig(config) {
+        this.config = { ...this.config, ...config };
+    }
+    getConfig() {
+        return { ...this.config };
+    }
+    enable() {
+        this.config.enabled = true;
+    }
+    disable() {
+        this.config.enabled = false;
+    }
+    isEnabled() {
+        return this.config.enabled;
+    }
+    // ─── GPU Timer Setup ───────────────────────────────────
+    initializeGPU(gl) {
+        this.gl = gl;
+        // Try to get EXT_disjoint_timer_query extension
+        if (gl instanceof WebGL2RenderingContext) {
+            this.gpuTimerExtension = gl.getExtension('EXT_disjoint_timer_query_webgl2');
+        }
+        else {
+            this.gpuTimerExtension = gl.getExtension('EXT_disjoint_timer_query');
+        }
+        if (!this.gpuTimerExtension) {
+            console.warn('GPU timer queries not available');
+        }
+    }
+    // ─── Frame Lifecycle ───────────────────────────────────
+    beginFrame() {
+        if (!this.config.enabled) {
+            return;
+        }
+        const now = performance.now();
+        const deltaTime = this.lastFrameTimestamp > 0 ? now - this.lastFrameTimestamp : 16.67;
+        this.lastFrameTimestamp = now;
+        this.currentFrame = {
+            frameNumber: this.frameNumber++,
+            timestamp: now,
+            deltaTime,
+            cpuTime: 0,
+            gpuTime: 0,
+            waitTime: 0,
+            markers: [],
+            gpuQueries: [],
+            memory: this.captureMemory(),
+            systemTimes: new Map(),
+            ...this.renderStats,
+        };
+        // Reset stats for new frame
+        this.renderStats = {
+            drawCalls: 0,
+            triangles: 0,
+            vertices: 0,
+            setPassCalls: 0,
+            batchCount: 0,
+            shadowCasters: 0,
+            visibleObjects: 0,
+        };
+    }
+    endFrame() {
+        if (!this.config.enabled || !this.currentFrame) {
+            return;
+        }
+        // Calculate total CPU time from markers
+        let cpuTime = 0;
+        for (const marker of this.currentFrame.markers) {
+            if (marker.depth === 0) {
+                cpuTime += marker.duration;
+            }
+        }
+        this.currentFrame.cpuTime = cpuTime;
+        // Collect GPU queries
+        this.collectGPUQueries();
+        // Calculate GPU time
+        let gpuTime = 0;
+        for (const query of this.currentFrame.gpuQueries) {
+            gpuTime += query.duration;
+        }
+        this.currentFrame.gpuTime = gpuTime;
+        // Calculate wait time (vsync, etc.)
+        this.currentFrame.waitTime = Math.max(0, this.currentFrame.deltaTime - cpuTime - gpuTime);
+        // Store frame
+        this.frames.push(this.currentFrame);
+        if (this.frames.length > this.config.maxFrames) {
+            this.frames.shift();
+        }
+        // Check for slow frame
+        if (this.config.autoCapture && this.currentFrame.deltaTime > this.config.captureThreshold) {
+            this.capturedFrames.push({ ...this.currentFrame });
+            this.onSlowFrame?.(this.currentFrame);
+        }
+        // Callback
+        this.onFrameComplete?.(this.currentFrame);
+        // Recording
+        if (this.isRecording) {
+            this.capturedFrames.push({ ...this.currentFrame });
+        }
+        this.currentFrame = null;
+        this.markerStack = [];
+    }
+    // ─── Markers ───────────────────────────────────────────
+    beginMarker(name, category = 'other') {
+        if (!this.config.enabled || !this.currentFrame) {
+            return;
+        }
+        const marker = {
+            id: `${name}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+            name,
+            category,
+            color: CATEGORY_COLORS[category],
+            startTime: performance.now(),
+            endTime: 0,
+            duration: 0,
+            depth: this.markerStack.length,
+            children: [],
+        };
+        if (this.markerStack.length > 0) {
+            // Add as child to current parent
+            this.markerStack[this.markerStack.length - 1].children.push(marker);
+        }
+        else {
+            // Top-level marker
+            this.currentFrame.markers.push(marker);
+        }
+        this.markerStack.push(marker);
+    }
+    endMarker() {
+        if (!this.config.enabled || this.markerStack.length === 0) {
+            return;
+        }
+        const marker = this.markerStack.pop();
+        marker.endTime = performance.now();
+        marker.duration = marker.endTime - marker.startTime;
+    }
+    /** Convenience method to wrap a function with profiling */
+    profile(name, category, fn) {
+        this.beginMarker(name, category);
+        try {
+            return fn();
+        }
+        finally {
+            this.endMarker();
+        }
+    }
+    /** Async version of profile */
+    async profileAsync(name, category, fn) {
+        this.beginMarker(name, category);
+        try {
+            return await fn();
+        }
+        finally {
+            this.endMarker();
+        }
+    }
+    // ─── System Timing ─────────────────────────────────────
+    recordSystemTime(systemName, time) {
+        if (!this.config.enabled || !this.currentFrame) {
+            return;
+        }
+        this.currentFrame.systemTimes.set(systemName, time);
+    }
+    // ─── Render Stats ──────────────────────────────────────
+    addDrawCall(triangles, vertices) {
+        this.renderStats.drawCalls++;
+        this.renderStats.triangles += triangles;
+        this.renderStats.vertices += vertices;
+    }
+    addBatch() {
+        this.renderStats.batchCount++;
+    }
+    addSetPassCall() {
+        this.renderStats.setPassCalls++;
+    }
+    setVisibleObjects(count) {
+        this.renderStats.visibleObjects = count;
+    }
+    setShadowCasters(count) {
+        this.renderStats.shadowCasters = count;
+    }
+    // ─── GPU Queries ───────────────────────────────────────
+    beginGPUQuery(name) {
+        if (!this.config.gpuProfiling || !this.gl || !this.gpuTimerExtension) {
+            return;
+        }
+        const gl = this.gl;
+        const query = gl.createQuery();
+        if (!query) {
+            return;
+        }
+        gl.beginQuery(this.gpuTimerExtension.TIME_ELAPSED_EXT, query);
+        this.activeGPUQueries.set(name, query);
+    }
+    endGPUQuery(name) {
+        if (!this.config.gpuProfiling || !this.gl || !this.gpuTimerExtension) {
+            return;
+        }
+        const gl = this.gl;
+        const query = this.activeGPUQueries.get(name);
+        if (!query) {
+            return;
+        }
+        gl.endQuery(this.gpuTimerExtension.TIME_ELAPSED_EXT);
+        this.pendingGPUQueries.push({
+            id: name,
+            name,
+            startTime: 0,
+            endTime: 0,
+            duration: 0,
+        });
+    }
+    collectGPUQueries() {
+        if (!this.config.gpuProfiling || !this.gl || !this.gpuTimerExtension || !this.currentFrame) {
+            return;
+        }
+        const gl = this.gl;
+        // Check for disjoint (GPU was reset, results invalid)
+        const disjoint = gl.getParameter(this.gpuTimerExtension.GPU_DISJOINT_EXT);
+        if (disjoint) {
+            // Discard all pending queries
+            this.pendingGPUQueries = [];
+            this.activeGPUQueries.clear();
+            return;
+        }
+        // Collect results from pending queries
+        for (const pendingQuery of this.pendingGPUQueries) {
+            const query = this.activeGPUQueries.get(pendingQuery.name);
+            if (!query) {
+                continue;
+            }
+            const available = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
+            if (available) {
+                const timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT);
+                pendingQuery.duration = timeElapsed / 1000000; // Convert ns to ms
+                this.currentFrame.gpuQueries.push(pendingQuery);
+                gl.deleteQuery(query);
+                this.activeGPUQueries.delete(pendingQuery.name);
+            }
+        }
+        this.pendingGPUQueries = this.pendingGPUQueries.filter((q) => this.activeGPUQueries.has(q.name));
+    }
+    // ─── Memory ────────────────────────────────────────────
+    captureMemory() {
+        const perf = performance;
+        const snapshot = {
+            timestamp: performance.now(),
+            jsHeapUsed: perf.memory?.usedJSHeapSize ?? 0,
+            jsHeapTotal: perf.memory?.totalJSHeapSize ?? 0,
+            jsHeapLimit: perf.memory?.jsHeapSizeLimit ?? 0,
+            externalMemory: 0,
+            arrayBuffers: 0,
+            gpuTextures: 0,
+            gpuBuffers: 0,
+            gpuShaders: 0,
+            gpuRenderTargets: 0,
+            allocations: this.allocationCounter,
+            deallocations: this.deallocationCounter,
+            gcCollections: this.gcCounter,
+        };
+        // Detect GC by sudden memory drops
+        if (this.lastMemory && snapshot.jsHeapUsed < this.lastMemory.jsHeapUsed * 0.9) {
+            this.gcCounter++;
+        }
+        this.lastMemory = snapshot;
+        return snapshot;
+    }
+    trackAllocation(bytes) {
+        if (this.config.recordAllocations) {
+            this.allocationCounter += bytes;
+        }
+    }
+    trackDeallocation(bytes) {
+        if (this.config.recordAllocations) {
+            this.deallocationCounter += bytes;
+        }
+    }
+    setGPUMemory(textures, buffers, shaders, renderTargets) {
+        if (this.currentFrame) {
+            this.currentFrame.memory.gpuTextures = textures;
+            this.currentFrame.memory.gpuBuffers = buffers;
+            this.currentFrame.memory.gpuShaders = shaders;
+            this.currentFrame.memory.gpuRenderTargets = renderTargets;
+        }
+    }
+    // ─── Recording ─────────────────────────────────────────
+    startRecording() {
+        this.isRecording = true;
+        this.capturedFrames = [];
+    }
+    stopRecording() {
+        this.isRecording = false;
+        return [...this.capturedFrames];
+    }
+    clearRecording() {
+        this.capturedFrames = [];
+    }
+    isRecordingActive() {
+        return this.isRecording;
+    }
+    // ─── Data Access ───────────────────────────────────────
+    getFrames() {
+        return this.frames;
+    }
+    getLastFrame() {
+        return this.frames.length > 0 ? this.frames[this.frames.length - 1] : null;
+    }
+    getFrame(index) {
+        return this.frames[index] ?? null;
+    }
+    getFrameRange(start, end) {
+        return this.frames.slice(start, end);
+    }
+    getCapturedFrames() {
+        return this.capturedFrames;
+    }
+    // ─── Statistics ────────────────────────────────────────
+    getStats(frameCount = 60) {
+        const recentFrames = this.frames.slice(-frameCount);
+        if (recentFrames.length === 0) {
+            return {
+                avgFrameTime: 0,
+                avgCPUTime: 0,
+                avgGPUTime: 0,
+                avgFPS: 0,
+                minFPS: 0,
+                maxFPS: 0,
+                frame1Percent: 0,
+                frame01Percent: 0,
+                avgMemory: 0,
+                peakMemory: 0,
+                memoryGrowthRate: 0,
+                avgDrawCalls: 0,
+                avgBatches: 0,
+                avgTriangles: 0,
+                avgSetPassCalls: 0,
+            };
+        }
+        // Timing
+        const frameTimes = recentFrames.map((f) => f.deltaTime);
+        const cpuTimes = recentFrames.map((f) => f.cpuTime);
+        const gpuTimes = recentFrames.map((f) => f.gpuTime);
+        const avgFrameTime = frameTimes.reduce((a, b) => a + b, 0) / frameTimes.length;
+        const avgCPUTime = cpuTimes.reduce((a, b) => a + b, 0) / cpuTimes.length;
+        const avgGPUTime = gpuTimes.reduce((a, b) => a + b, 0) / gpuTimes.length;
+        const sortedFrameTimes = [...frameTimes].sort((a, b) => b - a);
+        const frame1Percent = sortedFrameTimes[Math.floor(sortedFrameTimes.length * 0.01)] ?? 0;
+        const frame01Percent = sortedFrameTimes[Math.floor(sortedFrameTimes.length * 0.001)] ?? 0;
+        const fpsValues = frameTimes.map((t) => (t > 0 ? 1000 / t : 0));
+        const avgFPS = fpsValues.reduce((a, b) => a + b, 0) / fpsValues.length;
+        const minFPS = Math.min(...fpsValues);
+        const maxFPS = Math.max(...fpsValues);
+        // Memory
+        const memories = recentFrames.map((f) => f.memory.jsHeapUsed);
+        const avgMemory = memories.reduce((a, b) => a + b, 0) / memories.length;
+        const peakMemory = Math.max(...memories);
+        const memoryGrowthRate = recentFrames.length > 1
+            ? ((memories[memories.length - 1] - memories[0]) /
+                (recentFrames[recentFrames.length - 1].timestamp - recentFrames[0].timestamp)) *
+                1000
+            : 0;
+        // Rendering
+        const avgDrawCalls = recentFrames.reduce((a, f) => a + f.drawCalls, 0) / recentFrames.length;
+        const avgBatches = recentFrames.reduce((a, f) => a + f.batchCount, 0) / recentFrames.length;
+        const avgTriangles = recentFrames.reduce((a, f) => a + f.triangles, 0) / recentFrames.length;
+        const avgSetPassCalls = recentFrames.reduce((a, f) => a + f.setPassCalls, 0) / recentFrames.length;
+        return {
+            avgFrameTime,
+            avgCPUTime,
+            avgGPUTime,
+            avgFPS,
+            minFPS,
+            maxFPS,
+            frame1Percent,
+            frame01Percent,
+            avgMemory,
+            peakMemory,
+            memoryGrowthRate,
+            avgDrawCalls,
+            avgBatches,
+            avgTriangles,
+            avgSetPassCalls,
+        };
+    }
+    // ─── Graph Data ────────────────────────────────────────
+    getFrameTimeGraph(frameCount = 300) {
+        const recentFrames = this.frames.slice(-frameCount);
+        const cpuData = [];
+        const gpuData = [];
+        const waitData = [];
+        for (let i = 0; i < recentFrames.length; i++) {
+            const f = recentFrames[i];
+            cpuData.push({ x: i, y: f.cpuTime });
+            gpuData.push({ x: i, y: f.gpuTime });
+            waitData.push({ x: i, y: f.waitTime });
+        }
+        const cpuValues = cpuData.map((p) => p.y);
+        const gpuValues = gpuData.map((p) => p.y);
+        const waitValues = waitData.map((p) => p.y);
+        return {
+            title: 'Frame Time',
+            yAxisLabel: 'Time',
+            yAxisUnit: 'ms',
+            series: [
+                {
+                    name: 'CPU',
+                    color: CATEGORY_COLORS.scripts,
+                    data: cpuData,
+                    minValue: Math.min(...cpuValues),
+                    maxValue: Math.max(...cpuValues),
+                    avgValue: cpuValues.reduce((a, b) => a + b, 0) / cpuValues.length || 0,
+                },
+                {
+                    name: 'GPU',
+                    color: CATEGORY_COLORS.rendering,
+                    data: gpuData,
+                    minValue: Math.min(...gpuValues),
+                    maxValue: Math.max(...gpuValues),
+                    avgValue: gpuValues.reduce((a, b) => a + b, 0) / gpuValues.length || 0,
+                },
+                {
+                    name: 'Wait',
+                    color: CATEGORY_COLORS.vsync,
+                    data: waitData,
+                    minValue: Math.min(...waitValues),
+                    maxValue: Math.max(...waitValues),
+                    avgValue: waitValues.reduce((a, b) => a + b, 0) / waitValues.length || 0,
+                },
+            ],
+            targetLine: 16.67, // 60 FPS
+            warningLine: 33.33, // 30 FPS
+        };
+    }
+    getMemoryGraph(frameCount = 300) {
+        const recentFrames = this.frames.slice(-frameCount);
+        const jsHeapData = [];
+        const gpuData = [];
+        for (let i = 0; i < recentFrames.length; i++) {
+            const f = recentFrames[i];
+            const jsHeapMB = f.memory.jsHeapUsed / (1024 * 1024);
+            const gpuMB = (f.memory.gpuTextures +
+                f.memory.gpuBuffers +
+                f.memory.gpuShaders +
+                f.memory.gpuRenderTargets) /
+                (1024 * 1024);
+            jsHeapData.push({ x: i, y: jsHeapMB });
+            gpuData.push({ x: i, y: gpuMB });
+        }
+        const jsValues = jsHeapData.map((p) => p.y);
+        const gpuValues = gpuData.map((p) => p.y);
+        return {
+            title: 'Memory',
+            yAxisLabel: 'Memory',
+            yAxisUnit: 'MB',
+            series: [
+                {
+                    name: 'JS Heap',
+                    color: '#4FC3F7',
+                    data: jsHeapData,
+                    minValue: Math.min(...jsValues),
+                    maxValue: Math.max(...jsValues),
+                    avgValue: jsValues.reduce((a, b) => a + b, 0) / jsValues.length || 0,
+                },
+                {
+                    name: 'GPU',
+                    color: '#FFB74D',
+                    data: gpuData,
+                    minValue: Math.min(...gpuValues),
+                    maxValue: Math.max(...gpuValues),
+                    avgValue: gpuValues.reduce((a, b) => a + b, 0) / gpuValues.length || 0,
+                },
+            ],
+        };
+    }
+    getRenderingGraph(frameCount = 300) {
+        const recentFrames = this.frames.slice(-frameCount);
+        const drawCallsData = [];
+        const batchesData = [];
+        const trianglesData = [];
+        for (let i = 0; i < recentFrames.length; i++) {
+            const f = recentFrames[i];
+            drawCallsData.push({ x: i, y: f.drawCalls });
+            batchesData.push({ x: i, y: f.batchCount });
+            trianglesData.push({ x: i, y: f.triangles / 1000 }); // In thousands
+        }
+        const dcValues = drawCallsData.map((p) => p.y);
+        const batchValues = batchesData.map((p) => p.y);
+        const triValues = trianglesData.map((p) => p.y);
+        return {
+            title: 'Rendering',
+            yAxisLabel: 'Count',
+            yAxisUnit: '',
+            series: [
+                {
+                    name: 'Draw Calls',
+                    color: '#E57373',
+                    data: drawCallsData,
+                    minValue: Math.min(...dcValues),
+                    maxValue: Math.max(...dcValues),
+                    avgValue: dcValues.reduce((a, b) => a + b, 0) / dcValues.length || 0,
+                },
+                {
+                    name: 'Batches',
+                    color: '#81C784',
+                    data: batchesData,
+                    minValue: Math.min(...batchValues),
+                    maxValue: Math.max(...batchValues),
+                    avgValue: batchValues.reduce((a, b) => a + b, 0) / batchValues.length || 0,
+                },
+                {
+                    name: 'Triangles (K)',
+                    color: '#64B5F6',
+                    data: trianglesData,
+                    minValue: Math.min(...triValues),
+                    maxValue: Math.max(...triValues),
+                    avgValue: triValues.reduce((a, b) => a + b, 0) / triValues.length || 0,
+                },
+            ],
+        };
+    }
+    // ─── Flame Graph Data ──────────────────────────────────
+    getFlameGraph(frame) {
+        // Returns markers in format suitable for flame graph visualization
+        return frame.markers;
+    }
+    // ─── System Breakdown ──────────────────────────────────
+    getSystemBreakdown(frameCount = 60) {
+        const recentFrames = this.frames.slice(-frameCount);
+        const totals = new Map();
+        for (const frame of recentFrames) {
+            for (const [system, time] of frame.systemTimes) {
+                totals.set(system, (totals.get(system) ?? 0) + time);
+            }
+        }
+        // Calculate averages
+        for (const [system, total] of totals) {
+            totals.set(system, total / recentFrames.length);
+        }
+        return totals;
+    }
+    // ─── Export/Import ─────────────────────────────────────
+    exportData() {
+        const exportData = {
+            version: 1,
+            config: this.config,
+            frames: this.frames.map((f) => ({
+                ...f,
+                systemTimes: Array.from(f.systemTimes.entries()),
+            })),
+            capturedFrames: this.capturedFrames.map((f) => ({
+                ...f,
+                systemTimes: Array.from(f.systemTimes.entries()),
+            })),
+        };
+        return JSON.stringify(exportData);
+    }
+    importData(json) {
+        try {
+            const data = JSON.parse(json);
+            if (data.version !== 1) {
+                throw new Error('Unsupported profiler data version');
+            }
+            this.config = { ...DEFAULT_PROFILER_CONFIG, ...data.config };
+            this.frames = data.frames.map((f) => ({
+                ...f,
+                systemTimes: new Map(f.systemTimes),
+            }));
+            this.capturedFrames = data.capturedFrames.map((f) => ({
+                ...f,
+                systemTimes: new Map(f.systemTimes),
+            }));
+        }
+        catch (error) {
+            console.error('Failed to import profiler data:', error);
+        }
+    }
+    // ─── Callbacks ─────────────────────────────────────────
+    setOnFrameComplete(callback) {
+        this.onFrameComplete = callback;
+    }
+    setOnSlowFrame(callback) {
+        this.onSlowFrame = callback;
+    }
+    // ─── Clear ─────────────────────────────────────────────
+    clear() {
+        this.frames = [];
+        this.capturedFrames = [];
+        this.frameNumber = 0;
+        this.lastFrameTimestamp = 0;
+        this.allocationCounter = 0;
+        this.deallocationCounter = 0;
+        this.gcCounter = 0;
+        this.lastMemory = null;
+    }
+}
+// ============================================================
+// Factory Functions
+// ============================================================
+function createProfilerPanel(config) {
+    return new ProfilerPanel(config);
+}
+// ============================================================
+// Quick Stats Overlay Text Generator
+// ============================================================
+function generateStatsOverlay(panel) {
+    const stats = panel.getStats();
+    panel.getLastFrame();
+    return [
+        `FPS: ${stats.avgFPS.toFixed(1)} (${stats.minFPS.toFixed(1)}-${stats.maxFPS.toFixed(1)})`,
+        `Frame: ${stats.avgFrameTime.toFixed(2)}ms`,
+        `  CPU: ${stats.avgCPUTime.toFixed(2)}ms`,
+        `  GPU: ${stats.avgGPUTime.toFixed(2)}ms`,
+        ``,
+        `Memory: ${(stats.avgMemory / (1024 * 1024)).toFixed(1)}MB`,
+        `  Peak: ${(stats.peakMemory / (1024 * 1024)).toFixed(1)}MB`,
+        ``,
+        `Draw Calls: ${stats.avgDrawCalls.toFixed(0)}`,
+        `Batches: ${stats.avgBatches.toFixed(0)}`,
+        `Triangles: ${(stats.avgTriangles / 1000).toFixed(1)}K`,
+        ``,
+        `1% Low: ${stats.frame1Percent.toFixed(2)}ms`,
+        `0.1% Low: ${stats.frame01Percent.toFixed(2)}ms`,
+    ];
+}
+
+exports.CATEGORY_COLORS = CATEGORY_COLORS;
+exports.DEFAULT_PROFILER_CONFIG = DEFAULT_PROFILER_CONFIG;
+exports.ProfilerPanel = ProfilerPanel;
+exports.createProfilerPanel = createProfilerPanel;
+exports.generateStatsOverlay = generateStatsOverlay;
+//# sourceMappingURL=ProfilerPanel.js.map