CIS565-Fall-2013 · rarietta · Nov 4, 2013 · Nov 5, 2013 · Nov 5, 2013 · Nov 6, 2013
diff --git a/README.md b/README.md
diff --git a/part1/vert_custom.html b/part1/vert_custom.html
@@ -0,0 +1,50 @@
+<html>
+
+<head>
+<title>Vertex 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 float u_time;
+    uniform mat4 u_modelViewPerspective;
+
+	varying vec3 vColor;
+
+	vec3 minColor = vec3(1.0, 0.0, 0.0);
+	vec3 maxColor = vec3(0.0, 0.0, 1.0);
+
+    void main(void)
+    {
+		float s_contrib = 0.6*sin(position.x*2.5 + 3.0*u_time);
+		float t_contrib = 0.8*cos(position.y*4.1 + 5.0*u_time);
+		float height = s_contrib * t_contrib;
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+
+		vColor = mix(minColor, maxColor, height/2.0 + 0.5);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+	varying vec3 vColor;
+
+    void main(void)
+    {
+		gl_FragColor = vec4(vColor, 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>
diff --git a/part1/vert_simplex.html b/part1/vert_simplex.html
@@ -0,0 +1,90 @@
+<html>
+
+<head>
+<title>Vertex Simplex</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 float u_time;
+    uniform mat4 u_modelViewPerspective;
+
+	varying vec3 vColor;
+
+	vec3 minColor = vec3(1.0, 0.0, 0.0);
+	vec3 maxColor = vec3(0.0, 0.0, 1.0);
+
+    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));
+		float height = s_contrib*t_contrib;
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+		vColor = mix(minColor, maxColor, height/2.0 + 0.5);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+	varying vec3 vColor;
+
+    void main(void)
+    {
+		gl_FragColor = vec4(vColor, 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>
diff --git a/part1/vert_wave.html b/part1/vert_wave.html
@@ -13,21 +13,32 @@
 <script id="vs" type="x-shader/x-vertex">
     attribute vec2 position;
 
+	uniform float u_time;
     uniform mat4 u_modelViewPerspective;
 
+	varying vec3 vColor;
+
+	vec3 minColor = vec3(1.0, 0.0, 0.0);
+	vec3 maxColor = vec3(0.0, 0.0, 1.0);
+
     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);
+		float height = s_contrib*t_contrib;
 		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+
+		vColor = mix(minColor, maxColor, height/2.0 + 0.5);
     }
 </script>
 
 <script id="fs" type="x-shader/x-fragment">
     precision mediump float;
-
+	varying vec3 vColor;
+
     void main(void)
     {
-		gl_FragColor = vec4(vec3(0.0), 1.0);
+		gl_FragColor = vec4(vColor, 1.0);
     }    
 </script>
 

diff --git a/part1/vert_wave.js b/part1/vert_wave.js
@@ -31,6 +31,11 @@
     var positionLocation = 0;
     var heightLocation = 1;
     var u_modelViewPerspectiveLocation;
+	var u_timeLocation;
+	var u_time;
+
+	//var minColor = vec3(0.0, 0.0, 1.0);
+	//var maxColor = vec3(1.0, 0.0, 0.0);
 
     (function initializeShader() {
         var program;
@@ -41,6 +46,8 @@
 		context.bindAttribLocation(program, positionLocation, "position");
 		u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
 
+		u_timeLocation = context.getUniformLocation(program, "u_time");
+		u_time = 0.0;
         context.useProgram(program);
     })();
 
@@ -145,6 +152,7 @@
         context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
         context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
 
+		context.uniform1f(u_timeLocation, u_time += 0.005);
 		window.requestAnimFrame(animate);
     })();
 

diff --git a/part2/frag_globe.html b/part2/frag_globe.html
@@ -60,6 +60,8 @@
     uniform sampler2D u_EarthSpec;
     //Bump map
     uniform sampler2D u_Bump;
+	//Wave Intensity
+	uniform sampler2D u_Wave;
 
     uniform float u_time;
     uniform mat4 u_InvTrans;
