CIS565-Fall-2013 · vivreddy · Nov 7, 2013 · Nov 7, 2013 · Nov 8, 2013 · Nov 8, 2013
diff --git a/README.md b/README.md
diff --git a/part1/vert_wave.html b/part1/vert_wave.html
@@ -14,20 +14,25 @@
     attribute vec2 position;
 
     uniform mat4 u_modelViewPerspective;
+	uniform float u_time;
+	varying vec3 ocolor;
 
     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);
+		ocolor = mix(vec3(1.0, 0.2, 0.0) ,vec3(0.0, 0.8, 1.0),height);
     }
 </script>
 
 <script id="fs" type="x-shader/x-fragment">
     precision mediump float;
-
+    varying vec3 ocolor;
     void main(void)
     {
-		gl_FragColor = vec4(vec3(0.0), 1.0);
+		gl_FragColor = vec4(ocolor, 1.0);
     }    
 </script>
 

diff --git a/part1/vert_wave.js b/part1/vert_wave.js
@@ -31,6 +31,7 @@
     var positionLocation = 0;
     var heightLocation = 1;
     var u_modelViewPerspectiveLocation;
+	var u_timeLocation ;
 
     (function initializeShader() {
         var program;
@@ -40,7 +41,7 @@
 		var program = createProgram(context, vs, fs, message);
 		context.bindAttribLocation(program, positionLocation, "position");
 		u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
-
+        u_timeLocation = context.getUniformLocation(program,"u_time");
         context.useProgram(program);
     })();
 
@@ -83,6 +84,7 @@
         var positionsIndex = 0;
         var indicesIndex = 0;
         var length;
+
 
         for (var j = 0; j < NUM_WIDTH_PTS; ++j)
         {
@@ -125,7 +127,7 @@
         uploadMesh(positions, heights, indices);
         numberOfIndices = indices.length;
     })();
