3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf ·...
Transcript of 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf ·...
![Page 1: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/1.jpg)
© Machiraju/Zhang/Möller
3D Viewing
Introduction to Computer GraphicsTorsten Möller
![Page 2: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/2.jpg)
© Machiraju/Zhang/Möller 2
Reading• Chapter 4 of Angel• Chapter 13 of Hughes, van Dam, …• Chapter 7 of Shirley+Marschner
![Page 3: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/3.jpg)
© Machiraju/Zhang/Möller
Objectives• What kind of camera we use? (pinhole)• What projections make sense
– Orthographic– Perspective
• The viewing pipeline• Viewing in WebGL• Shadows
3
![Page 4: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/4.jpg)
© Machiraju/Zhang/Möller 4
3D Viewing• Popular analogy: virtual camera taking
pictures in a virtual world• The process of getting an image onto the
computer screen is like that of taking a snapshot.
![Page 5: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/5.jpg)
© Machiraju/Zhang/Möller 5
3D Viewing (2)• With a camera, one:
– establishes the view – opens the shutter and exposes the film
![Page 6: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/6.jpg)
© Machiraju/Zhang/Möller 6
3D Viewing (3)• With a camera, one:
– establishes the view – opens the shutter and exposes the film
• With a computer, one: – chooses a projection type (not necessarily
perspective) – establishes the view – clips the scene according to the view – projects the scene onto the computer display
![Page 7: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/7.jpg)
© Machiraju/Zhang/Möller 7
The ideal pinhole camera• Single ray of light gets through small pinhole• Film placed on side of box opposite to
pinhole
Projection
![Page 8: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/8.jpg)
© Machiraju/Zhang/Möller 8
The pinhole camera• Angle of view (always fixed)
• Depth of field (DOF): infinite – every point within the field of view is in focus (the image of a point is a point)
• Problem: just a single ray of light & fixed view angle
• Solution: pinhole → lens, DOF no longer infinite
![Page 9: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/9.jpg)
© Machiraju/Zhang/Möller 9http://en.wikipedia.org/wiki/File:DOF-ShallowDepthofField.jpg
![Page 10: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/10.jpg)
© Machiraju/Zhang/Möller 10
The synthetic camera model• Image formed in front of the camera• Center of projection (COP):
center of the lens (eye)
![Page 11: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/11.jpg)
© Machiraju/Zhang/Möller 11
Types of projections• Choose an appropriate type of projection
(not necessarily perspective) • Establishes the view: direction and
orientation
![Page 12: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/12.jpg)
© Machiraju/Zhang/Möller 12
3D viewing with a computer• Clips scene with respect to a view volume
– Usually finite to avoid extraneous objects• Projects the scene onto a projection plane
– In a similar way as for the synthetic camera model
– Everything in view volume is in focus– Depth-of-field (blurring) effects may be generated
![Page 13: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/13.jpg)
© Machiraju/Zhang/Möller 13
Project onto projection plane
Clip against 3D view volume
Where are we at?
![Page 14: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/14.jpg)
© Machiraju/Zhang/Möller
Objectives• What kind of camera we use? (pinhole)• What projections make sense
– Orthographic– Perspective
• The viewing pipeline• Viewing in WebGL• Shadows
14
![Page 15: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/15.jpg)
© Machiraju/Zhang/Möller 15
Projection: 3D → 2D• We study planar geometric projections:
– projecting onto a flat 2D surface – project using straight lines
• Projection rays, called projectors, are sent through each point in the scene from the centre of projection (COP) - our pinhole
• Intersection between projectors and projection plane form the projection
![Page 16: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/16.jpg)
© Machiraju/Zhang/Möller 16
Perspective and parallel projections
• Parallel:– COP at infinity– By direction of
projectors (DOP)
• Perspective:- Determined by COP
![Page 17: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/17.jpg)
© Machiraju/Zhang/Möller 17
COP in homogeneous coordinates
• Perspective projection: COP is a– finite point: (x, y, z, 1)
• Parallel projection– Direction of projection is a vector:
(x, y, z, 1) – (x’, y’, z’, 1) = (a, b, c, 0)– Points at infinity and directions correspond in a
natural way
![Page 18: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/18.jpg)
© Machiraju/Zhang/Möller 18
Perspective vs. parallel• Perspective projection:
– Realistic, mimicking our human visual system– Foreshortening: size of perspective projection of
object varies inversely with the distance of that object from the center of projection
– Distances, angles, parallel lines are not preserved• Parallel projection:
– Less realistic but can be used for measurements– Foreshortening uniform, i.e., not related to distance– Parallel lines are preserved (length preserving?)
![Page 19: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/19.jpg)
© Machiraju/Zhang/Möller 19
![Page 20: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/20.jpg)
© Machiraju/Zhang/Möller 20
Taxonomy of projectionsAngle between projectors and projection plane?
Number of principal axes cut by projection plane
![Page 21: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/21.jpg)
© Machiraju/Zhang/Möller 21
Parallel projections• Used in engineering mostly, e.g., architecture• Allow measurements• Different uniform foreshortenings are
possible, i.e., not related to distance to projection plane
• Parallel lines remain parallel• Angles are preserved only on faces which
are parallel to the projection plane – same with perspective projection
![Page 22: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/22.jpg)
© Machiraju/Zhang/Möller 22
Orthographic (parallel) projections
• Projectors are normal to the projection plane• Commonly front, top (plan) and side
elevations: projection plane perpendicular to z, y, and x axis
• Matrix representation (looking towards negative z along the z axis; projection plane at z = 0):
![Page 23: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/23.jpg)
© Machiraju/Zhang/Möller 23
Orthographic projections• Axonometric projection
– Projection plane not normal to any principal axis– E.g., can see more faces of an axis-aligned
cube
![Page 24: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/24.jpg)
© Machiraju/Zhang/Möller 24
Orthographic projections• Foreshortening: three
scale factors, one each for x, y, and z axis
• Axonometric projectionexample:
![Page 25: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/25.jpg)
© Machiraju/Zhang/Möller 25
Orthographic projection• Axonometric projection – Isometric
– Projection-plane normal makes same angle with each principal axis
– There are just eight normal directions of this kind– All three principal axes are equally
foreshortened, good for getting measurements– Principal axes make same angle in projection
plane• Alternative: dimetric & trimetric (general
case)
![Page 26: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/26.jpg)
© Machiraju/Zhang/Möller 26
Parallel Projection (4)• Axonometric Projection - Isometric
– Angles between the projection of the axes are equal i.e. 120º
• Alternative- dimetric & trimetric
![Page 27: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/27.jpg)
© Machiraju/Zhang/Möller
Types of Axonometric Projections
27
![Page 28: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/28.jpg)
© Machiraju/Zhang/Möller 28
Oblique (parallel) projections• Projectors are not normal to projection
plane
• Most drawings in the text use oblique projection
![Page 29: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/29.jpg)
© Machiraju/Zhang/Möller 29
Oblique projections• Two angles are of interest:
– Angle α between the projector and projection plane
– The angle φ in the projection plane
• Derive the projection matrix
![Page 30: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/30.jpg)
© Machiraju/Zhang/Möller 30
Derivation of oblique projections
![Page 31: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/31.jpg)
© Machiraju/Zhang/Möller 31
Common oblique projections• Cavalier projections
– Angle α = 45 degrees– Preserves the length of a line segment
perpendicular to the projection plane– Angle φ is typically 30 or 45 degrees
• Cabinet projections– Angle α = 63.7 degrees or arctan(2)– Halves the length of a line segment
perpendicular to the projection plane – more realistic than cavalier
![Page 32: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/32.jpg)
© Machiraju/Zhang/Möller 32
Projections, continued
![Page 33: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/33.jpg)
© Machiraju/Zhang/Möller 33
Perspective projections• Mimics our human visual
system or a camera• Project in front of the center
of projection• Objects of equal size at different distances
from the viewer will be projected at different sizes: nearer objects will appear bigger
![Page 34: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/34.jpg)
© Machiraju/Zhang/Möller 34
Types of perspective projections
• Any set of parallel lines that are not parallel to the projection plane converges to a vanishing point, which corresponds to point at infinity in 3D
• One-, two-, three-point perspective views are based on how many principal axes are cut by projection plane
![Page 35: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/35.jpg)
© Machiraju/Zhang/Möller 35
Vanishing points
![Page 36: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/36.jpg)
© Machiraju/Zhang/Möller
• COP at z = 0• Projection plane at z = d
• Transformation is not invertible or affine. Derive the projection matrix.
36
Simple perspective projection
![Page 37: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/37.jpg)
© Machiraju/Zhang/Möller 37
Simple perspective projection• How to get a perspective projection matrix?• Homogeneous coordinates come to the
rescue
![Page 38: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/38.jpg)
© Machiraju/Zhang/Möller 38
Summary of simple projections• COP: origin of the coordinate system• Look into positive z direction• Projection plane perpendicular to z axis
![Page 39: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/39.jpg)
© Machiraju/Zhang/Möller
Objectives• What kind of camera we use? (pinhole)• What projections make sense
– Orthographic– Perspective
• The viewing pipeline• Viewing in WebGL• Shadows
39
![Page 40: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/40.jpg)
© Machiraju/Zhang/Möller 40
General viewing and projections
• With scene specified in world coordinate system
• Position and orientation of camera• Projection: perspective or parallel
– Clip objects against a view volume – which one?
– Normalize the view volume (easier to do this way)
– The rest is orthographic projection
![Page 41: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/41.jpg)
© Machiraju/Zhang/Möller 41
Perspective Projections• Need to describe the viewing
– VRP - view reference point
VRP
![Page 42: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/42.jpg)
© Machiraju/Zhang/Möller 42
Perspective Projections• Need to describe the viewing
– VRP - view reference point– VN - view normal
VRP
VN
![Page 43: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/43.jpg)
© Machiraju/Zhang/Möller 43
Perspective Projections• Need to describe the viewing
– VRP - view reference point– VN - view normal– VUP - up vector
VRPu
v
VUP
VN
![Page 44: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/44.jpg)
© Machiraju/Zhang/Möller 44
Perspective Projections• Need to describe the viewing
– VRP - view reference point– VN - view normal– VUP - up vector– COP - centre of projection
VRPu
v
VUP
VN
COP
![Page 45: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/45.jpg)
© Machiraju/Zhang/Möller 45
Clipping• Projection defines a view volume• add front and back clipping plane • make view volume finite• why is this useful for a perspective
projection?
![Page 46: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/46.jpg)
© Machiraju/Zhang/Möller 46
Clipping (2)• How should we clip a scene against the
view volume? • We could clip against the actual
coordinates, but is there an easier way?
![Page 47: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/47.jpg)
© Machiraju/Zhang/Möller 47
Clipping (3)• Canonical view volume
– Parallel:x = -1, x = 1, y = -1, y = 1, z = 0, z = -1
– Perspective:x = z, x = -z, y = z, y = -z, z = -z_min, z = -1
![Page 48: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/48.jpg)
© Machiraju/Zhang/Möller 48
Viewing Process
![Page 49: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/49.jpg)
© Machiraju/Zhang/Möller 49
Normalization - Parallel• translate the
VRP to the origin
![Page 50: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/50.jpg)
© Machiraju/Zhang/Möller 50
Normalization - Parallel (2)• rotate the view
referencecoordinates suchthat the VPNbecomes the z axis,u becomes the xaxis and vbecomes the yaxis
![Page 51: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/51.jpg)
© Machiraju/Zhang/Möller 51
Normalization - Parallel (3)• shear so that the
direction ofprojection isparallel to thez axis
![Page 52: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/52.jpg)
© Machiraju/Zhang/Möller 52
Normalization - Parallel (4)• translate and
scale into thecanonical viewvolume
![Page 53: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/53.jpg)
© Machiraju/Zhang/Möller 53
Normalization - Parallel (5)• translates the VRP to the origin• rotate the view reference coordinates such
that the VPN becomes the z axis, u becomes the x axis and v becomes the y axis
• shear so that the direction of projection is parallel to the z axis
• translate and scale into the canonical view volume
![Page 54: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/54.jpg)
© Machiraju/Zhang/Möller 54
Normalization - Parallel (6)• Projection matrix:
M = S � T � SH �R� T
![Page 55: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/55.jpg)
© Machiraju/Zhang/Möller 55
Normalization - Perspective• translates the VRP
to the origin
![Page 56: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/56.jpg)
© Machiraju/Zhang/Möller 56
Normalization - Perspective (2)• rotate the view
reference coordinatessuch that the VPNbecomes the zaxis, u becomesthe x axis and vbecomes they axis.
![Page 57: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/57.jpg)
© Machiraju/Zhang/Möller 57
Normalization - Perspective (3)• Translate
so that thecenter of projectionis at the origin
![Page 58: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/58.jpg)
© Machiraju/Zhang/Möller 58
Normalization - Perspective (4)• shear so
that the centreline of the viewvolume becomesthe z axis
![Page 59: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/59.jpg)
© Machiraju/Zhang/Möller 59
Normalization - Perspective (5)• scale into
the canonicalview volume
![Page 60: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/60.jpg)
© Machiraju/Zhang/Möller 60
Normalization - Perspective (6)• translates the VRP to the origin • rotate the view reference coordinates such
that the VPN becomes the z axis, u becomes the x axis and v becomes the y axis.
• translate so that the center of projection is at the origin
• shear so that the centre line of the view volume becomes the z axis
• scale into the canonical view volume
![Page 61: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/61.jpg)
© Machiraju/Zhang/Möller
• Projection matrix (perspective):
• Projection matrix (parallel):
61
Normalization - Perspective (7)
M = Ppers � S � SH � T �R� T
M = Pparall � S � SH �R� T
![Page 62: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/62.jpg)
© Machiraju/Zhang/Möller
Objectives• What kind of camera we use? (pinhole)• What projections make sense
– Orthographic– Perspective
• The viewing pipeline• Viewing in WebGL• Shadows
62
![Page 63: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/63.jpg)
©Angel/Shreiner/Möller
Computer Viewing• There are three aspects of the viewing
process, all of which are implemented in a pipeline,– Positioning the camera
• Setting the model-view matrix– Selecting a “lens”
• Setting the projection matrix– Clipping
• Setting the view volume
63
![Page 64: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/64.jpg)
©Angel/Shreiner/Möller
The WebGL Camera• In WebGL, initially the object and camera
frames are the same– Default model-view matrix is an identity
• The camera is located at origin and points in the negative z direction
• WebGL also specifies a default view volume that is a cube with sides of length 2 centered at the origin– Default projection matrix is an identity
64
![Page 65: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/65.jpg)
©Angel/Shreiner/Möller
Default Projection• Default projection is orthogonal
65
clipped out
z=0
2
![Page 66: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/66.jpg)
©Angel/Shreiner/Möller
Moving the Camera Frame• If we want to visualize an object with both
positive and negative z values we can either– Move the camera in the positive z direction
• Translate the camera frame– Move the objects in the negative z direction
• Translate the world frame• Both of these views are equivalent and are
determined by the model-view matrix– Want a translation Translate(0.0,0.0,-d);– d > 0
66
![Page 67: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/67.jpg)
©Angel/Shreiner/Möller
Moving the Camera• We can move the camera to any desired
position by a sequence of rotations and translations
• Example: side view– Rotate the camera– Move it away from origin– Model-view matrix C = TR
67
![Page 68: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/68.jpg)
©Angel/Shreiner/Möller
The LookAt Function• The GLU library contained the function
gluLookAt to form the required modelview matrix through a simple interface
• Note the need for setting an up direction• Replaced by LookAt() in mat.h
– Can concatenate with modeling transformations• Example: isometric view of cube aligned
with axesmat4 mv = LookAt(vec4 eye, vec4 at, vec4 up);
68
![Page 69: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/69.jpg)
©Angel/Shreiner/Möller
gluLookAt• LookAt(eye, at, up)
69
![Page 70: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/70.jpg)
©Angel/Shreiner/Möller
Other Viewing APIs• The LookAt function is only one possible
API for positioning the camera• Others include
– View reference point, view plane normal, view up (PHIGS, GKS-3D)
– Yaw, pitch, roll– Elevation, azimuth, twist– Direction angles
70
![Page 71: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/71.jpg)
©Angel/Shreiner/Möller
WebGL Orthogonal ViewingOrtho(left,right,bottom,top,near,far)
near and far measured from camera
71
![Page 72: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/72.jpg)
©Angel/Shreiner/Möller
WebGL PerspectiveFrustum(left,right,bottom,top,near,far)
72
![Page 73: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/73.jpg)
©Angel/Shreiner/Möller
Using Field of View• With Frustum it is often difficult to get the
desired viewPerpective(fovy,aspect,near,far) often provides a better interface
aspect = w/h
front plane
73
![Page 74: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/74.jpg)
© Machiraju/Zhang/Möller
Objectives• What kind of camera we use? (pinhole)• What projections make sense
– Orthographic– Perspective
• The viewing pipeline• Viewing in WebGL• Shadows
74
![Page 75: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/75.jpg)
© Machiraju/Zhang/Möller 75
Application of projection: shadows
• Essential component for realistic rendering• Naturally use projections
– Can produce hard shadows– Only handles shadows on a plane– To shadow on a polygonal face, need clipping
• More advanced shadow algorithms exist, e.g., soft shadows and penumbra (not easy to do)
• Blinn 74
![Page 76: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/76.jpg)
© Machiraju/Zhang/Möller 76
Shadow via projection• A shadow polygon is obtained through
projection where the center of projection is a light source
![Page 77: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/77.jpg)
© Machiraju/Zhang/Möller 77
Shadow polygon: parallel projection
(xp, yp, zp)
(xs, ys, 0)
• Project shadow on z = 0• Light at ∝ (directional light)• Derive the projection matrix
![Page 78: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/78.jpg)
© Machiraju/Zhang/Möller
• Light at infinity:
• hence projection:
78
Shadows: parallel projection
Now draw the objecton the ground plane
![Page 79: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/79.jpg)
© Machiraju/Zhang/Möller
• Project on plane z = 0• Point light source • Derive the matrix
79
Shadows: perspective projection
![Page 80: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/80.jpg)
© Machiraju/Zhang/Möller
• Local Light:
• projection matrix:
80
Shadows: perspective projection
![Page 81: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/81.jpg)
© Machiraju/Zhang/Möller 81
Shadow of a teapot
![Page 82: 3D Viewing - univie.ac.atvda.univie.ac.at/Teaching/Graphics/13w/LectureNotes/09_viewing.pdf · Perspective vs. parallel • Perspective projection: – Realistic, mimicking our human](https://reader030.fdocuments.net/reader030/viewer/2022040923/5e9ec6742d7bcb65f35a9a48/html5/thumbnails/82.jpg)
© Machiraju/Zhang/Möller 82
Shadows• requires no extra memory• easily handles any number of light sources• only shadows onto ground plane• cannot handle objects which shadow other
complex objects• every polygon is rendered N+1 times, where
N is number of light sources