change sobel to show lighted grey instead of black when no borders, update mobile instructions, add scrollbar

public/css/style.css

@@ -10,7 +10,6 @@ body {
 	margin: 0;
 	height: 100%;
 	width: 100%;
-	overflow: hidden;
 }
 
 #glCanvas {

src/client/main.ts

@@ -59,9 +59,12 @@ async function main() {
 	const fsSource = `
 	precision highp float;
 
+    varying highp vec2 vTextureCoord;
 	varying highp vec4 vNormal;
 	varying highp vec3 vPosition;
 
+	uniform sampler2D uSampler;
+
 	vec3 extremize(vec3 v, float n) {
 		if (v.x > n / 2.)
 			v.x = n;
@@ -94,9 +97,12 @@ async function main() {
 	const fsSource2 = `
 	precision highp float;
 
+    varying highp vec2 vTextureCoord;
 	varying highp vec4 vNormal;
 	varying highp vec3 vPosition;
 
+	uniform sampler2D uSampler;
+
 	vec3 extremize(vec3 v, float n) {
 		if (v.x > n / 2.)
 			v.x = n;
@@ -128,24 +134,11 @@ async function main() {
 	const fsSource3 = `
 	precision highp float;
 
+    varying highp vec2 vTextureCoord;
 	varying highp vec4 vNormal;
 	varying highp vec3 vPosition;
 
-	vec3 extremize(vec3 v, float n) {
-		if (v.x > n / 2.)
-			v.x = n;
-		else
-			v.x = 0.;
-		if (v.y > n / 2.)
-			v.y = n;
-		else
-			v.y = 0.;
-		if (v.z > n / 2.)
-			v.z = n;
-		else
-			v.z = 0.;
-		return v;
-	}
+	uniform sampler2D uSampler;
 
 	void main() {
 		vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
@@ -155,7 +148,6 @@ async function main() {
 				reflect(n, normalize(vNormal.xyz)),
 				normalize(vec3(0., 0., -50.) - vPosition)),
 			0.), 10.);
-		vec3 texture = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.) / vec3(2);
 		gl_FragColor = vec4((diffuse * 0.8) + (vec3(0.2)) + (specular * vec3(1.)), 1.0);
 	}`;
 
@@ -216,8 +208,16 @@ 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
-			gl_FragColor = vec4(vec3(0.), 1.);
+		else {
+			vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition);
+			float diffuse = max(dot(normalize(vNormal.xyz), n), 0.);
+			float specular = pow(
+				max(dot(
+					reflect(n, normalize(vNormal.xyz)),
+					normalize(vec3(0., 0., -50.) - vPosition)),
+				0.), 10.);
+			gl_FragColor = vec4((diffuse * 0.8) + (vec3(0.2)) + (specular * vec3(1.)), 1.0);
+		}
 	}`;
 
 	/* eslint-enable */
@@ -390,7 +390,7 @@ async function main() {
 			[programInfo, fragmentShader] = changeFragmentShader(gl,
 				shaderProgram, fragmentShader, fsSource2, vsSource);
 		});
-		$('#s_flat').on('click', function() {
+		$('#s_grey').on('click', function() {
 			[programInfo, fragmentShader] = changeFragmentShader(gl,
 				shaderProgram, fragmentShader, fsSource3, vsSource);
 		});

views/index.ejs

@@ -17,7 +17,7 @@
 				<div class='ui-block'>
 					<button id='s_blackandwhite'>Change Shader to black and white</button>
 					<button id='s_color'>Change Shader to colored</button>
-					<button id='s_flat'>Change Shader to flat</button>
+					<button id='s_grey'>Change Shader to grey</button>
 					<button id='s_texture'>Change Shader to texture</button>
 					<button id='s_sobel'>Change Shader to sobel edge detection</button>
 				</div>
@@ -58,7 +58,7 @@
 					<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>
+					<p>If you're on mobile, you need to set the shader to texture or sobel to change object, then you can change the shader</p>
 				</div>
 			</div>
 		</div>