Orthographic Projection

Harbour Hopper has two ways to look at the harbour: the classic side view, and a 3D chase-camera mode that flies behind the drone. Both are cameras, and the screen is flat in both, but the harbour has depth: boats near the camera, the lighthouse far behind. Every frame, the renderer must squash 3D positions onto a 2D screen. That squash is a projection, and the simplest kind just throws the depth away.

The rule

Orthographic: drop the depth, keep the size.

Work in camera space: the camera sits at the origin, x points right, y points up, and z is depth, how far in front of the camera a point is. (Engines disagree about which way z points; in this section, bigger z means farther away.)

An orthographic projection sends $(x, y, z)$ to $(x, y)$. Depth is kept only to decide what is drawn in front of what. Because distance never enters the formula:

• a crate 5 m away and a crate 50 m away are drawn the same size;
• parallel lines stay parallel on screen.

The camera shows a rectangular view box, which the renderer stretches onto the screen. The side view shows 32 m × 18 m of harbour on a 1920 × 1080 screen: 60 pixels per metre in both directions. Pixel rows count down from the top of the screen, so y has to be flipped:

$s_x = 60\,(x - \text{left}), \qquad s_y = 60\,(\text{top} - y)$

Orthographic cameras suit 2D games, maps and minimaps, strategy views, level editors and interface panels: anywhere clear measurement matters more than realism. What they give up is the strongest depth cue there is. Nothing shrinks with distance.

The shortcut

Ignore z, subtract the box's corner, multiply by pixels per metre, flip y.

The trap is a view box whose shape doesn't match the screen. Show the same 32 × 18 m box on a 4:3 screen and you get different pixels per metre across and down, so round buoys turn into ovals. Always match the box to the screen's aspect ratio.

Drills

Answer fast — trust the rule.

Remember

• Orthographic projection drops depth: size doesn't change with distance, and parallel lines stay parallel.
• Screen position: subtract the view box's corner, multiply by pixels per unit, flip y.
• Match the view box's shape to the screen, or circles become ovals.