added flat mode, one object, and clear some code

src/client/main.ts

@@ -76,20 +76,16 @@ async function main() {
 	}
 
 	void main() {
-		vec3 n = normalize(vec3(-500., 1000., 500.) - vPosition);
+		vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
-		float diffuse = max(dot(vNormal.xyz, n), 0.);
+		float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
 		float specular = pow(
 			max(dot(
-				reflect(n, vNormal.xyz),
+				reflect(n, normalize(vNormal.xyz)),
 				normalize(vec3(0., 0., -50.) - vPosition)),
 			0.), 10.);
 		vec3 tmp = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.);
 		float texture = (tmp.x + tmp.y + tmp.z) / 6.;
-		if (abs(vNormal.x) + abs(vNormal.y) + abs(vNormal.z) > 0.01) {
+		gl_FragColor = vec4((texture * diffuse * 0.8) + (texture * vec3(0.2)) + (specular * vec3(1.)), 1.0);
-			gl_FragColor = vec4((texture * diffuse * 0.8) + (texture * vec3(0.2)) + (specular * vec3(1.)), 1.0);
-		} else {
-			gl_FragColor = vec4((texture * vec3(1.)), 1.0);
-		}
 	}`;
 
 	const fsSource2 = `
@@ -116,19 +112,50 @@ async function main() {
 	}
 
 	void main() {
-		vec3 n = normalize(vec3(-500., 1000., 500.) - vPosition);
+		vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
-		float diffuse = max(dot(vNormal.xyz, n), 0.);
+		float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
 		float specular = pow(
 			max(dot(
-				reflect(n, vNormal.xyz),
+				reflect(n, normalize(vNormal.xyz)),
 				normalize(vec3(0., 0., -50.) - vPosition)),
 			0.), 10.);
 		vec3 texture = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.) / vec3(2);
