Marker detection v4 - using WebGL compute shaders for the process of …

…detection
milankostak · Sep 6, 2020 · 9ef6c48 · 9ef6c48
1 parent 944e11c
commit 9ef6c48
Show file tree

Hide file tree

Showing 5 changed files with 873 additions and 0 deletions.
diff --git a/controller-compute.html b/controller-compute.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en-GB" dir="ltr">
+<head>
+<meta charset="UTF-8">
+<title>Controller</title>
+<link rel="stylesheet" type="text/css" href="/css/controller.css">
+<script type="text/javascript" src="/transforms/transforms.js"></script>
+<script type="text/javascript" src="/utils/webgl-utils.js"></script>
+<script type="text/javascript" src="/js/detection-compute.js"></script>
+<script type="text/javascript">
+	"use strict";
+
+	// HTMLVideoElement
+	let video;
+	// is detection currently being performed? - if animation is running
+	// also, it is used to make sure that animation is running only once
+	let isDetecting = false;
+
+	const TEST = false;
+
+	window.onload = function() {
+		let initResult = Detection.init();
+
+		if (!initResult) {
+			alert("Your browser does not support WebGL-compute.");
+			document.querySelector(".loading").innerHTML = "Your browser does not support WebGL-compute or some of its extensions.";
+			return;
+		}
+
+		// set video listener, important for starting animation
+		video = document.querySelector("video");
+		video.addEventListener("canplaythrough", setupAfterVideoStreamIsReady, false);
+
+		// set change and click listeners
+		document.querySelector("label#position input").addEventListener("change", doPosition, false);
+		document.querySelector("label#reset").addEventListener("click", restart, false);
+
+		// window size listener for detecting layout changes
+		// checks which if either height or width is bigger and then changes the layout appropriately
+		window.addEventListener("resize", windowSizeChanged, false);
+		windowSizeChanged();
+
+		Utils.getCamera(video, 1280, 720, "environment", document.querySelector(".loading"));
+	};
+
+	/**
+	 * Main animation function that triggers detection in the image from camera
+	 */
+	function animate() {
+		Detection.updateTexture(video);
+		Detection.repaint(isDetecting);
+		window.requestAnimationFrame(animate);
+	}
+
+	function test(start, end) {
+		let loaded = 0;
+		const data = [];
+		Utils.getDataFromFile("/python/test.txt", (text) => {
+			const testData = text.split("\r\n")
+					.map(t => t.split(","))
+					.filter(t => t[0] !== "")
+					.map(t => [t[0], t[1] * 1, t[2] * 1, t[3] * 1, t[4] / 100, t[5] / 100])
+					.sort((a, b) => a[0] <= b[0] ? -1 : 1);
+
+			for (let i = start; i <= end; i++) {
+				const name = String(i).padStart(3, "0");
+				const img = new Image();
+				img.onload = () => {
+					const color = testData[i];
+					Detection.setExternalColor(color[3]);
+					Detection.setupAfterVideoStreamIsReady(img.width, img.height);
+					Detection.updateTexture(img);
+					Detection.repaint(true);
+					const readData = Detection.getDetectedCoordinates();
+					if (readData[0] === 0 && readData[1] === 0) {
+						data.push(name + ".jpg,-1,-1");
+					} else {
+						data.push(name + ".jpg," + readData[0] + "," + (img.height - readData[1]));
+					}
+					loaded++;
+				};
+				img.src = "/python/images/" + name + ".jpg";
+			}
+		});
+		const total = end + 1;
+		const interval = function() {
+			if (loaded < total) {
+				setTimeout(interval, 50);
+			} else {
+				console.log(data.sort().reduce((a, b) => a + "\n" + b))
+			}
+		};
+		setTimeout(interval, 1);
+	}
+
+	/**
+	 * Event handler when camera is ready to give pictures
+	 */
+	function setupAfterVideoStreamIsReady() {
+		Detection.setupAfterVideoStreamIsReady(video.videoWidth, video.videoHeight);
+
+		// hide loading message
+		document.querySelector(".loading-container").classList.add("hidden");
+		document.querySelector(".main").classList.remove("hidden");
+
+		if (!TEST) {
+			window.requestAnimationFrame(animate);
+		} else {
+			test(0, 139);
+		}
+	}
+
+	/**
+	 * Event handler when position button is clicked
+	 */
+	function doPosition() {
+		if (document.querySelector("label#position input").checked) {
+			document.querySelector("label#position").classList.add("active");
+			isDetecting = true;
+		} else {
+			document.querySelector("label#position").classList.remove("active");
+			isDetecting = false;
+		}
+	}
+
+	function restart() {
+		Detection.restart();
+		document.querySelector("label#reset").classList.add("hidden");
+		document.querySelector("#color").style.backgroundColor = "white";
+		document.querySelector("#color_text").textContent = "";
+	}
+
+	/**
+	 * Resize event handler
+	 * Changes GUI so that buttons are either right or bottom
+	 */
+	function windowSizeChanged() {
+		if (window.innerHeight < window.innerWidth) {
+			// window is wider than higher
+			document.querySelector(".main").classList.remove("bottom");
+			document.querySelector(".main").classList.add("right");
+		} else {
+			// window is higher than wider
+			document.querySelector(".main").classList.remove("right");
+			document.querySelector(".main").classList.add("bottom");
+		}
+	}
+</script>
+
+</head>
+<body>
+<div class="loading-container">
+	<div class="loading">
+		Loading, please wait...<br>
+		Access to your camera is required for this application to work.<br>
+		You might be asked for giving a permission to access it.
+	</div>
+</div>
+<div class="main hidden">
+	<div class="center">
+		<canvas></canvas>
+		<canvas></canvas>
+		<video src="" autoplay muted></video>
+	</div>
+	<div class="controls">
+		Place the marker in the box in the middle of the video before starting detection. After starting, wait until the box disappears.
+		<label id="position"><input type="checkbox"> Detect</label><br>
+		<div id="color"></div>
+		<div id="color_text"></div>
+		<label id="reset" class="hidden">Reset</label><br>
+	</div>
+</div>
+</body>
+</html>