added objects, textures, and sobel edge detection shader

src/client/changeshader.ts

@@ -40,6 +40,8 @@ export function changeFragmentShader(gl: any,
 				shaderProgram, 'uviewMatrix'),
 			modelMatrix: gl.getUniformLocation(
 				shaderProgram, 'umodelMatrix'),
+			normalModelMatrix: gl.getUniformLocation(
+				shaderProgram, 'unormalModelMatrix'),
 			uSampler: gl.getUniformLocation(
 				shaderProgram, 'uSampler'),
 		},

src/client/main.ts

@@ -37,6 +37,7 @@ async function main() {
 		uniform mat4 uProjectionMatrix;
 		uniform mat4 uviewMatrix;
 		uniform mat4 umodelMatrix;
+		uniform mat4 unormalModelMatrix;
 
 		varying highp vec4 vNormal;
 		varying highp vec3 vPosition;
@@ -46,10 +47,11 @@ async function main() {
 		{
 			gl_Position = uProjectionMatrix *
 				uviewMatrix *
+				unormalModelMatrix *
 				umodelMatrix *
 				aVertexPosition;
 			vPosition = vec3(aVertexPosition);
-			vNormal = umodelMatrix * aVertexNormal;
+			vNormal = unormalModelMatrix * aVertexNormal;
 			vTextureCoord = aTextureCoord;
 		}
 	`;
@@ -178,6 +180,46 @@ async function main() {
 		gl_FragColor = vec4((texelColor.xyz * diffuse * 0.8) + (texelColor.xyz * vec3(0.2)) + (specular * vec3(1.)), 1.0);
 	}`;
 	
+	const fsSource5 = `
+	precision highp float;
+
+    varying highp vec2 vTextureCoord;
+	varying highp vec4 vNormal;
+	varying highp vec3 vPosition;
+
+	uniform sampler2D uSampler;
+
+	void make_kernel(inout vec4 n[9], sampler2D tex, vec2 coord)
+	{
+		float w = 1.0 / 640.;
+		float h = 1.0 / 640.;
+
+		n[0] = texture2D(tex, coord + vec2( -w, -h));
+		n[1] = texture2D(tex, coord + vec2(0.0, -h));
+		n[2] = texture2D(tex, coord + vec2(  w, -h));
+		n[3] = texture2D(tex, coord + vec2( -w, 0.0));
+		n[4] = texture2D(tex, coord);
+		n[5] = texture2D(tex, coord + vec2(  w, 0.0));
+		n[6] = texture2D(tex, coord + vec2( -w, h));
+		n[7] = texture2D(tex, coord + vec2(0.0, h));
+		n[8] = texture2D(tex, coord + vec2(  w, h));
+	}
+
+	void main(void) 
+	{
+		vec4 n[9];
+		make_kernel( n, uSampler, vTextureCoord);
+
+		vec4 sobel_edge_h = n[2] + (2.0*n[5]) + n[8] - (n[0] + (2.0*n[3]) + n[6]);
+		vec4 sobel_edge_v = n[0] + (2.0*n[1]) + n[2] - (n[6] + (2.0*n[7]) + n[8]);
+		vec4 sobel = sqrt((sobel_edge_h * sobel_edge_h) + (sobel_edge_v * sobel_edge_v));
+
+		if ((1. - sobel.r) + (1. - sobel.g) + (1. - sobel.b) < 2.5)
+			gl_FragColor = vec4(1.0 - sobel.rgb, 1.0 );
+		else
+			gl_FragColor = vec4(vec3(0.), 1.);
+	}`;
+
 	/* eslint-enable */
 
 	/**
@@ -191,7 +233,7 @@ async function main() {
 		return data;
 	}
 
-	const data = await getObj('/static/objs/fox.obj');
+	const data = await getObj('/static/objs/racer.obj');
 	const params: any = {
 		distance: $('#distance').val(),
 		circleSize: $('#circlesize').val(),
@@ -201,6 +243,11 @@ async function main() {
 			y: 0,
 			z: 0,
 		},
+		rot: {
+			x: $('#rotx').val(),
+			y: $('#roty').val(),
+			z: $('#rotz').val(),
+		},
 	};
 
 	const [
@@ -246,12 +293,14 @@ async function main() {
 				shaderProgram, 'uviewMatrix'),
 			modelMatrix: gl.getUniformLocation(
 				shaderProgram, 'umodelMatrix'),
+			normalModelMatrix: gl.getUniformLocation(
+				shaderProgram, 'unormalModelMatrix'),
 			uSampler: gl.getUniformLocation(
 				shaderProgram, 'uSampler'),
 		},
 	};
 
-	let texture = loadTexture(gl, '/static/textures/fox.png');
+	let texture = loadTexture(gl, '/static/textures/racer.png');
 	let buffers = initBuffers(gl, positions, indices, normals, uvs);
 	let then = 0;
 	let changed = false;
@@ -317,6 +366,18 @@ async function main() {
 			const circleSize: any = $('#circlesize').val();
 			params.circleSize = parseFloat(circleSize);
 		});
+		$('#rotx').on('input', function() {
+			const rotx: any = $('#rotx').val();
+			params.rot.x = parseFloat(rotx);
+		});
+		$('#roty').on('input', function() {
+			const roty: any = $('#roty').val();
+			params.rot.y = parseFloat(roty);
+		});
+		$('#rotz').on('input', function() {
+			const rotz: any = $('#rotz').val();
+			params.rot.z = parseFloat(rotz);
+		});
 		$('#fov').on('input', function() {
 			const fov: any = $('#fov').val();
 			params.fov = parseFloat(fov);
@@ -337,6 +398,10 @@ async function main() {
 			[programInfo, fragmentShader] = changeFragmentShader(gl,
 				shaderProgram, fragmentShader, fsSource4, vsSource);
 		});
+		$('#s_sobel').on('click', function() {
+			[programInfo, fragmentShader] = changeFragmentShader(gl,
+				shaderProgram, fragmentShader, fsSource5, vsSource);
+		});
 		$('#o_sphere').on('click', async function() {
 			const data = await getObj('/static/objs/sphere.obj');
 			updateObj(data);
@@ -349,6 +414,14 @@ async function main() {
 			const data = await getObj('/static/objs/fox.obj');
 			updateObj(data);
 		});
+		$('#o_mecha').on('click', async function() {
+			const data = await getObj('/static/objs/mecha.obj');
+			updateObj(data);
+		});
+		$('#o_racer').on('click', async function() {
+			const data = await getObj('/static/objs/racer.obj');
+			updateObj(data);
+		});
 		$('#t_wall').on('click', async function() {
 			texture = loadTexture(gl, '/static/textures/wall.png');
 		});
@@ -361,6 +434,12 @@ async function main() {
 		$('#t_fox').on('click', async function() {
 			texture = loadTexture(gl, '/static/textures/fox.png');
 		});
+		$('#t_racer').on('click', async function() {
+			texture = loadTexture(gl, '/static/textures/racer.png');
+		});
+		$('#t_racer_wireframe').on('click', async function() {
+			texture = loadTexture(gl, '/static/textures/racer_wireframe.png');
+		});
 	});
 	requestAnimationFrame(render);
 }
@@ -411,28 +490,31 @@ function drawScene(gl: any,
 		zFar);
 
 
-	const modelMatrix = mat4.create();
+	const normalModelMatrix = mat4.create();
 
-	mat4.rotate(modelMatrix,
+	mat4.rotateX(normalModelMatrix,
+		normalModelMatrix,
+		params.rot.x);
+	mat4.rotateY(normalModelMatrix,
+		normalModelMatrix,
+		params.rot.y);
+	mat4.rotateZ(normalModelMatrix,
+		normalModelMatrix,
+		params.rot.z);
+
+	const modelMatrix = mat4.create();
+	mat4.translate(modelMatrix,
 		modelMatrix,
-		squareRotation,
 		[
-			0,
-			1,
-			0,
+			-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();
 
-	mat4.translate(viewMatrix,
-		viewMatrix,
-		[
-			-params.avg.x,
-			-params.avg.y,
-			-params.avg.z,
-		]);
 	mat4.translate(
 		viewMatrix,
 		viewMatrix, [
@@ -520,6 +602,10 @@ function drawScene(gl: any,
 		programInfo.uniformLocations.modelMatrix,
 		false,
 		modelMatrix);
+	gl.uniformMatrix4fv(
+		programInfo.uniformLocations.normalModelMatrix,
+		false,
+		normalModelMatrix);
 
 	// Tell WebGL we want to affect texture unit 0
 	gl.activeTexture(gl.TEXTURE0);

views/index.ejs

@@ -19,29 +19,43 @@
 					<button id='s_color'>Change Shader to colored</button>
 					<button id='s_flat'>Change Shader to flat</button>
 					<button id='s_texture'>Change Shader to texture</button>
+					<button id='s_sobel'>Change Shader to sobel edge detection</button>
 				</div>
 				<div class='ui-block'>
 					<div style='display: inline;'>Change distance : </div>
-					<input type="range" min="1" max="1000" value="250" class="slider" id="distance">
+					<input type="range" min="1" max="1000" value="30" class="slider" id="distance">
 				</div>
 				<div class='ui-block'>
 					<div style='display: inline;'>Change circle size : </div>
-					<input type="range" min="1" max="50" value="10" class="slider" id="circlesize">
+					<input type="range" min="0" max="50" value="2" class="slider" id="circlesize">
 				</div>
 				<div class='ui-block'>
 					<div style='display: inline;'>Change fov : </div>
 					<input type="range" min="15" max="150" value="45" class="slider" id="fov">
 				</div>
+				<div class='ui-block'>
+					<div style='display: inline;'>Change rotation : </div>
+					<div style='display: inline;'>X: </div>
+					<input type="range" min="0" max="6.2830" value="0.5" step='0.0001' class="slider" id="rotx">
+					<div style='display: inline;'>Y: </div>
+					<input type="range" min="0" max="6.2830" value="0.8" step='0.01' class="slider" id="roty">
+					<div style='display: inline;'>Z: </div>
+					<input type="range" min="0" max="6.2830" value="1" step='0.01' class="slider" id="rotz">
+				</div>
 				<div class='ui-block'>
 					<button id='o_sphere'>Set object to sphere</button>
 					<button id='o_teapot'>Set object to teapot</button>
 					<button id='o_fox'>Set object to fox</button>
+					<button id='o_mecha'>Set object to mecha</button>
+					<button id='o_racer'>Set object to racer</button>
 				</div>
 				<div class='ui-block'>
 					<button id='t_wall'>Set texture to wall</button>
 					<button id='t_ice'>Set texture to ice</button>
 					<button id='t_noise'>Set texture to noise</button>
 					<button id='t_fox'>Set texture to fox</button>
+					<button id='t_racer'>Set texture to racer</button>
+					<button id='t_racer_wireframe'>Set texture to racer wireframe</button>
 				</div>
 				<div class='ui-block'>
 					<p>If you're on mobile, you need to set the shader to texture to change object, then you can change the shader</p>