@@ -73,26 +75,69 @@
 
     void main(void)
     {
+		// what is water and what is land?
+		float earthSpecMask = texture2D(u_EarthSpec, v_Texcoord).r;
+		float waveIntensity = texture2D(u_Wave, v_Texcoord).r;
+
+		//read 3 texels from bump map for land, noise for water
+		float bumpCenter, bumpRight, bumpTop;
+		if (earthSpecMask == 0.00) {
+			bumpCenter = texture2D(u_Bump, vec2(v_Texcoord.s, v_Texcoord.t)).r;
+			bumpRight  = texture2D(u_Bump, vec2(v_Texcoord.s + (1.0/512.0), v_Texcoord.t)).r;
+			bumpTop    = texture2D(u_Bump, vec2(v_Texcoord.s, v_Texcoord.t + (1.0/1024.0))).r;
+		} else {
+			bumpCenter = ((1.2 - waveIntensity) * sin(33.0 * v_Texcoord.s*v_positionMC.y + 53.0 * (1.2 - waveIntensity) * (abs(fract(0.75*u_time) - 0.5) + 0.2))) 
+					   * ((1.2 - waveIntensity) * cos(50.0 * v_Texcoord.t*v_positionMC.y + 35.0 * (1.2 - waveIntensity) * (abs(fract(0.75*u_time) - 0.5) + 0.2)));
+			bumpRight =  ((1.2 - waveIntensity) * sin(33.0 *(v_Texcoord.s+(1.0/1024.0))  + 53.0 * (1.2 - waveIntensity) * (abs(fract(0.75*u_time) - 0.5) + 0.2))) 
+					   * ((1.2 - waveIntensity) * cos(50.0 * v_Texcoord.t			   	 + 35.0 * (1.2 - waveIntensity) * (abs(fract(0.75*u_time) - 0.5) + 0.2)));
+			bumpTop = 	 ((1.2 - waveIntensity) * sin(33.0 * v_Texcoord.s 			     + 53.0 * (1.2 - waveIntensity) * (abs(fract(0.75*u_time) - 0.5) + 0.2))) 
+					   * ((1.2 - waveIntensity) * cos(50.0 *(v_Texcoord.t+(1.0/512.0))   + 35.0 * (1.2 - waveIntensity) * (abs(fract(0.75*u_time) - 0.5) + 0.2)));
+		}
+		vec3 tangentSpaceBumpNormal = normalize(vec3(bumpCenter-bumpRight, bumpCenter-bumpTop, 0.2));
+
+
         // surface normal - normalized after rasterization
-        vec3 normal = normalize(v_Normal);
+        vec3 v_normalEC = normalize(v_Normal);
         // normalized eye-to-position vector in camera coordinates
         vec3 eyeToPosition = normalize(v_Position);
 
+		mat3 tangentToEyeSpace = eastNorthUpToEyeCoordinates(v_positionMC, v_normalEC);
+		vec3 normal = normalize(tangentToEyeSpace*tangentSpaceBumpNormal);
+
         float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.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
+        float gammaCorrect = 1.0/1.1; //gamma correct by 1/1.1
 
         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;
+
+		//apply specular mask to daytime texture
+		dayColor = ((0.6 * diffuse) + (0.4 * earthSpecMask * specular)) * dayColor;
+
+		//apply clouds
+		vec2 cloudTexCoord = vec2(v_Texcoord.s - u_time/5.0, v_Texcoord.t);
+		vec3 cloudColor = texture2D(u_Cloud, cloudTexCoord).rgb;
+		float cloudTrans = texture2D(u_CloudTrans, cloudTexCoord).r;
+		dayColor = mix(cloudColor, dayColor, cloudTrans);
+		nightColor = mix(vec3(0.0), nightColor, cloudTrans);
+
+		float reDiffuse = clamp(diffuse*2.5, 0.0, 1.0);
+        vec3 color = mix(nightColor, dayColor, reDiffuse);
         gl_FragColor = vec4(color, 1.0);
+
+		//rim lighting
+		float rimFactor = dot(v_Normal, v_Position) + 1.0;
+		if (rimFactor > 0.0) {
+			vec4 rimColor = vec4(rimFactor/4.0, rimFactor/2.0, rimFactor/2.0, 1.0);
+			gl_FragColor += rimColor;
+		}
     }
 
     mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC)

