CIS565-Fall-2014 · CyborgYL · Nov 3, 2014 · Nov 3, 2014 · Nov 3, 2014 · Nov 4, 2014
diff --git a/README.md b/README.md
diff --git a/assets/GalaxyBk.png b/assets/GalaxyBk.png
diff --git a/assets/GalaxyDn.png b/assets/GalaxyDn.png
diff --git a/assets/GalaxyFt.png b/assets/GalaxyFt.png
diff --git a/assets/GalaxyLf.png b/assets/GalaxyLf.png
diff --git a/assets/GalaxyRt.png b/assets/GalaxyRt.png
diff --git a/assets/GalaxyUp.png b/assets/GalaxyUp.png
diff --git a/assets/normalmap.png b/assets/normalmap.png
diff --git a/assets/wavemap18.png b/assets/wavemap18.png
diff --git a/frag_globe.html b/frag_globe.html
@@ -1,4 +1,4 @@
-<html>
+<html>
 
 <head>
 <title>Fragment Globe</title>
@@ -9,6 +9,35 @@
 <body>
 <div id="message" style="position:absolute;top:100px"></div> <!-- Pixel offset to avoid FPS counter -->
 <canvas id="canvas" style="border: none;" width="1024" height="768" tabindex="1"></canvas>
+ </br>
+<p id="FPS"> 0</p>
+
+<script id="skyboxvs" type="x-shader/x-vertex">
+    uniform mat4 u_Model;
+    uniform mat4 u_View;
+    uniform mat4 u_Persp;
+    //uniform mat4 u_InvTrans;
+
+    attribute vec3 Position;
+
+    varying vec3 v_Texcoord;
+    varying vec3 v_Position;
+
+    void main() {
+    gl_Position =  u_Persp * u_View * u_Model * vec4(Position, 1.0);
+    v_Texcoord = Position;
+    }
+</script>
+
+<script id="skyboxfs" type="x-shader/x-fragment">
+    precision highp float;
+    varying vec3 v_Texcoord;
+    uniform samplerCube u_Skybox;
+
+    void main (void) {
+    gl_FragColor = textureCube(u_Skybox, v_Texcoord);
+    }
+</script>
 
 <script id="vs" type="x-shader/x-vertex">
     precision highp float;
@@ -36,6 +65,7 @@
         v_Position = camera.xyz;
         v_positionMC = Position;
         gl_Position = u_Persp * camera;
+
     }
 </script>
 
@@ -61,6 +91,10 @@
     //Bump map
     uniform sampler2D u_Bump;
 
+    //water wave
+    uniform sampler2D u_waterSpec;
+    uniform sampler2D u_waterBump;
+
     uniform float u_time;
     uniform mat4 u_InvTrans;
 
