add normal calculation to vertex shader

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>