stats-gl 1.0.5 → 1.0.6
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 +15 -1
- package/dist/main.cjs +4 -4
- package/dist/main.cjs.map +1 -1
- package/dist/main.js +4 -4
- package/dist/main.js.map +1 -1
- package/dist/stats-gl.d.ts +0 -1
- package/lib/main.ts +74 -74
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -85,7 +85,7 @@ scene.onAfterRender = function () {
|
|
|
85
85
|
|
|
86
86
|
};
|
|
87
87
|
```
|
|
88
|
-
Quick start with [@react-three/fiber](https://github.com/pmndrs/fiber). A `<StatsGl />` component is
|
|
88
|
+
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
89
|
```jsx
|
|
90
90
|
import { Canvas } from '@react-three/fiber'
|
|
91
91
|
import { StatsGl } from '@react-three/drei'
|
|
@@ -97,6 +97,20 @@ const Scene = () => (
|
|
|
97
97
|
)
|
|
98
98
|
```
|
|
99
99
|
|
|
100
|
+
Quick start with [Tresjs](https://tresjs.org/) for Vue developers. A `<StatsGl />` component is available through [cientos](https://cientos.tresjs.org/guide/misc/stats-gl.html):
|
|
101
|
+
|
|
102
|
+
```vue
|
|
103
|
+
<script setup lang="ts">
|
|
104
|
+
import { TresCanvas } from '@tresjs/core'
|
|
105
|
+
import { StatsGl } from '@tresjs/cientos'
|
|
106
|
+
</script>
|
|
107
|
+
|
|
108
|
+
<template>
|
|
109
|
+
<TresCanvas>
|
|
110
|
+
<StatsGl />
|
|
111
|
+
</TresCanvas>
|
|
112
|
+
</template>
|
|
113
|
+
```
|
|
100
114
|
## ⚙️ Parameters
|
|
101
115
|
The constructor for the Stats class accepts an options object with the following properties:
|
|
102
116
|
|
package/dist/main.cjs
CHANGED
|
@@ -9,7 +9,6 @@ const _Stats = class _Stats {
|
|
|
9
9
|
if (minimal) {
|
|
10
10
|
this.container.style.cssText += "cursor:pointer";
|
|
11
11
|
}
|
|
12
|
-
this.canvasGpu = null;
|
|
13
12
|
this.gl = null;
|
|
14
13
|
this.query = null;
|
|
15
14
|
this.minimal = minimal;
|
|
@@ -80,10 +79,11 @@ const _Stats = class _Stats {
|
|
|
80
79
|
this.mode = id;
|
|
81
80
|
}
|
|
82
81
|
init(canvas) {
|
|
83
|
-
|
|
84
|
-
|
|
82
|
+
if (!canvas) {
|
|
83
|
+
console.error('Stats: The "canvas" parameter is undefined.');
|
|
85
84
|
return;
|
|
86
|
-
|
|
85
|
+
}
|
|
86
|
+
this.gl = canvas.getContext("webgl2");
|
|
87
87
|
this.ext = this.gl ? this.gl.getExtension("EXT_disjoint_timer_query_webgl2") : null;
|
|
88
88
|
if (this.ext) {
|
|
89
89
|
this.gpuPanel = this.addPanel(new _Stats.Panel("GPU", "#ff0", "#220"), 2);
|
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
|
@@ -8,7 +8,6 @@ const _Stats = class _Stats {
|
|
|
8
8
|
if (minimal) {
|
|
9
9
|
this.container.style.cssText += "cursor:pointer";
|
|
10
10
|
}
|
|
11
|
-
this.canvasGpu = null;
|
|
12
11
|
this.gl = null;
|
|
13
12
|
this.query = null;
|
|
14
13
|
this.minimal = minimal;
|
|
@@ -79,10 +78,11 @@ const _Stats = class _Stats {
|
|
|
79
78
|
this.mode = id;
|
|
80
79
|
}
|
|
81
80
|
init(canvas) {
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
if (!canvas) {
|
|
82
|
+
console.error('Stats: The "canvas" parameter is undefined.');
|
|
84
83
|
return;
|
|
85
|
-
|
|
84
|
+
}
|
|
85
|
+
this.gl = canvas.getContext("webgl2");
|
|
86
86
|
this.ext = this.gl ? this.gl.getExtension("EXT_disjoint_timer_query_webgl2") : null;
|
|
87
87
|
if (this.ext) {
|
|
88
88
|
this.gpuPanel = this.addPanel(new _Stats.Panel("GPU", "#ff0", "#220"), 2);
|
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
package/lib/main.ts
CHANGED
|
@@ -26,33 +26,31 @@ class Stats {
|
|
|
26
26
|
samplesGraph: number;
|
|
27
27
|
logsPerSecond: number;
|
|
28
28
|
precision: number;
|
|
29
|
-
canvasGpu: HTMLCanvasElement | null;
|
|
30
29
|
gl: WebGL2RenderingContext | null;
|
|
31
30
|
ext: any;
|
|
32
31
|
query: WebGLQuery | null;
|
|
33
32
|
disjoint: any;
|
|
34
33
|
ns: any;
|
|
35
34
|
|
|
36
|
-
constructor(
|
|
35
|
+
constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, horizontal = true, mode = 0 } = {}) {
|
|
37
36
|
|
|
38
37
|
this.mode = mode;
|
|
39
38
|
this.horizontal = horizontal;
|
|
40
|
-
this.container = document.createElement(
|
|
39
|
+
this.container = document.createElement('div');
|
|
41
40
|
this.container.style.cssText = 'position:fixed;top:0;left:0;opacity:0.9;z-index:10000;';
|
|
42
41
|
|
|
43
|
-
if (
|
|
42
|
+
if (minimal) {
|
|
44
43
|
|
|
45
44
|
this.container.style.cssText += 'cursor:pointer';
|
|
46
45
|
|
|
47
46
|
}
|
|
48
47
|
|
|
49
|
-
this.canvasGpu = null;
|
|
50
48
|
this.gl = null;
|
|
51
|
-
this.query =
|
|
49
|
+
this.query = null;
|
|
52
50
|
|
|
53
51
|
this.minimal = minimal;
|
|
54
52
|
|
|
55
|
-
this.beginTime = (
|
|
53
|
+
this.beginTime = (performance || Date).now();
|
|
56
54
|
this.prevTime = this.beginTime;
|
|
57
55
|
this.prevCpuTime = this.beginTime;
|
|
58
56
|
this.frames = 0;
|
|
@@ -67,8 +65,8 @@ class Stats {
|
|
|
67
65
|
|
|
68
66
|
this.queryCreated = false;
|
|
69
67
|
|
|
70
|
-
this.fpsPanel = this.addPanel(
|
|
71
|
-
this.msPanel = this.addPanel(
|
|
68
|
+
this.fpsPanel = this.addPanel(new Stats.Panel('FPS', '#0ff', '#002'), 0);
|
|
69
|
+
this.msPanel = this.addPanel(new Stats.Panel('CPU', '#0f0', '#020'), 1);
|
|
72
70
|
this.gpuPanel = null;
|
|
73
71
|
|
|
74
72
|
this.samplesLog = samplesLog;
|
|
@@ -76,38 +74,38 @@ class Stats {
|
|
|
76
74
|
this.precision = precision;
|
|
77
75
|
this.logsPerSecond = logsPerSecond;
|
|
78
76
|
|
|
79
|
-
if (
|
|
77
|
+
if (this.minimal) {
|
|
80
78
|
|
|
81
|
-
this.container.addEventListener(
|
|
79
|
+
this.container.addEventListener('click', (event) => {
|
|
82
80
|
|
|
83
81
|
event.preventDefault();
|
|
84
|
-
this.showPanel(
|
|
82
|
+
this.showPanel(++this.mode % this.container.children.length);
|
|
85
83
|
|
|
86
|
-
}, false
|
|
84
|
+
}, false);
|
|
87
85
|
|
|
88
86
|
this.mode = mode;
|
|
89
|
-
this.showPanel(
|
|
87
|
+
this.showPanel(this.mode);
|
|
90
88
|
|
|
91
89
|
} else {
|
|
92
90
|
|
|
93
|
-
window.addEventListener('resize', () =>{
|
|
94
|
-
|
|
95
|
-
this.resizePanel(
|
|
96
|
-
this.resizePanel(
|
|
97
|
-
|
|
91
|
+
window.addEventListener('resize', () => {
|
|
92
|
+
|
|
93
|
+
this.resizePanel(this.fpsPanel, 0);
|
|
94
|
+
this.resizePanel(this.msPanel, 1);
|
|
95
|
+
|
|
98
96
|
if (this.gpuPanel) {
|
|
99
|
-
this.resizePanel(
|
|
97
|
+
this.resizePanel(this.gpuPanel, 2);
|
|
100
98
|
}
|
|
101
99
|
})
|
|
102
100
|
}
|
|
103
101
|
|
|
104
102
|
}
|
|
105
103
|
|
|
106
|
-
resizePanel(
|
|
104
|
+
resizePanel(panel: Panel, offset: number) {
|
|
107
105
|
|
|
108
106
|
panel.canvas.style.position = 'absolute';
|
|
109
107
|
|
|
110
|
-
if (
|
|
108
|
+
if (this.minimal) {
|
|
111
109
|
|
|
112
110
|
panel.canvas.style.display = 'none';
|
|
113
111
|
|
|
@@ -119,18 +117,18 @@ class Stats {
|
|
|
119
117
|
panel.canvas.style.left = offset * panel.WIDTH / panel.PR + 'px';
|
|
120
118
|
} else {
|
|
121
119
|
panel.canvas.style.left = '0px';
|
|
122
|
-
panel.canvas.style.top = offset * panel.HEIGHT / panel.PR
|
|
120
|
+
panel.canvas.style.top = offset * panel.HEIGHT / panel.PR + 'px';
|
|
123
121
|
|
|
124
122
|
}
|
|
125
123
|
}
|
|
126
124
|
}
|
|
127
|
-
|
|
125
|
+
|
|
128
126
|
addPanel(panel: Panel, offset: number) {
|
|
129
127
|
|
|
130
|
-
if(panel.canvas) {
|
|
128
|
+
if (panel.canvas) {
|
|
131
129
|
|
|
132
130
|
this.container.appendChild(panel.canvas);
|
|
133
|
-
|
|
131
|
+
|
|
134
132
|
this.resizePanel(panel, offset);
|
|
135
133
|
|
|
136
134
|
}
|
|
@@ -139,9 +137,9 @@ class Stats {
|
|
|
139
137
|
|
|
140
138
|
}
|
|
141
139
|
|
|
142
|
-
showPanel(
|
|
140
|
+
showPanel(id: number) {
|
|
143
141
|
|
|
144
|
-
for (
|
|
142
|
+
for (let i = 0; i < this.container.children.length; i++) {
|
|
145
143
|
const child = this.container.children[i] as HTMLElement;
|
|
146
144
|
|
|
147
145
|
child.style.display = i === id ? 'block' : 'none';
|
|
@@ -152,15 +150,17 @@ class Stats {
|
|
|
152
150
|
|
|
153
151
|
}
|
|
154
152
|
|
|
155
|
-
init(
|
|
153
|
+
init(canvas: any) {
|
|
156
154
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
155
|
+
if (!canvas) {
|
|
156
|
+
console.error('Stats: The "canvas" parameter is undefined.');
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
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
162
|
|
|
163
|
-
this.gpuPanel = this.addPanel(
|
|
163
|
+
this.gpuPanel = this.addPanel(new Stats.Panel('GPU', '#ff0', '#220'), 2);
|
|
164
164
|
|
|
165
165
|
}
|
|
166
166
|
|
|
@@ -168,30 +168,30 @@ class Stats {
|
|
|
168
168
|
|
|
169
169
|
begin() {
|
|
170
170
|
|
|
171
|
-
this.beginProfiling(
|
|
172
|
-
if (
|
|
171
|
+
this.beginProfiling('cpu-started');
|
|
172
|
+
if (!this.gl || !this.ext) return;
|
|
173
173
|
|
|
174
174
|
|
|
175
|
-
if (
|
|
175
|
+
if (this.query) {
|
|
176
176
|
|
|
177
|
-
const available = this.gl.getQueryParameter(
|
|
178
|
-
this.disjoint = this.gl.getParameter(
|
|
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
179
|
|
|
180
|
-
if (
|
|
180
|
+
if (available && !this.disjoint) {
|
|
181
181
|
|
|
182
|
-
this.ns = this.gl.getQueryParameter(
|
|
182
|
+
this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
|
|
183
183
|
const ms = this.ns * 1e-6;
|
|
184
184
|
|
|
185
|
-
if (
|
|
185
|
+
if (available || this.disjoint) {
|
|
186
186
|
|
|
187
|
-
this.gl.deleteQuery(
|
|
187
|
+
this.gl.deleteQuery(this.query);
|
|
188
188
|
this.query = null;
|
|
189
189
|
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
if (
|
|
192
|
+
if (available) {
|
|
193
193
|
|
|
194
|
-
this.addToAverage(
|
|
194
|
+
this.addToAverage(ms, this.averageGpu);
|
|
195
195
|
|
|
196
196
|
}
|
|
197
197
|
|
|
@@ -199,13 +199,13 @@ class Stats {
|
|
|
199
199
|
|
|
200
200
|
}
|
|
201
201
|
|
|
202
|
-
if (
|
|
202
|
+
if (!this.query) {
|
|
203
203
|
|
|
204
204
|
this.queryCreated = true;
|
|
205
205
|
this.query = this.gl.createQuery();
|
|
206
206
|
|
|
207
|
-
if (
|
|
208
|
-
this.gl.beginQuery(
|
|
207
|
+
if (this.query) {
|
|
208
|
+
this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.query);
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
}
|
|
@@ -216,14 +216,14 @@ class Stats {
|
|
|
216
216
|
|
|
217
217
|
this.beginTime = this.endInternal()
|
|
218
218
|
|
|
219
|
-
this.endProfiling(
|
|
219
|
+
this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration', this.averageCpu);
|
|
220
220
|
|
|
221
|
-
if (
|
|
221
|
+
if (!this.gl || !this.ext) return;
|
|
222
222
|
|
|
223
223
|
|
|
224
|
-
if (
|
|
224
|
+
if (this.queryCreated && this.gl.getQuery(this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY)) {
|
|
225
225
|
|
|
226
|
-
this.gl.endQuery(
|
|
226
|
+
this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
|
|
227
227
|
|
|
228
228
|
}
|
|
229
229
|
|
|
@@ -232,19 +232,19 @@ class Stats {
|
|
|
232
232
|
|
|
233
233
|
endInternal() {
|
|
234
234
|
|
|
235
|
-
this.frames
|
|
236
|
-
const time = (
|
|
235
|
+
this.frames++;
|
|
236
|
+
const time = (performance || Date).now();
|
|
237
237
|
|
|
238
238
|
if (time >= this.prevCpuTime + 1000 / this.logsPerSecond) {
|
|
239
|
-
this.updatePanel(
|
|
240
|
-
this.updatePanel(
|
|
239
|
+
this.updatePanel(this.msPanel, this.averageCpu);
|
|
240
|
+
this.updatePanel(this.gpuPanel, this.averageGpu);
|
|
241
241
|
|
|
242
242
|
this.prevCpuTime = time;
|
|
243
243
|
}
|
|
244
244
|
|
|
245
|
-
if (
|
|
245
|
+
if (time >= this.prevTime + 1000) {
|
|
246
246
|
|
|
247
|
-
const fps = (
|
|
247
|
+
const fps = (this.frames * 1000) / (time - this.prevTime);
|
|
248
248
|
|
|
249
249
|
this.fpsPanel.update(fps, fps, 100, 100, 0);
|
|
250
250
|
|
|
@@ -257,17 +257,17 @@ class Stats {
|
|
|
257
257
|
|
|
258
258
|
}
|
|
259
259
|
|
|
260
|
-
addToAverage(
|
|
260
|
+
addToAverage(value: number, averageArray: { logs: any; graph: any; }) {
|
|
261
261
|
|
|
262
|
-
averageArray.logs.push(
|
|
263
|
-
if (
|
|
262
|
+
averageArray.logs.push(value);
|
|
263
|
+
if (averageArray.logs.length > this.samplesLog) {
|
|
264
264
|
|
|
265
265
|
averageArray.logs.shift();
|
|
266
266
|
|
|
267
267
|
}
|
|
268
268
|
|
|
269
|
-
averageArray.graph.push(
|
|
270
|
-
if (
|
|
269
|
+
averageArray.graph.push(value);
|
|
270
|
+
if (averageArray.graph.length > this.samplesGraph) {
|
|
271
271
|
|
|
272
272
|
averageArray.graph.shift();
|
|
273
273
|
|
|
@@ -275,29 +275,29 @@ class Stats {
|
|
|
275
275
|
|
|
276
276
|
}
|
|
277
277
|
|
|
278
|
-
beginProfiling(
|
|
278
|
+
beginProfiling(marker: string) {
|
|
279
279
|
|
|
280
|
-
if (
|
|
280
|
+
if (window.performance) {
|
|
281
281
|
|
|
282
|
-
window.performance.mark(
|
|
282
|
+
window.performance.mark(marker);
|
|
283
283
|
|
|
284
284
|
}
|
|
285
285
|
|
|
286
286
|
}
|
|
287
287
|
|
|
288
|
-
endProfiling(
|
|
288
|
+
endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string, averageArray: { logs: number[], graph: number[] }) {
|
|
289
289
|
|
|
290
|
-
if (
|
|
290
|
+
if (window.performance && endMarker) {
|
|
291
291
|
|
|
292
|
-
window.performance.mark(
|
|
293
|
-
const cpuMeasure = performance.measure(
|
|
294
|
-
this.addToAverage(
|
|
292
|
+
window.performance.mark(endMarker);
|
|
293
|
+
const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
|
|
294
|
+
this.addToAverage(cpuMeasure.duration, averageArray);
|
|
295
295
|
|
|
296
296
|
}
|
|
297
297
|
|
|
298
298
|
}
|
|
299
299
|
|
|
300
|
-
updatePanel(panel: { update: any; } | null, averageArray: {logs: number[], graph: number[]}) {
|
|
300
|
+
updatePanel(panel: { update: any; } | null, averageArray: { logs: number[], graph: number[] }) {
|
|
301
301
|
|
|
302
302
|
if (averageArray.logs.length > 0) {
|
|
303
303
|
|
|
@@ -327,7 +327,7 @@ class Stats {
|
|
|
327
327
|
}
|
|
328
328
|
|
|
329
329
|
if (panel) {
|
|
330
|
-
panel.update(sumLog / Math.min(averageArray.logs.length,this.samplesLog), sumGraph / Math.min(averageArray.graph.length,this.samplesGraph), max, maxGraph, this.precision);
|
|
330
|
+
panel.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, this.precision);
|
|
331
331
|
}
|
|
332
332
|
|
|
333
333
|
}
|