565 Submission : Ishaan Singh

part1/vert_wave.html

@@ -12,22 +12,33 @@
 
 <script id="vs" type="x-shader/x-vertex">
     attribute vec2 position;
-
+    uniform float u_time;
     uniform mat4 u_modelViewPerspective;
 
+	varying vec4 vs_color;
+
+	vec4 color_hi = vec4(0.25,0.85,0.65,1.0);
+	vec4 color_lo = vec4(0.85,0.65,0.25,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;
+
+		vs_color = mix(color_lo,color_hi,height);
+
 		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
     }
 </script>
 
 <script id="fs" type="x-shader/x-fragment">
     precision mediump float;
+	varying vec4 vs_color;
 
     void main(void)
     {
-		gl_FragColor = vec4(vec3(0.0), 1.0);
+		gl_FragColor = vs_color;//vec4(vec3(0.0), 1.0);
     }    
 </script>
 

part1/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 = 256;
+    var NUM_HEIGHT_PTS = 256;
 
     var message = document.getElementById("message");
     var canvas = document.getElementById("canvas");
@@ -18,20 +18,98 @@
     context.viewport(0, 0, canvas.width, canvas.height);
     context.clearColor(1.0, 1.0, 1.0, 1.0);
     context.enable(context.DEPTH_TEST);
-
+	
     var persp = mat4.create();
     mat4.perspective(45.0, 0.5, 0.1, 100.0, persp);
 
-    var eye = [2.0, 1.0, 3.0];
+    //var eye = [2.0, 1.0, 3.0];
+	var theta = 45; // 0 - 180
+	var phi = 45; 	// 0 - 360
+	var radius = 3.741657;
     var center = [0.0, 0.0, 0.0];
+	var eye = [ radius * Math.sin(theta) * Math.cos(phi), radius * Math.sin(theta) * Math.sin(phi), radius * Math.cos(theta) ]; 
     var up = [0.0, 0.0, 1.0];
     var view = mat4.create();
     mat4.lookAt(eye, center, up, view);
 
     var positionLocation = 0;
     var heightLocation = 1;
     var u_modelViewPerspectiveLocation;
-
+	var u_timeLocation;
+
+	var leftMouseDown = false;
+	var rightMouseDown = false;
+	var lastMouseX = null;
+	var lastMouseY = null;
+
+	var moonRotationMatrix = mat4.create();
+	mat4.identity(moonRotationMatrix);
+
+	function handleMouseDown(event) {
+
+		if(event.button == 2)
+		{
+			leftMouseDown = false;
+			rightMouseDown = true;
+		}
+		else
+		{
+			leftMouseDown = true;
+			rightMouseDown = false;
+		} 
+		lastMouseX = event.clientX;
+		lastMouseY = event.clientY;
+	}
+
+	function handleMouseUp(event) {
+		leftMouseDown = false;
+		rightMouseDown = false;
+	}
+
+	function handleMouseMove(event) {
+		if (!leftMouseDown && !rightMouseDown) {
+		  return;
+		}
+		var newX = event.clientX;
+		var newY = event.clientY;
+
+		var deltaX = newX - lastMouseX;
+		var deltaY = newY - lastMouseY;
+
+		if(leftMouseDown)
+		{
+			phi = phi - deltaX * 0.003;
+
+			theta = theta - deltaY * 0.005;
+
+			if(theta < 0)
+				theta = 0.0001;
+			else if(theta > 180)
+				theta = 179.9999;
+		}
+		else
+		{
+			mouseCam.rad -= (0.001*diffy);
+			if(mouseCam.rad < 0.3)
+				mouseCam.rad = 0.3;
+		}
+
+		eye = [ radius * Math.sin(theta) * Math.cos(phi), radius * Math.sin(theta) * Math.sin(phi), radius * Math.cos(theta) ]; 
+		mat4.lookAt(eye, center, up, view);
+
+		lastMouseX = newX
+		lastMouseY = newY;
+	}
+
+	canvas.onmousedown = handleMouseDown;
+	canvas.oncontextmenu = function(ev) {return false;};
+	document.onmouseup = handleMouseUp;
+	document.onmousemove = handleMouseMove;	
+
+	var u_HeightLocation;
+	var u_ColorLocation;
+
+
     (function initializeShader() {
         var program;
         var vs = getShaderSource(document.getElementById("vs"));
@@ -41,6 +119,11 @@
 		context.bindAttribLocation(program, positionLocation, "position");
 		u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
 
+		u_timeLocation = context.getUniformLocation(program, "u_time");
+
+		u_HeightLocation = context.getUniformLocation(program, "u_htTex");
+		u_ColorLocation = context.getUniformLocation(program, "u_clTex");
+
         context.useProgram(program);
     })();
 
@@ -125,11 +208,49 @@
         uploadMesh(positions, heights, indices);
         numberOfIndices = indices.length;
     })();
