CS 352: Computer Graphics
Chapter 5:
Viewing
Chapter 5 - 2
Interactive Computer Graphics
Overview


Specifying the viewpoint
Specifying the projection




Types of projections
Viewing APIs
Walking through a scene
Projections and shadows
Chapter 5 - 3
Interactive Computer Graphics
How do cameras work?
Chapter 5 - 4
Interactive Computer Graphics
Synthentic camera model



1. Camera is placed at a location, pointed in
a direction (modeling matrix)
2. 3D points are flattened onto the viewing
plane (projection matrix)
What do we need to know about the camera
(real or synthetic)?
Chapter 5 - 5
Interactive Computer Graphics
Synthetic camera parameters










Position of camera
Direction it is pointed [look vector]
Angle of film to look vector [view plane normal]
Rotation around viewing direction [up vector]
Height angle (zoom setting) [fovy]
Aspect ratio of "film" (width/height)
Front and back
clipping planes
Focal length
Field of view
Shutter speed
Chapter 5 - 6
Interactive Computer Graphics
Chapter 5 - 7
Interactive Computer Graphics
Perspective distortion


How would you film dizziness?
Vertigo effect [2]
Chapter 5 - 8
Interactive Computer Graphics
Projections

Basic Elements:






Objects, viewer
Projection plane
Projectors
Center of projection
Direction of
projection (DOP)
Basic Types


Perspective
Parallel (COP
at infinity)
Chapter 5 - 9
Classical viewing
Interactive Computer Graphics
Chapter 5 - 10
Interactive Computer Graphics
Orthographic projection




Orthographic: parallel
projection with projectors
perpendicular to the
projection plane.
Often used as front,
side, top views for 3D
design
Importance: preservation
of distance and angle
Often used for top, front,
and size views, e.g. in a
modeling program or
working drawing
Chapter 5 - 11
Interactive Computer Graphics
Perspective projection



Perspective projections: projectors converge at COP
Classical perspective views: 1, 2, and 3-point (1, 2,
or 3 vanishing points)
Difference: how many of the principle axes of the
object are parallel to projection plane (I.e., depends
on relationship of object to viewing frame)
Chapter 5 - 12
Interactive Computer Graphics
1. Position the camera




By default, camera is at origin, looking in –z dir
To “move the camera”, set up a modelview matrix
that moves objects that are drawn
Ignore Z-coordinate when drawing
E.g. dimetric view?
modelview = identity
translate(0,0,-d)
rotate(-45,<0,1,0>);
Chapter 5 - 13
Interactive Computer Graphics
Exercise: look from +x axis


How would you change the camera to
generate a view down the +x axis to origin?
Do this before displaying objects:
modelview = identity;
translate(0, 0, -d);
rotate(-90, [0, 1, 0]);
Chapter 5 - 14
Interactive Computer Graphics
Exercise: front/top view


How would you change the camera to
generate a view from (0, 10, 10) to origin?
Do this before displaying objects:
modelview = identity;
translate(0,0,-14.14);
rotate(45, [1, 0, 0]);
Chapter 5 - 15
Interactive Computer Graphics
Helper function: lookAt



Most 3D toolkits let you position the camera
by setting eyepoint, lookpoint, and up
direction
lookAt(Xeye, Yeye, Zeye, Xat, Yat, Zat,
Xup, Yup, Zup):
Effect: set the
modelview
matrix
Chapter 5 - 16
Interactive Computer Graphics
Rolling your own lookAt

How could you write your own lookAt
function?
lookAt(Xeye, Yeye, Zeye, Xat, Yat, Zat, Xup, Yup, Zup):
Chapter 5 - 17
Interactive Computer Graphics
Defining a lookAt function

lookAt(Xeye, Yeye, Zeye, Xat, Yat, Zat, Xup, Yup, Zup):
 translate <Xat, Yat, Zat> to origin
 rotate so that <Xeye, Yeye, Zeye>
points in the Z direction



normalize <Xeye, Yeye, Zeye>
trackball-like rotation to <0,0,1>
rotate so <Xup, Yup, Zup> is <0,1,0>

trackball-like rotation
Chapter 5 - 18
Interactive Computer Graphics
Camera API 2: uvn frame

Camera parameters:





VRP: view reference point,
a point on the image plane
VPN: view plane normal (n)
VUP: vector in up direction
(also need viewing direction, if not VPN)
Result: viewing coordinate system, u-v-n.




v = projection of VUP onto image plane
u=vxn
u, v axes: coordinates in the image plane
n axis: normal to image plane
Chapter 5 - 19
Interactive Computer Graphics
Camera API 3: roll, pitch, yaw

Specify location + orientation: roll, pitch, yaw
Chapter 5 - 20
Interactive Computer Graphics
2. Specify projection

Once we have located and pointed the
camera along the –z axis, we still need to
specify the lens (projection).
Chapter 5 - 21
Interactive Computer Graphics
Parallel projection


We’re already looking along the –z axis
Set z=0 for all points (or ignore z coordinate
when rendering)
é
ê
ê
ê
ê
ë
1
0
0
0
0
1
0
0
0
0
0
0
0
0
0
1
ù
ú
ú
ú
ú
û
Chapter 5 - 22
Interactive Computer Graphics
Parallel projection

