diff --git a/index.html b/index.html
index 8a4ba7b..c4c42a6 100644
--- a/index.html
+++ b/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);
diff --git a/src/main.ts b/src/main.ts
index a9d83bb..6397fed 100644
--- a/src/main.ts
+++ b/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 = 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(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!: ");
}