Viewing and Projection

The topics

• Interior parameters• Projection type• Field of view• Clipping• Frustum…

• Exterior parameters• Camera position• Camera orientation

World coordinate

others

Transformation Pipeline

Projection Matrix

World->Eye

Local coordinate

Eye coordinate

Local->World

ModelView Matrix

Clip coordinate

Screen coordinate

Projection

• The projection transforms a point from a high-dimensional space to a low-dimensional space.

• In 3D, the projection means mapping a 3D point onto a 2D projection plane (or called image plane).

• There are two basic projection types: • Parallel: orthographic, oblique• Perspective

Orthographic ProjectionImage Plane

Direction of Projection

xyk1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥=

1 0 0 00 1 0 00 0 0 k0 0 0 1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

z=k

z-axis

Orthographic Projection

Oblique Projection

Image Plane

Direction of Projection

Properties of Parallel Projection

• Definition: projection directions are parallel.

• Doesn’t look real.

• Can preserve parallel lines

Projection

Parallel in 3D Parallel in 2D

Properties of Parallel Projection

• Definition: projection directions are parallel.

• Doesn’t look real.

• Can preserve parallel lines• Can preserve ratios

Projections

t

s '

t '

s : t =s':t'

Properties of Parallel Projection

• Definition: projection directions are parallel.

• Doesn’t look real.

• Can preserve parallel lines• Can preserve ratios• CANNOT preserve angles

Projection

Properties of Parallel Projection

• Definition: projection directions are parallel.

• Doesn’t look real.

• Can preserve parallel lines• Can preserve ratios• CANNOT preserve angles

• Often used in CAD, architecture drawings, when images can be used for measurement.

Properties of Parallel Projection

• No foreshortening

Image Plane

Perspective Projection

• Perspective projection has foreshortening:

Image Plane

Center of Projection

Perspective Projection• Images are mapped onto the image plane in

different ways:

Image Plane

Center of Projection

An image(640*640)

Perspective Projection• Images are mapped onto the image plane in

different ways:

Image Plane

Center of Projection

An image(640*640)

Perspective Projection• Angle of view tells us the mapping from the

image to the image plane:

Image Plane

Center of Projection

Angle of viewField of view

Perspective Projection• Not everything will be displayed.

Image Plane

Center of Projection

Near Plane Far Plane

Frustum

Perspective Projection• The frustum of perspective projection looks

like:Center of Projection

Image Plane

Near Plane

Ortho Projection• What’s the frustum of orthographic projection?

Image Plane

Near Far

• In general, the homogeneous coordinate system is define as:

• For example,

Homogenous Coordinates

wxwywzw

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥=

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

214

0.5

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥=

4281

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

In 3DIn homogeneous space

• Both homogenous vectors and matrices are scalable:

Homogenous Coordinates

wxwywzw

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥=

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

wm00 wm01 wm02 wm03

wm10 wm11 wm12 wm13

wm20 wm21 wm22 wm23

wm30 wm31 wm32 wm33

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

=

m 00 m 01 m 02 m 03

m 10 m 11 m 12 m 13

m 20 m 21 m 22 m 23

m 30 m 31 m 32 m 33

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

Perspective Projection• Derivation:

Image Plane

Z Axis

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

x 'y '−d1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

−d

XY Plane

Perspective Projection• Derivation:

Image Plane

Z Axis

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

−xd / z−yd / z

−d1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

−d

XY Plane

Perspective Matrix• Derivation:

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

−xd / z−yd / z

−d1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥ How?

−xd / z−yd / z

−d1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥=

dd

d−1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

The z axis now becomes useless…

OpenGL Perspective Matrix• In practice, OpenGL uses the z axis for depth

test. Its matrix looks like this:

=

dd

a b−1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

−x / z−y / z

−a − b / z1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

The depth value now can be used for depth test.We will discuss this in more details later...

Vanishing Point• Given a ray:

• Its projection:

px

py

pz

1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

nx

ny

nz

1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

px + tnx

py+ tny

pz + tnz

1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

d(px + tnx)d(py+ tny)

...−(pz + tnz)

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥=

dd

a b−1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

px + tnx

py+ tny

pz + tnz

1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

−dpx + tnx

pz + tnz

−dpy + tny

pz + tnz

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

Vanishing Point• When t goes to infinity:

• What if there is another ray:

limt→ ∞

−dpx + tnx

pz + tnz

−dpy+ tny

pz + tnz

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥=

−dnx

nz

−dny

nz

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

qx + tnx

qy+ tny

qz + tnz

1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

Parallel lines meet atthe vanishing point.

Properties of Perspective Projection

• Lines are mapped to lines.• Parallel lines may not remain parallel. Instead, they

may meet at the vanishing point.• Ratios are not preserved.

• It has foreshortening effects. So it looks real.

• Distances cannot be directly measured, as in parallel projection.

Basic OpenGL Projection• Everything will be considered in the eye space:• Geometry objects have been transformed into the eye