@@ -73,26 +107,82 @@
 
     void main(void)
     {
+
         // surface normal - normalized after rasterization
         vec3 normal = normalize(v_Normal);
         // normalized eye-to-position vector in camera coordinates
         vec3 eyeToPosition = normalize(v_Position);
-
-        float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+         //bump map
+
+
+        vec3 bumpCenter = (texture2D(u_Bump, v_Texcoord).rgb);
+        vec3 bumpRight = (texture2D(u_Bump, vec2(v_Texcoord.s + 1.0/1024.0, v_Texcoord.t)).rgb);
+        vec3 bumpTop = (texture2D(u_Bump, vec2(v_Texcoord.s, v_Texcoord.t + 1.0/512.0)).rgb);
+
+        float center = length(bumpCenter);
+        float right = length(bumpRight);
+        float top = length(bumpTop);
+        vec3 bumpNormal = normalize(vec3(center - right, center - top, 0.2)).xyz;
+        bumpNormal = normalize(eastNorthUpToEyeCoordinates(v_positionMC, normal) * bumpNormal);
+        float specCoef = length(texture2D(u_EarthSpec, v_Texcoord).rgb);
 
-        vec3 toReflectedLight = reflect(-u_CameraSpaceDirLight, normal);
+        //water bump
+        vec2 wTexCoord0 = vec2(v_Texcoord.s + u_time * 0.01, v_Texcoord.t) * 20.0;
+        vec2 wTexCoord1 = vec2(v_Texcoord.s - u_time * 0.01, v_Texcoord.t) * 20.0;
+        vec3 waterNormal = normalize((2.0 * texture2D(u_waterBump, wTexCoord0).rgb - vec3(1.0) + 2.0 * texture2D(u_waterBump, wTexCoord1).rgb - vec3(1.0)) * 0.5  + normal * 0.5);
+        vec3 waterNormalEC = normalize(eastNorthUpToEyeCoordinates(v_positionMC, normal) * waterNormal);
+
+        float waterBlendCoef = length(texture2D(u_waterSpec, vec2(v_Texcoord.s + u_time * 0.01, v_Texcoord.t) * 20.0).rgb) * specCoef;
+
+        bumpNormal = normalize(mix(bumpNormal, waterNormalEC, specCoef));
+
+        float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+        float bumpDiffuse = clamp(dot(u_CameraSpaceDirLight, bumpNormal), 0.0, 1.0);
+        // specular highlight
+        vec3 toReflectedLight = reflect(-u_CameraSpaceDirLight, bumpNormal);
         float specular = max(dot(toReflectedLight, -eyeToPosition), 0.0);
         specular = pow(specular, 20.0);
+
+        specular *= specCoef;
 
-        float gammaCorrect = 1.0/1.2; //gamma correct by 1/1.2
+        float gammaCorrect = 1.0/1.0; //gamma correct by 1/1.2
 
         vec3 dayColor = texture2D(u_DayDiffuse, v_Texcoord).rgb;
         vec3 nightColor = texture2D(u_Night, v_Texcoord).rgb;
         //apply gamma correction to nighttime texture
         nightColor = pow(nightColor,vec3(gammaCorrect));
-
-        vec3 color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor;
+        float blendCoef = clamp(dot(u_CameraSpaceDirLight, normal),0.0, 1.0);
+        dayColor = ((0.6 * bumpDiffuse) + (0.4 * specular)) * dayColor;
+
+    //dawn and dusk
+        float vdl = abs(dot(u_CameraSpaceDirLight, normal));
+        float dawn = clamp( 0.1 + vdl, 0.0, 1.0);
+
+        //draw clouds
+        float cloudTrans = clamp(length(texture2D(u_CloudTrans, vec2(v_Texcoord.s - u_time * 0.1, v_Texcoord.t)).rgb), 0.0,1.0);
+        vec3 cloudColor = texture2D(u_Cloud, vec2(v_Texcoord.s - u_time * 0.1, v_Texcoord.t)).rgb;
+        cloudColor = mix(vec3(255.0 / 256.0, 75.0/ 256.0, 10.0 / 256.0), cloudColor, clamp(dawn * 2.0 - 0.4, 0.0, 1.0));
+        dayColor = mix(vec3(255.0 / 256.0, 75.0/ 256.0, 10.0 / 256.0), dayColor, clamp(dawn * 1.0 + 0.5, 0.0, 1.0));
+        dayColor = mix(cloudColor, dayColor, cloudTrans);
+        nightColor = mix(vec3(0.0), nightColor, cloudTrans);
+        //rim color
+        float vdn = abs(dot(normal, -eyeToPosition));
+        float rim = 1.0 - vdn;
+        rim = smoothstep(0.4, 1.0, rim);
+        vec3 rimColor = vec3(rim/5.0, rim/2.5, rim /1.5);
+        dayColor = mix(dayColor, rimColor, rim);
+        nightColor = mix(nightColor, rimColor * 0.2, rim);
+        //blend dayColor and nightColor
+        vec3 color = mix(nightColor, dayColor, blendCoef);
+
+        //debug
+        //color = (waterNormalEC + vec3(1.0)) * 0.5;
+     //color = (bumpNormal + vec3(1.0)) /2.0;
+         //color = texture2D(u_waterSpec, v_Texcoord*10.0).rgb * specCoef;
+        //rim mixing
+        //color = mix(color, rimColor, rim);
         gl_FragColor = vec4(color, 1.0);
+
     }
 
     mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC)

