Completed Project 5

frag_globe.html

@@ -60,6 +60,7 @@
     uniform sampler2D u_EarthSpec;
     //Bump map
     uniform sampler2D u_Bump;
+    uniform vec2 u_BumpResolution;
 
     uniform float u_time;
     uniform mat4 u_InvTrans;
@@ -73,8 +74,15 @@
 
     void main(void)
     {
-        // surface normal - normalized after rasterization
-        vec3 normal = normalize(v_Normal);
+        // Bump Mapping
+        float bumpCenter = texture2D(u_Bump, v_Texcoord).r;
+        float bumpTop = texture2D(u_Bump, v_Texcoord + vec2(0, 1.0 / u_BumpResolution.y)).r;
+        float bumpRight = texture2D(u_Bump, v_Texcoord + vec2(1.0 / u_BumpResolution.x, 0)).r;
+
+        vec3 bump_normal = normalize(vec3(bumpCenter - bumpRight, bumpCenter - bumpTop, 0.2));
+
+        vec3 normal = normalize(eastNorthUpToEyeCoordinates(v_positionMC, v_Normal) * bump_normal);
+
         // normalized eye-to-position vector in camera coordinates
         vec3 eyeToPosition = normalize(v_Position);
 
@@ -86,12 +94,43 @@
 
         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 dayTextureColor = texture2D(u_DayDiffuse, v_Texcoord).rgb;
+        vec3 nightTextureColor = texture2D(u_Night, v_Texcoord).rgb;
+
+        // Reads from a black-white specular map, white (1) = full specular, black (0) = none.
+        // Only reads the 'r' property because it should be grayscale.
+        float specularCoeff = texture2D(u_EarthSpec, v_Texcoord).r;
+
+        // Cloud Textures
+        vec2 cloud_Texcoord = vec2(v_Texcoord.s + u_time, v_Texcoord.t);
+        vec3 cloudTextureColor = texture2D(u_Cloud, cloud_Texcoord).rgb;
+
+        // Reads from a black-white transparency map, white (1) = transparent, black (0) = opaque.
+        // Only reads the 'r' property because it should be grayscale.
+        float cloudTrans = texture2D(u_CloudTrans, cloud_Texcoord).r;
+
+        // Compute shadows from clouds, based on light position with respect to cloud position.
+        // Currently *shouldn't* work for all cases, in theory it cloudDirection needs to be transformed into the 
+        //    coordinate space of the 
+        vec3 cloudDirection = v_Position - u_CameraSpaceDirLight; 
+        // The 100 is simply a hardcoded height value (lower values mean the clouds are higher).
+        float cloudShadow = texture2D(u_CloudTrans, cloud_Texcoord - cloudDirection.xy / 100.0).x;
+
+        // Kdiffuse = 0.6, Kspecular = 0.4.
+        float diffuseCoeff = 0.6 + 0.4 * (1.0 - specularCoeff);
+        specularCoeff *= 0.4;
+
+        // Calculate day colour with blinn-phong shading, and mix in cloud color and shadows.
+        vec3 dayColor = mix(cloudTextureColor, ((diffuseCoeff * diffuse) + (specularCoeff * specular)) * dayTextureColor * (cloudShadow / 2.0 + 0.5), cloudTrans);
+
+        // Apply gamma correction to nighttime texture, and mix in clouds (black)
+        vec3 nightColor = mix(vec3(0.0), pow(nightTextureColor,vec3(gammaCorrect)), cloudTrans);
 
-        vec3 color = ((0.6 * diffuse) + (0.4 * specular)) * dayColor;
+        float rimFactor = clamp(dot(v_Normal, v_Position) + 1.0, 0.0, 2.0);
+
+        // Currently using a full gradient mix with a more heavily-weighted night because I don't really like how it treats half the world as a flat plane
+        // Full dayColor until diffuse < 0.5, and full nightColor on the back of the sphere.
+        vec3 color = mix(dayColor, nightColor, clamp(1.0 - 2.0 * diffuse, 0.0, 1.0)) + vec3(rimFactor / 4.0, rimFactor / 3.0, rimFactor / 2.0);
         gl_FragColor = vec4(color, 1.0);
     }
 
@@ -111,6 +150,7 @@
     }
 </script>
 
+<script src ="js/stats/build/stats.min.js" type ="text/javascript"></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>

js/frag_globe.js

@@ -21,6 +21,10 @@
         return;
     }
 
+    var stats = new Stats();
+    stats.setMode(0);
+    document.body.appendChild(stats.domElement);
+
     ///////////////////////////////////////////////////////////////////////////
 
     gl.viewport(0, 0, canvas.width, canvas.height);
@@ -54,6 +58,7 @@
     var u_CloudTransLocation;
     var u_EarthSpecLocation;
     var u_BumpLocation;