+
+	var htTex = context.createTexture();
+	var clTex = context.createTexture();
+
+
+    (function initTextures() {	
+        function initLoadedTexture(texture){
+            context.bindTexture(context.TEXTURE_2D, texture);
+            context.pixelStorei(context.UNPACK_FLIP_Y_WEBGL, false);
+            context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, context.RGBA, 
+                               context.UNSIGNED_BYTE, texture.image);
+            context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MAG_FILTER, 
+                                  context.LINEAR);
+            context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MIN_FILTER, 
+                                  context.LINEAR);
+            context.texParameteri(context.TEXTURE_2D, context.TEXTURE_WRAP_S, 
+                                  context.REPEAT);
+            context.texParameteri(context.TEXTURE_2D, context.TEXTURE_WRAP_T, 
+                                  context.REPEAT);
+            context.bindTexture(context.TEXTURE_2D, null);
+        }
+
+        function initializeTexture(texture, src) {
+            texture.image = new Image();
+            texture.image.onload = function() {
+                initLoadedTexture(texture);
+            }
+             texture.image.src = src;
+        }
 
+        initializeTexture(htTex, "tile_noise.jpg");
+        //initializeTexture(clTex, "PUT_COLORTEX_NAME.png");
+    })();
+
+
     (function animate(){
         ///////////////////////////////////////////////////////////////////////////
         // Update
-
+
+		var d = new Date();
+		var millisec = 1000* (60 * d.getMinutes()  + d.getSeconds()) + d.getMilliseconds();
+		var time = 1.0/1000 * millisec;
+
         var model = mat4.create();
         mat4.identity(model);
         mat4.translate(model, [-0.5, -0.5, 0.0]);
@@ -142,7 +263,14 @@
         // Render
         context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
 
+		context.uniform1f(u_timeLocation, time);
+		//time = 0.1f;
+
         context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
+
+		context.activeTexture(context.TEXTURE0);
+        context.bindTexture(context.TEXTURE_2D, htTex);
+
         context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
 
 		window.requestAnimFrame(animate);

part1/vert_wave_height.html

@@ -0,0 +1,166 @@
+<html>
+
+<head>
+<title>Infinitely tiled, pseudo random terrain</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;
+	uniform sampler2D u_htTex;
+
+	varying vec4 vs_color;
+	varying vec2 vs_TexCoord;
+
+	vec4 color_hi = vec4(0.25,0.85,0.65,1.0);
+	vec4 color_lo = vec4(0.85,0.65,0.25,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);
+	}
+
+	vec4 colorRamp(float height)
+	{
+		vec3 color = vec3(1.0,1.0,1.0);
+
+		// Constants
+		vec3 DeepWater 		= vec3(0.000,0.000,0.500);
+		vec3 ShallowWater 	= vec3(0.000,0.000,1.000);
+		vec3 Shore 			= vec3(0.000,0.500,1.000);
+		vec3 Sand 			= vec3(0.741,0.641,0.251);
+		vec3 Grass			= vec3(0.125,0.627,0.000);
+		vec3 Dirt			= vec3(0.778,0.478,0.000);
+		vec3 Rock			= vec3(0.500,0.500,0.500);
+		vec3 Snow			= vec3(1.000,1.000,1.000);
+
+		if(height <  -0.25)
+		{
+			float alpha = (height - -1.0) / (-0.25 - -1.0);
+			color = mix(DeepWater,ShallowWater,alpha);
+		}
+		else if(height < 0.0)
+		{
+			float alpha = (height - -0.25) / (0.0 - -0.25);
+			color = mix(ShallowWater,Shore,alpha);
+		}
+		else if(height < 0.0625)
+		{
+			float alpha = (height - 0.0) / (0.0625 - 0.0);
+			color = mix(Shore,Sand,alpha);
+		}
+		else if(height < 0.125)
+		{
+			float alpha = (height - 0.0625) / (0.125 - 0.0625);
+			color = mix(Sand,Grass,alpha);
+		}
+		else if(height < 0.375)
+		{
+			float alpha = (height - 0.125) / (0.375 - 0.125);
+			color = mix(Grass,Dirt,alpha);
+		}
+		else if(height < 0.75)
+		{
+			float alpha = (height - 0.375) / (0.75 - 0.375);
+			color = mix(Dirt,Rock,alpha);
+		}
+		else if(height < 1.0)
+		{
+			float alpha = (height - 0.75) / (1.0 - 0.75);
+			color = mix(Rock,Snow,alpha);
+		}
+
+		return vec4(color,1.0);
+	}
+
+    void main(void)
+    {
+		//float offset = 0.00;
+		float offset = 0.05 * u_time;
+		vs_TexCoord = vec2(position.x + offset,position.y + offset);
+
+		vec2 simplexVec = vs_TexCoord;
+		float s_contrib = simplexNoise(simplexVec);
+		//float t_contrib = s_contrib;
+		float t_contrib = simplexNoise(vec2(s_contrib,0.1 * u_time));
+
+		float scale = 0.1;		
+
+		float height = 2.0*(texture2D(u_htTex, vs_TexCoord).x) - 1.0;
+
+		height += 1.0 * s_contrib;
+
+		//if(height < -0.1)
+		//	height -= clamp(t_contrib,0.0,1.0);
+
+		height = clamp(height, -1.0,1.0);
+
+		vs_color = colorRamp(height);
+
+		scale *= height;
+
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, scale), 1.0);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+	varying vec4 vs_color;
+	varying vec2 vs_TexCoord;
+	uniform sampler2D u_htTex;
+
+    void main(void)
+    {
+		gl_FragColor = vs_color;//vec4(vec3(0.0), 1.0);
+		//gl_FragColor = texture2D(u_htTex, vs_TexCoord);
+    }    
+</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>