From 119dbd2053d7b69230412264d83bc9af6216df01 Mon Sep 17 00:00:00 2001
From: Julian <julian.niessner@rismer.de>
Date: Fri, 24 Jan 2020 21:51:37 +0100
Subject: [PATCH] waving grid by perlin noise

---
 index.html  |  5 ++++-
 src/main.ts | 24 ++++++++++++------------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 8710501..e9463e1 100644
--- a/index.html
+++ b/index.html
@@ -104,9 +104,12 @@
 
             uniform mat4 MVP;
             uniform float uTime;
+            uniform sampler2D displace_map;
          
             void main(void) {
-                gl_Position = MVP * vec4(positionAttr.x,positionAttr.y,positionAttr.z + cos(positionAttr.x*8. + uTime * 0.001), 1.0);
+                vec4 displace = texture2D(displace_map, vec2(positionAttr.x,positionAttr.y));
+                gl_Position = MVP * vec4(positionAttr.x,positionAttr.y,positionAttr.z + displace.x, 1.0);
+                gl_PointSize = 10.;
             }
         </script>
 </header>
diff --git a/src/main.ts b/src/main.ts
index 5e2fd1d..a321e61 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -40,7 +40,6 @@ function generateGrid(N: number) {
             gridVertices.push(y);
             gridVertices.push(z);
 
-            //Generate Indices
             if (i < N && j < N) //Skip edges
             {
                 let row1 = j * (N + 1);
@@ -61,7 +60,7 @@ function generateGrid(N: number) {
 }
 var gridVAO: WebGLVertexArrayObject | null = null;
 function initGridVAO() {
-    generateGrid(16);
+    generateGrid(64);
 
     gridVAO = gl.createVertexArray();
     gl.bindVertexArray(gridVAO);
@@ -76,6 +75,7 @@ function initGridVAO() {
 
     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
     gl.enableVertexAttribArray(0);
+    gl.bindVertexArray(null);
 }
 
 /** Init Geomtry for an Triangle */
@@ -239,14 +239,13 @@ function drawScene() {
     // texture. Second one uses the textur for vertex displacement 
     // of a grid representing the water surface.
 
-
     //--- First render pass -> Perlin Noise (it updates the perlin noise texture)
-    /*{
+    {
         gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
         gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight);
 
         //Clear buffer content
-        gl.clearColor(0, 1, 0, 1);
+        gl.clearColor(0.25, .89, 0.32, 1);
         gl.clear(gl.COLOR_BUFFER_BIT); //No depth buffer
 
         //draw a fullscreen quad
@@ -265,7 +264,7 @@ function drawScene() {
         let uTime = gl.getUniformLocation(<WebGLProgram>perlinNoiseProgram, "uTime");
         gl.uniform1f(uTime, timeSpent);
         gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw quadr
-    }*/
+    }
 
     //--- Second render pass -> Geomtry with displacement by perlin noise texture ---
     {
@@ -274,29 +273,30 @@ function drawScene() {
 
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-        //gl.bindTexture(gl.TEXTURE_2D, textureFBO); //Binds the texture
+        gl.activeTexture(gl.TEXTURE0); //Binds the texture to 0
+        gl.bindTexture(gl.TEXTURE_2D, textureFBO);
 
         var mvp = mat4.create();
         mat4.identity(mvp);
         mat4.perspective(mvp, 1.5, viewportWidth / viewportHeight, 0.1, 1000.);
 
-
-        // mat4.rotateY(mvp, mvp, timeSpent * 0.001);
-        //mat4.rotateX(mvp, mvp, 1.5);
-
         let translation = vec3.create();
         vec3.set(translation, -0.5, 0.0, -2.0);
         mat4.translate(mvp, mvp, translation);
         mat4.rotateX(mvp, mvp, 1.5);
 
-        
+        //mat4.rotateY(mvp, mvp, timeSpent * 0.001);
+
         gl.useProgram(textureProgram);
         let mvp_loc = gl.getUniformLocation(<WebGLProgram>textureProgram, "MVP");
         gl.uniformMatrix4fv(mvp_loc, false, mvp);
         let uTime_loc = gl.getUniformLocation(<WebGLProgram>textureProgram, "uTime");
         gl.uniform1f(uTime_loc, timeSpent);
+        let displacementMap_loc = gl.getUniformLocation(<WebGLProgram>textureProgram, "displace_map");
+        gl.uniform1i(displacementMap_loc, 0); //Get texture from slot 0
         gl.bindVertexArray(gridVAO);
         gl.drawElements(gl.TRIANGLES, gridIndices.length, gl.UNSIGNED_INT, 0);
+        gl.bindVertexArray(null);
     }
     requestAnimationFrame(drawScene);
 }