From 34d6863a4b13ec0efb50b632e487a7874e9469a4 Mon Sep 17 00:00:00 2001
From: Julian <julian.niessner@rismer.de>
Date: Tue, 28 Jan 2020 17:08:41 +0100
Subject: [PATCH] brute force specular reflection

---
 index.html  | 35 ++++++++++---------
 src/main.ts | 97 ++++++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 104 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index c4c42a6..98d1ee5 100644
--- a/index.html
+++ b/index.html
@@ -98,6 +98,7 @@
         varying vec3 v_fragPos;
         varying vec2 v_uv;
 
+        uniform vec3 eyePos;
         uniform sampler2D displace_map;
 
         vec3 lightPos = vec3(0.,0.,10.); //should be an directional light
@@ -111,10 +112,10 @@
             //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 right = vec3(gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x + gridPointDelta,v_uv.y)).x*0.1);
+            vec3 left = vec3(-gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x - gridPointDelta,v_uv.y)).x*0.1);
+            vec3 up = vec3(0.,gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y + gridPointDelta)).x*0.1);
+            vec3 down = vec3(0.,-gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y - gridPointDelta)).x*0.1);
 
             //vec3 tangent = normalize(right - currPoint);
             //vec3 biTangent = normalize(up - currPoint);
@@ -124,26 +125,28 @@
             vec3 normal = cross(tangent, biTangent);
 
             vec3 norm = normalize(normal);
-            vec3 lightDir = normalize(lightPos- v_fragPos);
+            norm.y *= -1.; //Normal y direction is somehow inverted
+            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);
 
             //Old lightning
-            //vec3 toCameraVector = v_fragPos - vec3(0.,0.,0.);
-            //vec3 reflec = normalize(reflect(toCameraVector, normal));
+            vec3 toCameraVector = normalize(v_fragPos - eyePos);
+            vec3 reflec = normalize(reflect(toCameraVector, norm));
 
             //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.) ;
+	        float n1 = 1., n2 = 1.33333;
+	        float R0 = pow((n1-n2)/(n1+n2), 2.);
+        	float fresnel = R0 + (1. - R0)*pow((1.-dot(norm,reflec)),5.) ;
 
-	        //vec3 waterColor = vec3(34./255.,154./255.,211./255.);
-	        //vec3 lightColor = vec3(1.,1.,1.);
+            //vec3 waterColor = vec3(34./255.,154./255.,211./255.);
+            vec3 oceanColor = vec3(0,.04,.04) * 10.; // under-sea colour
+	        vec3 skyColor = 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(mix(oceanColor,skyColor,fresnel).xyz, 1.);
+            //gl_FragColor = vec4(result,1.0);
             //gl_FragColor = vec4(normal,1.0);
             //gl_FragColor = vec4(displace.x,displace.x,displace.x,1.0); //Show Perlin Noise texture deactivate vertex distrotion before
         }
@@ -151,9 +154,9 @@
     <script id="default-vs" type="x-shader/x-vertex">
             attribute vec3 positionAttr;
 
+            uniform mat4 view;
             uniform mat4 model;
             uniform mat4 projection;
-            uniform float uTime;
             uniform sampler2D displace_map;
 
             varying vec2 v_uv;
@@ -162,7 +165,7 @@
             void main(void) {
                 vec4 displace = texture2D(displace_map, vec2(positionAttr.x,positionAttr.y));
                 vec4 worldPos = model * vec4(positionAttr.x,positionAttr.y,positionAttr.z + displace.x, 1.0);
-                gl_Position = projection * worldPos;
+                gl_Position = projection * view * worldPos;
                 v_fragPos = worldPos.xyz;
                 v_uv = positionAttr.xy;
             }
diff --git a/src/main.ts b/src/main.ts
index 6397fed..5cb298b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,9 +1,76 @@
-import { vec3, mat4 } from 'gl-matrix'
+import { vec3, mat4, vec4 } from 'gl-matrix'
 
 var gl: WebGL2RenderingContext;
 var viewportWidth = 0;
 var viewportHeight = 0;
 
