Scale Surface from NC (Normalized Coordinates) to strechted x.y.Plane * 10.

index.html

@@ -109,7 +109,7 @@
         void main(void) {
             vec4 displace = texture2D(displace_map, v_uv);
             //calculate normal
-            float gridPointDelta = 1. / 256.;
+            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);

src/main.ts

@@ -24,10 +24,10 @@ function initGL(canvas: HTMLCanvasElement) {
         alert("Unable to initialize WebGL2. Your browser or machine may not support it.");
     }
     gl = <WebGL2RenderingContext>gltemp;
-    //WebGL2 supports floating point textures by default but it does not support filtering them or rendering to them by default. Note: 16bit filtering is included
+    //WebGL2 supports floating point textures by default but it does not support filtering them or rendering to them by default. Note: 16bit filtering is included 32bit not
     if (!gl.getExtension('EXT_color_buffer_float')) {
         alert("32Bit/16Bit single Color render Buffers not available.");
-    } //allow 32bit texture as framebuffer target
+    } //allow 16bit texture as framebuffer target
 
     gl.enable(gl.DEPTH_TEST);
 }
@@ -239,14 +239,15 @@ function initFBO() {
 }
 
 /** Update/Draw function.*/
-var timeSpent = 0.0;
 /** Framerate measurement variables */
+var timeSpent = 0.0;
 var lastTime = new Date().getTime();
 var counter = 0.0;
 var fps = 0;
-/** Input */
+/** Input states*/
 var mouseXVel = 0;
 var mouseYVel = 0;
+/** Object state*/
 var curRotX = 0;
 var curRotY = 0;
 function drawScene() {
@@ -308,10 +309,16 @@ function drawScene() {
         mat4.identity(model);
 
         let translation = vec3.create();
-        vec3.set(translation, -.5, -.5, -1.5);
-        mat4.translate(model, model, translation);
-        mat4.rotateX(model, model, (curRotY += mouseYVel * 0.001));
-        mat4.rotateY(model, model, (curRotX += mouseXVel * 0.001));
+        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
+        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 model_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "model");
@@ -364,12 +371,12 @@ function main() {
     canvas.addEventListener('mouseup', deactivateMouseMovement, false);
     canvas.addEventListener('mouseleave', deactivateMouseMovement, false);
 
-
     initShaders();
     initGeometry();
     initFBO();
     initGridVAO();
 
+    //Check if any errors apeared during init.
     if (gl.getError() != gl.NO_ERROR) {
         console.log("OpenGL Error!: ");
     }