The Viewing Pipeline ( Chapter 4)

The Viewing Pipeline The Viewing Pipeline (Chapter 4)(Chapter 4)

04/21/23 1

OverviewOverview

• OpenGLOpenGL viewing pipelineviewing pipeline::– ModelviewModelview matrixmatrix– ProjectionProjection matrixmatrix• Parallel and perspective projectionsParallel and perspective projections

– ViewportViewport matrixmatrix

04/21/23 2

OpenGL Window-to-OpenGL Window-to-Viewport TransformationViewport Transformation

• OpenGLOpenGL will will clipclip all primitives that lie outside theall primitives that lie outside the worldworld windowwindow

• Primitives are displayed in aPrimitives are displayed in a viewportviewport of theof the screen windowscreen window

The The window-to-viewportwindow-to-viewport transformation transformstransformation transforms primitives fromprimitives from world coordinatesworld coordinates to to viewport viewport coordinatescoordinates

04/21/23 3

glTranslate*/glRotate*/glScale*glLoadMatrix*/glMultMatrix*gluLookAt

gluOrtho2DglOrthogluPerspectiveglFrustum

glViewport

OpenGL Viewing PipelineOpenGL Viewing Pipeline

• TheThe window-to-viewportwindow-to-viewport transformation transformation consists of a number of parts: theconsists of a number of parts: the viewingviewing pipelinepipeline::

04/21/23 4

The Modelview MatrixThe Modelview Matrix• A 3-D to 3-D transformationA 3-D to 3-D transformation• Combines effect ofCombines effect of modelmodellingling transformations transformations

andand viewviewpointpoint• Modelling transformationsModelling transformations::– What transformations are applied to each What transformations are applied to each

primitive to construct the scene?primitive to construct the scene?• Viewing TrasformationsViewing Trasformations::– Where are we viewing the scene from?Where are we viewing the scene from?

04/21/23 5

The Modelview MatrixThe Modelview Matrix

• First we need to tellFirst we need to tell OpenGLOpenGL that we want tothat we want to specify specify thethe modelview matrixmodelview matrix::– glMatrixMode(GL_MODELVIEW)glMatrixMode(GL_MODELVIEW)

• Then we can manipulate the currentThen we can manipulate the current modelviewmodelview matrixmatrix using:using:– glTranslate*glTranslate*– glRotate*glRotate*– glScale*glScale*– glLoadMatrix*glLoadMatrix*– glMultMatrix*glMultMatrix*– gluLookAtgluLookAt

04/21/23 6

The Modelview MatrixThe Modelview Matrix

• gluLookAt(x0, y0, z0, xref, yref, zref, Vx, Vy, Vz)gluLookAt(x0, y0, z0, xref, yref, zref, Vx, Vy, Vz)– Specifies the position/direction/orientation of the Specifies the position/direction/orientation of the

‘camera’‘camera’– Position of camera isPosition of camera is (x0, y0, z0)(x0, y0, z0) in world coordinatesin world coordinates– Camera points towardsCamera points towards (xref, yref, zref)(xref, yref, zref) in worldin world

coordinatescoordinates– The vectorThe vector (Vx, Vy, Vz)(Vx, Vy, Vz) specfies the ‘up’ direction forspecfies the ‘up’ direction for the the

camera camera

04/21/23 7

The Modelview Matrix - The Modelview Matrix - ExampleExample

glMatrixMode(GL_MODELVIEW);glLoadIdentity(); gluLookAt(8,8,8,0,0,0,0,0,1);

glutSolidTorus(1, 2.0, 10, 20);

04/21/23 8

The Modelview Matrix - The Modelview Matrix - ExampleExample

glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslated(300.0, 200.0, 0.0); // translate all primitives to this point glRecti(-30,-30,30,30); // 60 by 60 square at origin glTranslatef(100,0,0); // this square will be translated glRotatef(45,0,0,1); // and rotated glRecti(-30,-30,30,30); // 60 by 60 square at origin

glFlush(); // send all output to display

04/21/23 9

The Modelview Matrix Stack The Modelview Matrix Stack - Example- Example

