Robert Cassidy Project 5

frag_globe.html

@@ -10,6 +10,8 @@
 <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>
 
+
+
 <script id="vs" type="x-shader/x-vertex">
     precision highp float;
 
@@ -42,6 +44,126 @@
 <script id="fs" type="x-shader/x-fragment">
     precision highp float;
 
+//////////////////////////////////////////
+//  Start Perlin Code from Ashima Arts
+//
+// GLSL textureless classic 2D noise "cnoise",
+// with an RSL-style periodic variant "pnoise".
+// Author:  Stefan Gustavson ([email protected])
+// Version: 2011-08-22
+//
+// Many thanks to Ian McEwan of Ashima Arts for the
+// ideas for permutation and gradient selection.
+//
+// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
+// Distributed under the MIT license. See LICENSE file.
+// https://github.com/ashima/webgl-noise
+//
+
+vec4 mod289(vec4 x)
+{
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x)
+{
+  return mod289(((x*34.0)+1.0)*x);
+}
+
+vec4 taylorInvSqrt(vec4 r)
+{
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+vec2 fade(vec2 t) {
+  return t*t*t*(t*(t*6.0-15.0)+10.0);
+}
+
+// Classic Perlin noise
+float cnoise(vec2 P)
+{
+  vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
+  vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
+  Pi = mod289(Pi); // To avoid truncation effects in permutation
+  vec4 ix = Pi.xzxz;
+  vec4 iy = Pi.yyww;
+  vec4 fx = Pf.xzxz;
+  vec4 fy = Pf.yyww;
+
+  vec4 i = permute(permute(ix) + iy);
+
+  vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;
+  vec4 gy = abs(gx) - 0.5 ;
+  vec4 tx = floor(gx + 0.5);
+  gx = gx - tx;
+
+  vec2 g00 = vec2(gx.x,gy.x);
+  vec2 g10 = vec2(gx.y,gy.y);
+  vec2 g01 = vec2(gx.z,gy.z);
+  vec2 g11 = vec2(gx.w,gy.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));
+  g00 *= norm.x;  
+  g01 *= norm.y;  
+  g10 *= norm.z;  
+  g11 *= norm.w;  
+
+  float n00 = dot(g00, vec2(fx.x, fy.x));
+  float n10 = dot(g10, vec2(fx.y, fy.y));
+  float n01 = dot(g01, vec2(fx.z, fy.z));
+  float n11 = dot(g11, vec2(fx.w, fy.w));
+
+  vec2 fade_xy = fade(Pf.xy);
+  vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
+  float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
+  return 2.3 * n_xy;
+}
+
+// Classic Perlin noise, periodic variant
+float pnoise(vec2 P, vec2 rep)
+{
+  vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
+  vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
+  Pi = mod(Pi, rep.xyxy); // To create noise with explicit period
+  Pi = mod289(Pi);        // To avoid truncation effects in permutation
+  vec4 ix = Pi.xzxz;
+  vec4 iy = Pi.yyww;
+  vec4 fx = Pf.xzxz;
+  vec4 fy = Pf.yyww;
+
+  vec4 i = permute(permute(ix) + iy);
+
+  vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;
+  vec4 gy = abs(gx) - 0.5 ;
+  vec4 tx = floor(gx + 0.5);
+  gx = gx - tx;
+
+  vec2 g00 = vec2(gx.x,gy.x);
+  vec2 g10 = vec2(gx.y,gy.y);
+  vec2 g01 = vec2(gx.z,gy.z);
+  vec2 g11 = vec2(gx.w,gy.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));
+  g00 *= norm.x;  
+  g01 *= norm.y;  
+  g10 *= norm.z;  
+  g11 *= norm.w;  
+
+  float n00 = dot(g00, vec2(fx.x, fy.x));
+  float n10 = dot(g10, vec2(fx.y, fy.y));
+  float n01 = dot(g01, vec2(fx.z, fy.z));
+  float n11 = dot(g11, vec2(fx.w, fy.w));
+
+  vec2 fade_xy = fade(Pf.xy);
+  vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
+  float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
+  return 2.3 * n_xy;
+}
+
+//////////////////////////////////////////
+//  END Perlin Code from Ashima Arts
+///////////////////////////////////////////////////////////////////////////////
+
     //View-Space directional light
     //A unit vector
     uniform vec3 u_CameraSpaceDirLight;
@@ -60,6 +182,8 @@
     uniform sampler2D u_EarthSpec;
     //Bump map
     uniform sampler2D u_Bump;
+
+    //uniform sampler2D u_perlin;
 
     uniform float u_time;
     uniform mat4 u_InvTrans;
@@ -70,31 +194,86 @@
     varying vec3 v_positionMC;          // position in model coordinates
 
     mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC);