+/** A camera that always looks at the world origin. Can have an offset and be rotated. */
+class Camera {
+    pos: vec3;
+    target: vec3;
+    up: vec3;
+
+    xRot: number;
+    yRot: number;
+    offset: number;
+
+    constructor() {
+        this.pos = vec3.create();
+        vec3.set(this.pos, 0.0, 0.0, 0.0);
+        this.target = vec3.create();
+        vec3.set(this.target, 0.0, 0.0, 0.0);
+        this.up = vec3.create();
+        vec3.set(this.up, 0.0, 1.0, 0.0);
+        this.xRot = 0.0;
+        this.yRot = 0.0;
+        this.offset = 0.0;
+    }
+
+    setRotationX(rotX: number): void {
+        this.xRot = rotX;
+        this.updatePos();
+    }
+
+    setRotationY(rotY: number): void {
+        this.yRot = rotY;
+        this.updatePos();
+    }
+
+    /** Sets the offset to world origin. */
+    setOffset(off: number): void {
+        this.offset = off;
+        this.updatePos();
+    }
+
+    /** Reculcates the position according to xy-rotation and offset. */
+    private updatePos(): void {
+        var transformation: mat4 = mat4.create();
+        mat4.identity(transformation);
+
+        //2. xy-Rotation
+        mat4.rotateX(transformation, transformation, this.xRot);
+        mat4.rotateY(transformation, transformation, this.yRot);
+
+        //1. Translation
+        var translation = vec3.create();
+        vec3.set(translation, 0.0, 0.0, this.offset);
+        mat4.translate(transformation, transformation, translation);
+
+        var temp: vec4 = vec4.create();
+        vec4.set(temp, 0.0, 0.0, 0.0, 1.0);
+        vec4.transformMat4(temp, temp, transformation);
+
+        vec3.set(this.pos, temp[0], temp[1], temp[2]);
+    }
+
+    getViewMatrix(): mat4 {
+        var ret: mat4;
+        ret = mat4.create();
+        mat4.lookAt(ret, this.pos, this.target, this.up);
+        return ret;
+    }
+}
+
 /** Init OpenGL and gets the viewport/canvas sizes */
 function initGL(canvas: HTMLCanvasElement) {
     var gltemp;
@@ -247,7 +314,8 @@ var fps = 0;
 /** Input states*/
 var mouseXVel = 0;
 var mouseYVel = 0;
-/** Object state*/
+/** Objects and states*/
+var camera: Camera;
 var curRotX = 0;
 var curRotY = 0;
 function drawScene() {
@@ -304,29 +372,33 @@ function drawScene() {
 
         var projection = mat4.create();
         mat4.identity(projection);
-        mat4.perspective(projection, 1.0, viewportWidth / viewportHeight, 0.1, 1000.);
+        mat4.perspective(projection, 1.0, viewportWidth / viewportHeight, 0.1, 1000.); //projection mode should actually be camera specific
+
+        camera.setOffset(15.0);
+        camera.setRotationX((curRotX += mouseYVel * 0.001));
+        camera.setRotationY((curRotY += mouseXVel * 0.001));
+        var view = camera.getViewMatrix();
+
         var model = mat4.create();
         mat4.identity(model);
-
-        let translation = vec3.create();
-        vec3.set(translation, .0, .0, -15.);
-        mat4.translate(model, model, translation); //3. Then translate it back so that we can see something
-        mat4.rotateX(model, model, (curRotY += mouseYVel * 0.001)); //2.2 Then rotate it around the origin according to mouse input.
-        mat4.rotateY(model, model, (curRotX += mouseXVel * 0.001)); //2.1 Then rotate it around the origin according to mouse input.
         let xyScaling = vec3.create();
         vec3.set(xyScaling, 10., 10., 1.0);
-        mat4.scale(model, model, xyScaling); //Scale the surface in xy by factor 10
+        mat4.scale(model, model, xyScaling); //2. Then scale the surface xy by factor 10
         let translationCentering = vec3.create();
         vec3.set(translationCentering, -0.5, -0.5, 0.0);
         mat4.translate(model, model, translationCentering); //1. First Center the Surface in the origin.
 
         gl.useProgram(defaultProgram);
+        let view_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "view");
+        gl.uniformMatrix4fv(view_loc, false, view);
         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 eye_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "eyePos");
+        gl.uniform3fv(eye_loc, camera.pos);
+        //let uTime_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uTime");
+        //gl.uniform1f(uTime_loc, timeSpent);
         let displacementMap_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "displace_map");
         gl.uniform1i(displacementMap_loc, 0); //Get texture from slot 0
         gl.bindVertexArray(gridVAO);
@@ -376,6 +448,7 @@ function main() {
     initFBO();
     initGridVAO();
 
+    camera = new Camera();
     //Check if any errors apeared during init.
     if (gl.getError() != gl.NO_ERROR) {
         console.log("OpenGL Error!: ");