shaded teapot

src/client/main.ts

@@ -21,36 +21,71 @@ function main() {
 			support it.</p>`);
 	}
 
+	/* eslint-disable */
+
 	const vsSource = `
 		attribute vec4 aVertexPosition;
 		attribute vec4 aVertexColor;
+		attribute vec4 aVertexNormal;
 
 		uniform mat4 uProjectionMatrix;
-		uniform mat4 uModelViewMatrix;
+		uniform mat4 uviewMatrix;
+		uniform mat4 umodelMatrix;
 
 		varying lowp vec4 vColor;
+		varying lowp vec4 vNormal;
+		varying lowp vec3 vPosition;
 		void main()
 		{
 			gl_Position = uProjectionMatrix *
-				uModelViewMatrix *
+				uviewMatrix *
+				umodelMatrix *
 				aVertexPosition;
+			vPosition = vec3(aVertexPosition);
 			vColor = aVertexColor;
+			vNormal = umodelMatrix * aVertexNormal;
 		}
 	`;
 
 	const fsSource = `
+	precision mediump float;
+
 	varying lowp vec4 vColor;
+	varying lowp vec4 vNormal;
+	varying lowp vec3 vPosition;
 
 	void main() {
-		gl_FragColor = vColor;
+		vec3 n = normalize(vec3(-5., 10., -5.));
+		float diffuse = max(dot(vNormal.xyz, n), 0.);
+
+		gl_FragColor = vec4((vec3(1.) * diffuse * 0.8) + (vec3(1.) * 0.2), 1.0);
 	}`;
 
-	fetch('/static/objs/teapot.obj').then((response) => {
+	/* eslint-enable */
+
+	fetch('/static/objs/teapot_normals.obj').then((response) => {
 		return response.text();
 	}).then((data: any) => {
-		const [positions, normals, uvs, indices] = convert(data);
-		console.log(normals);
+		const [
+			convertedPositions,
+			convertedNormals,
+			uvs,
+			indices,
+		] = convert(data);
 		console.log(uvs);
+		console.log(squareRotation);
+		const normals = [];
+		const positions = [];
+		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 = initShaderProgram(gl, vsSource, fsSource);
 
 		const programInfo: any = {
@@ -60,16 +95,20 @@ function main() {
 					'aVertexPosition'),
 				vertexColor: gl.getAttribLocation(shaderProgram,
 					'aVertexColor'),
+				vertexNormal: gl.getAttribLocation(shaderProgram,
+					'aVertexNormal'),
 			},
 			uniformLocations: {
 				projectionMatrix: gl.getUniformLocation(
 					shaderProgram, 'uProjectionMatrix'),
-				modelViewMatrix: gl.getUniformLocation(
-					shaderProgram, 'uModelViewMatrix'),
+				viewMatrix: gl.getUniformLocation(
+					shaderProgram, 'uviewMatrix'),
+				modelMatrix: gl.getUniformLocation(
+					shaderProgram, 'umodelMatrix'),
 			},
 		};
 
-		const buffers = initBuffers(gl, positions, indices);
+		const buffers = initBuffers(gl, positions, indices, normals);
 		let then = 0;
 
 		/**
@@ -141,12 +180,14 @@ function loadShader(gl: any, type: any, source: string) {
  * @param {any} gl the web gl context
  * @param {Array<number>} positions the position buffer to be loaded
  * @param {Array<number>} indices the index buffer to be loaded
+ * @param {Array<number>} normals the normal buffer to be loaded
  * @return {any} the buffer
  */
 function initBuffers(
 	gl: any,
 	positions: Array<number>,
-	indices: Array<number>) {
+	indices: Array<number>,
+	normals: Array<number>) {
 	const positionBuffer = gl.createBuffer();
 	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 	gl.bufferData(
@@ -154,6 +195,13 @@ function initBuffers(
 		new Float32Array(positions),
 		gl.STATIC_DRAW);
 
+	const normalBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
+	gl.bufferData(
+		gl.ARRAY_BUFFER,
+		new Float32Array(normals),
+		gl.STATIC_DRAW);
+
 	const myColors = [
 		[1.0, 1.0, 1.0, 1.0],
 		[1.0, 0.0, 0.0, 1.0],
@@ -203,6 +251,7 @@ function initBuffers(
 		position: positionBuffer,
 		color: colorBuffer,
 		indices: indexBuffer,
+		normals: normalBuffer,
 	};
 }
 
@@ -235,7 +284,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 = 100.0;
+	const zFar = 70.0;
 	const projectionMatrix = mat4.create();
 
 	// note: glmatrix.js always has the first argument
@@ -247,33 +296,27 @@ function drawScene(gl: any,
 		zNear,
 		zFar);
 
-	// Set the drawing position to the "identity" point, which is
-	// the center of the scene.
-	const modelViewMatrix = mat4.create();
 
-	// Now move the drawing position a bit to where we want to
-	// start drawing the square.
-	mat4.translate(
-		modelViewMatrix,
-		modelViewMatrix,
-		[0.0, -1.0, 0]);
-	mat4.rotate(modelViewMatrix,
-		modelViewMatrix,
-		Math.PI,
-		[0, 1, 0]);
-	mat4.translate(
-		modelViewMatrix,
-		modelViewMatrix,
-		[0.0, -0.0, 10]);
-	mat4.rotate(modelViewMatrix,
-		modelViewMatrix,
+	const modelMatrix = mat4.create();
+
+	mat4.rotate(modelMatrix,
+		modelMatrix,
 		squareRotation,
 		[
-			squareRotation * 0.5,
-			squareRotation * 0.6,
+			0,
+			1,
 			0,
 		]);
 
+	// Set the drawing position to the "identity" point, which is
+	// the center of the scene.
+	const viewMatrix = mat4.create();
+
+	mat4.translate(
+		viewMatrix,
+		viewMatrix,
+		[0.0, 0.0, -50.0]);
+
 	// Tell WebGL how to pull out the positions from the position
 	// buffer into the vertexPosition attribute.
 	{
@@ -294,6 +337,26 @@ function drawScene(gl: any,
 			programInfo.attribLocations.vertexPosition);
 	}
 
+	// Tell WebGL how to pull out the positions from the position
+	// buffer into the vertexPosition attribute.
+	{
+		const numComponents = 3;
+		const type = gl.FLOAT;
+		const normalize = false;
+		const stride = 0;
+		const offset = 0;
+		gl.bindBuffer(gl.ARRAY_BUFFER, buffers.normals);
+		gl.vertexAttribPointer(
+			programInfo.attribLocations.vertexNormal,
+			numComponents,
+			type,
+			normalize,
+			stride,
+			offset);
+		gl.enableVertexAttribArray(
+			programInfo.attribLocations.vertexNormal);
+	}
+
 	// Tell WebGL how to pull out the positions from the position
 	// buffer into the vertexPosition attribute.
 	{
@@ -325,9 +388,13 @@ function drawScene(gl: any,
 		false,
 		projectionMatrix);
 	gl.uniformMatrix4fv(
-		programInfo.uniformLocations.modelViewMatrix,
+		programInfo.uniformLocations.viewMatrix,
 		false,
-		modelViewMatrix);
+		viewMatrix);
+	gl.uniformMatrix4fv(
+		programInfo.uniformLocations.modelMatrix,
+		false,
+		modelMatrix);
 
 	{
 		const vertexCount = length;

src/client/objparser.js

@@ -12,58 +12,62 @@ export default function convert (objText) {
 
 	for (let i = 0; i < lines.length; i++) {
 		const line = lines[i];
-		const chunks = line.split(" ").map(x => x.trim());
-
-		switch (chunks[0]) {
-			case "v": {
-				positions.push(chunks.splice(1).map(parseFloat));
-				break;
-			}
-			case "vt": {
-				const uv = chunks.splice(1);
-				uvs.push([parseFloat(uv[0]), parseFloat(uv[1])]);
-				break;
-			}
-			case "vn": {
-				normals.push(chunks.splice(1).map(parseFloat));
-				break;
-			}
-			case "s": {
-				if (chunks[1] > 0) {
-					smoothing = true;
-				} else {
-					smoothing = false;
+		if (line != '')
+		{
+			const chunks = line.split(" ").map(x => x.trim());
 
+			switch (chunks[0]) {
+				case "v": {
+					positions.push(chunks.splice(1).map(parseFloat));
+					break;
+				}
+				case "vt": {
+					const uv = chunks.splice(1);
+					uvs.push([parseFloat(uv[0]), parseFloat(uv[1])]);
+					break;
+				}
+				case "vn": {
+					normals.push(chunks.splice(1).map(parseFloat));
+					break;
+				}
+				case "s": {
+					if (chunks[1] > 0) {
+						smoothing = true;
+					} else {
+						smoothing = false;
+
+					}
+					break;
+				}
+				case "f": {
+					const c1 = (smoothing ? "s" : "") + chunks[1];
+					const c2 = (smoothing ? "s" : "") + chunks[2];
+					const c3 = (smoothing ? "s" : "") + chunks[3];
+
+
+					let index1 = vertices.indexOf(c1);
+					if (index1 === -1) {
+						index1 = vertices.length;
+						vertices.push(c1);
+					}
+
+					let index2 = vertices.indexOf(c2);
+					if (index2 === -1) {
+						index2 = vertices.length;
+						vertices.push(c2);
+					}
+
+					let index3 = vertices.indexOf(c3);
+					if (index3 === -1) {
+						index3 = vertices.length;
+						vertices.push(c3);
+					}
+
+					indices.push(index1, index2, index3);
+					break;
 				}
-				break;
-			}
-			case "f": {
-				const c1 = (smoothing ? "s" : "") + chunks[1];
-				const c2 = (smoothing ? "s" : "") + chunks[2];
-				const c3 = (smoothing ? "s" : "") + chunks[3];
-
-
-				let index1 = vertices.indexOf(c1);
-				if (index1 === -1) {
-					index1 = vertices.length;
-					vertices.push(c1);
-				}
-
-				let index2 = vertices.indexOf(c2);
-				if (index2 === -1) {
-					index2 = vertices.length;
-					vertices.push(c2);
-				}
-
-				let index3 = vertices.indexOf(c3);
-				if (index3 === -1) {
-					index3 = vertices.length;
-					vertices.push(c3);
-				}
-
-				indices.push(index1, index2, index3);
-				break;
 			}
+		} else {
 		}
 	}
 
@@ -97,9 +101,8 @@ export default function convert (objText) {
 		const d = (vertices[i].startsWith("s") ? vertices[i].substr(1) : vertices[i]).split("/");
 
 		outPositions.push(...positions[d[0] - 1]);
+		outNormals.push(...normals[d[2] - 1]);
+		outUVs.push(...uvs[d[1] - 1]);
 	}
-
-	console.log(indices);
-
 	return [outPositions, outNormals, outUVs, indices];
 };