diff --git a/part2/frag_globe.js b/part2/frag_globe.js
@@ -54,7 +54,10 @@
     var u_CloudTransLocation;
     var u_EarthSpecLocation;
     var u_BumpLocation;
+	var u_WaveLocation;
     var u_timeLocation;
+
+	var u_time;
 
     (function initializeShader() {
         var vs = getShaderSource(document.getElementById("vs"));
@@ -74,6 +77,7 @@
         u_CloudTransLocation = gl.getUniformLocation(program,"u_CloudTrans");
         u_EarthSpecLocation = gl.getUniformLocation(program,"u_EarthSpec");
         u_BumpLocation = gl.getUniformLocation(program,"u_Bump");
+		u_WaveLocation = gl.getUniformLocation(program, "u_Wave");
         u_timeLocation = gl.getUniformLocation(program,"u_time");
         u_CameraSpaceDirLightLocation = gl.getUniformLocation(program,"u_CameraSpaceDirLight");
 
@@ -86,6 +90,7 @@
     var transTex = gl.createTexture();
     var lightTex = gl.createTexture();
     var specTex  = gl.createTexture();
+	var waveTex  = gl.createTexture();
 
     function initLoadedTexture(texture){
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -286,9 +291,13 @@
         gl.activeTexture(gl.TEXTURE5);
         gl.bindTexture(gl.TEXTURE_2D, specTex);
         gl.uniform1i(u_EarthSpecLocation, 5);
+        gl.activeTexture(gl.TEXTURE6);
+        gl.bindTexture(gl.TEXTURE_2D, waveTex);
+        gl.uniform1i(u_WaveLocation, 6);
         gl.drawElements(gl.TRIANGLES, numberOfIndices, gl.UNSIGNED_SHORT,0);
 
         time += 0.001;
+		gl.uniform1f(u_timeLocation, time);
         window.requestAnimFrame(animate);
     }
 
@@ -313,4 +322,5 @@
     initializeTexture(transTex, "earthtrans1024.png");
     initializeTexture(lightTex, "earthlight1024.png");
     initializeTexture(specTex, "earthspec1024.png");
+    initializeTexture(waveTex, "waveintensity.png");
 }());
diff --git a/part2/waveintensity.png b/part2/waveintensity.png
diff --git a/readme_imgs/globe/preview_001.png b/readme_imgs/globe/preview_001.png
diff --git a/readme_imgs/globe/screenshot_001.png b/readme_imgs/globe/screenshot_001.png
diff --git a/readme_imgs/globe/screenshot_002.png b/readme_imgs/globe/screenshot_002.png
diff --git a/readme_imgs/globe/screenshot_003.png b/readme_imgs/globe/screenshot_003.png
diff --git a/readme_imgs/globe/screenshot_004.png b/readme_imgs/globe/screenshot_004.png
diff --git a/readme_imgs/globe/screenshot_005.png b/readme_imgs/globe/screenshot_005.png
diff --git a/readme_imgs/globe/screenshot_006.png b/readme_imgs/globe/screenshot_006.png
diff --git a/readme_imgs/globe/screenshot_007.png b/readme_imgs/globe/screenshot_007.png
diff --git a/readme_imgs/globe/screenshot_008.png b/readme_imgs/globe/screenshot_008.png
diff --git a/readme_imgs/globe/screenshot_final.png b/readme_imgs/globe/screenshot_final.png
diff --git a/readme_imgs/globe/waveintensity.png b/readme_imgs/globe/waveintensity.png
diff --git a/readme_imgs/waves/Thumbs.db b/readme_imgs/waves/Thumbs.db
diff --git a/readme_imgs/waves/preview_001.png b/readme_imgs/waves/preview_001.png
diff --git a/readme_imgs/waves/preview_002.png b/readme_imgs/waves/preview_002.png
diff --git a/readme_imgs/waves/preview_003.png b/readme_imgs/waves/preview_003.png