glMatrixMode(GL_MODELVIEW);glLoadIdentity();glTranslatef(200,200,0); // translate all rectangles

…

glPushMatrix(); // save rotationglRotatef(45,0,0,1); //rotate this oneglRecti(0,0,50,50); // draw rectangle

glPopMatrix(); // restore rotation glPushMatrix(); // save rotation

glTranslatef(100,0,0); // translate this oneglRotatef(70,0,0,1); // and also rotate itglRecti(0,0,50,50); // draw rectangle

glPopMatrix(); // restore rotation glFlush(); // send all output to display

04/21/23 10

The OpenGL Matrix StacksThe OpenGL Matrix Stacks

• For each matrix in theFor each matrix in the viewing pipelineviewing pipeline,, OpenGLOpenGL maintains amaintains a matrix stackmatrix stack– TheThe current matrixcurrent matrix is the one on top of the stackis the one on top of the stack

• Manipulating the matrix stack:Manipulating the matrix stack:– glPushMatrix()glPushMatrix()

• Current matrix Current matrix copiedcopied to second position on stack to second position on stack• All other matrices on stack move down one placeAll other matrices on stack move down one place

– glPopMatrix()glPopMatrix()• Current matrix is destroyedCurrent matrix is destroyed• All other matrices move up one position on stackAll other matrices move up one position on stack

04/21/23 11

Projection MatricesProjection Matrices

• Projection matricesProjection matrices transformtransform 3-D3-D coordinatescoordinates onto aonto a 2-D 2-D image planeimage plane

• 2 basic types of projection:2 basic types of projection:

Perspective projection

Parallel projection

Image planeImage plane

Projection lines converge to a point

Projection lines are parallel

04/21/23 12

Parallel ProjectionsParallel Projections

• Objects further from viewer do Objects further from viewer do notnot appear smaller appear smaller• Common in CAD applicationsCommon in CAD applications• Parallel projectionsParallel projections can be either:can be either:

Oblique projectionOblique projection

Image plane

Projection lines parallel but not perpendicular

Orthographic (or orthogonal) Orthographic (or orthogonal) projectionprojection

Image plane

Projection lines are parallel and perpendicular to image plane

04/21/23 13

Perspective ProjectionsPerspective Projections

• Projection linesProjection lines converge at theconverge at the centre of projectioncentre of projection

Image planeCentre of projection

Objects that are further away appear Objects that are further away appear smallersmaller

Perspective projectionsPerspective projections can be specified can be specified by:by: Centre of projectionCentre of projection Camera direction (Camera direction (look vectorlook vector)) Camera orientation (Camera orientation (‘up’ vector‘up’ vector)) Height/width of image plane (Height/width of image plane (viewing anglesviewing angles))

04/21/23 14

Perspective ProjectionsPerspective Projections

• View angleView angle determines thedetermines the degree of zoomdegree of zoom

• Like a cameraman changing Like a cameraman changing the camera lensthe camera lens– Narrow angleNarrow angle: high zoom,: high zoom, little little

depth effectdepth effect– Wide angleWide angle: low zoom,: low zoom,

perspective distortionperspective distortion• For a perspective projection For a perspective projection

we typically have twowe typically have two viewview anglesangles::– Width angleWidth angle– Height angleHeight angle

04/21/23 15

Perspective ProjectionsPerspective Projections

• Look vectorLook vector determines the direction thedetermines the direction the camera is pointingcamera is pointing– Can be any vector in 3-D spaceCan be any vector in 3-D space

• Up vectorUp vector determines the orientation of the determines the orientation of the cameracamera– E.g. are we holding the camera E.g. are we holding the camera

horizontally/vertically/in between?horizontally/vertically/in between?• Position specified in aPosition specified in a right-handedright-handed coordinate coordinate

systemsystem, e.g., e.g.

Up vector

Look vector

Position

04/21/23 16

Projections - Clipping PlanesProjections - Clipping Planes

• Most graphics packages will define near and far Most graphics packages will define near and far clippingclipping planesplanes• Volume of space between near and far Volume of space between near and far clipping planesclipping planes defines defines

