ViewingAngel, Chapter 4

CSCI 6360slides from AW, Foley et al., red book, open course, etc.

Computer Graphics Term Projects2013

Garcia Joel INFT pong video game

Gaspar David CSCI first-person platform game in the web browser using webGL

Gonzalez Garza Irving CSCI 3D Breakout, video game

Hernandez Ricardo CSCI camera movement through world, e.g., starship through a course

Jaramillo Jose CSCI user enter function -rotate region about any axis, + othersKeenan Alexandra CSCI QuickShip: A web-based hull modeler using WebGLKoneti Sirisha CSCI tic-tac-toe with strategiesNavarro Martin CSCI portal based snake gameOchoa Marcos Snake Game in OpenGL

Rivera Raymundo De CSCI game - sphere rolls through obstacles w/physicsRuelas Martin INFT driving game

Castanuela Luis CENG virtual environment, e.g., gamesEspinosa Javier CSCI billiards game with textures and shadows

Marroquin Alex ELEN particle swarm for dragged objectsOrtega Eduardo CSCI tic-tac-toe (to 10x10) or clock simulator

Pazmino Santiago CENG virtual environment, e.g., objects in

Computer Graphics Term Projects2015 – will leave time after class to discuss

• 3D Golf Ball Flight Simulator– Octavio Cantu

• Game targeting children– Saul Hernandez

• Hooke's Law game– Alvaro Leal

• Building Block Puzzle– Subba Patchamatla

• Social Network Visualization– Jonaton Reyes

• Child oriented drawing program– Candida Rodriguez

• Game simulation with Shadow Engine

– Praveen TN

• Maze game– Daniel Uribe

• OpenGL Open World Environment and Navigation

– Janette Vasquez

• Tic-tac-toe with strategies and bells and whistles

– Homar Venecia

• 3D Viewing module– Ben Worsham

Overview

• Look at types of (classical) views can create– How images have been formed by architects,

artists, and engineers– Benefits and drawbacks of each type of view

• Computer viewing– Will finish up the OpenGL transformations!– Mathematics of projection– OGL viewing functions– Alternate viewing APIs

• Derivation of projection matrices for the most important parallel and perspective views– Oblique projections– Projection normalization

Projection: Mapping 3-D to 2-D

• Scene models are in 3-D space and (but) images are 2-D– so need some way of projecting 3-D

to 2-D – Recall, “fundamental challenge”

• Planar Projection– Basic approach:

• Define a plane in 3-D space– image plane (or film plane)

• Project scene onto plane• Map to window viewport

• Need to address two basic issues:– how to define plane– how to define mapping onto plane

Projection: Essential Definitions(quick look)

• Projectors

• View plane (or film plane)

• Direction of projection

• Center of projection– Eye, viewer projection reference point

Viewing, Projection, and ProjectorsHistorical antecedents

• Projection onto image plane not a new idea

• Can examine evolution of artistic representations for many examples of elements to be considered in computer graphics

• As artists studied perspective by, used devices to understand

• Projectors, viewplanes, … of cg• cf. figure at right

• Drawing a bellows• Analogs to cg projection

“Unterweisung der Messung”, Albrecht Dürer. Woodcut 1525

Viewing, Projection, and ProjectorsA bit more history

• Brunelleschi (1377-1446)

• Invented systematic method of determining perspective projections in early 1400's

• cf. vanishing point

• Evidence that he created demonstration panels, with specific viewing constraints for complete accuracy of reproduction

• cf. projections

Viewing, Projection, and Projectors(perspective, quick look)

• To human eye, parallel lines converge• Railroad tracks, UTPA walkways

• Looking ahead …– Perspective Derivation

• By similar triangles can compute how much the x and y-coordinates are scaled, looking down z axis

• Will derive transformation matrices

• First, will consider “classical viewing”– Different forms of projection

Classical Viewing• Viewing requires three basic elements:

– One or more (1) objects– A (2) viewer with a projection surface– (3) Projectors that go from the object(s) to the projection

surface

• “Classical views” are based on relationships among these elements

• Classical views - Viewer “picks up” object …• And orients it how he or she would like to see it• Vs. computer graphics view –

• camera moves around …

• E.g., object constructed from principal faces – planar faces that “are useful”

Planar Geometric Projections(overview)

• Standard projections project onto a plane (the view plane) – as we’ve seen

• Nonplanar projections needed for applications such as map construction

– But how big is Greenland?

Planar Geometric Projections(overview)

• Standard projections project onto a plane (the view plane) – as we’ve seen

• Projectors either: – 1) converge at a center of projection, (and may have

multiple vanishing points)– 2) are parallel, and vp may be at right angle (orthographic)

to projectors, or not– Such projections preserve lines, but not necessarily

angles

• Below is taxonomy of planar geometric projections and examples:

parallel perspective

axonometric multivieworthographic

oblique

isometric dimetric trimetric

2 point1 point 3 point

Planar Geometric Projections

Perspective vs. Parallel Projections• Fundamental distinction is whether projection is

perspective or parallel– … even though, mathematically, parallel viewing is the

limit of perspective viewing!– Is just as simple as whether projectors:

• Converge, or are• Parallel• Can (probably) see in squares and seat in figure at right

• Computer graphics treats all projections same– Implements them with a single pipeline– Will see that it’s “just a matter of setting a single matrix

value”

• Classical viewing developed different techniques for drawing each type of projection

Parallel Projections• Simplest form of parallel projection is simply

along lines parallel to z-axis onto xy-plane– So, parallel projectors– Called “direction of projection” (DOP)– Vs. center of projection (COP)

• Again, though could consider COP at infinity

• This form of projection is called orthographic– View plane at right angles to projectors

Perspective Projections• As noted, artists during renaissance

discovered importance of perspective for making images appear realistic

– Parallel lines intersect at a point

• “Diminution of size”– Objects farther away are smaller– This makes sense, considering way

projectors intersect view plane

Orthographic Projections

• Again, orthographic projections– A parallel projection– Projectors orthogonal to projection surface– Projection plane parallel to principal face

• Multiview orthorgraphic projections– Usually front, top, side views– In CAD and architecture, three

multiviews plus isometric

Orthographic ProjectionsAdvantages, disadvantages

• Advantages: – Preserves both distances and angles – NOT get closer together as f(distance)

• Shapes preserved– Can be used for measurements

• Building plans• Manuals

• Disadvantages:– Cannot see what object really looks like because surfaces hidden– Need multiple views to get feel for 3-d object– Often add isometric

isometric + orthographic views:front

sidetop

Axonometric Projections, 1/2

• Projection plane not perpendicular (not orthogonal) to object

• Allow projection plane to move relative to object– Might move up, left, up-left, …

• Classify projection type by how many angles of a corner of a projected cube are the same

– none: trimetric– two: dimetric– three: isometric– (more next slide)

1

32

Axonometric Projections, 2/2

• Again, same method as multiview orthographic projections, except projection plane not parallel to any of the coordinate planes

– Parallel lines are equally foreshortened

• Dimetric: – Angles between two of the principal axes are equal– Need two scale ratios

• Isometric: – Angles between all three principal axes are equal (120). – The same scale ratio applies along each axis.

• Trimetric: – Angles different between the three principal axes– Need three scale ratios

• Different names for different views, – But all part of a continuum of parallel projections– Differ in where the projection plane is relative to object

Axonometric Projections Advantages, disadvantages

• Lines are scaled (foreshortened), but can find scaling factors

• Lines preserved but angles are not– Projection of a circle in a plane not parallel to projection plane is an ellipse

• Can see three principal faces of a box-like object

• Some optical illusions possible– Parallel lines appear to diverge!

• Does not look real because far objects are scaled the same as near objects

• Used in CAD applications

Oblique Projections• Oblique views most general parallel views• Projectors can have arbitrary angle with projection

plane– Angles in planes parallel to projection plane are preserved

• “Unnatural” as physical viewing devices, e.g., eye, most cameras, have lens that is in a fixed relationship with the image plane (parallel)

– Bellows cameras an exception– No problem to program it, though!

Oblique ProjectionsAdvantages, disadvantages

• Advantages and disadvantages:– Can pick the angles to emphasize a particular face

