refacto : use context object instead of returns

src/client/init.ts

@@ -1,27 +1,45 @@
-import {initShaderProgram,
+import $ from 'jquery';
-	unlinkShaderProgram} from './shaders';
 
 /**
- *
+ * Initialize the parameters
  * @param {any} context the program context
- * @param {string} fsSource new fragment shader source
- * @param {string} vsSource current vsSource
  */
-export function changeFragmentShader(context: any,
+export function initParams(context: any) {
-	fsSource: string,
+	const distance: any = $('#distance').val();
-	vsSource: string) {
+	const distanceFine: any = $('#distancefine').val();
-	[context.shaderProgram, context.fragmentShader] =
+
-		unlinkShaderProgram(context.gl,
+	context.params = {
-			context.fragmentShader,
+		distance: parseFloat(distance) + parseFloat(distanceFine),
-			context.shaderProgram);
+		circleSize: $('#circlesize').val(),
-	initShaderProgram(context, vsSource, fsSource);
+		fov: $('#fov').val(),
+		length: 0,
+		avg: {
+			x: 0,
+			y: 0,
+			z: 0,
+		},
+		range: 0,
+		rot: {
+			x: $('#rotx').val(),
+			y: $('#roty').val(),
+			z: $('#rotz').val(),
+		},
+		rotSpeed: $('#rotspeed').val(),
+		instanceNumber: $('#instance').val(),
+		squareRotation: 0,
+	};
+}
+
+/**
+ * Set the program info
+ * @param {any} context the program context
+ */
+export function setProgramInfo(context: any) {
 	context.programInfo = {
 		program: context.shaderProgram,
 		attribLocations: {
 			vertexPosition: context.gl.getAttribLocation(context.shaderProgram,
 				'aVertexPosition'),
-			vertexColor: context.gl.getAttribLocation(context.shaderProgram,
-				'aVertexColor'),
 			vertexNormal: context.gl.getAttribLocation(context.shaderProgram,
 				'aVertexNormal'),
 			textureCoord: context.gl.getAttribLocation(context.shaderProgram,

src/client/main.ts

@@ -1,5 +1,3 @@
-
-import $ from 'jquery';
 import vsSource from './shaders/shader.vert';
 import fsSource4 from './shaders/texture.frag';
 
@@ -7,6 +5,7 @@ import {fetchObj, updateObj} from './objutils';
 import {initShaderProgram} from './shaders';
 import {loadTexture} from './texture';
 import {drawScene} from './draw';
+import {initParams, setProgramInfo} from './init';
 
 import {uiUpdateParams,
 	uiUpdateTexture,
@@ -40,57 +39,11 @@ async function main() {
 	}
 
 	const data = await fetchObj('/static/objs/racer.obj');
-	const distance: any = $('#distance').val();
+	initParams(context);
-	const distanceFine: any = $('#distancefine').val();
+	console.log(context.params);
-	const instanceNumber: any = $('#instance').val();
+	updateObj(context, data, true);
-	context.params = {
-		distance: parseFloat(distance) + parseFloat(distanceFine),
-		circleSize: $('#circlesize').val(),
-		fov: $('#fov').val(),
-		length: 0,
-		avg: {
-			x: 0,
-			y: 0,
-			z: 0,
-		},
-		range: 0,
-		rot: {
-			x: $('#rotx').val(),
-			y: $('#roty').val(),
-			z: $('#rotz').val(),
-		},
-		rotSpeed: $('#rotspeed').val(),
-		instanceNumber: parseInt(instanceNumber),
-		squareRotation: 0,
-	};
-	[context.buffers, context.params] = updateObj(
-		context.gl, data, context.buffers, context.params, true);
-
 	initShaderProgram(context, vsSource, fsSource4);
-	context.programInfo = {
+	setProgramInfo(context);
-		program: context.shaderProgram,
-		attribLocations: {
-			vertexPosition: context.gl.getAttribLocation(context.shaderProgram,
-				'aVertexPosition'),
-			vertexNormal: context.gl.getAttribLocation(context.shaderProgram,
-				'aVertexNormal'),
-			textureCoord: context.gl.getAttribLocation(context.shaderProgram,
-				'aTextureCoord'),
-		},
-		uniformLocations: {
-			projectionMatrix: context.gl.getUniformLocation(
-				context.shaderProgram, 'uProjectionMatrix'),
-			viewMatrix: context.gl.getUniformLocation(
-				context.shaderProgram, 'uviewMatrix'),
-			modelMatrix: context.gl.getUniformLocation(
-				context.shaderProgram, 'umodelMatrix'),
-			normalModelMatrix: context.gl.getUniformLocation(
-				context.shaderProgram, 'unormalModelMatrix'),
-			uSampler: context.gl.getUniformLocation(
-				context.shaderProgram, 'uSampler'),
-		},
-	};
-
 	context.texture = loadTexture(context.gl, '/static/textures/racer.png');
 	let then = 0;
 	let changed = false;

src/client/objutils.ts

@@ -15,18 +15,13 @@ export async function fetchObj(url: string) {
 
 /**
  * Pushes a new obj file to the gl buffer
- * @param {any} gl the WebGL context
+ * @param {any} context the program context
  * @param {string} data the obj file to push
- * @param {any} buffers the buffers to be updated
- * @param {any} params the params to be updated
  * @param {boolean} firstCall is it first object updated ?
- * @return {Array<any>} the updated buffers and params
  */
 export function updateObj(
-	gl: any,
+	context: any,
 	data: string,
-	buffers: any,
-	params: any,
 	firstCall: boolean = false) {
 	const [
 		positions,
@@ -34,7 +29,7 @@ export function updateObj(
 		uvs,
 		indices,
 	] = convert(data);
-	params.length = indices.length;
+	context.params.length = indices.length;
 	let x = 0;
 	let y = 0;
 	let z = 0;
@@ -68,13 +63,12 @@ export function updateObj(
 			z += positions[i];
 		}
 	}
-	params.range = Math.max(maxx - minx, maxy - miny, maxz - minz);
+	context.params.range = Math.max(maxx - minx, maxy - miny, maxz - minz);
-	params.avg.x = x / (positions.length / 3);
+	context.params.avg.x = x / (positions.length / 3);
-	params.avg.y = y / (positions.length / 3);
+	context.params.avg.y = y / (positions.length / 3);
-	params.avg.z = z / (positions.length / 3);
+	context.params.avg.z = z / (positions.length / 3);
 	if (!firstCall) {
-		deleteBuffers(gl, buffers);
+		deleteBuffers(context.gl, context.buffers);
 	}
-	buffers = initBuffers(gl, positions, indices, normals, uvs);
+	context.buffers = initBuffers(context.gl, positions, indices, normals, uvs);
-	return [buffers, params];
 }

src/client/shaders.ts

@@ -1,15 +1,4 @@
-/**
+import {setProgramInfo} from './init';
- * Initialize a shader program, so WebGL knows how to draw our data
- * @param {any} gl the WebGL context
- * @param {any} shader the shader to unlink
- * @param {any} shaderProgram the existing shaderprogram
- * @return {any} the shader program
- */
-export function unlinkShaderProgram(gl: any, shader: any, shaderProgram: any) {
-	// Create the shader program
-	gl.deleteShader(shader);
-	return [shaderProgram, shader];
-}
 
 /**
  * Initialize a shader program, so WebGL knows how to draw our data
@@ -62,3 +51,17 @@ export function loadShader(gl: any, type: any, source: string) {
 	}
 	return shader;
 }
+
+/**
+ *
+ * @param {any} context the program context
+ * @param {string} fsSource new fragment shader source
+ * @param {string} vsSource current vsSource
+ */
+export function changeFragmentShader(context: any,
+	fsSource: string,
+	vsSource: string) {
+	context.gl.deleteShader(context.fragmentShader);
+	initShaderProgram(context, vsSource, fsSource);
+	setProgramInfo(context);
+}

src/client/uijquery.ts

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import {loadTexture} from './texture';
 import {fetchObj, updateObj} from './objutils';
-import {changeFragmentShader} from './changeshader';
+import {changeFragmentShader} from './shaders';
 
 import vsSource from './shaders/shader.vert';
 import fsSource from './shaders/blackandwhite.frag';
@@ -94,38 +94,23 @@ export function uiUpdateTexture(context: any) {
 export function uiUpdateObject(context: any) {
 	$('#o_sphere').on('click', async function() {
 		const data = await fetchObj('/static/objs/sphere.obj');
-		[context.buffers, context.params] = updateObj(context.gl,
+		updateObj(context, data);
-			data,
-			context.buffers,
-			context.params);
 	});
 	$('#o_teapot').on('click', async function() {
 		const data = await fetchObj('/static/objs/teapot.obj');
-		[context.buffers, context.params] = updateObj(context.gl,
+		updateObj(context, data);
-			data,
-			context.buffers,
-			context.params);
 	});
 	$('#o_fox').on('click', async function() {
 		const data = await fetchObj('/static/objs/fox.obj');
-		[context.buffers, context.params] = updateObj(context.gl,
+		updateObj(context, data);
-			data,
-			context.buffers,
-			context.params);
 	});
 	$('#o_mecha').on('click', async function() {
 		const data = await fetchObj('/static/objs/mecha.obj');
-		[context.buffers, context.params] = updateObj(context.gl,
+		updateObj(context, data);
-			data,
-			context.buffers,
-			context.params);
 	});
 	$('#o_racer').on('click', async function() {
 		const data = await fetchObj('/static/objs/racer.obj');
-		[context.buffers, context.params] = updateObj(context.gl,
+		updateObj(context, data);
-			data,
-			context.buffers,
-			context.params);
 	});
 }