add mouseMovement

index.html

@@ -50,9 +50,9 @@
             float octavedPerlinNoise(vec3 P,int octaves,float persistence) {
                 float total = 0.0;
                 float frequency = 128.0;
-                float amplitude = 4.0;
+                float amplitude = 1.0;
                 float maxValue = 0.0;
-                for(int i = 0; i < 8; i++) {
+                for(int i = 0; i < 6; i++) {
                    total += noise((P*frequency)) * amplitude;
 
                    maxValue += amplitude;
@@ -78,10 +78,10 @@
             }
         
             void main(void) {
-                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 = octavedPerlinNoise(vec3(gl_FragCoord.x*0.001,gl_FragCoord.y*0.003+uTime*0.00005,uTime*0.00005),8,2.6); //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.); //Scales the height off the waves (/8.0)
+                vec3 color = vec3(n) + (vec3(1., 1., 1.)/2.); //Scales the height off the waves (/8.0)
                 gl_FragColor = vec4(color,1.0);
             }
         </script>
@@ -95,23 +95,57 @@
     <script id="default-fs" type="x-shader/x-fragment">
         precision mediump float;
 
-        varying vec3 v_normal;
         varying vec3 v_fragPos;
+        varying vec2 v_uv;
 
-        vec3 lightPos = vec3(0.,-1.,10.);
+        uniform sampler2D displace_map;
+
+        vec3 lightPos = vec3(0.,0.,10.); //should be an directional light
         vec3 lightColor = vec3(1.0,1.0,1.0);
         
-        void main(void) {
+        //using forward difference
-            //gl_FragColor = vec4(0.0,0.0,1.0-v_height,1.0);
+        //Normal vectors are compute as: https://www.scratchapixel.com/lessons/procedural-generation-virtual-worlds/perlin-noise-part-2/perlin-noise-computing-derivatives
 
-            vec3 norm = normalize(v_normal);
+        void main(void) {
+            vec4 displace = texture2D(displace_map, v_uv);
+            //calculate normal
+            float gridPointDelta = 1. / 256.;
+            vec3 currPoint = vec3(0.0,0.0,displace.x);
+            vec3 right = vec3(gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x + gridPointDelta,v_uv.y)).x);
+            vec3 left = vec3(-gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x - gridPointDelta,v_uv.y)).x);
+            vec3 up = vec3(0.,gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y + gridPointDelta)).x);
+            vec3 down = vec3(0.,-gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y - gridPointDelta)).x);
+
+            //vec3 tangent = normalize(right - currPoint);
+            //vec3 biTangent = normalize(up - currPoint);
+            vec3 tangent = normalize(vec3(gridPointDelta,0.,right.z-left.z));
+            vec3 biTangent = normalize(vec3(0.,gridPointDelta,down.z-up.z));
+            //vec3 normal = biTangent;
+            vec3 normal = cross(tangent, biTangent);
+
+            vec3 norm = normalize(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);
+            //Old lightning
+            //vec3 toCameraVector = v_fragPos - vec3(0.,0.,0.);
+            //vec3 reflec = normalize(reflect(toCameraVector, normal));
+
+            //Schlicks approximation to Fresnelfactor
+	        //float n1 = 1., n2 = 1.33333;
+	        //float R0 = pow((n1-n2)/(n1+n2), 2.);
+        	//float fresnel = R0 + (1. - R0)*pow((1.-dot(normal,reflec)),5.) ;
+
+	        //vec3 waterColor = vec3(34./255.,154./255.,211./255.);
+	        //vec3 lightColor = vec3(1.,1.,1.);
+
+            //gl_FragColor = vec4(mix(waterColor, vec3(1.,1.,1.),fresnel).xyz, 1.);
+            //gl_FragColor = vec4(result,1.0);
+            //gl_FragColor = vec4(normal,1.0);
+            gl_FragColor = vec4(displace.xyz,1.0); //Show Perlin Noise texture deactivate vertex distrotion before
         }
     </script>
     <script id="default-vs" type="x-shader/x-vertex">
