OpenGL 3D Viewing

n So far you only draw 2D objects

n Also control the range of your objects
to [-1,1] in x and y and use 0.0 for Z,
i.e., keep them flat
n This [-1,1] x [-1,1] x [-1,1] is called the
canonical view volume, and only objects
within this range at the end of the
transformation pipeline will be visible
 OpenGL 3D viewing
n But now let’s make your program more
flexible
n Help your objects escape the 2D flat land
n Place a camera in the 3D world pointing to

arbitrary locations within arbitrary ranges

n Allow perspective or orthographic projection

n To allow the second and third bullets above, we need

to add two more transformation stages to ensure
that at the end of the transformation pipeline, visible
objects are still in the range of [-1,1]3
 Escape the flatland
n If the objects in your program already have the z
coordinates (although set to 0), escape the flatland is
easy. Just use non-zero z coordinates
n Because we have not added camera and projection
transformations, for now the z range needs to be
kept in [-1,1] in order to stay visible
n To ensure correct visibility order, you need to enable
depth test
n gl.enable(gl.DEPTH_TEST);

n Next slide tells you how to do it

 Set Up Camera Viewing and Projection

n To more flexibly place your objects in the 3D

world, you need to place a 3D camera
(conceptually) and set up its lens
n Camera position and direction
n Perspective or orthographic projection
n This corresponds to two more transformation
stages:
n Viewing transformation
n Projection transformation
 Transformation Pipeline

Local (Object) Modeling World Space

Space transformation

Projection Viewing
Clip Space Eye Space
transformation transformation

Perspective Viewport
NDC space Screen space
divide mapping
Normalized Device Coordinates
 Set up OpenGL Camera
n Set up a 3D scene is like taking a
photograph
 Viewing
n Position and orient your camera
 Viewing
n Important camera parameters to specify
n Camera (eye) position (Ex,Ey,Ez) in world coordinate
system
n Center of interest (coi) (cx, cy, cz)
n Orientation (which way is up?) View-up vector
(Up_x, Up_y, Up_z)

(ex, ey, ez)

world view up vector
(cx, cy, cz) (Up_x, Up_y, Up_z)
 Viewing
n Camera position and orientation forms a
camera (eye) coordinate frame
v u
n
y
Eye coordinate frame
coi
world x
z

n Transform objects from world to eye space

 Eye Space
n Right hand coordinate system

(0,1,0) (1,0,0)
v u
n (0,0,1)
y
(0,0,0)
coi
world x
z

n Transform to eye space can simplify many

downstream operations (such as projection) in the
pipeline
 World to Eye Transformation

n Head tilt: Rotate your head by d

n Just rotate the object about the eye space z axis - d
n Mw2e = cos(-d) -sin(-d) 0 0 ux uy uz 0 1 0 0 -ex
sin(-d) cos(-d) 0 0 vx vy vz 0 0 1 0 -ey
0 0 1 0 nx ny nz 0 0 0 1 -ez
0 0 0 1 0 0 0 1 0 0 0 1

v u
y I will explain the math behind for
n this matrix later
world
x

z
 Use glMatrix to Construct the viewing Matrix
(1) (2) (3)
-Create a view matrix
var vMatrix = mat4.create();
vMatrix= mat4.lookAt([0.0, 0.0, 5.0], [0.0, 0.0, 0.0],[0.0, 1.0,
0.0], vMatrix);

-(1) vec3: position; (2) vec3: center of

interest, (3) vec3: viewup vector

-The returned matirx, vMatrix is the same as the

matrix shown in the previous slide
 Combine viewing and modeling matrices

-The viewing matrix is multiplied with

the modeling matrix, and the result is
called modelview matrix
vMatrix = mat4.lookAt([0.0, 0.0, 5.0], [0.0, 0.0, 0.0], [0.0, 1.0, 0.0]);

mat4.identify(mMatrix);
mMatrix = mat4.rotate(mMatrix, angle, [0.0f, 0.0f, 1.0f]);
mMatrix = mat4.scale(mMatrix, [1,2,1]);

mat4.multiply (vMatrix, mMatrix, mvMatrix)l;

modelView Matrix = view Matrix * model Matrix

 Use the modelview matrix

When multiplying the modelview matrix with

the vertices, you transform the geometry from
local space to eye space

v u
n
y
Eye coordinate frame
coi
world x
z
 Transformation Pipeline

Local (Object) Modeling World Space

Space transformation

Projection Viewing
Clip Space Eye Space
transformation transformation

Perspective Viewport
NDC space Screen space
divide mapping
Normalized Device Coordinates
 Projection
n Control the “lens” of the camera
n Project the object from 3D world to 2D screen
 Projection Transformation

n Control how to project the object from

3D to 2D
n Perspective or Orthographic
n Field of view and image aspect ratio
n Near and far clipping planes
 Orthographic Projection
n No foreshortening effect – distance from
camera does not matter
n The projection center is at infinite

n Projection calculation – normalize to [-1,1]

