15,567,786 members
Articles / Multimedia / DirectX
Article
Posted 12 Oct 2009

68.1K views
31 bookmarked

# Perfect Panning in 3D (Zoom Too)

Rate me:
How to pan in perspective views so the point under the cursor stays under the cursor.

## Introduction

Everyone reading this article would be familiar with the ‘grab’ type of panning of 2D images, as with Adobe Acrobat®, where the mouse grabs the image and drags it around. The point under the cursor stays under the cursor. When it comes to 3D, a number of programs provide this intuitive interaction for parallel (orthographic) views, but I don’t know of any that implement it for perspective views. Some 3D programs do move objects around on a construction-type plane in 3D so the point on the plane stays under the mouse. The panning technique shown here is for more general use.

## General Viewing Parameters

The demo program is derived from the demo program in A New Perspective on Viewing, which proposes a set of general viewing parameters. All interactive motion algorithms need to use viewing parameters to transform screen based mouse motion into virtual space motion. From the previous article, the seven general viewing parameters that specify the view volume in view space are:

C++
```struct TViewVolume { float hw, hh, zn, zf, iez, tsx, tsy; };
// These values are specified in view space
//    hw  - HalfWidth of cross section rectangle in z=0 plane
//    hh  - HalfHeight of cross section rectangle in z=0 plane
//    zn  - near clipping plane at z=zn
//    zf  - far clipping plane at z=zf
//    iez - inverse of the eyepoint's z-coordinate (0 for parallel views)
//    tsx - tan(SkewXAngle), typically 0
//    tsy - tan(SkewYAngle), typically 0
// SkewXAngle and SkewYAngle are the angles between the axis of the view volume
// and the view space z-axis.```

A view-to-world rotate/translate transformation, which positions the view volume in world space, completes the view specification.

## The Panning Algorithm

Parallel view panning is relatively simple, and needs to scale the mouse pixel motion to the virtual space. In perspective views, items closer to the eye-point pan faster across the screen than items further away. To keep the picked point under the cursor requires physical pixel motion to be mapped to the corresponding virtual plane passing through the picked point.

The z-buffer value is the picked point's screen space z-coordinate. A reverse transformation from screen (depth buffer) space to view space maps the screen space point to view space. The demo's source code shows how to read the depth buffer value in both OpenGL and Direct3D. The z-buffer value is provided as a value between 0.0 (front) and 1.0 (back). The derivation of the reverse transformation formulae are given as a comment in the `OnPicked()` method in Main.cpp.

C++
```// Transform the screen space z-coordinate to view space
float m33 = -(1-vv.zf*vv.iez) / (vv.zn-vv.zf);
ViewZ = (ScreenZ+m33*vv.zn) / (ScreenZ*vv.iez+m33);
MotionZ = ViewZ;    // save for repeated use```

A pixel-to-view-rectangle scale factor is calculated and used to map the physical mouse 2D point to a virtual 2D point in the view space z=0 plane. The 2D point is then projected onto the z=MotionZ plane.

C++
```// Calculate the pixel-to-view-rectangle scale factor
RECT rect;
GetClientRect( hWnd, &rect );
float PixelToViewRectFactor = vv.hw * 2.0f / rect.right;

// Calculate the 2D picked point on the view space z=0 plane.
// Note: Screen +Y points down.
ViewX =   ScreenX * PixelToViewRectFactor - vv.hw;
ViewY = -(ScreenY * PixelToViewRectFactor - vv.hh);

// Now project the 2D point from the z=0 plane to the z=MotionZ plane
ViewX += -ViewX*MotionZ*vv.iez + vv.tsx*MotionZ;
ViewY += -ViewX*MotionZ*vv.iez + vv.tsy*MotionZ;
ViewZ  =  MotionZ;```

`rect.right` is the window’s client area width in pixels. `vv.hw` is the HalfWidth general viewing parameter that specifies half the width of the rectangular cross section of the viewing volume at the z=0 view space plane. `vv.hh` is similarly the HalfHeight general viewing parameter.

Notice how the calculations handle both parallel (iez=0) and perspective views. These formulae are examples of how the general viewing parameters often don’t require code to differentiate between parallel and perspective views. See A New Perspective on Viewing for information on the general viewing parameters.

