Click here to Skip to main content
13,197,804 members (46,429 online)
Click here to Skip to main content
Add your own
alternative version


30 bookmarked
Posted 12 Oct 2009

Perfect Panning in 3D (Zoom Too)

, 12 Oct 2009
Rate this:
Please Sign up or sign in to vote.
How to pan in perspective views so the point under the cursor stays under the cursor.


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:

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.

// 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.

// 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.

// 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.


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.

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.


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.


  • October 12, 2009: Initial post.


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


About the Author

John Hilton
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

You may also be interested in...


Comments and Discussions

QuestionHow to implement Zoom All and Zoom window? Pin
TaiZhong1-Nov-11 3:50
memberTaiZhong1-Nov-11 3:50 
AnswerRe: How to implement Zoom All and Zoom window? Pin
John Hilton2-Nov-11 20:58
memberJohn Hilton2-Nov-11 20:58 
GeneralRe: How to implement Zoom All and Zoom window? Pin
TaiZhong11-Nov-11 15:21
memberTaiZhong11-Nov-11 15:21 
QuestionIs there a c# version of the code? Pin
TaiZhong31-Oct-11 22:14
memberTaiZhong31-Oct-11 22:14 
AnswerRe: Is there a c# version of the code? Pin
John Hilton2-Nov-11 19:53
memberJohn Hilton2-Nov-11 19:53 
QuestionQuestion about rotation Pin
AllForum2-Sep-11 0:32
memberAllForum2-Sep-11 0:32 
AnswerRe: Question about rotation Pin
John Hilton2-Sep-11 2:55
memberJohn Hilton2-Sep-11 2:55 
GeneralRe: Question about rotation Pin
AllForum16-Sep-11 2:30
memberAllForum16-Sep-11 2:30 
I would like to give you some news.
First, thanks for your quick answer.
I worked a lot since your post because I have not the prerequisites to all well understand.
I added your code in the ConfigureView_OpenGL function to modify the ModelView matrix.
It was not working. I did many tries. I finally found that I have not to store the modified matrix in the ViewToWorld matrix : I have only to give the modified WorldToViewRotate (a locale variable) to opengl.
I don't know if it is correct but in this case it is possible to go back to the initial position after rotations.
On the other hand the movements are no more easy to understand : when the object is not aligned with the axes (after one rotation around Y (up) and one around X (right)) moving the mouse horizontaly no more rotates the object around the up vector ; here is a screenshot : (clik on the image to see a bigger resolution)

Do you think that I used your code correctly ?

Here is what I would like to do :
Do you understand which rotations axis are used ?
Do you think that modifying your code (the SpinXY function for example) is possible to obtain a such result ?

I am trying to modify your rotation because I think that your code is very interesting. So I would like to use it...

QuestionCan it run with OpenGL not DirectX? Pin
waterharbin9-Aug-11 17:06
memberwaterharbin9-Aug-11 17:06 
AnswerRe: Can it run with OpenGL not DirectX? Pin
John Hilton11-Aug-11 1:45
memberJohn Hilton11-Aug-11 1:45 
GeneralProblem with DirectX Pin
Member 147680120-Oct-09 13:31
memberMember 147680120-Oct-09 13:31 
GeneralRe: Problem with DirectX Pin
John Hilton22-Oct-09 2:43
memberJohn Hilton22-Oct-09 2:43 
QuestionCan't run demo Pin
DavidCrow20-Oct-09 3:02
mvpDavidCrow20-Oct-09 3:02 
AnswerRe: Can't run demo Pin
John Hilton22-Oct-09 2:38
memberJohn Hilton22-Oct-09 2:38 
GeneralRe: Can't run demo Pin
DavidCrow22-Oct-09 2:44
mvpDavidCrow22-Oct-09 2:44 
GeneralRe: Can't run demo Pin
John Hilton22-Oct-09 10:03
memberJohn Hilton22-Oct-09 10:03 
QuestionRe: Can't run demo Pin
DavidCrow22-Oct-09 10:05
mvpDavidCrow22-Oct-09 10:05 
AnswerRe: Can't run demo Pin
John Hilton23-Oct-09 0:56
memberJohn Hilton23-Oct-09 0:56 
GeneralRe: Can't run demo Pin
baoyibao12-Jan-10 14:41
memberbaoyibao12-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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171020.1 | Last Updated 12 Oct 2009
Article Copyright 2009 by John Hilton
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid