stats-gl 0.1.0 → 0.3.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 (13) hide show
  1. package/dist/main.cjs +190 -0
  2. package/dist/main.cjs.map +1 -0
  3. package/dist/main.js +191 -0
  4. package/dist/main.js.map +1 -0
  5. package/dist/panel.cjs +57 -0
  6. package/dist/panel.cjs.map +1 -0
  7. package/dist/panel.js +58 -0
  8. package/dist/panel.js.map +1 -0
  9. package/lib/main.ts +337 -0
  10. package/lib/panel.ts +85 -0
  11. package/package.json +18 -6
  12. package/dist/stats-gl.es.js +0 -135
  13. package/dist/stats-gl.umd.js +0 -1
package/dist/main.cjs ADDED
@@ -0,0 +1,190 @@
1
+ "use strict";
2
+ const panel = require("./panel.cjs");
3
+ class Stats {
4
+ constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, mode = 0 } = {}) {
5
+ this.mode = mode;
6
+ this.container = document.createElement("div");
7
+ this.container.style.cssText = "position:fixed;top:0;left:0;opacity:0.9;z-index:10000;";
8
+ if (minimal) {
9
+ this.container.style.cssText += "cursor:pointer";
10
+ }
11
+ this.canvasGpu = null;
12
+ this.gl = null;
13
+ this.query = null;
14
+ this.minimal = minimal;
15
+ this.beginTime = (performance || Date).now();
16
+ this.prevTime = this.beginTime;
17
+ this.prevCpuTime = this.beginTime;
18
+ this.frames = 0;
19
+ this.averageCpu = {
20
+ logs: [],
21
+ graph: []
22
+ };
23
+ this.averageGpu = {
24
+ logs: [],
25
+ graph: []
26
+ };
27
+ this.queryCreated = false;
28
+ this.fpsPanel = this.addPanel(new Stats.Panel("FPS", "#0ff", "#002"), 0);
29
+ this.msPanel = this.addPanel(new Stats.Panel("CPU", "#0f0", "#020"), 1);
30
+ this.gpuPanel = null;
31
+ this.samplesLog = samplesLog;
32
+ this.samplesGraph = samplesGraph;
33
+ this.precision = precision;
34
+ this.logsPerSecond = logsPerSecond;
35
+ if (this.minimal) {
36
+ this.container.addEventListener("click", (event) => {
37
+ event.preventDefault();
38
+ this.showPanel(++this.mode % this.container.children.length);
39
+ }, false);
40
+ this.mode = mode;
41
+ this.showPanel(this.mode);
42
+ } else {
43
+ window.addEventListener("resize", () => {
44
+ this.resizePanel(this.fpsPanel, 0);
45
+ this.resizePanel(this.msPanel, 1);
46
+ if (this.gpuPanel) {
47
+ this.resizePanel(this.gpuPanel, 2);
48
+ }
49
+ });
50
+ }
51
+ }
52
+ resizePanel(panel2, offset) {
53
+ if (this.minimal) {
54
+ panel2.canvas.style.display = "none";
55
+ } else {
56
+ panel2.canvas.style.display = "block";
57
+ if (window.innerWidth < 700) {
58
+ panel2.canvas.style.left = "0px";
59
+ panel2.canvas.style.top = offset * panel2.HEIGHT / panel2.PR + "px";
60
+ } else {
61
+ panel2.canvas.style.top = "0px";
62
+ panel2.canvas.style.left = offset * panel2.WIDTH / panel2.PR + "px";
63
+ }
64
+ }
65
+ }
66
+ addPanel(panel2, offset) {
67
+ if (panel2.canvas) {
68
+ this.container.appendChild(panel2.canvas);
69
+ this.resizePanel(panel2, offset);
70
+ }
71
+ return panel2;
72
+ }
73
+ showPanel(id) {
74
+ for (let i = 0; i < this.container.children.length; i++) {
75
+ const child = this.container.children[i];
76
+ child.style.display = i === id ? "block" : "none";
77
+ }
78
+ this.mode = id;
79
+ }
80
+ init(canvas) {
81
+ this.canvasGpu = canvas;
82
+ if (!this.canvasGpu)
83
+ return;
84
+ this.gl = this.canvasGpu.getContext("webgl2");
85
+ this.ext = this.gl ? this.gl.getExtension("EXT_disjoint_timer_query_webgl2") : null;
86
+ if (this.ext) {
87
+ this.gpuPanel = this.addPanel(new Stats.Panel("GPU", "#ff0", "#220"), 2);
88
+ }
89
+ }
90
+ begin() {
91
+ this.beginProfiling("cpu-started");
92
+ if (!this.gl || !this.ext)
93
+ return;
94
+ if (this.query) {
95
+ const available = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT_AVAILABLE);
96
+ this.disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
97
+ if (available && !this.disjoint) {
98
+ this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
99
+ const ms = this.ns * 1e-6;
100
+ if (available || this.disjoint) {
101
+ this.gl.deleteQuery(this.query);
102
+ this.query = null;
103
+ }
104
+ if (available) {
105
+ this.addToAverage(ms, this.averageGpu);
106
+ }
107
+ }
108
+ }
109
+ if (!this.query) {
110
+ this.queryCreated = true;
111
+ this.query = this.gl.createQuery();
112
+ if (this.query) {
113
+ this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.query);
114
+ }
115
+ }
116
+ }
117
+ end() {
118
+ this.beginTime = this.endInternal();
119
+ this.endProfiling("cpu-started", "cpu-finished", "cpu-duration", this.averageCpu);
120
+ if (!this.gl || !this.ext)
121
+ return;
122
+ if (this.queryCreated && this.gl.getQuery(this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY)) {
123
+ this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
124
+ }
125
+ }
126
+ endInternal() {
127
+ this.frames++;
128
+ const time = (performance || Date).now();
129
+ if (time >= this.prevCpuTime + 1e3 / this.logsPerSecond) {
130
+ this.updatePanel(this.msPanel, this.averageCpu);
131
+ this.updatePanel(this.gpuPanel, this.averageGpu);
132
+ this.prevCpuTime = time;
133
+ }
134
+ if (time >= this.prevTime + 1e3) {
135
+ const fps = this.frames * 1e3 / (time - this.prevTime);
136
+ this.fpsPanel.update(fps, fps, 100, 100, 0);
137
+ this.prevTime = time;
138
+ this.frames = 0;
139
+ }
140
+ return time;
141
+ }
142
+ addToAverage(value, averageArray) {
143
+ averageArray.logs.push(value);
144
+ if (averageArray.logs.length > this.samplesLog) {
145
+ averageArray.logs.shift();
146
+ }
147
+ averageArray.graph.push(value);
148
+ if (averageArray.graph.length > this.samplesGraph) {
149
+ averageArray.graph.shift();
150
+ }
151
+ }
152
+ beginProfiling(marker) {
153
+ if (window.performance) {
154
+ window.performance.mark(marker);
155
+ }
156
+ }
157
+ endProfiling(startMarker, endMarker, measureName, averageArray) {
158
+ if (window.performance && endMarker) {
159
+ window.performance.mark(endMarker);
160
+ const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
161
+ this.addToAverage(cpuMeasure.duration, averageArray);
162
+ }
163
+ }
164
+ updatePanel(panel2, averageArray) {
165
+ if (averageArray.logs.length > 0) {
166
+ let sumLog = 0;
167
+ let max = 0.01;
168
+ for (let i = 0; i < averageArray.logs.length; i++) {
169
+ sumLog += averageArray.logs[i];
170
+ if (averageArray.logs[i] > max) {
171
+ max = averageArray.logs[i];
172
+ }
173
+ }
174
+ let sumGraph = 0;
175
+ let maxGraph = 0.01;
176
+ for (let i = 0; i < averageArray.graph.length; i++) {
177
+ sumGraph += averageArray.graph[i];
178
+ if (averageArray.graph[i] > maxGraph) {
179
+ maxGraph = averageArray.graph[i];
180
+ }
181
+ }
182
+ if (panel2) {
183
+ panel2.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, this.precision);
184
+ }
185
+ }
186
+ }
187
+ }
188
+ Stats.Panel = panel;
189
+ module.exports = Stats;
190
+ //# sourceMappingURL=main.cjs.map
package/dist/main.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"main.cjs","sources":["../lib/main.ts"],"sourcesContent":null,"names":["panel","Panel"],"mappings":"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"}
package/dist/main.js ADDED
@@ -0,0 +1,191 @@
1
+ import Panel from "./panel.js";
2
+ class Stats {
3
+ constructor({ logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, mode = 0 } = {}) {
4
+ this.mode = mode;
5
+ this.container = document.createElement("div");
6
+ this.container.style.cssText = "position:fixed;top:0;left:0;opacity:0.9;z-index:10000;";
7
+ if (minimal) {
8
+ this.container.style.cssText += "cursor:pointer";
9
+ }
10
+ this.canvasGpu = null;
11
+ this.gl = null;
12
+ this.query = null;
13
+ this.minimal = minimal;
14
+ this.beginTime = (performance || Date).now();
15
+ this.prevTime = this.beginTime;
16
+ this.prevCpuTime = this.beginTime;
17
+ this.frames = 0;
18
+ this.averageCpu = {
19
+ logs: [],
20
+ graph: []
21
+ };
22
+ this.averageGpu = {
23
+ logs: [],
24
+ graph: []
25
+ };
26
+ this.queryCreated = false;
27
+ this.fpsPanel = this.addPanel(new Stats.Panel("FPS", "#0ff", "#002"), 0);
28
+ this.msPanel = this.addPanel(new Stats.Panel("CPU", "#0f0", "#020"), 1);
29
+ this.gpuPanel = null;
30
+ this.samplesLog = samplesLog;
31
+ this.samplesGraph = samplesGraph;
32
+ this.precision = precision;
33
+ this.logsPerSecond = logsPerSecond;
34
+ if (this.minimal) {
35
+ this.container.addEventListener("click", (event) => {
36
+ event.preventDefault();
37
+ this.showPanel(++this.mode % this.container.children.length);
38
+ }, false);
39
+ this.mode = mode;
40
+ this.showPanel(this.mode);
41
+ } else {
42
+ window.addEventListener("resize", () => {
43
+ this.resizePanel(this.fpsPanel, 0);
44
+ this.resizePanel(this.msPanel, 1);
45
+ if (this.gpuPanel) {
46
+ this.resizePanel(this.gpuPanel, 2);
47
+ }
48
+ });
49
+ }
50
+ }
51
+ resizePanel(panel, offset) {
52
+ if (this.minimal) {
53
+ panel.canvas.style.display = "none";
54
+ } else {
55
+ panel.canvas.style.display = "block";
56
+ if (window.innerWidth < 700) {
57
+ panel.canvas.style.left = "0px";
58
+ panel.canvas.style.top = offset * panel.HEIGHT / panel.PR + "px";
59
+ } else {
60
+ panel.canvas.style.top = "0px";
61
+ panel.canvas.style.left = offset * panel.WIDTH / panel.PR + "px";
62
+ }
63
+ }
64
+ }
65
+ addPanel(panel, offset) {
66
+ if (panel.canvas) {
67
+ this.container.appendChild(panel.canvas);
68
+ this.resizePanel(panel, offset);
69
+ }
70
+ return panel;
71
+ }
72
+ showPanel(id) {
73
+ for (let i = 0; i < this.container.children.length; i++) {
74
+ const child = this.container.children[i];
75
+ child.style.display = i === id ? "block" : "none";
76
+ }
77
+ this.mode = id;
78
+ }
79
+ init(canvas) {
80
+ this.canvasGpu = canvas;
81
+ if (!this.canvasGpu)
82
+ return;
83
+ this.gl = this.canvasGpu.getContext("webgl2");
84
+ this.ext = this.gl ? this.gl.getExtension("EXT_disjoint_timer_query_webgl2") : null;
85
+ if (this.ext) {
86
+ this.gpuPanel = this.addPanel(new Stats.Panel("GPU", "#ff0", "#220"), 2);
87
+ }
88
+ }
89
+ begin() {
90
+ this.beginProfiling("cpu-started");
91
+ if (!this.gl || !this.ext)
92
+ return;
93
+ if (this.query) {
94
+ const available = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT_AVAILABLE);
95
+ this.disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
96
+ if (available && !this.disjoint) {
97
+ this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
98
+ const ms = this.ns * 1e-6;
99
+ if (available || this.disjoint) {
100
+ this.gl.deleteQuery(this.query);
101
+ this.query = null;
102
+ }
103
+ if (available) {
104
+ this.addToAverage(ms, this.averageGpu);
105
+ }
106
+ }
107
+ }
108
+ if (!this.query) {
109
+ this.queryCreated = true;
110
+ this.query = this.gl.createQuery();
111
+ if (this.query) {
112
+ this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.query);
113
+ }
114
+ }
115
+ }
116
+ end() {
117
+ this.beginTime = this.endInternal();
118
+ this.endProfiling("cpu-started", "cpu-finished", "cpu-duration", this.averageCpu);
119
+ if (!this.gl || !this.ext)
120
+ return;
121
+ if (this.queryCreated && this.gl.getQuery(this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY)) {
122
+ this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
123
+ }
124
+ }
125
+ endInternal() {
126
+ this.frames++;
127
+ const time = (performance || Date).now();
128
+ if (time >= this.prevCpuTime + 1e3 / this.logsPerSecond) {
129
+ this.updatePanel(this.msPanel, this.averageCpu);
130
+ this.updatePanel(this.gpuPanel, this.averageGpu);
131
+ this.prevCpuTime = time;
132
+ }
133
+ if (time >= this.prevTime + 1e3) {
134
+ const fps = this.frames * 1e3 / (time - this.prevTime);
135
+ this.fpsPanel.update(fps, fps, 100, 100, 0);
136
+ this.prevTime = time;
137
+ this.frames = 0;
138
+ }
139
+ return time;
140
+ }
141
+ addToAverage(value, averageArray) {
142
+ averageArray.logs.push(value);
143
+ if (averageArray.logs.length > this.samplesLog) {
144
+ averageArray.logs.shift();
145
+ }
146
+ averageArray.graph.push(value);
147
+ if (averageArray.graph.length > this.samplesGraph) {
148
+ averageArray.graph.shift();
149
+ }
150
+ }
151
+ beginProfiling(marker) {
152
+ if (window.performance) {
153
+ window.performance.mark(marker);
154
+ }
155
+ }
156
+ endProfiling(startMarker, endMarker, measureName, averageArray) {
157
+ if (window.performance && endMarker) {
158
+ window.performance.mark(endMarker);
159
+ const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
160
+ this.addToAverage(cpuMeasure.duration, averageArray);
161
+ }
162
+ }
163
+ updatePanel(panel, averageArray) {
164
+ if (averageArray.logs.length > 0) {
165
+ let sumLog = 0;
166
+ let max = 0.01;
167
+ for (let i = 0; i < averageArray.logs.length; i++) {
168
+ sumLog += averageArray.logs[i];
169
+ if (averageArray.logs[i] > max) {
170
+ max = averageArray.logs[i];
171
+ }
172
+ }
173
+ let sumGraph = 0;
174
+ let maxGraph = 0.01;
175
+ for (let i = 0; i < averageArray.graph.length; i++) {
176
+ sumGraph += averageArray.graph[i];
177
+ if (averageArray.graph[i] > maxGraph) {
178
+ maxGraph = averageArray.graph[i];
179
+ }
180
+ }
181
+ if (panel) {
182
+ panel.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, this.precision);
183
+ }
184
+ }
185
+ }
186
+ }
187
+ Stats.Panel = Panel;
188
+ export {
189
+ Stats as default
190
+ };
191
+ //# sourceMappingURL=main.js.map
package/dist/main.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"main.js","sources":["../lib/main.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
package/dist/panel.cjs ADDED
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+ class Panel {
3
+ constructor(name, fg, bg) {
4
+ this.name = name;
5
+ this.fg = fg;
6
+ this.bg = bg;
7
+ this.PR = Math.round(window.devicePixelRatio || 1);
8
+ this.WIDTH = 90 * this.PR;
9
+ this.HEIGHT = 48 * this.PR;
10
+ this.TEXT_X = 3 * this.PR;
11
+ this.TEXT_Y = 2 * this.PR;
12
+ this.GRAPH_X = 3 * this.PR;
13
+ this.GRAPH_Y = 15 * this.PR;
14
+ this.GRAPH_WIDTH = 84 * this.PR;
15
+ this.GRAPH_HEIGHT = 30 * this.PR;
16
+ this.canvas = document.createElement("canvas");
17
+ this.canvas.width = 90 * this.PR;
18
+ this.canvas.height = 48 * this.PR;
19
+ this.canvas.style.width = "90px";
20
+ this.canvas.style.height = "48px";
21
+ this.canvas.style.cssText = "width:90px;height:48px";
22
+ this.context = this.canvas.getContext("2d");
23
+ if (this.context) {
24
+ this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
25
+ this.context.textBaseline = "top";
26
+ this.context.fillStyle = this.bg;
27
+ this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
28
+ this.context.fillStyle = this.fg;
29
+ this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
30
+ this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
31
+ this.context.fillStyle = this.bg;
32
+ this.context.globalAlpha = 0.9;
33
+ this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
34
+ }
35
+ }
36
+ update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
37
+ let min = Infinity, max = 0;
38
+ if (!this.context)
39
+ return;
40
+ min = Math.min(min, value);
41
+ max = Math.max(maxValue, value);
42
+ maxGraph = Math.max(maxGraph, valueGraph);
43
+ this.context.fillStyle = this.bg;
44
+ this.context.globalAlpha = 1;
45
+ this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
46
+ this.context.fillStyle = this.fg;
47
+ this.context.fillText(value.toFixed(decimals) + " " + this.name + " (" + min.toFixed(decimals) + "-" + parseFloat(max.toFixed(decimals)) + ")", this.TEXT_X, this.TEXT_Y);
48
+ this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT);
49
+ this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
50
+ this.context.fillStyle = this.bg;
51
+ this.context.globalAlpha = 0.9;
52
+ this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, parseFloat((1 - valueGraph / maxGraph).toFixed(decimals)) * this.GRAPH_HEIGHT);
53
+ }
54
+ }
55
+ ;
56
+ module.exports = Panel;
57
+ //# sourceMappingURL=panel.cjs.map
package/dist/panel.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":";AAAA,MAAM,MAAM;AAAA,EAgBR,YAAY,MAAc,IAAY,IAAY;AAE9C,SAAK,OAAO;AACZ,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK,KAAK,MAAO,OAAO,oBAAoB,CAAE;AAE9C,SAAA,QAAQ,KAAK,KAAK;AAClB,SAAA,SAAS,KAAK,KAAK;AACnB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,UAAU,IAAI,KAAK;AACnB,SAAA,UAAU,KAAK,KAAK;AACpB,SAAA,cAAc,KAAK,KAAK;AACxB,SAAA,eAAe,KAAK,KAAK;AAEzB,SAAA,SAAS,SAAS,cAAc,QAAQ;AACxC,SAAA,OAAO,QAAQ,KAAK,KAAK;AACzB,SAAA,OAAO,SAAS,KAAK,KAAK;AAC1B,SAAA,OAAO,MAAM,QAAQ;AACrB,SAAA,OAAO,MAAM,SAAS;AACtB,SAAA,OAAO,MAAM,UAAU;AAE5B,SAAK,UAAU,KAAK,OAAO,WAAW,IAAI;AAE1C,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,OAAO,UAAW,IAAI,KAAK,KAAM;AAC9C,WAAK,QAAQ,eAAe;AAEvB,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,MAAM;AAE9C,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AACpD,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAEhF,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,cAAc;AACtB,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAAA,IACzF;AAAA,EAEJ;AAAA,EAEA,OAAO,OAAe,YAAoB,UAAkB,UAAkB,WAAW,GAAG;AACpF,QAAA,MAAM,UAAU,MAAM;AAE1B,QAAI,CAAC,KAAK;AAAS;AAEb,UAAA,KAAK,IAAI,KAAK,KAAK;AACnB,UAAA,KAAK,IAAI,UAAU,KAAK;AACnB,eAAA,KAAK,IAAI,UAAU,UAAU;AAEnC,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAC3B,SAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,OAAO;AAC/C,SAAA,QAAQ,YAAY,KAAK;AACzB,SAAA,QAAQ,SAAS,MAAM,QAAQ,QAAQ,IAAI,MAAM,KAAK,OAAO,OAAO,IAAI,QAAQ,QAAQ,IAAI,MAAM,WAAW,IAAI,QAAQ,QAAQ,CAAC,IAAI,KAAK,KAAK,QAAQ,KAAK,MAAM;AAEnK,SAAA,QAAQ,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,IAAI,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,cAAc,KAAK,SAAS,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,YAAY;AAElM,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK,YAAY;AAEpG,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AACtB,SAAA,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,IAAI,YAAY,IAAK,aAAa,UAAW,QAAQ,QAAQ,CAAC,IAAI,KAAK,YAAY;AAAA,EAC3K;AACJ;AAAC;;"}
package/dist/panel.js ADDED
@@ -0,0 +1,58 @@
1
+ class Panel {
2
+ constructor(name, fg, bg) {
3
+ this.name = name;
4
+ this.fg = fg;
5
+ this.bg = bg;
6
+ this.PR = Math.round(window.devicePixelRatio || 1);
7
+ this.WIDTH = 90 * this.PR;
8
+ this.HEIGHT = 48 * this.PR;
9
+ this.TEXT_X = 3 * this.PR;
10
+ this.TEXT_Y = 2 * this.PR;
11
+ this.GRAPH_X = 3 * this.PR;
12
+ this.GRAPH_Y = 15 * this.PR;
13
+ this.GRAPH_WIDTH = 84 * this.PR;
14
+ this.GRAPH_HEIGHT = 30 * this.PR;
15
+ this.canvas = document.createElement("canvas");
16
+ this.canvas.width = 90 * this.PR;
17
+ this.canvas.height = 48 * this.PR;
18
+ this.canvas.style.width = "90px";
19
+ this.canvas.style.height = "48px";
20
+ this.canvas.style.cssText = "width:90px;height:48px";
21
+ this.context = this.canvas.getContext("2d");
22
+ if (this.context) {
23
+ this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
24
+ this.context.textBaseline = "top";
25
+ this.context.fillStyle = this.bg;
26
+ this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
27
+ this.context.fillStyle = this.fg;
28
+ this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
29
+ this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
30
+ this.context.fillStyle = this.bg;
31
+ this.context.globalAlpha = 0.9;
32
+ this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
33
+ }
34
+ }
35
+ update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
36
+ let min = Infinity, max = 0;
37
+ if (!this.context)
38
+ return;
39
+ min = Math.min(min, value);
40
+ max = Math.max(maxValue, value);
41
+ maxGraph = Math.max(maxGraph, valueGraph);
42
+ this.context.fillStyle = this.bg;
43
+ this.context.globalAlpha = 1;
44
+ this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
45
+ this.context.fillStyle = this.fg;
46
+ this.context.fillText(value.toFixed(decimals) + " " + this.name + " (" + min.toFixed(decimals) + "-" + parseFloat(max.toFixed(decimals)) + ")", this.TEXT_X, this.TEXT_Y);
47
+ this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT);
48
+ this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
49
+ this.context.fillStyle = this.bg;
50
+ this.context.globalAlpha = 0.9;
51
+ this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, parseFloat((1 - valueGraph / maxGraph).toFixed(decimals)) * this.GRAPH_HEIGHT);
52
+ }
53
+ }
54
+ ;
55
+ export {
56
+ Panel as default
57
+ };
58
+ //# sourceMappingURL=panel.js.map
package/dist/panel.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"AAAA,MAAM,MAAM;AAAA,EAgBR,YAAY,MAAc,IAAY,IAAY;AAE9C,SAAK,OAAO;AACZ,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK,KAAK,MAAO,OAAO,oBAAoB,CAAE;AAE9C,SAAA,QAAQ,KAAK,KAAK;AAClB,SAAA,SAAS,KAAK,KAAK;AACnB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,UAAU,IAAI,KAAK;AACnB,SAAA,UAAU,KAAK,KAAK;AACpB,SAAA,cAAc,KAAK,KAAK;AACxB,SAAA,eAAe,KAAK,KAAK;AAEzB,SAAA,SAAS,SAAS,cAAc,QAAQ;AACxC,SAAA,OAAO,QAAQ,KAAK,KAAK;AACzB,SAAA,OAAO,SAAS,KAAK,KAAK;AAC1B,SAAA,OAAO,MAAM,QAAQ;AACrB,SAAA,OAAO,MAAM,SAAS;AACtB,SAAA,OAAO,MAAM,UAAU;AAE5B,SAAK,UAAU,KAAK,OAAO,WAAW,IAAI;AAE1C,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,OAAO,UAAW,IAAI,KAAK,KAAM;AAC9C,WAAK,QAAQ,eAAe;AAEvB,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,MAAM;AAE9C,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AACpD,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAEhF,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,cAAc;AACtB,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAAA,IACzF;AAAA,EAEJ;AAAA,EAEA,OAAO,OAAe,YAAoB,UAAkB,UAAkB,WAAW,GAAG;AACpF,QAAA,MAAM,UAAU,MAAM;AAE1B,QAAI,CAAC,KAAK;AAAS;AAEb,UAAA,KAAK,IAAI,KAAK,KAAK;AACnB,UAAA,KAAK,IAAI,UAAU,KAAK;AACnB,eAAA,KAAK,IAAI,UAAU,UAAU;AAEnC,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAC3B,SAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,OAAO;AAC/C,SAAA,QAAQ,YAAY,KAAK;AACzB,SAAA,QAAQ,SAAS,MAAM,QAAQ,QAAQ,IAAI,MAAM,KAAK,OAAO,OAAO,IAAI,QAAQ,QAAQ,IAAI,MAAM,WAAW,IAAI,QAAQ,QAAQ,CAAC,IAAI,KAAK,KAAK,QAAQ,KAAK,MAAM;AAEnK,SAAA,QAAQ,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,IAAI,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,cAAc,KAAK,SAAS,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,YAAY;AAElM,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK,YAAY;AAEpG,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AACtB,SAAA,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,IAAI,YAAY,IAAK,aAAa,UAAW,QAAQ,QAAQ,CAAC,IAAI,KAAK,YAAY;AAAA,EAC3K;AACJ;AAAC;"}
package/lib/main.ts ADDED
@@ -0,0 +1,337 @@
1
+ import Panel from "./panel";
2
+
3
+ export interface AverageArray {
4
+ logs: number[];
5
+ graph: number[];
6
+ }
7
+
8
+
9
+ class Stats {
10
+ mode: number;
11
+ container: HTMLDivElement;
12
+ minimal: boolean;
13
+ beginTime: number;
14
+ prevTime: number;
15
+ prevCpuTime: number;
16
+ frames: number;
17
+ averageCpu: AverageArray;
18
+ averageGpu: AverageArray;
19
+ queryCreated: boolean;
20
+ fpsPanel: Panel;
21
+ static Panel: any;
22
+ msPanel: Panel;
23
+ gpuPanel: Panel | null;
24
+ samplesLog: number;
25
+ samplesGraph: number;
26
+ logsPerSecond: number;
27
+ precision: number;
28
+ canvasGpu: HTMLCanvasElement | null;
29
+ gl: WebGL2RenderingContext | null;
30
+ ext: any;
31
+ query: WebGLQuery | null;
32
+ disjoint: any;
33
+ ns: any;
34
+
35
+ constructor( { logsPerSecond = 20, samplesLog = 100, samplesGraph = 10, precision = 2, minimal = false, mode = 0 } = {} ) {
36
+
37
+ this.mode = mode;
38
+ this.container = document.createElement( 'div' );
39
+ this.container.style.cssText = 'position:fixed;top:0;left:0;opacity:0.9;z-index:10000;';
40
+
41
+ if ( minimal ) {
42
+
43
+ this.container.style.cssText += 'cursor:pointer';
44
+
45
+ }
46
+
47
+ this.canvasGpu = null;
48
+ this.gl = null;
49
+ this.query = null;
50
+
51
+ this.minimal = minimal;
52
+
53
+ this.beginTime = ( performance || Date ).now();
54
+ this.prevTime = this.beginTime;
55
+ this.prevCpuTime = this.beginTime;
56
+ this.frames = 0;
57
+ this.averageCpu = {
58
+ logs: [],
59
+ graph: []
60
+ };
61
+ this.averageGpu = {
62
+ logs: [],
63
+ graph: []
64
+ };
65
+
66
+ this.queryCreated = false;
67
+
68
+ this.fpsPanel = this.addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ), 0 );
69
+ this.msPanel = this.addPanel( new Stats.Panel( 'CPU', '#0f0', '#020' ), 1 );
70
+ this.gpuPanel = null;
71
+
72
+ this.samplesLog = samplesLog;
73
+ this.samplesGraph = samplesGraph;
74
+ this.precision = precision;
75
+ this.logsPerSecond = logsPerSecond;
76
+
77
+ if ( this.minimal ) {
78
+
79
+ this.container.addEventListener( 'click', ( event ) => {
80
+
81
+ event.preventDefault();
82
+ this.showPanel( ++ this.mode % this.container.children.length );
83
+
84
+ }, false );
85
+
86
+ this.mode = mode;
87
+ this.showPanel( this.mode );
88
+
89
+ } else {
90
+
91
+ window.addEventListener('resize', () =>{
92
+
93
+ this.resizePanel( this.fpsPanel, 0 );
94
+ this.resizePanel( this.msPanel, 1 );
95
+
96
+ if (this.gpuPanel) {
97
+ this.resizePanel( this.gpuPanel, 2 );
98
+ }
99
+ })
100
+ }
101
+
102
+ }
103
+
104
+ resizePanel( panel: Panel, offset: number) {
105
+
106
+ if ( this.minimal ) {
107
+
108
+ panel.canvas.style.display = 'none';
109
+
110
+ } else {
111
+
112
+ panel.canvas.style.display = 'block';
113
+ if (window.innerWidth < 700) {
114
+ panel.canvas.style.left = '0px';
115
+ panel.canvas.style.top = offset * panel.HEIGHT / panel.PR + 'px';
116
+
117
+ } else {
118
+ panel.canvas.style.top = '0px';
119
+ panel.canvas.style.left = offset * panel.WIDTH / panel.PR + 'px';
120
+ }
121
+ }
122
+ }
123
+
124
+ addPanel(panel: Panel, offset: number) {
125
+
126
+ if(panel.canvas) {
127
+
128
+ this.container.appendChild(panel.canvas);
129
+
130
+ this.resizePanel(panel, offset);
131
+
132
+ }
133
+
134
+ return panel;
135
+
136
+ }
137
+
138
+ showPanel( id: number ) {
139
+
140
+ for ( let i = 0; i < this.container.children.length; i ++ ) {
141
+ const child = this.container.children[i] as HTMLElement;
142
+
143
+ child.style.display = i === id ? 'block' : 'none';
144
+
145
+ }
146
+
147
+ this.mode = id;
148
+
149
+ }
150
+
151
+ init( canvas: any ) {
152
+
153
+ this.canvasGpu = canvas;
154
+ if ( ! this.canvasGpu ) return;
155
+ this.gl = this.canvasGpu.getContext( 'webgl2' );
156
+ this.ext = this.gl ? this.gl.getExtension( 'EXT_disjoint_timer_query_webgl2' ) : null;
157
+ if ( this.ext ) {
158
+
159
+ this.gpuPanel = this.addPanel( new Stats.Panel( 'GPU', '#ff0', '#220' ), 2 );
160
+
161
+ }
162
+
163
+ }
164
+
165
+ begin() {
166
+
167
+ this.beginProfiling( 'cpu-started' );
168
+ if ( ! this.gl || ! this.ext ) return;
169
+
170
+
171
+ if ( this.query ) {
172
+
173
+ const available = this.gl.getQueryParameter( this.query, this.gl.QUERY_RESULT_AVAILABLE );
174
+ this.disjoint = this.gl.getParameter( this.ext.GPU_DISJOINT_EXT );
175
+
176
+ if ( available && ! this.disjoint ) {
177
+
178
+ this.ns = this.gl.getQueryParameter( this.query, this.gl.QUERY_RESULT );
179
+ const ms = this.ns * 1e-6;
180
+
181
+ if ( available || this.disjoint ) {
182
+
183
+ this.gl.deleteQuery( this.query );
184
+ this.query = null;
185
+
186
+ }
187
+
188
+ if ( available ) {
189
+
190
+ this.addToAverage( ms, this.averageGpu );
191
+
192
+ }
193
+
194
+ }
195
+
196
+ }
197
+
198
+ if ( ! this.query ) {
199
+
200
+ this.queryCreated = true;
201
+ this.query = this.gl.createQuery();
202
+
203
+ if ( this.query ) {
204
+ this.gl.beginQuery( this.ext.TIME_ELAPSED_EXT, this.query );
205
+ }
206
+
207
+ }
208
+
209
+ }
210
+
211
+ end() {
212
+
213
+ this.beginTime = this.endInternal()
214
+
215
+ this.endProfiling( 'cpu-started', 'cpu-finished', 'cpu-duration', this.averageCpu );
216
+
217
+ if ( ! this.gl || ! this.ext ) return;
218
+
219
+
220
+ if ( this.queryCreated && this.gl.getQuery( this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY ) ) {
221
+
222
+ this.gl.endQuery( this.ext.TIME_ELAPSED_EXT );
223
+
224
+ }
225
+
226
+
227
+ }
228
+
229
+ endInternal() {
230
+
231
+ this.frames ++;
232
+ const time = ( performance || Date ).now();
233
+
234
+ if (time >= this.prevCpuTime + 1000 / this.logsPerSecond) {
235
+ this.updatePanel( this.msPanel, this.averageCpu );
236
+ this.updatePanel( this.gpuPanel, this.averageGpu );
237
+
238
+ this.prevCpuTime = time;
239
+ }
240
+
241
+ if ( time >= this.prevTime + 1000 ) {
242
+
243
+ const fps = ( this.frames * 1000 ) / ( time - this.prevTime );
244
+
245
+ this.fpsPanel.update(fps, fps, 100, 100, 0);
246
+
247
+ this.prevTime = time;
248
+ this.frames = 0;
249
+
250
+ }
251
+
252
+ return time;
253
+
254
+ }
255
+
256
+ addToAverage( value: number, averageArray: { logs: any; graph: any; } ) {
257
+
258
+ averageArray.logs.push( value );
259
+ if ( averageArray.logs.length > this.samplesLog ) {
260
+
261
+ averageArray.logs.shift();
262
+
263
+ }
264
+
265
+ averageArray.graph.push( value );
266
+ if ( averageArray.graph.length > this.samplesGraph ) {
267
+
268
+ averageArray.graph.shift();
269
+
270
+ }
271
+
272
+ }
273
+
274
+ beginProfiling( marker: string ) {
275
+
276
+ if ( window.performance ) {
277
+
278
+ window.performance.mark( marker );
279
+
280
+ }
281
+
282
+ }
283
+
284
+ endProfiling( startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string, averageArray: {logs: number[], graph: number[]} ) {
285
+
286
+ if ( window.performance && endMarker ) {
287
+
288
+ window.performance.mark( endMarker );
289
+ const cpuMeasure = performance.measure( measureName, startMarker, endMarker );
290
+ this.addToAverage( cpuMeasure.duration, averageArray );
291
+
292
+ }
293
+
294
+ }
295
+
296
+ updatePanel(panel: { update: any; } | null, averageArray: {logs: number[], graph: number[]}) {
297
+
298
+ if (averageArray.logs.length > 0) {
299
+
300
+ let sumLog = 0;
301
+ let max = 0.01;
302
+
303
+ for (let i = 0; i < averageArray.logs.length; i++) {
304
+
305
+ sumLog += averageArray.logs[i];
306
+
307
+ if (averageArray.logs[i] > max) {
308
+ max = averageArray.logs[i];
309
+ }
310
+
311
+ }
312
+
313
+ let sumGraph = 0;
314
+ let maxGraph = 0.01;
315
+ for (let i = 0; i < averageArray.graph.length; i++) {
316
+
317
+ sumGraph += averageArray.graph[i];
318
+
319
+ if (averageArray.graph[i] > maxGraph) {
320
+ maxGraph = averageArray.graph[i];
321
+ }
322
+
323
+ }
324
+
325
+ if (panel) {
326
+ panel.update(sumLog / Math.min(averageArray.logs.length,this.samplesLog), sumGraph / Math.min(averageArray.graph.length,this.samplesGraph), max, maxGraph, this.precision);
327
+ }
328
+
329
+ }
330
+ }
331
+
332
+
333
+ }
334
+
335
+ Stats.Panel = Panel
336
+
337
+ export default Stats;
package/lib/panel.ts ADDED
@@ -0,0 +1,85 @@
1
+ class Panel {
2
+ canvas: HTMLCanvasElement;
3
+ context: CanvasRenderingContext2D | null;
4
+ name: string;
5
+ fg: string;
6
+ bg: string;
7
+ PR: number;
8
+ WIDTH: number;
9
+ HEIGHT: number;
10
+ TEXT_X: number;
11
+ TEXT_Y: number;
12
+ GRAPH_X: number;
13
+ GRAPH_Y: number;
14
+ GRAPH_WIDTH: number;
15
+ GRAPH_HEIGHT: number;
16
+
17
+ constructor(name: string, fg: string, bg: string) {
18
+
19
+ this.name = name;
20
+ this.fg = fg;
21
+ this.bg = bg;
22
+ this.PR = Math.round( window.devicePixelRatio || 1 );
23
+
24
+ this.WIDTH = 90 * this.PR;
25
+ this.HEIGHT = 48 * this.PR;
26
+ this.TEXT_X = 3 * this.PR;
27
+ this.TEXT_Y = 2 * this.PR;
28
+ this.GRAPH_X = 3 * this.PR;
29
+ this.GRAPH_Y = 15 * this.PR;
30
+ this.GRAPH_WIDTH = 84 * this.PR;
31
+ this.GRAPH_HEIGHT = 30 * this.PR;
32
+
33
+ this.canvas = document.createElement('canvas');
34
+ this.canvas.width = 90 * this.PR;
35
+ this.canvas.height = 48 * this.PR;
36
+ this.canvas.style.width = '90px';
37
+ this.canvas.style.height = '48px';
38
+ this.canvas.style.cssText = 'width:90px;height:48px';
39
+
40
+ this.context = this.canvas.getContext('2d');
41
+
42
+ if (this.context) {
43
+ this.context.font = 'bold ' + (9 * this.PR) + 'px Helvetica,Arial,sans-serif';
44
+ this.context.textBaseline = 'top';
45
+
46
+ this.context.fillStyle = this.bg;
47
+ this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
48
+
49
+ this.context.fillStyle = this.fg;
50
+ this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
51
+ this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
52
+
53
+ this.context.fillStyle = this.bg;
54
+ this.context.globalAlpha = 0.9;
55
+ this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
56
+ }
57
+
58
+ }
59
+
60
+ update(value: number, valueGraph: number, maxValue: number, maxGraph: number, decimals = 0) {
61
+ let min = Infinity, max = 0;
62
+
63
+ if (!this.context) return;
64
+
65
+ min = Math.min(min, value);
66
+ max = Math.max(maxValue, value);
67
+ maxGraph = Math.max(maxGraph, valueGraph);
68
+
69
+ this.context.fillStyle = this.bg;
70
+ this.context.globalAlpha = 1;
71
+ this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
72
+ this.context.fillStyle = this.fg;
73
+ this.context.fillText(value.toFixed(decimals) + ' ' + this.name + ' (' + min.toFixed(decimals) + '-' + parseFloat(max.toFixed(decimals)) + ')', this.TEXT_X, this.TEXT_Y);
74
+
75
+ this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT);
76
+
77
+ this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
78
+
79
+ this.context.fillStyle = this.bg;
80
+ this.context.globalAlpha = 0.9;
81
+ this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, parseFloat((1 - (valueGraph / maxGraph)).toFixed(decimals)) * this.GRAPH_HEIGHT);
82
+ }
83
+ };
84
+
85
+ export default Panel;
package/package.json CHANGED
@@ -1,19 +1,31 @@
1
1
  {
2
2
  "name": "stats-gl",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
+ "author": "Renaud ROHLINGER (https://github.com/RenaudRohlinger)",
6
+ "homepage": "https://github.com/RenaudRohlinger/stats-gl",
7
+ "repository": "https://github.com/RenaudRohlinger/stats-gl",
8
+ "license": "MIT",
5
9
  "files": [
6
- "dist"
10
+ "dist/*",
11
+ "lib/*"
7
12
  ],
8
- "main": "./dist/stats-gl.umd.cjs",
9
- "module": "./dist/stats-gl.js",
10
13
  "types": "./dist/stats-gl.d.ts",
14
+ "main": "./dist/main.js",
15
+ "module": "./dist/main.mjs",
11
16
  "exports": {
12
17
  ".": {
13
- "import": "./dist/stats-gl.js",
14
- "require": "./dist/stats-gl.umd.cjs"
18
+ "types": "./dist/main.d.ts",
19
+ "require": "./dist/main.js",
20
+ "import": "./dist/main.mjs"
21
+ },
22
+ "./panel": {
23
+ "types": "./dist/panel.d.ts",
24
+ "require": "./dist/panel.js",
25
+ "import": "./dist/panel.mjs"
15
26
  }
16
27
  },
28
+ "sideEffects": false,
17
29
  "scripts": {
18
30
  "dev": "vite demo",
19
31
  "serve": "vite serve demo",
package/dist/stats-gl.es.js DELETED
@@ -1,135 +0,0 @@
1
- var P = Object.defineProperty;
2
- var g = (o, t, i) => t in o ? P(o, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[t] = i;
3
- var s = (o, t, i) => (g(o, typeof t != "symbol" ? t + "" : t, i), i);
4
- class p {
5
- constructor(t, i, h) {
6
- s(this, "canvas");
7
- s(this, "context");
8
- s(this, "name");
9
- s(this, "fg");
10
- s(this, "bg");
11
- s(this, "PR");
12
- s(this, "WIDTH");
13
- s(this, "HEIGHT");
14
- s(this, "TEXT_X");
15
- s(this, "TEXT_Y");
16
- s(this, "GRAPH_X");
17
- s(this, "GRAPH_Y");
18
- s(this, "GRAPH_WIDTH");
19
- s(this, "GRAPH_HEIGHT");
20
- this.name = t, this.fg = i, this.bg = h, this.PR = Math.round(window.devicePixelRatio || 1), this.WIDTH = 90 * this.PR, this.HEIGHT = 48 * this.PR, this.TEXT_X = 3 * this.PR, this.TEXT_Y = 2 * this.PR, this.GRAPH_X = 3 * this.PR, this.GRAPH_Y = 15 * this.PR, this.GRAPH_WIDTH = 84 * this.PR, this.GRAPH_HEIGHT = 30 * this.PR, this.canvas = document.createElement("canvas"), this.canvas.width = 90 * this.PR, this.canvas.height = 48 * this.PR, this.canvas.style.width = "90px", this.canvas.style.height = "48px", this.canvas.style.cssText = "width:90px;height:48px", this.context = this.canvas.getContext("2d"), this.context && (this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif", this.context.textBaseline = "top", this.context.fillStyle = this.bg, this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT), this.context.fillStyle = this.fg, this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y), this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT), this.context.fillStyle = this.bg, this.context.globalAlpha = 0.9, this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT));
21
- }
22
- update(t, i, h, l, n = 0) {
23
- let a = 1 / 0, e = 0;
24
- this.context && (a = Math.min(a, t), e = Math.max(h, t), l = Math.max(l, i), this.context.fillStyle = this.bg, this.context.globalAlpha = 1, this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y), this.context.fillStyle = this.fg, this.context.fillText(t.toFixed(n) + " " + this.name + " (" + a.toFixed(n) + "-" + parseFloat(e.toFixed(n)) + ")", this.TEXT_X, this.TEXT_Y), this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT), this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT), this.context.fillStyle = this.bg, this.context.globalAlpha = 0.9, this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, parseFloat((1 - i / l).toFixed(n)) * this.GRAPH_HEIGHT));
25
- }
26
- }
27
- const r = class r {
28
- constructor({ logsPerSecond: t = 20, samplesLog: i = 100, samplesGraph: h = 10, precision: l = 2, minimal: n = !1, mode: a = 0 } = {}) {
29
- s(this, "mode");
30
- s(this, "container");
31
- s(this, "minimal");
32
- s(this, "beginTime");
33
- s(this, "prevTime");
34
- s(this, "prevCpuTime");
35
- s(this, "frames");
36
- s(this, "averageCpu");
37
- s(this, "averageGpu");
38
- s(this, "queryCreated");
39
- s(this, "fpsPanel");
40
- s(this, "msPanel");
41
- s(this, "gpuPanel");
42
- s(this, "samplesLog");
43
- s(this, "samplesGraph");
44
- s(this, "logsPerSecond");
45
- s(this, "precision");
46
- s(this, "canvasGpu");
47
- s(this, "gl");
48
- s(this, "ext");
49
- s(this, "query");
50
- s(this, "disjoint");
51
- s(this, "ns");
52
- this.mode = a, this.container = document.createElement("div"), this.container.style.cssText = "position:fixed;top:0;left:0;opacity:0.9;z-index:10000;", n && (this.container.style.cssText += "cursor:pointer"), this.canvasGpu = null, this.gl = null, this.query = null, this.minimal = n, this.beginTime = (performance || Date).now(), this.prevTime = this.beginTime, this.prevCpuTime = this.beginTime, this.frames = 0, this.averageCpu = {
53
- logs: [],
54
- graph: []
55
- }, this.averageGpu = {
56
- logs: [],
57
- graph: []
58
- }, this.queryCreated = !1, this.fpsPanel = this.addPanel(new r.Panel("FPS", "#0ff", "#002"), 0), this.msPanel = this.addPanel(new r.Panel("CPU", "#0f0", "#020"), 1), this.gpuPanel = null, this.samplesLog = i, this.samplesGraph = h, this.precision = l, this.logsPerSecond = t, this.minimal ? (this.container.addEventListener("click", (e) => {
59
- e.preventDefault(), this.showPanel(++this.mode % this.container.children.length);
60
- }, !1), this.mode = a, this.showPanel(this.mode)) : window.addEventListener("resize", () => {
61
- this.resizePanel(this.fpsPanel, 0), this.resizePanel(this.msPanel, 1), this.gpuPanel && this.resizePanel(this.gpuPanel, 2);
62
- });
63
- }
64
- resizePanel(t, i) {
65
- this.minimal ? t.canvas.style.display = "none" : (t.canvas.style.display = "block", window.innerWidth < 700 ? (t.canvas.style.left = "0px", t.canvas.style.top = i * t.HEIGHT / t.PR + "px") : (t.canvas.style.top = "0px", t.canvas.style.left = i * t.WIDTH / t.PR + "px"));
66
- }
67
- addPanel(t, i) {
68
- return t.canvas && (this.container.appendChild(t.canvas), this.resizePanel(t, i)), t;
69
- }
70
- showPanel(t) {
71
- for (let i = 0; i < this.container.children.length; i++) {
72
- const h = this.container.children[i];
73
- h.style.display = i === t ? "block" : "none";
74
- }
75
- this.mode = t;
76
- }
77
- init(t) {
78
- this.canvasGpu = t, this.canvasGpu && (this.gl = this.canvasGpu.getContext("webgl2"), this.ext = this.gl ? this.gl.getExtension("EXT_disjoint_timer_query_webgl2") : null, this.ext && (this.gpuPanel = this.addPanel(new r.Panel("GPU", "#ff0", "#220"), 2)));
79
- }
80
- begin() {
81
- if (this.beginProfiling("cpu-started"), !(!this.gl || !this.ext)) {
82
- if (this.query) {
83
- const t = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT_AVAILABLE);
84
- if (this.disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT), t && !this.disjoint) {
85
- this.ns = this.gl.getQueryParameter(this.query, this.gl.QUERY_RESULT);
86
- const i = this.ns * 1e-6;
87
- (t || this.disjoint) && (this.gl.deleteQuery(this.query), this.query = null), t && this.addToAverage(i, this.averageGpu);
88
- }
89
- }
90
- this.query || (this.queryCreated = !0, this.query = this.gl.createQuery(), this.query && this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.query));
91
- }
92
- }
93
- end() {
94
- this.beginTime = this.endInternal(), this.endProfiling("cpu-started", "cpu-finished", "cpu-duration", this.averageCpu), !(!this.gl || !this.ext) && this.queryCreated && this.gl.getQuery(this.ext.TIME_ELAPSED_EXT, this.gl.CURRENT_QUERY) && this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
95
- }
96
- endInternal() {
97
- this.frames++;
98
- const t = (performance || Date).now();
99
- if (t >= this.prevCpuTime + 1e3 / this.logsPerSecond && (this.updatePanel(this.msPanel, this.averageCpu), this.updatePanel(this.gpuPanel, this.averageGpu), this.prevCpuTime = t), t >= this.prevTime + 1e3) {
100
- const i = this.frames * 1e3 / (t - this.prevTime);
101
- this.fpsPanel.update(i, i, 100, 100, 0), this.prevTime = t, this.frames = 0;
102
- }
103
- return t;
104
- }
105
- addToAverage(t, i) {
106
- i.logs.push(t), i.logs.length > this.samplesLog && i.logs.shift(), i.graph.push(t), i.graph.length > this.samplesGraph && i.graph.shift();
107
- }
108
- beginProfiling(t) {
109
- window.performance && window.performance.mark(t);
110
- }
111
- endProfiling(t, i, h, l) {
112
- if (window.performance && i) {
113
- window.performance.mark(i);
114
- const n = performance.measure(h, t, i);
115
- this.addToAverage(n.duration, l);
116
- }
117
- }
118
- updatePanel(t, i) {
119
- if (i.logs.length > 0) {
120
- let h = 0, l = 0.01;
121
- for (let e = 0; e < i.logs.length; e++)
122
- h += i.logs[e], i.logs[e] > l && (l = i.logs[e]);
123
- let n = 0, a = 0.01;
124
- for (let e = 0; e < i.graph.length; e++)
125
- n += i.graph[e], i.graph[e] > a && (a = i.graph[e]);
126
- t && t.update(h / Math.min(i.logs.length, this.samplesLog), n / Math.min(i.graph.length, this.samplesGraph), l, a, this.precision);
127
- }
128
- }
129
- };
130
- s(r, "Panel");
131
- let c = r;
132
- c.Panel = p;
133
- export {
134
- c as default
135
- };
package/dist/stats-gl.umd.js DELETED
@@ -1 +0,0 @@
1
- (function(o,e){typeof exports=="object"&&typeof module<"u"?module.exports=e():typeof define=="function"&&define.amd?define(e):(o=typeof globalThis<"u"?globalThis:o||self,o["Stats-Gl"]=e())})(this,function(){"use strict";var P=Object.defineProperty;var p=(o,e,n)=>e in o?P(o,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):o[e]=n;var s=(o,e,n)=>(p(o,typeof e!="symbol"?e+"":e,n),n);class o{constructor(t,i,l){s(this,"canvas");s(this,"context");s(this,"name");s(this,"fg");s(this,"bg");s(this,"PR");s(this,"WIDTH");s(this,"HEIGHT");s(this,"TEXT_X");s(this,"TEXT_Y");s(this,"GRAPH_X");s(this,"GRAPH_Y");s(this,"GRAPH_WIDTH");s(this,"GRAPH_HEIGHT");this.name=t,this.fg=i,this.bg=l,this.PR=Math.round(window.devicePixelRatio||1),this.WIDTH=90*this.PR,this.HEIGHT=48*this.PR,this.TEXT_X=3*this.PR,this.TEXT_Y=2*this.PR,this.GRAPH_X=3*this.PR,this.GRAPH_Y=15*this.PR,this.GRAPH_WIDTH=84*this.PR,this.GRAPH_HEIGHT=30*this.PR,this.canvas=document.createElement("canvas"),this.canvas.width=90*this.PR,this.canvas.height=48*this.PR,this.canvas.style.width="90px",this.canvas.style.height="48px",this.canvas.style.cssText="width:90px;height:48px",this.context=this.canvas.getContext("2d"),this.context&&(this.context.font="bold "+9*this.PR+"px Helvetica,Arial,sans-serif",this.context.textBaseline="top",this.context.fillStyle=this.bg,this.context.fillRect(0,0,this.WIDTH,this.HEIGHT),this.context.fillStyle=this.fg,this.context.fillText(this.name,this.TEXT_X,this.TEXT_Y),this.context.fillRect(this.GRAPH_X,this.GRAPH_Y,this.GRAPH_WIDTH,this.GRAPH_HEIGHT),this.context.fillStyle=this.bg,this.context.globalAlpha=.9,this.context.fillRect(this.GRAPH_X,this.GRAPH_Y,this.GRAPH_WIDTH,this.GRAPH_HEIGHT))}update(t,i,l,r,a=0){let c=1/0,h=0;this.context&&(c=Math.min(c,t),h=Math.max(l,t),r=Math.max(r,i),this.context.fillStyle=this.bg,this.context.globalAlpha=1,this.context.fillRect(0,0,this.WIDTH,this.GRAPH_Y),this.context.fillStyle=this.fg,this.context.fillText(t.toFixed(a)+" "+this.name+" ("+c.toFixed(a)+"-"+parseFloat(h.toFixed(a))+")",this.TEXT_X,this.TEXT_Y),this.context.drawImage(this.canvas,this.GRAPH_X+this.PR,this.GRAPH_Y,this.GRAPH_WIDTH-this.PR,this.GRAPH_HEIGHT,this.GRAPH_X,this.GRAPH_Y,this.GRAPH_WIDTH-this.PR,this.GRAPH_HEIGHT),this.context.fillRect(this.GRAPH_X+this.GRAPH_WIDTH-this.PR,this.GRAPH_Y,this.PR,this.GRAPH_HEIGHT),this.context.fillStyle=this.bg,this.context.globalAlpha=.9,this.context.fillRect(this.GRAPH_X+this.GRAPH_WIDTH-this.PR,this.GRAPH_Y,this.PR,parseFloat((1-i/r).toFixed(a))*this.GRAPH_HEIGHT))}}const n=class n{constructor({logsPerSecond:t=20,samplesLog:i=100,samplesGraph:l=10,precision:r=2,minimal:a=!1,mode:c=0}={}){s(this,"mode");s(this,"container");s(this,"minimal");s(this,"beginTime");s(this,"prevTime");s(this,"prevCpuTime");s(this,"frames");s(this,"averageCpu");s(this,"averageGpu");s(this,"queryCreated");s(this,"fpsPanel");s(this,"msPanel");s(this,"gpuPanel");s(this,"samplesLog");s(this,"samplesGraph");s(this,"logsPerSecond");s(this,"precision");s(this,"canvasGpu");s(this,"gl");s(this,"ext");s(this,"query");s(this,"disjoint");s(this,"ns");this.mode=c,this.container=document.createElement("div"),this.container.style.cssText="position:fixed;top:0;left:0;opacity:0.9;z-index:10000;",a&&(this.container.style.cssText+="cursor:pointer"),this.canvasGpu=null,this.gl=null,this.query=null,this.minimal=a,this.beginTime=(performance||Date).now(),this.prevTime=this.beginTime,this.prevCpuTime=this.beginTime,this.frames=0,this.averageCpu={logs:[],graph:[]},this.averageGpu={logs:[],graph:[]},this.queryCreated=!1,this.fpsPanel=this.addPanel(new n.Panel("FPS","#0ff","#002"),0),this.msPanel=this.addPanel(new n.Panel("CPU","#0f0","#020"),1),this.gpuPanel=null,this.samplesLog=i,this.samplesGraph=l,this.precision=r,this.logsPerSecond=t,this.minimal?(this.container.addEventListener("click",h=>{h.preventDefault(),this.showPanel(++this.mode%this.container.children.length)},!1),this.mode=c,this.showPanel(this.mode)):window.addEventListener("resize",()=>{this.resizePanel(this.fpsPanel,0),this.resizePanel(this.msPanel,1),this.gpuPanel&&this.resizePanel(this.gpuPanel,2)})}resizePanel(t,i){this.minimal?t.canvas.style.display="none":(t.canvas.style.display="block",window.innerWidth<700?(t.canvas.style.left="0px",t.canvas.style.top=i*t.HEIGHT/t.PR+"px"):(t.canvas.style.top="0px",t.canvas.style.left=i*t.WIDTH/t.PR+"px"))}addPanel(t,i){return t.canvas&&(this.container.appendChild(t.canvas),this.resizePanel(t,i)),t}showPanel(t){for(let i=0;i<this.container.children.length;i++){const l=this.container.children[i];l.style.display=i===t?"block":"none"}this.mode=t}init(t){this.canvasGpu=t,this.canvasGpu&&(this.gl=this.canvasGpu.getContext("webgl2"),this.ext=this.gl?this.gl.getExtension("EXT_disjoint_timer_query_webgl2"):null,this.ext&&(this.gpuPanel=this.addPanel(new n.Panel("GPU","#ff0","#220"),2)))}begin(){if(this.beginProfiling("cpu-started"),!(!this.gl||!this.ext)){if(this.query){const t=this.gl.getQueryParameter(this.query,this.gl.QUERY_RESULT_AVAILABLE);if(this.disjoint=this.gl.getParameter(this.ext.GPU_DISJOINT_EXT),t&&!this.disjoint){this.ns=this.gl.getQueryParameter(this.query,this.gl.QUERY_RESULT);const i=this.ns*1e-6;(t||this.disjoint)&&(this.gl.deleteQuery(this.query),this.query=null),t&&this.addToAverage(i,this.averageGpu)}}this.query||(this.queryCreated=!0,this.query=this.gl.createQuery(),this.query&&this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT,this.query))}}end(){this.beginTime=this.endInternal(),this.endProfiling("cpu-started","cpu-finished","cpu-duration",this.averageCpu),!(!this.gl||!this.ext)&&this.queryCreated&&this.gl.getQuery(this.ext.TIME_ELAPSED_EXT,this.gl.CURRENT_QUERY)&&this.gl.endQuery(this.ext.TIME_ELAPSED_EXT)}endInternal(){this.frames++;const t=(performance||Date).now();if(t>=this.prevCpuTime+1e3/this.logsPerSecond&&(this.updatePanel(this.msPanel,this.averageCpu),this.updatePanel(this.gpuPanel,this.averageGpu),this.prevCpuTime=t),t>=this.prevTime+1e3){const i=this.frames*1e3/(t-this.prevTime);this.fpsPanel.update(i,i,100,100,0),this.prevTime=t,this.frames=0}return t}addToAverage(t,i){i.logs.push(t),i.logs.length>this.samplesLog&&i.logs.shift(),i.graph.push(t),i.graph.length>this.samplesGraph&&i.graph.shift()}beginProfiling(t){window.performance&&window.performance.mark(t)}endProfiling(t,i,l,r){if(window.performance&&i){window.performance.mark(i);const a=performance.measure(l,t,i);this.addToAverage(a.duration,r)}}updatePanel(t,i){if(i.logs.length>0){let l=0,r=.01;for(let h=0;h<i.logs.length;h++)l+=i.logs[h],i.logs[h]>r&&(r=i.logs[h]);let a=0,c=.01;for(let h=0;h<i.graph.length;h++)a+=i.graph[h],i.graph[h]>c&&(c=i.graph[h]);t&&t.update(l/Math.min(i.logs.length,this.samplesLog),a/Math.min(i.graph.length,this.samplesGraph),r,c,this.precision)}}};s(n,"Panel");let e=n;return e.Panel=o,e});