what the camera can ‘see’what the camera can ‘see’

Objects outside of Objects outside of clipping planes will clipping planes will not get drawnnot get drawn

Intersecting Intersecting objectsobjects will bewill be clippedclipped

04/21/23 17

Projections – View VolumesProjections – View Volumes

• The The view volumeview volume of a camera is a specification of a of a camera is a specification of a bounded space that the camera can ‘see’bounded space that the camera can ‘see’

• View volumeView volume can be specified by: can be specified by:– Camera position, look vector, up vector, image plane Camera position, look vector, up vector, image plane

aspect ratio, height angle, clipping planes (near/far)aspect ratio, height angle, clipping planes (near/far)

04/21/23 18

Projections – Perspective Projection Projections – Perspective Projection View VolumeView Volume

• Perspective projection view volume forms a Perspective projection view volume forms a frustumfrustum

04/21/23 19

Projections – Orthogonal Projection Projections – Orthogonal Projection View VolumeView Volume

• Orthographic projection view volume forms a Orthographic projection view volume forms a cuboidcuboid

04/21/23 20

The Projection MatrixThe Projection Matrix

• A 3-D to 2-D transformation:A 3-D to 2-D transformation:– OrthographicOrthographic projectionprojection– PerspectivePerspective projectionprojection

• InIn OpenGLOpenGL::– TheThe centre of projectioncentre of projection is theis the originorigin of theof the viewingviewing

coordinate systemcoordinate system (i.e. after the(i.e. after the modelviewmodelview matrix)matrix)– The view direction (The view direction (look vectorlook vector) is the negative z-axis) is the negative z-axis– The ‘up’The ‘up’ ((‘up’ vector‘up’ vector) is the positive y-axis) is the positive y-axis

• Specifying theSpecifying the projection matrixprojection matrix::– gluOrtho2DgluOrtho2D– glOrthoglOrtho– gluPerspectivegluPerspective– glFrustumglFrustum04/21/23 21

The Projection MatrixThe Projection Matrix

• gluOrtho2D (xwmin, xwmax, ywmin, ywmax)gluOrtho2D (xwmin, xwmax, ywmin, ywmax)

Orthographic projectionOrthographic projection Intended for use with 2-D Intended for use with 2-D

graphicsgraphics Defines a Defines a world windowworld window for for

clipping that will be mapped to clipping that will be mapped to the specified the specified viewportviewport

No No nearnear and and far clipping planesfar clipping planes

04/21/23 22

The Projection MatrixThe Projection Matrix

glOrtho (xwmin, xwmax, ywmin, ywmax, dnear, glOrtho (xwmin, xwmax, ywmin, ywmax, dnear, dfar)dfar) Orthographic projectionOrthographic projection Intended for use with 3-D Intended for use with 3-D

graphicsgraphics Defines a Defines a world windowworld window for for

clipping that will be mapped to clipping that will be mapped to the specified the specified viewportviewport Can also specify Can also specify near near and and far clipping planesfar clipping planes::

dneardnear andand dfardfar are the distances of the clipping are the distances of the clipping planes from the viewing coordinate origin along the planes from the viewing coordinate origin along the z-axisz-axis

Near clipping planeNear clipping plane is the is the image planeimage plane04/21/23 23

The Projection MatrixThe Projection Matrix gluPerspective (theta, aspect, dnear, dfar)gluPerspective (theta, aspect, dnear, dfar)

Perspective projectionPerspective projection thetatheta is the is the height angleheight angle in degreesin degrees aspect aspect is the ratio of the width to the height of is the ratio of the width to the height of

the image plane (the the image plane (the aspect ratioaspect ratio)) Centre of projectionCentre of projection is the origin of the viewing is the origin of the viewing

coordinate systemcoordinate system

theta = height angle

dnear, dfardnear, dfar are are distances of clipping distances of clipping planes from centre planes from centre of projection along z-of projection along z-axisaxis

Image planeImage plane is the is the near clipping planenear clipping plane

04/21/23 24

