CIS565-Fall-2014 · DiracSea3921 · Nov 3, 2014 · Nov 3, 2014 · Nov 3, 2014 · Nov 3, 2014
diff --git a/README.md b/README.md
diff --git a/earth.png b/earth.png
diff --git a/earth2.png b/earth2.png
diff --git a/earth3.png b/earth3.png
diff --git a/earth4.png b/earth4.png
diff --git a/frag_globe.html b/frag_globe.html
@@ -45,7 +45,8 @@
     //View-Space directional light
     //A unit vector
     uniform vec3 u_CameraSpaceDirLight;
-
+	uniform vec3 u_DirLight;
+
     //Diffuse texture map for the day
     uniform sampler2D u_DayDiffuse;
     //Ambient texture map for the night side
@@ -74,11 +75,22 @@
     void main(void)
     {
         // surface normal - normalized after rasterization
-        vec3 normal = normalize(v_Normal);
+		float center = texture2D(u_Bump, v_Texcoord).r;
+		float right = texture2D(u_Bump, v_Texcoord+ vec2(1.0/1024.0, 0.0)).r;
+		float top = texture2D(u_Bump, v_Texcoord+ vec2(0.0, 1.0/512.0)).r;
+		vec3 bump = normalize(vec3(center - right, center - top, 0.2));
+		mat3 transformMatrix = eastNorthUpToEyeCoordinates(v_positionMC, normalize(v_Normal));
+        vec3 bumpNormal = transformMatrix * bump;
+		vec3 normal = normalize(v_Normal);
         // normalized eye-to-position vector in camera coordinates
         vec3 eyeToPosition = normalize(v_Position);
-
-        float diffuse = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+		vec2 v_Texcoord2 = v_Texcoord + vec2(u_time * 0.5, 0.0);
+
+        float earthSpec = texture2D(u_EarthSpec, v_Texcoord).r;	
+		vec3 cloud = texture2D(u_Cloud, v_Texcoord2).rgb;
+		float cloudTrans = texture2D(u_CloudTrans, v_Texcoord2).r;
+
+        float diffuse = clamp(dot(u_CameraSpaceDirLight, bumpNormal), 0.0, 1.0);
 
         vec3 toReflectedLight = reflect(-u_CameraSpaceDirLight, normal);
         float specular = max(dot(toReflectedLight, -eyeToPosition), 0.0);
@@ -90,8 +102,34 @@
         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;
+		nightColor = mix(vec3(0,0,0), nightColor, cloudTrans);
+
+		//cloud shadow
+		vec3 cloudShadowOffset = transformMatrix * u_DirLight;
+		vec2 cloudShadowOffset2 = v_Texcoord2 + vec2(-cloudShadowOffset.x * 0.01,-cloudShadowOffset.y * 0.01);
+		float cloudTransShadow = texture2D(u_CloudTrans, cloudShadowOffset2).r;
+
+        vec3 color;
+		dayColor = mix(((0.6 * diffuse) + (0.4 * specular * earthSpec)) * dayColor ,vec3(0,0,0), 1.0-cloudTransShadow);
+
+		dayColor = mix(cloud, dayColor, cloudTrans);
+
+
+
+		//rim
+		float rimFactor = dot(v_Normal, v_Position) + 1.0;
+		vec3 rimColor = clamp(vec3(rimFactor / 4.0, rimFactor / 2.0, rimFactor / 2.0),vec3(0,0,0),vec3(1,1,1));
+		dayColor = dayColor + rimColor;
+		nightColor = nightColor + rimColor;
+
+		float diffuse2 = clamp(dot(u_CameraSpaceDirLight, normal), 0.0, 1.0);
+		if(diffuse2 > 0.1)
+			color = dayColor;
+		else if(diffuse2 <= 0.0)
+			color = nightColor;
+		else
+			color = mix(nightColor,dayColor, diffuse2 / 0.1 )  ;
+
         gl_FragColor = vec4(color, 1.0);
     }
 

diff --git a/js/frag_globe.js b/js/frag_globe.js
@@ -48,6 +48,7 @@
     var u_ViewLocation;
     var u_PerspLocation;
     var u_CameraSpaceDirLightLocation;
+	var u_DirLightLocation;
     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_DirLightLocation = gl.getUniformLocation(program,"u_DirLight");
 
         gl.useProgram(program);
     })();
@@ -267,6 +269,7 @@
         gl.uniformMatrix4fv(u_InvTransLocation, false, invTrans);
 
         gl.uniform3fv(u_CameraSpaceDirLightLocation, lightdir);
