HSH
/
cg1-visualisations
mirror of https://gitlab.gwdg.de/lernanwendungen/cg1/cg1_tut_mdi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add stats display

This commit is contained in:
Luca Conte 2025-03-06 15:59:26 +01:00
parent 75c52718c0
commit 6ebddae435
2 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/index.html
View File

@ -9,19 +9,37 @@
<style> <style>
body { body {
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
background-color: #1e1e2e; background-color: #1e1e2e;
color: #cdd6f4;
font-family: monospace;
font-size: 20px;
gap: 20px;
} }
#cv { #cv {
border: solid 2px black; border: solid 2px #11111b;
border-radius: 20px; border-radius: 20px;
} }
#stats {
width: 100%;
max-width: 800px;
box-sizing: border-box;
padding: 20px;
border: solid 2px #11111b;
border-radius: 20px;
background-color: #181825;
}
</style> </style>
</head> </head>
<body> <body>
<canvas id="cv" width="800" height="600"></canvas> <canvas id="cv" width="800" height="600"></canvas>
<div id="stats">
<div>FPS: <span id="fps"></span></div>
<div>Frame time: <span id="ms"></span></div>
</div>
</body> </body>
</html> </html>

32
src/script.js
View File

@ -6,6 +6,8 @@ let program;
let vertexBuffer; let vertexBuffer;
let lastFrame = Date.now();
async function init() { async function init() {
cv = document.getElementById("cv"); cv = document.getElementById("cv");
gl = cv.getContext("webgl"); gl = cv.getContext("webgl");
@ -50,7 +52,7 @@ async function init() {
5 * Float32Array.BYTES_PER_ELEMENT, // size of individual vertex / distance between values to read 5 * Float32Array.BYTES_PER_ELEMENT, // size of individual vertex / distance between values to read
0 // offset where to start reading 0 // offset where to start reading
); );
// enable attribute // enable attribute
gl.enableVertexAttribArray(positionAttribLocation); gl.enableVertexAttribArray(positionAttribLocation);
@ -75,7 +77,34 @@ async function init() {
requestAnimationFrame(draw); requestAnimationFrame(draw);
} }
let frameCount = 0;
let lastStatUpdate = Date.now();
function updateStats(deltaTime) {
frameCount++;
let now = Date.now();
let timeSinceLastUpdate = (now - lastStatUpdate) / 1000;
if (timeSinceLastUpdate < 0.5) return;
lastStatUpdate = now;
let fpsDisplay = document.getElementById("fps");
fpsDisplay.innerText = Math.round(frameCount / timeSinceLastUpdate)
let msDisplay = document.getElementById("ms");
msDisplay.innerText = deltaTime * 1000 + "ms";
frameCount = 0;
}
async function draw() { async function draw() {
let now = Date.now();
let deltaTime = (now - lastFrame) / 1000;
updateStats(deltaTime);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program); gl.useProgram(program);
@ -84,6 +113,7 @@ async function draw() {
gl.drawArrays(gl.TRIANGLES, 0, 3); gl.drawArrays(gl.TRIANGLES, 0, 3);
lastFrame = now;
requestAnimationFrame(draw); requestAnimationFrame(draw);
} }