stats-gl 1.0.6 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -12
- package/dist/main.cjs +101 -40
- package/dist/main.cjs.map +1 -1
- package/dist/main.js +101 -40
- package/dist/main.js.map +1 -1
- package/dist/stats-gl.d.ts +20 -6
- package/lib/main.ts +152 -60
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -44,13 +44,20 @@ const stats = new Stats({
|
|
|
44
44
|
});
|
|
45
45
|
|
|
46
46
|
// append the stats container to the body of the document
|
|
47
|
-
document.body.appendChild( stats.
|
|
47
|
+
document.body.appendChild( stats.dom );
|
|
48
48
|
|
|
49
49
|
// begin the performance monitor
|
|
50
50
|
stats.begin();
|
|
51
|
-
|
|
52
51
|
// end the performance monitor
|
|
53
52
|
stats.end();
|
|
53
|
+
|
|
54
|
+
stats.begin();
|
|
55
|
+
// gl.draw... second pass
|
|
56
|
+
stats.end();
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
// when all the passes are drawn update the logs
|
|
60
|
+
stats.update();
|
|
54
61
|
```
|
|
55
62
|
|
|
56
63
|
|
|
@@ -64,26 +71,23 @@ import Stats from 'https://www.unpkg.com/stats-gl?module';
|
|
|
64
71
|
const container = document.getElementById( 'container' );
|
|
65
72
|
|
|
66
73
|
const stats = new Stats();
|
|
67
|
-
container.appendChild( stats.
|
|
74
|
+
container.appendChild( stats.dom );
|
|
68
75
|
|
|
69
76
|
const renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
70
77
|
container.appendChild( renderer.domElement );
|
|
71
78
|
|
|
72
79
|
const scene = new THREE.Scene();
|
|
73
80
|
|
|
74
|
-
stats.init( renderer
|
|
75
|
-
|
|
76
|
-
scene.onBeforeRender = function () {
|
|
77
|
-
|
|
78
|
-
stats.begin();
|
|
81
|
+
stats.init( renderer );
|
|
79
82
|
|
|
80
|
-
|
|
83
|
+
function animate() {
|
|
81
84
|
|
|
82
|
-
|
|
85
|
+
requestAnimationFrame( animate );
|
|
83
86
|
|
|
84
|
-
|
|
87
|
+
render();
|
|
88
|
+
stats.update();
|
|
85
89
|
|
|
86
|
-
}
|
|
90
|
+
}
|
|
87
91
|
```
|
|
88
92
|
Quick start with [@react-three/fiber](https://github.com/pmndrs/fiber). A `<StatsGl />` component is available through [@react-three/drei](https://github.com/pmndrs/drei):
|
|
89
93
|
```jsx
|
package/dist/main.cjs
CHANGED
|
@@ -2,20 +2,29 @@
|
|
|
2
2
|
const panel = require("./panel.cjs");
|
|
3
3
|
const _Stats = class _Stats {
|
|
4
4
|
constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, horizontal = true, mode = 0 } = {}) {
|
|
5
|
+
this.totalCpuDuration = 0;
|
|
6
|
+
this.totalGpuDuration = 0;
|
|
7
|
+
this.totalFps = 0;
|
|
8
|
+
this.activeQuery = null;
|
|
9
|
+
this.gpuQueries = [];
|
|
10
|
+
this.renderCount = 0;
|
|
5
11
|
this.mode = mode;
|
|
6
12
|
this.horizontal = horizontal;
|
|
7
|
-
this.
|
|
8
|
-
this.
|
|
13
|
+
this.dom = document.createElement("div");
|
|
14
|
+
this.dom.style.cssText = "position:fixed;top:0;left:0;opacity:0.9;z-index:10000;";
|
|
9
15
|
if (minimal) {
|
|
10
|
-
this.
|
|
16
|
+
this.dom.style.cssText += "cursor:pointer";
|
|
11
17
|
}
|
|
12
18
|
this.gl = null;
|
|
13
19
|
this.query = null;
|
|
20
|
+
this.isRunningCPUProfiling = false;
|
|
14
21
|
this.minimal = minimal;
|
|
15
22
|
this.beginTime = (performance || Date).now();
|
|
16
23
|
this.prevTime = this.beginTime;
|
|
17
24
|
this.prevCpuTime = this.beginTime;
|
|
18
25
|
this.frames = 0;
|
|
26
|
+
this.renderCount = 0;
|
|
27
|
+
this.threeRendererPatched = false;
|
|
19
28
|
this.averageCpu = {
|
|
20
29
|
logs: [],
|
|
21
30
|
graph: []
|
|
@@ -33,9 +42,9 @@ const _Stats = class _Stats {
|
|
|
33
42
|
this.precision = precision;
|
|
34
43
|
this.logsPerSecond = logsPerSecond;
|
|
35
44
|
if (this.minimal) {
|
|
36
|
-
this.
|
|
45
|
+
this.dom.addEventListener("click", (event) => {
|
|
37
46
|
event.preventDefault();
|
|
38
|
-
this.showPanel(++this.mode % this.
|
|
47
|
+
this.showPanel(++this.mode % this.dom.children.length);
|
|
39
48
|
}, false);
|
|
40
49
|
this.mode = mode;
|
|
41
50
|
this.showPanel(this.mode);
|
|
@@ -49,6 +58,16 @@ const _Stats = class _Stats {
|
|
|
49
58
|
});
|
|
50
59
|
}
|
|
51
60
|
}
|
|
61
|
+
patchThreeRenderer(renderer) {
|
|
62
|
+
const originalRenderMethod = renderer.render;
|
|
63
|
+
const statsInstance = this;
|
|
64
|
+
renderer.render = function(scene, camera) {
|
|
65
|
+
statsInstance.begin();
|
|
66
|
+
originalRenderMethod.call(this, scene, camera);
|
|
67
|
+
statsInstance.end();
|
|
68
|
+
};
|
|
69
|
+
this.threeRendererPatched = true;
|
|
70
|
+
}
|
|
52
71
|
resizePanel(panel2, offset) {
|
|
53
72
|
panel2.canvas.style.position = "absolute";
|
|
54
73
|
if (this.minimal) {
|
|
@@ -66,65 +85,98 @@ const _Stats = class _Stats {
|
|
|
66
85
|
}
|
|
67
86
|
addPanel(panel2, offset) {
|
|
68
87
|
if (panel2.canvas) {
|
|
69
|
-
this.
|
|
88
|
+
this.dom.appendChild(panel2.canvas);
|
|
70
89
|
this.resizePanel(panel2, offset);
|
|
71
90
|
}
|
|
72
91
|
return panel2;
|
|
73
92
|
}
|
|
74
93
|
showPanel(id) {
|
|
75
|
-
for (let i = 0; i < this.
|
|
76
|
-
const child = this.
|
|
94
|
+
for (let i = 0; i < this.dom.children.length; i++) {
|
|
95
|
+
const child = this.dom.children[i];
|
|
77
96
|
child.style.display = i === id ? "block" : "none";
|
|
78
97
|
}
|
|
79
98
|
this.mode = id;
|
|
80
99
|
}
|
|
81
|
-
init(
|
|
82
|
-
if (!
|
|
100
|
+
init(canvasOrGL) {
|
|
101
|
+
if (!canvasOrGL) {
|
|
83
102
|
console.error('Stats: The "canvas" parameter is undefined.');
|
|
84
103
|
return;
|
|
85
104
|
}
|
|
86
|
-
|
|
87
|
-
|
|
105
|
+
if (canvasOrGL.isWebGLRenderer && !this.threeRendererPatched) {
|
|
106
|
+
const canvas = canvasOrGL;
|
|
107
|
+
this.patchThreeRenderer(canvas);
|
|
108
|
+
this.gl = canvas.getContext();
|
|
109
|
+
}
|
|
110
|
+
if (!this.gl && canvasOrGL instanceof WebGL2RenderingContext) {
|
|
111
|
+
this.gl = canvasOrGL;
|
|
112
|
+
} else if (!this.gl && canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
|
|
113
|
+
this.gl = canvasOrGL.getContext("webgl2");
|
|
114
|
+
if (!this.gl) {
|
|
115
|
+
console.error("Stats: Unable to obtain WebGL2 context.");
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
} else if (!this.gl) {
|
|
119
|
+
console.error("Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas.");
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
this.ext = this.gl.getExtension("EXT_disjoint_timer_query_webgl2");
|
|
88
123
|
if (this.ext) {
|
|
89
124
|
this.gpuPanel = this.addPanel(new _Stats.Panel("GPU", "#ff0", "#220"), 2);
|
|
90
125
|
}
|
|
91
126
|
}
|
|
92
127
|
begin() {
|
|
93
|
-
this.
|
|
128
|
+
if (!this.isRunningCPUProfiling) {
|
|
129
|
+
this.beginProfiling("cpu-started");
|
|
130
|
+
}
|
|
94
131
|
if (!this.gl || !this.ext)
|
|
95
132
|
return;
|
|
96
|
-
if (this.
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
if (available && !this.disjoint) {
|
|
100
|
-
this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
|
|
101
|
-
const ms = this.ns * 1e-6;
|
|
102
|
-
if (available || this.disjoint) {
|
|
103
|
-
this.gl.deleteQuery(this.query);
|
|
104
|
-
this.query = null;
|
|
105
|
-
}
|
|
106
|
-
if (available) {
|
|
107
|
-
this.addToAverage(ms, this.averageGpu);
|
|
108
|
-
}
|
|
133
|
+
if (this.gl && this.ext) {
|
|
134
|
+
if (this.activeQuery) {
|
|
135
|
+
this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
|
|
109
136
|
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
this.query = this.gl.createQuery();
|
|
114
|
-
if (this.query) {
|
|
115
|
-
this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.query);
|
|
137
|
+
this.activeQuery = this.gl.createQuery();
|
|
138
|
+
if (this.activeQuery !== null) {
|
|
139
|
+
this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.activeQuery);
|
|
116
140
|
}
|
|
117
141
|
}
|
|
118
142
|
}
|
|
119
143
|
end() {
|
|
120
|
-
this.
|
|
121
|
-
this.
|
|
122
|
-
if (!this.gl || !this.ext)
|
|
123
|
-
return;
|
|
124
|
-
if (this.queryCreated && this.gl.getQuery(this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY)) {
|
|
144
|
+
this.renderCount++;
|
|
145
|
+
if (this.gl && this.ext && this.activeQuery) {
|
|
125
146
|
this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
|
|
147
|
+
this.gpuQueries.push({ query: this.activeQuery });
|
|
148
|
+
this.activeQuery = null;
|
|
126
149
|
}
|
|
127
150
|
}
|
|
151
|
+
processGpuQueries() {
|
|
152
|
+
if (!this.gl || !this.ext)
|
|
153
|
+
return;
|
|
154
|
+
this.totalGpuDuration = 0;
|
|
155
|
+
this.gpuQueries.forEach((queryInfo, index) => {
|
|
156
|
+
if (this.gl) {
|
|
157
|
+
const available = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT_AVAILABLE);
|
|
158
|
+
const disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
|
|
159
|
+
if (available && !disjoint) {
|
|
160
|
+
const elapsed = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT);
|
|
161
|
+
const duration = elapsed * 1e-6;
|
|
162
|
+
this.totalGpuDuration += duration;
|
|
163
|
+
this.gl.deleteQuery(queryInfo.query);
|
|
164
|
+
this.gpuQueries.splice(index, 1);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
update() {
|
|
170
|
+
this.processGpuQueries();
|
|
171
|
+
this.endProfiling("cpu-started", "cpu-finished", "cpu-duration");
|
|
172
|
+
this.addToAverage(this.totalCpuDuration, this.averageCpu);
|
|
173
|
+
this.addToAverage(this.totalGpuDuration, this.averageGpu);
|
|
174
|
+
this.renderCount = 0;
|
|
175
|
+
this.totalCpuDuration = 0;
|
|
176
|
+
this.totalGpuDuration = 0;
|
|
177
|
+
this.totalFps = 0;
|
|
178
|
+
this.beginTime = this.endInternal();
|
|
179
|
+
}
|
|
128
180
|
endInternal() {
|
|
129
181
|
this.frames++;
|
|
130
182
|
const time = (performance || Date).now();
|
|
@@ -154,13 +206,15 @@ const _Stats = class _Stats {
|
|
|
154
206
|
beginProfiling(marker) {
|
|
155
207
|
if (window.performance) {
|
|
156
208
|
window.performance.mark(marker);
|
|
209
|
+
this.isRunningCPUProfiling = true;
|
|
157
210
|
}
|
|
158
211
|
}
|
|
159
|
-
endProfiling(startMarker, endMarker, measureName
|
|
160
|
-
if (window.performance && endMarker) {
|
|
212
|
+
endProfiling(startMarker, endMarker, measureName) {
|
|
213
|
+
if (window.performance && endMarker && this.isRunningCPUProfiling) {
|
|
161
214
|
window.performance.mark(endMarker);
|
|
162
215
|
const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
|
|
163
|
-
this.
|
|
216
|
+
this.totalCpuDuration += cpuMeasure.duration;
|
|
217
|
+
this.isRunningCPUProfiling = false;
|
|
164
218
|
}
|
|
165
219
|
}
|
|
166
220
|
updatePanel(panel2, averageArray) {
|
|
@@ -186,6 +240,13 @@ const _Stats = class _Stats {
|
|
|
186
240
|
}
|
|
187
241
|
}
|
|
188
242
|
}
|
|
243
|
+
get domElement() {
|
|
244
|
+
return this.dom;
|
|
245
|
+
}
|
|
246
|
+
get container() {
|
|
247
|
+
console.warn("Stats: Deprecated! this.container as been replaced to this.dom ");
|
|
248
|
+
return this.dom;
|
|
249
|
+
}
|
|
189
250
|
};
|
|
190
251
|
_Stats.Panel = panel;
|
|
191
252
|
let Stats = _Stats;
|
package/dist/main.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.cjs","sources":["../lib/main.ts"],"sourcesContent":null,"names":["panel","Panel"],"mappings":";;AAQA,MAAM,SAAN,MAAM,OAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"main.cjs","sources":["../lib/main.ts"],"sourcesContent":null,"names":["panel","Panel"],"mappings":"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"}
|
package/dist/main.js
CHANGED
|
@@ -1,20 +1,29 @@
|
|
|
1
1
|
import Panel from "./panel.js";
|
|
2
2
|
const _Stats = class _Stats {
|
|
3
3
|
constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, horizontal = true, mode = 0 } = {}) {
|
|
4
|
+
this.totalCpuDuration = 0;
|
|
5
|
+
this.totalGpuDuration = 0;
|
|
6
|
+
this.totalFps = 0;
|
|
7
|
+
this.activeQuery = null;
|
|
8
|
+
this.gpuQueries = [];
|
|
9
|
+
this.renderCount = 0;
|
|
4
10
|
this.mode = mode;
|
|
5
11
|
this.horizontal = horizontal;
|
|
6
|
-
this.
|
|
7
|
-
this.
|
|
12
|
+
this.dom = document.createElement("div");
|
|
13
|
+
this.dom.style.cssText = "position:fixed;top:0;left:0;opacity:0.9;z-index:10000;";
|
|
8
14
|
if (minimal) {
|
|
9
|
-
this.
|
|
15
|
+
this.dom.style.cssText += "cursor:pointer";
|
|
10
16
|
}
|
|
11
17
|
this.gl = null;
|
|
12
18
|
this.query = null;
|
|
19
|
+
this.isRunningCPUProfiling = false;
|
|
13
20
|
this.minimal = minimal;
|
|
14
21
|
this.beginTime = (performance || Date).now();
|
|
15
22
|
this.prevTime = this.beginTime;
|
|
16
23
|
this.prevCpuTime = this.beginTime;
|
|
17
24
|
this.frames = 0;
|
|
25
|
+
this.renderCount = 0;
|
|
26
|
+
this.threeRendererPatched = false;
|
|
18
27
|
this.averageCpu = {
|
|
19
28
|
logs: [],
|
|
20
29
|
graph: []
|
|
@@ -32,9 +41,9 @@ const _Stats = class _Stats {
|
|
|
32
41
|
this.precision = precision;
|
|
33
42
|
this.logsPerSecond = logsPerSecond;
|
|
34
43
|
if (this.minimal) {
|
|
35
|
-
this.
|
|
44
|
+
this.dom.addEventListener("click", (event) => {
|
|
36
45
|
event.preventDefault();
|
|
37
|
-
this.showPanel(++this.mode % this.
|
|
46
|
+
this.showPanel(++this.mode % this.dom.children.length);
|
|
38
47
|
}, false);
|
|
39
48
|
this.mode = mode;
|
|
40
49
|
this.showPanel(this.mode);
|
|
@@ -48,6 +57,16 @@ const _Stats = class _Stats {
|
|
|
48
57
|
});
|
|
49
58
|
}
|
|
50
59
|
}
|
|
60
|
+
patchThreeRenderer(renderer) {
|
|
61
|
+
const originalRenderMethod = renderer.render;
|
|
62
|
+
const statsInstance = this;
|
|
63
|
+
renderer.render = function(scene, camera) {
|
|
64
|
+
statsInstance.begin();
|
|
65
|
+
originalRenderMethod.call(this, scene, camera);
|
|
66
|
+
statsInstance.end();
|
|
67
|
+
};
|
|
68
|
+
this.threeRendererPatched = true;
|
|
69
|
+
}
|
|
51
70
|
resizePanel(panel, offset) {
|
|
52
71
|
panel.canvas.style.position = "absolute";
|
|
53
72
|
if (this.minimal) {
|
|
@@ -65,65 +84,98 @@ const _Stats = class _Stats {
|
|
|
65
84
|
}
|
|
66
85
|
addPanel(panel, offset) {
|
|
67
86
|
if (panel.canvas) {
|
|
68
|
-
this.
|
|
87
|
+
this.dom.appendChild(panel.canvas);
|
|
69
88
|
this.resizePanel(panel, offset);
|
|
70
89
|
}
|
|
71
90
|
return panel;
|
|
72
91
|
}
|
|
73
92
|
showPanel(id) {
|
|
74
|
-
for (let i = 0; i < this.
|
|
75
|
-
const child = this.
|
|
93
|
+
for (let i = 0; i < this.dom.children.length; i++) {
|
|
94
|
+
const child = this.dom.children[i];
|
|
76
95
|
child.style.display = i === id ? "block" : "none";
|
|
77
96
|
}
|
|
78
97
|
this.mode = id;
|
|
79
98
|
}
|
|
80
|
-
init(
|
|
81
|
-
if (!
|
|
99
|
+
init(canvasOrGL) {
|
|
100
|
+
if (!canvasOrGL) {
|
|
82
101
|
console.error('Stats: The "canvas" parameter is undefined.');
|
|
83
102
|
return;
|
|
84
103
|
}
|
|
85
|
-
|
|
86
|
-
|
|
104
|
+
if (canvasOrGL.isWebGLRenderer && !this.threeRendererPatched) {
|
|
105
|
+
const canvas = canvasOrGL;
|
|
106
|
+
this.patchThreeRenderer(canvas);
|
|
107
|
+
this.gl = canvas.getContext();
|
|
108
|
+
}
|
|
109
|
+
if (!this.gl && canvasOrGL instanceof WebGL2RenderingContext) {
|
|
110
|
+
this.gl = canvasOrGL;
|
|
111
|
+
} else if (!this.gl && canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
|
|
112
|
+
this.gl = canvasOrGL.getContext("webgl2");
|
|
113
|
+
if (!this.gl) {
|
|
114
|
+
console.error("Stats: Unable to obtain WebGL2 context.");
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
} else if (!this.gl) {
|
|
118
|
+
console.error("Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas.");
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
this.ext = this.gl.getExtension("EXT_disjoint_timer_query_webgl2");
|
|
87
122
|
if (this.ext) {
|
|
88
123
|
this.gpuPanel = this.addPanel(new _Stats.Panel("GPU", "#ff0", "#220"), 2);
|
|
89
124
|
}
|
|
90
125
|
}
|
|
91
126
|
begin() {
|
|
92
|
-
this.
|
|
127
|
+
if (!this.isRunningCPUProfiling) {
|
|
128
|
+
this.beginProfiling("cpu-started");
|
|
129
|
+
}
|
|
93
130
|
if (!this.gl || !this.ext)
|
|
94
131
|
return;
|
|
95
|
-
if (this.
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
if (available && !this.disjoint) {
|
|
99
|
-
this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
|
|
100
|
-
const ms = this.ns * 1e-6;
|
|
101
|
-
if (available || this.disjoint) {
|
|
102
|
-
this.gl.deleteQuery(this.query);
|
|
103
|
-
this.query = null;
|
|
104
|
-
}
|
|
105
|
-
if (available) {
|
|
106
|
-
this.addToAverage(ms, this.averageGpu);
|
|
107
|
-
}
|
|
132
|
+
if (this.gl && this.ext) {
|
|
133
|
+
if (this.activeQuery) {
|
|
134
|
+
this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
|
|
108
135
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
this.query = this.gl.createQuery();
|
|
113
|
-
if (this.query) {
|
|
114
|
-
this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.query);
|
|
136
|
+
this.activeQuery = this.gl.createQuery();
|
|
137
|
+
if (this.activeQuery !== null) {
|
|
138
|
+
this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.activeQuery);
|
|
115
139
|
}
|
|
116
140
|
}
|
|
117
141
|
}
|
|
118
142
|
end() {
|
|
119
|
-
this.
|
|
120
|
-
this.
|
|
121
|
-
if (!this.gl || !this.ext)
|
|
122
|
-
return;
|
|
123
|
-
if (this.queryCreated && this.gl.getQuery(this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY)) {
|
|
143
|
+
this.renderCount++;
|
|
144
|
+
if (this.gl && this.ext && this.activeQuery) {
|
|
124
145
|
this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
|
|
146
|
+
this.gpuQueries.push({ query: this.activeQuery });
|
|
147
|
+
this.activeQuery = null;
|
|
125
148
|
}
|
|
126
149
|
}
|
|
150
|
+
processGpuQueries() {
|
|
151
|
+
if (!this.gl || !this.ext)
|
|
152
|
+
return;
|
|
153
|
+
this.totalGpuDuration = 0;
|
|
154
|
+
this.gpuQueries.forEach((queryInfo, index) => {
|
|
155
|
+
if (this.gl) {
|
|
156
|
+
const available = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT_AVAILABLE);
|
|
157
|
+
const disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
|
|
158
|
+
if (available && !disjoint) {
|
|
159
|
+
const elapsed = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT);
|
|
160
|
+
const duration = elapsed * 1e-6;
|
|
161
|
+
this.totalGpuDuration += duration;
|
|
162
|
+
this.gl.deleteQuery(queryInfo.query);
|
|
163
|
+
this.gpuQueries.splice(index, 1);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
update() {
|
|
169
|
+
this.processGpuQueries();
|
|
170
|
+
this.endProfiling("cpu-started", "cpu-finished", "cpu-duration");
|
|
171
|
+
this.addToAverage(this.totalCpuDuration, this.averageCpu);
|
|
172
|
+
this.addToAverage(this.totalGpuDuration, this.averageGpu);
|
|
173
|
+
this.renderCount = 0;
|
|
174
|
+
this.totalCpuDuration = 0;
|
|
175
|
+
this.totalGpuDuration = 0;
|
|
176
|
+
this.totalFps = 0;
|
|
177
|
+
this.beginTime = this.endInternal();
|
|
178
|
+
}
|
|
127
179
|
endInternal() {
|
|
128
180
|
this.frames++;
|
|
129
181
|
const time = (performance || Date).now();
|
|
@@ -153,13 +205,15 @@ const _Stats = class _Stats {
|
|
|
153
205
|
beginProfiling(marker) {
|
|
154
206
|
if (window.performance) {
|
|
155
207
|
window.performance.mark(marker);
|
|
208
|
+
this.isRunningCPUProfiling = true;
|
|
156
209
|
}
|
|
157
210
|
}
|
|
158
|
-
endProfiling(startMarker, endMarker, measureName
|
|
159
|
-
if (window.performance && endMarker) {
|
|
211
|
+
endProfiling(startMarker, endMarker, measureName) {
|
|
212
|
+
if (window.performance && endMarker && this.isRunningCPUProfiling) {
|
|
160
213
|
window.performance.mark(endMarker);
|
|
161
214
|
const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
|
|
162
|
-
this.
|
|
215
|
+
this.totalCpuDuration += cpuMeasure.duration;
|
|
216
|
+
this.isRunningCPUProfiling = false;
|
|
163
217
|
}
|
|
164
218
|
}
|
|
165
219
|
updatePanel(panel, averageArray) {
|
|
@@ -185,6 +239,13 @@ const _Stats = class _Stats {
|
|
|
185
239
|
}
|
|
186
240
|
}
|
|
187
241
|
}
|
|
242
|
+
get domElement() {
|
|
243
|
+
return this.dom;
|
|
244
|
+
}
|
|
245
|
+
get container() {
|
|
246
|
+
console.warn("Stats: Deprecated! this.container as been replaced to this.dom ");
|
|
247
|
+
return this.dom;
|
|
248
|
+
}
|
|
188
249
|
};
|
|
189
250
|
_Stats.Panel = Panel;
|
|
190
251
|
let Stats = _Stats;
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../lib/main.ts"],"sourcesContent":null,"names":[],"mappings":";AAQA,MAAM,SAAN,MAAM,OAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../lib/main.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
|
package/dist/stats-gl.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
|
|
1
3
|
declare class Panel {
|
|
2
4
|
canvas: HTMLCanvasElement;
|
|
3
5
|
context: CanvasRenderingContext2D | null;
|
|
@@ -22,8 +24,11 @@ interface AverageArray {
|
|
|
22
24
|
graph: number[];
|
|
23
25
|
}
|
|
24
26
|
declare class Stats {
|
|
27
|
+
totalCpuDuration: number;
|
|
28
|
+
totalGpuDuration: number;
|
|
29
|
+
totalFps: number;
|
|
25
30
|
mode: number;
|
|
26
|
-
|
|
31
|
+
dom: HTMLDivElement;
|
|
27
32
|
minimal: boolean;
|
|
28
33
|
horizontal: boolean;
|
|
29
34
|
beginTime: number;
|
|
@@ -33,6 +38,7 @@ declare class Stats {
|
|
|
33
38
|
averageCpu: AverageArray;
|
|
34
39
|
averageGpu: AverageArray;
|
|
35
40
|
queryCreated: boolean;
|
|
41
|
+
isRunningCPUProfiling: boolean;
|
|
36
42
|
fpsPanel: Panel;
|
|
37
43
|
static Panel: typeof Panel;
|
|
38
44
|
msPanel: Panel;
|
|
@@ -40,12 +46,18 @@ declare class Stats {
|
|
|
40
46
|
samplesLog: number;
|
|
41
47
|
samplesGraph: number;
|
|
42
48
|
logsPerSecond: number;
|
|
49
|
+
activeQuery: WebGLQuery | null;
|
|
43
50
|
precision: number;
|
|
44
51
|
gl: WebGL2RenderingContext | null;
|
|
45
52
|
ext: any;
|
|
46
53
|
query: WebGLQuery | null;
|
|
47
54
|
disjoint: any;
|
|
48
55
|
ns: any;
|
|
56
|
+
threeRendererPatched: boolean;
|
|
57
|
+
gpuQueries: {
|
|
58
|
+
query: WebGLQuery;
|
|
59
|
+
}[];
|
|
60
|
+
renderCount: number;
|
|
49
61
|
constructor({ logsPerSecond, samplesLog, samplesGraph, precision, minimal, horizontal, mode }?: {
|
|
50
62
|
logsPerSecond?: number | undefined;
|
|
51
63
|
samplesLog?: number | undefined;
|
|
@@ -55,28 +67,30 @@ declare class Stats {
|
|
|
55
67
|
horizontal?: boolean | undefined;
|
|
56
68
|
mode?: number | undefined;
|
|
57
69
|
});
|
|
70
|
+
patchThreeRenderer(renderer: THREE.WebGLRenderer): void;
|
|
58
71
|
resizePanel(panel: Panel, offset: number): void;
|
|
59
72
|
addPanel(panel: Panel, offset: number): Panel;
|
|
60
73
|
showPanel(id: number): void;
|
|
61
|
-
init(
|
|
74
|
+
init(canvasOrGL: HTMLCanvasElement | OffscreenCanvas | WebGL2RenderingContext): void;
|
|
62
75
|
begin(): void;
|
|
63
76
|
end(): void;
|
|
77
|
+
processGpuQueries(): void;
|
|
78
|
+
update(): void;
|
|
64
79
|
endInternal(): number;
|
|
65
80
|
addToAverage(value: number, averageArray: {
|
|
66
81
|
logs: any;
|
|
67
82
|
graph: any;
|
|
68
83
|
}): void;
|
|
69
84
|
beginProfiling(marker: string): void;
|
|
70
|
-
endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string
|
|
71
|
-
logs: number[];
|
|
72
|
-
graph: number[];
|
|
73
|
-
}): void;
|
|
85
|
+
endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string): void;
|
|
74
86
|
updatePanel(panel: {
|
|
75
87
|
update: any;
|
|
76
88
|
} | null, averageArray: {
|
|
77
89
|
logs: number[];
|
|
78
90
|
graph: number[];
|
|
79
91
|
}): void;
|
|
92
|
+
get domElement(): HTMLDivElement;
|
|
93
|
+
get container(): HTMLDivElement;
|
|
80
94
|
}
|
|
81
95
|
|
|
82
96
|
export { AverageArray, Stats as default };
|
package/lib/main.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import Panel from "./panel";
|
|
2
|
-
|
|
2
|
+
import * as THREE from 'three';
|
|
3
3
|
export interface AverageArray {
|
|
4
4
|
logs: number[];
|
|
5
5
|
graph: number[];
|
|
@@ -7,8 +7,11 @@ export interface AverageArray {
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
class Stats {
|
|
10
|
+
totalCpuDuration: number = 0;
|
|
11
|
+
totalGpuDuration: number = 0;
|
|
12
|
+
totalFps: number = 0;
|
|
10
13
|
mode: number;
|
|
11
|
-
|
|
14
|
+
dom: HTMLDivElement;
|
|
12
15
|
minimal: boolean;
|
|
13
16
|
horizontal: boolean;
|
|
14
17
|
beginTime: number;
|
|
@@ -18,6 +21,7 @@ class Stats {
|
|
|
18
21
|
averageCpu: AverageArray;
|
|
19
22
|
averageGpu: AverageArray;
|
|
20
23
|
queryCreated: boolean;
|
|
24
|
+
isRunningCPUProfiling: boolean;
|
|
21
25
|
fpsPanel: Panel;
|
|
22
26
|
static Panel: typeof Panel = Panel;
|
|
23
27
|
msPanel: Panel;
|
|
@@ -25,35 +29,43 @@ class Stats {
|
|
|
25
29
|
samplesLog: number;
|
|
26
30
|
samplesGraph: number;
|
|
27
31
|
logsPerSecond: number;
|
|
32
|
+
activeQuery: WebGLQuery | null = null;
|
|
33
|
+
|
|
28
34
|
precision: number;
|
|
29
35
|
gl: WebGL2RenderingContext | null;
|
|
30
36
|
ext: any;
|
|
31
37
|
query: WebGLQuery | null;
|
|
32
38
|
disjoint: any;
|
|
33
39
|
ns: any;
|
|
40
|
+
threeRendererPatched: boolean;
|
|
41
|
+
gpuQueries: { query: WebGLQuery }[] = [];
|
|
42
|
+
renderCount: number = 0;
|
|
34
43
|
|
|
35
44
|
constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, horizontal = true, mode = 0 } = {}) {
|
|
36
45
|
|
|
37
46
|
this.mode = mode;
|
|
38
47
|
this.horizontal = horizontal;
|
|
39
|
-
this.
|
|
40
|
-
this.
|
|
48
|
+
this.dom = document.createElement('div');
|
|
49
|
+
this.dom.style.cssText = 'position:fixed;top:0;left:0;opacity:0.9;z-index:10000;';
|
|
41
50
|
|
|
42
51
|
if (minimal) {
|
|
43
52
|
|
|
44
|
-
this.
|
|
53
|
+
this.dom.style.cssText += 'cursor:pointer';
|
|
45
54
|
|
|
46
55
|
}
|
|
47
56
|
|
|
48
57
|
this.gl = null;
|
|
49
58
|
this.query = null;
|
|
50
59
|
|
|
60
|
+
this.isRunningCPUProfiling = false;
|
|
51
61
|
this.minimal = minimal;
|
|
52
|
-
|
|
62
|
+
|
|
53
63
|
this.beginTime = (performance || Date).now();
|
|
54
64
|
this.prevTime = this.beginTime;
|
|
55
65
|
this.prevCpuTime = this.beginTime;
|
|
56
66
|
this.frames = 0;
|
|
67
|
+
this.renderCount = 0;
|
|
68
|
+
this.threeRendererPatched = false;
|
|
57
69
|
this.averageCpu = {
|
|
58
70
|
logs: [],
|
|
59
71
|
graph: []
|
|
@@ -76,10 +88,10 @@ class Stats {
|
|
|
76
88
|
|
|
77
89
|
if (this.minimal) {
|
|
78
90
|
|
|
79
|
-
this.
|
|
91
|
+
this.dom.addEventListener('click', (event) => {
|
|
80
92
|
|
|
81
93
|
event.preventDefault();
|
|
82
|
-
this.showPanel(++this.mode % this.
|
|
94
|
+
this.showPanel(++this.mode % this.dom.children.length);
|
|
83
95
|
|
|
84
96
|
}, false);
|
|
85
97
|
|
|
@@ -99,6 +111,29 @@ class Stats {
|
|
|
99
111
|
})
|
|
100
112
|
}
|
|
101
113
|
|
|
114
|
+
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
patchThreeRenderer(renderer: THREE.WebGLRenderer) {
|
|
118
|
+
|
|
119
|
+
// Store the original render method
|
|
120
|
+
const originalRenderMethod = renderer.render;
|
|
121
|
+
|
|
122
|
+
// Reference to the stats instance
|
|
123
|
+
const statsInstance = this;
|
|
124
|
+
|
|
125
|
+
// Override the render method on the prototype
|
|
126
|
+
renderer.render = function(scene, camera) {
|
|
127
|
+
statsInstance.begin(); // Start tracking for this render call
|
|
128
|
+
|
|
129
|
+
// Call the original render method
|
|
130
|
+
originalRenderMethod.call(this, scene, camera);
|
|
131
|
+
|
|
132
|
+
statsInstance.end(); // End tracking for this render call
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
this.threeRendererPatched = true;
|
|
136
|
+
|
|
102
137
|
}
|
|
103
138
|
|
|
104
139
|
resizePanel(panel: Panel, offset: number) {
|
|
@@ -127,7 +162,7 @@ class Stats {
|
|
|
127
162
|
|
|
128
163
|
if (panel.canvas) {
|
|
129
164
|
|
|
130
|
-
this.
|
|
165
|
+
this.dom.appendChild(panel.canvas);
|
|
131
166
|
|
|
132
167
|
this.resizePanel(panel, offset);
|
|
133
168
|
|
|
@@ -139,8 +174,8 @@ class Stats {
|
|
|
139
174
|
|
|
140
175
|
showPanel(id: number) {
|
|
141
176
|
|
|
142
|
-
for (let i = 0; i < this.
|
|
143
|
-
const child = this.
|
|
177
|
+
for (let i = 0; i < this.dom.children.length; i++) {
|
|
178
|
+
const child = this.dom.children[i] as HTMLElement;
|
|
144
179
|
|
|
145
180
|
child.style.display = i === id ? 'block' : 'none';
|
|
146
181
|
|
|
@@ -150,82 +185,125 @@ class Stats {
|
|
|
150
185
|
|
|
151
186
|
}
|
|
152
187
|
|
|
153
|
-
init(
|
|
154
|
-
|
|
155
|
-
if (!canvas) {
|
|
188
|
+
init(canvasOrGL: HTMLCanvasElement | OffscreenCanvas | WebGL2RenderingContext) {
|
|
189
|
+
if (!canvasOrGL) {
|
|
156
190
|
console.error('Stats: The "canvas" parameter is undefined.');
|
|
157
191
|
return;
|
|
158
192
|
}
|
|
159
|
-
this.gl = canvas.getContext('webgl2');
|
|
160
|
-
this.ext = this.gl ? this.gl.getExtension('EXT_disjoint_timer_query_webgl2') : null;
|
|
161
|
-
if (this.ext) {
|
|
162
193
|
|
|
163
|
-
this.gpuPanel = this.addPanel(new Stats.Panel('GPU', '#ff0', '#220'), 2);
|
|
164
194
|
|
|
195
|
+
// if ((canvasOrGL as any).isWebGPURenderer && !this.threeRendererPatched) {
|
|
196
|
+
// TODO Color GPU Analytic in another color than yellow to know webgpu or webgl context (blue)
|
|
197
|
+
// const canvas: any = canvasOrGL
|
|
198
|
+
// this.patchThreeRenderer(canvas as any);
|
|
199
|
+
// this.gl = canvas.getContext();
|
|
200
|
+
// } else
|
|
201
|
+
if ((canvasOrGL as any).isWebGLRenderer && !this.threeRendererPatched) {
|
|
202
|
+
const canvas: any = canvasOrGL
|
|
203
|
+
this.patchThreeRenderer(canvas as any);
|
|
204
|
+
this.gl = canvas.getContext();
|
|
165
205
|
}
|
|
166
206
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
this.beginProfiling('cpu-started');
|
|
172
|
-
if (!this.gl || !this.ext) return;
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
if (this.query) {
|
|
176
|
-
|
|
177
|
-
const available = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT_AVAILABLE);
|
|
178
|
-
this.disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
|
|
179
|
-
|
|
180
|
-
if (available && !this.disjoint) {
|
|
181
|
-
|
|
182
|
-
this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
|
|
183
|
-
const ms = this.ns * 1e-6;
|
|
184
|
-
|
|
185
|
-
if (available || this.disjoint) {
|
|
207
|
+
// Check if canvasOrGL is already a WebGL2RenderingContext
|
|
208
|
+
if (!this.gl && canvasOrGL instanceof WebGL2RenderingContext) {
|
|
209
|
+
this.gl = canvasOrGL;
|
|
210
|
+
}
|
|
186
211
|
|
|
187
|
-
|
|
188
|
-
|
|
212
|
+
// Handle HTMLCanvasElement and OffscreenCanvas
|
|
213
|
+
else if (!this.gl && canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
|
|
214
|
+
this.gl = canvasOrGL.getContext('webgl2') as WebGL2RenderingContext;
|
|
215
|
+
if (!this.gl) {
|
|
216
|
+
console.error('Stats: Unable to obtain WebGL2 context.');
|
|
217
|
+
return;
|
|
218
|
+
}
|
|
219
|
+
} else if (!this.gl) {
|
|
220
|
+
console.error('Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas.');
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
189
223
|
|
|
190
|
-
|
|
224
|
+
// Get the extension
|
|
225
|
+
this.ext = this.gl.getExtension('EXT_disjoint_timer_query_webgl2');
|
|
226
|
+
if (this.ext) {
|
|
227
|
+
this.gpuPanel = this.addPanel(new Stats.Panel('GPU', '#ff0', '#220'), 2);
|
|
228
|
+
}
|
|
229
|
+
}
|
|
191
230
|
|
|
192
|
-
if (available) {
|
|
193
231
|
|
|
194
|
-
|
|
232
|
+
begin() {
|
|
195
233
|
|
|
196
|
-
|
|
234
|
+
if (!this.isRunningCPUProfiling) {
|
|
235
|
+
this.beginProfiling('cpu-started');
|
|
236
|
+
}
|
|
197
237
|
|
|
238
|
+
if (!this.gl || !this.ext) return;
|
|
239
|
+
|
|
240
|
+
if (this.gl && this.ext) {
|
|
241
|
+
if (this.activeQuery) {
|
|
242
|
+
// End the previous query if it's still active
|
|
243
|
+
this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
|
|
198
244
|
}
|
|
199
245
|
|
|
246
|
+
this.activeQuery = this.gl.createQuery();
|
|
247
|
+
if (this.activeQuery !== null) {
|
|
248
|
+
this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.activeQuery);
|
|
249
|
+
}
|
|
200
250
|
}
|
|
251
|
+
}
|
|
201
252
|
|
|
202
|
-
if (!this.query) {
|
|
203
253
|
|
|
204
|
-
this.queryCreated = true;
|
|
205
|
-
this.query = this.gl.createQuery();
|
|
206
254
|
|
|
207
|
-
|
|
208
|
-
this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.query);
|
|
209
|
-
}
|
|
255
|
+
end() {
|
|
210
256
|
|
|
257
|
+
// Increase render count
|
|
258
|
+
this.renderCount++;
|
|
259
|
+
|
|
260
|
+
if (this.gl && this.ext && this.activeQuery) {
|
|
261
|
+
this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
|
|
262
|
+
// Add the active query to the gpuQueries array and reset it
|
|
263
|
+
this.gpuQueries.push({ query: this.activeQuery });
|
|
264
|
+
this.activeQuery = null;
|
|
211
265
|
}
|
|
212
266
|
|
|
213
267
|
}
|
|
214
268
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
269
|
+
processGpuQueries() {
|
|
270
|
+
if (!this.gl || !this.ext) return;
|
|
271
|
+
|
|
272
|
+
this.totalGpuDuration = 0;
|
|
273
|
+
|
|
274
|
+
this.gpuQueries.forEach((queryInfo, index) => {
|
|
275
|
+
if (this.gl) {
|
|
276
|
+
const available = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT_AVAILABLE);
|
|
277
|
+
const disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
|
|
278
|
+
|
|
279
|
+
if (available && !disjoint) {
|
|
280
|
+
const elapsed = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT);
|
|
281
|
+
const duration = elapsed * 1e-6; // Convert nanoseconds to milliseconds
|
|
282
|
+
this.totalGpuDuration += duration;
|
|
283
|
+
this.gl.deleteQuery(queryInfo.query);
|
|
284
|
+
this.gpuQueries.splice(index, 1); // Remove the processed query
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
});
|
|
218
288
|
|
|
219
|
-
|
|
289
|
+
}
|
|
220
290
|
|
|
221
|
-
|
|
291
|
+
update() {
|
|
292
|
+
|
|
293
|
+
this.processGpuQueries();
|
|
294
|
+
this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration');
|
|
222
295
|
|
|
296
|
+
// Calculate the total duration of CPU and GPU work for this frame
|
|
297
|
+
this.addToAverage(this.totalCpuDuration , this.averageCpu);
|
|
298
|
+
this.addToAverage(this.totalGpuDuration, this.averageGpu);
|
|
223
299
|
|
|
224
|
-
|
|
300
|
+
this.renderCount = 0;
|
|
301
|
+
this.totalCpuDuration = 0;
|
|
302
|
+
this.totalGpuDuration = 0;
|
|
303
|
+
this.totalFps = 0;
|
|
225
304
|
|
|
226
|
-
|
|
305
|
+
this.beginTime = this.endInternal()
|
|
227
306
|
|
|
228
|
-
}
|
|
229
307
|
|
|
230
308
|
|
|
231
309
|
}
|
|
@@ -280,18 +358,20 @@ class Stats {
|
|
|
280
358
|
if (window.performance) {
|
|
281
359
|
|
|
282
360
|
window.performance.mark(marker);
|
|
361
|
+
this.isRunningCPUProfiling = true
|
|
283
362
|
|
|
284
363
|
}
|
|
285
364
|
|
|
286
365
|
}
|
|
287
366
|
|
|
288
|
-
endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string
|
|
367
|
+
endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string) {
|
|
289
368
|
|
|
290
|
-
if (window.performance && endMarker) {
|
|
369
|
+
if (window.performance && endMarker && this.isRunningCPUProfiling) {
|
|
291
370
|
|
|
292
371
|
window.performance.mark(endMarker);
|
|
293
372
|
const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
|
|
294
|
-
this.
|
|
373
|
+
this.totalCpuDuration += cpuMeasure.duration;
|
|
374
|
+
this.isRunningCPUProfiling = false
|
|
295
375
|
|
|
296
376
|
}
|
|
297
377
|
|
|
@@ -333,6 +413,18 @@ class Stats {
|
|
|
333
413
|
}
|
|
334
414
|
}
|
|
335
415
|
|
|
416
|
+
get domElement() {
|
|
417
|
+
// patch for some use case in threejs
|
|
418
|
+
return this.dom;
|
|
419
|
+
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
get container() { // @deprecated
|
|
423
|
+
|
|
424
|
+
console.warn('Stats: Deprecated! this.container as been replaced to this.dom ')
|
|
425
|
+
return this.dom;
|
|
426
|
+
|
|
427
|
+
}
|
|
336
428
|
|
|
337
429
|
}
|
|
338
430
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "stats-gl",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"author": "Renaud ROHLINGER (https://github.com/RenaudRohlinger)",
|
|
6
6
|
"homepage": "https://github.com/RenaudRohlinger/stats-gl",
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
"preview": "vite preview"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
+
"@types/three": "^0.159.0",
|
|
31
32
|
"fs-extra": "^11.1.1",
|
|
32
33
|
"path": "^0.12.7",
|
|
33
34
|
"rollup": "^3.26.3",
|