stats-gl 2.2.6 → 2.2.8
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 +5 -5
- package/dist/main.cjs +1 -1
- package/dist/main.js +1 -1
- package/lib/main.ts +1 -1
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
[](https://www.npmjs.com/package/stats-gl)
|
|
3
3
|
[](https://www.npmjs.com/package/stats-gl)
|
|
4
4
|
|
|
5
|
-
WebGL Performance Monitor tool.
|
|
5
|
+
WebGL/WebGPU Performance Monitor tool.
|
|
6
6
|
|
|
7
7
|
🔗 [Live Demo](https://stats.renaudrohlinger.com/)
|
|
8
8
|
|
|
@@ -10,11 +10,11 @@ WebGL Performance Monitor tool.
|
|
|
10
10
|
https://github.com/RenaudRohlinger/stats-gl/assets/15867665/3fdafff4-1357-4872-9baf-0629dbaf9d8c
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
### ❗📢 Note:
|
|
13
|
+
### ❗📢 Note: To support GPU monitoring on Safari you need to enable Timer Queries under WebKit Feature Flags > WebGL Timer Queries
|
|
14
14
|
|
|
15
15
|
## 📚 Description
|
|
16
16
|
|
|
17
|
-
`stats-gl` is a comprehensive tool to monitor WebGL performance. The Stats class provides methods to create performance panels, log performance metrics, and manage the display and layout of these panels. The performance metrics logged include FPS, CPU, and GPU. The GPU logging is available only if the user's browser supports the WebGL 2.0 `EXT_disjoint_timer_query_webgl2` extension.
|
|
17
|
+
`stats-gl` is a comprehensive tool to monitor WebGL performance. The Stats class provides methods to create performance panels, log performance metrics, and manage the display and layout of these panels. The performance metrics logged include FPS, CPU, and GPU. The GPU logging is available only if the user's browser supports the WebGL 2.0 `EXT_disjoint_timer_query_webgl2` extension or WebGPU Timestamp Queries.
|
|
18
18
|
|
|
19
19
|
In addition to logging real-time performance data, the class also provides methods to calculate and display average performance metrics over a specified interval.
|
|
20
20
|
|
|
@@ -73,7 +73,7 @@ const container = document.getElementById( 'container' );
|
|
|
73
73
|
const stats = new Stats();
|
|
74
74
|
container.appendChild( stats.dom );
|
|
75
75
|
|
|
76
|
-
const renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
76
|
+
const renderer = new THREE.WebGLRenderer( { antialias: true } ); // or WebGPURenderer
|
|
77
77
|
container.appendChild( renderer.domElement );
|
|
78
78
|
|
|
79
79
|
const scene = new THREE.Scene();
|
|
@@ -84,7 +84,7 @@ function animate() {
|
|
|
84
84
|
|
|
85
85
|
requestAnimationFrame( animate );
|
|
86
86
|
|
|
87
|
-
render();
|
|
87
|
+
render(); // needs async methods in WebGPU (renderAsync)
|
|
88
88
|
stats.update();
|
|
89
89
|
|
|
90
90
|
}
|
package/dist/main.cjs
CHANGED
|
@@ -122,7 +122,7 @@ const _Stats = class _Stats2 {
|
|
|
122
122
|
canvasOrGL.backend.trackTimestamp = true;
|
|
123
123
|
if (await canvasOrGL.hasFeatureAsync("timestamp-query")) {
|
|
124
124
|
this.gpuPanel = this.addPanel(new _Stats2.Panel("GPU", "#ff0", "#220"), 2);
|
|
125
|
-
this.gpuPanelCompute = this.addPanel(new _Stats2.Panel("
|
|
125
|
+
this.gpuPanelCompute = this.addPanel(new _Stats2.Panel("CPT", "#e1e1e1", "#212121"), 3);
|
|
126
126
|
this.info = canvasOrGL.info;
|
|
127
127
|
}
|
|
128
128
|
return;
|
package/dist/main.js
CHANGED
|
@@ -121,7 +121,7 @@ const _Stats = class _Stats2 {
|
|
|
121
121
|
canvasOrGL.backend.trackTimestamp = true;
|
|
122
122
|
if (await canvasOrGL.hasFeatureAsync("timestamp-query")) {
|
|
123
123
|
this.gpuPanel = this.addPanel(new _Stats2.Panel("GPU", "#ff0", "#220"), 2);
|
|
124
|
-
this.gpuPanelCompute = this.addPanel(new _Stats2.Panel("
|
|
124
|
+
this.gpuPanelCompute = this.addPanel(new _Stats2.Panel("CPT", "#e1e1e1", "#212121"), 3);
|
|
125
125
|
this.info = canvasOrGL.info;
|
|
126
126
|
}
|
|
127
127
|
return;
|
package/lib/main.ts
CHANGED
|
@@ -227,7 +227,7 @@ class Stats {
|
|
|
227
227
|
|
|
228
228
|
if (await canvasOrGL.hasFeatureAsync('timestamp-query')) {
|
|
229
229
|
this.gpuPanel = this.addPanel(new Stats.Panel('GPU', '#ff0', '#220'), 2);
|
|
230
|
-
this.gpuPanelCompute = this.addPanel(new Stats.Panel('
|
|
230
|
+
this.gpuPanelCompute = this.addPanel(new Stats.Panel('CPT', '#e1e1e1', '#212121'), 3);
|
|
231
231
|
this.info = canvasOrGL.info
|
|
232
232
|
}
|
|
233
233
|
return;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "stats-gl",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"author": "Renaud ROHLINGER (https://github.com/RenaudRohlinger)",
|
|
6
6
|
"homepage": "https://github.com/RenaudRohlinger/stats-gl",
|
|
@@ -27,13 +27,15 @@
|
|
|
27
27
|
"build": "tsc && vite build && rollup -c && node ./scripts/copyBuild.js",
|
|
28
28
|
"preview": "vite preview"
|
|
29
29
|
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"@types/three": "^0.163.0"
|
|
32
|
+
},
|
|
30
33
|
"devDependencies": {
|
|
31
|
-
"@types/three": "^0.162.0",
|
|
32
34
|
"fs-extra": "^11.1.1",
|
|
33
35
|
"path": "^0.12.7",
|
|
34
36
|
"rollup": "^4.12.1",
|
|
35
37
|
"rollup-plugin-dts": "^5.3.0",
|
|
36
|
-
"three": "^0.
|
|
38
|
+
"three": "^0.163.0",
|
|
37
39
|
"typescript": "^5.0.2",
|
|
38
40
|
"vite": "^4.5.2"
|
|
39
41
|
}
|