Submission

README.md.bak

@@ -0,0 +1,79 @@
+-------------------------------------------------------------------------------
+CIS565: Project 5: WebGL
+-------------------------------------------------------------------------------
+Fall 2013
+-------------------------------------------------------------------------------
+
+-------------------------------------------------------------------------------
+INTRODUCTION:
+-------------------------------------------------------------------------------
+There are 2 projects, both based on WebGL and shaded with glsl.
+
+The first one is a shader for a grid that is waving with some kinds of function. The first one is a sin function, the second one is a random wave, the third one is a strange wave using some kinds of function.
+
+The theme of the 2nd project is to real-time render a rotating globe which is illuminated by sunshine. With the height map of the globe given, the globe is shaded so that it looks like
+ a globe with mountain scattered on it. Also, I made a simple noise-based water shader to shade the ocean.
+
+
+-------------------------------------------------------------------------------
+PART 1
+-------------------------------------------------------------------------------
+The first 2 grids are just following the walkthrough. Nothing special, just play with the color.
+
+The 3rd grid follows the rule:
+
+			float s_contrib = sin(position.x*4.0*3.14159 + u_time*4.0);
+			float t_contrib = cos(position.y*1.0*3.14159 + u_time*0.5*4.0);
+			float height = s_contrib+t_contrib;
+
+I don't quite know what it does....
+
+-------------------------------------------------------------------------------
+PART 2 
+-------------------------------------------------------------------------------
+Besides the basic part, I implemented water shader and the height shader. 
+
+For the height shader, I used a rainbow color-ramp to shade the different height. The lower part is more tends to be blue, while the higher part is more tends to be red.
+It looks like this:
+![Height Map](https://github.com/heguanyu/WebGL-Globe/blob/master/results/height.jpg?raw=true)
+
+Also, I add a noise texture and using it to fulfill the water shader. To implement this, I distort the origin normal according to the color value of the noise map. And to make the ocean floating, 
+I move the texture coordination randomly. It is not a procedural water shader, and not that real.
+
+![Water](https://github.com/heguanyu/WebGL-Globe/blob/master/results/height.jpg?raw=true)
+
+For the future work, I would still like to try skybox at the background.
+
+-------------------------------------------------------------------------------
+LINK
+-------------------------------------------------------------------------------
+
+Part1: http://guanyuhe.com/WebGL-Wave/index.html
+
+Part2: http://guanyuhe.com/WebGL-Globe/index.html
+
+-------------------------------------------------------------------------------
+GH-PAGES
+-------------------------------------------------------------------------------
+I'd tried my best with gh-pages but it have sth wrong when updated. Therefore, I had to put it on the my personal website. It is interesting that when I put it on the website instead of running on local machine,
+ the Globe one work on Chrome again!
+
+-------------------------------------------------------------------------------
+VIDEO
+-------------------------------------------------------------------------------
+The project is lived on the link above, so I don't think a video is required.
+
+-------------------------------------------------------------------------------
+PERFORMANCE EVALUATION
+-------------------------------------------------------------------------------
+I got no idea how to test fps for it... And as the there's not a conception as tilesize in cuda, got no idea on what to test for this project. Actually everythign is running in real time.
+
+But one thing that I noticed is that when I open my globe on multiple tabs, the web browser is becoming laggy. Is this a kind of evaluation? 
+
+-------------------------------------------------------------------------------
+THIRD PARTY CODE POLICY
+-------------------------------------------------------------------------------
+None. 
+
+Just to mention, for the rainbow color ramp, I referred to my own code from my bachelor's thesis project.
+

part1/index.html

@@ -0,0 +1,16 @@
+<html>
+
+<head>
+<title>BASIC SIN WAVE</title>
+<meta charset ="utf-8">
+<meta http-equiv="X-UA-Compatible" content="chrome=1">  <!-- Use Chrome Frame in IE --> 
+</head>
+
+<body>
+
+<a href="vert_wave.html">Go to the Sine Wave</a></br>
+<a href="simplex.html">Go to the Simplex Wave</a></br>
+<a href="mixsine.html">Go to the Customized Wave</a></br>
+</body>
+
+</html>

part1/index.html.bak

@@ -0,0 +1,16 @@
+<html>
+
+<head>
+<title>BASIC SIN WAVE</title>
+<meta charset ="utf-8">
+<meta http-equiv="X-UA-Compatible" content="chrome=1">  <!-- Use Chrome Frame in IE --> 
+</head>
+
+<body>
+
+<a href="vert_wave.html">Go to the Sine Wave</a>
+<a href="simplex.html">Go to the Simplex Wave</a>
+<a href="mixsine.html">Go to the Customized Wave</a>
+</body>
+
+</html>

part1/mixsine.html

@@ -0,0 +1,53 @@
+<html>
+
+<head>
+<title>MIXER SIN WAVE</title>
+<meta charset ="utf-8">
+<meta http-equiv="X-UA-Compatible" content="chrome=1">  <!-- Use Chrome Frame in IE --> 
+</head>
+
+<body>
+<p style="font-size:30px">This is the customized wave, the function is sin(4PiX+4t)+cos(Piy+2t)</p>
+<a href="index.html">Go Back to Main Page</a></br>
+
+<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 float theheight;
+
+
+    void main(void)
+    {
+		  float s_contrib = sin(position.x*4.0*3.14159 + u_time*4.0);
+			float t_contrib = cos(position.y*1.0*3.14159 + u_time*0.5*4.0);
+			float height = s_contrib+t_contrib;
+			theheight=height;
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+
+
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+		varying float theheight;
+
+    void main(void)
+    {
+    	vec3 outcolor=vec3(0.0,1.0,0.0)*(1.0-theheight)*0.5+vec3(0.0,0.0,1.0)*(theheight+0.1)*0.5;
+			gl_FragColor = vec4(outcolor, 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>

part1/mixsine.html.bak

@@ -0,0 +1,53 @@
+<html>
+
+<head>
+<title>MIXER SIN WAVE</title>
+<meta charset ="utf-8">
+<meta http-equiv="X-UA-Compatible" content="chrome=1">  <!-- Use Chrome Frame in IE --> 
+</head>
+
+<body>
+<p style="font-size:30px">This is the customized wave, the function is sin(t)+cos(t/2)</p>
+<a href="index.html">Go Back to Main Page</a></br>
+
+<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 float theheight;
+
+
+    void main(void)
+    {
+		  float s_contrib = sin(position.x*4.0*3.14159 + u_time*4.0);
+			float t_contrib = cos(position.y*1.0*3.14159 + u_time*0.5*4.0);
+			float height = s_contrib+t_contrib;
+			theheight=height;
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+
+
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+		varying float theheight;
+
+    void main(void)
+    {
+    	vec3 outcolor=vec3(0.0,1.0,0.0)*(1.0-theheight)*0.5+vec3(0.0,0.0,1.0)*(theheight+0.1)*0.5;
+			gl_FragColor = vec4(outcolor, 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>

part1/simplex.html

@@ -0,0 +1,91 @@
+<html>
+
+<head>
+<title>Random Noise Wave</title>
+<meta charset ="utf-8">
+<meta http-equiv="X-UA-Compatible" content="chrome=1">  <!-- Use Chrome Frame in IE --> 
+</head>
+
+<body>
+<p style="font-size:30px">This is the simplex wave</p>
+<a href="index.html">Go Back to Main Page</a></br>
+<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 float theheight;
+
+		vec3 permute(vec3 x) {
+		  x = ((x*34.0)+1.0)*x;
+		  return x - floor(x * (1.0 / 289.0)) * 289.0;
+		}
+
+		float snoise(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 = snoise(simplexVec);
+			float t_contrib = snoise(vec2(s_contrib,u_time));
+
+			float height = s_contrib*t_contrib;
+			theheight=height;
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+		varying float theheight;
+
+    void main(void)
+    {
+    	vec3 outcolor=vec3(0.0,1.0,0.0)*(1.0-theheight)*0.5+vec3(0.0,0.0,1.0)*(theheight+0.1)*0.5;
+			gl_FragColor = vec4(outcolor, 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>