Click here to Skip to main content
15,867,568 members
Articles / Multimedia / DirectX

Perfect Panning in 3D (Zoom Too)

Rate me:
Please Sign up or sign in to vote.
4.91/5 (12 votes)
12 Oct 2009CPOL5 min read 73.7K   3.3K   31   19
How to pan in perspective views so the point under the cursor stays under the cursor.

Image 1

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder Spatial Freedom
Australia 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

Comments and Discussions

 
QuestionHow to implement Zoom All and Zoom window? Pin
TaiZhong1-Nov-11 3:50
TaiZhong1-Nov-11 3:50 
AnswerRe: How to implement Zoom All and Zoom window? Pin
John Hilton2-Nov-11 20:58
John Hilton2-Nov-11 20:58 
GeneralRe: How to implement Zoom All and Zoom window? Pin
TaiZhong11-Nov-11 15:21
TaiZhong11-Nov-11 15:21 
QuestionIs there a c# version of the code? Pin
TaiZhong31-Oct-11 22:14
TaiZhong31-Oct-11 22:14 
AnswerRe: Is there a c# version of the code? Pin
John Hilton2-Nov-11 19:53
John Hilton2-Nov-11 19:53 
QuestionQuestion about rotation Pin
AllForum2-Sep-11 0:32
AllForum2-Sep-11 0:32 
Thanks for your code and your explanations. I do not all understand yet in particular the OnPicked function but your code works fine ! Smile | :)
As you are a specialist I would like to ask you a question because I do not find anything on the web.
Your camera enables to rotate around a model. But after rotations it is practically not possible to position exactly in front, back or top of the model.
If you look at Google SketchUp you will see that it is possible to rotate the model (it seems to not move as free as with your camera) but it is also possible to go back to a model really standing up and not like a Tower of Pisa...
The rotation is more usable in a CAD context.
Do you know how to do that (the principle)? Or what keywords to search on the net to find explanations ?
Is it possible to modify your camera to obtain a such result ?

Thanks in advance for your advices.
AnswerRe: Question about rotation Pin
John Hilton2-Sep-11 2:55
John Hilton2-Sep-11 2:55 
GeneralRe: Question about rotation Pin
AllForum16-Sep-11 2:30
AllForum16-Sep-11 2:30 
QuestionCan it run with OpenGL not DirectX? Pin
waterharbin9-Aug-11 17:06
waterharbin9-Aug-11 17:06 
AnswerRe: Can it run with OpenGL not DirectX? Pin
John Hilton11-Aug-11 1:45
John Hilton11-Aug-11 1:45 
GeneralProblem with DirectX Pin
Member 147680120-Oct-09 13:31
Member 147680120-Oct-09 13:31 
GeneralRe: Problem with DirectX Pin
John Hilton22-Oct-09 2:43
John Hilton22-Oct-09 2:43 
QuestionCan't run demo Pin
David Crow20-Oct-09 3:02
David Crow20-Oct-09 3:02 
AnswerRe: Can't run demo Pin
John Hilton22-Oct-09 2:38
John Hilton22-Oct-09 2:38 
GeneralRe: Can't run demo Pin
David Crow22-Oct-09 2:44
David Crow22-Oct-09 2:44 
GeneralRe: Can't run demo Pin
John Hilton22-Oct-09 10:03
John Hilton22-Oct-09 10:03 
QuestionRe: Can't run demo Pin
David Crow22-Oct-09 10:05
David Crow22-Oct-09 10:05 
AnswerRe: Can't run demo Pin
John Hilton23-Oct-09 0:56
John Hilton23-Oct-09 0:56 
GeneralRe: Can't run demo Pin
baoyibao12-Jan-10 14:41
baoyibao12-Jan-10 14:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.