stats-gl 2.3.0 → 2.4.1
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/dist/main.cjs +0 -3
- package/dist/main.cjs.map +1 -1
- package/dist/main.js +0 -3
- package/dist/main.js.map +1 -1
- package/dist/panel.cjs +85 -26
- package/dist/panel.cjs.map +1 -1
- package/dist/panel.js +85 -26
- package/dist/panel.js.map +1 -1
- package/dist/stats-gl.d.ts +3 -0
- package/lib/main.ts +0 -3
- package/lib/panel.ts +113 -33
- package/package.json +1 -1
package/dist/main.cjs
CHANGED
|
@@ -44,7 +44,6 @@ const _Stats = class _Stats2 {
|
|
|
44
44
|
this.horizontal = horizontal;
|
|
45
45
|
this.minimal = minimal;
|
|
46
46
|
this.trackGPU = trackGPU;
|
|
47
|
-
console.log("trackGPU", trackGPU);
|
|
48
47
|
this.samplesLog = samplesLog;
|
|
49
48
|
this.samplesGraph = samplesGraph;
|
|
50
49
|
this.precision = precision;
|
|
@@ -100,10 +99,8 @@ const _Stats = class _Stats2 {
|
|
|
100
99
|
return false;
|
|
101
100
|
}
|
|
102
101
|
async handleWebGPURenderer(renderer) {
|
|
103
|
-
console.log("renderer", renderer);
|
|
104
102
|
if (renderer.isWebGPURenderer) {
|
|
105
103
|
if (this.trackGPU) {
|
|
106
|
-
console.log("trackGPU", this.trackGPU);
|
|
107
104
|
renderer.backend.trackTimestamp = true;
|
|
108
105
|
if (await renderer.hasFeatureAsync("timestamp-query")) {
|
|
109
106
|
this.initializeWebGPUPanels();
|
package/dist/main.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.cjs","sources":["../lib/main.ts"],"sourcesContent":null,"names":["_Stats","panel","Panel"],"mappings":";;AAgCA,MAAM,SAAN,MAAMA,QAAM;AAAA,EAyCV,YAAY;AAAA,IACV,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,EACT,IAAkB,IAAI;AAvCtB,SAAQ,KAAoC;AAC5C,SAAQ,MAAkB;AAE1B,SAAQ,cAAiC;AACzC,SAAQ,aAA0B;AAClC,SAAQ,uBAAuB;AAK/B,SAAQ,SAAS;AACjB,SAAQ,cAAc;AACtB,SAAQ,wBAAwB;AAEhC,SAAQ,mBAAmB;AAC3B,SAAQ,mBAAmB;AAC3B,SAAQ,0BAA0B;AAClC,SAAQ,WAAW;AAInB,SAAQ,WAAyB;AACjC,SAAQ,kBAAgC;AAExC,SAAQ,aAA0B,EAAE,MAAM,CAAA,GAAI,OAAO,CAAA;AACrD,SAAQ,aAA0B,EAAE,MAAM,CAAA,GAAI,OAAO,CAAA;AACrD,SAAQ,oBAAiC,EAAE,MAAM,CAAA,GAAI,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"main.cjs","sources":["../lib/main.ts"],"sourcesContent":null,"names":["_Stats","panel","Panel"],"mappings":"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"}
|
package/dist/main.js
CHANGED
|
@@ -43,7 +43,6 @@ const _Stats = class _Stats2 {
|
|
|
43
43
|
this.horizontal = horizontal;
|
|
44
44
|
this.minimal = minimal;
|
|
45
45
|
this.trackGPU = trackGPU;
|
|
46
|
-
console.log("trackGPU", trackGPU);
|
|
47
46
|
this.samplesLog = samplesLog;
|
|
48
47
|
this.samplesGraph = samplesGraph;
|
|
49
48
|
this.precision = precision;
|
|
@@ -99,10 +98,8 @@ const _Stats = class _Stats2 {
|
|
|
99
98
|
return false;
|
|
100
99
|
}
|
|
101
100
|
async handleWebGPURenderer(renderer) {
|
|
102
|
-
console.log("renderer", renderer);
|
|
103
101
|
if (renderer.isWebGPURenderer) {
|
|
104
102
|
if (this.trackGPU) {
|
|
105
|
-
console.log("trackGPU", this.trackGPU);
|
|
106
103
|
renderer.backend.trackTimestamp = true;
|
|
107
104
|
if (await renderer.hasFeatureAsync("timestamp-query")) {
|
|
108
105
|
this.initializeWebGPUPanels();
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../lib/main.ts"],"sourcesContent":null,"names":["_Stats"],"mappings":";AAgCA,MAAM,SAAN,MAAMA,QAAM;AAAA,EAyCV,YAAY;AAAA,IACV,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,EACT,IAAkB,IAAI;AAvCtB,SAAQ,KAAoC;AAC5C,SAAQ,MAAkB;AAE1B,SAAQ,cAAiC;AACzC,SAAQ,aAA0B;AAClC,SAAQ,uBAAuB;AAK/B,SAAQ,SAAS;AACjB,SAAQ,cAAc;AACtB,SAAQ,wBAAwB;AAEhC,SAAQ,mBAAmB;AAC3B,SAAQ,mBAAmB;AAC3B,SAAQ,0BAA0B;AAClC,SAAQ,WAAW;AAInB,SAAQ,WAAyB;AACjC,SAAQ,kBAAgC;AAExC,SAAQ,aAA0B,EAAE,MAAM,CAAA,GAAI,OAAO,CAAA;AACrD,SAAQ,aAA0B,EAAE,MAAM,CAAA,GAAI,OAAO,CAAA;AACrD,SAAQ,oBAAiC,EAAE,MAAM,CAAA,GAAI,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../lib/main.ts"],"sourcesContent":null,"names":["_Stats"],"mappings":"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"}
|
package/dist/panel.cjs
CHANGED
|
@@ -5,6 +5,7 @@ class Panel {
|
|
|
5
5
|
this.name = name;
|
|
6
6
|
this.fg = fg;
|
|
7
7
|
this.bg = bg;
|
|
8
|
+
this.gradient = null;
|
|
8
9
|
this.PR = Math.round(window.devicePixelRatio || 1);
|
|
9
10
|
this.WIDTH = 90 * this.PR;
|
|
10
11
|
this.HEIGHT = 48 * this.PR;
|
|
@@ -15,45 +16,103 @@ class Panel {
|
|
|
15
16
|
this.GRAPH_WIDTH = 84 * this.PR;
|
|
16
17
|
this.GRAPH_HEIGHT = 30 * this.PR;
|
|
17
18
|
this.canvas = document.createElement("canvas");
|
|
18
|
-
this.canvas.width =
|
|
19
|
-
this.canvas.height =
|
|
19
|
+
this.canvas.width = this.WIDTH;
|
|
20
|
+
this.canvas.height = this.HEIGHT;
|
|
20
21
|
this.canvas.style.width = "90px";
|
|
21
|
-
this.canvas.style.position = "absolute";
|
|
22
22
|
this.canvas.style.height = "48px";
|
|
23
|
+
this.canvas.style.position = "absolute";
|
|
23
24
|
this.canvas.style.cssText = "width:90px;height:48px";
|
|
24
25
|
this.context = this.canvas.getContext("2d");
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
this.
|
|
33
|
-
|
|
34
|
-
this.
|
|
35
|
-
|
|
26
|
+
this.initializeCanvas();
|
|
27
|
+
}
|
|
28
|
+
createGradient() {
|
|
29
|
+
if (!this.context)
|
|
30
|
+
throw new Error("No context");
|
|
31
|
+
const gradient = this.context.createLinearGradient(
|
|
32
|
+
0,
|
|
33
|
+
this.GRAPH_Y,
|
|
34
|
+
0,
|
|
35
|
+
this.GRAPH_Y + this.GRAPH_HEIGHT
|
|
36
|
+
);
|
|
37
|
+
let startColor;
|
|
38
|
+
const endColor = this.fg;
|
|
39
|
+
switch (this.fg.toLowerCase()) {
|
|
40
|
+
case "#0ff":
|
|
41
|
+
startColor = "#006666";
|
|
42
|
+
break;
|
|
43
|
+
case "#0f0":
|
|
44
|
+
startColor = "#006600";
|
|
45
|
+
break;
|
|
46
|
+
case "#ff0":
|
|
47
|
+
startColor = "#666600";
|
|
48
|
+
break;
|
|
49
|
+
case "#e1e1e1":
|
|
50
|
+
startColor = "#666666";
|
|
51
|
+
break;
|
|
52
|
+
default:
|
|
53
|
+
startColor = this.bg;
|
|
54
|
+
break;
|
|
36
55
|
}
|
|
56
|
+
gradient.addColorStop(0, startColor);
|
|
57
|
+
gradient.addColorStop(1, endColor);
|
|
58
|
+
return gradient;
|
|
37
59
|
}
|
|
38
|
-
|
|
39
|
-
let min = Infinity, max = 0;
|
|
60
|
+
initializeCanvas() {
|
|
40
61
|
if (!this.context)
|
|
41
62
|
return;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
63
|
+
this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
|
|
64
|
+
this.context.textBaseline = "top";
|
|
65
|
+
this.gradient = this.createGradient();
|
|
45
66
|
this.context.fillStyle = this.bg;
|
|
46
|
-
this.context.
|
|
47
|
-
this.context.
|
|
67
|
+
this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
|
|
68
|
+
this.context.fillStyle = this.fg;
|
|
69
|
+
this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
|
|
48
70
|
this.context.fillStyle = this.fg;
|
|
49
|
-
this.context.
|
|
50
|
-
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);
|
|
51
|
-
this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
|
|
71
|
+
this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
|
|
52
72
|
this.context.fillStyle = this.bg;
|
|
53
73
|
this.context.globalAlpha = 0.9;
|
|
54
|
-
this.context.fillRect(this.GRAPH_X
|
|
74
|
+
this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
|
|
75
|
+
}
|
|
76
|
+
update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
|
|
77
|
+
if (!this.context || !this.gradient)
|
|
78
|
+
return;
|
|
79
|
+
const min = Math.min(Infinity, value);
|
|
80
|
+
const max = Math.max(maxValue, value);
|
|
81
|
+
maxGraph = Math.max(maxGraph, valueGraph);
|
|
82
|
+
this.context.globalAlpha = 1;
|
|
83
|
+
this.context.fillStyle = this.bg;
|
|
84
|
+
this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
|
|
85
|
+
this.context.fillStyle = this.fg;
|
|
86
|
+
this.context.fillText(
|
|
87
|
+
`${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
|
|
88
|
+
max.toFixed(decimals)
|
|
89
|
+
)})`,
|
|
90
|
+
this.TEXT_X,
|
|
91
|
+
this.TEXT_Y
|
|
92
|
+
);
|
|
93
|
+
this.context.drawImage(
|
|
94
|
+
this.canvas,
|
|
95
|
+
this.GRAPH_X + this.PR,
|
|
96
|
+
this.GRAPH_Y,
|
|
97
|
+
this.GRAPH_WIDTH - this.PR,
|
|
98
|
+
this.GRAPH_HEIGHT,
|
|
99
|
+
this.GRAPH_X,
|
|
100
|
+
this.GRAPH_Y,
|
|
101
|
+
this.GRAPH_WIDTH - this.PR,
|
|
102
|
+
this.GRAPH_HEIGHT
|
|
103
|
+
);
|
|
104
|
+
const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
|
|
105
|
+
if (columnHeight > 0) {
|
|
106
|
+
this.context.globalAlpha = 1;
|
|
107
|
+
this.context.fillStyle = this.gradient;
|
|
108
|
+
this.context.fillRect(
|
|
109
|
+
this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
|
|
110
|
+
this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
|
|
111
|
+
this.PR,
|
|
112
|
+
columnHeight
|
|
113
|
+
);
|
|
114
|
+
}
|
|
55
115
|
}
|
|
56
116
|
}
|
|
57
|
-
;
|
|
58
117
|
exports.Panel = Panel;
|
|
59
118
|
//# sourceMappingURL=panel.cjs.map
|
package/dist/panel.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":";;AAAA,MAAM,MAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
|
package/dist/panel.js
CHANGED
|
@@ -3,6 +3,7 @@ class Panel {
|
|
|
3
3
|
this.name = name;
|
|
4
4
|
this.fg = fg;
|
|
5
5
|
this.bg = bg;
|
|
6
|
+
this.gradient = null;
|
|
6
7
|
this.PR = Math.round(window.devicePixelRatio || 1);
|
|
7
8
|
this.WIDTH = 90 * this.PR;
|
|
8
9
|
this.HEIGHT = 48 * this.PR;
|
|
@@ -13,46 +14,104 @@ class Panel {
|
|
|
13
14
|
this.GRAPH_WIDTH = 84 * this.PR;
|
|
14
15
|
this.GRAPH_HEIGHT = 30 * this.PR;
|
|
15
16
|
this.canvas = document.createElement("canvas");
|
|
16
|
-
this.canvas.width =
|
|
17
|
-
this.canvas.height =
|
|
17
|
+
this.canvas.width = this.WIDTH;
|
|
18
|
+
this.canvas.height = this.HEIGHT;
|
|
18
19
|
this.canvas.style.width = "90px";
|
|
19
|
-
this.canvas.style.position = "absolute";
|
|
20
20
|
this.canvas.style.height = "48px";
|
|
21
|
+
this.canvas.style.position = "absolute";
|
|
21
22
|
this.canvas.style.cssText = "width:90px;height:48px";
|
|
22
23
|
this.context = this.canvas.getContext("2d");
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
this.
|
|
31
|
-
|
|
32
|
-
this.
|
|
33
|
-
|
|
24
|
+
this.initializeCanvas();
|
|
25
|
+
}
|
|
26
|
+
createGradient() {
|
|
27
|
+
if (!this.context)
|
|
28
|
+
throw new Error("No context");
|
|
29
|
+
const gradient = this.context.createLinearGradient(
|
|
30
|
+
0,
|
|
31
|
+
this.GRAPH_Y,
|
|
32
|
+
0,
|
|
33
|
+
this.GRAPH_Y + this.GRAPH_HEIGHT
|
|
34
|
+
);
|
|
35
|
+
let startColor;
|
|
36
|
+
const endColor = this.fg;
|
|
37
|
+
switch (this.fg.toLowerCase()) {
|
|
38
|
+
case "#0ff":
|
|
39
|
+
startColor = "#006666";
|
|
40
|
+
break;
|
|
41
|
+
case "#0f0":
|
|
42
|
+
startColor = "#006600";
|
|
43
|
+
break;
|
|
44
|
+
case "#ff0":
|
|
45
|
+
startColor = "#666600";
|
|
46
|
+
break;
|
|
47
|
+
case "#e1e1e1":
|
|
48
|
+
startColor = "#666666";
|
|
49
|
+
break;
|
|
50
|
+
default:
|
|
51
|
+
startColor = this.bg;
|
|
52
|
+
break;
|
|
34
53
|
}
|
|
54
|
+
gradient.addColorStop(0, startColor);
|
|
55
|
+
gradient.addColorStop(1, endColor);
|
|
56
|
+
return gradient;
|
|
35
57
|
}
|
|
36
|
-
|
|
37
|
-
let min = Infinity, max = 0;
|
|
58
|
+
initializeCanvas() {
|
|
38
59
|
if (!this.context)
|
|
39
60
|
return;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
61
|
+
this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
|
|
62
|
+
this.context.textBaseline = "top";
|
|
63
|
+
this.gradient = this.createGradient();
|
|
43
64
|
this.context.fillStyle = this.bg;
|
|
44
|
-
this.context.
|
|
45
|
-
this.context.
|
|
65
|
+
this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
|
|
66
|
+
this.context.fillStyle = this.fg;
|
|
67
|
+
this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
|
|
46
68
|
this.context.fillStyle = this.fg;
|
|
47
|
-
this.context.
|
|
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);
|
|
69
|
+
this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
|
|
50
70
|
this.context.fillStyle = this.bg;
|
|
51
71
|
this.context.globalAlpha = 0.9;
|
|
52
|
-
this.context.fillRect(this.GRAPH_X
|
|
72
|
+
this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
|
|
73
|
+
}
|
|
74
|
+
update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
|
|
75
|
+
if (!this.context || !this.gradient)
|
|
76
|
+
return;
|
|
77
|
+
const min = Math.min(Infinity, value);
|
|
78
|
+
const max = Math.max(maxValue, value);
|
|
79
|
+
maxGraph = Math.max(maxGraph, valueGraph);
|
|
80
|
+
this.context.globalAlpha = 1;
|
|
81
|
+
this.context.fillStyle = this.bg;
|
|
82
|
+
this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
|
|
83
|
+
this.context.fillStyle = this.fg;
|
|
84
|
+
this.context.fillText(
|
|
85
|
+
`${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
|
|
86
|
+
max.toFixed(decimals)
|
|
87
|
+
)})`,
|
|
88
|
+
this.TEXT_X,
|
|
89
|
+
this.TEXT_Y
|
|
90
|
+
);
|
|
91
|
+
this.context.drawImage(
|
|
92
|
+
this.canvas,
|
|
93
|
+
this.GRAPH_X + this.PR,
|
|
94
|
+
this.GRAPH_Y,
|
|
95
|
+
this.GRAPH_WIDTH - this.PR,
|
|
96
|
+
this.GRAPH_HEIGHT,
|
|
97
|
+
this.GRAPH_X,
|
|
98
|
+
this.GRAPH_Y,
|
|
99
|
+
this.GRAPH_WIDTH - this.PR,
|
|
100
|
+
this.GRAPH_HEIGHT
|
|
101
|
+
);
|
|
102
|
+
const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
|
|
103
|
+
if (columnHeight > 0) {
|
|
104
|
+
this.context.globalAlpha = 1;
|
|
105
|
+
this.context.fillStyle = this.gradient;
|
|
106
|
+
this.context.fillRect(
|
|
107
|
+
this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
|
|
108
|
+
this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
|
|
109
|
+
this.PR,
|
|
110
|
+
columnHeight
|
|
111
|
+
);
|
|
112
|
+
}
|
|
53
113
|
}
|
|
54
114
|
}
|
|
55
|
-
;
|
|
56
115
|
export {
|
|
57
116
|
Panel
|
|
58
117
|
};
|
package/dist/panel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"AAAA,MAAM,MAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
|
package/dist/stats-gl.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ declare class Panel {
|
|
|
4
4
|
name: string;
|
|
5
5
|
fg: string;
|
|
6
6
|
bg: string;
|
|
7
|
+
gradient: CanvasGradient | null;
|
|
7
8
|
PR: number;
|
|
8
9
|
WIDTH: number;
|
|
9
10
|
HEIGHT: number;
|
|
@@ -14,6 +15,8 @@ declare class Panel {
|
|
|
14
15
|
GRAPH_WIDTH: number;
|
|
15
16
|
GRAPH_HEIGHT: number;
|
|
16
17
|
constructor(name: string, fg: string, bg: string);
|
|
18
|
+
private createGradient;
|
|
19
|
+
private initializeCanvas;
|
|
17
20
|
update(value: number, valueGraph: number, maxValue: number, maxGraph: number, decimals?: number): void;
|
|
18
21
|
}
|
|
19
22
|
|
package/lib/main.ts
CHANGED
|
@@ -85,7 +85,6 @@ class Stats {
|
|
|
85
85
|
this.horizontal = horizontal;
|
|
86
86
|
this.minimal = minimal;
|
|
87
87
|
this.trackGPU = trackGPU;
|
|
88
|
-
console.log('trackGPU', trackGPU);
|
|
89
88
|
this.samplesLog = samplesLog;
|
|
90
89
|
this.samplesGraph = samplesGraph;
|
|
91
90
|
this.precision = precision;
|
|
@@ -167,10 +166,8 @@ class Stats {
|
|
|
167
166
|
}
|
|
168
167
|
|
|
169
168
|
private async handleWebGPURenderer(renderer: any): Promise<boolean> {
|
|
170
|
-
console.log('renderer', renderer);
|
|
171
169
|
if (renderer.isWebGPURenderer) {
|
|
172
170
|
if (this.trackGPU) {
|
|
173
|
-
console.log('trackGPU', this.trackGPU);
|
|
174
171
|
renderer.backend.trackTimestamp = true;
|
|
175
172
|
if (await renderer.hasFeatureAsync('timestamp-query')) {
|
|
176
173
|
this.initializeWebGPUPanels();
|
package/lib/panel.ts
CHANGED
|
@@ -4,6 +4,7 @@ class Panel {
|
|
|
4
4
|
name: string;
|
|
5
5
|
fg: string;
|
|
6
6
|
bg: string;
|
|
7
|
+
gradient: CanvasGradient | null;
|
|
7
8
|
PR: number;
|
|
8
9
|
WIDTH: number;
|
|
9
10
|
HEIGHT: number;
|
|
@@ -15,10 +16,10 @@ class Panel {
|
|
|
15
16
|
GRAPH_HEIGHT: number;
|
|
16
17
|
|
|
17
18
|
constructor(name: string, fg: string, bg: string) {
|
|
18
|
-
|
|
19
19
|
this.name = name;
|
|
20
20
|
this.fg = fg;
|
|
21
21
|
this.bg = bg;
|
|
22
|
+
this.gradient = null;
|
|
22
23
|
this.PR = Math.round(window.devicePixelRatio || 1);
|
|
23
24
|
|
|
24
25
|
this.WIDTH = 90 * this.PR;
|
|
@@ -31,57 +32,136 @@ class Panel {
|
|
|
31
32
|
this.GRAPH_HEIGHT = 30 * this.PR;
|
|
32
33
|
|
|
33
34
|
this.canvas = document.createElement('canvas');
|
|
34
|
-
this.canvas.width =
|
|
35
|
-
this.canvas.height =
|
|
35
|
+
this.canvas.width = this.WIDTH;
|
|
36
|
+
this.canvas.height = this.HEIGHT;
|
|
36
37
|
this.canvas.style.width = '90px';
|
|
37
|
-
this.canvas.style.position = 'absolute';
|
|
38
38
|
this.canvas.style.height = '48px';
|
|
39
|
+
this.canvas.style.position = 'absolute';
|
|
39
40
|
this.canvas.style.cssText = 'width:90px;height:48px';
|
|
40
41
|
|
|
41
42
|
this.context = this.canvas.getContext('2d');
|
|
43
|
+
this.initializeCanvas();
|
|
44
|
+
}
|
|
42
45
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
this.
|
|
49
|
-
|
|
50
|
-
this.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
46
|
+
private createGradient(): CanvasGradient {
|
|
47
|
+
if (!this.context) throw new Error('No context');
|
|
48
|
+
|
|
49
|
+
const gradient = this.context.createLinearGradient(
|
|
50
|
+
0,
|
|
51
|
+
this.GRAPH_Y,
|
|
52
|
+
0,
|
|
53
|
+
this.GRAPH_Y + this.GRAPH_HEIGHT
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
let startColor: string;
|
|
57
|
+
const endColor: string = this.fg;
|
|
58
|
+
|
|
59
|
+
switch (this.fg.toLowerCase()) {
|
|
60
|
+
case '#0ff': // Cyan
|
|
61
|
+
startColor = '#006666'; // Dark Cyan
|
|
62
|
+
break;
|
|
63
|
+
case '#0f0': // Green
|
|
64
|
+
startColor = '#006600'; // Dark Green
|
|
65
|
+
break;
|
|
66
|
+
case '#ff0': // Yellow
|
|
67
|
+
startColor = '#666600'; // Dark Yellow
|
|
68
|
+
break;
|
|
69
|
+
case '#e1e1e1': // Light Gray
|
|
70
|
+
startColor = '#666666'; // Medium Gray
|
|
71
|
+
break;
|
|
72
|
+
default:
|
|
73
|
+
startColor = this.bg;
|
|
74
|
+
break;
|
|
57
75
|
}
|
|
58
76
|
|
|
59
|
-
|
|
77
|
+
gradient.addColorStop(0, startColor);
|
|
78
|
+
gradient.addColorStop(1, endColor);
|
|
60
79
|
|
|
61
|
-
|
|
62
|
-
|
|
80
|
+
return gradient;
|
|
81
|
+
}
|
|
63
82
|
|
|
83
|
+
private initializeCanvas() {
|
|
64
84
|
if (!this.context) return;
|
|
65
85
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
maxGraph = Math.max(maxGraph, valueGraph);
|
|
86
|
+
this.context.font = 'bold ' + (9 * this.PR) + 'px Helvetica,Arial,sans-serif';
|
|
87
|
+
this.context.textBaseline = 'top';
|
|
69
88
|
|
|
89
|
+
// Create gradient
|
|
90
|
+
this.gradient = this.createGradient();
|
|
91
|
+
|
|
92
|
+
// Fill background
|
|
70
93
|
this.context.fillStyle = this.bg;
|
|
71
|
-
this.context.
|
|
72
|
-
this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
|
|
73
|
-
this.context.fillStyle = this.fg;
|
|
74
|
-
this.context.fillText(value.toFixed(decimals) + ' ' + this.name + ' (' + min.toFixed(decimals) + '-' + parseFloat(max.toFixed(decimals)) + ')', this.TEXT_X, this.TEXT_Y);
|
|
94
|
+
this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
|
|
75
95
|
|
|
76
|
-
|
|
96
|
+
// Draw text
|
|
97
|
+
this.context.fillStyle = this.fg;
|
|
98
|
+
this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
|
|
77
99
|
|
|
78
|
-
|
|
100
|
+
// Draw initial graph area
|
|
101
|
+
this.context.fillStyle = this.fg;
|
|
102
|
+
this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
|
|
79
103
|
|
|
104
|
+
// Apply semi-transparent background
|
|
80
105
|
this.context.fillStyle = this.bg;
|
|
81
106
|
this.context.globalAlpha = 0.9;
|
|
107
|
+
this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
update(
|
|
111
|
+
value: number,
|
|
112
|
+
valueGraph: number,
|
|
113
|
+
maxValue: number,
|
|
114
|
+
maxGraph: number,
|
|
115
|
+
decimals = 0
|
|
116
|
+
) {
|
|
117
|
+
if (!this.context || !this.gradient) return;
|
|
118
|
+
|
|
119
|
+
const min = Math.min(Infinity, value);
|
|
120
|
+
const max = Math.max(maxValue, value);
|
|
121
|
+
maxGraph = Math.max(maxGraph, valueGraph);
|
|
82
122
|
|
|
83
|
-
|
|
123
|
+
// Clear and redraw background
|
|
124
|
+
this.context.globalAlpha = 1;
|
|
125
|
+
this.context.fillStyle = this.bg;
|
|
126
|
+
this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
|
|
127
|
+
|
|
128
|
+
// Draw text
|
|
129
|
+
this.context.fillStyle = this.fg;
|
|
130
|
+
this.context.fillText(
|
|
131
|
+
`${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
|
|
132
|
+
max.toFixed(decimals)
|
|
133
|
+
)})`,
|
|
134
|
+
this.TEXT_X,
|
|
135
|
+
this.TEXT_Y
|
|
136
|
+
);
|
|
137
|
+
|
|
138
|
+
// Shift the graph left
|
|
139
|
+
this.context.drawImage(
|
|
140
|
+
this.canvas,
|
|
141
|
+
this.GRAPH_X + this.PR,
|
|
142
|
+
this.GRAPH_Y,
|
|
143
|
+
this.GRAPH_WIDTH - this.PR,
|
|
144
|
+
this.GRAPH_HEIGHT,
|
|
145
|
+
this.GRAPH_X,
|
|
146
|
+
this.GRAPH_Y,
|
|
147
|
+
this.GRAPH_WIDTH - this.PR,
|
|
148
|
+
this.GRAPH_HEIGHT
|
|
149
|
+
);
|
|
150
|
+
|
|
151
|
+
// Draw new column with gradient
|
|
152
|
+
const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
|
|
153
|
+
|
|
154
|
+
if (columnHeight > 0) {
|
|
155
|
+
this.context.globalAlpha = 1;
|
|
156
|
+
this.context.fillStyle = this.gradient;
|
|
157
|
+
this.context.fillRect(
|
|
158
|
+
this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
|
|
159
|
+
this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
|
|
160
|
+
this.PR,
|
|
161
|
+
columnHeight
|
|
162
|
+
);
|
|
163
|
+
}
|
|
84
164
|
}
|
|
85
|
-
}
|
|
165
|
+
}
|
|
86
166
|
|
|
87
|
-
export { Panel };
|
|
167
|
+
export { Panel };
|