Project #5 Submission

frag_globe.html

@@ -61,6 +61,9 @@
     //Bump map
     uniform sampler2D u_Bump;
 
+    //height map
+    uniform sampler2D u_Height;
+
     uniform float u_time;
     uniform mat4 u_InvTrans;
 
@@ -77,8 +80,42 @@
         vec3 normal = normalize(v_Normal);
         // normalized eye-to-position vector in camera coordinates
         vec3 eyeToPosition = normalize(v_Position);
+
+        //rim Lighting
+        float NdotP = dot(normal, v_Position) + 1.2;
+        vec3 rimColor = vec3(0,0,0);
+        if (NdotP > 0.01)  
+            rimColor = vec3(NdotP/4.0, NdotP/2.0, NdotP/2.0);
+
+        // bump mapping
+        float center = texture2D(u_Bump,v_Texcoord).x;  
+        float right = texture2D(u_Bump,v_Texcoord + vec2(1.0/1024.0,0)).x;
+        float top = texture2D(u_Bump,v_Texcoord + vec2(0,1.0/512.0)).x;
+        vec3 bNormal = normalize(vec3(center-right, center-top, 0.2));
+        vec3 pToEye = eastNorthUpToEyeCoordinates(v_positionMC, normal) * bNormal;
+        normal = normalize(pToEye);
+
+        //height mapping
+        float hcenter = texture2D(u_Height,v_Texcoord).x;  
+        float hright = texture2D(u_Height,v_Texcoord + vec2(1.0/1024.0,0)).x;
+        float htop = texture2D(u_Height,v_Texcoord + vec2(0,1.0/512.0)).x;
+        vec3 hNormal = normalize(vec3(center-right, center-top, 0.2));
+        vec3 hpToEye = eastNorthUpToEyeCoordinates(v_positionMC, normal) * hNormal;
+        hNormal = normalize(hpToEye);
+        float height = texture2D(u_Height, v_Texcoord).r;
+
+
+        float hdiffuse = dot(u_CameraSpaceDirLight, hNormal);
+
+        vec3 heightColor;
+        if(height < 0.5)
+            heightColor = 0.5 * hdiffuse + mix(vec3(0, 0, 1), vec3(0, 1, 0), height);
+        else
+            heightColor = 0.5 * hdiffuse + mix(vec3(0, 1, 0), vec3(1, 0, 0), height);
+
 
         float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+        float diffuse_noclamp = dot(u_CameraSpaceDirLight, normal); // use it to detect if it is night or daytime
 
         vec3 toReflectedLight = reflect(-u_CameraSpaceDirLight, normal);
         float specular = max(dot(toReflectedLight, -eyeToPosition), 0.0);
@@ -87,12 +124,36 @@
         float gammaCorrect = 1.0/1.2; //gamma correct by 1/1.2
 
         vec3 dayColor = texture2D(u_DayDiffuse, v_Texcoord).rgb;
-        vec3 nightColor = texture2D(u_Night, v_Texcoord).rgb;
+        vec3 nightColor = texture2D(u_Night, v_Texcoord).rgb;        
+        vec3 specColor = texture2D(u_EarthSpec, v_Texcoord).rgb; // black:land, white:sea
+
+        // cloud animation
+        vec2 v_moveCoord = v_Texcoord - vec2(u_time, 0.0);
+
+        vec3 cloudColor = texture2D(u_Cloud, v_moveCoord).rgb; 
+        vec3 cloudTransColor = texture2D(u_CloudTrans, v_moveCoord).rgb;
+
+        if(specColor.x > 0.0) //white, is sea
+        {
+            specColor = specColor * specular;
+        }else // is land
+        {
+            specColor = vec3(0,0,0);
+        }
         //apply gamma correction to nighttime texture
         nightColor = pow(nightColor,vec3(gammaCorrect));
+        nightColor = mix(nightColor, (vec3(1,1,1) - cloudTransColor), 0.4);
+
+        vec3 color = vec3(0,0,0);
+        vec3 colortmp = ((0.6 * diffuse) + (0.4 * specColor)) * dayColor;
+        colortmp = mix(colortmp, cloudColor * cloudTransColor, 0.3);
+        color = mix(nightColor, colortmp, (1.0 + diffuse_noclamp)/2.0);
 
-        vec3 color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor;
+        float fac = 0.3;
+        if (height<0.5) fac = 0.15;
+        color += rimColor + heightColor * fac;
         gl_FragColor = vec4(color, 1.0);
+       // gl_FragColor = vec4(heightColor, 1.0);
     }
 
     mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC)

js/frag_globe.js

@@ -56,6 +56,8 @@
     var u_BumpLocation;
     var u_timeLocation;
 