diff --git a/index.html b/index.html
@@ -0,0 +1,209 @@
+<html>
+
+<head>
+<title>Fragment Globe</title>
+<meta charset ="utf-8">
+<meta http-equiv="X-UA-Compatible" content="chrome=1">  <!-- Use Chrome Frame in IE --> 
+</head>
+
+<body>
+<div id="message" style="position:absolute;top:100px"></div> <!-- Pixel offset to avoid FPS counter -->
+<canvas id="canvas" style="border: none;" width="1024" height="768" tabindex="1"></canvas>
+ </br>
+<p id="FPS"> 0</p>
+
+<script id="skyboxvs" type="x-shader/x-vertex">
+    uniform mat4 u_Model;
+    uniform mat4 u_View;
+    uniform mat4 u_Persp;
+    //uniform mat4 u_InvTrans;
+
+    attribute vec3 Position;
+
+    varying vec3 v_Texcoord;
+    varying vec3 v_Position;
+
+    void main() {
+    gl_Position =  u_Persp * u_View * u_Model * vec4(Position, 1.0);
+    v_Texcoord = Position;
+    }
+</script>
+
+<script id="skyboxfs" type="x-shader/x-fragment">
+    precision highp float;
+    varying vec3 v_Texcoord;
+    uniform samplerCube u_Skybox;
+
+    void main (void) {
+    gl_FragColor = textureCube(u_Skybox, v_Texcoord);
+    }
+</script>
+
+<script id="vs" type="x-shader/x-vertex">
+    precision highp float;
+
+    uniform mat4 u_Model;
+    uniform mat4 u_View;
+    uniform mat4 u_Persp;
+    uniform mat4 u_InvTrans;
+
+    attribute vec3 Position;
+    attribute vec3 Normal;
+    attribute vec2 Texcoord;
+
+    varying vec3 v_Normal;
+    varying vec2 v_Texcoord;
+    varying vec3 v_Position;
+    varying vec3 v_positionMC;
+
+    void main(void)
+    {
+        v_Normal = (u_InvTrans*vec4(Normal,0.0)).xyz;
+        v_Texcoord = Texcoord;
+        vec4 world = u_Model * vec4(Position, 1.0);
+        vec4 camera = u_View * world;
+        v_Position = camera.xyz;
+        v_positionMC = Position;
+        gl_Position = u_Persp * camera;
+
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision highp float;
+
+    //View-Space directional light
+    //A unit vector
+    uniform vec3 u_CameraSpaceDirLight;
+
+    //Diffuse texture map for the day
+    uniform sampler2D u_DayDiffuse;
+    //Ambient texture map for the night side
+    uniform sampler2D u_Night;
+    //Color map for the clouds
+    uniform sampler2D u_Cloud;
+    //Transparency map for the clouds.  Note that light areas are where clouds are NOT
+    //Dark areas are where clouds are present
+    uniform sampler2D u_CloudTrans;
+    //Mask of which areas of the earth have specularity
+    //Oceans are specular, landmasses are not
+    uniform sampler2D u_EarthSpec;
+    //Bump map
+    uniform sampler2D u_Bump;
+
+    //water wave
+    uniform sampler2D u_waterSpec;
+    uniform sampler2D u_waterBump;
+
+    uniform float u_time;
+    uniform mat4 u_InvTrans;
+
+    varying vec3 v_Normal;              // surface normal in camera coordinates
+    varying vec2 v_Texcoord;
+    varying vec3 v_Position;            // position in camera coordinates
+    varying vec3 v_positionMC;          // position in model coordinates
+
+    mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC);
+
+    void main(void)
+    {
+
+        // surface normal - normalized after rasterization
+        vec3 normal = normalize(v_Normal);
+        // normalized eye-to-position vector in camera coordinates
+        vec3 eyeToPosition = normalize(v_Position);
+         //bump map
+
+
+        vec3 bumpCenter = (texture2D(u_Bump, v_Texcoord).rgb);
+        vec3 bumpRight = (texture2D(u_Bump, vec2(v_Texcoord.s + 1.0/1024.0, v_Texcoord.t)).rgb);
+        vec3 bumpTop = (texture2D(u_Bump, vec2(v_Texcoord.s, v_Texcoord.t + 1.0/512.0)).rgb);
+
+        float center = length(bumpCenter);
+        float right = length(bumpRight);
+        float top = length(bumpTop);
+        vec3 bumpNormal = normalize(vec3(center - right, center - top, 0.2)).xyz;
+        bumpNormal = normalize(eastNorthUpToEyeCoordinates(v_positionMC, normal) * bumpNormal);
+        float specCoef = length(texture2D(u_EarthSpec, v_Texcoord).rgb);
+
+        //water bump
+        vec2 wTexCoord0 = vec2(v_Texcoord.s + u_time * 0.01, v_Texcoord.t) * 20.0;
+        vec2 wTexCoord1 = vec2(v_Texcoord.s - u_time * 0.01, v_Texcoord.t) * 20.0;
+        vec3 waterNormal = normalize((2.0 * texture2D(u_waterBump, wTexCoord0).rgb - vec3(1.0) + 2.0 * texture2D(u_waterBump, wTexCoord1).rgb - vec3(1.0)) * 0.5  + normal * 0.5);
+        vec3 waterNormalEC = normalize(eastNorthUpToEyeCoordinates(v_positionMC, normal) * waterNormal);
+
+        float waterBlendCoef = length(texture2D(u_waterSpec, vec2(v_Texcoord.s + u_time * 0.01, v_Texcoord.t) * 20.0).rgb) * specCoef;
+
+        bumpNormal = normalize(mix(bumpNormal, waterNormalEC, specCoef));
+
+        float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+        float bumpDiffuse = clamp(dot(u_CameraSpaceDirLight, bumpNormal), 0.0, 1.0);
+        // specular highlight
+        vec3 toReflectedLight = reflect(-u_CameraSpaceDirLight, bumpNormal);
+        float specular = max(dot(toReflectedLight, -eyeToPosition), 0.0);
+        specular = pow(specular, 20.0);
+
+        specular *= specCoef;
+
+        float gammaCorrect = 1.0/1.0; //gamma correct by 1/1.2
+
+        vec3 dayColor = texture2D(u_DayDiffuse, v_Texcoord).rgb;
+        vec3 nightColor = texture2D(u_Night, v_Texcoord).rgb;
+        //apply gamma correction to nighttime texture
+        nightColor = pow(nightColor,vec3(gammaCorrect));
+        float blendCoef = clamp(dot(u_CameraSpaceDirLight, normal),0.0, 1.0);
+        dayColor = ((0.6 * bumpDiffuse) + (0.4 * specular)) * dayColor;
+
+    //dawn and dusk
+        float vdl = abs(dot(u_CameraSpaceDirLight, normal));
+        float dawn = clamp( 0.1 + vdl, 0.0, 1.0);
+
+        //draw clouds
+        float cloudTrans = clamp(length(texture2D(u_CloudTrans, vec2(v_Texcoord.s - u_time * 0.1, v_Texcoord.t)).rgb), 0.0,1.0);
+        vec3 cloudColor = texture2D(u_Cloud, vec2(v_Texcoord.s - u_time * 0.1, v_Texcoord.t)).rgb;
+        cloudColor = mix(vec3(255.0 / 256.0, 75.0/ 256.0, 10.0 / 256.0), cloudColor, clamp(dawn * 2.0 - 0.4, 0.0, 1.0));
+        dayColor = mix(vec3(255.0 / 256.0, 75.0/ 256.0, 10.0 / 256.0), dayColor, clamp(dawn * 1.0 + 0.5, 0.0, 1.0));
+        dayColor = mix(cloudColor, dayColor, cloudTrans);
+        nightColor = mix(vec3(0.0), nightColor, cloudTrans);
+        //rim color
+        float vdn = abs(dot(normal, -eyeToPosition));
+        float rim = 1.0 - vdn;
+        rim = smoothstep(0.4, 1.0, rim);
+        vec3 rimColor = vec3(rim/5.0, rim/2.5, rim /1.5);
+        dayColor = mix(dayColor, rimColor, rim);
+        nightColor = mix(nightColor, rimColor * 0.2, rim);
+        //blend dayColor and nightColor
+        vec3 color = mix(nightColor, dayColor, blendCoef);
+
+        //debug
+        //color = (waterNormalEC + vec3(1.0)) * 0.5;
+     //color = (bumpNormal + vec3(1.0)) /2.0;
+         //color = texture2D(u_waterSpec, v_Texcoord*10.0).rgb * specCoef;
+        //rim mixing
+        //color = mix(color, rimColor, rim);
+        gl_FragColor = vec4(color, 1.0);
+
+    }
+
+    mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC)
+    {
+        // normalized surface tangent in model coordinates
+        vec3 tangentMC = normalize(vec3(-positionMC.z, positionMC.x, 0.0)); 
+        // normalized surface tangent in eye coordiantes 
+        vec3 tangentEC = normalize(mat3(u_InvTrans) * tangentMC);
+        // normalized surface bitangent in eye coordinates
+        vec3 bitangentEC = normalize(cross(normalEC, tangentEC));
+
+        return mat3(
+            tangentEC.x,   tangentEC.y,   tangentEC.z,
+            bitangentEC.x, bitangentEC.y, bitangentEC.z,
+            normalEC.x,    normalEC.y,    normalEC.z);
+    }
+</script>
+
+<script src ="js/lib/gl-matrix.js" type ="text/javascript"></script>
+<script src ="js/webGLUtility.js" type ="text/javascript"></script>
+<script src ="js/frag_globe.js" type ="text/javascript"></script>
+</body>
+
+</html>