-
+    var time = 0;
     (function animate(){
         ///////////////////////////////////////////////////////////////////////////
         // Update
@@ -140,8 +142,9 @@
 
         ///////////////////////////////////////////////////////////////////////////
         // Render
+		time += 0.001;
         context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
-
+        context.uniform1f(u_timeLocation,time);
         context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
         context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
 

diff --git a/part1/vert_wave_custom.html b/part1/vert_wave_custom.html
@@ -0,0 +1,43 @@
+<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 mat4 u_modelViewPerspective;
+	uniform float u_time;
+	varying vec3 ocolor;
+
+    void main(void)
+    {
+	    // Standing wave http://en.wikipedia.org/wiki/Standing_wave
+		float height = 2.0 * 0.1 * sin(position.x*(2.0*3.14159/0.5)) * cos(2.0*2.0*3.14159*u_time) * sin(position.y*(2.0*3.14159/0.5));
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+		ocolor = mix(vec3(height*2.0, 0.2, 0.5) ,vec3(0.0, 0.8, height*2.0),height*5.0);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+    varying vec3 ocolor;
+    void main(void)
+    {
+		gl_FragColor = vec4(ocolor, 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_simplex.html b/part1/vert_wave_simplex.html
@@ -0,0 +1,86 @@
+<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 mat4 u_modelViewPerspective;
+	uniform float u_time;
+	varying vec3 ocolor;
+	float simplexNoise(vec2 v);
+
+    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);
+		ocolor = mix(vec3(1.0, 0.2, 0.0) ,vec3(0.0, 0.8, 1.0),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);
+		}
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+    varying vec3 ocolor;
+    void main(void)
+    {
+		gl_FragColor = vec4(ocolor, 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/part2/frag_globe.html b/part2/frag_globe.html
@@ -7,8 +7,11 @@
 </head>
 
 <body>
+<div>Elapsed time: <span id="fps"></span></div>
 <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>
+
+<canvas id="canvas" style="border: none;" width="1024" height="768" tabindex="1">  </canvas>
+
 
 <script id="vs" type="x-shader/x-vertex">
     precision highp float;
@@ -62,6 +65,7 @@
     uniform sampler2D u_Bump;
 
     uniform float u_time;
+	uniform float u_button;
     uniform mat4 u_InvTrans;
 
     varying vec3 v_Normal;              // surface normal in camera coordinates
@@ -78,21 +82,45 @@
         // normalized eye-to-position vector in camera coordinates
         vec3 eyeToPosition = normalize(v_Position);
 
-        float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+		// Rim color to create a atmospheric effect
+		float rim = dot(v_Position,v_Normal) + 1.0 ;
+		vec4 rimColor = vec4(0.0,0.0,0.0,0.0);
+		if (rim > 0.0)
+			rimColor = vec4(rim/4.0, rim/2.0, rim/2.0, 0.0);
+
+		// The color of texture for bump mapping
+		vec3 center = texture2D(u_Bump, vec2(v_Texcoord.x,v_Texcoord.y)).rgb ;
+		vec3 right  = texture2D(u_Bump, vec2(v_Texcoord.x + 1.0/1024.0,v_Texcoord.y)).rgb;
+		vec3 top    = texture2D(u_Bump, vec2(v_Texcoord.x ,v_Texcoord.y + 1.0/512.0)).rgb;
+		normal = normalize( eastNorthUpToEyeCoordinates(v_positionMC, v_Normal) * normalize(vec3(center.x - right.x, center.x - top.x, 0.2)) );
+
+        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);
-
+		vec3 specColor = texture2D(u_EarthSpec, v_Texcoord).rgb;
+		// Condition to have specular only on 
+        if(specColor.x == 0.0)
+			specular = 0.0;
+
         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;
+
         //apply gamma correction to nighttime texture
-        nightColor = pow(nightColor,vec3(gammaCorrect));
-
-        vec3 color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor;
-        gl_FragColor = vec4(color, 1.0);
+		nightColor = pow(nightColor,vec3(gammaCorrect));
+
+		//Day color on planet
+		vec3 cloudColor = texture2D(u_Cloud, vec2( v_Texcoord.x + u_time ,v_Texcoord.y )).rgb;
+		vec3 cloudTransColor = texture2D(u_CloudTrans , vec2( v_Texcoord.x + u_time ,v_Texcoord.y )).rgb;
+        vec3 color = mix(cloudColor ,((0.6 * diffuse) + (0.4 * specular)) * dayColor, cloudTransColor.x);
+        nightColor = mix(vec3(0.0,0.0,0.0),nightColor, cloudTransColor.x);
+		vec4 bumpColor =vec4(0.0,0.0,0.0,0.0);
+		if (u_button == 1.0) 
+			bumpColor = vec4(mix(vec3(0.0,0.0,0.0),vec3(1.0,0.0,1.0), center.x),0.0);
+		gl_FragColor = vec4(mix(nightColor,color ,diffuse), 1.0) + rimColor + bumpColor;
     }
 
     mat3 eastNorthUpToEyeCoordinates(vec3 positionMC, vec3 normalEC)

diff --git a/part2/frag_globe.js b/part2/frag_globe.js
@@ -55,6 +55,7 @@
     var u_EarthSpecLocation;
     var u_BumpLocation;
     var u_timeLocation;
+	var u_buttonLocation;
 
     (function initializeShader() {
         var vs = getShaderSource(document.getElementById("vs"));
@@ -75,6 +76,7 @@
         u_EarthSpecLocation = gl.getUniformLocation(program,"u_EarthSpec");
         u_BumpLocation = gl.getUniformLocation(program,"u_Bump");
         u_timeLocation = gl.getUniformLocation(program,"u_time");
+		u_buttonLocation = gl.getUniformLocation(program,"u_button");
         u_CameraSpaceDirLightLocation = gl.getUniformLocation(program,"u_CameraSpaceDirLight");
 
         gl.useProgram(program);
@@ -176,6 +178,8 @@
     })();
 
     var time = 0;
+	var frameCount = 0 ;
+	var displayBump = 0.0 ;
     var mouseLeftDown = false;
     var mouseRightDown = false;
     var lastMouseX = null;
@@ -227,13 +231,34 @@
         lastMouseX = newX;
         lastMouseY = newY;
     }
+	  var currentlyPressedKeys = {};
+
+	  function handleKeyDown(event) {
+        currentlyPressedKeys[event.keyCode] = true;
+
+        if (String.fromCharCode(event.keyCode) == "B") {
+          displayBump = 1.0;
+        }
+    }
+
+
+    function handleKeyUp(event) {
+        currentlyPressedKeys[event.keyCode] = false;
+
+		if (String.fromCharCode(event.keyCode) == "B") {
+          displayBump = 0.0;
+        }
+    }
 
     canvas.onmousedown = handleMouseDown;
     canvas.oncontextmenu = function(ev) {return false;};
     document.onmouseup = handleMouseUp;
     document.onmousemove = handleMouseMove;
+	document.onkeydown = handleKeyDown;
+    document.onkeyup = handleKeyUp;
+
 
-
+    var then = Date.now()/1000 ;
     function animate() {
         ///////////////////////////////////////////////////////////////////////////
         // Update
@@ -259,6 +284,7 @@
 
         ///////////////////////////////////////////////////////////////////////////
         // Render
+
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
         gl.uniformMatrix4fv(u_ModelLocation, false, model);
@@ -286,9 +312,23 @@
         gl.activeTexture(gl.TEXTURE5);
         gl.bindTexture(gl.TEXTURE_2D, specTex);
         gl.uniform1i(u_EarthSpecLocation, 5);
+		gl.uniform1f(u_timeLocation, time);
+		gl.uniform1f(u_buttonLocation, displayBump);
         gl.drawElements(gl.TRIANGLES, numberOfIndices, gl.UNSIGNED_SHORT,0);
-
-        time += 0.001;
+		time += 0.001;
+		frameCount++ ;
+		if(frameCount == 30)
+		{
+		frameCount = 0;
+		var fpsElement = document.getElementById("fps");
+		var now = Date.now()/1000 ;
+		var elapsedTime = now - then;
+        then = now;
+		// compute fps
+        var fps = 1 / elapsedTime;
+        fpsElement.textContent = elapsedTime.toFixed(4);  
+		}	
+
         window.requestAnimFrame(animate);
     }