From 4bb5a4e1627488049dde3ba6c28027f9e0e5116c Mon Sep 17 00:00:00 2001
From: Julian <julian.niessner@rismer.de>
Date: Sat, 25 Jan 2020 19:39:07 +0100
Subject: [PATCH] add normal calculation to vertex shader

---
 index.html  | 72 +++++++++++++++++++++++++++++++++++++----
 src/main.ts | 92 ++++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 132 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index e9463e1..a1ff7fc 100644
--- a/index.html
+++ b/index.html
@@ -78,10 +78,10 @@
             }
         
             void main(void) {
-                float n = octavedPerlinNoise(vec3(gl_FragCoord.x*0.001,gl_FragCoord.y*0.007+uTime*0.0001,uTime*0.00005),8,2.0); //Should be scaled along arbitary axis
+                float n = octavedPerlinNoise(vec3(gl_FragCoord.x*0.001,gl_FragCoord.y*0.007+uTime*0.00005,uTime*0.00005),8,2.0); //Should be scaled along arbitary axis
                 //float n = noise(vec3(gl_FragCoord.xy*0.01,uTime));
                 //vec3 cloudEffect = clouds(gl_FragCoord.x*0.005, gl_FragCoord.y*0.005);
-                vec3 color = n + (vec3(1., 1., 1.)/2.);
+                vec3 color = n + (vec3(1., 1., 1.)/2.); //Scales the height off the waves (/8.0)
                 gl_FragColor = vec4(color,1.0);
             }
         </script>
@@ -95,23 +95,81 @@
     <script id="default-fs" type="x-shader/x-fragment">
         precision mediump float;
 
+        varying vec3 v_normal;
+        varying vec3 v_fragPos;
+
+        vec3 lightPos = vec3(0.,-1.,10.);
+        vec3 lightColor = vec3(1.0,1.0,1.0);
+
         void main(void) {
-            gl_FragColor = vec4(0.0,0.0,1.0,1.0);
+            //gl_FragColor = vec4(0.0,0.0,1.0-v_height,1.0);
+
+            vec3 norm = normalize(v_normal);
+            vec3 lightDir = normalize(lightPos- v_fragPos);
+
+            float diff = max(dot(norm,lightDir),0.0);
+            vec3 diffuse = diff * lightColor;
+            vec3 result = (diffuse) * vec3(0.0,0.0,1.0);
+            //gl_FragColor = vec4(v_normal,1.0);
+            gl_FragColor = vec4(result,1.0);
         }
     </script>
     <script id="default-vs" type="x-shader/x-vertex">
             attribute vec3 positionAttr;
 
-            uniform mat4 MVP;
+            uniform mat4 model;
+            uniform mat4 projection;
             uniform float uTime;
             uniform sampler2D displace_map;
+
+            //Normal vectors are compute as: https://www.scratchapixel.com/lessons/procedural-generation-virtual-worlds/perlin-noise-part-2/perlin-noise-computing-derivatives
+            //using forward difference
+            varying vec3 v_normal;
+            varying vec3 v_fragPos;
          
             void main(void) {
                 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.;
+                vec4 worldPos = model * vec4(positionAttr.x,positionAttr.y,positionAttr.z + displace.x, 1.0);
+                gl_Position = projection * worldPos;
+                v_fragPos = worldPos.xyz;
+
+        
+
+                //calculate normal
+                float gridPointDelta = 1. / (128. + 1.);
+                vec3 currPoint = vec3(0.0,0.0,displace.x);
+
+                vec3 nextPoint = vec3(gridPointDelta,0.0,texture2D(displace_map,vec2(positionAttr.x + gridPointDelta,positionAttr.y)).x);
+                vec3 biNormal = normalize(nextPoint - currPoint);
+
+                vec3 upperPoint = vec3(0.0,gridPointDelta,texture2D(displace_map,vec2(positionAttr.x,positionAttr.y+gridPointDelta)).x);
+                vec3 biTangent = normalize(upperPoint - currPoint);
+                //v_normal = binormDelta;
+                v_normal = cross(biNormal, biTangent);
             }
-        </script>
+    </script>
+    <script id="texture-fs" type="x-shader/x-fragment">
+        precision mediump float;
+
+        uniform sampler2D u_texture;
+        varying vec2 v_uv;
+
+        void main(void) {
+            gl_FragColor = texture2D(u_texture, v_uv);
+        }
+    </script>
+    <script id="texture-vs" type="x-shader/x-vertex">
+            attribute vec3 positionAttr;
+            attribute vec2 a_uv;
+
+            varying vec2 v_uv;
+            uniform mat4 u_mvp;
+        
+            void main(void) {
+                gl_Position = u_mvp * vec4(positionAttr, 1.0);
+                v_uv = a_uv;
+            }
+    </script>
 </header>
 
 <body>
