[WGL/P] Added most proper shader code, now have two roadblocks

4 files changed, 78 insertions, 38 deletions

diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html
index 23e3759..a97f94e 100644
--- a/Year 2/Computer Graphics with WebGL/Project/Project.html
+++ b/Year 2/Computer Graphics with WebGL/Project/Project.html
@@ -61,6 +61,7 @@ h2 {
 

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

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

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

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

 	<script>

 		/*

@@ -97,14 +98,21 @@ h2 {
 			gl.uniform3f(uDiffuseColor,1,1,1);

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

 

-			skybox = new Skybox(10000, [0.1,0.1,0.1], undefined);

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

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

-						new Sphere([950,0,1100], 40),

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

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

+			skybox = new Skybox(10000, [0,0,0], undefined);

+

+			star = new Star([1000,0,1000], 50)

+						// new Star([1000,0,-1000], 50)

+			// 			new Star([950,0,1100], 40)

+			// 			new Star([0,0,0], 100)

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

+			for (var i = 0; i < starsBuf.length; i++) {

+				gl.uniform4fv(gl.getUniformLocation(glprog, "uStars[" + i + "]"), starsBuf[i]);

+			}

 

 			blackHole = new BlackHole([1000,0,900], 30);

+			for (var i = 0; i < blackHolesBuf.length; i++) {

+				gl.uniform4fv(gl.getUniformLocation(glprog, "uBH[" + i + "]"), blackHolesBuf[i]);

+			}

 

 			resizeglcanvas();

 		}

@@ -114,8 +122,7 @@ h2 {
 			gl.canvas.height = gl.canvas.offsetHeight;

 			gl.viewport(0,0,gl.canvas.width,gl.canvas.height);

 

-			// var proj=orthoMatrix(gl.canvas.width,gl.canvas.height,-1000,1000);

-			// gl.uniformMatrix4fv(uProjectionMatrix,false,proj);

+			// gl.uniform2f(uViewPort, gl.canvas.width, gl.canvas.height);

 

 			drawFrame();

 		}

@@ -126,13 +133,13 @@ h2 {
 			gl.clear(gl.COLOR_BUFFER_BIT+gl.DEPTH_BUFFER_BIT);

 

 			lookUpdate();

-			gl.uniform3f(uEye, pos[0], pos[1], pos[2]);

-			gl.uniform3f(uEyeForward, forward.toCartesian()[0], forward.toCartesian()[1], forward.toCartesian()[2]);

-			gl.vertexAttrib4fv(aSphere, [pos[0], pos[1], pos[2], 0]);

+			gl.uniform3fv(uEye, pos);

+			gl.uniform3fv(uEyeForward, forward.toCartesian());

+			gl.uniform3fv(uEyeUp, up.toCartesian());

+			gl.uniform3fv(uEyeLeft, left.toCartesian());

 

 			skybox.draw();

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

-			blackHole.draw();

+			star.draw();

 

 			requestAnimationFrame(drawFrame);

 		}

diff --git a/Year 2/Computer Graphics with WebGL/Project/blackhole.js b/Year 2/Computer Graphics with WebGL/Project/blackhole.js
index 50e7edb..5093bc4 100644
--- a/Year 2/Computer Graphics with WebGL/Project/blackhole.js
+++ b/Year 2/Computer Graphics with WebGL/Project/blackhole.js
@@ -1,8 +1,9 @@
+blackHolesBuf = [];
+
 BlackHole = function(center, size) {
-	this.boundary = new Sphere(center, size);
 	this.rs = 2/3 * size;
+	blackHolesBuf.push([center[0], center[1], center[2], this.rs]);
 }
 BlackHole.prototype.draw = function() {
-	gl.vertexAttrib4fv(aSphere, [this.boundary.center[0], this.boundary.center[1], this.boundary.center[2], this.rs]);
-	this.boundary.draw();
+	// Black holes are not "drawn"
 }
diff --git a/Year 2/Computer Graphics with WebGL/Project/shaders.js b/Year 2/Computer Graphics with WebGL/Project/shaders.js
index d9597df..6dda637 100644
--- a/Year 2/Computer Graphics with WebGL/Project/shaders.js
+++ b/Year 2/Computer Graphics with WebGL/Project/shaders.js
@@ -14,9 +14,6 @@
 	attribute vec3 aColor;

 	attribute vec3 aNormal;

 

-	attribute vec4 aSphere;

-	varying vec4 vSphere;

-	

 	varying vec3 vColor;

 	varying vec3 vXYZ;

 	

@@ -32,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;

-

-		vSphere = aSphere;

 	}

 `;

 	

@@ -42,29 +37,56 @@ var fShader = `
 	

 	varying vec3 vColor;

 	varying vec3 vXYZ;

-	varying vec4 vSphere;

+

+	uniform vec2 uViewPort;

+	uniform vec4 uStars[5];

+	uniform vec4 uBH[5];

 

 	uniform vec3 uEye;

 	uniform vec3 uEyeForward;

+	uniform vec3 uEyeUp;

+	uniform vec3 uEyeLeft;

 

-	void main()

-	{

-		vec3 ray = uEye;

-		vec3 step = normalize(uEyeForward);

+	// Thanks https://math.stackexchange.com/a/1905581

+	float linePointDistance(vec3 line1v, vec3 line2v, vec3 point) {

+		return length(cross(point - line1v, line2v - line1v)) / length(line2v - line1v);

+	}

+

+	// vec4 rayMarchInBH(vec4 BH, vec3 ray, vec3 step) {

+	// 	for (int i = 0; i < 100; i++) {

+	// 		float dist = linePointDistance(ray, ray+step, BH.xyz);

+	// 		if (dist <= BH.a) { // if past event horizon

+	// 			return vec4(0,0,0,1);

+	// 		}

+	// 		if (dist > BH.a * 1.5) { // if outside photon sphere

+	// 			return rayMarch(ray, step);

+	// 		}

+	// 		step += bend; // ROADBLOCK

+	// 		ray += step;

+	// 	}

+	// 	return vec4(0,0,0,1);

+	// }

 

-		for (int i = 0; i < 100; i++) {

-			float dist = distance(ray, vSphere.xyz) - vSphere.a;

-			if (dist < 0.001) {

-				if (vSphere.a == 0.0) {

-					gl_FragColor = vec4(vColor,1.0);

-				}

-				else {

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

-				}

-				return;

+	vec4 rayMarch(vec3 ray, vec3 step) {

+		// for (int i = 0; i < 5; i++) {

+		// 	if (linePointDistance(ray, ray+step, uBH[i].xyz) <= uBH[i].a * 1.5) {

+		// 		return rayMarchInBh(uBH, ray, step);

+		// 	}

+		// }

+

+		for (int i = 0; i < 5; i++) {

+			if (linePointDistance(ray, ray + step, uStars[i].xyz) <= uStars[i].a) {

+				return vec4(vColor, 1);

 			}

-			ray += step * dist;

 		}

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

+		return vec4(1,0,0, 1);

+	}

+

+	void main()

+	{

+		vec3 ray = uEye + uEyeForward + vXYZ.y * uEyeUp + vXYZ.x * uEyeLeft; // ROADBLOCK

+		vec3 step = normalize(ray - uEye);

+

+		gl_FragColor = rayMarch(ray, step);

 	}

 `;

diff --git a/Year 2/Computer Graphics with WebGL/Project/star.js b/Year 2/Computer Graphics with WebGL/Project/star.js
new file mode 100644
index 0000000..7aebc6c
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/Project/star.js
@@ -0,0 +1,10 @@
+starsBuf = [];
+
+Star = function(center, size) {
+	this.sphere = new Sphere(center, size);
+	this.sphere.color = [0.956,0.5,0.215];
+	starsBuf.push([center[0], center[1], center[2], size]);
+}
+Star.prototype.draw = function() {
+	this.sphere.draw();
+}