fixed normal matrix and added scale and translation support

src/client/draw.ts

@@ -34,7 +34,7 @@ export function drawScene(gl: any,
 		projectionMatrix,
 		viewMatrix,
 		modelMatrix,
-		normalModelMatrix,
+		normalMatrix,
 	] = initMatrices(gl, params);
 
 	for (let i = 0; i < params.instanceNumber; i++) {
@@ -51,9 +51,9 @@ export function drawScene(gl: any,
 			false,
 			modelMatrix[i]);
 		gl.uniformMatrix4fv(
-			programInfo.uniformLocations.normalModelMatrix,
+			programInfo.uniformLocations.normalMatrix,
 			false,
-			normalModelMatrix[i]);
+			normalMatrix[i]);
 		const vertexCount = params.len;
 		const type = gl.UNSIGNED_SHORT;
 		const offset = 0;

src/client/init.ts

@@ -18,6 +18,16 @@ export function initParams(context: any) {
 			y: parseFloat(<string>$('#roty').val()),
 			z: parseFloat(<string>$('#rotz').val()),
 		},
+		pos: {
+			x: parseFloat(<string>$('#posx').val()),
+			y: parseFloat(<string>$('#posy').val()),
+			z: parseFloat(<string>$('#posz').val()),
+		},
+		scale: {
+			x: parseFloat(<string>$('#scalex').val()),
+			y: parseFloat(<string>$('#scaley').val()),
+			z: parseFloat(<string>$('#scalez').val()),
+		},
 		rotSpeed: parseFloat(<string>$('#rotspeed').val()),
 		instanceNumber: parseFloat(<string>$('#instance').val()),
 		squareRotation: 0,
@@ -81,8 +91,8 @@ export function setProgramInfo(context: any) {
 				context.shaderProgram, 'uviewMatrix'),
 			modelMatrix: context.gl.getUniformLocation(
 				context.shaderProgram, 'umodelMatrix'),
-			normalModelMatrix: context.gl.getUniformLocation(
-				context.shaderProgram, 'unormalModelMatrix'),
+			normalMatrix: context.gl.getUniformLocation(
+				context.shaderProgram, 'unormalMatrix'),
 			uSampler: context.gl.getUniformLocation(
 				context.shaderProgram, 'uSampler'),
 			time: context.gl.getUniformLocation(

src/client/matrix.ts

@@ -38,25 +38,13 @@ export function initMatrices(gl: any, params: any) {
 		viewMatrix,
 		viewMatrix,
 		[0.0, 0.0, -params.distance]);
-	const normalModelMatrix = [];
+	const normalMatrix = [];
 	const modelMatrix = [];
 	for (let i = 0; i < params.instanceNumber; i++) {
-		const normalModelMatrixTemplate = mat4.create();
+		const normalMatrixTemplate = mat4.create();
 		const modelMatrixTemplate = mat4.create();
 		let addx = 0;
 		let addy = 0;
-		mat4.rotateY(normalModelMatrixTemplate,
-			normalModelMatrixTemplate,
-			params.rot.y);
-		mat4.rotateZ(normalModelMatrixTemplate,
-			normalModelMatrixTemplate,
-			params.rot.z);
-		mat4.rotateX(normalModelMatrixTemplate,
-			normalModelMatrixTemplate,
-			params.rot.x);
-		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) {
@@ -70,12 +58,35 @@ export function initMatrices(gl: any, params: any) {
 		mat4.translate(modelMatrixTemplate,
 			modelMatrixTemplate,
 			[
-				params.circleSize * Math.cos(params.squareRotation) + addx,
-				params.circleSize * Math.sin(params.squareRotation) + addy,
-				0,
+				params.circleSize * Math.cos(params.squareRotation) + addx +
+					params.pos.x,
+				params.circleSize * Math.sin(params.squareRotation) + addy +
+					params.pos.y,
+				params.pos.z,
 			]);
-		normalModelMatrix.push(normalModelMatrixTemplate);
+		mat4.rotateY(modelMatrixTemplate,
+			modelMatrixTemplate,
+			params.rot.y);
+		mat4.rotateZ(modelMatrixTemplate,
+			modelMatrixTemplate,
+			params.rot.z);
+		mat4.rotateX(modelMatrixTemplate,
+			modelMatrixTemplate,
+			params.rot.x);
+		mat4.rotateY(modelMatrixTemplate,
+			modelMatrixTemplate,
+			params.squareRotation);
+		mat4.scale(modelMatrixTemplate,
+			modelMatrixTemplate,
+			[
+				params.scale.x,
+				params.scale.y,
+				params.scale.z,
+			]);
+		mat4.invert(normalMatrixTemplate, modelMatrixTemplate);
+		mat4.transpose(normalMatrixTemplate, normalMatrixTemplate);
+		normalMatrix.push(normalMatrixTemplate);
 		modelMatrix.push(modelMatrixTemplate);
 	}
-	return [projectionMatrix, viewMatrix, modelMatrix, normalModelMatrix];
+	return [projectionMatrix, viewMatrix, modelMatrix, normalMatrix];
 }

src/client/shaders/shader.vert

@@ -5,7 +5,7 @@ attribute vec2 aTextureCoord;
 uniform mat4 uProjectionMatrix;
 uniform mat4 uviewMatrix;
 uniform mat4 umodelMatrix;
-uniform mat4 unormalModelMatrix;
+uniform mat4 unormalMatrix;
 
 varying highp vec4 vNormal;
 varying highp vec3 vPosition;
@@ -16,9 +16,8 @@ void main()
 	gl_Position = uProjectionMatrix *
 		uviewMatrix *
 		umodelMatrix *
-		unormalModelMatrix *
 		aVertexPosition;
 	vPosition = vec3(aVertexPosition);
-	vNormal = unormalModelMatrix * aVertexNormal;
+	vNormal = unormalMatrix * aVertexNormal;
 	vTextureCoord = aTextureCoord;
 }

