fixed WebGL warning, add distance support

src/client/changeshader.ts

@@ -15,7 +15,7 @@ export function changeFragmentShader(gl: any,
 	fragmentShader: any,
 	fsSource: string,
 	vsSource: string) {
-	shaderProgram = unlinkShaderProgram(gl,
+	[shaderProgram, fragmentShader] = unlinkShaderProgram(gl,
 		fragmentShader,
 		shaderProgram);
 	[shaderProgram, fragmentShader] = initShaderProgram(gl,
@@ -40,5 +40,5 @@ export function changeFragmentShader(gl: any,
 				shaderProgram, 'umodelMatrix'),
 		},
 	};
-	return programInfo;
+	return [programInfo, fragmentShader];
 }

src/client/main.ts

@@ -85,7 +85,11 @@ function main() {
 			0.), 10.);
 		vec3 tmp = extremize(mod(vPosition.xyz + vec3(100.), vec3(3.)), 3.);
 		float texture = (tmp.x + tmp.y + tmp.z) / 9.;
-		gl_FragColor = vec4((texture * diffuse * 0.9) + (texture * 0.1) + (specular * vec3(1.)), 1.0);
+		if (abs(vNormal.x) + abs(vNormal.y) + abs(vNormal.z) > 0.01) {
+			gl_FragColor = vec4((texture * diffuse * 0.9) + (texture * vec3(0.1)) + (specular * vec3(1.)), 1.0);
+		} else {
+			gl_FragColor = vec4((texture * vec3(1.)), 1.0);
+		}
 	}`;
 
 	const fsSource2 = `
@@ -121,7 +125,11 @@ function main() {
 			0.), 10.);
 		vec3 tmp = extremize(mod(vPosition.xyz + vec3(100.), vec3(3.)), 3.);
 		vec3 texture = vec3(tmp.x / 3., tmp.y / 3., tmp.z / 3.);
+		if (abs(vNormal.x) + abs(vNormal.y) + abs(vNormal.z) > 0.01) {
 			gl_FragColor = vec4((texture * diffuse * 0.9) + (texture * vec3(0.1)) + (specular * vec3(1.)), 1.0);
+		} else {
+			gl_FragColor = vec4((texture * vec3(1.)), 1.0);
+		}
 	}`;
 	
 	/* eslint-enable */
@@ -129,27 +137,16 @@ function main() {
 	fetch('/static/objs/teapot_normals.obj').then((response) => {
 		return response.text();
 	}).then((data: any) => {
+		let distance: any = $('#input1').val();
+		distance = parseFloat(distance);
 		const [
-			convertedPositions,
+			positions,
-			convertedNormals,
+			normals,
 			uvs,
 			indices,
 		] = convert(data);
 		console.log(uvs);
-		console.log(squareRotation);
+		let [shaderProgram, fragmentShader]: any = initShaderProgram(gl,
-		const normals: any = [];
-		const positions: any = [];
-		for (let i = 0; i < convertedNormals.length; i++) {
-			if (i % 4 != 0) {
-				normals.push(convertedNormals[i]);
-			}
-		}
-		for (let i = 0; i < convertedPositions.length; i++) {
-			if (i % 4 != 0) {
-				positions.push(convertedPositions[i]);
-			}
-		}
-		const [shaderProgram, fragmentShader]: any = initShaderProgram(gl,
 			vsSource,
 			fsSource);
 
@@ -188,19 +185,34 @@ function main() {
 				changed = true;
 			}
 			then = now;
-			drawScene(gl, programInfo, buffers, deltaTime, indices.length);
+			drawScene(gl,
+				programInfo,
+				buffers,
+				deltaTime,
+				indices.length,
+				distance);
 			requestAnimationFrame(render);
 		}
 
 		$(function() {
+			$('#input1').on('keypress', function(event: any) {
+				if (event.which === 13) {
+					event.preventDefault();
+					$('#button3').click();
+				}
+			});
 			$('#button1').on('click', function() {
-				programInfo = changeFragmentShader(gl,
+				[programInfo, fragmentShader] = changeFragmentShader(gl,
 					shaderProgram, fragmentShader, fsSource, vsSource);
 			});
 			$('#button2').on('click', function() {
-				programInfo = changeFragmentShader(gl,
+				[programInfo, fragmentShader] = changeFragmentShader(gl,
 					shaderProgram, fragmentShader, fsSource2, vsSource);
 			});
+			$('#button3').on('click', function() {
+				distance = $('#input1').val();
+				distance = parseFloat(distance);
+			});
 		});
 		requestAnimationFrame(render);
 	});
@@ -214,12 +226,14 @@ function main() {
  * @param {any} buffers the buffers to draw
  * @param {number} deltaTime the difference in time since last call
  * @param {number} length the index buffer length
+ * @param {number} distance distance of camera
  */
 function drawScene(gl: any,
 	programInfo: any,
 	buffers: any,
 	deltaTime: number,
-	length: number) {
+	length: number,
+	distance: number) {
 	gl.clearColor(0.0, 0.0, 0.0, 1.0);
 	gl.clearDepth(1.0);
 	gl.enable(gl.DEPTH_TEST);
@@ -236,7 +250,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 = 70.0;
+	const zFar = 150.0;
 	const projectionMatrix = mat4.create();
 
 	// note: glmatrix.js always has the first argument
@@ -273,7 +287,7 @@ function drawScene(gl: any,
 	mat4.translate(
 		viewMatrix,
 		viewMatrix,
-		[0.0, 0.0, -50.0]);
+		[0.0, 0.0, -distance]);
 
 	// Tell WebGL how to pull out the positions from the position
 	// buffer into the vertexPosition attribute.

src/client/objparser.js

@@ -14,7 +14,14 @@ export default function convert (objText) {
 		const line = lines[i];
 		if (line != '')
 		{
-			const chunks = line.split(" ").map(x => x.trim());
+			const rawchunks = line.split(" ").map(x => x.trim());
+			const chunks = [];
+
+			for (let i = 0; i < rawchunks.length; i++) {
+				if (rawchunks[i] != '') {
+					chunks.push(rawchunks[i]);
+				}
+			}
 
 			switch (chunks[0]) {
 				case "v": {
@@ -101,8 +108,12 @@ export default function convert (objText) {
 		const d = (vertices[i].startsWith("s") ? vertices[i].substr(1) : vertices[i]).split("/");
 
 		outPositions.push(...positions[d[0] - 1]);
+		if (normals.length) {
 			outNormals.push(...normals[d[2] - 1]);
+		}
+		if (uvs.length) {
 			outUVs.push(...uvs[d[1] - 1]);
 		}
+	}
 	return [outPositions, outNormals, outUVs, indices];
 };

src/client/shaders.ts

@@ -7,9 +7,8 @@
  */
 export function unlinkShaderProgram(gl: any, shader: any, shaderProgram: any) {
 	// Create the shader program
-	gl.detachShader(shaderProgram, shader);
 	gl.deleteShader(shader);
-	return shaderProgram;
+	return [shaderProgram, shader];
 }
 
 /**

views/index.ejs

@@ -14,9 +14,16 @@
 		<div id="root">
 			<canvas id='glCanvas' width='640' height='640'></canvas>
 			<div id='ui'>
+				<div class='ui-block'>
 					<button id='button1'>Change Shader to black and white</button>
 					<button id='button2'>Change Shader to colored</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>
+			</div>
 		</div>
 		<script src="js/bundle.js"></script>
 	</body>