+    vec2 getTexCoord(vec3 lightDir);
 
     void main(void)
     {
-        // surface normal - normalized after rasterization
-        vec3 normal = normalize(v_Normal);
+        //bump mapping
+        float center = texture2D(u_Bump, v_Texcoord).r;
+        float top    = texture2D(u_Bump, v_Texcoord + vec2(0.0/1024.0, 1.0/512.0)).r;
+        float right  = texture2D(u_Bump, v_Texcoord + vec2(1.0/1024.0, 0.0/512.0)).r;
+        vec3 bumpNormal = vec3(center - right, center - top, 0.1);
+        vec3 normal = normalize(eastNorthUpToEyeCoordinates(v_positionMC, v_Normal) * bumpNormal);
+
+        //water mapping
+        center = .015 * cnoise(100.0 *(v_Texcoord + vec2(0.05 * u_time, 0.0)));
+        top    = .015 * cnoise(100.0 *(v_Texcoord + vec2(0.0/1024.0, 1.0/512.0) + vec2(0.05 * u_time, 0.15 * u_time)));
+        right  = .015 * cnoise(100.0 *(v_Texcoord + vec2(1.0/1024.0, 0.0/512.0) + vec2(0.05 * u_time, 0.15 * u_time)));
+        vec3 waterNormal = vec3(center - right, center - top, 0.1);
+        waterNormal = normalize(eastNorthUpToEyeCoordinates(v_positionMC, v_Normal) * waterNormal);
+
+        float specMap = texture2D(u_EarthSpec, v_Texcoord).x;
         // normalized eye-to-position vector in camera coordinates
         vec3 eyeToPosition = normalize(v_Position);
 
-        float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
-
+
+        //specular
         vec3 toReflectedLight = reflect(-u_CameraSpaceDirLight, normal);
         float specular = max(dot(toReflectedLight, -eyeToPosition), 0.0);
         specular = pow(specular, 20.0);
+        specular = specular * specMap;
+        //diffuse
+        float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+        float nightDiffuse = clamp(dot(- u_CameraSpaceDirLight, normal), 0.0, 1.0);
 
-        float gammaCorrect = 1.0/1.2; //gamma correct by 1/1.2
+        if(specMap != 0.0){
+          //Water
+            //specular
+          toReflectedLight = reflect(-u_CameraSpaceDirLight, waterNormal);
+          specular = max(dot(toReflectedLight, -eyeToPosition), 0.0);
+          specular = pow(specular, 20.0);
+          specular = specular * specMap;
+            //diffuse
+          diffuse = clamp(dot(u_CameraSpaceDirLight, waterNormal), 0.0, 1.0);
+          nightDiffuse = clamp(dot(- u_CameraSpaceDirLight, waterNormal), 0.0, 1.0);
+        }
+
+
+
+
+        float gammaCorrect = 1.0/1.0;
 
         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));
+
+        //get cloud
+        vec3 cloudColor = texture2D(u_Cloud,      v_Texcoord + vec2(0.05 * u_time, 0.0)).rgb;
+        float cloudMix  = texture2D(u_CloudTrans, v_Texcoord + vec2(0.05 * u_time, 0.0)).r;
+
 
-        vec3 color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor;
+        vec3 color;
+        if (diffuse == 0.0){
+            //night
+            nightColor = mix( vec3(0.0,0.0,0.0), nightColor, cloudMix);
+            color = nightColor * (nightDiffuse * 3.0);
+        }else{
+            //day
+            dayColor = mix( cloudColor, dayColor, cloudMix);
+            color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor;
+         }
+
+        //rim factor
+        float rim = dot(v_Normal, v_Position) + 1.4;
+        if(rim > 0.0){
+          float rimSquare = rim * rim;
+          color = color + vec3(rimSquare/4.0, rimSquare/2.0, rimSquare/1.0);
+        }
+        //color = waterNormal;
         gl_FragColor = vec4(color, 1.0);
     }
-
+    
     mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC)
     {
         // normalized surface tangent in model coordinates
@@ -103,17 +282,19 @@
         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>
+<script src ="js/lib/stats.min.js" type ="text/javascript"></script>
 </body>
 
 </html>

js/frag_globe.js

@@ -56,6 +56,7 @@
     var u_BumpLocation;
     var u_timeLocation;
 
+
     (function initializeShader() {
         var vs = getShaderSource(document.getElementById("vs"));
         var fs = getShaderSource(document.getElementById("fs"));
@@ -77,6 +78,8 @@
         u_timeLocation = gl.getUniformLocation(program,"u_time");
         u_CameraSpaceDirLightLocation = gl.getUniformLocation(program,"u_CameraSpaceDirLight");
 
+
+
         gl.useProgram(program);
     })();
 
@@ -87,6 +90,7 @@
     var lightTex = gl.createTexture();
     var specTex  = gl.createTexture();
 
+
     function initLoadedTexture(texture){
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
@@ -129,6 +133,8 @@
             gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
         }
 
+
+
         var WIDTH_DIVISIONS = NUM_WIDTH_PTS - 1;
         var HEIGHT_DIVISIONS = NUM_HEIGHT_PTS - 1;
 
@@ -234,10 +240,15 @@
     document.onmousemove = handleMouseMove;
 
 
+
     function animate() {
+
+
+
         ///////////////////////////////////////////////////////////////////////////
         // Update
-
+
+
         var model = mat4.create();
         mat4.identity(model);
         mat4.rotate(model, 23.4/180*Math.PI, [0.0, 0.0, 1.0]);
@@ -265,6 +276,8 @@
         gl.uniformMatrix4fv(u_ViewLocation, false, view);
         gl.uniformMatrix4fv(u_PerspLocation, false, persp);
         gl.uniformMatrix4fv(u_InvTransLocation, false, invTrans);
+
+        gl.uniform1f(u_timeLocation, time);
 
         gl.uniform3fv(u_CameraSpaceDirLightLocation, lightdir);
 
@@ -290,6 +303,7 @@
 
         time += 0.001;
         window.requestAnimFrame(animate);
+
     }
 
     var textureCount = 0;
@@ -299,6 +313,7 @@
         texture.image.onload = function() {
             initLoadedTexture(texture);
 
+
             // Animate once textures load.
             if (++textureCount === 6) {
                 animate();
@@ -313,4 +328,5 @@
     initializeTexture(transTex, "assets/earthtrans1024.png");
     initializeTexture(lightTex, "assets/earthlight1024.png");
     initializeTexture(specTex, "assets/earthspec1024.png");
+
 }());