Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does zooming, panning and rotating work?

Using OpenGL I'm attempting to draw a primitive map of my campus.

Can anyone explain to me how panning, zooming and rotating is usually implemented?

For example, with panning and zooming, is that simply me adjusting my viewport? So I plot and draw all my lines that compose my map, and then as the user clicks and drags it adjusts my viewport?

For panning, does it shift the x/y values of my viewport and for zooming does it increase/decrease my viewport by some amount? What about for rotation?

For rotation, do I have to do affine transforms for each polyline that represents my campus map? Won't this be expensive to do on the fly on a decent sized map?

Or, is the viewport left the same and panning/zooming/rotation is done in some otherway?


For example, if you go to this link you'll see him describe panning and zooming exactly how I have above, by modifying the viewport.

Is this not correct?

like image 684
KingNestor Avatar asked Feb 25 '09 01:02

KingNestor


People also ask

What is zooming and panning?

Panning lets you move a view to another location without changing its magnification. Zooming lets you view the drawing with more or less magnification. The zoom functions move in or move out of the drawing.

What is panning in mouse?

You can use the wheel of your mouse to help move around in a drawing. The MBUTTONPAN system variable controls this feature. To pan using a mouse with a wheel. •

Why is the panning tool useful?

Camera panning is one of the most used cinematic techniques, and for good reason. It can make otherwise static shots more dynamic, give vistas a more expansive feel, and track the movement of a subject, among other benefits.

How can I use my mouse to pan view?

Pan and zoom by using the keyboard Click the left mouse button to enlarge the view. Click the right mouse button to reduce the view. Click the left mouse button and drag a rectangle that contains just the region you want to zoom into. Right-click and drag to pan the diagram.


1 Answers

They're achieved by applying a series of glTranslate, glRotate commands (that represent camera position and orientation) before drawing the scene. (technically, you're rotating the whole scene!)

There are utility functions like gluLookAt which sorta abstract some details about this.

To simplyify things, assume you have two vectors representing your camera: position and direction.

gluLookAt takes the position, destination, and up vector.

If you implement a vector class, destinaion = position + direction should give you a destination point.

Again to make things simple, you can assume the up vector to always be (0,1,0)

Then, before rendering anything in your scene, load the identity matrix and call gluLookAt

glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
gluLookAt( source.x, source.y, source.z, destination.x, destination.y, destination.z, 0, 1, 0 );

Then start drawing your objects

You can let the user span by changing the position slightly to the right or to the left. Rotation is a bit more complicated as you have to rotate the direction vector. Assuming that what you're rotating is the camera, not some object in the scene.

One problem is, if you only have a direction vector "forward" how do you move it? where is the right and left?

My approach in this case is to just take the cross product of "direction" and (0,1,0).

Now you can move the camera to the left and to the right using something like:

position = position + right * amount; //amount < 0 moves to the left

You can move forward using the "direction vector", but IMO it's better to restrict movement to a horizontal plane, so get the forward vector the same way we got the right vector:

forward = cross( up, right )

To be honest, this is somewhat of a hackish approach.

The proper approach is to use a more "sophisticated" data structure to represent the "orientation" of the camera, not just the forward direction. However, since you're just starting out, it's good to take things one step at a time.

like image 179
hasen Avatar answered Oct 01 '22 10:10

hasen