Window-to-Viewport Transformation

When creating computer graphics, objects are often defined and manipulated in a coordinate system that's convenient for the application real-world units, mathematical coordinates, or design-specific scales. But ultimately, that content has to be displayed on a screen, which has its own coordinate system measured in pixels. 

The window-to-viewport transformation is the process that bridges this gap mapping coordinates from the application's world coordinate system to the device's screen coordinate system.

What is a Window and a Viewport?

Before understanding the transformation, it's important to clearly distinguish between these two terms, which are often confused:

• Window: A rectangular region defined in world coordinates (the coordinate system in which the actual scene or object is described, using real or normalized units). The window specifies which part of the world coordinate scene is to be displayed — it acts like a camera frame selecting the visible portion of an infinite drawing canvas.
• Viewport: A rectangular region defined in device coordinates (typically screen/pixel coordinates) where the contents of the window will actually be displayed. The viewport specifies where on the screen (or within a screen sub-region) the selected content will appear.

In short: the window says "what to show," and the viewport says "where to show it." The window-to-viewport transformation maps everything inside the window rectangle to the corresponding viewport rectangle, preserving the relative position of every point.

Why is this Transformation Needed?

1. Device independence: Graphics applications are typically designed in world coordinates that are independent of any specific display device. The window-to-viewport transformation allows the same scene description to be rendered correctly on screens of different sizes and resolutions.
2. Zooming and panning: Changing the size or position of the window (while keeping the viewport fixed) implements zooming and panning shrinking the window zooms in (since a smaller world region is stretched to fill the same screen area), while moving the window pans across the scene.
3. Multiple views / split screens: A single world coordinate scene can be mapped to multiple different viewports simultaneously (e.g., split-screen views in CAD software or games), each viewport potentially showing a different window region or the same region at a different size.
4. Aspect ratio and scaling control: The transformation explicitly handles how world coordinates are scaled (uniformly or non-uniformly) to fit a given screen area.

Defining the Window and Viewport Rectangles

Let the window in world coordinates be defined by its lower-left corner (xw_min, yw_min) and upper-right corner (xw_max, yw_max).

Let the viewport in device coordinates be defined by its lower-left corner (xv_min, yv_min) and upper-right corner (xv_max, yv_max).

The goal is: given any point (xw, yw) inside the window, find its corresponding point (xv, yv) inside the viewport, such that the relative position of the point within the window matches its relative position within the viewport.

Derivation of the Mapping Equations

The key idea is that the fractional position of a point within the window (how far along the width and height it is, as a proportion) must be preserved when mapped into the viewport.

For the X-coordinate, the fractional position within the window is:

(xw - xw_min) / (xw_max - xw_min)

This same fraction must apply within the viewport:

(xv - xv_min) / (xv_max - xv_min) = (xw - xw_min) / (xw_max - xw_min)

Solving for xv:

xv = xv_min + (xw - xw_min) × [(xv_max - xv_min) / (xw_max - xw_min)]

Similarly for the Y-coordinate:

yv = yv_min + (yw - yw_min) × [(yv_max - yv_min) / (yw_max - yw_min)]

Defining the Scale Factors

It's common to define two scale factors that represent how much the window is stretched or shrunk to fit the viewport:

sx = (xv_max - xv_min) / (xw_max - xw_min)
sy = (yv_max - yv_min) / (yw_max - yw_min)

With these, the mapping equations simplify to:

xv = xv_min + (xw - xw_min) × sx
yv = yv_min + (yw - yw_min) × sy

Window-to-Viewport as a Composite Transformation

The mapping equations above can be broken down into a clear sequence of basic transformations, making it a perfect real-world example of a composite transformation:

1. Translate the window so its lower-left corner moves to the origin: T(-xw_min, -yw_min)
2. Scale the result by (s_x, s_y) to match the viewport's size: S(sx, sy)
3. Translate the scaled result so its lower-left corner moves to the viewport's lower-left corner: T(xv_min, yv_min)

Combined matrix:

M = T(xv_min, yv_min) · S(sx, sy) · T(-xw_min, -yw_min)

Full 3×3 Matrix Form

M = | sx   0   (xv_min - xw_min·sx) |
    | 0   sy   (yv_min - yw_min·sy) |
    | 0    0           1            |

This single matrix can be applied directly to every point in the window to obtain its corresponding viewport position.

Important Notes on Aspect Ratio

If s_x ≠ s_y (i.e., the window and viewport have different width-to-height ratios), the displayed image will appear stretched or squashed circles may appear as ellipses, and squares may appear as rectangles. 

To avoid this visual distortion, many graphics systems enforce uniform scaling by choosing:

sx = sy = min[(xv_max - xv_min)/(xw_max - xw_min), (yv_max - yv_min)/(yw_max - yw_min)]

This picks the smaller of the two possible scale factors, ensuring the entire window fits inside the viewport without distortion (though it may leave empty space, often called "letterboxing," along one dimension).

Y-Axis Inversion (A Practical Consideration)

In many world coordinate systems, the Y-axis increases upward, but in most screen/device coordinate systems, the Y-axis increases downward (with the origin at the top-left corner of the screen). 