coordinate system using the GL_MODELVIEW matrix.• You define the projection matrix in GL_PROJECTION, also in

the eye space.• OpenGL always assume that the viewing direction is the –z

direction.

• OpenGL automatically processes each vertex using GL_PROJECTION:• After projection, the frustum is converted into a canonical

view volume ( [-1, 1] in all coordinates)

OpenGL Orthographic Projection

glOrtho(left, right, bottom, top, near, far)

(left, bottom, near)

X range Y range Z range

(right, top, far)

(-1, -1, -1)

(1, 1, 1)

OpenGL Orthographic Projection

glOrtho(l, r, b, t, n, f)

• Translation so that the center is the origin.• Scaling so that the size becomes (2, 2, 2).

1 −r+l2

1 −t+ b2

1 −f+ n21

⎡

⎣

⎢⎢⎢⎢⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥⎥⎥⎥⎥

2r −l

2t−b

2f−n

1

⎡

⎣

⎢⎢⎢⎢⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥⎥⎥⎥⎥

2r −l

−r+lr−l

2t−b

−t+bt−b

2f−n

−f+ nf−n1

⎡

⎣

⎢⎢⎢⎢⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥⎥⎥⎥⎥

=

OpenGL Perspective ProjectionglFrustum(left, right, bottom, top, near, far)

Center of Projection

Near Plane(Image Plane) Far Plane

Frustum

(left, right, bottom, top)may not be centered alongthe axis

Always positive,although it’s facingthe –z direction

OpenGL Perspective ProjectiongluPerspective(fov, aspect_ratio, near, far)

Center of Projection

Near Plane(Image Plane) Far Plane

Frustumfov

ratio=image_width/image_heighttop: near*ctan(fov/2)right: near*ratio*ctan(fov/2)

Always positive,although it’s facingthe –z direction

OpenGL Perspective Projection

glFrustum(…) is less useful than gluPerspective(...).

But we can still use it for demonstration purpose next.

OpenGL Perspective Projection

−nx / z−ny / z

−n1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

nn

n−1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥=

Projection

OpenGL Perspective Projection

−nx / z−ny / z

−a − b / z1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

nn

a b−1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥=

Projection

in (-1, 1)

in (-n, -f), why???

OpenGL Perspective Projection

−nx / z−ny / z

−a − b / z1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

−a − b / (−n) = −1 (z = n)−a − b / (− f ) = 1 (z = f )⎧⎨⎩

a =−f+ nf−n

b=−2 fnf−n

⎧

⎨⎪⎪

⎩⎪⎪

OpenGL Perspective Projection

11

−f+ nf−n

−2 fnf−n

−1

⎡

⎣

⎢⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥⎥

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

Projection

(l/n, b/n, -1)

(r/n, t/n, 1)

OpenGL Perspective Projection

2nr −l

2nt−b

11

⎡

⎣

⎢⎢⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥⎥⎥

1 −r+l2n

1 −t+b2n

11

⎡

⎣

⎢⎢⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥⎥⎥

=

2nr−l

−r+lr−l

2nt−b

−t+bt−b

11

⎡

⎣

⎢⎢⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥⎥⎥

Transform

(l/n, b/n, -1)

(r/n, t/n, 1)

(-1, -1, -1)

(1, 1, 1)

TranslationScaling

OpenGL Perspective Projection

2nr −l

−r+lr−l

2nt−b

−t+bt−b

11

⎡

⎣

⎢⎢⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥⎥⎥

11

−f+ nf−n

−2 fnf−n

−1

⎡

⎣

⎢⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥⎥

=

2nr−l

r+lr−l

2nt−b

t+ bt−b

−f+ nf−n

−2 fnf−n

−1

⎡

⎣

⎢⎢⎢⎢⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥⎥⎥⎥⎥

Projection

(-1, -1, -1)

(1, 1, 1)

Original ProjectionTransformation

What happens after projection?• Clipping

• Viewport transformation

• Rasterization

clipping

(-1, -1)

(1, 1)viewport

(0, 0)

(800, 800)

rasterize

Depth Test• Before rasterization, all processes are done based on

vertices.

• The z coordinate at each vertex is transformed into a new z value (or called the depth value).

• During rasterization, the z value of each pixel is interpolated from vertices.

• The z value then stored in the depth buffer, for occlusion tests. (smaller z means closer).

Depth Test

• The depth buffer is part of the frame buffer:

• To enable or disable the depth buffer:

• Without the depth test, the occlusion is determined by the drawing order.

glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB|GLUT_DEPTH);

glEnable(GL_DEPTH_TEST);

glDisable(GL_DEPTH_TEST);

Common Issues

• When you set up the perspective matrix:• Near (n) cannot be zero!• f : n cannot be too large! (far cannot be too

large, or near cannot be too small.) Why?

2nr −l

r+lr−l

2nt−b

t+ bt−b

−f+ nf−n

−2 fnf−n

−1

⎡

⎣

⎢⎢⎢⎢⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥⎥⎥⎥⎥