[WGL/P] Properly implemented ray tracing, though there are issues

2 files changed, 41 insertions, 11 deletions

diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html
index a97f94e..cf55554 100644
--- a/Year 2/Computer Graphics with WebGL/Project/Project.html
+++ b/Year 2/Computer Graphics with WebGL/Project/Project.html
@@ -78,6 +78,9 @@ h2 {
 			init();

 		}

 

+		const PERSPECTIVE_ANGLE = 30;

+		const PERSPECTIVE_NEAR = 1;

+

 		function init()

 		{

 			gl = getContext("picasso");

@@ -91,7 +94,7 @@ h2 {
 			gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

 

 			identity();

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

+			perspective(PERSPECTIVE_ANGLE,gl.canvas.width/gl.canvas.height,PERSPECTIVE_NEAR,40000);

 			gl.uniform1i(uUseNormalMatrix,false);

 

 			gl.uniform3f(uAmbientColor,0.3,0.3,0.3);

@@ -122,7 +125,16 @@ h2 {
 			gl.canvas.height = gl.canvas.offsetHeight;

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

 

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

+			// (Look at Presentation 6, Slide 21, the prespective projection diagram)

+			// Since we're gonna be raycasting, we need to know where the near side is and it's

+			// dimentions in our coordinate system, so we can offset the rays properly.

+			// First, we pass the viewPort to convert our pixel coordinates to percentage of the

+			// screen.

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

+			w = 2 * Math.tan(PERSPECTIVE_ANGLE / 360 * Math.PI) * PERSPECTIVE_NEAR;

+			// The height of the near wall is determined by the aspect ratio.

+			gl.uniform2f(uPerspSize, w, gl.canvas.height / gl.canvas.width * w);

+			gl.uniform1f(uPerspDist, PERSPECTIVE_NEAR);

 

 			drawFrame();

 		}

@@ -143,6 +155,15 @@ h2 {
 

 			requestAnimationFrame(drawFrame);

 		}

+		document.addEventListener('keypress', (e) => {

+			if (e.key == 'u') {

+				console.log(w);

+				console.log(w*gl.canvas.height / gl.canvas.width);

+				console.log(forward.toCartesian());

+				console.log(left.toCartesian());

+				console.log(up.toCartesian());

+			}

+		});

 	</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 6dda637..c3a2ab4 100644
--- a/Year 2/Computer Graphics with WebGL/Project/shaders.js
+++ b/Year 2/Computer Graphics with WebGL/Project/shaders.js
@@ -38,7 +38,6 @@ var fShader = `
 	varying vec3 vColor;

 	varying vec3 vXYZ;

 

-	uniform vec2 uViewPort;

 	uniform vec4 uStars[5];

 	uniform vec4 uBH[5];

 

@@ -47,9 +46,13 @@ var fShader = `
 	uniform vec3 uEyeUp;

 	uniform vec3 uEyeLeft;

 

-	// 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);

+	uniform vec2 uViewPort;

+	uniform vec2 uPerspSize;

+	uniform float uPerspDist;

+

+	// Thanks https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Vector_formulation

+	float linePointDistance(vec3 linePoint, vec3 lineDir, vec3 point) {

+		return length((point - linePoint) - dot(point - linePoint, lineDir) * lineDir);

 	}

 

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

@@ -74,8 +77,8 @@ var fShader = `
 		// 	}

 		// }

 

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

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

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

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

 				return vec4(vColor, 1);

 			}

 		}

@@ -84,9 +87,15 @@ var fShader = `
 

 	void main()

 	{

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

-		vec3 step = normalize(ray - uEye);

+		// Refer to Project.html for more info, but in brief, we're transforming

+		// the screen pixel coordinates to the proper 3D coordinates

+		vec2 offset = gl_FragCoord.xy / uViewPort; // from pixel coordinates to [0,1]

+		offset = 2.0 * offset - 1.0; // to [-1,1]

+		offset.x *= uPerspSize.x;

+		offset.y *= uPerspSize.y;

+

+		vec3 ray = normalize(uEyeForward * uPerspDist + offset.y * uEyeUp - offset.x * uEyeLeft);

 

-		gl_FragColor = rayMarch(ray, step);

+		gl_FragColor = rayMarch(ray, ray);

 	}

 `;