• Architecture: plan oblique, elevation oblique– Angles in faces parallel to projection plane are preserved, while can still

see “around” side– In physical world, cannot create with simple camera; possible with

bellows camera or special lens (architectural)

Perspective Viewing

• Again, perspective views characterized by diminution of size

– Projectors are not parallel– Leads to natural appearance– Amount by which line is foreshortened depends

on how far from user

• In classical perspective views, viewer is located symmetrically wrt projection plane

– Viewing pyramid (frustum) determined by window in projection plane and COP is a symmetric or right pyramid

• One-, two-, or three-point perspectives– How many of the three principal directions in

object are parallel to the projection plane – How many vanishing points for projections

Perspective Viewing, Examples• One-point perspective

– One principal face parallel to projection plane– One vanishing point for cube

• Two-point perspective– On principal direction parallel to projection plane– Two vanishing points for cube

• Three-point perspective– No principal face parallel to projection plane– Three vanishing points for cube

Computer Viewing

• 24/66

Computer Viewing

• Using synthetic-camera model, can construct any of classical views

• However (as noted),– Classical views stress particular relationships among object, viewer, and

projectors • E.g., multigraphic (orthographic, principal faces)

– Computer graphics stresses independence of object specifications and camera parameters

– Somewhat a matter of “orientation”, or degree, and problems each was intended to solve

• Visual representation in a non-digital age

Computer Viewing

• For pipeline architecture, viewing has two fundamental operations:– First, position and orient the camera

• Job of model-view matrix• After vertices pass through this transformation, are represented in eye or

camera coordinates– Second is the application of the perspective transformation

• Applies specified projection – orthographic or perspective – to vertices and puts objects within the specified clipping volume in a normalized clipping volume (more later)

OpenGL Transformations – Red Book

• As noted, create image on screen by series of “viewing transformations”– Transforms a point (its coordinates) from world space to eye space– Set these transformation matrices as part of OpenGL programming– Each transformation operates on different spaces and coordinates

• Model – View – Projection – Perspective Divide - Viewport

• Alternatively, from “red book”:

OpenGL Transformations – 2 Parts

• Tonight – first, viewing process has 2 parts:– Use model-view matrix to switch vertex reps from object frame in which objects

defined to their representation in eye/camera frame – eye at origin• Allows use of canonical viewing procedures

– Type of projection (parallel or perspective) and part of world to image (clipping or view volume)

• Specifications allow formation of a projection matrix concatenated with model-view matrix

Positioning the Camera

• 29/66

Viewing Models

• OpenGL coordinate based– Move the camera (viewing) frame (coordinate system)

– Look at – camera metaphor

• Roll, pitch, yaw – “pilot metaphor”

• Polar coordinates – star views

Moving the Camera Frame

• If want to visualize object with both positive and negative z values can either

– Move camera in positive z direction• Translate camera frame

– Move the objects in the negative z direction

• Translate world frame

• Both of these views are equivalent and are determined by the model-view matrix

– Want a translation (glTranslatef(0.0,0.0,-d);)

– d > 0

• Moving Camera back to origin:

default frames

frames after translation by –d d > 0

Moving the Camera Frame

• 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

• OpenGL code:– (last transformation specified first applied)– glMatrixMode(GL_MODELVIEW)– glLoadIdentity();– glTranslatef(0.0, 0.0, -d);– glRotatef(90.0, 0.0, 1.0, 0.0);

addAirplane Metaphor – Roll, Pitch, Yaw

• Of course, API’s just software layer– Form of API determined by use to

made of it– For graphics/visual systems any

number of other APIs exist besides two discussed so far

• Airplane (flight) metaphor often used

• Specifies terms relevant (useful) in application

– Roll, pitch, yaw in degrees

• Can convert to elements of camera viewing:

– lookFrom (ex, ey, ez)– lookAt (ax, ay, az)– vUp (ux, uy, uz)

addPolar Coordinates

• Viewing in some applications most naturally specified in polar – rather than rectilinear – coordinates

– E.g., for objects that rotate about other objects

• Consider star in sky– Direction from viewer given by elevation and

azimuth

