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

1 files changed, 23 insertions, 2 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>