Finished

part2/frag_globe.html → globe/frag_globe.html

@@ -45,7 +45,9 @@
     //View-Space directional light
     //A unit vector
     uniform vec3 u_CameraSpaceDirLight;
-
+	uniform vec3 u_ModelSpaceDirLight;//Model space version for ray cast convenience 
+
+
     //Diffuse texture map for the day
     uniform sampler2D u_DayDiffuse;
     //Ambient texture map for the night side
@@ -70,28 +72,75 @@
     varying vec3 v_positionMC;          // position in model coordinates
 
     mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC);
-
+	vec3 raySphereIntersect(vec3 ro, vec3 rd, float r);
+	vec2 dirInSphereToTexcoords(vec3 dir);
     void main(void)
     {
         // surface normal - normalized after rasterization
         vec3 normal = normalize(v_Normal);
+
+        float flatdiffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+
+		//Bump Mapping
+		float bumpCenter = texture2D(u_Bump, v_Texcoord).x;
+		float bumpRight = texture2D(u_Bump, v_Texcoord+vec2(1.0/1024.0, 0.0)).x;
+		float bumpTop = texture2D(u_Bump, v_Texcoord+vec2(0.0, 1.0/512.0)).x;
+
+		vec3 bump = normalize(vec3(bumpCenter - bumpRight, bumpCenter - bumpTop, 0.2));
+
+		normal = eastNorthUpToEyeCoordinates(v_positionMC, v_Normal)*bump;
+
+
+
         // normalized eye-to-position vector in camera coordinates
         vec3 eyeToPosition = normalize(v_Position);
 
-        float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+        float bumpdiffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
 
+		//determine twilight shading mix alpha
+		float dayalpha = pow(1.0-flatdiffuse,5.0);
+
+
         vec3 toReflectedLight = reflect(-u_CameraSpaceDirLight, normal);
         float specular = max(dot(toReflectedLight, -eyeToPosition), 0.0);
-        specular = pow(specular, 20.0);
-
-        float gammaCorrect = 1.0/1.2; //gamma correct by 1/1.2
-
-        vec3 dayColor = texture2D(u_DayDiffuse, v_Texcoord).rgb;
+        specular = pow(specular, 20.0)*texture2D(u_EarthSpec, v_Texcoord).x;//Choice is arbitrary, map is white/black
+
+        float gammaCorrect = 1.6/1.2; //gamma correct by 1.6/1.2
+
+
+		//======Calculate cloud shadows======
+		float cloudAltitude = 0.075;//Term is relative to globe radius == 1.0
+		vec3 rayOrigin = v_positionMC*(1.0+bumpCenter*cloudAltitude);//Mountains could be as tall as clouds but no taller
+		vec3 rayDir = normalize(u_ModelSpaceDirLight);
+
+
+		vec3 shadowRayIntersectDir = raySphereIntersect(rayOrigin, rayDir, 1.0+cloudAltitude);
+
+		vec2 v_CloudShadowTexcoord = dirInSphereToTexcoords(shadowRayIntersectDir) + vec2(u_time, 0.0);
+		float cloudShadowRayTrans = 1.0;//texture2D(u_CloudTrans, v_CloudShadowTexcoord).x;
+
+        vec3 dayColor = cloudShadowRayTrans*((0.6 * bumpdiffuse) + (0.4 * specular))*texture2D(u_DayDiffuse, v_Texcoord).rgb;
         vec3 nightColor = texture2D(u_Night, v_Texcoord).rgb;
-        //apply gamma correction to nighttime texture
+
+		//apply gamma correction to nighttime texture (before mixing clouds)
         nightColor = pow(nightColor,vec3(gammaCorrect));
-
-        vec3 color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor;
+
+		//Mix in cloud data
+		vec2 cloudTexCoords = v_Texcoord + vec2(u_time, 0.0);
+		float cloudTrans = texture2D(u_CloudTrans, cloudTexCoords).x;
+		vec3 cloudColor = texture2D(u_Cloud, cloudTexCoords).rgb;
+
+		dayColor = mix(flatdiffuse*cloudColor, dayColor, cloudTrans);
+		nightColor = mix(vec3(0.0,0.0,0.0), nightColor, cloudTrans);
+
+		float rimFactor = pow(clamp(1.0 + dot(v_Normal, v_Position), 0.0, 1.0),1.5);
+		if(v_Normal.z < 0.0)
+			rimFactor = 0.0;//Minimize visibility of rasterization artifacts.
+
+		vec3 rimColor = rimFactor*vec3(0.25, 0.5, 0.5);
+
+		//Only show rim in daylight
+        vec3 color = rimColor*(1.0-dayalpha) + mix(dayColor, nightColor, dayalpha);
         gl_FragColor = vec4(color, 1.0);
     }
 
@@ -109,6 +158,47 @@
             bitangentEC.x, bitangentEC.y, bitangentEC.z,
             normalEC.x,    normalEC.y,    normalEC.z);
     }