+    var u_HeightLocation;
+
     (function initializeShader() {
         var vs = getShaderSource(document.getElementById("vs"));
         var fs = getShaderSource(document.getElementById("fs"));
@@ -77,6 +79,8 @@
         u_timeLocation = gl.getUniformLocation(program,"u_time");
         u_CameraSpaceDirLightLocation = gl.getUniformLocation(program,"u_CameraSpaceDirLight");
 
+        u_HeightLocation = gl.getUniformLocation(program, "u_Height");
+
         gl.useProgram(program);
     })();
 
@@ -86,6 +90,7 @@
     var transTex = gl.createTexture();
     var lightTex = gl.createTexture();
     var specTex  = gl.createTexture();
+    var heightTex = gl.createTexture();
 
     function initLoadedTexture(texture){
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -288,7 +293,14 @@
         gl.uniform1i(u_EarthSpecLocation, 5);
         gl.drawElements(gl.TRIANGLES, numberOfIndices, gl.UNSIGNED_SHORT,0);
 
+        gl.activeTexture(gl.TEXTURE6);
+        gl.bindTexture(gl.TEXTURE_2D, heightTex);
+        gl.uniform1i(u_HeightLocation, 6);
+
         time += 0.001;
+
+        gl.uniform1f(u_timeLocation, time);
+
         window.requestAnimFrame(animate);
     }
 
@@ -300,7 +312,7 @@
             initLoadedTexture(texture);
 
             // Animate once textures load.
-            if (++textureCount === 6) {
+            if (++textureCount === 7) {
                 animate();
             }
         }
@@ -313,4 +325,6 @@
     initializeTexture(transTex, "assets/earthtrans1024.png");
     initializeTexture(lightTex, "assets/earthlight1024.png");
     initializeTexture(specTex, "assets/earthspec1024.png");
+
+    initializeTexture(heightTex, "assets/earthheight1024.png")
 }());

vert_wave.html

@@ -17,26 +17,46 @@
     attribute vec2 position;
 
     uniform mat4 u_modelViewPerspective;
+
+      ////ra
+    uniform float u_time;
+    varying vec4 myColor;
+
+    uniform vec4 u_color_high;
+    uniform vec4 u_color_low;
+
 
     void main(void)
     {
       // NOTE : according to the WebGL standard, 0.0f is not accepted
-		  float height = 0.0;
+		//  float height = 0.0;
 
+      float s_contrib = sin(position.x*2.0*3.14159 + u_time);
+      float t_contrib = cos(position.y*2.0*3.14159 + u_time);
+      float height = s_contrib * t_contrib;
+      myColor = mix(u_color_low, u_color_high, height);
+
       // NOTE : gl_Position is always a vec4
 		  gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+
+
     }
 </script>
 
 <script id="fs" type="x-shader/x-fragment">
     precision mediump float;
 
-    uniform vec4 u_color;
+    uniform vec4 u_color;   
+
+    varying vec4 myColor;
 
     void main(void)
     {
       // NOTE : gl_FragColor is always a vec4
-		  gl_FragColor = u_color;
+		  //gl_FragColor = u_color;
+
+
+      gl_FragColor = myColor;
     }    
 </script>
 
@@ -46,6 +66,21 @@
   var heightLocation = 1;
   var u_modelViewPerspectiveLocation;
   var u_color;
+  var u_color_low = [0.8,0.0,0.4,1.0];
+  var u_color_high = [0.2,0.6,1.0,1.0];
+  var u_time;
+
+  var timeLocation;
+  var colorLowLocation;
+  var colorHighLocation;
+
+  var Colors = {
+    minColor : [255, 0, 0],
+    maxColor : [0, 255, 0]
+    };
+
+  var time = 0;
+  var deltaT = 0.05;
 
   var heights;
   var numberOfIndices;
@@ -70,6 +105,9 @@
     // Add GUI component 
     var gui = new dat.GUI();
 
+    gui.addColor(Colors, 'minColor');
+    gui.addColor(Colors, 'maxColor');
+
     init();
 
     animate();
@@ -99,6 +137,8 @@
 
 
   function animate(){
+    time += deltaT;
+
     // Update
     var model = mat4.create();
     mat4.identity(model);
@@ -112,6 +152,12 @@
     context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
 
     context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp); 
+
+    context.uniform1f(timeLocation,time);
+    context.uniform4f(colorLowLocation, Colors.minColor[0]/255.0, Colors.minColor[1]/255.0, Colors.minColor[2]/255.0, 1.0);
+    context.uniform4f(colorHighLocation, Colors.maxColor[0]/255.0, Colors.maxColor[1]/255.0, Colors.maxColor[2]/255.0, 1.0);
+
+
     context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
 
     window.requestAnimFrame(animate);
@@ -127,6 +173,10 @@
 		u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
     u_colorLocation = context.getUniformLocation(program, "u_color");
 
+    timeLocation = context.getUniformLocation(program,"u_time");
+    colorLowLocation = context.getUniformLocation(program, "u_color_low");
+    colorHighLocation = context.getUniformLocation(program, "u_color_high");
+
     context.useProgram(program);
   }