• Define normal at point of viewer location and use to define a plane

– Use to define planes (as familiar with for x, y, z) to create coordinate system

• Azimuth and elevation measured in degrees

• Rotation of camera about axis in which pointed (twist angle) also possible

Comp. Viewing – OGL Camera Defaults

• OpenGL default camera “settings” (state)– Camera at origin of object frame– Pointing in negative z direction– Set up for orthogonal views– View volume is a cube, centered at the origin

and with sides of length 2– Projection plane is plane z=0– Direction of projection is along z-axis

• Objects within this box are visible and projected as shown

• Initially model-view matrix was identity

• Later, found out about translation and rotation, and altered model-view to place camera where wanted

clipped out

z=0

2

Placing and Aiming OGL Camera

• Natural to position camera in world space as if real camera1. Identify the eye point where the camera is located 2. Identify the look-at point that we wish to appear in center of view3. Identify an up-vector vector oriented upwards in final image

• Specify camera configuration with:– gluLookAt(ex, ey, ez, ax, ay, az, ux, uy, uz)– 3 camera vectors: lookFrom (ex, ey, ez), lookAt (ax, ay, az), vUp (ux, uy, uz)

• Or, gluLookAt (lookFromx,y,z, lookAtx,y,z, vUpx,y,z)

OpenGL: gluLookAt(a really handy little function)

• Specify camera configuration with– gluLookAt(ex, ey, ez, ax, ay, az, ux, uy, uz)

• gluLookAt (lookFromx,y,z, lookAtx,y,z, vUpx,y,z)

– Note: a utility – glu, not gl

• Three camera vectors– lookFrom (ex, ey, ez)– lookAt (ax, ay, az)– vUp (ux, uy, uz)

• Typical Transformation Setup:

glMatrixMode(GL_PROJECTION); // which matrixglLoadIdentity(); // initialize – recall, make have no affectgluPerspective(fovy, aspect, zNear, zFar); // will be perspective (more later)glMatrixMode(GL_MODELVIEW); // which matrixglLoadIdentity(); // initializegluLookat(ex, ey, ez, ax, ay, az, 0, 1, 0); // easy!

gluLookAt Function(from red book)

• From Red Book ….

• Function gluLookAt forms required modelview matrix through a simple interface

• Still need to initialize – Can concatenate with modeling

transformations

• Example: isometric view of cube aligned with axes

glMatrixMode(GL_MODELVIEW):glLoadIdentity();//gluLookAt(ex, ey, ez, ax, ay, az, ux, uy, uz)gluLookAt(1.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0., 1.0. 0.0);

Angel Fly Around Example

• “Fly around” – easy with gluLookAt– Angel example also allows mouse to

rotate mesh

• Honolulu data– … or objects – Angel, polygon mesh

• “Fly around”:– Moves camera– Keeps “look at” same (origin)– Keeps “vUp” same

• No tilting, etc. of camera

• Keys change location of camera

