From b35596fa55e16f4a4a8be3f937371e3414c0615b Mon Sep 17 00:00:00 2001
From: Julian <julian.niessner@rismer.de>
Date: Thu, 23 Jan 2020 14:04:30 +0100
Subject: [PATCH] replace triangle with quad

---
 src/main.ts | 101 ++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 86 insertions(+), 15 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 1c16b10..46ff1f5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,7 @@ var gl: WebGLRenderingContext;
 var viewportWidth = 0;
 var viewportHeight = 0;
 
+/** Init OpenGL and gets the viewport/canvas sizes */
 function initGL(canvas: HTMLCanvasElement) {
     var gltemp;
     try {
@@ -23,17 +24,24 @@ function initGL(canvas: HTMLCanvasElement) {
     gl = <WebGLRenderingContext>gltemp;
 }
 
+/** Init Geomtry for an Triangle */
 function initGeometry() {
     let VBO = gl.createBuffer();
-    let vertexData = [-1.0, -1.0, 0.0,
-        1.0, -1.0, 0.0,
-        0.0, 1.0, 0.0];
+    //Vertex data represent fullscreen quad in NDC-Space
+    let vertexData = [-1.0, -1.0, 0.0, //BOTTOM LEFT
+        1.0, -1.0, 0.0, //BOTTOM RIGHT
+    -1.0, 1.0, 0.0, // TOP LEFT
+        1.0, -1.0, 0.0, //BOTTOM RIGHT
+    -1.0, 1.0, 0.0, // TOP LEFT
+        1.0, 1.0, 0.0, // TOP RIGHT
+    ];
 
     gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
     return VBO;
 }
 
+/**  Get shader source by HTML-Element<id> */
 function getShader(id: string) {
     var script: any = document.getElementById(id);
     if (!script) {
@@ -67,6 +75,7 @@ function getShader(id: string) {
     return shader;
 }
 
+/** Init all Shaders that are needed */
 function initShaders() {
     var vertexShader = getShader("shader-vs");
     var fragmentShader = getShader("shader-fs");
@@ -97,25 +106,86 @@ function initShaders() {
     return program;
 }
 
+/** Init an FBO used for the first render pass / perlin noise */
+var perlinNoiseFBO : WebGLFramebuffer | null = null;
+var perlinNoiseFBOWidth = 400;
+var ferlinNoiseFBOHeight = 400;
+function initFBO() {
+    perlinNoiseFBO = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
+
+    // Add attachments
+    let tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RGB, gl.UNSIGNED_BYTE, null);
+
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+
+    if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
+        console.log("Framebuffer creation failed.");
+    }
+
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Reset to default framebuffer
+}
+
+/** Update/Draw function. Targeting 60UPS. */
 var timeSpent = 0.0;
 function drawScene(buffer: WebGLBuffer, program: WebGLProgram) {
     timeSpent += 1.0 / 60.0;
-    gl.viewport(0, 0, viewportWidth, viewportHeight);
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    // Two Rendering passes. The first one generates a perlin noise 
+    // texture. Second one uses the textur for vertex displacement 
+    // of a grid representing the water surface.
 
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 
-    // There are 7 floating-point values per vertex
-    let stride = 3 * Float32Array.BYTES_PER_ELEMENT;
+    //--- First render pass -> Perlin Noise ---
+    {/*
+        gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO); //TODO: Fix me
+        gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight);
 
-    // Set up position stream
-    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
-    gl.enableVertexAttribArray(0);
+        //Clear buffer content
+        gl.clearColor(0, 1, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT); //No depth buffer
 
-    gl.useProgram(program);
-    let uTime = gl.getUniformLocation(program, "uTime");
-    gl.uniform1f(uTime, timeSpent);
-    gl.drawArrays(gl.TRIANGLES, 0, 3);
+        //draw a fullscreen quad
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+
+        // There are 7 floating-point values per vertex
+        let stride = 3 * Float32Array.BYTES_PER_ELEMENT;
+
+        // Set up position stream
+        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
+        gl.enableVertexAttribArray(0);
+
+        gl.useProgram(program);
+        let uTime = gl.getUniformLocation(program, "uTime");
+        gl.uniform1f(uTime, timeSpent);
+        gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw quad
+    */}
+
+    //--- 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.bindBuffer(gl.ARRAY_BUFFER, buffer);
+
+        // There are 7 floating-point values per vertex
+        let stride = 3 * Float32Array.BYTES_PER_ELEMENT;
+
+        // Set up position stream
+        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
+        gl.enableVertexAttribArray(0);
+
+        gl.useProgram(program);
+        let uTime = gl.getUniformLocation(program, "uTime");
+        gl.uniform1f(uTime, timeSpent);
+        gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw two triangles
+    }
 }
 
 function main() {
@@ -124,6 +194,7 @@ function main() {
     initGL(canvas);
     let shaderProgram = initShaders();
     let triangleVBO = initGeometry();
+    let fbo = initFBO();
 
 
     // Setze clear color auf schwarz, vollständig sichtbar