From 3D to 2D

Divide by depth

An interactive lesson with 7 steps, about 6 minutes: you predict, drag and solve, with instant feedback on every answer. It runs in your browser and needs JavaScript.

What you’ll learn

• Perspective: x′ = fx/z, y′ = fy/z: divide by depth.
• Distance sets the strength of perspective; focal length only zooms.
• A z-buffer stores each pixel’s nearest depth to decide what’s in front.

Steps

1. Divide by distance
2. A wireframe cube
3. Farther and smaller
4. Flatten the perspective
5. Field of view
6. Who’s in front?
7. Rails to the horizon