Two Coordinate Spaces

• World window: a rectangle in world coordinates that we want to display, with bounds [xw_min, xw_max] x [yw_min, yw_max].
• Viewport: a rectangle on the screen (or canvas) where we want the window to appear, with bounds [xv_min, xv_max] x [yv_min, yv_max].

The window-to-viewport transform maps any (xw, yw) inside the window to its corresponding (xv, yv) inside the viewport.

Derivation

Linear interpolation in each axis preserves relative position: xv = xv_min + (xw - xw_min) sx yv = yv_min + (yw - yw_min) sy where sx = (xv_max - xv_min) / (xw_max - xw_min) sy = (yv_max - yv_min) / (yw_max - yw_min)

Matrix Form

M_wv = T(xv_min, yv_min) S(sx, sy) T(-xw_min, -yw_min).

Aspect Ratio Care

If sx != sy, the image is stretched in one axis. To preserve aspect ratio:

• Choose s = min(sx, sy) and letterbox (add bars to the unused dimension), or
• Choose s = max(sx, sy) and crop the window.

Worked Example

World window [0, 10] x [0, 5]. Viewport [100, 700] x [50, 350] (in pixel coordinates).

• sx = (700-100)/(10-0) = 60, sy = (350-50)/(5-0) = 60.
• Aspect ratios match (both 2:1) -> safe.
• Map (4, 2): xv = 100 + 460 = 340, yv = 50 + 260 = 170.
• Map (10, 5): xv = 100 + 1060 = 700, yv = 50 + 560 = 350. (top right corner).

Use Cases

• Multiple viewports (split-screen multiplayer, design tools with plan/elevation views).
• Zoom: shrink the world window while keeping the viewport fixed -> world appears bigger.
• Pan: translate the world window without changing its size.

Pipeline Position

In modern GPUs, the equivalent step is the viewport transform that follows perspective division. Conceptually identical: linear remap from normalized device coordinates [-1, 1]^3 to integer pixel coordinates.