skycraft: specular lighting

skycraft/index.js

@@ -21,7 +21,21 @@ uniform vec3 uGlowColor;
 
 varying highp vec2 vTextureCoord;
 varying lowp vec3 vLighting;
-varying lowp float vDistance;
+varying lowp vec3 vRay;
+varying lowp vec3 vLightDir;
+varying lowp vec3 vNormal;
+
+highp mat3 transpose(in highp mat3 inmat) {
+    highp vec3 x = inmat[0];
+    highp vec3 y = inmat[1];
+    highp vec3 z = inmat[2];
+
+    return mat3(
+        vec3(x.x, y.x, z.x),
+        vec3(x.y, y.y, z.y),
+        vec3(x.z, y.z, z.z)
+    );
+}
 
 void main() {
     highp mat4 modelview = uView * uModel;
@@ -35,25 +49,31 @@ void main() {
 
     vTextureCoord = aTextureCoord;
 
-    vDistance = length(modelview * vec4(aPosition, 1.0));
+    lowp vec3 camPos = -transpose(mat3(uView))*(uView * vec4(0.0, 0.0, 0.0, 1.0)).xyz;
+    vRay = -normalize((uModel * vec4(aPosition, 1.0)).xyz - camPos);
+    vLightDir = -uLightDirection;
+    vNormal = normal;
 }
 `;
 
 const FSHADER = `
 uniform sampler2D uSampler;
-uniform lowp vec3 uFogColor;
 
 varying highp vec2 vTextureCoord;
 varying lowp vec3 vLighting;
-varying lowp float vDistance;
+varying lowp vec3 vRay;
+varying lowp vec3 vLightDir;
+varying lowp vec3 vNormal;
 
 void main() {
     highp vec4 color = texture2D(uSampler, vTextureCoord);
     if (color.a < 0.1) {
         discard;
     }
-    lowp float fogamount = 0.0; //smoothstep(80.0, 100.0, vDistance);
+    lowp vec3 specularDir = 2.0 * dot(vLightDir, vNormal) * vNormal - vLightDir;
-    gl_FragColor = mix(vec4(vLighting * color.rgb, color.a), vec4(uFogColor, 1.0), fogamount);
+    lowp float specularAmount = smoothstep(0.92, 1.0, dot(vRay, specularDir));
+    lowp vec3 specular = 0.8 * specularAmount * vec3(1.0, 1.0, 0.8);
+    gl_FragColor = vec4(vLighting * color.rgb + specular, color.a);
 }
 `;
 
@@ -68,7 +88,6 @@ async function initWorldGl(gl) {
     const modelLoc = gl.getUniformLocation(program, 'uModel');
     const projLoc = gl.getUniformLocation(program, 'uProjection');
     const samplerLoc = gl.getUniformLocation(program, 'uSampler');
-    const fogColorLoc = gl.getUniformLocation(program, 'uFogColor');
     const lightDirectionLoc = gl.getUniformLocation(program, 'uLightDirection');
     const ambiantLoc = gl.getUniformLocation(program, 'uAmbiantLight');
     const glowColorLoc = gl.getUniformLocation(program, 'uGlowColor');
@@ -81,7 +100,6 @@ async function initWorldGl(gl) {
         const {
             projectionMatrix,
             viewMatrix,
-            fogColor,
             ambiantLightAmount,
         } = sceneParams;
 
@@ -89,7 +107,6 @@ async function initWorldGl(gl) {
 
         gl.uniformMatrix4fv(projLoc, false, new Float32Array(projectionMatrix));
         gl.uniformMatrix4fv(viewLoc, false, new Float32Array(viewMatrix));
-        gl.uniform3fv(fogColorLoc, fogColor);
         gl.uniform1f(ambiantLoc, ambiantLightAmount);
 
         // doing this here because it's the same for all world stuff
@@ -1157,7 +1174,6 @@ function draw(context) {
             glContext.setupScene({
                 projectionMatrix: context.projMatrix,
                 viewMatrix,
-                fogColor: context.skyColor,
                 ambiantLightAmount: context.ambiantLight,
             });
         }
@@ -1257,8 +1273,8 @@ async function main() {
         gl,
         projMatrix: se3.perspective(Math.PI / 3, canvas.clientWidth / canvas.clientHeight, 0.1, 10000.0),
         player: {
-            tf: se3.translation(0.0, 0.0, 2.0),
+            tf: se3.translation(0.0, 0.0, 80.0),
-            position: [0.0, 0.0, 2.0],
+            position: [0.0, 0.0, 80.0],
             velocity: [0, 0, 0],
         },
         camera: {