refacto : split matrices initialization

src/client/main.ts

@@ -1,6 +1,4 @@
 // @ts-ignore
-import mat4 from 'gl-mat4';
-// @ts-ignore
 import {convert} from './objparser';
 import $ from 'jquery';
 import vsSource from './shaders/shader.vert';
@@ -14,8 +12,7 @@ import {initBuffers, deleteBuffers} from './buffers';
 import {initShaderProgram} from './shaders';
 import {changeFragmentShader} from './changeshader';
 import {loadTexture} from './texture';
-
+import {initMatrices} from './matrix';
-let squareRotation = 0.0;
 
 main();
 
@@ -65,6 +62,7 @@ async function main() {
 		},
 		rotSpeed: $('#rotspeed').val(),
 		instanceNumber: parseInt(instanceNumber),
+		squareRotation: 0,
 	};
 
 	const [
@@ -151,6 +149,7 @@ async function main() {
 	function render(now: any) {
 		now *= 0.001;
 		const deltaTime = now - then;
+		params.squareRotation += deltaTime;
 		if (now >= 1 && changed == false) {
 			changed = true;
 		}
@@ -158,7 +157,6 @@ async function main() {
 		drawScene(gl,
 			programInfo,
 			buffers,
-			deltaTime,
 			length,
 			params,
 			texture);
@@ -324,7 +322,6 @@ async function main() {
  * @param {any} gl the WebGL context
  * @param {any} programInfo WebGL program information
  * @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} params various parameterss
  * @param {any} texture the texture to load
@@ -332,7 +329,6 @@ async function main() {
 function drawScene(gl: any,
 	programInfo: any,
 	buffers: any,
-	deltaTime: number,
 	length: number,
 	params: any,
 	texture: any) {
@@ -340,50 +336,9 @@ function drawScene(gl: any,
 	gl.clearDepth(1.0);
 	gl.enable(gl.DEPTH_TEST);
 	gl.depthFunc(gl.LEQUAL);
-	// Clear the canvas before we start drawing on it.
 	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-	// Create a perspective matrix, a special matrix that is
-	// used to simulate the distortion of perspective in a camera.
-	// Our field of view is 45 degrees, with a width/height
-	// ratio that matches the display size of the canvas
-	// and we only want to see objects between 0.1 units
-	// and 100 units away from the camera.
-	const fieldOfView = params.fov * Math.PI / 180;
-	const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
-	const zNear = 0.1;
-	const zFar = 1000.0;
-	const projectionMatrix = mat4.create();
 
-	// note: glmatrix.js always has the first argument
-	// as the destination to receive the result.
-	mat4.perspective(
-		projectionMatrix,
-		fieldOfView,
-		aspect,
-		zNear,
-		zFar);
-
-
-	// Set the drawing position to the "identity" point, which is
-	// the center of the scene.
-	const viewMatrix = mat4.create();
-
-	mat4.translate(
-		viewMatrix,
-		viewMatrix, [
-			Math.cos(squareRotation) * params.circleSize,
-			Math.sin(squareRotation) * params.circleSize,
-			0,
-		]);
-
-	mat4.translate(
-		viewMatrix,
-		viewMatrix,
-		[0.0, 0.0, -params.distance]);
-
-	// Tell WebGL how to pull out the positions from the position
-	// buffer into the vertexPosition attribute.
 	{
 		const numComponents = 3;
 		const type = gl.FLOAT;
@@ -401,8 +356,6 @@ function drawScene(gl: any,
 		gl.enableVertexAttribArray(
 			programInfo.attribLocations.vertexPosition);
 	}
-
-
 	{
 		const numComponents = 3;
 		const type = gl.FLOAT;
@@ -420,17 +373,15 @@ function drawScene(gl: any,
 		gl.enableVertexAttribArray(
 			programInfo.attribLocations.vertexNormal);
 	}
-
-	// tell webgl how to pull out the texture coordinates from buffer
 	{
-		const num = 2; // every coordinate composed of 2 values
+		const numComponents = 2;
-		const type = gl.FLOAT; // the data in the buffer is 32 bit float
+		const type = gl.FLOAT;
-		const normalize = false; // don't normalize
+		const normalize = false;
-		const stride = 0; // how many bytes to get from one set to the next
+		const stride = 0;
-		const offset = 0; // how many bytes inside the buffer to start from
+		const offset = 0;
 		gl.bindBuffer(gl.ARRAY_BUFFER, buffers.uvs);
 		gl.vertexAttribPointer(programInfo.attribLocations.textureCoord,
-			num,
+			numComponents,
 			type,
 			normalize,
 			stride,
@@ -438,61 +389,20 @@ function drawScene(gl: any,
 		gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);
 	}
 
-	// Tell WebGL which indices to use to index the vertices
 	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
-
-	// Tell WebGL to use our program when drawing
 	gl.useProgram(programInfo.program);
-
-	// Tell WebGL we want to affect texture unit 0
 	gl.activeTexture(gl.TEXTURE0);
-	// Bind the texture to texture unit 0
 	gl.bindTexture(gl.TEXTURE_2D, texture);
-	// Tell the shader we bound the texture to texture unit 0
 	gl.uniform1i(programInfo.uniformLocations.uSampler, 0);
 
-	const normalModelMatrix = [];
+	const [
-	const modelMatrix = [];
+		projectionMatrix,
-	for (let i = 0; i < params.instanceNumber; i++) {
+		viewMatrix,
-		const normalModelMatrixTemplate = mat4.create();
+		modelMatrix,
-		const modelMatrixTemplate = mat4.create();
+		normalModelMatrix,
-		let addx = 0;
+	] = initMatrices(gl, params);
-		let addy = 0;
-		mat4.rotateX(normalModelMatrixTemplate,
-			normalModelMatrixTemplate,
-			params.rot.x);
-		mat4.rotateY(normalModelMatrixTemplate,
-			normalModelMatrixTemplate,
-			params.rot.y);
-		mat4.rotateZ(normalModelMatrixTemplate,
-			normalModelMatrixTemplate,
-			params.rot.z);
-		mat4.rotateY(normalModelMatrixTemplate,
-			normalModelMatrixTemplate,
-			squareRotation);
-		if (i % 3 == 1) {
-			addx = Math.floor(i / 9 + 1) * params.range * 1.5;
-		} else if (i % 3 == 2) {
-			addx = -Math.floor(i / 9 + 1) * params.range * 1.5;
-		}
-		if (i % 9 > 5) {
-			addy = Math.floor(i / 9 + 1) * params.range * 1.5;
-		} else if (i % 9 > 2 && i % 9 < 6) {
-			addy = -Math.floor(i / 9 + 1) * params.range * 1.5;
-		}
-		mat4.translate(modelMatrixTemplate,
-			modelMatrixTemplate,
-			[
-				-params.avg.x + addx,
-				-params.avg.y + addy,
-				-params.avg.z,
-			]);
-		normalModelMatrix.push(normalModelMatrixTemplate);
-		modelMatrix.push(modelMatrixTemplate);
-	}
 
 	for (let i = 0; i < params.instanceNumber; i++) {
-		// Set the shader uniforms
 		gl.uniformMatrix4fv(
 			programInfo.uniformLocations.projectionMatrix,
 			false,
@@ -509,13 +419,9 @@ function drawScene(gl: any,
 			programInfo.uniformLocations.normalModelMatrix,
 			false,
 			normalModelMatrix[i]);
-
 		const vertexCount = length;
 		const type = gl.UNSIGNED_SHORT;
 		const offset = 0;
 		gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
-		// gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
 	}
-
-	squareRotation += deltaTime * params.rotSpeed;
 }

src/client/matrix.ts

@@ -0,0 +1,76 @@
+// @ts-ignore
+import mat4 from 'gl-mat4';
+
+/**
+ * Initializes matrices for the scene
+ * @param {any} gl the WebGL context
+ * @param {any} params various parameters
+ * @return {Array<mat4>} the matrices
+ */
+export function initMatrices(gl: any, params: any) {
+	const fieldOfView = params.fov * Math.PI / 180;
+	const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+	const zNear = 0.1;
+	const zFar = 1000.0;
+	const projectionMatrix = mat4.create();
+
+	mat4.perspective(
+		projectionMatrix,
+		fieldOfView,
+		aspect,
+		zNear,
+		zFar);
+	const viewMatrix = mat4.create();
+	mat4.translate(
+		viewMatrix,
+		viewMatrix, [
+			Math.cos(params.squareRotation) * params.circleSize,
+			Math.sin(params.squareRotation) * params.circleSize,
+			0,
+		]);
+	mat4.translate(
+		viewMatrix,
+		viewMatrix,
+		[0.0, 0.0, -params.distance]);
+
+	const normalModelMatrix = [];
+	const modelMatrix = [];
+	for (let i = 0; i < params.instanceNumber; i++) {
+		const normalModelMatrixTemplate = mat4.create();
+		const modelMatrixTemplate = mat4.create();
+		let addx = 0;
+		let addy = 0;
+		mat4.rotateX(normalModelMatrixTemplate,
+			normalModelMatrixTemplate,
+			params.rot.x);
+		mat4.rotateY(normalModelMatrixTemplate,
+			normalModelMatrixTemplate,
+			params.rot.y);
+		mat4.rotateZ(normalModelMatrixTemplate,
+			normalModelMatrixTemplate,
+			params.rot.z);
+		mat4.rotateY(normalModelMatrixTemplate,
+			normalModelMatrixTemplate,
+			params.squareRotation);
+		if (i % 3 == 1) {
+			addx = Math.floor(i / 9 + 1) * params.range * 1.5;
+		} else if (i % 3 == 2) {
+			addx = -Math.floor(i / 9 + 1) * params.range * 1.5;
+		}
+		if (i % 9 > 5) {
+			addy = Math.floor(i / 9 + 1) * params.range * 1.5;
+		} else if (i % 9 > 2 && i % 9 < 6) {
+			addy = -Math.floor(i / 9 + 1) * params.range * 1.5;
+		}
+		mat4.translate(modelMatrixTemplate,
+			modelMatrixTemplate,
+			[
+				-params.avg.x + addx,
+				-params.avg.y + addy,
+				-params.avg.z,
+			]);
+		normalModelMatrix.push(normalModelMatrixTemplate);
+		modelMatrix.push(modelMatrixTemplate);
+	}
+	return [projectionMatrix, viewMatrix, modelMatrix, normalModelMatrix];
+}