For each repetitive mouse move, the move-from and move-to 3D view space points are calculated then used to update the ViewToWorld translation.

C++
```// Calculate the view space pan vector, transform it to world space
// and subtract it from the ViewToWorld.trn
ViewToWorld.trn -= (MovedTo - MovedFrom) * ViewToWorld.rot;```

`ViewToWorld.trn` is the translation portion of the view-to-world transformation, and is a point in world space. Likewise, `ViewToWorld.rot` is the 3x3 rotation portion. The delta view space translation is calculated by subtracting the vectors; then the view space delta is transformed to world space by multiplying by the ViewToWorld rotation. Finally, the world space delta is added to the ViewToWorld translation. Overloaded operators implement the vector subtraction and the vector times matrix operation in the last line.

The code that reads the z-buffer value is a little convoluted as the demo program redraws the screen then, after the redraw, the depth buffer is read and the value passed back using a callback. This technique is useful for quick response programs that clear the back buffer and z-buffer straight after a redraw to minimize the response time from reading the latest input values to showing the updated image.

Each mouse move event is converted into a delta mouse movement to allow other motion sources, such as animated movements, to work seamlessly with the mouse. The panning algorithm will permit other motion sources to move the point under the cursor away from the cursor, but the interaction still makes intuitive sense to the user.

## Zoom

The zoom/spinZ interaction also keeps the picked point under the cursor. This type of interaction is similar to the 2D multi-touch screen interaction using two fingers where one finger is fixed at the center of the window. The view space origin's z-coordinate needs to be moved to match the picked point’s z-coordinate, which requires the view size to be adjusted. All the other calculations are similar to those for panning.

C++
```if (ISPERSPECTIVE(vv.iez) && ISPRESSED(GetKeyState( VK_SHIFT )))
{
float ez = 1/vv.iez;
HalfViewSize *= (ez-ViewZ)/ez;      // scale the z=0 view rectangle
AVec3f Delta = CVec3f(0,0,ViewZ);   // the view space translation
Delta = Delta * ViewToWorld.rot;    // now world space
ViewToWorld.trn += Delta;           // move the origin
ViewZ = 0;                          // move the picked point
InvalidateRect( hWnd, NULL, FALSE );
}```

The `SpatialMath` vector and matrix types and overloaded operators are used to simplify the code. See SpatialMath.h for more information.

Most users prefer zoom as a separate action to spin. For instance, a vertical mouse motion can be used to zoom the view in and out or scale an object up and down. The use of a view space z-coordinate is just as applicable to this type of zoom.

## Conclusion

With the perfect panning and zooming motion algorithms appearing relatively simple, it is surprising that these algorithms aren’t already in widespread use. The simplicity derives from the use of the general viewing parameters, and it can prove difficult to implement these algorithms with other sets of viewing parameters.

Perfect panning in perspective views is an intuitive and subconscious way of adjusting the rate of virtual motion so the movement of the 2D image matches the movement of the mouse. Users will love the direct control provided by perfect panning.

## History

• October 12, 2009: Initial post.