The Projection MatrixThe Projection Matrix glFrustum (xwmin, xwmax, ywmin, ywmax, dnear, glFrustum (xwmin, xwmax, ywmin, ywmax, dnear,

dfar)dfar) Perspective projectionPerspective projection Corners of Corners of near clipping planenear clipping plane have the have the

following coordinates in the following coordinates in the viewing coordinate viewing coordinate systemsystem::

(xwmin, ywmin, -dnear)(xwmin, ywmin, -dnear) (xwmin, ywmax, -dnear)(xwmin, ywmax, -dnear) (xwmax, ywmin, -dnear)(xwmax, ywmin, -dnear) (xwmax, ywmax, -dnear)(xwmax, ywmax, -dnear) Height

angle

Centre of projectionCentre of projection is is thethe origin of the origin of the viewing coordinate viewing coordinate systemsystem

Image planeImage plane is the nearis the near clipping planeclipping plane

04/21/23 25

The Projection Matrix - The Projection Matrix - ExamplesExamples

• gluOrtho2DgluOrtho2D example:example:– All primitives withAll primitives with (x,y)(x,y) coordinates betweencoordinates between (0,0)(0,0) andand

(640,480)(640,480) will be displayedwill be displayed

• glOrtho glOrtho example:example:– Defines aDefines a 24x24x3024x24x30 view volumeview volume with thewith the imageimage planeplane at at

the origin:the origin:

glMatrixMode(GL_PROJECTION);glLoadIdentity();glOrtho(-12, 12, -12, 12, 0, 30); // left, right, bottom, top, near, far

glMatrixMode(GL_PROJECTION);glLoadIdentity();gluOrtho2D(0.0, 640.0, 0.0, 480.0);

04/21/23 26

The Viewport MatrixThe Viewport Matrix

• Determines the Determines the regionregion of the of the screenscreen windowwindow to be used for drawing to be used for drawing

• Specifying the Specifying the viewport matrixviewport matrix::– glViewport(xPos, yPos, xSize, ySize)glViewport(xPos, yPos, xSize, ySize)

• Viewport has bottom-left corner at Viewport has bottom-left corner at (xPos,yPos)(xPos,yPos), , and has a size in pixels of and has a size in pixels of (xSize,ySize)(xSize,ySize)

04/21/23 27

The Viewport Matrix - The Viewport Matrix - ExampleExample

void drawObjects(){ glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glutWireTorus(1, 2.0, 10, 20); glTranslated(7.0,0.0,0.0); glutWireTeapot(3);}

/* GLUT callback Handlers */void display() { glClear(GL_COLOR_BUFFER_BIT); glViewport(0, 0, 320, 240); drawObjects(); glViewport(320, 0, 320, 240); drawObjects(); glViewport(0, 240, 320, 240); drawObjects(); glViewport(320, 240, 320, 240); drawObjects(); glFlush(); // send all output to the display} 04/21/23 28

Specifying the Screen Specifying the Screen WindowWindow

• The The screen windowscreen window is the window on is the window on your monitor that your monitor that OpenGLOpenGL uses to draw uses to draw primitivesprimitives

• SizeSize and and positionposition of of screen windowscreen window specified by:specified by:– glutInitWindowSize(width,height)glutInitWindowSize(width,height)

• Width and height of window in pixelsWidth and height of window in pixels

glutInitWindowPosition(x,y)glutInitWindowPosition(x,y) Position (x,y) in pixels from the top-left of the screenPosition (x,y) in pixels from the top-left of the screen

04/21/23 29

SummarySummary

• TheThe OpenGL viewing pipelineOpenGL viewing pipeline::– A series of matrix transformations that all primitivesA series of matrix transformations that all primitives

undergoundergo– Modelview matrixModelview matrix: combines modelling and viewing: combines modelling and viewing

transformstransforms– Projection matrixProjection matrix: projects 3-D viewing coordinates: projects 3-D viewing coordinates onto onto

image planeimage plane– Viewport matrixViewport matrix: selects the part of the display window to : selects the part of the display window to

use for drawinguse for drawing

04/21/23 30