stats-gl 1.0.7 → 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.
Files changed (8) hide show
  1. package/README.md +16 -12
  2. package/dist/main.cjs +89 -39
  3. package/dist/main.cjs.map +1 -1
  4. package/dist/main.js +89 -39
  5. package/dist/main.js.map +1 -1
  6. package/dist/stats-gl.d.ts +19 -5
  7. package/lib/main.ts +135 -57
  8. 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.container );
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.container );
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.domElement );
75
-
76
- scene.onBeforeRender = function () {
77
-
78
- stats.begin();
81
+ stats.init( renderer );
79
82
 
80
- };
83
+ function animate() {
81
84
 
82
- scene.onAfterRender = function () {
85
+ requestAnimationFrame( animate );
83
86
 
84
- stats.end();
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.container = document.createElement("div");
8
- this.container.style.cssText = "position:fixed;top:0;left:0;opacity:0.9;z-index:10000;";
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.container.style.cssText += "cursor:pointer";
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.container.addEventListener("click", (event) => {
45
+ this.dom.addEventListener("click", (event) => {
37
46
  event.preventDefault();
38
- this.showPanel(++this.mode % this.container.children.length);
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,14 +85,14 @@ const _Stats = class _Stats {
66
85
  }
67
86
  addPanel(panel2, offset) {
68
87
  if (panel2.canvas) {
69
- this.container.appendChild(panel2.canvas);
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.container.children.length; i++) {
76
- const child = this.container.children[i];
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;
@@ -83,15 +102,20 @@ const _Stats = class _Stats {
83
102
  console.error('Stats: The "canvas" parameter is undefined.');
84
103
  return;
85
104
  }
86
- if (canvasOrGL instanceof WebGL2RenderingContext) {
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) {
87
111
  this.gl = canvasOrGL;
88
- } else if (canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
112
+ } else if (!this.gl && canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
89
113
  this.gl = canvasOrGL.getContext("webgl2");
90
114
  if (!this.gl) {
91
115
  console.error("Stats: Unable to obtain WebGL2 context.");
92
116
  return;
93
117
  }
94
- } else {
118
+ } else if (!this.gl) {
95
119
  console.error("Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas.");
96
120
  return;
97
121
  }
@@ -101,41 +125,58 @@ const _Stats = class _Stats {
101
125
  }
102
126
  }
103
127
  begin() {
104
- this.beginProfiling("cpu-started");
128
+ if (!this.isRunningCPUProfiling) {
129
+ this.beginProfiling("cpu-started");
130
+ }
105
131
  if (!this.gl || !this.ext)
106
132
  return;
107
- if (this.query) {
108
- const available = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT_AVAILABLE);
109
- this.disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
110
- if (available && !this.disjoint) {
111
- this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
112
- const ms = this.ns * 1e-6;
113
- if (available || this.disjoint) {
114
- this.gl.deleteQuery(this.query);
115
- this.query = null;
116
- }
117
- if (available) {
118
- this.addToAverage(ms, this.averageGpu);
119
- }
133
+ if (this.gl && this.ext) {
134
+ if (this.activeQuery) {
135
+ this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
120
136
  }
121
- }
122
- if (!this.query) {
123
- this.queryCreated = true;
124
- this.query = this.gl.createQuery();
125
- if (this.query) {
126
- 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);
127
140
  }
128
141
  }
129
142
  }
130
143
  end() {
131
- this.beginTime = this.endInternal();
132
- this.endProfiling("cpu-started", "cpu-finished", "cpu-duration", this.averageCpu);
133
- if (!this.gl || !this.ext)
134
- return;
135
- 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) {
136
146
  this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
147
+ this.gpuQueries.push({ query: this.activeQuery });
148
+ this.activeQuery = null;
137
149
  }
138
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
+ }
139
180
  endInternal() {
140
181
  this.frames++;
141
182
  const time = (performance || Date).now();
@@ -165,13 +206,15 @@ const _Stats = class _Stats {
165
206
  beginProfiling(marker) {
166
207
  if (window.performance) {
167
208
  window.performance.mark(marker);
209
+ this.isRunningCPUProfiling = true;
168
210
  }
169
211
  }
170
- endProfiling(startMarker, endMarker, measureName, averageArray) {
171
- if (window.performance && endMarker) {
212
+ endProfiling(startMarker, endMarker, measureName) {
213
+ if (window.performance && endMarker && this.isRunningCPUProfiling) {
172
214
  window.performance.mark(endMarker);
173
215
  const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
174
- this.addToAverage(cpuMeasure.duration, averageArray);
216
+ this.totalCpuDuration += cpuMeasure.duration;
217
+ this.isRunningCPUProfiling = false;
175
218
  }
176
219
  }
177
220
  updatePanel(panel2, averageArray) {
@@ -197,6 +240,13 @@ const _Stats = class _Stats {
197
240
  }
198
241
  }
199
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
+ }
200
250
  };
201
251
  _Stats.Panel = panel;
202
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":"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"}
1
+ {"version":3,"file":"main.cjs","sources":["../lib/main.ts"],"sourcesContent":null,"names":["panel","Panel"],"mappings":";;AAQA,MAAM,SAAN,MAAM,OAAM;AAAA,EAmCV,YAAY,EAAE,gBAAgB,IAAI,aAAa,KAAK,eAAe,IAAI,YAAY,GAAG,UAAU,OAAO,aAAa,MAAM,OAAO,EAAE,IAAI,IAAI;AAlChH,SAAA,mBAAA;AACA,SAAA,mBAAA;AACR,SAAA,WAAA;AAoBc,SAAA,cAAA;AASjC,SAAA,aAAsC;AAChB,SAAA,cAAA;AAIpB,SAAK,OAAO;AACZ,SAAK,aAAa;AACb,SAAA,MAAM,SAAS,cAAc,KAAK;AAClC,SAAA,IAAI,MAAM,UAAU;AAEzB,QAAI,SAAS;AAEN,WAAA,IAAI,MAAM,WAAW;AAAA,IAE5B;AAEA,SAAK,KAAK;AACV,SAAK,QAAQ;AAEb,SAAK,wBAAwB;AAC7B,SAAK,UAAU;AAEV,SAAA,aAAa,eAAe,MAAM,IAAI;AAC3C,SAAK,WAAW,KAAK;AACrB,SAAK,cAAc,KAAK;AACxB,SAAK,SAAS;AACd,SAAK,cAAc;AACnB,SAAK,uBAAuB;AAC5B,SAAK,aAAa;AAAA,MAChB,MAAM,CAAC;AAAA,MACP,OAAO,CAAC;AAAA,IAAA;AAEV,SAAK,aAAa;AAAA,MAChB,MAAM,CAAC;AAAA,MACP,OAAO,CAAC;AAAA,IAAA;AAGV,SAAK,eAAe;AAEf,SAAA,WAAW,KAAK,SAAS,IAAI,OAAM,MAAM,OAAO,QAAQ,MAAM,GAAG,CAAC;AAClE,SAAA,UAAU,KAAK,SAAS,IAAI,OAAM,MAAM,OAAO,QAAQ,MAAM,GAAG,CAAC;AACtE,SAAK,WAAW;AAEhB,SAAK,aAAa;AAClB,SAAK,eAAe;AACpB,SAAK,YAAY;AACjB,SAAK,gBAAgB;AAErB,QAAI,KAAK,SAAS;AAEhB,WAAK,IAAI,iBAAiB,SAAS,CAAC,UAAU;AAE5C,cAAM,eAAe;AACrB,aAAK,UAAU,EAAE,KAAK,OAAO,KAAK,IAAI,SAAS,MAAM;AAAA,SAEpD,KAAK;AAER,WAAK,OAAO;AACP,WAAA,UAAU,KAAK,IAAI;AAAA,IAAA,OAEnB;AAEE,aAAA,iBAAiB,UAAU,MAAM;AAEjC,aAAA,YAAY,KAAK,UAAU,CAAC;AAC5B,aAAA,YAAY,KAAK,SAAS,CAAC;AAEhC,YAAI,KAAK,UAAU;AACZ,eAAA,YAAY,KAAK,UAAU,CAAC;AAAA,QACnC;AAAA,MAAA,CACD;AAAA,IACH;AAAA,EAGF;AAAA,EAEA,mBAAmB,UAA+B;AAGhD,UAAM,uBAAuB,SAAS;AAGtC,UAAM,gBAAgB;AAGb,aAAA,SAAS,SAAS,OAAO,QAAQ;AACxC,oBAAc,MAAM;AAGC,2BAAA,KAAK,MAAM,OAAO,MAAM;AAE7C,oBAAc,IAAI;AAAA,IAAA;AAGpB,SAAK,uBAAuB;AAAA,EAE9B;AAAA,EAEA,YAAYA,QAAc,QAAgB;AAElC,IAAAA,OAAA,OAAO,MAAM,WAAW;AAE9B,QAAI,KAAK,SAAS;AAEV,MAAAA,OAAA,OAAO,MAAM,UAAU;AAAA,IAAA,OAExB;AAEC,MAAAA,OAAA,OAAO,MAAM,UAAU;AAC7B,UAAI,KAAK,YAAY;AACb,QAAAA,OAAA,OAAO,MAAM,MAAM;AACzB,QAAAA,OAAM,OAAO,MAAM,OAAO,SAASA,OAAM,QAAQA,OAAM,KAAK;AAAA,MAAA,OACvD;AACC,QAAAA,OAAA,OAAO,MAAM,OAAO;AAC1B,QAAAA,OAAM,OAAO,MAAM,MAAM,SAASA,OAAM,SAASA,OAAM,KAAK;AAAA,MAE9D;AAAA,IACF;AAAA,EACF;AAAA,EAEA,SAASA,QAAc,QAAgB;AAErC,QAAIA,OAAM,QAAQ;AAEX,WAAA,IAAI,YAAYA,OAAM,MAAM;AAE5B,WAAA,YAAYA,QAAO,MAAM;AAAA,IAEhC;AAEO,WAAAA;AAAA,EAET;AAAA,EAEA,UAAU,IAAY;AAEpB,aAAS,IAAI,GAAG,IAAI,KAAK,IAAI,SAAS,QAAQ,KAAK;AACjD,YAAM,QAAQ,KAAK,IAAI,SAAS,CAAC;AAEjC,YAAM,MAAM,UAAU,MAAM,KAAK,UAAU;AAAA,IAE7C;AAEA,SAAK,OAAO;AAAA,EAEd;AAAA,EAEA,KAAK,YAA0E;AAC7E,QAAI,CAAC,YAAY;AACf,cAAQ,MAAM,6CAA6C;AAC3D;AAAA,IACF;AASA,QAAK,WAAmB,mBAAmB,CAAC,KAAK,sBAAsB;AACrE,YAAM,SAAc;AACpB,WAAK,mBAAmB,MAAa;AAChC,WAAA,KAAK,OAAO;IACnB;AAGA,QAAI,CAAC,KAAK,MAAM,sBAAsB,wBAAwB;AAC5D,WAAK,KAAK;AAAA,IAAA,WAIH,CAAC,KAAK,MAAM,sBAAsB,qBAAqB,sBAAsB,iBAAiB;AAChG,WAAA,KAAK,WAAW,WAAW,QAAQ;AACpC,UAAA,CAAC,KAAK,IAAI;AACZ,gBAAQ,MAAM,yCAAyC;AACvD;AAAA,MACF;AAAA,IAAA,WACS,CAAC,KAAK,IAAI;AACnB,cAAQ,MAAM,oGAAoG;AAClH;AAAA,IACF;AAGA,SAAK,MAAM,KAAK,GAAG,aAAa,iCAAiC;AACjE,QAAI,KAAK,KAAK;AACP,WAAA,WAAW,KAAK,SAAS,IAAI,OAAM,MAAM,OAAO,QAAQ,MAAM,GAAG,CAAC;AAAA,IACzE;AAAA,EACF;AAAA,EAGA,QAAQ;AAEF,QAAA,CAAC,KAAK,uBAAuB;AAC/B,WAAK,eAAe,aAAa;AAAA,IACnC;AAEA,QAAI,CAAC,KAAK,MAAM,CAAC,KAAK;AAAK;AAEvB,QAAA,KAAK,MAAM,KAAK,KAAK;AACvB,UAAI,KAAK,aAAa;AAEpB,aAAK,GAAG,SAAS,KAAK,IAAI,gBAAgB;AAAA,MAC5C;AAEK,WAAA,cAAc,KAAK,GAAG,YAAY;AACnC,UAAA,KAAK,gBAAgB,MAAM;AAC7B,aAAK,GAAG,WAAW,KAAK,IAAI,kBAAkB,KAAK,WAAW;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AAAA,EAIA,MAAM;AAGC,SAAA;AAEL,QAAI,KAAK,MAAM,KAAK,OAAO,KAAK,aAAa;AAC3C,WAAK,GAAG,SAAS,KAAK,IAAI,gBAAgB;AAE1C,WAAK,WAAW,KAAK,EAAE,OAAO,KAAK,aAAa;AAChD,WAAK,cAAc;AAAA,IACrB;AAAA,EAEF;AAAA,EAEA,oBAAoB;AAClB,QAAI,CAAC,KAAK,MAAM,CAAC,KAAK;AAAK;AAE3B,SAAK,mBAAmB;AAExB,SAAK,WAAW,QAAQ,CAAC,WAAW,UAAU;AAC5C,UAAI,KAAK,IAAI;AACL,cAAA,YAAY,KAAK,GAAG,kBAAkB,UAAU,OAAO,KAAK,GAAG,sBAAsB;AAC3F,cAAM,WAAW,KAAK,GAAG,aAAa,KAAK,IAAI,gBAAgB;AAE3D,YAAA,aAAa,CAAC,UAAU;AACpB,gBAAA,UAAU,KAAK,GAAG,kBAAkB,UAAU,OAAO,KAAK,GAAG,YAAY;AAC/E,gBAAM,WAAW,UAAU;AAC3B,eAAK,oBAAoB;AACpB,eAAA,GAAG,YAAY,UAAU,KAAK;AAC9B,eAAA,WAAW,OAAO,OAAO,CAAC;AAAA,QACjC;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EAEH;AAAA,EAEA,SAAS;AAEP,SAAK,kBAAkB;AAClB,SAAA,aAAa,eAAe,gBAAgB,cAAc;AAG/D,SAAK,aAAa,KAAK,kBAAmB,KAAK,UAAU;AACzD,SAAK,aAAa,KAAK,kBAAkB,KAAK,UAAU;AAExD,SAAK,cAAc;AACnB,SAAK,mBAAmB;AACxB,SAAK,mBAAmB;AACxB,SAAK,WAAW;AAEX,SAAA,YAAY,KAAK;EAIxB;AAAA,EAEA,cAAc;AAEP,SAAA;AACC,UAAA,QAAQ,eAAe,MAAM,IAAI;AAEvC,QAAI,QAAQ,KAAK,cAAc,MAAO,KAAK,eAAe;AACxD,WAAK,YAAY,KAAK,SAAS,KAAK,UAAU;AAC9C,WAAK,YAAY,KAAK,UAAU,KAAK,UAAU;AAE/C,WAAK,cAAc;AAAA,IACrB;AAEI,QAAA,QAAQ,KAAK,WAAW,KAAM;AAEhC,YAAM,MAAO,KAAK,SAAS,OAAS,OAAO,KAAK;AAEhD,WAAK,SAAS,OAAO,KAAK,KAAK,KAAK,KAAK,CAAC;AAE1C,WAAK,WAAW;AAChB,WAAK,SAAS;AAAA,IAEhB;AAEO,WAAA;AAAA,EAET;AAAA,EAEA,aAAa,OAAe,cAA0C;AAEvD,iBAAA,KAAK,KAAK,KAAK;AAC5B,QAAI,aAAa,KAAK,SAAS,KAAK,YAAY;AAE9C,mBAAa,KAAK;IAEpB;AAEa,iBAAA,MAAM,KAAK,KAAK;AAC7B,QAAI,aAAa,MAAM,SAAS,KAAK,cAAc;AAEjD,mBAAa,MAAM;IAErB;AAAA,EAEF;AAAA,EAEA,eAAe,QAAgB;AAE7B,QAAI,OAAO,aAAa;AAEf,aAAA,YAAY,KAAK,MAAM;AAC9B,WAAK,wBAAwB;AAAA,IAE/B;AAAA,EAEF;AAAA,EAEA,aAAa,aAA6D,WAA+B,aAAqB;AAE5H,QAAI,OAAO,eAAe,aAAa,KAAK,uBAAuB;AAE1D,aAAA,YAAY,KAAK,SAAS;AACjC,YAAM,aAAa,YAAY,QAAQ,aAAa,aAAa,SAAS;AAC1E,WAAK,oBAAoB,WAAW;AACpC,WAAK,wBAAwB;AAAA,IAE/B;AAAA,EAEF;AAAA,EAEA,YAAYA,QAAgC,cAAmD;AAEzF,QAAA,aAAa,KAAK,SAAS,GAAG;AAEhC,UAAI,SAAS;AACb,UAAI,MAAM;AAEV,eAAS,IAAI,GAAG,IAAI,aAAa,KAAK,QAAQ,KAAK;AAEvC,kBAAA,aAAa,KAAK,CAAC;AAE7B,YAAI,aAAa,KAAK,CAAC,IAAI,KAAK;AACxB,gBAAA,aAAa,KAAK,CAAC;AAAA,QAC3B;AAAA,MAEF;AAEA,UAAI,WAAW;AACf,UAAI,WAAW;AACf,eAAS,IAAI,GAAG,IAAI,aAAa,MAAM,QAAQ,KAAK;AAEtC,oBAAA,aAAa,MAAM,CAAC;AAEhC,YAAI,aAAa,MAAM,CAAC,IAAI,UAAU;AACzB,qBAAA,aAAa,MAAM,CAAC;AAAA,QACjC;AAAA,MAEF;AAEA,UAAIA,QAAO;AACH,QAAAA,OAAA,OAAO,SAAS,KAAK,IAAI,aAAa,KAAK,QAAQ,KAAK,UAAU,GAAG,WAAW,KAAK,IAAI,aAAa,MAAM,QAAQ,KAAK,YAAY,GAAG,KAAK,UAAU,KAAK,SAAS;AAAA,MAC7K;AAAA,IAEF;AAAA,EACF;AAAA,EAEA,IAAI,aAAa;AAEjB,WAAO,KAAK;AAAA,EAEb;AAAA,EAEC,IAAI,YAAY;AAEhB,YAAQ,KAAK,iEAAiE;AAC9E,WAAO,KAAK;AAAA,EAEb;AAED;AAnZE,OAAO,QAAsBC;AAjB/B,IAAM,QAAN;;"}
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.container = document.createElement("div");
7
- this.container.style.cssText = "position:fixed;top:0;left:0;opacity:0.9;z-index:10000;";
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.container.style.cssText += "cursor:pointer";
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.container.addEventListener("click", (event) => {
44
+ this.dom.addEventListener("click", (event) => {
36
45
  event.preventDefault();
37
- this.showPanel(++this.mode % this.container.children.length);
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,14 +84,14 @@ const _Stats = class _Stats {
65
84
  }
66
85
  addPanel(panel, offset) {
67
86
  if (panel.canvas) {
68
- this.container.appendChild(panel.canvas);
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.container.children.length; i++) {
75
- const child = this.container.children[i];
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;
@@ -82,15 +101,20 @@ const _Stats = class _Stats {
82
101
  console.error('Stats: The "canvas" parameter is undefined.');
83
102
  return;
84
103
  }
85
- if (canvasOrGL instanceof WebGL2RenderingContext) {
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) {
86
110
  this.gl = canvasOrGL;
87
- } else if (canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
111
+ } else if (!this.gl && canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
88
112
  this.gl = canvasOrGL.getContext("webgl2");
89
113
  if (!this.gl) {
90
114
  console.error("Stats: Unable to obtain WebGL2 context.");
91
115
  return;
92
116
  }
93
- } else {
117
+ } else if (!this.gl) {
94
118
  console.error("Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas.");
95
119
  return;
96
120
  }
@@ -100,41 +124,58 @@ const _Stats = class _Stats {
100
124
  }
101
125
  }
102
126
  begin() {
103
- this.beginProfiling("cpu-started");
127
+ if (!this.isRunningCPUProfiling) {
128
+ this.beginProfiling("cpu-started");
129
+ }
104
130
  if (!this.gl || !this.ext)
105
131
  return;
106
- if (this.query) {
107
- const available = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT_AVAILABLE);
108
- this.disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
109
- if (available && !this.disjoint) {
110
- this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
111
- const ms = this.ns * 1e-6;
112
- if (available || this.disjoint) {
113
- this.gl.deleteQuery(this.query);
114
- this.query = null;
115
- }
116
- if (available) {
117
- this.addToAverage(ms, this.averageGpu);
118
- }
132
+ if (this.gl && this.ext) {
133
+ if (this.activeQuery) {
134
+ this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
119
135
  }
120
- }
121
- if (!this.query) {
122
- this.queryCreated = true;
123
- this.query = this.gl.createQuery();
124
- if (this.query) {
125
- 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);
126
139
  }
127
140
  }
128
141
  }
129
142
  end() {
130
- this.beginTime = this.endInternal();
131
- this.endProfiling("cpu-started", "cpu-finished", "cpu-duration", this.averageCpu);
132
- if (!this.gl || !this.ext)
133
- return;
134
- 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) {
135
145
  this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
146
+ this.gpuQueries.push({ query: this.activeQuery });
147
+ this.activeQuery = null;
136
148
  }
137
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
+ }
138
179
  endInternal() {
139
180
  this.frames++;
140
181
  const time = (performance || Date).now();
@@ -164,13 +205,15 @@ const _Stats = class _Stats {
164
205
  beginProfiling(marker) {
165
206
  if (window.performance) {
166
207
  window.performance.mark(marker);
208
+ this.isRunningCPUProfiling = true;
167
209
  }
168
210
  }
169
- endProfiling(startMarker, endMarker, measureName, averageArray) {
170
- if (window.performance && endMarker) {
211
+ endProfiling(startMarker, endMarker, measureName) {
212
+ if (window.performance && endMarker && this.isRunningCPUProfiling) {
171
213
  window.performance.mark(endMarker);
172
214
  const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
173
- this.addToAverage(cpuMeasure.duration, averageArray);
215
+ this.totalCpuDuration += cpuMeasure.duration;
216
+ this.isRunningCPUProfiling = false;
174
217
  }
175
218
  }
176
219
  updatePanel(panel, averageArray) {
@@ -196,6 +239,13 @@ const _Stats = class _Stats {
196
239
  }
197
240
  }
198
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
+ }
199
249
  };
200
250
  _Stats.Panel = Panel;
201
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":"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"}
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
- container: HTMLDivElement;
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
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, averageArray: {
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
- container: HTMLDivElement;
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.container = document.createElement('div');
40
- this.container.style.cssText = 'position:fixed;top:0;left:0;opacity:0.9;z-index:10000;';
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.container.style.cssText += 'cursor:pointer';
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.container.addEventListener('click', (event) => {
91
+ this.dom.addEventListener('click', (event) => {
80
92
 
81
93
  event.preventDefault();
82
- this.showPanel(++this.mode % this.container.children.length);
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.container.appendChild(panel.canvas);
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.container.children.length; i++) {
143
- const child = this.container.children[i] as HTMLElement;
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
 
@@ -156,18 +191,32 @@ class Stats {
156
191
  return;
157
192
  }
158
193
 
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();
205
+ }
206
+
159
207
  // Check if canvasOrGL is already a WebGL2RenderingContext
160
- if (canvasOrGL instanceof WebGL2RenderingContext) {
208
+ if (!this.gl && canvasOrGL instanceof WebGL2RenderingContext) {
161
209
  this.gl = canvasOrGL;
162
210
  }
211
+
163
212
  // Handle HTMLCanvasElement and OffscreenCanvas
164
- else if (canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
213
+ else if (!this.gl && canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
165
214
  this.gl = canvasOrGL.getContext('webgl2') as WebGL2RenderingContext;
166
215
  if (!this.gl) {
167
216
  console.error('Stats: Unable to obtain WebGL2 context.');
168
217
  return;
169
218
  }
170
- } else {
219
+ } else if (!this.gl) {
171
220
  console.error('Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas.');
172
221
  return;
173
222
  }
@@ -182,64 +231,79 @@ class Stats {
182
231
 
183
232
  begin() {
184
233
 
185
- this.beginProfiling('cpu-started');
186
- if (!this.gl || !this.ext) return;
187
-
188
-
189
- if (this.query) {
190
-
191
- const available = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT_AVAILABLE);
192
- this.disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
193
-
194
- if (available && !this.disjoint) {
195
-
196
- this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
197
- const ms = this.ns * 1e-6;
198
-
199
- if (available || this.disjoint) {
200
-
201
- this.gl.deleteQuery(this.query);
202
- this.query = null;
203
-
204
- }
205
-
206
- if (available) {
207
-
208
- this.addToAverage(ms, this.averageGpu);
209
-
210
- }
234
+ if (!this.isRunningCPUProfiling) {
235
+ this.beginProfiling('cpu-started');
236
+ }
211
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);
212
244
  }
213
245
 
246
+ this.activeQuery = this.gl.createQuery();
247
+ if (this.activeQuery !== null) {
248
+ this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.activeQuery);
249
+ }
214
250
  }
251
+ }
215
252
 
216
- if (!this.query) {
217
253
 
218
- this.queryCreated = true;
219
- this.query = this.gl.createQuery();
220
254
 
221
- if (this.query) {
222
- this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.query);
223
- }
255
+ end() {
224
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;
225
265
  }
226
266
 
227
267
  }
228
268
 
229
- end() {
230
-
231
- this.beginTime = this.endInternal()
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
+ });
232
288
 
233
- this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration', this.averageCpu);
289
+ }
234
290
 
235
- if (!this.gl || !this.ext) return;
291
+ update() {
292
+
293
+ this.processGpuQueries();
294
+ this.endProfiling('cpu-started', 'cpu-finished', 'cpu-duration');
236
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);
237
299
 
238
- if (this.queryCreated && this.gl.getQuery(this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY)) {
300
+ this.renderCount = 0;
301
+ this.totalCpuDuration = 0;
302
+ this.totalGpuDuration = 0;
303
+ this.totalFps = 0;
239
304
 
240
- this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
305
+ this.beginTime = this.endInternal()
241
306
 
242
- }
243
307
 
244
308
 
245
309
  }
@@ -294,18 +358,20 @@ class Stats {
294
358
  if (window.performance) {
295
359
 
296
360
  window.performance.mark(marker);
361
+ this.isRunningCPUProfiling = true
297
362
 
298
363
  }
299
364
 
300
365
  }
301
366
 
302
- endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string, averageArray: { logs: number[], graph: number[] }) {
367
+ endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string) {
303
368
 
304
- if (window.performance && endMarker) {
369
+ if (window.performance && endMarker && this.isRunningCPUProfiling) {
305
370
 
306
371
  window.performance.mark(endMarker);
307
372
  const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
308
- this.addToAverage(cpuMeasure.duration, averageArray);
373
+ this.totalCpuDuration += cpuMeasure.duration;
374
+ this.isRunningCPUProfiling = false
309
375
 
310
376
  }
311
377
 
@@ -347,6 +413,18 @@ class Stats {
347
413
  }
348
414
  }
349
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
+ }
350
428
 
351
429
  }
352
430
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stats-gl",
3
- "version": "1.0.7",
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",