๐Ÿ–ผ๏ธ Perspective Projection & Vanishing Points

1-point ยท 2-point ยท 3-point perspective ยท Real camera projection math

Perspective Mode

Camera

Display

Vanishing Points

VPโ‚ (x-direction)โ€“
VPโ‚‚ (z-direction)โ€“
VPโ‚ƒ (y-direction)โ€“

๐Ÿ–ผ๏ธ What It Demonstrates

A camera or eye projects the 3D world onto a flat 2D picture plane through perspective projection: a point at camera-space coordinates (x, y, z) maps to screen coordinates xscreen = fยทx/z, yscreen = fยทy/z, where f is the focal length (set by the field of view) and z is the point's depth in front of the camera. This "perspective divide" โ€” dividing by depth โ€” is exactly why distant objects appear smaller.

A crucial consequence: a family of parallel lines in 3D shares one direction vector, and as points move infinitely far along that direction, their projected x/z and y/z ratios converge to a single fixed value โ€” the line's vanishing point. A scene with edges aligned along one, two or three independent axes relative to the camera therefore produces one, two or three vanishing points: one-point perspective when the camera looks squarely at a box's face, two-point when the camera is rotated to see two side faces obliquely, and three-point when the camera is also tilted up or down so vertical edges converge too.

How to Use

Did You Know?

Linear perspective with true mathematical vanishing points was formalised in the early 1400s by the Florentine architect Filippo Brunelleschi and popularised by Leon Battista Alberti's 1435 treatise Della Pittura, transforming Western painting almost overnight. Before that, medieval art used looser spatial cues without a single consistent viewpoint. The same perspective-divide mathematics implemented here โ€” x/z, y/z โ€” is the exact operation every modern 3D game engine and CAD renderer performs billions of times per second to turn 3D scenes into 2D images on screen.

About this simulation

This simulator projects a floor grid and several 3D boxes onto the canvas using genuine perspective-camera mathematics: world points are translated into camera space and divided by their depth (x/z, y/z) scaled by a focal length derived from the field of view, exactly like a real camera or 3D renderer.

๐Ÿ”ฌ What it shows

The box grid is rotated relative to a fixed camera to switch between one-, two- and three-point perspective. Vanishing points are computed analytically by projecting each principal axis direction (not just sampled edge points) through the same camera transform used for the rest of the scene.

๐ŸŽฎ How to use

Choose a perspective mode, then adjust Field of View, Camera Height and Camera Distance. Toggle the vanishing-point construction lines to see dashed guides converge, and the horizon line to see the eye-level reference all horizontal-direction vanishing points lie on.

๐Ÿ’ก Did you know?

Mathematically correct linear perspective was formalised only around 1415 by Filippo Brunelleschi in Florence โ€” for most of art history, painters had no systematic way to make parallel lines converge realistically.

Frequently asked questions

What is the perspective divide?

It is the operation x_screen = fยทx/z, y_screen = fยทy/z that converts a 3D camera-space point into 2D screen coordinates. Dividing by depth z is what makes distant objects appear smaller and is the core operation behind every perspective-correct 3D renderer.

Why do parallel lines appear to meet at a vanishing point?

All points on a 3D line share one direction vector. As a point moves further along that direction, its x/z and y/z ratios approach a fixed limit determined only by the direction, not the line's starting position โ€” so every line with that direction, no matter where it starts, converges toward the same screen point.

What decides whether a scene shows 1, 2 or 3 vanishing points?

It depends on how many of the object's principal axis directions are oblique (not parallel or perpendicular) to the camera's view direction. A camera looking straight at a box's face has only one oblique axis (depth), giving one vanishing point; rotating the camera or box makes two axes oblique for two-point, and tilting also makes the vertical axis oblique for three-point.

What is the horizon line?

The horizon is the screen-space line where the camera's own eye-level height projects to, since points at that height map to y_screen = 0 (camera-relative) regardless of their distance. All vanishing points for horizontal (level) directions in the scene lie exactly on this line.

Is this the same math used in games and CAD software?

Yes. Real-time 3D engines and CAD renderers use the identical perspective-divide step (dividing x and y by z, scaled by a focal length from field of view) inside their full projection matrices, just implemented with additional clipping and depth-buffering for performance.