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(buffer);
-	}
+	gl.deleteBuffer(buffers.color);
+	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.);
-		float texture = (tmp.x + tmp.y + tmp.z) / 9.;
+		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.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 = vec3(tmp.x / 3., tmp.y / 3., tmp.z / 3.);
+		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.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,9 +133,18 @@ function main() {
 	
 	/* eslint-enable */
 
-	fetch('/static/objs/teapot_normals.obj').then((response) => {
-		return response.text();
-	}).then((data: any) => {
+	/**
+	 * Fetch an obj file
+	 * @param {string} url the url to fetch the object from
+	 * @return {string} the raw data of the obj file
+	 */
+	async function getObj(url: string) {
+		const response = await fetch(url);
+		const data = await response.text();
+		return data;
+	}
+
+	const data = await getObj('/static/objs/teapot_normals.obj');
 	let distance: any = $('#input1').val();
 	distance = parseFloat(distance);
 	const [
@@ -145,6 +153,7 @@ function main() {
 		uvs,
 		indices,
 	] = convert(data);
+	let length = indices.length;
 	console.log(uvs);
 	let [shaderProgram, fragmentShader]: any = initShaderProgram(gl,
 		vsSource,
@@ -170,7 +179,7 @@ function main() {
 		},
 	};
 
-		const buffers = initBuffers(gl, positions, indices, normals);
+	let buffers = initBuffers(gl, positions, indices, normals);
 	let then = 0;
 	let changed = false;
 
@@ -189,7 +198,7 @@ function main() {
 			programInfo,
 			buffers,
 			deltaTime,
-				indices.length,
+			length,
 			distance);
 		requestAnimationFrame(render);
 	}
@@ -213,9 +222,47 @@ function main() {
 			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>