+		gl.uniform3fv(u_DirLightLocation, vec3.create([1.0, 0.0, 1.0]));
 
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, dayTex);
@@ -289,6 +292,7 @@
         gl.drawElements(gl.TRIANGLES, numberOfIndices, gl.UNSIGNED_SHORT,0);
 
         time += 0.001;
+		gl.uniform1f(u_timeLocation, time);
         window.requestAnimFrame(animate);
     }
 

diff --git a/sin.png b/sin.png
diff --git a/sin_wave.html b/sin_wave.html
@@ -0,0 +1,241 @@
+<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 src ="js/lib/gl-matrix.js" type ="text/javascript"></script>
+<script src ="js/webGLUtility.js" type ="text/javascript"></script>
+<script src="js/lib/dat.gui.min.js" type="text/javascript"></script>
+
+<script id="vs" type="x-shader/x-vertex">
+    attribute vec2 position;
+
+    uniform mat4 u_modelViewPerspective;
+    uniform float u_time;
+	varying float ps_height;
+	uniform float u_Height;
+    void main(void)
+    {
+	    float height = sin(sqrt((position.y - 0.5) * (position.y - 0.5) +  (position.x - 0.5) * (position.x - 0.5)) * 2.0 * 3.14159 + u_time) * u_Height;
+
+      // NOTE : gl_Position is always a vec4
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0) ;
+		ps_height = height;
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+	varying float ps_height;
+    uniform vec4 u_color;
+	uniform vec4 u_max_color;
+	uniform vec4 u_min_color;
+
+    void main(void)
+    {
+      // NOTE : gl_FragColor is always a vec4
+		  float factor = (ps_height + 1.0) / 2.0;
+		  gl_FragColor = mix(u_min_color , u_max_color , factor);
+    }    
+</script>
+
+<script>
+  // Globals
+  var positionLocation = 0;
+  var heightLocation = 1;
+  var u_modelViewPerspectiveLocation;
+  var u_color;
+
+  var heights;
+  var numberOfIndices;
+
+  var eye = [2.0, 1.0, 3.0];
+  var center = [0.0, 0.0, 0.0];
+  var up = [0.0, 0.0, 1.0];
+
+
+  var NUM_WIDTH_PTS = 32;
+  var NUM_HEIGHT_PTS = 32;
+
+  var message;
+  var canvas;
+  var context;
+
+  var persp = mat4.create();
+  var view = mat4.create();
+  var time = 0;
+
+  // Function called when the window is loaded
+  window.onload = function() {
+    // Add GUI component 
+    var gui = new dat.GUI();
+	gui.addColor(ColorObject, 'Max_Color');
+	gui.addColor(ColorObject, 'Min_Color');
+	gui.add(ColorObject, 'Frequency', 0.001, 0.05);
+	gui.add(ColorObject, 'Height', 0.01, 2);
+    init();
+
+    animate();
+  };
+
+  var ColorObject = new function(){
+		this.Max_Color = [ 0, 128, 255, 1.0 ]; 
+		this.Min_Color = [ 255, 51, 0, 1.0 ];
+		this.Frequency = 0.03;
+		this.Height = 1.0;
+  }
+
+  function init() {
+    message = document.getElementById("message");
+    canvas = document.getElementById("canvas");
+    context = createWebGLContext(canvas, message);
+
+    if (!context) {
+      return;
+    }
+
+    // SET UP WEBGL CONTEXT
+    context.viewport(0, 0, canvas.width, canvas.height);
+    context.clearColor(1.0, 1.0, 1.0, 1.0);
+    context.enable(context.DEPTH_TEST);
+
+    mat4.perspective(45.0, 0.5, 0.1, 100.0, persp);
+
+    mat4.lookAt(eye, center, up, view);
+
+    initializeShader();
+    initializeGrid(); 
+  }
+
+
+  function animate(){
+    // Update
+    var model = mat4.create();
+    mat4.identity(model);
+    mat4.translate(model, [-0.5, -0.5, 0.0]);
+    var mv = mat4.create();
+    mat4.multiply(view, model, mv);
+    var mvp = mat4.create();
+    mat4.multiply(persp, mv, mvp);
+	time += ColorObject.Frequency;
+    // Render  
+    context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
+
+    context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp); 
+	context.uniform1f(u_timeLocation, time);
+	context.uniform1f(u_HeightLocation, ColorObject.Height);
+	context.uniform4f(u_MaxColorLocation, ColorObject.Max_Color[0]/255.0, ColorObject.Max_Color[1]/255.0, ColorObject.Max_Color[2]/255.0 , 1.0);
+	context.uniform4f(u_MinColorLocation, ColorObject.Min_Color[0]/255.0, ColorObject.Min_Color[1]/255.0, ColorObject.Min_Color[2]/255.0 , 1.0);	
+
+    context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
+
+
+    window.requestAnimFrame(animate);
+  }
+
+  function initializeShader() {
+    var program;
+    var vs = getShaderSource(document.getElementById("vs"));
+    var fs = getShaderSource(document.getElementById("fs"));
+
+		var program = createProgram(context, vs, fs, message);
+		context.bindAttribLocation(program, positionLocation, "position");
+		u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
+    u_colorLocation = context.getUniformLocation(program, "u_color");
+
+	u_timeLocation = context.getUniformLocation(program, "u_time");
+	u_HeightLocation = context.getUniformLocation(program, "u_Height");
+	u_MaxColorLocation = context.getUniformLocation(program, "u_max_color");
+	u_MinColorLocation = context.getUniformLocation(program, "u_min_color");
+
+    context.useProgram(program);
+  }
+
+  function initializeGrid() {
+    function uploadMesh(positions, heights, indices) {
+      // Positions
+      var positionsName = context.createBuffer();
+      context.bindBuffer(context.ARRAY_BUFFER, positionsName);
+      context.bufferData(context.ARRAY_BUFFER, positions, context.STREAM_DRAW);
+      context.vertexAttribPointer(positionLocation, 2, context.FLOAT, false, 0, 0);
+      context.enableVertexAttribArray(positionLocation);
+
+      if (heights){
+        // Heights
+        var heightsName = context.createBuffer();
+        context.bindBuffer(context.ARRAY_BUFFER, heightsName);
+        context.bufferData(context.ARRAY_BUFFER, heights.length *
+                            heights.BYTES_PER_ELEMENT, context.STATIC_DRAW);
+        context.vertexAttribPointer(heightLocation, 1, context.FLOAT, false, 0, 0);
+        context.enableVertexAttribArray(heightLocation);
+      }
+
+      // Indices
+      var indicesName = context.createBuffer();
+      context.bindBuffer(context.ELEMENT_ARRAY_BUFFER, indicesName);
+      context.bufferData(context.ELEMENT_ARRAY_BUFFER, indices, context.STATIC_DRAW);
+    }
+
+    var WIDTH_DIVISIONS = NUM_WIDTH_PTS - 1;
+    var HEIGHT_DIVISIONS = NUM_HEIGHT_PTS - 1;
+
+    var numberOfPositions = NUM_WIDTH_PTS * NUM_HEIGHT_PTS;
+
+    var positions = new Float32Array(2 * numberOfPositions);
+    var indices = new Uint16Array(2 * ((NUM_HEIGHT_PTS * (NUM_WIDTH_PTS - 1)) +
+                                (NUM_WIDTH_PTS * (NUM_HEIGHT_PTS - 1))));
+
+    var positionsIndex = 0;
+    var indicesIndex = 0;
+    var length;
+
+    for (var j = 0; j < NUM_WIDTH_PTS; ++j){
+      positions[positionsIndex++] = j /(NUM_WIDTH_PTS - 1);
+      positions[positionsIndex++] = 0.0;
+
+      if (j>=1){
+        length = positionsIndex / 2;
+        indices[indicesIndex++] = length - 2;
+        indices[indicesIndex++] = length - 1;
+      }
+    }
+
+    for (var i = 0; i < HEIGHT_DIVISIONS; ++i){
+      var v = (i + 1) / (NUM_HEIGHT_PTS - 1);
+      positions[positionsIndex++] = 0.0;
+      positions[positionsIndex++] = v;
+
+      length = (positionsIndex / 2);
+      indices[indicesIndex++] = length - 1;
+      indices[indicesIndex++] = length - 1 - NUM_WIDTH_PTS;
+
+      for (var k = 0; k < WIDTH_DIVISIONS; ++k){
+        positions[positionsIndex++] = (k + 1) / (NUM_WIDTH_PTS - 1);
+        positions[positionsIndex++] = v;
+
+        length = positionsIndex / 2;
+        var new_pt = length - 1;
+        indices[indicesIndex++] = new_pt - 1;  // Previous side
+        indices[indicesIndex++] = new_pt;
+
+        indices[indicesIndex++] = new_pt - NUM_WIDTH_PTS;  // Previous bottom
+        indices[indicesIndex++] = new_pt;
+      }
+    }
+
+    uploadMesh(positions, heights, indices);
+    numberOfIndices = indices.length;
+}
+
+</script>
+
+</body>
+
+</html>
diff --git a/vert.png b/vert.png