When this is the case, an additional reflection step is needed in the transformation to flip the Y direction, or the viewport's y-bounds are simply swapped (yv_min and yv_max exchanged) so the mapping naturally inverts the vertical direction.

Properties of the Window-to-Viewport Transformation

1. Preserves relative position: A point's fractional position within the window is identical to its fractional position within the viewport.
2. Composite in nature: As shown above, it is always expressible as translate → scale → translate, making it a direct practical application of composite transformation theory.
3. Independent scale factors: sx and sy can differ, allowing non-uniform stretching, though this introduces aspect ratio distortion unless deliberately corrected.
4. Reversibility: The transformation is invertible (as long as sx, sy ≠ 0), allowing viewport coordinates to be mapped back to window/world coordinates useful for tasks like converting a mouse click position into world coordinates.
5. Multiple viewports from one window: The same window can be mapped to several different viewports (each with its own matrix), enabling multi-view layouts from a single underlying scene definition.

Solved Numerical Problems

Problem 1

A window is defined with corners (0, 0) and (20, 20) in world coordinates. The viewport is defined with corners (0, 0) and (400, 400) in screen coordinates. Find the scale factors s_x and s_y, and map the world point (10, 5) to its viewport position.

Solution:

sx = (400-0)/(20-0) = 20
sy = (400-0)/(20-0) = 20

xv = 0 + (10-0) × 20 = 200
yv = 0 + (5-0) × 20 = 100

Viewport point = (200, 100)

Problem 2

A window has corners (10, 10) and (30, 30). The viewport has corners (0, 0) and (200, 100). Find s_x, s_y, and map the world point (20, 20) to viewport coordinates.

Solution:

sx = (200-0)/(30-10) = 200/20 = 10
sy = (100-0)/(30-10) = 100/20 = 5

xv = 0 + (20-10) × 10 = 100
yv = 0 + (20-10) × 5 = 50

Viewport point = (100, 50)

Note that sx ≠ sy here, so this mapping introduces aspect-ratio distortion a circle in the window would appear as an ellipse in the viewport.

Problem 3

A window has corners (0, 0) and (50, 50), and is mapped to a viewport with corners (100, 100) and (300, 300) (i.e., the viewport itself does not start at the screen origin). Map the world point (25, 25) the exact center of the window to viewport coordinates, and verify it lands at the center of the viewport.

Solution:

sx = (300-100)/(50-0) = 200/50 = 4
sy = (300-100)/(50-0) = 200/50 = 4

xv = 100 + (25-0) × 4 = 100 + 100 = 200
yv = 100 + (25-0) × 4 = 100 + 100 = 200

Viewport point = (200, 200)

Verification: The viewport's center is ((100+300)/2, (100+300)/2) = (200, 200) Matches confirming the window's center correctly maps to the viewport's center.

Problem 4

A window has corners (0, 0) and (100, 50) (world coordinates, with Y increasing upward). It is mapped to a screen viewport with corners (0, 0) and (640, 320), where the screen's Y-axis increases downward. Map the world point (50, 50) (top edge of the window) to its correct screen position, accounting for Y-axis inversion.

Solution:

Normal scale factors:

sx = 640/100 = 6.4
sy = 320/50 = 6.4

Since the screen Y-axis is inverted, we flip the vertical mapping by using (yw_max - yw) instead of (yw - yw_min):

xv = 0 + (50-0) × 6.4 = 320
yv = 0 + (50 - 50) × 6.4 = 0   [using yv = (yw_max - yw) × sy, since yw=50=yw_max]

Screen point = (320, 0)

This places the point at the top of the screen (y=0 in screen coordinates, which represents the top in inverted-Y systems) correctly corresponding to the top edge of the world window.

Problem 5

A window has corners (0, 0) and (40, 20) note its width is twice its height. It needs to be mapped into a square viewport with corners (0, 0) and (300, 300) without distortion (preserving aspect ratio). Find the uniform scale factor to use, and determine the actual occupied region of the viewport.

Solution:

Possible scale factors if mapped independently:

sx = 300/40 = 7.5
sy = 300/20 = 15

To avoid distortion, choose the smaller value:

s = min(7.5, 15) = 7.5

Using s = 7.5 uniformly:

Mapped width = 40 × 7.5 = 300  (fills the viewport horizontally)
Mapped height = 20 × 7.5 = 150  (only half the viewport vertically)

The image occupies the full viewport width (300) but only 150 out of 300 units of height, leaving 150 units of empty space (75 above and below, if centered) this is the "letterboxing" effect.

Problem 6 (Practice try it yourself)

A window has corners (5, 5) and (25, 15). The viewport has corners (50, 50) and (450, 250). Find the scale factors s_x and s_y, and map the world point (15, 10) the center of the window to viewport coordinates. Verify your result equals the center of the viewport.

Conclusion

The window-to-viewport transformation is one of the most practically important transformations in computer graphics every single scene rendered to a screen relies on it to convert world coordinates into pixel coordinates. 

It serves as an excellent real-world demonstration of composite transformation theory in action: a translate–scale–translate sequence that handles zooming, panning, aspect ratio, and multi-viewport rendering, all through the same underlying mathematical framework covered in earlier transformation topics.