CS307: Synthetic Cameras

Plan

• Synthetic camera and perspective projection
• Address quiz questions
• (paper/pencil) Exercise on perspective projection
• Projection matrices
• Three.js Camera API and camera tutor demo
• Exercises: Creating desired camera views

Pinhole and Synthetic Cameras

Pinhole camera, aka camera obscura:

Pinhole camera with object and its projection:

The synthetic camera moves the image plane in front of the center of projection to eliminate negatives:

We'll use $(X,Y,Z)$ to refer to the 3D coordinates of a point in space, and $(x,y,z)$ to refer to the projected image coordinates. In the above diagram, the negative $z$ axis points to the right, so $z=-d$.

Consider the $y$ coordinate in the above pictures. Using similar triangles, $Y/Z = y/d$, so $y = d(Y/Z)$, which can be written as $y = Y/(Z/d)$

We can derive an expression for $x$ in a similar way: $x = X/(Z/d)$

Quiz Questions

Now is the time to address your questions.

Exercise: Perspective Projection

Projection Matrices

We've been focusing on perspective projection, which was used to generate the drawing below:

The following two images illustrate orthographic projection:

For orthographic projection, $(x,y,z) = (X,Y,0)$

Both projections can be implemented with matrix multiplication.

Orthographic Projection

What does this do to a point $(X, Y, Z)$?

Perspective Projection

To obtain the projected image coordinates, $(x, y, z)$, we divide the result on the left by $Z/d$ (the perspective division step), yielding the following:

\[ \vecIV{x}{y}{z}{w} = \vecIV{X/(Z/d)}{Y/(Z/d)}{d}{1} \]

Note that \(d\) is the near distance: the distance from the COP (center of projection) to the image plane. (We'll think of $d$ as a positive quantity here)

Camera Setup in Three.js

The diagram below summarizes the key elements of the camera setup:

In the above code example, the camera parameters (adjusted in the GUI) are stored in an object named cameraParams:

var cameraParams = {
    near: 5,
    far: 30,
    fov: 75,                  // degrees
    aspectRatio: 400.0/300.0, // from canvas dimensions, see CSS
    atX: 0,
    atY: 0,
    atZ: 0,
    eyeX: 0,
    eyeY: 0,
    eyeZ: 25,
    upX: 0,
    upY: 1,
    upZ: 0
};

The following code defines a function named setupCamera() that creates a camera with the desired parameters, and then invokes the function and adds the camera to a scene:

function setupCamera (cameraParameters) {
    // set up an abbreviation 
    var cp = cameraParameters;
    // create an initial camera with the desired shape
    var camera = new THREE.PerspectiveCamera(cp.fov,
                                             cp.aspectRatio,
                                             cp.near,
                                             cp.far);
    // set the camera location and orientation
    camera.position.set(cp.eyeX, cp.eyeY, cp.eyeZ);
    camera.up.set(cp.upX, cp.upY, cp.upZ);
    camera.lookAt(new THREE.Vector3(cp.atX, cp.atY, cp.atZ));
    return camera;
}
var camera = setupCamera(cameraParams);
scene.add(camera);

Note that you also need to do something like this at the end of your code:

function render() {
    // assume global variables scene, renderer, and camera
    renderer.render(scene,camera);
}
render();

TW's camera setup did this for us automatically. With this code, though, we can cut the TW apron strings.

Exercises: Creating Desired Camera Views

var boxGeom = new THREE.BoxGeometry(2*r1, 2*r1, 2*r1);
var boxMesh = new THREE.Mesh(boxGeom,
                  new THREE.MeshBasicMaterial({color: THREE.ColorKeywords.red,
                                               wireframe: true}));
boxMesh.position.set(3, r3+r3+r2+r2+r1, 9);
scene.add(boxMesh);

Vup

Most of the time, Vup is very simple: we have \[ V_\mathrm{up} = (0, 1, 0) \]

The minute we want something different, though, Vup can be confusing. Try to imagine it this way:

• Visualize the Vup vector in 3D space, along with the image plane.
• Project the Vup vector onto the image plane
• The frustum spins around the VPN (view plane normal) so that the Vup vector is parallel to the left/right edges.
• When the top of the frustum is mapped onto the canvas, the Vup vector is parallel to the left/right edge of the canvas.

There are two important consequences of the way Vup works:

• The Vup vector can't project to a point, which means it can't be parallel or anti-parallel to the VPN.
• Any change to the Vup vector that doesn't change the direction of its projection on the image plane doesn't affect anything. The image is still oriented the same way.

Preparation for Next Time

Next time, we'll look at how we create surfaces with different material properties, such as dull or shiny surfaces, and how we add light sources to a graphical scene. To prepare:

• Reading for Tuesday: Material and Lighting