CIS565-Fall-2013 · vimanyu · Nov 5, 2013 · Nov 6, 2013 · Nov 6, 2013 · Nov 6, 2013
diff --git a/.vert_wave _custom.html.swp b/.vert_wave _custom.html.swp
diff --git a/README.md b/README.md
diff --git a/part1/.vert_wave _custom.html.swp b/part1/.vert_wave _custom.html.swp
diff --git a/part1/sky_negX.jpg b/part1/sky_negX.jpg
diff --git a/part1/sky_negY.jpg b/part1/sky_negY.jpg
diff --git a/part1/sky_negZ.jpg b/part1/sky_negZ.jpg
diff --git a/part1/sky_posX.jpg b/part1/sky_posX.jpg
diff --git a/part1/sky_posY.jpg b/part1/sky_posY.jpg
diff --git a/part1/sky_posZ.jpg b/part1/sky_posZ.jpg
diff --git a/part1/vert_wave.html b/part1/vert_wave.html
@@ -14,20 +14,29 @@
     attribute vec2 position;
 
     uniform mat4 u_modelViewPerspective;
-
+    uniform float u_time;
+    varying vec3 hColor;
     void main(void)
     {
-		float height = 0.0;
+		//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;
+
+		vec3 lowColor =vec3(0.0,1.0,0.0);
+		vec3 hiColor =vec3(0.0,0.0,1.0);
+		hColor = mix(lowColor,hiColor,height);
 		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
     }
 </script>
 
 <script id="fs" type="x-shader/x-fragment">
     precision mediump float;
-
+    varying vec3 hColor;
     void main(void)
     {
-		gl_FragColor = vec4(vec3(0.0), 1.0);
+		//gl_FragColor = vec4(vec3(0.0), 1.0);
+		gl_FragColor = vec4(hColor,1.0);
     }    
 </script>
 

diff --git a/part1/vert_wave.js b/part1/vert_wave.js
@@ -27,10 +27,12 @@
     var up = [0.0, 0.0, 1.0];
     var view = mat4.create();
     mat4.lookAt(eye, center, up, view);
+    var time = 0.0;
 
     var positionLocation = 0;
     var heightLocation = 1;
     var u_modelViewPerspectiveLocation;
+    var u_time;
 
     (function initializeShader() {
         var program;
@@ -40,6 +42,7 @@
 		var program = createProgram(context, vs, fs, message);
 		context.bindAttribLocation(program, positionLocation, "position");
 		u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective");
+        u_time = context.getUniformLocation(program,"u_time");
 
         context.useProgram(program);
     })();
@@ -137,12 +140,14 @@
         mat4.multiply(view, model, mv);
         var mvp = mat4.create();
         mat4.multiply(persp, mv, mvp);
-
+
+        time = time+0.001;
         ///////////////////////////////////////////////////////////////////////////
         // Render
         context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
 
         context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
+        context.uniform1f(u_time, time);
         context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
 
 		window.requestAnimFrame(animate);

