Page 13: Camera Transformations

We divided viewing into two parts: projection converts the 3D world in front of the camera into the image area; the camera transform puts the right parts of the 3D world in front of the camera. On this page, we focus on the camera transformation.

We can think of the camera as a coordinate system (or rigid body) with its focal or eye point at the center of the coordinate system at the origin. Positioning and aiming the camera is the same as positioning and orienting any other rigid body. However, the ways we talk about determining the configuration may be different. With a camera, we often like to describe it by what it sees (where it is pointing) rather than its orientation.

The lookat transformation

The “lookat” transformation determines the rotation of a rigid body such that its negative z axis is pointing towards a particular position.

Often this transformation is described as “Lookfrom/Lookat/VUp”, since in order to fully specify the configuration we need all three pieces of information.

• Look from - this is the position of the eye point. We can simply place the camera center at this point.
• Look at - is a point in the world that should appear in the center of the image. The negative z axis should start at the eye (look from) point and go through this point.
• Up Vector (Vup) - determines the orientation around the viewing direction.

The up vector may require some explanation. If you position the center of the coordinate system at the look from point and point the Z axis towards the look at point, the camera can still “roll” around its Z axis. We need some way to specify this last degree of freedom. The up vector (called Vup) specifies this by giving a vector in the “world” (the coordinate system that we specified the other points in). The up vector in the world should appear vertical in the image. Note that the up vector is a vector (a direction), not a position.

Here’s a demo that allows you to experiment with it. In the left view, we visualize a second camera using three’s CameraHelper object. Notice that we can see the viewing pyramid, the square of image area which forms the top of the frustum, and a blue triangle that reminds us which side of the camera is “on top”. On the right is the image taken by that camera.

The setup of the second camera is determined by a Look From, Look At, V Up computation. The demo lets us control all three. Try moving the points and changing the vector (if the vector has zero length, there will be a problem). Notice how no matter how you move things around, the purple dot is always in the center of the camera2 image (since the camera is looking at it). Also notice how the teal line is always pointing upwards in the resulting image, since it defines the up direction.

The lookat computation computes a rigid body transformation. It can be used for anything that needs a rigid transformation. For example, here we try it with an orthographic camera. This is mainly so that you can see how the viewing area is a rectangular box, not a frustum. The box looks a little distorted because we are viewing it in perspective in the camera 1 view.

This should also give you more of a sense of how orthographic cameras work.

Of course, we can use lookat to provide the transformation for any object. Here, I asked Gemini to make a plane that points along the Z axis.

Here, the plane is designed to face the positive Z axis, but since the lookat transformation aligns the negative Z axis, the plane points the wrong way. This mistake is so common that in three, they give an option to treat lookat for cameras differently than other objects. The demo actually tells three to treat the plane like a camera.

The Math of Lookat

Deriving the lookat transformation is a rite of passage for graphics students. But it is hard to motivate since three implements it so well for us. The reason it is a nice exercise is that it shows how we can construct a rotation matrix using vector operations. We never need to compute angles. You can watch me do it in a video.

Briefly:

1. We use the look from point as the translation.
2. We use the vector from the at point to the from point as the Z axis (we need to normalize it). This forms the third column of the matrix.
3. We determine the “right” direction (X axis) by taking the cross product of the Z axis (that we just computed) and the Y up vector. Normalizing this vector gives the new X axis, which forms the first column of the matrix.
4. We determine the Y axis by taking the cross product of the X and Z axes. This gives us the 2nd column of the matrix.

Being able to build matrices like this is a valuable skill - even though you may never need to build lookat yourself (since it’s built into three in a very general way).

Lookat in Three

Three implements lookat as the lookat function. Object3D has a lookat method (documentation). This only takes the lookat point as an argument: it uses the object’s center as lookfrom, and each object stores its upvector as object.up. It also provides the traditional lookfrom, lookat, up vector formulation as a matrix operation.

Summary

Lookat is a convenient way to specify a camera. And three provides it in a convenient way that lets us control any object.