void display(void){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

// gluLookAt (lookFromx,y,z, lookAtx,y,z, vUpx,y,z)

gluLookAt(viewer[0],viewer[1],viewer[2], 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

// draw scene glFlush(); glutSwapBuffers();}

Angel Fly Around Examplefunctions keys and main

main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH); glutInitWindowSize(500, 500); glutCreateWindow(“fly"); glutReshapeFunc(myReshape); glutDisplayFunc(display); glutKeyboardFunc(keys); glEnable(GL_DEPTH_TEST); glutMainLoop();}

keys(unsigned char key, int x, int y){

// ‘x’, ‘X’, ‘y’, ‘Y’, ‘z’, and ‘Z’ keys // change global array viewer[3] // - used to store viewpoint // // Then, after key input call postredisplay // - signal redraw necessary, // and, hence, display called

if(key == 'x') viewer[0]-= 1.0; if(key == 'X') viewer[0]+= 1.0; if(key == 'y') viewer[1]-= 1.0; if(key == 'Y') viewer[1]+= 1.0; if(key == 'z') viewer[2]-= 1.0; if(key == 'Z') viewer[2]+= 1.0; display(); }

Simple Projections

• 39/66

Simple Projections

• Recall, the “real camera” model … object, through lens, projected on film

• Combination of lens and film (its size) that determines how much of the world in front of the camera appears on the film

• In cg, will select type of projection and viewing parameters

• With wide angle lens gives “most dramatic” (emphasized) perspective– Objects near camera large compared to objects far from lens– Telephoto lens make scene appear “flat” and is close to a parallel view

• With OpenGL we can directly manipulate the projection matrix, but in practice functions used to set– Perspective divide

Perspective Projections

• Have laid groundwork (intuition) and in fact is pretty straightforward to mathematically describe how things get smaller

– “diminution in size …”• Here, lines AB and AB same length• However, when follow projectors and where they intersect projection/view

plane AB is smaller on plane than AB• Voila!

– Uses ideas of similar triangles (as in 6th grade, next slide)

Perspective Projections(similar triangles)

• Similar triangles

One notation: CG notation:

Perspective – GeometryHave seen one, now the others

• Center of projection at the origin– Projection plane z = d, d < 0

• Also, consider top and side views (xz and yz planes)

• By similar triangles:• (“perspective divide)

xp = dz

x

/ yp = dz

y

/ zp = d

Perspective – Matrix Form(Perspective divide)

• Perspective divide – that’s all there is to it to create depth – divide z by d!

• Homogenous coordinates: Perspective– consider q = Mp where, M=

xp = dz

x

/ yp = dz

y

/ zp = d

0/100

0100

0010

0001

d

1

z

y

x

dz

z

y

x

/

q = p =

View Volumes

45/66

View Volumes

• A view volume– contains everything visible from

the point of view or direction: – i.e., What does the camera see?– Projectors “all the way to screen

edge”

• Conical view volumes – Expensive math (simultaneous

quadratics) when clipping objects against cone's surface

• “Rectangular cone” – Can approximate conical with

“rectangular cone” • Called a frustum

– Works well with a rectangular viewing window

– Simultaneous linear equations for easy clipping

Front and Back Clipping Planes

• Frustum – Volume of space between front and back clipping planes – What camera can see – what drawn on screen

• Near and far clipping planes defined by distance along Look Vector

• Objects appearing outside of view volume don't get drawn • Objects intersecting view volume get clipped

Front Clipping Plane

• Reasons for Front (near) Clipping Plane:

– Don't want to draw things too close to camera (“cg convenience”)• Would block view of rest of scene • Objects would be prone to distortion

– And … Don't want to draw things behind camera (of course)• Wouldn't expect to see things behind the camera • In case of perspective camera, if decided to draw things behind camera,

they would appear upside down and inside out because of perspective transformation!

Back Clipping Plane

• Reasons for Back (far) Clipping Plane:

– Don't want to draw objects too far away from camera • Distant objects may appear too small to be visually significant, but still take

long time to render • Dy discarding them we lose a small amount of detail but reclaim a lot of

rendering time • Alternately, the scene may be filled with many significant objects; for visual

clarity, we may wish to declutter the scene by rendering those nearest the camera and discarding the rest

View Volume, glFrustumOne way to set viewing

• glFrustum(left, right, bottom, top, near, far)

• Note: image plane itself is infinite– must map a rectangular region of it to the viewport– defined by (left, right, top, bottom) coordinates

• Also define near & far clipping planes– distances from viewpoint, always positive

OpenGL: Orthographic ProjectionAnother way to set viewing

• The “simplest” projections, orthographic– Image plane perpendicular to one of the coordinate axes– project onto plane by dropping that coordinate– (x, y, z) → (x, y) – figure below - or → (x, z) or → (y, z)

• glOrtho(left, right, bottom, top, near, far)– Assumes image plane perpendicular to z axis

• in other words, it’s the xy-plane

– projects points (x, y, z) → (x, y)– also defines viewport mapping

• defines rectangle on xy-plane• this gets mapped to window

aspect = w/h

front plane

OpenGL: Field of View, gluPerspectiveYet another way to set viewing

• Can always use:glFrustum(left, right, bottom, top, near, far)– This is certainly sufficient– But may be inconvenient in some applications– Can be difficult to get desired view

• May want to use: gluPerspective(fovy, aspect, near, far)– specifies field of view along y axis

• angle θ made by the sides of frustum– aspect ratio of viewport

• just (width / height)

Wrapping up OpenGL Transformations

• 54/66

OpenGL: Transformation Matrices

• OGL maintains two different matrices• One to hold the camera projection matrix• And one to hold everything else

– So, just select “current matrix” with glMatrixMode(matrix)– Where matrix is GL_MODELVIEW or GL_PROJECTION

• And glFrustum() and others multiply the current matrix– just like glTranslate(), glScale(), glRotate()

• So, vertices are transformed as in below figure with the two matrices:

Recall, OpenGL Transformations, 1/2

• Series of “viewing transformations”– transforms a point (its coordinates) from world space to eye space– Set these transformation matrices as part of OpenGL programming– Each transformation operates on different spaces and coordinates

• Transformations: Model – View – Projection – Perspective Divide - Viewport

• From “red book”:

OpenGL Transformations

• Recall, viewing process has 2 parts:– Use model-view matrix to switch vertex reps from object frame in which objects

defined to their representation in eye/camera frame – eye at origin• Allows use of canonical viewing procedures

– Type of projection (parallel or perspective) and part of world to image (clipping or view volume)

• Now, normalization allows clip against simple cube regardless of projection

• Delay final projection until end– Also, Important for hidden-surface removal (more later) to retain depth

information as long as possible

OpenGL Clip Space

• In OpenGL clip space, viewing frustum is mapped to a cube that extends from -1 to 1 in x, y, and z

– Cube is good for efficient clipping algorithms!– Called normalization, as in “normalize frustum to unit cube”– (FYI OpenGL flips z axis to create a left handed coordinate system during projection)– Series of transformations are used to create the unit cube

Orthogonal Normalization• Angel presents derivation of normalization transformation

– normalization find transformation to convert specified clipping volume to default

• Follows from OpenGL function …• glOrtho(left,right,bottom,top,near,far)

• Notes follow, will leave to those interested to see Angel for detail• Basic idea is simply to use dimensions of frustum (left, right, top, bottom) for

transformation• Note below left, bottom, near, right, top, far – derivation in these terms

(opt.) Derive Orthogonal Matrix

• Orthogonal Matrix:

– 1. Move center to origin:T(-(left+right)/2, -(bottom+top)/2,(near+far)/2))

– 2. Scale to have sides of length 2: S(2/(left-right),2/(top-bottom),2/(near-far))

• Final Projection– Set z =0 – Equivalent to homogeneous coordinate

transformation, Morth, at right– Hence, general orthogonal projection in 4D is P

= MorthST

1000

200

02

0

002

nearfar

nearfar

farnear

bottomtop

bottomtop

bottomtop

leftright

leftright

leftright

P = ST =

Morth =

1000

0000

0010

0001

Simple Perspective

• Consider a simple perspective with the COP at the origin, the near clipping plane at z = -1, and a 90 degree field of view determined by the planes

x = z, y = z

OpenGL Perspective Matrix

• Mapping the perspective viewing frustum in OpenGL to clip space involves some affine transformations

• “OpenGL uses a clever composition of these transformations with the perspective projection matrix:”

– See Angel for details, notes follow

Clipping and Perspective Division

• Scene's objects are clipped against clip space bounding box– Eliminates objects (and pieces of objects) not visible in image– Efficient clipping algorithms for homogeneous clip space

• Perspective division divides all by homogeneous coordinates, w

• Clip space becomes Normalized Device Coordinate (NDC) space after perspective division

Viewport Transformation

• OpenGL provides function to set up viewport transformation:

– glViewport(x, y, width, height)– Maps NDC space to window (screen)

space– And we’re done!!!!!!!!!

• Straightforward:– Though need attend to aspect ratio

ConclusionOpenGL Transformations and Coordinate Systems

• Should feel reasonably comfortable with changes in coordinate spaces through series of transformations

– Both in practical (OpenGL) and (intuitively) theoretical terms

Coordinate spaces:ObjectWorldEyeClipNDCWindow

Transformations:ModelViewProjectionsPerspective DivideViewport

End

• .