+    var u_BumpResolutionLocation;
     var u_timeLocation;
 
     (function initializeShader() {
@@ -74,6 +79,7 @@
         u_CloudTransLocation = gl.getUniformLocation(program,"u_CloudTrans");
         u_EarthSpecLocation = gl.getUniformLocation(program,"u_EarthSpec");
         u_BumpLocation = gl.getUniformLocation(program,"u_Bump");
+        u_BumpResolutionLocation = gl.getUniformLocation(program, "u_BumpResolution");
         u_timeLocation = gl.getUniformLocation(program,"u_time");
         u_CameraSpaceDirLightLocation = gl.getUniformLocation(program,"u_CameraSpaceDirLight");
 
@@ -237,7 +243,8 @@
     function animate() {
         ///////////////////////////////////////////////////////////////////////////
         // Update
-
+        stats.end();
+        stats.begin();
         var model = mat4.create();
         mat4.identity(model);
         mat4.rotate(model, 23.4/180*Math.PI, [0.0, 0.0, 1.0]);
@@ -286,7 +293,9 @@
         gl.activeTexture(gl.TEXTURE5);
         gl.bindTexture(gl.TEXTURE_2D, specTex);
         gl.uniform1i(u_EarthSpecLocation, 5);
+        gl.uniform2f(u_BumpResolutionLocation, 1024, 512);
         gl.drawElements(gl.TRIANGLES, numberOfIndices, gl.UNSIGNED_SHORT,0);
+        gl.uniform1f(u_timeLocation, time);
 
         time += 0.001;
         window.requestAnimFrame(animate);

js/stats/src/Stats.js

@@ -0,0 +1,149 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+var Stats = function () {
+
+	var startTime = Date.now(), prevTime = startTime;
+	var ms = 0, msMin = Infinity, msMax = 0;
+	var fps = 0, fpsMin = Infinity, fpsMax = 0;
+	var frames = 0, mode = 0;
+
+	var container = document.createElement( 'div' );
+	container.id = 'stats';
+	container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
+	container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
+
+	var fpsDiv = document.createElement( 'div' );
+	fpsDiv.id = 'fps';
+	fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
+	container.appendChild( fpsDiv );
+
+	var fpsText = document.createElement( 'div' );
+	fpsText.id = 'fpsText';
+	fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
+	fpsText.innerHTML = 'FPS';
+	fpsDiv.appendChild( fpsText );
+
+	var fpsGraph = document.createElement( 'div' );
+	fpsGraph.id = 'fpsGraph';
+	fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
+	fpsDiv.appendChild( fpsGraph );
+
+	while ( fpsGraph.children.length < 74 ) {
+
+		var bar = document.createElement( 'span' );
+		bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
+		fpsGraph.appendChild( bar );
+
+	}
+
+	var msDiv = document.createElement( 'div' );
+	msDiv.id = 'ms';
+	msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
+	container.appendChild( msDiv );
+
+	var msText = document.createElement( 'div' );
+	msText.id = 'msText';
+	msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
+	msText.innerHTML = 'MS';
+	msDiv.appendChild( msText );
+
+	var msGraph = document.createElement( 'div' );
+	msGraph.id = 'msGraph';
+	msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
+	msDiv.appendChild( msGraph );
+
+	while ( msGraph.children.length < 74 ) {
+
+		var bar = document.createElement( 'span' );
+		bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
+		msGraph.appendChild( bar );
+
+	}
+
+	var setMode = function ( value ) {
+
+		mode = value;
+
+		switch ( mode ) {
+
+			case 0:
+				fpsDiv.style.display = 'block';
+				msDiv.style.display = 'none';
+				break;
+			case 1:
+				fpsDiv.style.display = 'none';
+				msDiv.style.display = 'block';
+				break;
+		}
+
+	};
+
+	var updateGraph = function ( dom, value ) {
+
+		var child = dom.appendChild( dom.firstChild );
+		child.style.height = value + 'px';
+
+	};
+
+	return {
+
+		REVISION: 12,
+
+		domElement: container,
+
+		setMode: setMode,
+
+		begin: function () {
+
+			startTime = Date.now();
+
+		},
+
+		end: function () {
+
+			var time = Date.now();
+
+			ms = time - startTime;
+			msMin = Math.min( msMin, ms );
+			msMax = Math.max( msMax, ms );
+
+			msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
+			updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
+
+			frames ++;
+
+			if ( time > prevTime + 1000 ) {
+
+				fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
+				fpsMin = Math.min( fpsMin, fps );
+				fpsMax = Math.max( fpsMax, fps );
+
+				fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
+				updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
+
+				prevTime = time;
+				frames = 0;
+
+			}
+
+			return time;
+
+		},
+
+		update: function () {
+
+			startTime = this.end();
+
+		}
+
+	}
+
+};
+
+if ( typeof module === 'object' ) {
+
+	module.exports = Stats;
+
+}