Click here to Skip to main content
15,558,672 members
Articles / Multimedia / DirectX
Posted 12 Oct 2009


31 bookmarked

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
How to pan in perspective views so the point under the cursor stays under the cursor.

Image 1


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)

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 4:50
TaiZhong1-Nov-11 4:50 
AnswerRe: How to implement Zoom All and Zoom window? Pin
John Hilton2-Nov-11 21:58
John Hilton2-Nov-11 21:58 
Zoom All is actually a fairly involved algorithm. Zoom window is more straightforward - see below.

One of my to-do items is to build up a motion toolkit based on the view volume parameters. With a standard set of viewing parameters all the various interactive motion algorithms can be written to avoid having to continually reinvent the wheel. Many interactive motion algorithms apply to all types of input devices; 2D and 3D mice, joysticks, game controllers, etc.

Briefly, the zoom window algorithm...
ZoomWindow( vv, v2w, vp, pt1, pt2 )
// vv - view volume... hw, hh, zn, zf, iez, tsx, tsy
// v2w - view-to-world rotate/translate
// vp - viewport in pixel coordinates... l,r,b,t
// pt1, pt2 - picked screen zoom window corners in pixel coordinates
     // determine left, right, bottom, top from pt1 and pt2
     l = min(pt1.x, pt2.x)
     r = max(pt1.x, pt2.x)
     b = min(pt1.y, pt2.y)
     t = max(pt1.y, pt2.y)
     // pan the center of the view rectangle to the center of the zoom window
     PixelToViewRectScale = vv.hw*2/(vp.r-vp.l)
     v2w.trn.x += (0.5*(l+r)-0.5*(vp.l+vp.r))*PixelToViewRectScale
     v2w.trn.y += (0.5*(b+t)-0.5*(vp.b+vp.t))*PixelToViewRectScale
     // scale the view rectangle and the eyepoint distance
     DeltaScale = (r-l) / (vp.r-vp.l)
     vp.hw *= DeltaScale
     vp.hh *= DeltaScale
     iez /= DeltaScale

The orthographic Zoom All involves determining the scenes view space bounding volume and adjusting the view volume accordingly. The perspective Zoom All involves determining the normal vectors (in view space) for the left, right bottom and top view volume planes then transforming the scene, or a bounding volume, into view space and dot-producting the view space points with the normal vectors to determine the signed distance along the unit normal directions. These distances are then scaled out slightly to keep the scene slightly off the window's edges then used to translate the view volume to snugly fit over these four points. The view volume origin and near and far clipping planes also need to be managed. There are other algorithms but this algorithm provides a good result.

Again, if you or anyone else develops the code it, or a link to the code, can be posted in this article.
GeneralRe: How to implement Zoom All and Zoom window? Pin
TaiZhong11-Nov-11 16:21
TaiZhong11-Nov-11 16:21 
QuestionIs there a c# version of the code? Pin
TaiZhong31-Oct-11 23:14
TaiZhong31-Oct-11 23:14 
AnswerRe: Is there a c# version of the code? Pin
John Hilton2-Nov-11 20:53
John Hilton2-Nov-11 20:53 
QuestionQuestion about rotation Pin
AllForum2-Sep-11 1:32
AllForum2-Sep-11 1:32 
AnswerRe: Question about rotation Pin
John Hilton2-Sep-11 3:55
John Hilton2-Sep-11 3:55 
GeneralRe: Question about rotation Pin
AllForum16-Sep-11 3:30
AllForum16-Sep-11 3:30 
QuestionCan it run with OpenGL not DirectX? Pin
waterharbin9-Aug-11 18:06
waterharbin9-Aug-11 18:06 
AnswerRe: Can it run with OpenGL not DirectX? Pin
John Hilton11-Aug-11 2:45
John Hilton11-Aug-11 2:45 
GeneralProblem with DirectX Pin
Member 147680120-Oct-09 14:31
Member 147680120-Oct-09 14:31 
GeneralRe: Problem with DirectX Pin
John Hilton22-Oct-09 3:43
John Hilton22-Oct-09 3:43 
QuestionCan't run demo Pin
David Crow20-Oct-09 4:02
David Crow20-Oct-09 4:02 
AnswerRe: Can't run demo Pin
John Hilton22-Oct-09 3:38
John Hilton22-Oct-09 3:38 
GeneralRe: Can't run demo Pin
David Crow22-Oct-09 3:44
David Crow22-Oct-09 3:44 
GeneralRe: Can't run demo Pin
John Hilton22-Oct-09 11:03
John Hilton22-Oct-09 11:03 
QuestionRe: Can't run demo Pin
David Crow22-Oct-09 11:05
David Crow22-Oct-09 11:05 
AnswerRe: Can't run demo Pin
John Hilton23-Oct-09 1:56
John Hilton23-Oct-09 1:56 
GeneralRe: Can't run demo Pin
baoyibao12-Jan-10 15:41
baoyibao12-Jan-10 15: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.