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
|
/**
* RollingAverage - Maintains a rolling window of values for smooth averaging
*/
class RollingAverage {
constructor(capacity) {
this.values = [];
this.capacity = capacity;
this.sum = 0;
}
push(value) {
if (this.values.length >= this.capacity) {
const old = this.values.shift();
this.sum -= old;
}
this.values.push(value);
this.sum += value;
}
average() {
return this.values.length > 0 ? this.sum / this.values.length : 0;
}
min() {
return this.values.length > 0 ? Math.min(...this.values) : 0;
}
max() {
return this.values.length > 0 ? Math.max(...this.values) : 0;
}
}
/**
* PerformanceMetrics - Tracks and analyzes frame performance
*/
export class PerformanceMetrics {
constructor(rollingWindow = 60, historyCapacity = 10000) {
// Rolling averages
this.frameTime = new RollingAverage(rollingWindow);
this.updateTime = new RollingAverage(rollingWindow);
this.renderTime = new RollingAverage(rollingWindow);
this.vertexCount = new RollingAverage(rollingWindow);
this.lineCount = new RollingAverage(rollingWindow);
// History for export
this.history = [];
this.historyCapacity = historyCapacity;
// Frame timing
this.frameStart = 0;
this.updateStart = 0;
this.renderStart = 0;
this.totalFrames = 0;
}
beginFrame() {
this.frameStart = performance.now();
}
beginUpdate() {
this.updateStart = performance.now();
}
endUpdate() {
const duration = performance.now() - this.updateStart;
return duration;
}
beginRender() {
this.renderStart = performance.now();
}
endRender() {
const duration = performance.now() - this.renderStart;
return duration;
}
endFrame(updateMs, renderMs, vertexCount, lineCount) {
const totalMs = performance.now() - this.frameStart;
// Update rolling averages
this.frameTime.push(totalMs);
this.updateTime.push(updateMs);
this.renderTime.push(renderMs);
this.vertexCount.push(vertexCount);
this.lineCount.push(lineCount);
// Store in history
const record = {
frame: this.totalFrames,
totalMs,
updateMs,
renderMs,
vertexCount,
lineCount,
fps: totalMs > 0 ? 1000 / totalMs : 0,
};
if (this.history.length >= this.historyCapacity) {
this.history.shift();
}
this.history.push(record);
this.totalFrames++;
}
getFPS() {
const avg = this.frameTime.average();
return avg > 0 ? 1000 / avg : 0;
}
getMinFPS() {
const max = this.frameTime.max();
return max > 0 ? 1000 / max : 0;
}
getMaxFPS() {
const min = this.frameTime.min();
return min > 0 ? 1000 / min : 0;
}
formatSummary() {
return `FPS: ${this.getFPS().toFixed(1)} (min: ${this.getMinFPS().toFixed(1)}, max: ${this.getMaxFPS().toFixed(1)}) | ` +
`Frame: ${this.frameTime.average().toFixed(2)}ms | ` +
`Update: ${this.updateTime.average().toFixed(2)}ms | ` +
`Render: ${this.renderTime.average().toFixed(2)}ms | ` +
`Vertices: ${Math.round(this.vertexCount.average())} | ` +
`Lines: ${Math.round(this.lineCount.average())}`;
}
exportToCSV() {
let csv = 'frame,total_ms,update_ms,render_ms,vertex_count,line_count,fps\n';
for (const record of this.history) {
csv += `${record.frame},${record.totalMs},${record.updateMs},${record.renderMs},` +
`${record.vertexCount},${record.lineCount},${record.fps}\n`;
}
return csv;
}
}
|