@@ -122,9 +156,7 @@
             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
+            varying vec2 v_uv;
-            //using forward difference
-            varying vec3 v_normal;
             varying vec3 v_fragPos;
          
             void main(void) {
@@ -132,20 +164,7 @@
                 vec4 worldPos = model * vec4(positionAttr.x,positionAttr.y,positionAttr.z + displace.x, 1.0);
                 gl_Position = projection * worldPos;
                 v_fragPos = worldPos.xyz;
-
+                v_uv = positionAttr.xy;
-        
-
-                //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 id="texture-fs" type="x-shader/x-fragment">

src/main.ts

@@ -24,6 +24,8 @@ function initGL(canvas: HTMLCanvasElement) {
         alert("Unable to initialize WebGL. Your browser or machine may not support it.");
     }
     gl = <WebGL2RenderingContext>gltemp;
+    gl.getExtension( 'EXT_color_buffer_float' );
+    gl.enable(gl.DEPTH_TEST);
 }
 
 /** Grid for the watersurface */
@@ -214,11 +216,12 @@ function initFBO() {
 
     // Add attachments
     textureFBO = gl.createTexture();
-    gl.bindTexture(gl.TEXTURE_2D, textureFBO);
+    gl.bindTexture(gl.TEXTURE_2D, textureFBO);                                            //last 3 parameter not intertesting becuase we are not supplying data
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RGB, gl.UNSIGNED_BYTE, null);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RGBA, gl.FLOAT, 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_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
     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);
 
@@ -237,6 +240,11 @@ var timeSpent = 0.0;
 var lastTime = new Date().getTime();
 var counter = 0.0;
 var fps = 0;
+/** Input */
+var mouseXVel = 0;
+var mouseYVel = 0;
+var curRotX = 0;
+var curRotY = 0;
 function drawScene() {
     fps++;
     let now = new Date();
@@ -322,10 +330,10 @@ function drawScene() {
         mat4.identity(model);
 
         let translation = vec3.create();
-        vec3.set(translation, -.5, -.5, -2.5);
+        vec3.set(translation, -.5, -.5, -1.5);
         mat4.translate(model, model, translation);
-        //mat4.rotateX(mvp, mvp, 1.5);
+        mat4.rotateX(model, model, (curRotY += mouseYVel * 0.001));
-        //mat4.rotateY(mvp, mvp, timeSpent * 0.001);
+        mat4.rotateY(model, model, (curRotX += mouseXVel * 0.001));
 
         gl.useProgram(defaultProgram);
         let model_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "model");
@@ -346,6 +354,39 @@ function drawScene() {
 function main() {
     const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window");
     initGL(canvas);
+
+    var drag = false;
+    var previousPosX: number | null;
+    var previousPosY: number | null;
+    canvas.addEventListener('mousedown', function (evt) {
+        drag = true;
+    }, false);
+    canvas.addEventListener('mousemove', function (evt) {
+        if (drag) {
+            if (previousPosX == null || previousPosY == null) {
+                previousPosX = evt.x;
+                previousPosY = evt.y;
+            }
+            var mousePosX = evt.x;
+            var mousePosY = evt.y;
+            mouseXVel = (mousePosX - previousPosX);
+            mouseYVel = (mousePosY - previousPosY);
+            previousPosX = mousePosX;
+            previousPosY = mousePosY;
+        }
+    }, false);
+    var deactivateMouseMovement = function () {
+        previousPosX = null;
+        previousPosY = null;
+        mouseXVel = 0.0;
+        mouseYVel = 0.0;
+        drag = false;
+        console.log(curRotX + " " + curRotY);
+    }
+    canvas.addEventListener('mouseup', deactivateMouseMovement, false);
+    canvas.addEventListener('mouseleave', deactivateMouseMovement, false);
+
+
     initShaders();
     initGeometry();
     initFBO();