obj selector, a bit of code clearing

src/client/buffers.ts

@@ -85,7 +85,8 @@ export function initBuffers(
  * @param {any} buffers the buffers to delete
  */
 export function deleteBuffers(gl: any, buffers: any) {
-	for (const buffer of Object.entries(buffers)) {
+	gl.deleteBuffer(buffers.color);
-		gl.deleteBuffer(buffer);
+	gl.deleteBuffer(buffers.position);
-	}
+	gl.deleteBuffer(buffers.normals);
+	gl.deleteBuffer(buffers.indices);
 }

src/client/main.ts

@@ -4,7 +4,7 @@ import mat4 from 'gl-mat4';
 import convert from './objparser';
 import $ from 'jquery';
 
-import {initBuffers} from './buffers';
+import {initBuffers, deleteBuffers} from './buffers';
 import {initShaderProgram} from './shaders';
 import {changeFragmentShader} from './changeshader';
 
@@ -15,7 +15,7 @@ main();
 /**
  * The program purpose is encapsulated in a main function
  */
-function main() {
+async function main() {
 	const canvas: any = document.querySelector('#glCanvas')!;
 	const gl = canvas.getContext('webgl');
 
@@ -83,10 +83,10 @@ function main() {
 				reflect(n, vNormal.xyz),
 				normalize(vec3(0., 0., -50.) - vPosition)),
 			0.), 10.);
-		vec3 tmp = extremize(mod(vPosition.xyz + vec3(100.), vec3(3.)), 3.);
+		vec3 tmp = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.);
-		float texture = (tmp.x + tmp.y + tmp.z) / 9.;
+		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.9) + (texture * vec3(0.1)) + (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);
 		}
@@ -123,10 +123,9 @@ function main() {
 				reflect(n, vNormal.xyz),
 				normalize(vec3(0., 0., -50.) - vPosition)),
 			0.), 10.);
-		vec3 tmp = extremize(mod(vPosition.xyz + vec3(100.), vec3(3.)), 3.);
+		vec3 texture = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.) / vec3(2);
-		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);
+			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);
 		}