+
+
+	vec3 raySphereIntersect(vec3 ro, vec3 rd, float r)
+	{
+		//Solver parameters
+		float b = dot(rd, ro);
+
+		float radicand  = b * b - (dot(ro,ro) - r*r);
+
+		if(radicand < 0.0){
+			return normalize(ro);//If no intersection (should never happen) Assume no deviation from vert
+		}
+
+		float root = sqrt(radicand);
+		float s1 = (-b + root);
+		float s2 = (-b - root);
+
+
+		float s = 0.0;
+		if (s1 < 0.0 && s2 < 0.0) {
+			return normalize(ro);//If no intersection (should never happen) Assume no deviation from vert
+		} else if (s1 > 0.0 && s2 > 0.0) {
+			s = min(s1, s2);
+		} else {
+			s = max(s1, s2);
+		}
+
+		return normalize(ro+s*rd);
+
+	}
+
+	vec2 dirInSphereToTexcoords(vec3 dir)
+	{
+		float th = atan(dir.z, dir.x);
+		float phi = acos(dir.y);
+		float u = (th) / (2.0 * 3.14159265);
+		float v = phi/3.14159265;
+
+		return vec2(u,v);
+	}
+
 </script>
 
 <script src ="gl-matrix.js" type ="text/javascript"></script>

part2/frag_globe.js → globe/frag_globe.js

@@ -31,7 +31,7 @@
     mat4.perspective(45.0, canvas.width/canvas.height, 0.1, 100.0, persp);
 
     var radius = 5.0;
-    var azimuth = Math.PI;
+    var azimuth = 0.0;
     var elevation = 0.0001;
 
     var eye = sphericalToCartesian(radius, azimuth, elevation);
@@ -48,6 +48,7 @@
     var u_ViewLocation;
     var u_PerspLocation;
     var u_CameraSpaceDirLightLocation;
+	var u_ModelSpaceDirLightLocation;
     var u_DayDiffuseLocation;
     var u_NightLocation;
     var u_CloudLocation;
@@ -76,6 +77,7 @@
         u_BumpLocation = gl.getUniformLocation(program,"u_Bump");
         u_timeLocation = gl.getUniformLocation(program,"u_time");
         u_CameraSpaceDirLightLocation = gl.getUniformLocation(program,"u_CameraSpaceDirLight");
+		u_ModelSpaceDirLightLocation = gl.getUniformLocation(program, "u_ModelSpaceDirLight");
 
         gl.useProgram(program);
     })();
@@ -250,13 +252,18 @@
         mat4.inverse(mv, invTrans);
         mat4.transpose(invTrans);
 
-        var lightdir = vec3.create([1.0, 0.0, 1.0]);
+        var lightdir = vec3.create([1.0, 0.0, 1.0]);//Direction of the light in world space
         var lightdest = vec4.create();
         vec3.normalize(lightdir);
         mat4.multiplyVec4(view, [lightdir[0], lightdir[1], lightdir[2], 0.0], lightdest);
-        lightdir = vec3.createFrom(lightdest[0],lightdest[1],lightdest[2]);
-        vec3.normalize(lightdir);
-
+        var lightdirCam = vec3.createFrom(lightdest[0],lightdest[1],lightdest[2]);//View Space
+        vec3.normalize(lightdirCam);
+
+
+        var modelInv = mat4.create();
+        mat4.inverse(model, modelInv);
+        mat4.multiplyVec4(modelInv, [lightdir[0], lightdir[1], lightdir[2], 0.0], lightdir);
+
         ///////////////////////////////////////////////////////////////////////////
         // Render
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
@@ -265,8 +272,11 @@
         gl.uniformMatrix4fv(u_ViewLocation, false, view);
         gl.uniformMatrix4fv(u_PerspLocation, false, persp);
         gl.uniformMatrix4fv(u_InvTransLocation, false, invTrans);
-
-        gl.uniform3fv(u_CameraSpaceDirLightLocation, lightdir);
+		gl.uniform1f(u_timeLocation, -time*0.1);
+
+
+        gl.uniform3fv(u_ModelSpaceDirLightLocation, lightdir);
+        gl.uniform3fv(u_CameraSpaceDirLightLocation, lightdirCam);
 
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, dayTex);
@@ -313,4 +323,4 @@
     initializeTexture(transTex, "earthtrans1024.png");
     initializeTexture(lightTex, "earthlight1024.png");
     initializeTexture(specTex, "earthspec1024.png");
-}());
+}());

waves/simplex_wave.html

