brute force specular reflection

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!: ");