replace triangle with quad

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