@@ -0,0 +1,86 @@
+<html>
+
+<head>
+<title>Vertex Simplex Noise Wave</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>
+
+<script id="vs" type="x-shader/x-vertex">
+    attribute vec2 position;
+
+    uniform mat4 u_modelViewPerspective;
+    uniform float u_time;
+	varying float height;
+
+	vec3 permute(vec3 x) {
+	  x = ((x*34.0)+1.0)*x;
+	  return x - floor(x * (1.0 / 289.0)) * 289.0;
+	}
+
+	float simplexNoise(vec2 v)
+	{
+	  const vec4 C = vec4(0.211324865405187, 0.366025403784439,  -0.577350269189626, 0.024390243902439); 
+
+	  vec2 i  = floor(v + dot(v, C.yy) );
+	  vec2 x0 = v -   i + dot(i, C.xx);
+
+	  vec2 i1;
+	  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+
+	  vec4 x12 = x0.xyxy + C.xxzz;
+	  x12.xy -= i1;
+
+	  i = i - floor(i * (1.0 / 289.0)) * 289.0;
+
+	  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+			+ i.x + vec3(0.0, i1.x, 1.0 ));
+
+	  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
+	  m = m*m ;
+	  m = m*m ;
+
+	  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+	  vec3 h = abs(x) - 0.5;
+	  vec3 ox = floor(x + 0.5);
+	  vec3 a0 = x - ox;
+
+	  m *= inversesqrt( a0*a0 + h*h );
+
+	  vec3 g;
+	  g.x  = a0.x  * x0.x  + h.x  * x0.y;
+	  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+	  return 130.0 * dot(m, g);
+	}
+
+    void main(void)
+    {
+		vec2 simplexVec = vec2(u_time, position);
+		float s_contrib = simplexNoise(simplexVec);
+		float t_contrib = simplexNoise(vec2(s_contrib,u_time));
+		height = s_contrib*t_contrib;
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+	varying float height;
+    void main(void)
+    {
+		//Height ranges from -1 to 1. Scale appropriately
+		gl_FragColor = vec4(mix(vec3(1.0, 0.0,0.0), vec3(0.0,0.0,1.0), (height*0.5+0.5)),1.0);
+    }    
+</script>
+
+<script src ="gl-matrix.js" type ="text/javascript"></script>
+<script src ="webGLUtility.js" type ="text/javascript"></script>
+<script src ="vert_wave.js" type ="text/javascript"></script>
+</body>
+
+</html>

part1/vert_wave.html → waves/vert_wave.html

@@ -1,7 +1,7 @@
 <html>
 
 <head>
-<title>Vertex Wave</title>
+<title>Vertex Sine Wave</title>
 <meta charset ="utf-8">
 <meta http-equiv="X-UA-Compatible" content="chrome=1">  <!-- Use Chrome Frame in IE --> 
 </head>
@@ -14,20 +14,26 @@
     attribute vec2 position;
 
     uniform mat4 u_modelViewPerspective;
-
+    uniform float u_time;
+	varying float height;
+
     void main(void)
     {
-		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);
+		height = s_contrib*t_contrib;
 		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
     }
 </script>
 
 <script id="fs" type="x-shader/x-fragment">
     precision mediump float;
 
+	varying float height;
     void main(void)
     {
-		gl_FragColor = vec4(vec3(0.0), 1.0);
+		//Height ranges from -1 to 1. Scale appropriately
+		gl_FragColor = vec4(mix(vec3(1.0, 0.0,0.0), vec3(0.0,0.0,1.0), (height*0.5+0.5)),1.0);
     }    
 </script>
 

part1/vert_wave.js → waves/vert_wave.js

@@ -3,8 +3,8 @@
     /*global window,document,Float32Array,Uint16Array,mat4,vec3,snoise*/
     /*global getShaderSource,createWebGLContext,createProgram*/
 
-    var NUM_WIDTH_PTS = 32;
-    var NUM_HEIGHT_PTS = 32;
+    var NUM_WIDTH_PTS = 200;
+    var NUM_HEIGHT_PTS = 200;
 
     var message = document.getElementById("message");
     var canvas = document.getElementById("canvas");
@@ -31,6 +31,8 @@
     var positionLocation = 0;
     var heightLocation = 1;
     var u_modelViewPerspectiveLocation;
+    var u_timeLocation;
+
 
     (function initializeShader() {
         var program;
@@ -39,8 +41,8 @@
 
 		var program = createProgram(context, vs, fs, message);
 		context.bindAttribLocation(program, positionLocation, "position");
+		u_timeLocation = context.getUniformLocation(program,"u_time");
 		u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
-
         context.useProgram(program);
     })();
 
@@ -126,6 +128,8 @@
         numberOfIndices = indices.length;
     })();
 
+	var time = 0.0;
+	var delT = 0.01;
     (function animate(){
         ///////////////////////////////////////////////////////////////////////////
         // Update
@@ -137,12 +141,14 @@
         mat4.multiply(view, model, mv);
         var mvp = mat4.create();
         mat4.multiply(persp, mv, mvp);
-
+		time  = time + delT;
+
         ///////////////////////////////////////////////////////////////////////////
         // Render
         context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
 
         context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
+		context.uniform1f(u_timeLocation, time);
         context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
 
 		window.requestAnimFrame(animate);