diff --git a/part1/vert_wave_custom.html b/part1/vert_wave_custom.html
@@ -0,0 +1,57 @@
+<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 hColor;
+    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 xorigin = 0.48;
+        float yorigin = 0.48;
+        float freq = 40.0;
+        float radius = sqrt( (position.x-xorigin)*(position.x-xorigin) + (position.y-yorigin)*(position.y-yorigin));
+
+        float height = 0.0;
+        if (radius<0.5)
+        height = 0.5/u_time*sin(freq*radius - u_time);
+
+		//float height = s_contrib*t_contrib;
+
+		vec3 lowColor =vec3(0.0,1.0,0.0);
+		vec3 hiColor =vec3(0.0,0.0,1.0);
+		hColor = mix(lowColor,hiColor,height);
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+    varying vec3 hColor;
+    void main(void)
+    {
+		//gl_FragColor = vec4(vec3(0.0), 1.0);
+		gl_FragColor = vec4(hColor,1.0);
+    }    
+</script>
+
+<script src ="gl-matrix.js" type ="text/javascript"></script>
+<script src ="webGLUtility.js" type ="text/javascript"></script>
+<script src ="vert_wave_custom.js" type ="text/javascript"></script>
+</body>
+
+</html>
diff --git a/part1/vert_wave_custom.js b/part1/vert_wave_custom.js
@@ -0,0 +1,155 @@
+(function() {
+    "use strict";
+    /*global window,document,Float32Array,Uint16Array,mat4,vec3,snoise*/
+    /*global getShaderSource,createWebGLContext,createProgram*/
+
+    var NUM_WIDTH_PTS = 32;
+    var NUM_HEIGHT_PTS = 32;
+
+    var message = document.getElementById("message");
+    var canvas = document.getElementById("canvas");
+    var context = createWebGLContext(canvas, message);
+    if (!context) {
+        return;
+    }
+
+    ///////////////////////////////////////////////////////////////////////////
+
+    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, 5.0];
+    var center = [0.0, 0.0, 0.0];
+    var up = [0.0, 0.0, 1.0];
+    var view = mat4.create();
+    mat4.lookAt(eye, center, up, view);
+    var time = 1.0;
+
+    var positionLocation = 0;
+    var heightLocation = 1;
+    var u_modelViewPerspectiveLocation;
+    var u_time;
+
+    (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_time = context.getUniformLocation(program,"u_time");
+
+        context.useProgram(program);
+    })();
+
+    var heights;
+    var numberOfIndices;
+
+    (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.STATIC_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.STREAM_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;
+    })();
+
+    (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 = time+0.1;
+        ///////////////////////////////////////////////////////////////////////////
+        // Render
+        context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
+
+        context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
+        context.uniform1f(u_time, time);
+        context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
+
+		window.requestAnimFrame(animate);
+    })();
+
+}());
diff --git a/part1/vert_wave_custom_textured.html b/part1/vert_wave_custom_textured.html
@@ -0,0 +1,68 @@
+<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;
+    uniform vec2 u_rippleCenter;
+    varying vec3 hColor;
+    varying vec3 lookup;
+    varying vec2 texCoord;
+
+
+    void main(void)
+    {
+        //float amplitude = 0.5/u_time;
+        //float amplitude = 0.08*abs(sin(0.2*u_time));
+        float amplitude = 0.08;
+        float xorigin = u_rippleCenter.x;
+        float yorigin = u_rippleCenter.y;
+        float freq = 80.0;
+        float radius = sqrt( (position.x-xorigin)*(position.x-xorigin) + (position.y-yorigin)*(position.y-yorigin));
+
+        float height = 0.0;
+        if (radius<0.5)
+        height = amplitude*sin(freq*radius - u_time);
+
+		//float height = s_contrib*t_contrib;
+		vec3 hiColor =vec3(0.0,1.0,0.0);
+		vec3 lowColor =vec3(0.0,0.0,1.0);
+        texCoord = position.xy;
+		hColor = mix(lowColor,hiColor,height);
+        lookup = normalize(vec3(position,height) - vec3(xorigin,yorigin,-0.5));
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+    varying vec3 hColor;
+    uniform samplerCube u_cubeTex;
+    uniform sampler2D u_sphereTex;
+    varying vec3 lookup;
+    varying vec2 texCoord;
+    void main(void)
+    {
+        gl_FragColor = textureCube(u_cubeTex,lookup);
+        //gl_FragColor = texture2D(u_sphereTex,texCoord);
+		//gl_FragColor = vec4(hColor,1.0);
+    }    
+</script>
+
+<script src ="gl-matrix.js" type ="text/javascript"></script>
+<script src ="webGLUtility.js" type ="text/javascript"></script>
+<script src ="vert_wave_custom_textured.js" type ="text/javascript"></script>
+</body>
+
+</html>