View volume is generally specified with
clipping planes: e.g.
glOrtho(xmin, xmax, ymin, ymax, near, far)

Z clipping planes at –near and –far
Chapter 5 - 23
Interactive Computer Graphics
Perspective projection


Need to build appropriate perspective
projection matrix into vertex shader
What kind of transformation would this be?
Chapter 5 - 24
Interactive Computer Graphics
Perspective projections



COP at origin
Looking in –z direction
Projection plane in front of origin at z=d
Chapter 5 - 25
Interactive Computer Graphics
Foreshortening

By similar triangles in previous image, we see
that x  x and similarly for y.
p


z
d
1
0

0

0
0
1
0
0
0
1
Using the perspective matrix
0
we get p’ = x y z z d T
Adding divide-by-w to the graphics pipeline
gives the correct result.
1
d
0
0
0

0
Chapter 5 - 26
Interactive Computer Graphics
Perspective Frustum

Perspective viewing region is a “frustum”:
Viewplane normally coincides
with front clip plane
Chapter 5 - 27
Interactive Computer Graphics
Camera APIs



In raw OpenGL ES, you “position the
camera” by programming a vertex shader to
apply a modelview matrix
Frameworks provide functions to build a
viewing matrix for you, using a “camera API”
Example:
perspectiveCamera(FOV, aspect, near, far)
Chapter 5 - 28
Interactive Computer Graphics
Perspective projection

3D graphics toolkits provide tools for
specifying a perspective projection, e.g.
Chapter 5 - 29
Interactive Computer Graphics
Shadows



How can one generate shadows in a scene
using interactive graphics techniques?
In general it's hard, not supported in
standard graphics pipeline—you need to
know where everything is globally to render
a point locally
Special techniques let you “fake it”
Chapter 5 - 30
Interactive Computer Graphics
Projections and shadows





Projections can be used to generate simple
shadow polygons
Light (xl, yl, zl)
Translate light to origin
Project down y axis [M]
Translate back
1
0

0

0
0
1
0
1
 yl
0 0
0 0
1 0

0 0
Chapter 5 - 31
Interactive Computer Graphics
Simple Shadow in OpenGL
GLfloat m[16];
//projection matrix
for (int i=0; i<16; i++) m[i]=0;
m[0]=m[5]=m[10]=1;
m[7] = -1/yl;
glBegin(); [draw polygon normally]; glEnd();
glMatrixMode(GL_MODELVIEW);
glPushMatrix;
//save state
glTranslatef(xl, yl, zl);
glMultMatrix(m);
glTranslatef(-xl, -yl, -zl);
glColor3fv(shadow_color);
[draw polygon]
glEnd();
glPopMatrix();
Chapter 5 - 32
Interactive Computer Graphics
Stereo Viewing



In our stereo setup, we
need two images (4x3
size ratio), side-by-side
We want to render perspective views from
viewpoints (say) 3 inches apart
How to set up the views?*
* “Simple, Low-Cost Stereographics: VR for Everyone,” J. Zelle & C. Figura, Proc.
SIGCSE 2004 p. 348.
Chapter 5 - 33
Interactive Computer Graphics
Direct both eyes at the same point?
Chapter 5 - 34
Interactive Computer Graphics
Direct both eyes in parallel?
Chapter 5 - 35
Interactive Computer Graphics
Parallel views and asymmetric frustum
Chapter 5 - 36
Interactive Computer Graphics
Stereo viewing:
// set up the projection transformation
// focalLength is distance to screen (objects
//
closer will float in front of screen)
top = eyeSeparation / 2.0 * (near / focalLength);
glFrustum(-right+off, right+off, -top, top,
near, far);
// now set up the model-view transformation
// right is a unit vector in right direction
viewpoint = viewpoint – right * eyeOffset;
center = center – right * eyeOffset;
gluLookAt(viewpoint[X],viewpoint[Y],viewpoint[Z],
center[X], center[Y], center[Z],
up[x], up[y], up[z]);
Chapter 5 - 37
Interactive Computer Graphics
Drawing left and right views
//create window
int width=400; int height=300;
glutInitWindowSize(2*width, height);
//------------------------------------// draw left image
glViewport (0, 0, width, height);
// set up projection and modeling matrices
// render image
// draw right image
glViewport (width, 0, width, height);
// set up projection and modeling matrices
// render image
Chapter 5 - 38
Interactive Computer Graphics
Walking through a scene




How to animate viewer motion through a
scene? [Demo]
Assume viewer’s height is fixed; looking
direction is in y=6 plane
Store viewer’s location (x,6,z) and orientation
(θ). Update appropriately with user
commands
LookAt( x, y, z,
x + cos(θ), y, z + sin(θ),
0, 1, 0);
Chapter 5 - 39
Credits


1. (Pinhole camera): Wikipedia.
5. Synthetic camera parameters: Liz Marai, Pitt
Demos

Musical solar system
Interactive Computer Graphics