range and reverse the sign of Z
 Perspective Projection
n Characterized by object foreshortening
- Objects appear to be larger if they are closer to
the camera
- This is what happens in the real world
n Need:
n Projection center camera
n Field of View
n Image, near, far planes

n Projection: Connecting the object

projection plane
to the projection center
 Field of View
n Determine how much of the world is taken into the
picture
center of projection
field of view
y y

z q z

x
n The larger is the field view, the smaller is the object
projection size
 Near and Far Clipping Planes
n Only objects between near and far planes are
drawn Near plane
Far plane
y

n Near plane + far plane + field of view =

Viewing Frustum
 Viewing Frustum
n 3D counterpart of 2D world clip window

Near plane Far plane

y

Viewing Frustum

n Objects outside the frustum are clipped

 Projection Matrix
n Orthographic Projection

2/(xmax-xmin) 0 0 - (xmax+xmin)/(xmax-xmin)
M2 x M1 = 0 2/(ymax-ymin) 0 - (ymax+ymin)/(ymax-ymin)
0 0 -2/(zmax-zmin) - (zmax+zmin)/(zmax-zmin)
0 0 0 1
 Projection Matrix

n Perspective Projection

x’ 2N/(xmax-xmin) 0 (xmax+xmin)/(xmax-xmin) 0 x
y’ = 0 2N/(ymax-ymin) (ymax+ymin)/(ymax-ymin) 0 y
z’ 0 0 -(F + N)/(F-N) -2F*N/(F-N) z
w’ 0 0 -1 0 1
 Use GLM to set up the matrix
- Set up the perspective projection matrix
var pMatrix = mat4.create();
mat4.perspective(60.0,1.0,.1,100.0, pMatrix);

(1) (2) (3) (4)

- (1): field of view

- (2): aspect ratio
- (3): near plane distance
- (4): far plane distance
 glm::perspective(fovy, aspect, near, far)

n Aspect ratio is used to calculate the

window width

y y w
fovy
z
z
h
eye
x
Aspect = w / h near far
 Use projection matrix
n The projection matrix is then combined with the
model view matrix and becomes modelviewprojection
(MVP) matrix
n MVP = projection * viewing * modeling
n Multiply MVP to your vertices will transform them
from local space to the canonical view volume, i.e., in
the range of [-1,1]3 if they are visible
n Remember to use 4D vectors [x,y,z,1] to multiply
 Transformation Pipeline

Local (Object) Modeling World Space

Space transformation

Projection Viewing
Clip Space Eye Space
transformation transformation

Perspective Viewport
NDC space Screen space
divide mapping
Normalized Device Coordinates
3D viewing under the hood

Modeling Viewing Projection

Transformation Transformation Transformation

Viewport
Transformation

Display
 3D viewing under the hood

Topics of Interest:

n Viewing transformation
n Projection transformation
 Viewing Transformation

n Transform the object from world to eye

space
n Construct an eye space coordinate frame
n Construct a matrix to perform the
coordinate transformation
 Eye Coordinate Frame
n Known: eye position, center of interest, view-up
vector
n To find out: new origin and three basis vectors

Assumption: the direction of view is

center of interest (COI) orthogonal to the view plane (the plane
that objects will be projected onto)
eye
o
90
 Eye Coordinate Frame (2)
n Origin: eye position (that was easy)
n Three basis vectors: one is the normal vector (n) of
the viewing plane, the other two are the ones (u and
v) that span the viewing plane
v n is pointing away from the
u world because we use right
Center of interest (COI) hand coordinate system
eye N = eye – COI
n
n= N / |N|

world origin
Remember u,v,n should
be all unit vectors
(u,v,n should be orthogonal to each other)
 Eye Coordinate Frame (3)
n How about u and v?
We can get u first -
v
V_up u u is a vector that is perpendicular
to the plane spanned by
COI N and view up vector (V_up)
eye
n

U = V_up x n

u = U / |U|
 Eye Coordinate Frame (4)
n How about v? Knowing n and u, getting v is
easy

v
V_up u

v = n xu
COI
eye
n v is already normalized
 Eye Coordinate Frame (5)
n Put it all together Eye space origin: (Eye.x , Eye.y, Eye.z)

Basis vectors:
v
V_up n = (eye – COI) / | eye – COI|
u
u = (V_up x n) / | V_up x n |
v = n x u
COI
eye
n
 World to Eye Transformation

n Transformation matrix (M w2e) ?

P’ = M w2e x P
v u 1. Come up with the transformation
y sequence to move eye coordinate
P n frame to the world

world 2. And then apply this sequence using

Post multiplication to multiply the matrices
x
Together.

z
 World to Eye Transformation
n Rotate the eye frame so that it will be “aligned” with
the world frame
n Translate (-ex, -ey, -ez)
Rotation: ux uy uz 0
v vx vy vz 0
u nx ny nz 0
y n 0 0 0 1

(ex,ey,ez) How to verify the rotation matrix?

