Favivon - Correção

This commit is contained in:
2026-05-30 19:59:39 -03:00
parent 76ddaa815d
commit d7dfd221f0
32859 changed files with 5459654 additions and 404 deletions
+327
View File
@@ -0,0 +1,327 @@
"use strict";
const panel = require("./panel.cjs");
const _Stats = class _Stats2 {
constructor({
trackGPU = false,
logsPerSecond = 30,
samplesLog = 60,
samplesGraph = 10,
precision = 2,
minimal = false,
horizontal = true,
mode = 0
} = {}) {
this.gl = null;
this.ext = null;
this.activeQuery = null;
this.gpuQueries = [];
this.threeRendererPatched = false;
this.frames = 0;
this.renderCount = 0;
this.isRunningCPUProfiling = false;
this.totalCpuDuration = 0;
this.totalGpuDuration = 0;
this.totalGpuDurationCompute = 0;
this.totalFps = 0;
this.gpuPanel = null;
this.gpuPanelCompute = null;
this.averageFps = { logs: [], graph: [] };
this.averageCpu = { logs: [], graph: [] };
this.averageGpu = { logs: [], graph: [] };
this.averageGpuCompute = { logs: [], graph: [] };
this.handleClick = (event) => {
event.preventDefault();
this.showPanel(++this.mode % this.dom.children.length);
};
this.handleResize = () => {
this.resizePanel(this.fpsPanel, 0);
this.resizePanel(this.msPanel, 1);
if (this.gpuPanel)
this.resizePanel(this.gpuPanel, 2);
if (this.gpuPanelCompute)
this.resizePanel(this.gpuPanelCompute, 3);
};
this.mode = mode;
this.horizontal = horizontal;
this.minimal = minimal;
this.trackGPU = trackGPU;
this.samplesLog = samplesLog;
this.samplesGraph = samplesGraph;
this.precision = precision;
this.logsPerSecond = logsPerSecond;
this.dom = document.createElement("div");
this.initializeDOM();
this.beginTime = performance.now();
this.prevTime = this.beginTime;
this.prevCpuTime = this.beginTime;
this.fpsPanel = this.addPanel(new _Stats2.Panel("FPS", "#0ff", "#002"), 0);
this.msPanel = this.addPanel(new _Stats2.Panel("CPU", "#0f0", "#020"), 1);
this.setupEventListeners();
}
initializeDOM() {
this.dom.style.cssText = `
position: fixed;
top: 0;
left: 0;
opacity: 0.9;
z-index: 10000;
${this.minimal ? "cursor: pointer;" : ""}
`;
}
setupEventListeners() {
if (this.minimal) {
this.dom.addEventListener("click", this.handleClick);
this.showPanel(this.mode);
} else {
window.addEventListener("resize", this.handleResize);
}
}
async init(canvasOrGL) {
if (!canvasOrGL) {
console.error('Stats: The "canvas" parameter is undefined.');
return;
}
if (this.handleThreeRenderer(canvasOrGL))
return;
if (await this.handleWebGPURenderer(canvasOrGL))
return;
if (!this.initializeWebGL(canvasOrGL))
return;
}
handleThreeRenderer(renderer) {
if (renderer.isWebGLRenderer && !this.threeRendererPatched) {
this.patchThreeRenderer(renderer);
this.gl = renderer.getContext();
if (this.trackGPU) {
this.initializeGPUTracking();
}
return true;
}
return false;
}
async handleWebGPURenderer(renderer) {
if (renderer.isWebGPURenderer) {
if (this.trackGPU) {
renderer.backend.trackTimestamp = true;
if (await renderer.hasFeatureAsync("timestamp-query")) {
this.initializeWebGPUPanels();
}
}
this.info = renderer.info;
return true;
}
return false;
}
initializeWebGPUPanels() {
this.gpuPanel = this.addPanel(new _Stats2.Panel("GPU", "#ff0", "#220"), 2);
this.gpuPanelCompute = this.addPanel(
new _Stats2.Panel("CPT", "#e1e1e1", "#212121"),
3
);
}
initializeWebGL(canvasOrGL) {
if (canvasOrGL instanceof WebGL2RenderingContext) {
this.gl = canvasOrGL;
} else if (canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
this.gl = canvasOrGL.getContext("webgl2");
if (!this.gl) {
console.error("Stats: Unable to obtain WebGL2 context.");
return false;
}
} else {
console.error(
"Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas."
);
return false;
}
return true;
}
initializeGPUTracking() {
if (this.gl) {
this.ext = this.gl.getExtension("EXT_disjoint_timer_query_webgl2");
if (this.ext) {
this.gpuPanel = this.addPanel(new _Stats2.Panel("GPU", "#ff0", "#220"), 2);
}
}
}
begin() {
if (!this.isRunningCPUProfiling) {
this.beginProfiling("cpu-started");
}
if (!this.gl || !this.ext)
return;
if (this.activeQuery) {
this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
}
this.activeQuery = this.gl.createQuery();
if (this.activeQuery) {
this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.activeQuery);
}
}
end() {
this.renderCount++;
if (this.gl && this.ext && this.activeQuery) {
this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
this.gpuQueries.push({ query: this.activeQuery });
this.activeQuery = null;
}
}
update() {
if (!this.info) {
this.processGpuQueries();
} else {
this.processWebGPUTimestamps();
}
this.endProfiling("cpu-started", "cpu-finished", "cpu-duration");
this.updateAverages();
this.resetCounters();
}
processWebGPUTimestamps() {
this.totalGpuDuration = this.info.render.timestamp;
this.totalGpuDurationCompute = this.info.compute.timestamp;
this.addToAverage(this.totalGpuDurationCompute, this.averageGpuCompute);
}
updateAverages() {
this.addToAverage(this.totalCpuDuration, this.averageCpu);
this.addToAverage(this.totalGpuDuration, this.averageGpu);
}
resetCounters() {
this.renderCount = 0;
if (this.totalCpuDuration === 0) {
this.beginProfiling("cpu-started");
}
this.totalCpuDuration = 0;
this.totalFps = 0;
this.beginTime = this.endInternal();
}
resizePanel(panel2, offset) {
panel2.canvas.style.position = "absolute";
if (this.minimal) {
panel2.canvas.style.display = "none";
} else {
panel2.canvas.style.display = "block";
if (this.horizontal) {
panel2.canvas.style.top = "0px";
panel2.canvas.style.left = offset * panel2.WIDTH / panel2.PR + "px";
} else {
panel2.canvas.style.left = "0px";
panel2.canvas.style.top = offset * panel2.HEIGHT / panel2.PR + "px";
}
}
}
addPanel(panel2, offset) {
if (panel2.canvas) {
this.dom.appendChild(panel2.canvas);
this.resizePanel(panel2, offset);
}
return panel2;
}
showPanel(id) {
for (let i = 0; i < this.dom.children.length; i++) {
const child = this.dom.children[i];
child.style.display = i === id ? "block" : "none";
}
this.mode = id;
}
processGpuQueries() {
if (!this.gl || !this.ext)
return;
this.totalGpuDuration = 0;
this.gpuQueries.forEach((queryInfo, index) => {
if (this.gl) {
const available = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT_AVAILABLE);
const disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
if (available && !disjoint) {
const elapsed = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT);
const duration = elapsed * 1e-6;
this.totalGpuDuration += duration;
this.gl.deleteQuery(queryInfo.query);
this.gpuQueries.splice(index, 1);
}
}
});
}
endInternal() {
this.frames++;
const time = (performance || Date).now();
const elapsed = time - this.prevTime;
if (time >= this.prevCpuTime + 1e3 / this.logsPerSecond) {
const fps = Math.round(this.frames * 1e3 / elapsed);
this.addToAverage(fps, this.averageFps);
this.updatePanel(this.fpsPanel, this.averageFps, 0);
this.updatePanel(this.msPanel, this.averageCpu, this.precision);
this.updatePanel(this.gpuPanel, this.averageGpu, this.precision);
if (this.gpuPanelCompute) {
this.updatePanel(this.gpuPanelCompute, this.averageGpuCompute);
}
this.frames = 0;
this.prevCpuTime = time;
this.prevTime = time;
}
return time;
}
addToAverage(value, averageArray) {
averageArray.logs.push(value);
if (averageArray.logs.length > this.samplesLog) {
averageArray.logs.shift();
}
averageArray.graph.push(value);
if (averageArray.graph.length > this.samplesGraph) {
averageArray.graph.shift();
}
}
beginProfiling(marker) {
if (window.performance) {
window.performance.mark(marker);
this.isRunningCPUProfiling = true;
}
}
endProfiling(startMarker, endMarker, measureName) {
if (window.performance && endMarker && this.isRunningCPUProfiling) {
window.performance.mark(endMarker);
const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
this.totalCpuDuration += cpuMeasure.duration;
this.isRunningCPUProfiling = false;
}
}
updatePanel(panel2, averageArray, precision = 2) {
if (averageArray.logs.length > 0) {
let sumLog = 0;
let max = 0.01;
for (let i = 0; i < averageArray.logs.length; i++) {
sumLog += averageArray.logs[i];
if (averageArray.logs[i] > max) {
max = averageArray.logs[i];
}
}
let sumGraph = 0;
let maxGraph = 0.01;
for (let i = 0; i < averageArray.graph.length; i++) {
sumGraph += averageArray.graph[i];
if (averageArray.graph[i] > maxGraph) {
maxGraph = averageArray.graph[i];
}
}
if (panel2) {
panel2.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, precision);
}
}
}
get domElement() {
return this.dom;
}
patchThreeRenderer(renderer) {
const originalRenderMethod = renderer.render;
const statsInstance = this;
renderer.render = function(scene, camera) {
statsInstance.begin();
originalRenderMethod.call(this, scene, camera);
statsInstance.end();
};
this.threeRendererPatched = true;
}
};
_Stats.Panel = panel.Panel;
let Stats = _Stats;
module.exports = Stats;
//# sourceMappingURL=main.cjs.map
+1
View File
File diff suppressed because one or more lines are too long
+328
View File
@@ -0,0 +1,328 @@
import { Panel } from "./panel.js";
const _Stats = class _Stats2 {
constructor({
trackGPU = false,
logsPerSecond = 30,
samplesLog = 60,
samplesGraph = 10,
precision = 2,
minimal = false,
horizontal = true,
mode = 0
} = {}) {
this.gl = null;
this.ext = null;
this.activeQuery = null;
this.gpuQueries = [];
this.threeRendererPatched = false;
this.frames = 0;
this.renderCount = 0;
this.isRunningCPUProfiling = false;
this.totalCpuDuration = 0;
this.totalGpuDuration = 0;
this.totalGpuDurationCompute = 0;
this.totalFps = 0;
this.gpuPanel = null;
this.gpuPanelCompute = null;
this.averageFps = { logs: [], graph: [] };
this.averageCpu = { logs: [], graph: [] };
this.averageGpu = { logs: [], graph: [] };
this.averageGpuCompute = { logs: [], graph: [] };
this.handleClick = (event) => {
event.preventDefault();
this.showPanel(++this.mode % this.dom.children.length);
};
this.handleResize = () => {
this.resizePanel(this.fpsPanel, 0);
this.resizePanel(this.msPanel, 1);
if (this.gpuPanel)
this.resizePanel(this.gpuPanel, 2);
if (this.gpuPanelCompute)
this.resizePanel(this.gpuPanelCompute, 3);
};
this.mode = mode;
this.horizontal = horizontal;
this.minimal = minimal;
this.trackGPU = trackGPU;
this.samplesLog = samplesLog;
this.samplesGraph = samplesGraph;
this.precision = precision;
this.logsPerSecond = logsPerSecond;
this.dom = document.createElement("div");
this.initializeDOM();
this.beginTime = performance.now();
this.prevTime = this.beginTime;
this.prevCpuTime = this.beginTime;
this.fpsPanel = this.addPanel(new _Stats2.Panel("FPS", "#0ff", "#002"), 0);
this.msPanel = this.addPanel(new _Stats2.Panel("CPU", "#0f0", "#020"), 1);
this.setupEventListeners();
}
initializeDOM() {
this.dom.style.cssText = `
position: fixed;
top: 0;
left: 0;
opacity: 0.9;
z-index: 10000;
${this.minimal ? "cursor: pointer;" : ""}
`;
}
setupEventListeners() {
if (this.minimal) {
this.dom.addEventListener("click", this.handleClick);
this.showPanel(this.mode);
} else {
window.addEventListener("resize", this.handleResize);
}
}
async init(canvasOrGL) {
if (!canvasOrGL) {
console.error('Stats: The "canvas" parameter is undefined.');
return;
}
if (this.handleThreeRenderer(canvasOrGL))
return;
if (await this.handleWebGPURenderer(canvasOrGL))
return;
if (!this.initializeWebGL(canvasOrGL))
return;
}
handleThreeRenderer(renderer) {
if (renderer.isWebGLRenderer && !this.threeRendererPatched) {
this.patchThreeRenderer(renderer);
this.gl = renderer.getContext();
if (this.trackGPU) {
this.initializeGPUTracking();
}
return true;
}
return false;
}
async handleWebGPURenderer(renderer) {
if (renderer.isWebGPURenderer) {
if (this.trackGPU) {
renderer.backend.trackTimestamp = true;
if (await renderer.hasFeatureAsync("timestamp-query")) {
this.initializeWebGPUPanels();
}
}
this.info = renderer.info;
return true;
}
return false;
}
initializeWebGPUPanels() {
this.gpuPanel = this.addPanel(new _Stats2.Panel("GPU", "#ff0", "#220"), 2);
this.gpuPanelCompute = this.addPanel(
new _Stats2.Panel("CPT", "#e1e1e1", "#212121"),
3
);
}
initializeWebGL(canvasOrGL) {
if (canvasOrGL instanceof WebGL2RenderingContext) {
this.gl = canvasOrGL;
} else if (canvasOrGL instanceof HTMLCanvasElement || canvasOrGL instanceof OffscreenCanvas) {
this.gl = canvasOrGL.getContext("webgl2");
if (!this.gl) {
console.error("Stats: Unable to obtain WebGL2 context.");
return false;
}
} else {
console.error(
"Stats: Invalid input type. Expected WebGL2RenderingContext, HTMLCanvasElement, or OffscreenCanvas."
);
return false;
}
return true;
}
initializeGPUTracking() {
if (this.gl) {
this.ext = this.gl.getExtension("EXT_disjoint_timer_query_webgl2");
if (this.ext) {
this.gpuPanel = this.addPanel(new _Stats2.Panel("GPU", "#ff0", "#220"), 2);
}
}
}
begin() {
if (!this.isRunningCPUProfiling) {
this.beginProfiling("cpu-started");
}
if (!this.gl || !this.ext)
return;
if (this.activeQuery) {
this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
}
this.activeQuery = this.gl.createQuery();
if (this.activeQuery) {
this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, this.activeQuery);
}
}
end() {
this.renderCount++;
if (this.gl && this.ext && this.activeQuery) {
this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
this.gpuQueries.push({ query: this.activeQuery });
this.activeQuery = null;
}
}
update() {
if (!this.info) {
this.processGpuQueries();
} else {
this.processWebGPUTimestamps();
}
this.endProfiling("cpu-started", "cpu-finished", "cpu-duration");
this.updateAverages();
this.resetCounters();
}
processWebGPUTimestamps() {
this.totalGpuDuration = this.info.render.timestamp;
this.totalGpuDurationCompute = this.info.compute.timestamp;
this.addToAverage(this.totalGpuDurationCompute, this.averageGpuCompute);
}
updateAverages() {
this.addToAverage(this.totalCpuDuration, this.averageCpu);
this.addToAverage(this.totalGpuDuration, this.averageGpu);
}
resetCounters() {
this.renderCount = 0;
if (this.totalCpuDuration === 0) {
this.beginProfiling("cpu-started");
}
this.totalCpuDuration = 0;
this.totalFps = 0;
this.beginTime = this.endInternal();
}
resizePanel(panel, offset) {
panel.canvas.style.position = "absolute";
if (this.minimal) {
panel.canvas.style.display = "none";
} else {
panel.canvas.style.display = "block";
if (this.horizontal) {
panel.canvas.style.top = "0px";
panel.canvas.style.left = offset * panel.WIDTH / panel.PR + "px";
} else {
panel.canvas.style.left = "0px";
panel.canvas.style.top = offset * panel.HEIGHT / panel.PR + "px";
}
}
}
addPanel(panel, offset) {
if (panel.canvas) {
this.dom.appendChild(panel.canvas);
this.resizePanel(panel, offset);
}
return panel;
}
showPanel(id) {
for (let i = 0; i < this.dom.children.length; i++) {
const child = this.dom.children[i];
child.style.display = i === id ? "block" : "none";
}
this.mode = id;
}
processGpuQueries() {
if (!this.gl || !this.ext)
return;
this.totalGpuDuration = 0;
this.gpuQueries.forEach((queryInfo, index) => {
if (this.gl) {
const available = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT_AVAILABLE);
const disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT);
if (available && !disjoint) {
const elapsed = this.gl.getQueryParameter(queryInfo.query, this.gl.QUERY_RESULT);
const duration = elapsed * 1e-6;
this.totalGpuDuration += duration;
this.gl.deleteQuery(queryInfo.query);
this.gpuQueries.splice(index, 1);
}
}
});
}
endInternal() {
this.frames++;
const time = (performance || Date).now();
const elapsed = time - this.prevTime;
if (time >= this.prevCpuTime + 1e3 / this.logsPerSecond) {
const fps = Math.round(this.frames * 1e3 / elapsed);
this.addToAverage(fps, this.averageFps);
this.updatePanel(this.fpsPanel, this.averageFps, 0);
this.updatePanel(this.msPanel, this.averageCpu, this.precision);
this.updatePanel(this.gpuPanel, this.averageGpu, this.precision);
if (this.gpuPanelCompute) {
this.updatePanel(this.gpuPanelCompute, this.averageGpuCompute);
}
this.frames = 0;
this.prevCpuTime = time;
this.prevTime = time;
}
return time;
}
addToAverage(value, averageArray) {
averageArray.logs.push(value);
if (averageArray.logs.length > this.samplesLog) {
averageArray.logs.shift();
}
averageArray.graph.push(value);
if (averageArray.graph.length > this.samplesGraph) {
averageArray.graph.shift();
}
}
beginProfiling(marker) {
if (window.performance) {
window.performance.mark(marker);
this.isRunningCPUProfiling = true;
}
}
endProfiling(startMarker, endMarker, measureName) {
if (window.performance && endMarker && this.isRunningCPUProfiling) {
window.performance.mark(endMarker);
const cpuMeasure = performance.measure(measureName, startMarker, endMarker);
this.totalCpuDuration += cpuMeasure.duration;
this.isRunningCPUProfiling = false;
}
}
updatePanel(panel, averageArray, precision = 2) {
if (averageArray.logs.length > 0) {
let sumLog = 0;
let max = 0.01;
for (let i = 0; i < averageArray.logs.length; i++) {
sumLog += averageArray.logs[i];
if (averageArray.logs[i] > max) {
max = averageArray.logs[i];
}
}
let sumGraph = 0;
let maxGraph = 0.01;
for (let i = 0; i < averageArray.graph.length; i++) {
sumGraph += averageArray.graph[i];
if (averageArray.graph[i] > maxGraph) {
maxGraph = averageArray.graph[i];
}
}
if (panel) {
panel.update(sumLog / Math.min(averageArray.logs.length, this.samplesLog), sumGraph / Math.min(averageArray.graph.length, this.samplesGraph), max, maxGraph, precision);
}
}
}
get domElement() {
return this.dom;
}
patchThreeRenderer(renderer) {
const originalRenderMethod = renderer.render;
const statsInstance = this;
renderer.render = function(scene, camera) {
statsInstance.begin();
originalRenderMethod.call(this, scene, camera);
statsInstance.end();
};
this.threeRendererPatched = true;
}
};
_Stats.Panel = Panel;
let Stats = _Stats;
export {
Stats as default
};
//# sourceMappingURL=main.js.map
+1
View File
File diff suppressed because one or more lines are too long
+118
View File
@@ -0,0 +1,118 @@
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
class Panel {
constructor(name, fg, bg) {
this.name = name;
this.fg = fg;
this.bg = bg;
this.gradient = null;
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 = this.WIDTH;
this.canvas.height = this.HEIGHT;
this.canvas.style.width = "90px";
this.canvas.style.height = "48px";
this.canvas.style.position = "absolute";
this.canvas.style.cssText = "width:90px;height:48px";
this.context = this.canvas.getContext("2d");
this.initializeCanvas();
}
createGradient() {
if (!this.context)
throw new Error("No context");
const gradient = this.context.createLinearGradient(
0,
this.GRAPH_Y,
0,
this.GRAPH_Y + this.GRAPH_HEIGHT
);
let startColor;
const endColor = this.fg;
switch (this.fg.toLowerCase()) {
case "#0ff":
startColor = "#006666";
break;
case "#0f0":
startColor = "#006600";
break;
case "#ff0":
startColor = "#666600";
break;
case "#e1e1e1":
startColor = "#666666";
break;
default:
startColor = this.bg;
break;
}
gradient.addColorStop(0, startColor);
gradient.addColorStop(1, endColor);
return gradient;
}
initializeCanvas() {
if (!this.context)
return;
this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
this.context.textBaseline = "top";
this.gradient = this.createGradient();
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.fillStyle = this.fg;
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);
}
update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
if (!this.context || !this.gradient)
return;
const min = Math.min(Infinity, value);
const max = Math.max(maxValue, value);
maxGraph = Math.max(maxGraph, valueGraph);
this.context.globalAlpha = 1;
this.context.fillStyle = this.bg;
this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
this.context.fillStyle = this.fg;
this.context.fillText(
`${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
max.toFixed(decimals)
)})`,
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
);
const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
if (columnHeight > 0) {
this.context.globalAlpha = 1;
this.context.fillStyle = this.gradient;
this.context.fillRect(
this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
this.PR,
columnHeight
);
}
}
}
exports.Panel = Panel;
//# sourceMappingURL=panel.cjs.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
+118
View File
@@ -0,0 +1,118 @@
class Panel {
constructor(name, fg, bg) {
this.name = name;
this.fg = fg;
this.bg = bg;
this.gradient = null;
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 = this.WIDTH;
this.canvas.height = this.HEIGHT;
this.canvas.style.width = "90px";
this.canvas.style.height = "48px";
this.canvas.style.position = "absolute";
this.canvas.style.cssText = "width:90px;height:48px";
this.context = this.canvas.getContext("2d");
this.initializeCanvas();
}
createGradient() {
if (!this.context)
throw new Error("No context");
const gradient = this.context.createLinearGradient(
0,
this.GRAPH_Y,
0,
this.GRAPH_Y + this.GRAPH_HEIGHT
);
let startColor;
const endColor = this.fg;
switch (this.fg.toLowerCase()) {
case "#0ff":
startColor = "#006666";
break;
case "#0f0":
startColor = "#006600";
break;
case "#ff0":
startColor = "#666600";
break;
case "#e1e1e1":
startColor = "#666666";
break;
default:
startColor = this.bg;
break;
}
gradient.addColorStop(0, startColor);
gradient.addColorStop(1, endColor);
return gradient;
}
initializeCanvas() {
if (!this.context)
return;
this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
this.context.textBaseline = "top";
this.gradient = this.createGradient();
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.fillStyle = this.fg;
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);
}
update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
if (!this.context || !this.gradient)
return;
const min = Math.min(Infinity, value);
const max = Math.max(maxValue, value);
maxGraph = Math.max(maxGraph, valueGraph);
this.context.globalAlpha = 1;
this.context.fillStyle = this.bg;
this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
this.context.fillStyle = this.fg;
this.context.fillText(
`${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
max.toFixed(decimals)
)})`,
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
);
const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
if (columnHeight > 0) {
this.context.globalAlpha = 1;
this.context.fillStyle = this.gradient;
this.context.fillRect(
this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
this.PR,
columnHeight
);
}
}
}
export {
Panel
};
//# sourceMappingURL=panel.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
+106
View File
@@ -0,0 +1,106 @@
declare class Panel {
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D | null;
name: string;
fg: string;
bg: string;
gradient: CanvasGradient | null;
PR: number;
WIDTH: number;
HEIGHT: number;
TEXT_X: number;
TEXT_Y: number;
GRAPH_X: number;
GRAPH_Y: number;
GRAPH_WIDTH: number;
GRAPH_HEIGHT: number;
constructor(name: string, fg: string, bg: string);
private createGradient;
private initializeCanvas;
update(value: number, valueGraph: number, maxValue: number, maxGraph: number, decimals?: number): void;
}
interface StatsOptions {
trackGPU?: boolean;
logsPerSecond?: number;
samplesLog?: number;
samplesGraph?: number;
precision?: number;
minimal?: boolean;
horizontal?: boolean;
mode?: number;
}
declare class Stats {
private dom;
private mode;
private horizontal;
private minimal;
private trackGPU;
private samplesLog;
private samplesGraph;
private precision;
private logsPerSecond;
private gl;
private ext;
private info?;
private activeQuery;
private gpuQueries;
private threeRendererPatched;
private beginTime;
private prevTime;
private prevCpuTime;
private frames;
private renderCount;
private isRunningCPUProfiling;
private totalCpuDuration;
private totalGpuDuration;
private totalGpuDurationCompute;
private totalFps;
private fpsPanel;
private msPanel;
private gpuPanel;
private gpuPanelCompute;
private averageFps;
private averageCpu;
private averageGpu;
private averageGpuCompute;
static Panel: typeof Panel;
constructor({ trackGPU, logsPerSecond, samplesLog, samplesGraph, precision, minimal, horizontal, mode }?: StatsOptions);
private initializeDOM;
private setupEventListeners;
private handleClick;
private handleResize;
init(canvasOrGL: WebGL2RenderingContext | HTMLCanvasElement | OffscreenCanvas | any): Promise<void>;
private handleThreeRenderer;
private handleWebGPURenderer;
private initializeWebGPUPanels;
private initializeWebGL;
private initializeGPUTracking;
begin(): void;
end(): void;
update(): void;
private processWebGPUTimestamps;
private updateAverages;
private resetCounters;
resizePanel(panel: Panel, offset: number): void;
addPanel(panel: Panel, offset: number): Panel;
showPanel(id: number): void;
processGpuQueries(): void;
endInternal(): number;
addToAverage(value: number, averageArray: {
logs: any;
graph: any;
}): void;
beginProfiling(marker: string): void;
endProfiling(startMarker: string | PerformanceMeasureOptions | undefined, endMarker: string | undefined, measureName: string): void;
updatePanel(panel: {
update: any;
} | null, averageArray: {
logs: number[];
graph: number[];
}, precision?: number): void;
get domElement(): HTMLDivElement;
patchThreeRenderer(renderer: any): void;
}
export { Stats as default };