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 CHANGED
@@ -2,7 +2,7 @@
2
2
  [![Version](https://img.shields.io/npm/v/stats-gl?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/stats-gl)
3
3
  [![Version](https://img.shields.io/npm/dw/stats-gl?style=flat&colorA=000000&colorB=000000)](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: GPU Monitoring will be available on Safari after the v17 release.
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("COM", "#e1e1e1", "#212121"), 3);
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("COM", "#e1e1e1", "#212121"), 3);
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('COM', '#e1e1e1', '#212121'), 3);
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.6",
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.162.0",
38
+ "three": "^0.163.0",
37
39
  "typescript": "^5.0.2",
38
40
  "vite": "^4.5.2"
39
41
  }