[WGL/P] Removed old black hole logic, started rework on movement, proper forward, backward, up, down movement and horizontal mouse movement

3 files changed, 115 insertions, 101 deletions

diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html
index 627e21a..cacc8bc 100644
--- a/Year 2/Computer Graphics with WebGL/Project/Project.html
+++ b/Year 2/Computer Graphics with WebGL/Project/Project.html
@@ -13,7 +13,7 @@ body {
 }

 canvas {

 	display: block;

-	position: fixed;

+	pos: fixed;

 	left: 0;

 	top: 0;

 	width: 100vw;

@@ -23,62 +23,20 @@ canvas {
 	</style>

 

 	<script>

-		/*

-		 * Keyboard navigation

-		 */

-

-		const MOVE_SPEED = 0.1;

-		const ROTATION_SPEED = 0.05;

-

-		var position = [10, 0, 3];

-		var lookingVec = [-MOVE_SPEED,0,-0.02];

-		var movementVec = [0,0,0];

-

-		function vecSum(a, b) {

-			return [a[0]+b[0], a[1]+b[1], a[2]+b[2]];

-		}

-		function vecSub(a, b) {

-			return [a[0]-b[0], a[1]-b[1], a[2]-b[2]];

-		}

-

-		addEventListener("keydown", (event) => {

-			switch (event.key) {

-				case 'ArrowUp':

-				case 'w':

-					position = vecSum(position, lookingVec);

-					break;

-				case 'ArrowDown':

-				case 's':

-					position = vecSub(position, lookingVec);

-					break;

-				case 'ArrowLeft':

-				case 'a':

-					position = [0,-MOVE_SPEED,0];

-					break;

-				case 'ArrowRight':

-				case 'd':

-					position = [0,MOVE_SPEED,0];

-					break;

-			}

-		});

-

-		addEventListener("mousemove", (event) => {

-			var screenCenterX = document.body.clientWidth / 2;

-			var screenCenterY = document.body.clientHeight / 2;

-

-			// lookingVec = [];

-		});

-

+	</script>

+	<script src="spaceship.js"></script>

+	<script>

 		/*

 		 * WebGL

 		 */

 

 		function start()

 		{

-			var canvas = document.getElementById("picasso");

+			canvas = document.getElementById("picasso");

 			canvas.addEventListener('webglcontextlost',function(event){event.preventDefault();},false);

 			canvas.addEventListener('webglcontextrestored',function(){init();},false);

 

+			mouseInit();

 			init();

 		}

 

@@ -94,9 +52,6 @@ canvas {
 			gl.enable(gl.BLEND);

 			gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

 

-			// Black Hole variables

-			gl.vertexAttrib1f(aBH, 0);

-

 			identity();

 			perspective(30,gl.canvas.width/gl.canvas.height,1,40000);

 			gl.uniform1i(uUseNormalMatrix,false);

@@ -105,29 +60,16 @@ canvas {
 			gl.uniform3f(uDiffuseColor,1,1,1);

 			gl.uniform3f(uLightDir,0,0,-1);

 

-			blackHole = new BlackHole([0,0,0], 1);

-			planets = [new Sphere([-3,0,0.5], 0.5), new Sphere([-3,0,-1.2], 0.5), new Sphere([-3,0,-2.4], 0.5)];

+			planets = [new Sphere([1000,0,1000], 50),

+						new Sphere([1000,0,-1000], 50),

+						new Sphere([700,0,1000], 40),

+						new Sphere([0,0,0], 100),

+						new Sphere([1000, 0, -30], 20)];

 			planets.forEach((p) => p.color = [1,0,0]);

 

 			resizeglcanvas();

 		}

 

-		BlackHole = function(center, size) {

-			this.sphere = new Sphere(center, size);

-			this.shwarzschildRadius = 0.5; // bad

-		}

-

-		BlackHole.prototype.draw = function() {

-			gl.vertexAttrib1f(aBH, 1);

-			gl.vertexAttrib1f(aSR, this.shwarzschildRadius);

-			gl.vertexAttrib1f(aR, this.sphere.size + 0.03);

-			gl.vertexAttrib3f(aBHXYZ, ...this.sphere.center);

-

-			this.sphere.draw();

-

-			gl.vertexAttrib1f(aBH, 0);

-		}

-

 		function resizeglcanvas() {

 			gl.canvas.width = gl.canvas.offsetWidth;

 			gl.canvas.height = gl.canvas.offsetHeight;

@@ -144,13 +86,11 @@ canvas {
 		{

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

 

-			lookAt(position, vecSum(position, lookingVec), [0,0,1]);

+			lookUpdate();

 			planets.forEach((p) => p.draw());

-			blackHole.draw();

 

 			requestAnimationFrame(drawFrame);

 		}

-

 	</script>

 </head>

 

diff --git a/Year 2/Computer Graphics with WebGL/Project/shaders.js b/Year 2/Computer Graphics with WebGL/Project/shaders.js
index 33fc743..3821899 100644
--- a/Year 2/Computer Graphics with WebGL/Project/shaders.js
+++ b/Year 2/Computer Graphics with WebGL/Project/shaders.js
@@ -16,16 +16,6 @@
 	

 	varying vec3 vColor;

 	varying vec3 vXYZ;

-

-	// Black Hole variables

-	attribute float aBH;

-	varying float vBH;

-	attribute vec3 aBHXYZ;

-	varying vec3 vBHXYZ;

-	attribute float aSR;

-	varying float vSR;

-	attribute float aR;

-	varying float vR;

 	

 	void main ()

 	{

@@ -39,8 +29,6 @@
 		vec3 normal = vec3(normalize(nMatrix*vec4(aNormal,0)));

 		vColor += aColor*uDiffuseColor*max(dot(normal,light),0.0);

 		vXYZ = (uModelMatrix * vec4(aXYZ,1)).xyz;

-

-		vBH = aBH; vBHXYZ = aBHXYZ; vSR = aSR; vR = aR;

 	}

 `;

 	

@@ -50,24 +38,8 @@ var fShader = `
 	varying vec3 vColor;

 	varying vec3 vXYZ;

 

-	varying float vBH;

-	varying vec3 vBHXYZ;

-	varying float vSR;

-	varying float vR;

-

 	void main()

 	{

-		if (vBH > 0.5 && distance(vXYZ, vBHXYZ) <= vR) {

-			float dist = distance(vXYZ, vBHXYZ);

-			if (dist < vSR) {

-				gl_FragColor = vec4(0,0,0,1);

-			}

-			else {

-				gl_FragColor = vec4(vColor,0.5);

-			}

-		}

-		else {

-			gl_FragColor = vec4(vColor,1.0);

-		}

+		gl_FragColor = vec4(vColor,1.0);

 	}

 `;

diff --git a/Year 2/Computer Graphics with WebGL/Project/spaceship.js b/Year 2/Computer Graphics with WebGL/Project/spaceship.js
new file mode 100644
index 0000000..3cf7315
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/Project/spaceship.js
@@ -0,0 +1,102 @@
+/*
+ * Helpers
+ */
+
+const MOVE_SPEED = 1.5;
+const ROTATION_SPEED = 3;
+
+var pos     = [1000, 0, 30];
+
+var phi = 0;
+var theta1 = Math.PI / 2;
+var forward = [0,0,1];
+
+var up      = [0,1,0];
+
+function vecSum(a, b) {
+	return [a[0]+b[0], a[1]+b[1], a[2]+b[2]];
+}
+function vecSub(a, b) {
+	return [a[0]-b[0], a[1]-b[1], a[2]-b[2]];
+}
+function vecScale(a, scale) {
+	return [a[0] * scale, a[1] * scale, a[2] * scale];
+}
+
+/*
+ * Navigation keys
+ */
+
+var pressedKeys = [ false, false, false, false, false, false ];
+var keyAction = [
+	() => { pos = vecSum(pos, up); },      // ' '
+	() => { pos = vecSub(pos, up); },      // 'Shift'
+	() => { pos = vecSum(pos, forward); }, // 'w'
+	() => { pos = vecSub(pos, forward); }, // 's'
+	() => { },                             // 'a'
+	() => { },                             // 'd'
+];
+addEventListener("keydown", (event) => {
+	switch (event.key) {
+		case ' ': pressedKeys[0] = true; break;
+		case 'Shift': pressedKeys[1] = true; break;
+		case 'w': pressedKeys[2] = true; break;
+		case 's': pressedKeys[3] = true; break;
+		case 'a': pressedKeys[4] = true; break;
+		case 'd': pressedKeys[5] = true; break;
+	}
+});
+addEventListener("keyup", (event) => {
+	switch (event.key) {
+		case ' ': pressedKeys[0] = false; break;
+		case 'Shift': pressedKeys[1] = false; break;
+		case 'w': pressedKeys[2] = false; break;
+		case 's': pressedKeys[3] = false; break;
+		case 'a': pressedKeys[4] = false; break;
+		case 'd': pressedKeys[5] = false; break;
+	}
+});
+
+/*
+ * Mouse movement
+ */
+function updateForward(e) {
+	var vertical   = (e.movementY / canvas.offsetHeight) * ROTATION_SPEED;
+	var horizontal = (-e.movementX / canvas.offsetWidth) * ROTATION_SPEED;
+
+	// forward = vecSum(forward, vecScale(up, vertical));
+	// forward = vecSum(forward, vecScale(left, horizontal));
+	var before = theta1 <= Math.PI;
+	theta1 = (theta1 + vertical) % (2 * Math.PI);
+	var theta = (theta1 <= Math.PI) ? theta1 : 2*Math.PI - theta1;
+	if (before && theta1 > Math.PI) phi = (phi + Math.PI) % (2 * Math.PI);
+	else if (!before && theta1 <= Math.PI) phi = (phi - Math.PI) % (2 * Math.PI);
+	// if (theta > Math.PI) {
+	// }
+	phi = (phi + horizontal) % (2 * Math.PI);
+	forward = [Math.sin(theta) * Math.sin(phi), Math.cos(theta), Math.sin(theta) * Math.cos(phi)];
+	up = [forward[0], forward[2], forward[1]];
+	console.log(forward);
+}
+
+function mouseInit() {
+	canvas.addEventListener('click', async () => {
+		await canvas.requestPointerLock();
+	});
+	document.addEventListener('pointerlockchange', () => {
+		if (document.pointerLockElement === canvas) {
+			document.addEventListener("mousemove", updateForward);
+		} else {
+			document.removeEventListener("mousemove", updateForward);
+		}
+	});
+}
+
+/*
+ * On every draw
+ */
+function lookUpdate() {
+	for (var i = 0; i < pressedKeys.length; i++)
+		if (pressedKeys[i]) keyAction[i]();
+	lookAt(pos, vecSum(pos, forward), up);
+}