diff --git a/src/main.ts b/src/main.ts
index a321e61..cc90876 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -60,7 +60,7 @@ function generateGrid(N: number) {
 }
 var gridVAO: WebGLVertexArrayObject | null = null;
 function initGridVAO() {
-    generateGrid(64);
+    generateGrid(128);
 
     gridVAO = gl.createVertexArray();
     gl.bindVertexArray(gridVAO);
@@ -132,6 +132,7 @@ function getShader(id: string) {
 
 /** Init all Shaders that are needed */
 var perlinNoiseProgram: WebGLProgram | null;
+var defaultProgram: WebGLProgram | null;
 var textureProgram: WebGLProgram | null;
 function initShaders() {
     { //Get perlinNoiseProgram
@@ -155,16 +156,33 @@ function initShaders() {
         if (!gl.getProgramParameter(perlinNoiseProgram, gl.LINK_STATUS)) {
             alert("Could not initialise shaders");
         }
-
-        gl.useProgram(perlinNoiseProgram);
-
-        let positionAttr = gl.getAttribLocation(perlinNoiseProgram, "positionAttr");
-        gl.enableVertexAttribArray(positionAttr);
     }
-    { //Get textueShaderProgram
+    { //Get defaultShaders
         let vertexShader = getShader("default-vs");
         let fragmentShader = getShader("default-fs");
 
+        if (vertexShader == null || fragmentShader == null) {
+            console.log("Didn't find shader sources!")
+            return null;
+        }
+        defaultProgram = gl.createProgram();
+        if (defaultProgram == null) {
+            console.log("Program not created!")
+            return null
+        }
+
+        gl.attachShader(defaultProgram, vertexShader);
+        gl.attachShader(defaultProgram, fragmentShader);
+        gl.linkProgram(defaultProgram);
+
+        if (!gl.getProgramParameter(defaultProgram, gl.LINK_STATUS)) {
+            alert("Could not initialise shaders");
+        }
+    }
+    { //Get textureShader
+        let vertexShader = getShader("texture-vs");
+        let fragmentShader = getShader("texture-fs");
+
         if (vertexShader == null || fragmentShader == null) {
             console.log("Didn't find shader sources!")
             return null;
@@ -182,11 +200,6 @@ function initShaders() {
         if (!gl.getProgramParameter(textureProgram, gl.LINK_STATUS)) {
             alert("Could not initialise shaders");
         }
-
-        gl.useProgram(textureProgram);
-
-        let positionAttr = gl.getAttribLocation(textureProgram, "positionAttr");
-        gl.enableVertexAttribArray(positionAttr);
     }
 }
 
@@ -245,7 +258,7 @@ function drawScene() {
         gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight);
 
         //Clear buffer content
-        gl.clearColor(0.25, .89, 0.32, 1);
+        gl.clearColor(1.0, 1.0, 1.0, 1);
         gl.clear(gl.COLOR_BUFFER_BIT); //No depth buffer
 
         //draw a fullscreen quad
@@ -273,26 +286,55 @@ function drawScene() {
 
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
+        //--- Display perlin noise texture (For Debug)
+        /*{
+            //draw a fullscreen quad
+            gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
+
+            // There are 7 floating-point values per vertex
+            let stride = 5 * Float32Array.BYTES_PER_ELEMENT;
+
+            // Set up position stream
+            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.enableVertexAttribArray(1);
+
+            gl.activeTexture(gl.TEXTURE0); //Binds the texture to 0
+            gl.bindTexture(gl.TEXTURE_2D, textureFBO);
+
+            gl.useProgram(textureProgram);
+            let mvp = mat4.create();
+            mat4.identity(mvp);
+            let mvp_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "u_mvp");
+            gl.uniformMatrix4fv(mvp_loc, false, mvp);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+        }*/
+
         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.);
+        
+        var projection = mat4.create();
+        mat4.identity(projection);
+        mat4.perspective(projection, 1.0, viewportWidth / viewportHeight, 0.1, 1000.);
+        var model = mat4.create();
+        mat4.identity(model);
 
         let translation = vec3.create();
-        vec3.set(translation, -0.5, 0.0, -2.0);
-        mat4.translate(mvp, mvp, translation);
-        mat4.rotateX(mvp, mvp, 1.5);
-
+        vec3.set(translation, -.5, -.5, -2.5);
+        mat4.translate(model, model, 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.useProgram(defaultProgram);
+        let model_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "model");
+        gl.uniformMatrix4fv(model_loc, false, model);
+        let projection_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "projection");
+        gl.uniformMatrix4fv(projection_loc, false, projection);
+        let uTime_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uTime");
         gl.uniform1f(uTime_loc, timeSpent);
-        let displacementMap_loc = gl.getUniformLocation(<WebGLProgram>textureProgram, "displace_map");
+        let displacementMap_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "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);