Written By
Founder Spatial Freedom
Australia
Software engineer, mechanical engineer, electronics engineer, inventor, manager, entrepreneur, husband, father, friend.
B.Sc. B.E.(Hons) M.Eng.Sc.
Some things I've done
- Invented the Spaceball(R)/1983 and Astroid(R)/2002 3D mice
- Patents: 3D mouse, data compression, acoustic transducer
- Wrote animation software in mid 1980s for TV commercials
- Wrote a basic CAD drawing program in 1980s
- Lived in Boston, Massachusetts for 11 years
- Architected and managed full custom ASIC chip
- Reviewed bionic eye technology for investment purposes
- Product development on CPR aid for heart attacks
- Developed an electronic sports whistle
- Was actually stranded on a deserted Pacific island
- Software: lots - embedded, device driver, applications
Some things I want to do
- Develop more cool hardware/software products
- Solve the 3D mouse software barrier to proliferate 3D mice
- Help bring 3D to the masses
- Help others

 First Prev Next
 How to implement Zoom All and Zoom window? TaiZhong1-Nov-11 4:50 TaiZhong 1-Nov-11 4:50
 Re: How to implement Zoom All and Zoom window? John Hilton2-Nov-11 21:58 John Hilton 2-Nov-11 21:58
 Re: How to implement Zoom All and Zoom window? TaiZhong11-Nov-11 16:21 TaiZhong 11-Nov-11 16:21
 Is there a c# version of the code? TaiZhong31-Oct-11 23:14 TaiZhong 31-Oct-11 23:14
 Re: Is there a c# version of the code? John Hilton2-Nov-11 20:53 John Hilton 2-Nov-11 20:53
 Question about rotation AllForum2-Sep-11 1:32 AllForum 2-Sep-11 1:32
 Re: Question about rotation John Hilton2-Sep-11 3:55 John Hilton 2-Sep-11 3:55
 What you're asking for I call "Keep Upright". There don't seem to be any good sources I can point you to for motion algorithms like this since motion algorithms are fundamentally based on viewing parameters and there happen to be a myriad of viewing parameters in use in today's 3D applications. The best mathematical graphics text in my opinion was an English translation from a Hungarian mathematician but I just cannot remember the author or book details (wish I'd bought one). A rotation matrix can be considered to be the right (+X), up(+Y) and back(+Z) unit vectors in the parent space of the right (1,0,0), up (0,1,0) and back (0,0,1) child space vectors. Consider    (1,0,0)*WorldToView.rot=(rX,rY,rZ)    (0,1,0)*WorldToView.rot=(uX,uY,uZ)    (0,0,1)*WorldToView.rot=(bX,bY,bZ) So WorldToView.rot is actually    rX rY rZ    uX uY uZ    bX bY bZ i.e. the world space's right, up and back vectors expressed in view space coordinates. "Keep Upright" is an algorithm that spins the transformation matrix with the smallest rotation to place the world space's up vector in the view space's Y-Z plane where uX is zero. C++ ```double& uX = WorldToView.rot.m33[1][0]; // use a reference if (abs(uX) < VERY_SMALL) // done return; if (abs(uX) > 1.0-VERY_SMALL) { // extreme case - almost +-90 degrees so set identity WorldToView.rot = Identity.rot; return; } double Angle=asin(uX); // imagine a triangle from (0,0,0) to (uX,uY,uZ) to (0,uY,uZ) WorldSpaceSpinMatrix = RotArbAxis( Angle, CrossProduct( Vector(uX,0,0), WorldToView.rot.m33[1] )); WorldToView.rot = WorldSpaceSpinMatrix * WorldToView.rot;```You'll have to flesh out the coding details but hopefully the algorithm is clear enough. The cross product may also need to be reversed. RotArbAxis is a rotation about an arbitrary axis given an angle and an axis. Good luck. John Hilton
 Re: Question about rotation AllForum16-Sep-11 3:30 AllForum 16-Sep-11 3:30
 Can it run with OpenGL not DirectX? waterharbin9-Aug-11 18:06 waterharbin 9-Aug-11 18:06
 Re: Can it run with OpenGL not DirectX? John Hilton11-Aug-11 2:45 John Hilton 11-Aug-11 2:45
 Problem with DirectX Member 147680120-Oct-09 14:31 Member 1476801 20-Oct-09 14:31
 Re: Problem with DirectX John Hilton22-Oct-09 3:43 John Hilton 22-Oct-09 3:43
 Can't run demo David Crow20-Oct-09 4:02 David Crow 20-Oct-09 4:02
 Re: Can't run demo John Hilton22-Oct-09 3:38 John Hilton 22-Oct-09 3:38
 Re: Can't run demo David Crow22-Oct-09 3:44 David Crow 22-Oct-09 3:44
 Re: Can't run demo John Hilton22-Oct-09 11:03 John Hilton 22-Oct-09 11:03
 Re: Can't run demo David Crow22-Oct-09 11:05 David Crow 22-Oct-09 11:05
 Re: Can't run demo John Hilton23-Oct-09 1:56 John Hilton 23-Oct-09 1:56
 Re: Can't run demo baoyibao12-Jan-10 15:41 baoyibao 12-Jan-10 15:41
 Last Visit: 31-Dec-99 19:00     Last Update: 6-Feb-23 20:25 Refresh 1