src/client/uijquery.ts

@@ -39,6 +39,24 @@ export function uiUpdateParams(params: any) {
 	$('#rotz').on('input', () => {
 		params.rot.z = parseFloat(<string>$('#rotz').val());
 	});
+	$('#posx').on('change', () => {
+		params.pos.x = parseFloat(<string>$('#posx').val());
+	});
+	$('#posy').on('change', () => {
+		params.pos.y = parseFloat(<string>$('#posy').val());
+	});
+	$('#posz').on('change', () => {
+		params.pos.z = parseFloat(<string>$('#posz').val());
+	});
+	$('#scalex').on('change', () => {
+		params.scale.x = parseFloat(<string>$('#scalex').val());
+	});
+	$('#scaley').on('change', () => {
+		params.scale.y = parseFloat(<string>$('#scaley').val());
+	});
+	$('#scalez').on('change', () => {
+		params.scale.z = parseFloat(<string>$('#scalez').val());
+	});
 	$('#rotspeed').on('input', () => {
 		params.rotSpeed = parseFloat(<string>$('#rotspeed').val());
 	});

views/index.ejs

@@ -59,6 +59,24 @@
 					<div style='display: inline;'>Z: </div>
 					<input type="range" min="0" max="6.2830" value="0" step='0.0001' class="slider" id="rotz">
 				</div>
+				<div class='ui-block'>
+					<div style='display: inline;'>Change scale: </div>
+					<div style='display: inline;'>X: </div>
+					<input type="number" value="1" id="scalex">
+					<div style='display: inline;'>Y: </div>
+					<input type="number" value="1" id="scaley">
+					<div style='display: inline;'>Z: </div>
+					<input type="number" value="1" id="scalez">
+				</div>
+				<div class='ui-block'>
+					<div style='display: inline;'>Translate: </div>
+					<div style='display: inline;'>X: </div>
+					<input type="number" value="0" id="posx">
+					<div style='display: inline;'>Y: </div>
+					<input type="number" value="0" id="posy">
+					<div style='display: inline;'>Z: </div>
+					<input type="number" value="0" id="posz">
+				</div>
 				<div class='ui-block'>
 					<div style='display: inline;'>Change object: </div>
 					<button id='o_sphere'>Sphere</button>