From 6f50150a6bc5596afcad00307524e840524d4124 Mon Sep 17 00:00:00 2001
From: Luca Conte <main@lugico.de>
Date: Mon, 28 Apr 2025 00:21:23 +0200
Subject: [PATCH 1/2] calculate frame time independent of fps

---
 src/script.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/script.js b/src/script.js
index 9d5113d..2e328a2 100644
--- a/src/script.js
+++ b/src/script.js
@@ -40,6 +40,8 @@ let smoothCameraDistance = 4;
 
 let mouseDragging = false;
 
+let frameTimes = [];
+
 function resizeCanvas() {
 	const dpr = window.devicePixelRatio;
 	cv.width = cv.parentElement.clientWidth * dpr;
@@ -439,8 +441,11 @@ function updateStats(deltaTime) {
 	fpsDisplay.innerText = Math.round(frameCount / timeSinceLastUpdate)
 
 	let msDisplay = document.getElementById("ms");
-	msDisplay.innerText = deltaTime * 1000 + "ms";
+	if (frameTimes.length > 0) {
+		msDisplay.innerText = (Math.round(frameTimes.reduce((prev, curr) => prev + curr) / frameTimes.length * 100) / 100) + "ms";
+	}
 
+	frameTimes = [];
 	frameCount = 0;
 }
 
@@ -449,6 +454,7 @@ let hue = 0;
 async function draw() {
 	let now = Date.now();
 	let deltaTime = (now - lastFrame) / 1000;
+	let frameStart = performance.now();
 
 	hue += deltaTime / 5;
 	if (hue > 1) hue = 0;
@@ -640,6 +646,8 @@ async function draw() {
 	setAttribPointers();
 	gl.drawArrays(gl.TRIANGLES, 0, floorVertices.length / 6);
 
+
+	frameTimes.push(performance.now() - frameStart);
 	lastFrame = now;
 	requestAnimationFrame(draw);
 }

From e842eb3d669ece6c9b126d1170a96317f2018dae Mon Sep 17 00:00:00 2001
From: Luca Conte <main@lugico.de>
Date: Mon, 28 Apr 2025 00:23:11 +0200
Subject: [PATCH 2/2] enable anti aliasing

---
 src/script.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/script.js b/src/script.js
index 2e328a2..d09f747 100644
--- a/src/script.js
+++ b/src/script.js
@@ -409,6 +409,11 @@ async function init() {
 	gl.enable(gl.BLEND);
 	gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
+	gl.enable( gl.LINE_SMOOTH );
+	gl.enable( gl.POLYGON_SMOOTH );
+	gl.hint( gl.LINE_SMOOTH_HINT, gl.NICEST );
+	gl.hint( gl.POLYGON_SMOOTH_HINT, gl.NICEST )
+
 	// start drawing
 	requestAnimationFrame(draw);
 }