world
x Translation: 1 0 0 -ex
0 1 0 -ey
0 0 1 -ez
z 0 0 0 1
 World to Eye Transformation (2)

n Transformation order: apply the transformation to the

object in a reverse order - translation first, and then
rotate
ux uy uz 0 1 0 0 -ex
Mw2e = vx vy vz 0 0 1 0 -ey
nx ny nz 0 0 0 1 -ez
0 0 0 1 0 0 0 1
v u
y n
(ex,ey,ez)
world
x

z
 World to Eye Transformation (3)

n Head tilt: Rotate your head by d

n Just rotate the object about the eye space z axis - d
n Mw2e = cos(-d) -sin(-d) 0 0 ux uy uz 0 1 0 0 -ex
sin(-d) cos(-d) 0 0 vx vy vz 0 0 1 0 -ey
0 0 1 0 nx ny nz 0 0 0 1 -ez
0 0 0 1 0 0 0 1 0 0 0 1

v u
y Why -d ?
n
world When you rotate your head by d, it is like
x rotate the object by –d

z
 Projection Transformation

n Projection – map the object from 3D space

to 2D screen

y y

z z

x x

Perspective Orthographic (Parallel)

 Parallel Projection
n After transforming the object to the eye space,
parallel projection is relative easy – we could just
drop the Z
Xp = x
(Xp, Yp)
Yp = y
Zp = -d

y
n We actually want to keep Z (x,y,z)
z
– why?
x
 Parallel Projection (2)

n OpenGL maps (projects) everything in

the visible volume into a canonical view
volume
(xmax, ymax, -far)
(1, 1, 1)

(xmin, ymin, -near) (-1, -1, -1)

Ortho(xmin, xmax, ymin, ymax, Canonical View Volume

near, far)
 Parallel Projection (3)
n Transformation sequence:
1. Translation (M1): (-near = zmax, -far = zmin)
-(xmax+xmin)/2, -(ymax+ymin)/2, -(zmax+zmin)/2
2. Scaling (M2):
2/(xmax-xmin), 2/(ymax-ymin), -2/(zmax-zmin)

2/(xmax-xmin) 0 0 - (xmax+xmin)/(xmax-xmin)
M2 x M1 = 0 2/(ymax-ymin) 0 - (ymax+ymin)/(ymax-ymin)
0 0 -2/(zmax-zmin) -(zmax+zmin)/(zmax-zmin)
0 0 0 1
 Perspective Projection
y
n Side view: z

x
Projection plane
y (x,y,z)
Based on similar triangle:
(x’,y’,z’)
(0,0,0) y -z
=
z y’ d
d
d
-z Y’ = y x
-z
Eye (projection center)
 Perspective Projection (2)
n Same for x. So we have:
x’ = x x d / -z
y’ = y x d / - z
z’ = -d
n Put in a matrix form:

x’ 1 0 0 0 x
y’ = 0 1 0 0 y
z’ 0 0 1 0 z
w 0 0 (1/-d) 0 1

n OpenGL assume d = near, i.e. the image plane is at z = -near

 Perspective Projection (3)
n We are not done yet. We want to somewhat keep the z
information so that we can perform depth comparison

n Use pseudo depth – OpenGL maps the near plane to -1, and far
plane to 1

n Need to modify the projection matrix: solve a and b

x’ 1 0 0 0 x
y’ = 0 1 0 0 y
z’ 0 0 a b z y
w 0 0 (1/-d) 0 1 z
x
How to solve a and b? Z = -1 z=1
 Perspective Projection (4)
n Solve a and b x’ 1 0 0 0 x
y’ = 0 1 0 0 y
z’ 0 0 a b z
w 0 0 (1/-d) 0 1
T T
n (0,0,-1) = M x (0,0,-near)
T T
(0,0,1) = M x (0,0,-far) M

n a = (far+near)/(d*(far-near)) Verify this!

b = (2 x far x near) / (d*(far-near))
 Perspective Projection (5)
n Not done yet. OpenGL also normalizes the x and y
ranges of the viewing frustum to [-1, 1] (translate
and scale)
(1, 1)

y far
z near
x eye
(top view)
(-1, -1) Z = -1 z=1

n And takes care the case that eye is not at the center
of the view volume (shear)
 Perspective Projection (6)
n Final Projection Matrix:
x’ 2N/(xmax-xmin) 0 (xmax+xmin)/(xmax-xmin) 0 x
y’ = 0 2N/(ymax-ymin) (ymax+ymin)/(ymax-ymin) 0 y
z’ 0 0 -(F + N)/(F-N) -2F*N/(F-N) z
w’ 0 0 -1 0 1

glFrustum(xmin, xmax, ymin, ymax, N, F) N = near plane, F = far plane

 Perspective Projection (7)
n After perspective projection, the viewing frustum is
also projected into a canonical view volume (like in
parallel projection)

(1, 1, 1)
y

x (-1, -1, -1)

Canonical View Volume