HTML and CSS Reference
In-Depth Information
Perspective
Perspective is how we determine whether something is closer to us or farther away, or—to put it another
way—how we make something look like it is closer or farther. There are a number of techniques for
presenting perspective, but we concentrate on two here:
Things get smaller as they get farther away.
Things converge on a vanishing point as they get farther away.
You've probably seen examples of train tracks coming to a point on the horizon to illustrate the vanishing
point. So, when you move something on the z axis, you need to do two things:
Scale it up or down.
Move it closer to or farther away from the vanishing point.
When working with only two dimensions, you can get away with using the screen x and y coordinates for
your object's x and y position—you just do a one-to-one mapping. But this won't work in 3D, because two
objects can have the same x and y position, and yet, due to their depth, have a different position on the
screen. Each object you move in 3D should have its own x, y, and z coordinates that have nothing to do
with the screen position, these coordinates describe the object's position in virtual space. The perspective
calculation tells you where to put the object on the screen.
The perspective formula
The idea is that as something moves farther away (z increases), its scale approaches 0 and its x, y
position converges on the 0, 0 of the vanishing point. Because the ratio of distance to scale is the same as
the ratio of distance to convergence, you need to figure out what that ratio is for a given distance and use it
in both places. The diagram in Figure 15-3 helps to explain this concept.
z
fl
Object
Viewpoint
Picture plane
Figure 15-3.
Perspective seen from the side
Here, you have an object off in the distance, a viewpoint we look from (the camera), and a picture plane,
which we look through to see the scene. You have the distance of the object to the picture plane, which is
the z value, and, you have the distance from the viewpoint to the picture plane. This last one is similar to
the focal length of a camera lens, so we use the variable
fl
to represent it. A long focal length can be
compared to a telephoto lens on a camera, with a narrow view that compresses the distance between
