Panning a plane

Hello, i have written a basic app based on the tutorials from learningwebgl.com. It draws a plane, then applies an image to it. Then you use the mouse to pan and zoom. Basically an image viewer similar to that used in picasa.

My problem happens during the mouse move functions and getting screen pixels into scene space. When moving the mouse it pans ok, but its off a little bit, not 1:1, and i assume its due to the perspective?

i set my projection matrix by using the makePerspective function in glUtils from learningwebgl.com:

perspective(45.0, width / height, 0.1, 100.0);

and my model view matrix with:

lookAt(0.0,0.0,5.0,
          0.0,0.0,0.0,
          0.0,1.0,0.0
);

the function for handling the mouse move is:


var angle = 90 / 2;
var x = (5 * (90 - angle)) / angle;
var dx = ((e.client.x - last.x) * (x /width));
		
eye.x += -dx;
center.x += -dx;
last.x = e.client.x;

is my math even close to correct here?

Thanks, this is exciting stuff!

I can’t quite see what you’re trying to do with the maths but if you’re only planning on pan and zoom why not use the makeOrtho function in glutils file to construct your projection matrix, then you won’t need to deal with perspective at all.

ive got the ortho made, but i still can’t figure out the unit conversions. How to convert pixel distance to world space?

i have a plane at 0,0,0 and the this.ortho(-1, 1, 1, -1, 0.1, 100.0). i tried:


var dx = (e.client.x - last.x) / width;
pos.x += dx;

but its still not 1:1 when panning. Should i even be concerned with canvas width?

Thanks

var dx = (e.client.x - last.x) / width*2;
pos.x += dx;

because a canvas is from -1,-1 to 1,1;

That worked, thanks guys.

So everything is working as expected, however this will be running fullscreen and at 1920x1200 it’s chugging really bad. Not sure how 2 triangles and a little texture could cause such lag. I assume it has to do with how im rendering it.

Basically it calls the following function every 15ms:


this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT)
this.loadIdentity();
this.ortho(-1, 1, 1, -1, 0.1, 100.0)

this.mvTranslate([this.pos.x,this.pos.y,this.pos.z]);

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.cubeVertexPositionBuffer);
this.gl.vertexAttribPointer(this.vertexPositionAttribute, this.cubeVertexPositionBuffer.itemSize, this.gl.FLOAT, false, 0, 0);

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.cubeVertexTextureCoordBuffer);
this.gl.vertexAttribPointer(this.textureCoordAttribute, this.cubeVertexTextureCoordBuffer.itemSize, this.gl.FLOAT, false, 0, 0);

this.gl.activeTexture(this.gl.TEXTURE0);
this.gl.bindTexture(this.gl.TEXTURE_2D, this.neheTexture);
this.gl.uniform1i(this.gl.getUniformLocation(this.shaderProgram, "uSampler"), 0);

this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);

this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.cubeVertexIndexBuffer);
this.setMatrixUniforms();

Can i do this more efficiently?

Thanks

Which browser are you using? It’s been suggested that Minefield’s way of copying the rendered image to the page (specifically the way it’s combined with the normal HTML) is inefficient; see here: viewtopic.php?f=35&t=2312

On a slightly different note, I see that in your code you go:


this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);

this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.cubeVertexIndexBuffer);
this.setMatrixUniforms();

Does this not cause your matrices and your vertex index buffer to be ignored? Or is there something further down?

im using minefield on windows 7. It seems after restarting minefield it got a little better, but nothing near expected. Is this just part of an early spec?

As for the second question, i took a second look at the lessons and now have:


this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.cubeVertexTextureCoordBuffer);
this.gl.vertexAttribPointer(this.textureCoordAttribute, this.cubeVertexTextureCoordBuffer.itemSize, this.gl.FLOAT, false, 0, 0);

this.gl.activeTexture(this.gl.TEXTURE0);
this.gl.bindTexture(this.gl.TEXTURE_2D, this.neheTexture);
this.gl.uniform1i(this.gl.getUniformLocation(this.shaderProgram, "uSampler"), 0);

this.setMatrixUniforms();

this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);

the vertexIndexBuffer wasn’t used, it was residual from your 3D objects lesson. I’ll give it a whirl on chrome and see how it fares.

It is most likely that gl.clear is the slowpoke there
In my measurements on webgl,
it seemed like gl.clear was always slow and
it became worse when the size of the canvas increased.

You can try to put some options off when you init the canvas.

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl',
                                { antialias: false,
                                  stencil: false,
                                  depth: true,
                                  alpha: false,
                                  premultipliedAlpha: false });

These are the options possible but I am not sure if it will help. For more information watch the WebGL-spec 5.2.