Fragments can now figure out which face they are being seen through

public/index.js

@@ -1,6 +1,6 @@
 function app(shaders) {
 	const scene = new THREE.Scene();
-	const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 10);
+	const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.01, 10);
 	const renderer = new THREE.WebGLRenderer();
 
 	renderer.setSize(innerWidth, innerHeight);
@@ -14,12 +14,22 @@ function app(shaders) {
 
 	const controls = new THREE.OrbitControls(camera, renderer.domElement);
 
+	controls.minDistance = 1.1;
+
 	const box = new THREE.Mesh(new THREE.BoxGeometry(1, 1.5, 1), new THREE.ShaderMaterial({
 		vertexShader: shaders[0],
 		fragmentShader: shaders[1]
 	}));
 
-	const testBox = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.75, 0.5), new THREE.MeshBasicMaterial({ color: 0x00FF00 }));
+	const testBox = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.75, 0.5), new THREE.ShaderMaterial({
+		vertexShader: shaders[0],
+		fragmentShader: shaders[2],
+		uniforms: {
+			face: {
+				value: 1
+			}
+		}
+	}));
 
 	scene.add(box);
 	scene.add(testBox);
@@ -36,6 +46,6 @@ function app(shaders) {
 	requestAnimationFrame(render);
 }
 
-Promise.all([ fetch("/vertex.glsl"), fetch("/fragment.glsl") ]) // fetch both the shaders
+Promise.all([ fetch("/vertex.glsl"), fetch("/outer_fragment.glsl"), fetch("/inner_fragment.glsl") ]) // fetch both the shaders
 .then(requests => Promise.all(requests.map(request => request.text()))) // convert the fetch responses to strings
 .then(app);

public/inner_fragment.glsl

@@ -0,0 +1,50 @@
+in vec3 worldPosition;
+
+uniform int face;
+
+const vec2 corners[4] = vec2[](vec2(0.5, 0.5), vec2(-0.5, 0.5), vec2(-0.5, -0.5), vec2(0.5, -0.5));
+
+bool ccw(vec2 A, vec2 B, vec2 C) {
+    return (C.y-A.y) * (B.x-A.x) > (B.y-A.y) * (C.x-A.x);
+}
+
+bool intersect(vec2 A, vec2 B, vec2 C, vec2 D) {
+    return ccw(A,C,D) != ccw(B,C,D) && ccw(A,B,C) != ccw(A,B,D);
+}
+
+void main() {
+	vec2 a = worldPosition.xz;
+	vec2 b = cameraPosition.xz;
+
+	int intersectedFace = -1;
+
+	for (int i = 0; i < 4; i++) {
+		int next = int(mod(float(i + 1), 4.0));
+
+		vec2 c = corners[i];
+		vec2 d = corners[next];
+
+		if (intersect(a, b, c, d)) {
+			intersectedFace = i;
+			break;
+		}
+	}
+
+	switch (intersectedFace) {
+		case -1:
+			gl_FragColor = vec4(1, 0, 1, 1);
+			break;
+		case 0:
+			gl_FragColor = vec4(1, 0, 0, 1);
+			break;
+		case 1:
+			gl_FragColor = vec4(0, 1, 0, 1);
+			break;
+		case 2:
+			gl_FragColor = vec4(0, 0, 1, 1);
+			break;
+		case 3:
+			gl_FragColor = vec4(0, 1, 1, 1);
+			break;
+	}
+}