CIS565-Fall-2013 · wuhao1117 · Nov 3, 2013 · Nov 3, 2013 · Nov 8, 2013 · Nov 8, 2013
diff --git a/README.md b/README.md
diff --git a/images/Simplex_Wave.png b/images/Simplex_Wave.png
diff --git a/images/Sine_Wave.png b/images/Sine_Wave.png
diff --git a/images/globe.png b/images/globe.png
diff --git a/images/globe_night_lights.png b/images/globe_night_lights.png
diff --git a/images/globe_shadow.png b/images/globe_shadow.png
diff --git a/images/heightFieldWater.png b/images/heightFieldWater.png
diff --git a/part1/custom_wave.html b/part1/custom_wave.html
@@ -0,0 +1,122 @@
+<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 color;
+
+    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);
+    }
+
+    float rand(vec2 co){
+        return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
+    }
+
+    void main(void)
+    {
+        float s_contrib;
+        float t_contrib;
+        float height;
+        for(int i = 1; i < 8; ++i)
+        {
+            s_contrib = sin(position.x*2.0*3.14159*float(i) );
+            t_contrib = cos(position.y*2.0*3.14159*float(i) );
+            height += 0.01*simplexNoise(vec2(s_contrib+ u_time*rand(position), t_contrib+ u_time*rand(position)));
+        }
+
+
+        color = mix(vec3(1.0, 0.2, 0.0), vec3(0.0, 0.8, 1.0), (height+0.01)/2.0);
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+    varying vec3 color;
+
+    void main(void)
+    {
+		gl_FragColor = vec4(color, 1.0);
+    }    
+</script>
+<script>
+    var elapsedTime = 0;
+    var frameCount = 0;
+    var lastTime = 0;
+
+    function drawScene() {
+
+        // draw scene here
+        var now = new Date().getTime();
+        frameCount++;
+        elapsedTime += (now - lastTime);
+        lastTime = now;
+        if (elapsedTime >= 1000) {
+            fps = frameCount;
+            frameCount = 0;
+            elapsedTime -= 1000;
+            document.getElementById('test').innerHTML = fps;
+        }
+    }
+    lastTime = new Date().getTime();
+    setInterval(drawScene, 33);
+
+</script>
+<div id="test"></div>
+<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/simplex_wave.html b/part1/simplex_wave.html
@@ -0,0 +1,116 @@
+<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 color;
+
+    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);
+    }
+
+    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;
+
+        color = mix(vec3(1.0, 0.2, 0.0), vec3(0.0, 0.8, 1.0), (height+1.0)/2.0);
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+
+
+
+
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+    varying vec3 color;
+
+    void main(void)
+    {
+		gl_FragColor = vec4(color, 1.0);
+    }    
+</script>
+<script>
+    var elapsedTime = 0;
+    var frameCount = 0;
+    var lastTime = 0;
+
+    function drawScene() {
+
+       // draw scene here
+       var now = new Date().getTime();
+       frameCount++;
+       elapsedTime += (now - lastTime);
+       lastTime = now;
+       if(elapsedTime >= 1000) {
+           fps = frameCount;
+           frameCount = 0;
+           elapsedTime -= 1000;
+           document.getElementById('test').innerHTML = fps;
+       }
+    }
+    lastTime = new Date().getTime();
+    setInterval(drawScene, 33);
+
+</script>
+<div id="test"></div>
+<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.html b/part1/vert_wave.html
@@ -14,23 +14,55 @@
     attribute vec2 position;
 
     uniform mat4 u_modelViewPerspective;
-
+    uniform float u_time;
+
+    varying vec3 color;
+
     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;
+
+        color = mix(vec3(1.0, 0.2, 0.0), vec3(0.0, 0.8, 1.0), (height+1.0)/2.0);
 		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
     }
 </script>
 
 <script id="fs" type="x-shader/x-fragment">
     precision mediump float;
 
+    varying vec3 color;
+
     void main(void)
     {
-		gl_FragColor = vec4(vec3(0.0), 1.0);
+		gl_FragColor = vec4(color, 1.0);
     }    
 </script>
+<script>
+    var elapsedTime = 0;
+    var frameCount = 0;
+    var lastTime = 0;
 
+    function drawScene() {
+
+        // draw scene here
+        var now = new Date().getTime();
+        frameCount++;
+        elapsedTime += (now - lastTime);
+        lastTime = now;
+        if (elapsedTime >= 1000) {
+            fps = frameCount;
+            frameCount = 0;
+            elapsedTime -= 1000;
+            document.getElementById('test').innerHTML = fps;
+        }
+    }
+    lastTime = new Date().getTime();
+    setInterval(drawScene, 33);
+
+</script>
+<div id="test"></div>
 <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>