diff --git a/public/css/style.css b/public/css/style.css index 469475b..ab50303 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -10,7 +10,6 @@ body { margin: 0; height: 100%; width: 100%; - overflow: hidden; } #glCanvas { diff --git a/src/client/main.ts b/src/client/main.ts index 440f661..5438559 100644 --- a/src/client/main.ts +++ b/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); }); diff --git a/views/index.ejs b/views/index.ejs index 8f19c91..4b0fcb4 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -17,7 +17,7 @@
- +
@@ -58,7 +58,7 @@
-

If you're on mobile, you need to set the shader to texture to change object, then you can change the shader

+

If you're on mobile, you need to set the shader to texture or sobel to change object, then you can change the shader