CS307: Synthetic Cameras

Plan

• Review solution to the Scale-of-Justice exercise
• Recap and questions: synthetic camera and perspective projection
• (paper/pencil) Exercise on perspective projection
• Recap and questions: Projection matrices
• Recap and questions: Three.js Camera API and camera tutor demo
• Exercises on setting up a camera

Pinhole and Synthetic Cameras

Pinhole camera, aka camera obscura:

Pinhole camera with object and its projection:

Pinhole camera showing similar triangles:

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)$

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.

Question: Can we set up multiple cameras in the same scene? Not really, but see this example from the Three.js site

Exercises: Creating Desired Camera Views

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 surface with different material properties, such as dull or shiny surfaces, and how we add light sources to a graphical scene. To prepare:

• Reading for Monday: Material and Lighting
• Submit Sakai Quiz by Sunday evening at 9:00 pm EST — you'll have an hour to complete the quiz, which is "open book/notes"

Due on Friday at 11:00 pm EST: HWK2: Clown