From 63a80c908d9bc52dc056185b6f96d2d77e71edac Mon Sep 17 00:00:00 2001
From: Julian <julian.niessner@rismer.de>
Date: Fri, 24 Jan 2020 13:27:38 +0100
Subject: [PATCH] perlin noise rendered as a texture.

---
 index.html  |  4 ++--
 src/main.ts | 40 ++++++++++++++++++++++++----------------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index d31d187..d61910b 100644
--- a/index.html
+++ b/index.html
@@ -92,8 +92,8 @@
         uniform sampler2D u_texture;
 
         void main(void) {
-            //gl_FragColor = texture2D(u_texture, v_uv);
-            gl_FragColor = vec4(0.0,0.0,1.0,1.0);
+            gl_FragColor = texture2D(u_texture, v_uv);
+            //gl_FragColor = vec4(0.0,0.0,1.0,1.0);
         }
     </script>
     <script id="ndc-vs" type="x-shader/x-vertex">
diff --git a/src/main.ts b/src/main.ts
index 381d4e2..1463282 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -24,6 +24,10 @@ function initGL(canvas: HTMLCanvasElement) {
     gl = <WebGLRenderingContext>gltemp;
 }
 
+function genereateGrid(precision: number) {
+    
+}
+
 /** Init Geomtry for an Triangle */
 var VBO: WebGLBuffer | null = null;
 function initGeometry() {
@@ -138,21 +142,24 @@ function initShaders() {
 
 /** Init an FBO used for the first render pass / perlin noise */
 var perlinNoiseFBO: WebGLFramebuffer | null = null;
-var perlinNoiseFBOWidth = 400;
-var ferlinNoiseFBOHeight = 400;
+var textureFBO : WebGLTexture | null = null;
+var perlinNoiseFBOWidth = 256;
+var ferlinNoiseFBOHeight = 256;
 function initFBO() {
     perlinNoiseFBO = gl.createFramebuffer();
     gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
 
     // Add attachments
-    let tex = gl.createTexture();
-    gl.bindTexture(gl.TEXTURE_2D, tex);
+    textureFBO = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, textureFBO);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RGB, gl.UNSIGNED_BYTE, null);
 
+    // set the filtering so we don't need mips
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 
-    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureFBO, 0);
 
     if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
         console.log("Framebuffer creation failed.");
@@ -184,8 +191,8 @@ function drawScene() {
 
 
     //--- First render pass -> Perlin Noise ---
-    {/*
-        gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO); //TODO: Fix me
+    {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
         gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight);
 
         //Clear buffer content
@@ -193,7 +200,7 @@ function drawScene() {
         gl.clear(gl.COLOR_BUFFER_BIT); //No depth buffer
 
         //draw a fullscreen quad
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
 
         // There are 7 floating-point values per vertex
         let stride = 5 * Float32Array.BYTES_PER_ELEMENT;
@@ -202,23 +209,24 @@ function drawScene() {
         gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
         gl.enableVertexAttribArray(0);
         gl.vertexAttribPointer(1, 2, gl.FLOAT, false, stride, 3 * Float32Array.BYTES_PER_ELEMENT);
-        gl.enableVertexAttribAray(1);
+        gl.enableVertexAttribArray(1);
 
-        gl.useProgram(program);
-        let uTime = gl.getUniformLocation(program, "uTime");
+        gl.useProgram(perlinNoiseProgram);
+        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 ---
-    {
+    { 
         gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Bind default framebuffer
-
         gl.viewport(0, 0, viewportWidth, viewportHeight);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
 
+        gl.bindTexture(gl.TEXTURE_2D, textureFBO);
+
         // There are 7 floating-point values per vertex
         let stride = 5 * Float32Array.BYTES_PER_ELEMENT;