PDA

View Full Version : Panning a plane

theiviaxx
01-17-2010, 11:36 PM
Hello, i have written a basic app based on the tutorials from learningwebgl.com (http://learningwebgl.com/blog/). 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 (http://learningwebgl.com/lessons/lesson01/glUtils.js) from learningwebgl.com (http://learningwebgl.com/blog/):

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!

super_eggbert
01-18-2010, 04:04 AM
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.

theiviaxx
01-18-2010, 09:27 AM
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

easywebgl
01-18-2010, 11:32 AM
var dx = (e.client.x - last.x) / width*2;
pos.x += dx;

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

theiviaxx
01-18-2010, 01:09 PM
That worked, thanks guys.

theiviaxx
01-18-2010, 01:40 PM
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.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.vertexPositionAtt ribute, this.cubeVertexPositionBuffer.itemSize, this.gl.FLOAT, false, 0, 0);

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.cubeVertexTextureCoordBuffer);
this.gl.vertexAttribPointer(this.textureCoordAttri bute, 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.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

giles
01-19-2010, 08:26 AM
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 (http://www.khronos.org/message_boards/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?

theiviaxx
01-19-2010, 09:45 AM
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.textureCoordAttri bute, 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.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.

easywebgl
01-19-2010, 11:09 AM
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.