[WGL/P] Implemented an fps counter

1 files changed, 12 insertions, 0 deletions

diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html
index 7b62624..809a0ed 100644
--- a/Year 2/Computer Graphics with WebGL/Project/Project.html
+++ b/Year 2/Computer Graphics with WebGL/Project/Project.html
@@ -133,6 +133,8 @@ h2 {
 	

 		var pauseAnimations = false;

 		var t = 0;

+		var lastTime = 0;

+		var frames = 0;

 		function drawFrame()

 		{

 			if (startT == -1) { startT = Date.now(); t = 0; }

@@ -140,6 +142,13 @@ h2 {
 			if (pauseAnimations) startT += (candidat - t)*100;

 			else                 t = candidat;

 

+			var now = Math.floor(Date.now() / 1000);

+			if (now - lastTime >= 1) {

+				fpsElem.innerText = Math.floor(frames / (now - lastTime));

+				frames = 0;

+				lastTime = now;

+			}

+

 			gl.clear(gl.COLOR_BUFFER_BIT+gl.DEPTH_BUFFER_BIT);

 

 			updateCamera();

@@ -149,6 +158,7 @@ h2 {
 			if (!pauseAnimations || t == 0) animations.forEach((a) => a(t));

 			stars.forEach((s) => s.draw());

 

+			frames++;

 			requestAnimationFrame(drawFrame);

 		}

 	</script>

@@ -177,11 +187,13 @@ h2 {
 			<p>

 				Debugging colors: <input type="checkbox" id="debug-mode"><br>

 				Toggle coordinates: <input type="checkbox" id="coordinates-cb"><br>

+				Toggle fps: <input type="checkbox" id="fps-cb"><br>

 				Only horizontal mouse movement: <input type="checkbox" id="only-horizontal"><br>

 				Only vertical mouse movement: <input type="checkbox" id="only-vertical">

 			</p>

 		</div>

 	</div>

 	<div id="coordinates"></div>

+	<div id="fps"></div>

 	<script src="menu.js"></script>

 </body>