-		if (abs(vNormal.x) + abs(vNormal.y) + abs(vNormal.z) > 0.01) {
+		gl_FragColor = vec4((texture * diffuse * 0.8) + (texture * vec3(0.2)) + (specular * vec3(1.)), 1.0);
-			gl_FragColor = vec4((texture * diffuse * 0.8) + (texture * vec3(0.2)) + (specular * vec3(1.)), 1.0);
+	}`;
-		} else {
+
-			gl_FragColor = vec4((texture * vec3(1.)), 1.0);
+	const fsSource3 = `
-		}
+	precision highp float;
+
+	varying highp vec4 vColor;
+	varying highp vec4 vNormal;
+	varying highp vec3 vPosition;
+
+	vec3 extremize(vec3 v, float n) {
+		if (v.x > n / 2.)
+			v.x = n;
+		else
+			v.x = 0.;
+		if (v.y > n / 2.)
+			v.y = n;
+		else
+			v.y = 0.;
+		if (v.z > n / 2.)
+			v.z = n;
+		else
+			v.z = 0.;
+		return v;
+	}
+
+	void main() {
+		vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
+		float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
+		float specular = pow(
+			max(dot(
+				reflect(n, normalize(vNormal.xyz)),
+				normalize(vec3(0., 0., -50.) - vPosition)),
+			0.), 10.);
+		vec3 texture = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.) / vec3(2);
+		gl_FragColor = vec4((diffuse * 0.8) + (vec3(0.2)) + (specular * vec3(1.)), 1.0);
 	}`;
 	
 	/* eslint-enable */
@@ -146,7 +173,9 @@ async function main() {
 
 	const data = await getObj('/static/objs/teapot.obj');
 	let distance: any = $('#input1').val();
+	let circleSize: any = $('#input2').val();
 	distance = parseFloat(distance);
+	circleSize = parseFloat(circleSize);
 	const [
 		positions,
 		normals,
@@ -157,7 +186,7 @@ async function main() {
 	console.log(uvs);
 	let [shaderProgram, fragmentShader]: any = initShaderProgram(gl,
 		vsSource,
-		fsSource);
+		fsSource3);
 
 	let programInfo: any = {
 		program: shaderProgram,
@@ -199,10 +228,28 @@ async function main() {
 			buffers,
 			deltaTime,
 			length,
-			distance);
+			distance,
+			circleSize);
 		requestAnimationFrame(render);
 	}
 
+	/**
+	 * Pushes a new obj file to the gl buffer
+	 * @param {string} data the obj file to push
+	 */
+	function updateObj(data: string) {
+		const [
+			positions,
+			normals,
+			uvs,
+			indices,
+		] = convert(data);
+		console.log(uvs);
+		length = indices.length;
+		deleteBuffers(gl, buffers);
+		buffers = initBuffers(gl, positions, indices, normals);
+	}
+
 	$(function() {
 		$('#input1').on('keypress', function(event: any) {
 			if (event.which === 13) {
@@ -210,6 +257,12 @@ async function main() {
 				$('#button3').click();
 			}
 		});
+		$('#input2').on('keypress', function(event: any) {
+			if (event.which === 13) {
+				event.preventDefault();
+				$('#button4').click();
+			}
+		});
 		$('#button1').on('click', function() {
 			[programInfo, fragmentShader] = changeFragmentShader(gl,
 				shaderProgram, fragmentShader, fsSource, vsSource);
@@ -218,41 +271,34 @@ async function main() {
 			[programInfo, fragmentShader] = changeFragmentShader(gl,
 				shaderProgram, fragmentShader, fsSource2, vsSource);
 		});
+		$('#button3').on('click', function() {
+			[programInfo, fragmentShader] = changeFragmentShader(gl,
+				shaderProgram, fragmentShader, fsSource3, vsSource);
+		});
 		$('#button3').on('click', function() {
 			distance = $('#input1').val();
 			distance = parseFloat(distance);
 		});
+		$('#button4').on('click', function() {
+			circleSize = $('#input2').val();
+			circleSize = parseFloat(circleSize);
+		});
 		$('#sphere').on('click', async function() {
 			const data = await getObj('/static/objs/sphere.obj');
-			const [
+			updateObj(data);
-				positions,
-				normals,
-				uvs,
-				indices,
-			] = convert(data);
-			console.log(uvs);
-			length = indices.length;
-			deleteBuffers(gl, buffers);
-			buffers = initBuffers(gl, positions, indices, normals);
 		});
 		$('#teapot').on('click', async function() {
 			const data = await getObj('/static/objs/teapot.obj');
-			const [
+			updateObj(data);
-				positions,
+		});
-				normals,
+		$('#fox').on('click', async function() {
-				uvs,
+			const data = await getObj('/static/objs/fox.obj');
-				indices,
+			updateObj(data);
-			] = convert(data);
-			console.log(uvs);
-			length = indices.length;
-			deleteBuffers(gl, buffers);
-			buffers = initBuffers(gl, positions, indices, normals);
 		});
 	});
 	requestAnimationFrame(render);
 }
 
-
 /**
  * Draw a webgl scene
  * @param {any} gl the WebGL context
@@ -261,13 +307,15 @@ async function main() {
  * @param {number} deltaTime the difference in time since last call
  * @param {number} length the index buffer length
  * @param {number} distance distance of camera
+ * @param {number} circleSize size of circle the object is rotating around
  */
 function drawScene(gl: any,
 	programInfo: any,
 	buffers: any,
 	deltaTime: number,
 	length: number,
-	distance: number) {
+	distance: number,
+	circleSize: number) {
 	gl.clearColor(0.0, 0.0, 0.0, 1.0);
 	gl.clearDepth(1.0);
 	gl.enable(gl.DEPTH_TEST);
@@ -284,7 +332,7 @@ function drawScene(gl: any,
 	const fieldOfView = 45 * Math.PI / 180;
 	const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
 	const zNear = 0.1;
-	const zFar = 150.0;
+	const zFar = 1000.0;
 	const projectionMatrix = mat4.create();
 
 	// note: glmatrix.js always has the first argument
@@ -315,8 +363,11 @@ function drawScene(gl: any,
 
 	mat4.translate(
 		viewMatrix,
-		viewMatrix,
+		viewMatrix, [
-		[Math.cos(squareRotation) * 5, Math.sin(squareRotation) * 5, 0]);
+			Math.cos(squareRotation) * circleSize,
+			Math.sin(squareRotation) * circleSize,
+			0,
+		]);
 
 	mat4.translate(
 		viewMatrix,

src/client/objparser.js

@@ -11,12 +11,10 @@ export default function convert (objText) {
 	const indices = [];
 
 	for (let i = 0; i < lines.length; i++) {
-		const line = lines[i];
+		if (lines[i] != '')
-		if (line != '')
 		{
-			const rawchunks = line.split(" ").map(x => x.trim());
+			const rawchunks = lines[i].split(" ").map(x => x.trim());
 			const chunks = [];
-
 			for (let i = 0; i < rawchunks.length; i++) {
 				if (rawchunks[i] != '') {
 					chunks.push(rawchunks[i]);
@@ -51,7 +49,6 @@ export default function convert (objText) {
 					const c2 = (smoothing ? "s" : "") + chunks[2];
 					const c3 = (smoothing ? "s" : "") + chunks[3];
 
-
 					let index1 = vertices.indexOf(c1);
 					if (index1 === -1) {
 						index1 = vertices.length;
@@ -74,32 +71,9 @@ export default function convert (objText) {
 					break;
 				}
 			}
-		} else {
 		}
 	}
 
-	const avgNormals = [];
-	for (let i = 0; i < vertices.length; i++) {
-		if (vertices[i].startsWith("s")) {
-			const d = vertices[i].substr(1).split("/");
-			const normal = normals[d[2] - 1];
-			const index = d[0] - 1;
-
-			if (avgNormals[index]) {
-				avgNormals[index][0] += normal[0];
-				avgNormals[index][1] += normal[1];
-				avgNormals[index][2] += normal[2];
-			} else {
-				avgNormals[index] = normal;
-			}
-		}
-	}
-
-	for (let n of avgNormals) {
-		const len = Math.hypot(...n);
-		avgNormals[avgNormals.indexOf(n)] = n.map(x => x / len);
-	}
-
 	const outPositions = [];
 	const outNormals = [];
   	const outUVs = [];

views/index.ejs

@@ -17,15 +17,21 @@
 				<div class='ui-block'>
 					<button id='button1'>Change Shader to black and white</button>
 					<button id='button2'>Change Shader to colored</button>
+					<button id='button3'>Change Shader to flat</button>
 				</div>
 				<div class='ui-block'>
 					<input id='input1' value='50'></input>
 					<button id='button3'>Change camera distance</button>
-					<div style='display: inline'>Max distance is 150</div>
+					<div style='display: inline'>Max distance is 1000</div>
+				</div>
+				<div class='ui-block'>
+					<input id='input2' value='5'></input>
+					<button id='button4'>Change circle size</button>
 				</div>
 				<div class='ui-block'>
 					<button id='sphere'>Set obj to sphere</button>
 					<button id='teapot'>Set obj to teapot</button>
+					<button id='fox'>Set obj to fox</button>
 				</div>
 			</div>
 		</div>