added multiple instances support, changed light position

src/client/main.ts

@@ -47,8 +47,8 @@ async function main() {
 		{
 			gl_Position = uProjectionMatrix *
 				uviewMatrix *
-				unormalModelMatrix *
 				umodelMatrix *
+				unormalModelMatrix *
 				aVertexPosition;
 			vPosition = vec3(aVertexPosition);
 			vNormal = unormalModelMatrix * aVertexNormal;
@@ -82,7 +82,7 @@ async function main() {
 	}
 
 	void main() {
-		vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
+		vec3 n = normalize(vec3(-50., 100., 50.) - vPosition);
 		float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
 		float specular = pow(
 			max(dot(
@@ -120,7 +120,7 @@ async function main() {
 	}
 
 	void main() {
-		vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
+		vec3 n = normalize(vec3(-50., 100., 50.) - vPosition);
 		float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
 		float specular = pow(
 			max(dot(
@@ -141,7 +141,7 @@ async function main() {
 	uniform sampler2D uSampler;
 
 	void main() {
-		vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
+		vec3 n = normalize(vec3(-50., 100., 50.) - vPosition);
 		float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
 		float specular = pow(
 			max(dot(
@@ -162,7 +162,7 @@ async function main() {
 
 	void main() {
 		highp vec4 texelColor = texture2D(uSampler, vTextureCoord);
-		vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
+		vec3 n = normalize(vec3(-50., 100., 50.) - vPosition);
 		float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
 		float specular = pow(
 			max(dot(
@@ -209,7 +209,7 @@ async function main() {
 		if ((1. - sobel.r) + (1. - sobel.g) + (1. - sobel.b) < 2.5)
 			gl_FragColor = vec4(1.0 - sobel.rgb, 1.0 );
 		else {
-			vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
+			vec3 n = normalize(vec3(-50., 100., 50.) - vPosition);
 			float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
 			float specular = pow(
 				max(dot(
@@ -236,6 +236,7 @@ async function main() {
 	const data = await getObj('/static/objs/racer.obj');
 	const distance: any = $('#distance').val();
 	const distanceFine: any = $('#distancefine').val();
+	const instanceNumber: any = $('#instance').val();
 	const params: any = {
 		distance: parseFloat(distance) + parseFloat(distanceFine),
 		circleSize: $('#circlesize').val(),
@@ -245,12 +246,14 @@ async function main() {
 			y: 0,
 			z: 0,
 		},
+		range: 0,
 		rot: {
 			x: $('#rotx').val(),
 			y: $('#roty').val(),
 			z: $('#rotz').val(),
 		},
 		rotSpeed: $('#rotspeed').val(),
+		instanceNumber: parseInt(instanceNumber),
 	};
 
 	const [
@@ -262,15 +265,37 @@ async function main() {
 	let x = 0;
 	let y = 0;
 	let z = 0;
+	let maxx = positions[0];
+	let maxy = positions[1];
+	let maxz = positions[2];
+	let minx = positions[0];
+	let miny = positions[1];
+	let minz = positions[2];
 	for (let i = 0; i < positions.length; i++) {
 		if (i % 3 == 0) {
+			if (positions[i] > maxx) {
+				maxx = positions[i];
+			} else if (positions[i] < minx) {
+				minx = positions[i];
+			}
 			x += positions[i];
 		} else if (i % 3 == 1) {
+			if (positions[i] > maxy) {
+				maxy = positions[i];
+			} else if (positions[i] < miny) {
+				miny = positions[i];
+			}
 			y += positions[i];
 		} else {
+			if (positions[i] > maxz) {
+				maxz = positions[i];
+			} else if (positions[i] < minz) {
+				minz = positions[i];
+			}
 			z += positions[i];
 		}
 	}
+	params.range = Math.max(maxx - minx, maxy - miny, maxz - minz);
 	params.avg.x = x / (positions.length / 3);
 	params.avg.y = y / (positions.length / 3);
 	params.avg.z = z / (positions.length / 3);
@@ -344,15 +369,37 @@ async function main() {
 		let x = 0;
 		let y = 0;
 		let z = 0;
+		let maxx = positions[0];
+		let maxy = positions[1];
+		let maxz = positions[2];
+		let minx = positions[0];
+		let miny = positions[1];
+		let minz = positions[2];
 		for (let i = 0; i < positions.length; i++) {
 			if (i % 3 == 0) {
+				if (positions[i] > maxx) {
+					maxx = positions[i];
+				} else if (positions[i] < minx) {
+					minx = positions[i];
+				}
 				x += positions[i];
 			} else if (i % 3 == 1) {
+				if (positions[i] > maxy) {
+					maxy = positions[i];
+				} else if (positions[i] < miny) {
+					miny = positions[i];
+				}
 				y += positions[i];
 			} else {
+				if (positions[i] > maxz) {
+					maxz = positions[i];
+				} else if (positions[i] < minz) {
+					minz = positions[i];
+				}
 				z += positions[i];
 			}
 		}
+		params.range = Math.max(maxx - minx, maxy - miny, maxz - minz);
 		params.avg.x = x / (positions.length / 3);
 		params.avg.y = y / (positions.length / 3);
 		params.avg.z = z / (positions.length / 3);
@@ -375,6 +422,10 @@ async function main() {
 			const circleSize: any = $('#circlesize').val();
 			params.circleSize = parseFloat(circleSize);
 		});
+		$('#instance').on('input', function() {
+			const instance: any = $('#instance').val();
+			params.instanceNumber = parseInt(instance);
+		});
 		$('#rotx').on('input', function() {
 			const rotx: any = $('#rotx').val();
 			params.rot.x = parseFloat(rotx);
@@ -503,30 +554,6 @@ function drawScene(gl: any,
 		zFar);
 
 
-	const normalModelMatrix = mat4.create();
-
-	mat4.rotateX(normalModelMatrix,
-		normalModelMatrix,
-		params.rot.x);
-	mat4.rotateY(normalModelMatrix,
-		normalModelMatrix,
-		params.rot.y);
-	mat4.rotateZ(normalModelMatrix,
-		normalModelMatrix,
-		params.rot.z);
-	mat4.rotateY(normalModelMatrix,
-		normalModelMatrix,
-		squareRotation);
-
-	const modelMatrix = mat4.create();
-	mat4.translate(modelMatrix,
-		modelMatrix,
-		[
-			-params.avg.x,
-			-params.avg.y,
-			-params.avg.z,
-		]);
-
 	// Set the drawing position to the "identity" point, which is
 	// the center of the scene.
 	const viewMatrix = mat4.create();
@@ -605,6 +632,55 @@ function drawScene(gl: any,
 
 	// 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 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,
+			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,
@@ -617,24 +693,17 @@ function drawScene(gl: any,
 		gl.uniformMatrix4fv(
 			programInfo.uniformLocations.modelMatrix,
 			false,
-		modelMatrix);
+			modelMatrix[i]);
 		gl.uniformMatrix4fv(
 			programInfo.uniformLocations.normalModelMatrix,
 			false,
-		normalModelMatrix);
+			normalModelMatrix[i]);
 
-	// 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 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;

views/index.ejs

@@ -24,9 +24,9 @@
 				<div class='ui-block'>
 					<div style='display: inline;'>Change distance : </div>
 					<div style='display: inline;'>Fine: </div>
-					<input type="range" min="1" max="50" value="1" class="slider" id="distancefine">
+					<input type="range" min="1" max="50" value="25" class="slider" id="distancefine">
 					<div style='display: inline;'>Coarse: </div>
-					<input type="range" min="1" max="1000" value="30" class="slider" id="distance">
+					<input type="range" min="1" max="1000" value="40" class="slider" id="distance">
 				</div>
 				<div class='ui-block'>
 					<div style='display: inline;'>Change circle size : </div>
@@ -40,6 +40,10 @@
 					<div style='display: inline;'>Change base rotation speed : </div>
 					<input type="range" min="0" max="5" value="1" step='0.0001' class="slider" id="rotspeed">
 				</div>
+				<div class='ui-block'>
+					<div style='display: inline;'>Change instances number : </div>
+					<input type="range" min="1" max="180" value="9" step='1' class="slider" id="instance">
+				</div>
 				<div class='ui-block'>
 					<div style='display: inline;'>Change rotation : </div>
 					<div style='display: inline;'>X: </div>