candy_world/performance-test.html at main · ford442/candy_world · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Performance Test - Candy World</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: #1a1a2e;
            color: #fff;
        }
        #stats {
            position: fixed;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.8);
            padding: 15px;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.6;
            z-index: 1000;
            min-width: 250px;
        }
        #stats h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            color: #4fc3f7;
        }
        .stat-row {
            display: flex;
            justify-content: space-between;
            margin: 5px 0;
        }
        .stat-label {
            color: #aaa;
        }
        .stat-value {
            color: #fff;
            font-weight: bold;
        }
        .good { color: #4caf50 !important; }
        .warning { color: #ff9800 !important; }
        .bad { color: #f44336 !important; }
        #instructions {
            position: fixed;
            bottom: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.8);
            padding: 15px;
            border-radius: 8px;
            font-size: 12px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div id="stats">
        <h3>Performance Monitor</h3>
        <div class="stat-row">
            <span class="stat-label">FPS:</span>
            <span class="stat-value" id="fps">--</span>
        </div>
        <div class="stat-row">
            <span class="stat-label">Frame Time:</span>
            <span class="stat-value" id="frameTime">--</span>
        </div>
        <div class="stat-row">
            <span class="stat-label">Total Objects:</span>
            <span class="stat-value" id="totalObjects">--</span>
        </div>
        <div class="stat-row">
            <span class="stat-label">Visible Objects:</span>
            <span class="stat-value" id="visibleObjects">--</span>
        </div>
        <div class="stat-row">
            <span class="stat-label">Updated This Frame:</span>
            <span class="stat-value" id="updatedObjects">--</span>
        </div>
        <div class="stat-row">
            <span class="stat-label">Memory (MB):</span>
            <span class="stat-value" id="memory">--</span>
        </div>
    </div>

    <div id="instructions">
        <strong>Performance Test Instructions:</strong><br>
        1. Use WASD to move around<br>
        2. Look for areas with many objects<br>
        3. Monitor FPS and frame time<br>
        4. Green FPS = Good (>50), Yellow = OK (30-50), Red = Poor (<30)
    </div>

    <script type="module">
        // Performance monitoring overlay
        let frameCount = 0;
        let lastTime = performance.now();
        let fps = 0;
        let frameTime = 0;

        function updateStats() {
            const now = performance.now();
            frameCount++;

            if (now >= lastTime + 1000) {
                fps = Math.round((frameCount * 1000) / (now - lastTime));
                frameCount = 0;
                lastTime = now;
            }

            // Update UI
            const fpsEl = document.getElementById('fps');
            fpsEl.textContent = fps;
            fpsEl.className = 'stat-value ' + (fps >= 50 ? 'good' : fps >= 30 ? 'warning' : 'bad');

            const frameTimeEl = document.getElementById('frameTime');
            frameTime = fps > 0 ? Math.round((1000 / fps) * 100) / 100 : 0;
            frameTimeEl.textContent = frameTime + ' ms';
            frameTimeEl.className = 'stat-value ' + (frameTime <= 16.67 ? 'good' : frameTime <= 33.33 ? 'warning' : 'bad');

            // Memory
            if (performance.memory) {
                const memMB = Math.round(performance.memory.usedJSHeapSize / 1048576);
                document.getElementById('memory').textContent = memMB;
            }

            requestAnimationFrame(updateStats);
        }

        // Wait for scene to be ready
        const checkInterval = setInterval(() => {
            if (window.__sceneReady) {
                clearInterval(checkInterval);
                console.log('[PerfTest] Scene ready, starting monitoring...');
                updateStats();
            }
        }, 100);

        // Export for main.js to update
        window.updatePerfStats = (total, visible, updated) => {
            document.getElementById('totalObjects').textContent = total;
            document.getElementById('visibleObjects').textContent = visible;
            document.getElementById('updatedObjects').textContent = updated;
        };
    </script>
</body>
</html>