CIS565-Fall-2013 · n8xm · Nov 3, 2013 · Nov 3, 2013 · Nov 3, 2013 · Nov 3, 2013
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+*.swp
diff --git a/README.md b/README.md
diff --git a/part1/FUJI_cropped.png b/part1/FUJI_cropped.png
diff --git a/part1/RAINIER_cropped.png b/part1/RAINIER_cropped.png
diff --git a/part1/gl-matrix.js b/part1/gl-matrix.js
@@ -56,7 +56,6 @@
         if (typeof(Float32Array) != 'undefined') {
             var y = new Float32Array(1);
             var i = new Int32Array(y.buffer);
-
             /**
              * Fast way to calculate the inverse square root,
              * see http://jsperf.com/inverse-square-root/5

diff --git a/part1/index_simplex.html b/part1/index_simplex.html
@@ -0,0 +1,92 @@
+<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">
+    #extension GL_EXT_gpu_shader4 : enable 
+    attribute vec2 position;
+
+    uniform mat4 u_modelViewPerspective;
+    uniform float u_time;
+    varying vec3 curr_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)
+    {
+        vec3 low_color = vec3(1.0, 0.2, 0.0);
+        vec3 high_color = vec3(0.0, 0.8, 1.0);
+//        float t_contrib = cos(position.y*2.0*3.14159 + u_time);
+//       float s_contrib = sin(position.x*2.0*3.14159 + u_time);
+        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;
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0);
+        curr_color = mix(low_color, high_color, height);
+    }
+
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+    varying vec3 curr_color;
+
+    void main(void)
+    {
+		//gl_FragColor = vec4(vec3(0.0), 1.0);
+        gl_FragColor = vec4(curr_color, 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>
diff --git a/part1/mt_fuji_area.png b/part1/mt_fuji_area.png
diff --git a/part1/picogen_heightmap.png b/part1/picogen_heightmap.png
diff --git a/part1/simplex.vert b/part1/simplex.vert
@@ -36,4 +36,4 @@ float simplexNoise(vec2 v)
   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);
-}
+}
diff --git a/part1/terrain_render.html b/part1/terrain_render.html
@@ -0,0 +1,67 @@
+<html>
+
+<head>
+<title>NaTerrain WebGL Terrain Rendering</title>
+<meta charset ="utf-8">
+<meta http-equiv="X-UA-Compatible" content="chrome=1">  <!-- Use Chrome Frame in IE --> 
+</head>
+
+<body style="background-color:#000000">
+<div id="message" style="position:absolute;top:100px"></div> <!-- Pixel offset to avoid FPS counter -->
+<center>
+<canvas id="canvas" style="border: none;" width="1024" height="768" tabindex="1"></canvas>
+</center>
+
+<script id="vs" type="x-shader/x-vertex">
+    attribute vec2 position;
+
+    uniform mat4 u_modelViewPerspective;
+    uniform float u_heightBlend;
+    uniform sampler2D u_Height;
+    uniform sampler2D u_Height2;
+    varying vec3 curr_color;
+
+    void main(void)
+    {
+        vec3 low_color = vec3(1.0, 0.2, 0.0);
+        vec3 high_color = vec3(0.0, 0.8, 1.0);
+        vec2 texCoord = vec2(position.x, position.y);
+        float height1 = texture2D(u_Height, texCoord).r; 
+        float height2 = texture2D(u_Height2, texCoord).r; 
+        float height = mix(height1, height2, u_heightBlend); 
+		gl_Position = u_modelViewPerspective * vec4(vec3(position, 0.5*height), 1.0);
+        curr_color = mix(low_color, high_color, height);
+    }
+</script>
+
+<script id="fs" type="x-shader/x-fragment">
+    precision mediump float;
+    varying vec3 curr_color;
+
+    void main(void)
+    {
+		//gl_FragColor = vec4(vec3(0.0), 1.0);
+        gl_FragColor = vec4(curr_color, 1.0);
+    }    
+</script>
+
+<script src ="gl-matrix.js" type ="text/javascript"></script>
+<script src ="webGLUtility.js" type ="text/javascript"></script>
+<script src ="terrain_render.js" type ="text/javascript"></script>
+
+<script>
+function blendToZero(){
+    blendDir = -1;
+}
+function blendToOne(){
+    blendDir = 1;
+}
+</script>
+
+<center>
+<button onclick="blendToZero()">Mt. Fuji</button>
+<button onclick="blendToOne()">Mt. Rainier</button>
+</center>
+</body>
+
+</html>
diff --git a/part1/terrain_render.js b/part1/terrain_render.js
@@ -0,0 +1,211 @@
+var blendDir = -1.0;
+
+(function() {
+    "use strict";
+    /*global window,document,Float32Array,Uint16Array,mat4,vec3,snoise*/
+    /*global getShaderSource,createWebGLContext,createProgram*/
+
+    var NUM_WIDTH_PTS = 128;
+    var NUM_HEIGHT_PTS = 128;
+
+    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(0.0, 0.0, 0.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 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 positionLocation = 0;
+    var heightLocation = 1;
+    var u_modelViewPerspectiveLocation;
+    var u_heightLocation;
+    var u_heightLocation2;
+    var u_heightBlendLocation;
+
+    var terrainTex1;
+    var terrainIm1;
+    var terrainTex2;
+    var terrainIm2;
+
+    //from https://developer.mozilla.org/en-US/docs/Web/WebGL/Using_textures_in_WebGL
+    function initTextures() {
+        terrainTex1 = context.createTexture();
+        terrainIm1 = new Image();
+        terrainIm1.onload = function() { handleTextureLoaded(terrainIm1, terrainTex1); };
+        terrainIm1.src = "FUJI_cropped.png";
+
+        terrainTex2 = context.createTexture();
+        terrainIm2 = new Image();
+        terrainIm2.onload = function() { handleTextureLoaded(terrainIm2, terrainTex2); };
+        terrainIm2.src = "RAINIER_cropped.png";
+    }
+
+    function handleTextureLoaded(image, texture) {
+        context.bindTexture(context.TEXTURE_2D, texture);
+        context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, context.RGBA, context.UNSIGNED_BYTE, image);
+        context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MAG_FILTER, context.LINEAR);
+        context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MIN_FILTER, context.LINEAR_MIPMAP_NEAREST);
+        context.generateMipmap(context.TEXTURE_2D);
+        context.bindTexture(context.TEXTURE_2D, null);
+    }
+
+    (function initializeShader() {
+        initTextures();
+        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_heightLocation = context.getUniformLocation(program, "u_Height");
+        u_heightLocation2 = context.getUniformLocation(program, "u_Height2");
+        u_heightBlendLocation = context.getUniformLocation(program, "u_heightBlend");
+
+        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;
+    })();
+
+    var dt = 0.01;
+    var angle = 0.0;
+    var heightBlend = 0.0;
+
+    (function animate(){
+
+        heightBlend += blendDir*dt;
+        if(heightBlend < 0.0){
+            heightBlend = 0.0;
+        } else if(heightBlend > 1.0){
+            heightBlend = 1.0;
+        }
+        ///////////////////////////////////////////////////////////////////////////
+        // Update
+        angle = angle + 0.01;
+
+        var model = mat4.create();
+        mat4.identity(model);
+        mat4.rotate(model, angle, [0, 0, 1]);
+        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);
+
+        ///////////////////////////////////////////////////////////////////////////
+        // Render
+        context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);
+
+        context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp);
+        context.uniform1f(u_heightBlendLocation, heightBlend);
+
+        context.activeTexture(context.TEXTURE0);
+        context.bindTexture(context.TEXTURE_2D, terrainTex1);
+        context.uniform1i(u_heightLocation, 0); 
+
+        context.activeTexture(context.TEXTURE1);
+        context.bindTexture(context.TEXTURE_2D, terrainTex2);
+        context.uniform1i(u_heightLocation2, 1); 
+
+        //context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
+        context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0);
+
+		window.requestAnimFrame(animate);
+    })();
+
+}());