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;
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.
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:
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:
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:
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.