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