playcanvas
Version:
Open-source WebGL/WebGPU 3D engine for the web
91 lines (90 loc) • 2.39 kB
JavaScript
class Graph {
constructor(name, app, watermark, textRefreshRate, timer) {
this.app = app;
this.name = name;
this.device = app.graphicsDevice;
this.timer = timer;
this.watermark = watermark;
this.enabled = false;
this.textRefreshRate = textRefreshRate;
this.avgTotal = 0;
this.avgTimer = 0;
this.avgCount = 0;
this.maxValue = 0;
this.timingText = "";
this.maxText = "";
this.texture = null;
this.yOffset = 0;
this.graphType = 0;
this.cursor = 0;
this.sample = new Uint8ClampedArray(4);
this.sample.set([0, 0, 0, 255]);
this.needsClear = false;
this.counter = 0;
this.app.on("frameupdate", this.update, this);
}
destroy() {
this.app.off("frameupdate", this.update, this);
}
// called when context was lost, function releases all context related resources
loseContext() {
if (this.timer && typeof this.timer.loseContext === "function") {
this.timer.loseContext();
}
}
update(ms) {
const timings = this.timer.timings;
const total = timings.reduce((a, v) => a + v, 0);
this.avgTotal += total;
this.avgTimer += ms;
this.avgCount++;
this.maxValue = Math.max(this.maxValue, total);
if (this.avgTimer > this.textRefreshRate) {
this.timingText = (this.avgTotal / this.avgCount).toFixed(this.timer.decimalPlaces);
this.maxText = this.maxValue.toFixed(this.timer.decimalPlaces);
this.avgTimer = 0;
this.avgTotal = 0;
this.avgCount = 0;
this.maxValue = 0;
}
if (this.enabled) {
const range = 1.5 * this.watermark;
this.sample[0] = Math.floor(total / range * 255);
this.sample[1] = 0;
this.sample[2] = 0;
this.sample[3] = this.watermark / range * 255;
if (this.yOffset >= this.texture.height) {
return;
}
const data = this.texture.lock();
if (this.needsClear) {
const rowOffset = this.yOffset * this.texture.width * 4;
data.fill(0, rowOffset, rowOffset + this.texture.width * 4);
this.needsClear = false;
}
data.set(this.sample, (this.cursor + this.yOffset * this.texture.width) * 4);
this.texture.unlock();
this.cursor++;
if (this.cursor === this.texture.width) {
this.cursor = 0;
}
}
}
render(render2d, x, y, w, h) {
render2d.quad(
x + w,
y,
-w,
h,
this.enabled ? this.cursor : 0,
this.enabled ? 0.5 + this.yOffset : this.texture.height - 1,
-w,
0,
this.texture,
this.graphType
);
}
}
export {
Graph
};