OpenGL Programming/Modern OpenGL Tutorial Virtual Trackball

The virtual trackball is a tool to rotate objects with the mouse naturally.

The concept


Imagine a virtual ball that is just behind the screen. By clicking it with your mouse, you would pinch it, and by moving your mouse you would make the ball spin around its center. And the same rotation would be applied to an object in the OpenGL scene!

The diagram on the right shows the virtual ball in top view. The black line at the bottom is the screen, and x1 and x2 are two successive mouse positions during the drag. This is shown in 2D but the same principle applies in 3D.

The goal is to compute the α angle and the rotation axis. This is the point where you understand that maths are really necessary as soon as you get serious with OpenGL ;) In particular we'll need the Pythagorean theorem, the vector dot product and cross product.

We'll:


 * 1) Convert the screen coordinates (in pixels) to camera coordinates (in [-1, 1])
 * 2) Compute the vectors OP1 and OP2, the points at the surface of the ball that match our mouse click
 * 3) * x and y coordinates are directly taken from the click in camera coordinates
 * 4) * z coordinate is computed using the classical Pythagorean theorem $$\scriptstyle b \;=\; \sqrt{c^2 \,-\, a^2}. \,$$
 * 5) * If P1 or P2 is too far away from the sphere ($$\scriptstyle \left|\mathbf{OP}\right| \;>\; 1$$), we normalize it to get the nearest point on the surface of the ball
 * 6) We have $$\scriptstyle \mathbf{a} \cdot \mathbf{b} \;=\; \left\|\mathbf{a}\right\| \, \left\|\mathbf{b}\right\| \cos (\theta) $$, and the ball's size is 1 ($$\scriptstyle \left\|\mathbf{a}\right\| \;=\; \left\|\mathbf{b}\right\| \;=\; 1$$), so we get the angle using $$\scriptstyle \arccos\left(\mathbf{OP1}\cdot\mathbf{OP2}\right)$$.
 * 7) Get the rotation axis in 3D, we compute $$\scriptstyle\mathbf{OP1}\times\mathbf{OP2}$$, which will give a unit perpendicular vector

Capturing mouse events
GLUT offers a way to get the mouse clicks and drag events:

will call  for each mouse click, where:
 * button is GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON or GLUT_RIGHT_BUTTON
 * state is GLUT_DOWN or GLUT_UP
 * x and y are the screen coordinates, starting from the top-left corner (y is reversed compared to OpenGL coordinates!)

will call  for each mouse move when any button is pressed down, where x and y are the screen coordinates.

You also have  which works similarly for mouse moves when no button is pressed at all.

So we add two functions to keep track of the mouse moves when the left button is pressed:

Compute OP1 and OP2
We add a new function to compute the trackball surface point:

We first convert the x,y screen coordinates to [-1,1] coordinates (and reverse y coordinates). Then we use the Pythagorean theorem to check the length of the OP vector and compute the z coordinate, as explained above.

Compute the angle and axis
Once we have OP1 and OP2 (here named  and  ), we can compute the angle with.

Since we're using  variables, there may be precision issues:   may return a value slightly greater than 1, and   will return , which means an invalid float. The consequence is that our rotation matrix will be all messed, and usually our object will just disappear from the screen! To remedy this, we cap the value with a maximum of.

An extra trick is converting the rotation axis from camera coordinates to object coordinates. It's useful when the camera and object are placed differently. For instace, if you rotate the object by 90° on the Y axis ("turn its head" to the right), then perform a vertical move with your mouse, you make a rotation on the camera X axis, but it should become a rotation on the Z axis (plane barrel roll) for the object. By converting the axis in object coordinates, the rotation will respect that the user work in camera coordinates (WYSIWYG). To transform from camera to object coordinates, we take the inverse of the MV matrix (from the MVP matrix triplet).

And last we can apply our transformation using  as usual :)

Exercises

 * Is the rotation angle proportional to the mouse move? Try to make a move near the border of the virtual ball.
 * The virtual ball will stop rolling when the mouse is too far away. Other mouse controls are possible.  For instance, study how dragging with the middle button works in the Blender 3D modeler.
 * Try different roll speeds, by multiplying the rotation angle.