@@ -134,88 +133,136 @@ function main() {
 	
 	/* eslint-enable */
 
-	fetch('/static/objs/teapot_normals.obj').then((response) => {
+	/**
-		return response.text();
+	 * Fetch an obj file
-	}).then((data: any) => {
+	 * @param {string} url the url to fetch the object from
-		let distance: any = $('#input1').val();
+	 * @return {string} the raw data of the obj file
-		distance = parseFloat(distance);
+	 */
-		const [
+	async function getObj(url: string) {
-			positions,
+		const response = await fetch(url);
-			normals,
+		const data = await response.text();
-			uvs,
+		return data;
-			indices,
+	}
-		] = convert(data);
-		console.log(uvs);
-		let [shaderProgram, fragmentShader]: any = initShaderProgram(gl,
-			vsSource,
-			fsSource);
 
-		let programInfo: any = {
+	const data = await getObj('/static/objs/teapot_normals.obj');
-			program: shaderProgram,
+	let distance: any = $('#input1').val();
-			attribLocations: {
+	distance = parseFloat(distance);
-				vertexPosition: gl.getAttribLocation(shaderProgram,
+	const [
-					'aVertexPosition'),
+		positions,
-				vertexColor: gl.getAttribLocation(shaderProgram,
+		normals,
-					'aVertexColor'),
+		uvs,
-				vertexNormal: gl.getAttribLocation(shaderProgram,
+		indices,
-					'aVertexNormal'),
+	] = convert(data);
-			},
+	let length = indices.length;
-			uniformLocations: {
+	console.log(uvs);
-				projectionMatrix: gl.getUniformLocation(
+	let [shaderProgram, fragmentShader]: any = initShaderProgram(gl,
-					shaderProgram, 'uProjectionMatrix'),
+		vsSource,
-				viewMatrix: gl.getUniformLocation(
+		fsSource);
-					shaderProgram, 'uviewMatrix'),
-				modelMatrix: gl.getUniformLocation(
-					shaderProgram, 'umodelMatrix'),
-			},
-		};
 
-		const buffers = initBuffers(gl, positions, indices, normals);
+	let programInfo: any = {
-		let then = 0;
+		program: shaderProgram,
-		let changed = false;
+		attribLocations: {
+			vertexPosition: gl.getAttribLocation(shaderProgram,
+				'aVertexPosition'),
+			vertexColor: gl.getAttribLocation(shaderProgram,
+				'aVertexColor'),
+			vertexNormal: gl.getAttribLocation(shaderProgram,
+				'aVertexNormal'),
+		},
+		uniformLocations: {
+			projectionMatrix: gl.getUniformLocation(
+				shaderProgram, 'uProjectionMatrix'),
+			viewMatrix: gl.getUniformLocation(
+				shaderProgram, 'uviewMatrix'),
+			modelMatrix: gl.getUniformLocation(
+				shaderProgram, 'umodelMatrix'),
+		},
+	};
 
-		/**
+	let buffers = initBuffers(gl, positions, indices, normals);
-		 * Draws the scene repeatedly
+	let then = 0;
-		 * @param {number} now the current time
+	let changed = false;
-		 */
+
-		function render(now: any) {
+	/**
-			now *= 0.001;
+	 * Draws the scene repeatedly
-			const deltaTime = now - then;
+	 * @param {number} now the current time
-			if (now >= 1 && changed == false) {
+	 */
-				changed = true;
+	function render(now: any) {
-			}
+		now *= 0.001;
-			then = now;
+		const deltaTime = now - then;
-			drawScene(gl,
+		if (now >= 1 && changed == false) {
-				programInfo,
+			changed = true;
-				buffers,
-				deltaTime,
-				indices.length,
-				distance);
-			requestAnimationFrame(render);
 		}
-
+		then = now;
-		$(function() {
+		drawScene(gl,
-			$('#input1').on('keypress', function(event: any) {
+			programInfo,
-				if (event.which === 13) {
+			buffers,
-					event.preventDefault();
+			deltaTime,
-					$('#button3').click();
+			length,
-				}
+			distance);
-			});
-			$('#button1').on('click', function() {
-				[programInfo, fragmentShader] = changeFragmentShader(gl,
-					shaderProgram, fragmentShader, fsSource, vsSource);
-			});
-			$('#button2').on('click', function() {
-				[programInfo, fragmentShader] = changeFragmentShader(gl,
-					shaderProgram, fragmentShader, fsSource2, vsSource);
-			});
-			$('#button3').on('click', function() {
-				distance = $('#input1').val();
-				distance = parseFloat(distance);
-			});
-		});
 		requestAnimationFrame(render);
+	}
+
+	$(function() {
+		$('#input1').on('keypress', function(event: any) {
+			if (event.which === 13) {
+				event.preventDefault();
+				$('#button3').click();
+			}
+		});
+		$('#button1').on('click', function() {
+			[programInfo, fragmentShader] = changeFragmentShader(gl,
+				shaderProgram, fragmentShader, fsSource, vsSource);
+		});
+		$('#button2').on('click', function() {
+			[programInfo, fragmentShader] = changeFragmentShader(gl,
+				shaderProgram, fragmentShader, fsSource2, vsSource);
+		});
+		$('#button3').on('click', function() {
+			distance = $('#input1').val();
+			distance = parseFloat(distance);
+		});
+		$('#sphere').on('click', async function() {
+			const data = await getObj('/static/objs/sphere.obj');
+			const [
+				positions,
+				normals,
+				uvs,
+				indices,
+			] = convert(data);
+			console.log(uvs);
+			length = indices.length;
+			deleteBuffers(gl, buffers);
+			buffers = initBuffers(gl, positions, indices, normals);
+		});
+		$('#teapot_normals').on('click', async function() {
+			const data = await getObj('/static/objs/teapot_normals.obj');
+			const [
+				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 [
+				positions,
+				normals,
+				uvs,
+				indices,
+			] = convert(data);
+			console.log(uvs);
+			length = indices.length;
+			deleteBuffers(gl, buffers);
+			buffers = initBuffers(gl, positions, indices, normals);
+		});
 	});
+	requestAnimationFrame(render);
 }
 
 

views/index.ejs

@@ -23,6 +23,11 @@
 					<button id='button3'>Change camera distance</button>
 					<div style='display: inline'>Max distance is 150</div>
 				</div>
+				<div class='ui-block'>
+					<button id='sphere'>Set obj to sphere</button>
+					<button id='teapot_normals'>Set obj to teapot with normals</button>
+					<button id='teapot'>Set obj to teapot</button>
+				</div>
 			</div>
 		</div>
 		<script src="js/bundle.js"></script>