cs 445 / 645 introduction to computer graphics lecture 5 assignment 1 3d primitives and...

39
CS 445 / 645 Introduction to Computer Graphics Lecture 5 Lecture 5 Assignment 1 Assignment 1 3D Primitives and Transformations 3D Primitives and Transformations

Upload: jack-greene

Post on 05-Jan-2016

224 views

Category:

Documents


4 download

TRANSCRIPT

Page 1: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

CS 445 / 645Introduction to Computer Graphics

Lecture 5Lecture 5

Assignment 1Assignment 1

3D Primitives and Transformations3D Primitives and Transformations

Lecture 5Lecture 5

Assignment 1Assignment 1

3D Primitives and Transformations3D Primitives and Transformations

Page 2: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Assignment 1

We’ve hit a snag with assignment 1We’ve hit a snag with assignment 1

• Due date extended one week – Sept. 26Due date extended one week – Sept. 26 thth

• I’m creating an intermediate programming assignmentI’m creating an intermediate programming assignment

Visual Studio 7 isn’t ready for dept. release yetVisual Studio 7 isn’t ready for dept. release yet

• We’re revamping for Visual Studio 6We’re revamping for Visual Studio 6

• You can set things up for yourself, but we are trying to You can set things up for yourself, but we are trying to simplify the process for yousimplify the process for you

We’ve hit a snag with assignment 1We’ve hit a snag with assignment 1

• Due date extended one week – Sept. 26Due date extended one week – Sept. 26 thth

• I’m creating an intermediate programming assignmentI’m creating an intermediate programming assignment

Visual Studio 7 isn’t ready for dept. release yetVisual Studio 7 isn’t ready for dept. release yet

• We’re revamping for Visual Studio 6We’re revamping for Visual Studio 6

• You can set things up for yourself, but we are trying to You can set things up for yourself, but we are trying to simplify the process for yousimplify the process for you

Page 3: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Assignment 1 – more details

Assignment 1 uses FLTK, GLUT, BoostAssignment 1 uses FLTK, GLUT, Boost• The source for each tool is accessible onlineThe source for each tool is accessible online

– You can download the source and compile the needed You can download the source and compile the needed libraries yourself (contact TA for Boost details)libraries yourself (contact TA for Boost details)

• To simplify and standardizeTo simplify and standardize

– We are compiling the source into libraries for you and We are compiling the source into libraries for you and putting them in a shared location (that’s the snag)putting them in a shared location (that’s the snag)

• You can start on this right now, but you may have to tweak You can start on this right now, but you may have to tweak your project files to work with our released librariesyour project files to work with our released libraries

Assignment 1 uses FLTK, GLUT, BoostAssignment 1 uses FLTK, GLUT, Boost• The source for each tool is accessible onlineThe source for each tool is accessible online

– You can download the source and compile the needed You can download the source and compile the needed libraries yourself (contact TA for Boost details)libraries yourself (contact TA for Boost details)

• To simplify and standardizeTo simplify and standardize

– We are compiling the source into libraries for you and We are compiling the source into libraries for you and putting them in a shared location (that’s the snag)putting them in a shared location (that’s the snag)

• You can start on this right now, but you may have to tweak You can start on this right now, but you may have to tweak your project files to work with our released librariesyour project files to work with our released libraries

Page 4: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Intermediate Assignment

Assignment 0 – not graded but checkedAssignment 0 – not graded but checked• Set up your class account on blue.unix.virginia.eduSet up your class account on blue.unix.virginia.edu

– Instructions to followInstructions to follow

• Experiment with FLTKExperiment with FLTK

– http://www.cs.wisc.edu/~schenney/courses/cs559-s2002/http://www.cs.wisc.edu/~schenney/courses/cs559-s2002/assignments/assignment1/assignments/assignment1/

• Experiment with OpenGLExperiment with OpenGL

– http://www.cs.virginia.edu/~gfx/Courses/2001/http://www.cs.virginia.edu/~gfx/Courses/2001/Intro.fall.01/Exercises/assignment2.htmIntro.fall.01/Exercises/assignment2.htm

Assignment 0 – not graded but checkedAssignment 0 – not graded but checked• Set up your class account on blue.unix.virginia.eduSet up your class account on blue.unix.virginia.edu

– Instructions to followInstructions to follow

• Experiment with FLTKExperiment with FLTK

– http://www.cs.wisc.edu/~schenney/courses/cs559-s2002/http://www.cs.wisc.edu/~schenney/courses/cs559-s2002/assignments/assignment1/assignments/assignment1/

• Experiment with OpenGLExperiment with OpenGL

– http://www.cs.virginia.edu/~gfx/Courses/2001/http://www.cs.virginia.edu/~gfx/Courses/2001/Intro.fall.01/Exercises/assignment2.htmIntro.fall.01/Exercises/assignment2.htm

Page 5: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Assignment 0

Due Tuesday, Sept 17Due Tuesday, Sept 17thth at 5:00 p.m. at 5:00 p.m.

• Email me ASAP if your blue.unix account doesn’t existEmail me ASAP if your blue.unix account doesn’t exist

• Turn in:Turn in:

– Create directory on blue: Create directory on blue: /courses/cs/Students/username/Assignment0/courses/cs/Students/username/Assignment0

– Complete the FLTK tutorial and leave an executable in your directory Complete the FLTK tutorial and leave an executable in your directory called assign0.exe that accomplishes what’s described in “Adding called assign0.exe that accomplishes what’s described in “Adding Basic Components to a Window” in the Wisconsin tutorialBasic Components to a Window” in the Wisconsin tutorial

• Optional – play with last year’s firetruck demoOptional – play with last year’s firetruck demo

Due Tuesday, Sept 17Due Tuesday, Sept 17thth at 5:00 p.m. at 5:00 p.m.

• Email me ASAP if your blue.unix account doesn’t existEmail me ASAP if your blue.unix account doesn’t exist

• Turn in:Turn in:

– Create directory on blue: Create directory on blue: /courses/cs/Students/username/Assignment0/courses/cs/Students/username/Assignment0

– Complete the FLTK tutorial and leave an executable in your directory Complete the FLTK tutorial and leave an executable in your directory called assign0.exe that accomplishes what’s described in “Adding called assign0.exe that accomplishes what’s described in “Adding Basic Components to a Window” in the Wisconsin tutorialBasic Components to a Window” in the Wisconsin tutorial

• Optional – play with last year’s firetruck demoOptional – play with last year’s firetruck demo

Page 6: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Assignment 0

Setting up your directory on blue.unix.virginia.eduSetting up your directory on blue.unix.virginia.edu

• Log on to blueLog on to blue

• ‘‘cd /courses/cs/445_brogan/Students’cd /courses/cs/445_brogan/Students’

• ‘‘mkdir mkdir usernameusername’ where ’ where usernameusername is your UVA username is your UVA username

• ‘‘mkdir username/Assignment0’mkdir username/Assignment0’

Next week I’ll lock things down and protect file Next week I’ll lock things down and protect file read permissionsread permissions

Setting up your directory on blue.unix.virginia.eduSetting up your directory on blue.unix.virginia.edu

• Log on to blueLog on to blue

• ‘‘cd /courses/cs/445_brogan/Students’cd /courses/cs/445_brogan/Students’

• ‘‘mkdir mkdir usernameusername’ where ’ where usernameusername is your UVA username is your UVA username

• ‘‘mkdir username/Assignment0’mkdir username/Assignment0’

Next week I’ll lock things down and protect file Next week I’ll lock things down and protect file read permissionsread permissions

Page 7: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Assignment 0

Location of VC7 libraries/includesLocation of VC7 libraries/includes

• blue.unix:/courses/cs/445_brogan/Sources/VC7blue.unix:/courses/cs/445_brogan/Sources/VC7

Future location of VC6 libraries/includesFuture location of VC6 libraries/includes

• blue.unix:/courses/cs/445_brogan/Sources/VC6blue.unix:/courses/cs/445_brogan/Sources/VC6

I’ll send an email to reiterate/clarifyI’ll send an email to reiterate/clarify

• If you’re auditing class, make sure I have your emailIf you’re auditing class, make sure I have your email

Location of VC7 libraries/includesLocation of VC7 libraries/includes

• blue.unix:/courses/cs/445_brogan/Sources/VC7blue.unix:/courses/cs/445_brogan/Sources/VC7

Future location of VC6 libraries/includesFuture location of VC6 libraries/includes

• blue.unix:/courses/cs/445_brogan/Sources/VC6blue.unix:/courses/cs/445_brogan/Sources/VC6

I’ll send an email to reiterate/clarifyI’ll send an email to reiterate/clarify

• If you’re auditing class, make sure I have your emailIf you’re auditing class, make sure I have your email

Page 8: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Goals of these assignments

• Get the programming environment up and runningGet the programming environment up and running

• Get practice with matrix compositionGet practice with matrix composition

• Get practice with line/surface equationsGet practice with line/surface equations

• Get practice building GUIs quicklyGet practice building GUIs quickly

• Get the programming environment up and runningGet the programming environment up and running

• Get practice with matrix compositionGet practice with matrix composition

• Get practice with line/surface equationsGet practice with line/surface equations

• Get practice building GUIs quicklyGet practice building GUIs quickly

Page 9: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Question from last class

Why does OpenGL post-multiply?Why does OpenGL post-multiply?

• No particular reasonNo particular reason

– Are you transforming the point (bottom up)Are you transforming the point (bottom up)

– Are you transforming the coordinate system (top down)Are you transforming the coordinate system (top down)

• OpenGL authors prefer the latterOpenGL authors prefer the latter

• If you don’t like it….If you don’t like it….

– Transpose the matrices and premultiply themTranspose the matrices and premultiply them

Why does OpenGL post-multiply?Why does OpenGL post-multiply?

• No particular reasonNo particular reason

– Are you transforming the point (bottom up)Are you transforming the point (bottom up)

– Are you transforming the coordinate system (top down)Are you transforming the coordinate system (top down)

• OpenGL authors prefer the latterOpenGL authors prefer the latter

• If you don’t like it….If you don’t like it….

– Transpose the matrices and premultiply themTranspose the matrices and premultiply them

Page 10: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

OpenGL: Front/Back Rendering

Each polygon has two sides, front and backEach polygon has two sides, front and back

OpenGL can render the two differentlyOpenGL can render the two differently

The ordering of vertices in the list determines The ordering of vertices in the list determines which is the front side:which is the front side:

• When looking at the When looking at the frontfront side, the vertices go side, the vertices go counterclockwisecounterclockwise

– This is basically the right-hand ruleThis is basically the right-hand rule

– Note that this still holds after perspective projectionNote that this still holds after perspective projection

Each polygon has two sides, front and backEach polygon has two sides, front and back

OpenGL can render the two differentlyOpenGL can render the two differently

The ordering of vertices in the list determines The ordering of vertices in the list determines which is the front side:which is the front side:

• When looking at the When looking at the frontfront side, the vertices go side, the vertices go counterclockwisecounterclockwise

– This is basically the right-hand ruleThis is basically the right-hand rule

– Note that this still holds after perspective projectionNote that this still holds after perspective projection

Page 11: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

OpenGL: Specifying Geometry

Geometry in OpenGL consists of a list of vertices in Geometry in OpenGL consists of a list of vertices in between calls to between calls to glBegin()glBegin() and and glEnd()glEnd()• A simple example: telling GL to render a triangleA simple example: telling GL to render a triangle

glBegin(GL_POLYGON);glBegin(GL_POLYGON);

glVertex3f(x1, y1, z1);glVertex3f(x1, y1, z1);

glVertex3f(x2, y2, z2);glVertex3f(x2, y2, z2);

glVertex3f(x3, y3, z3);glVertex3f(x3, y3, z3);

glEnd();glEnd();

• Usage: Usage: glBegin(glBegin(geomtypegeomtype)) where geomtype is: where geomtype is:

– Points, lines, polygons, triangles, quadrilaterals, etc...Points, lines, polygons, triangles, quadrilaterals, etc...

Geometry in OpenGL consists of a list of vertices in Geometry in OpenGL consists of a list of vertices in between calls to between calls to glBegin()glBegin() and and glEnd()glEnd()• A simple example: telling GL to render a triangleA simple example: telling GL to render a triangle

glBegin(GL_POLYGON);glBegin(GL_POLYGON);

glVertex3f(x1, y1, z1);glVertex3f(x1, y1, z1);

glVertex3f(x2, y2, z2);glVertex3f(x2, y2, z2);

glVertex3f(x3, y3, z3);glVertex3f(x3, y3, z3);

glEnd();glEnd();

• Usage: Usage: glBegin(glBegin(geomtypegeomtype)) where geomtype is: where geomtype is:

– Points, lines, polygons, triangles, quadrilaterals, etc...Points, lines, polygons, triangles, quadrilaterals, etc...

Page 12: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

OpenGL: Drawing Triangles

You can draw multiple triangles between You can draw multiple triangles between glBegin(GL_TRIANGLES)glBegin(GL_TRIANGLES) and and glEnd()glEnd()::

float v1[3], v2[3], v3[3], v4[3];float v1[3], v2[3], v3[3], v4[3];

......

glBegin(GL_TRIANGLES);glBegin(GL_TRIANGLES);

glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3);glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3);

glVertex3fv(v1); glVertex3fv(v3); glVertex3fv(v4);glVertex3fv(v1); glVertex3fv(v3); glVertex3fv(v4);

glEnd();glEnd();

Each set of 3 vertices forms a triangleEach set of 3 vertices forms a triangle

• How much redundant computation is happening?How much redundant computation is happening?

You can draw multiple triangles between You can draw multiple triangles between glBegin(GL_TRIANGLES)glBegin(GL_TRIANGLES) and and glEnd()glEnd()::

float v1[3], v2[3], v3[3], v4[3];float v1[3], v2[3], v3[3], v4[3];

......

glBegin(GL_TRIANGLES);glBegin(GL_TRIANGLES);

glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3);glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3);

glVertex3fv(v1); glVertex3fv(v3); glVertex3fv(v4);glVertex3fv(v1); glVertex3fv(v3); glVertex3fv(v4);

glEnd();glEnd();

Each set of 3 vertices forms a triangleEach set of 3 vertices forms a triangle

• How much redundant computation is happening?How much redundant computation is happening?

Page 13: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

OpenGL: Triangle StripsAn OpenGL An OpenGL triangle striptriangle strip primitive reduces this redundancy by sharing vertices: primitive reduces this redundancy by sharing vertices:

glBegin(GL_TRIANGLE_STRIP);glBegin(GL_TRIANGLE_STRIP);

glVertex3fv(v0);glVertex3fv(v0);

glVertex3fv(v1);glVertex3fv(v1);

glVertex3fv(v2);glVertex3fv(v2);

glVertex3fv(v3);glVertex3fv(v3);

glVertex3fv(v4);glVertex3fv(v4);

glVertex3fv(v5);glVertex3fv(v5);

glEnd();glEnd();

• triangle 0 is v0, v1, v2triangle 0 is v0, v1, v2

• triangle 1 is v2, v1, v3 (triangle 1 is v2, v1, v3 (why not v1, v2, v3?why not v1, v2, v3?))

• triangle 2 is v2, v3, v4triangle 2 is v2, v3, v4

• triangle 3 is v4, v3, v5 (triangle 3 is v4, v3, v5 (again, why not v3, v4, v5again, why not v3, v4, v5))

An OpenGL An OpenGL triangle striptriangle strip primitive reduces this redundancy by sharing vertices: primitive reduces this redundancy by sharing vertices:

glBegin(GL_TRIANGLE_STRIP);glBegin(GL_TRIANGLE_STRIP);

glVertex3fv(v0);glVertex3fv(v0);

glVertex3fv(v1);glVertex3fv(v1);

glVertex3fv(v2);glVertex3fv(v2);

glVertex3fv(v3);glVertex3fv(v3);

glVertex3fv(v4);glVertex3fv(v4);

glVertex3fv(v5);glVertex3fv(v5);

glEnd();glEnd();

• triangle 0 is v0, v1, v2triangle 0 is v0, v1, v2

• triangle 1 is v2, v1, v3 (triangle 1 is v2, v1, v3 (why not v1, v2, v3?why not v1, v2, v3?))

• triangle 2 is v2, v3, v4triangle 2 is v2, v3, v4

• triangle 3 is v4, v3, v5 (triangle 3 is v4, v3, v5 (again, why not v3, v4, v5again, why not v3, v4, v5))

v0v2

v1v3

v4

v5

Page 14: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

OpenGL: More ExamplesExample: GL supports quadrilaterals:Example: GL supports quadrilaterals:

glBegin(GL_QUADS);glBegin(GL_QUADS);

glVertex3f(-1, 1, 0); glVertex3f(-1, 1, 0);

glVertex3f(-1, -1, 0);glVertex3f(-1, -1, 0);

glVertex3f(1, -1, 0);glVertex3f(1, -1, 0);

glVertex3f(1, 1, 0);glVertex3f(1, 1, 0);

glEnd();glEnd();

• This type of operation is called This type of operation is called immediate-mode renderingimmediate-mode rendering; ; each command happens immediatelyeach command happens immediately

Example: GL supports quadrilaterals:Example: GL supports quadrilaterals:

glBegin(GL_QUADS);glBegin(GL_QUADS);

glVertex3f(-1, 1, 0); glVertex3f(-1, 1, 0);

glVertex3f(-1, -1, 0);glVertex3f(-1, -1, 0);

glVertex3f(1, -1, 0);glVertex3f(1, -1, 0);

glVertex3f(1, 1, 0);glVertex3f(1, 1, 0);

glEnd();glEnd();

• This type of operation is called This type of operation is called immediate-mode renderingimmediate-mode rendering; ; each command happens immediatelyeach command happens immediately

Page 15: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Primitive Types

GL_POINTSGL_POINTS

GL_LINEGL_LINE

• {S | _STRIP | _LOOP}{S | _STRIP | _LOOP}

GL_TRIANGLEGL_TRIANGLE

• {S | _STRIP | _FAN}{S | _STRIP | _FAN}

GL_QUADGL_QUAD

• {S | _STRIP}{S | _STRIP}

GL_POLYGONGL_POLYGON

GL_POINTSGL_POINTS

GL_LINEGL_LINE

• {S | _STRIP | _LOOP}{S | _STRIP | _LOOP}

GL_TRIANGLEGL_TRIANGLE

• {S | _STRIP | _FAN}{S | _STRIP | _FAN}

GL_QUADGL_QUAD

• {S | _STRIP}{S | _STRIP}

GL_POLYGONGL_POLYGON

Page 16: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

GL_POLYGON

List of vertices defines polygon edgesList of vertices defines polygon edges

Polygon must be convexPolygon must be convex

List of vertices defines polygon edgesList of vertices defines polygon edges

Polygon must be convexPolygon must be convex

Page 17: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Non-planar Polygons

Imagine polygon with non-planar verticesImagine polygon with non-planar vertices

Some perspectives will be rendered as concave Some perspectives will be rendered as concave polygonspolygons

These concave polygons may not rasterize These concave polygons may not rasterize correctlycorrectly

Imagine polygon with non-planar verticesImagine polygon with non-planar vertices

Some perspectives will be rendered as concave Some perspectives will be rendered as concave polygonspolygons

These concave polygons may not rasterize These concave polygons may not rasterize correctlycorrectly

Page 18: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Single Buffering

• ‘‘Buffer’ corresponds to frame bufferBuffer’ corresponds to frame buffer

• ‘‘Single’ corresponds to there being just oneSingle’ corresponds to there being just one

• Place where you Place where you writewrite pixel color values is same place pixel color values is same place graphics hardware goes to graphics hardware goes to readread color values for display color values for display

• Can draw on top of existing imageCan draw on top of existing image

– Might be faster than redrawing whole imageMight be faster than redrawing whole image

• Can also lead to flickering and half-drawn imagesCan also lead to flickering and half-drawn images

• ‘‘Buffer’ corresponds to frame bufferBuffer’ corresponds to frame buffer

• ‘‘Single’ corresponds to there being just oneSingle’ corresponds to there being just one

• Place where you Place where you writewrite pixel color values is same place pixel color values is same place graphics hardware goes to graphics hardware goes to readread color values for display color values for display

• Can draw on top of existing imageCan draw on top of existing image

– Might be faster than redrawing whole imageMight be faster than redrawing whole image

• Can also lead to flickering and half-drawn imagesCan also lead to flickering and half-drawn images

Page 19: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Double Buffering

• OpenGL writes raster image to separate buffer from that read for OpenGL writes raster image to separate buffer from that read for displaydisplay

• ‘‘front’ buffer is for video signalfront’ buffer is for video signal

• ‘‘back’ buffer is the drawing targetback’ buffer is the drawing target

• After each frame is drawn, the front and back buffers swapAfter each frame is drawn, the front and back buffers swap

– glxSwapBuffers (Display *dpy, Window, w)glxSwapBuffers (Display *dpy, Window, w)

– glutSwapBuffers (void)glutSwapBuffers (void)

• Avoids displaying partially rendered frame bufferAvoids displaying partially rendered frame buffer

• Avoids flickeringAvoids flickering

• OpenGL writes raster image to separate buffer from that read for OpenGL writes raster image to separate buffer from that read for displaydisplay

• ‘‘front’ buffer is for video signalfront’ buffer is for video signal

• ‘‘back’ buffer is the drawing targetback’ buffer is the drawing target

• After each frame is drawn, the front and back buffers swapAfter each frame is drawn, the front and back buffers swap

– glxSwapBuffers (Display *dpy, Window, w)glxSwapBuffers (Display *dpy, Window, w)

– glutSwapBuffers (void)glutSwapBuffers (void)

• Avoids displaying partially rendered frame bufferAvoids displaying partially rendered frame buffer

• Avoids flickeringAvoids flickering

Page 20: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Setting up the OpenGL Window

Must clear the ‘canvas’ before drawingMust clear the ‘canvas’ before drawing

• glClearColor (r, g, b, glClearColor (r, g, b, ))

– Specify the color to initialize canvas toSpecify the color to initialize canvas to

– Typically set Typically set to 0.0 to make fully transparent to 0.0 to make fully transparent

– This is a state variable and can only be called onceThis is a state variable and can only be called once

• glClear(GL_COLOR_BUFFER_BIT)glClear(GL_COLOR_BUFFER_BIT)

– Actually clear the screenActually clear the screen

– glClear could also clear the GL_DEPTH_BUFFER_BITglClear could also clear the GL_DEPTH_BUFFER_BIT

– We’re not worried about that nowWe’re not worried about that now

Must clear the ‘canvas’ before drawingMust clear the ‘canvas’ before drawing

• glClearColor (r, g, b, glClearColor (r, g, b, ))

– Specify the color to initialize canvas toSpecify the color to initialize canvas to

– Typically set Typically set to 0.0 to make fully transparent to 0.0 to make fully transparent

– This is a state variable and can only be called onceThis is a state variable and can only be called once

• glClear(GL_COLOR_BUFFER_BIT)glClear(GL_COLOR_BUFFER_BIT)

– Actually clear the screenActually clear the screen

– glClear could also clear the GL_DEPTH_BUFFER_BITglClear could also clear the GL_DEPTH_BUFFER_BIT

– We’re not worried about that nowWe’re not worried about that now

Page 21: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

3-D Transformations

We studied the details of 2-D transformationsWe studied the details of 2-D transformations

I introduced the expanded 3-D transformationsI introduced the expanded 3-D transformations

We’ve got some more details…We’ve got some more details…

We studied the details of 2-D transformationsWe studied the details of 2-D transformations

I introduced the expanded 3-D transformationsI introduced the expanded 3-D transformations

We’ve got some more details…We’ve got some more details…

Page 22: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Scaling and Translation in 3-D

Pretty much just like 2-DPretty much just like 2-D

• Just add on the z dimension to Just add on the z dimension to everythingeverything

Pretty much just like 2-DPretty much just like 2-D

• Just add on the z dimension to Just add on the z dimension to everythingeverything

1000

000

000

000

t

s

r

1000

100

010

001

z

y

x

TranslationTranslationTranslationTranslation

ScalingScalingScalingScaling

Page 23: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Rotation in 3-D

Looks similar to 2-D CaseLooks similar to 2-D Case

• Specify arbitrray rotation as Specify arbitrray rotation as three anglesthree angles

– One per coordinate axisOne per coordinate axis

– Called an Euler AngleCalled an Euler Angle

– Common representationCommon representation

– But order of rotations mattersBut order of rotations matters

Looks similar to 2-D CaseLooks similar to 2-D Case

• Specify arbitrray rotation as Specify arbitrray rotation as three anglesthree angles

– One per coordinate axisOne per coordinate axis

– Called an Euler AngleCalled an Euler Angle

– Common representationCommon representation

– But order of rotations mattersBut order of rotations matters

1000

0cossin0

0sincos0

0001

xRotation

1000

0100

00cossin

00sincos

zRotation

1000

0cos0sin

0010

0sin0cos

yRotation

Page 24: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

3-D Rotation

General rotations in 3-D require rotating about an General rotations in 3-D require rotating about an arbitrary arbitrary axis of rotationaxis of rotation

Deriving the rotation matrix for such a rotation Deriving the rotation matrix for such a rotation directly is a good exercise in linear algebradirectly is a good exercise in linear algebra

Standard approach: express general rotation as Standard approach: express general rotation as composition of composition of canonical rotationscanonical rotations • Rotations about Rotations about X, Y, ZX, Y, Z

General rotations in 3-D require rotating about an General rotations in 3-D require rotating about an arbitrary arbitrary axis of rotationaxis of rotation

Deriving the rotation matrix for such a rotation Deriving the rotation matrix for such a rotation directly is a good exercise in linear algebradirectly is a good exercise in linear algebra

Standard approach: express general rotation as Standard approach: express general rotation as composition of composition of canonical rotationscanonical rotations • Rotations about Rotations about X, Y, ZX, Y, Z

Page 25: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Composing Canonical Rotations

Goal: rotate about arbitrary vector Goal: rotate about arbitrary vector A A by by

• Idea: we know how to rotate about Idea: we know how to rotate about XX,,YY,,ZZ

– So, rotate about So, rotate about YY by by until until AA lies in the YZ plane lies in the YZ plane

– Then rotate about Then rotate about XX by by until until AA coincides with + coincides with +ZZ

– Then rotate about Then rotate about Z Z by by

– Then reverse the rotation about Then reverse the rotation about X X (by -(by -))

– Then reverse the rotation about Then reverse the rotation about Y Y (by -(by -))

Goal: rotate about arbitrary vector Goal: rotate about arbitrary vector A A by by

• Idea: we know how to rotate about Idea: we know how to rotate about XX,,YY,,ZZ

– So, rotate about So, rotate about YY by by until until AA lies in the YZ plane lies in the YZ plane

– Then rotate about Then rotate about XX by by until until AA coincides with + coincides with +ZZ

– Then rotate about Then rotate about Z Z by by

– Then reverse the rotation about Then reverse the rotation about X X (by -(by -))

– Then reverse the rotation about Then reverse the rotation about Y Y (by -(by -))

Page 26: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Composing Canonical Rotations

First: rotating about First: rotating about YY by by until until AA lies in YZ lies in YZ

How exactly do we calculate How exactly do we calculate ??

• Project Project A A onto XZ plane (Throw away y-coordinate)onto XZ plane (Throw away y-coordinate)

• Find angle Find angle to to XX::

= -(90° - = -(90° - ) = ) = - 90 ° - 90 °

Second: rotating about Second: rotating about XX by by until until AA lies on lies on ZZ

How do we calculate How do we calculate ??

First: rotating about First: rotating about YY by by until until AA lies in YZ lies in YZ

How exactly do we calculate How exactly do we calculate ??

• Project Project A A onto XZ plane (Throw away y-coordinate)onto XZ plane (Throw away y-coordinate)

• Find angle Find angle to to XX::

= -(90° - = -(90° - ) = ) = - 90 ° - 90 °

Second: rotating about Second: rotating about XX by by until until AA lies on lies on ZZ

How do we calculate How do we calculate ??

Page 27: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Composing Canonical Rotations

Why are we slogging through all this tedium?Why are we slogging through all this tedium?

A1: Because you’ll have to do it on the testA1: Because you’ll have to do it on the test

A2: Because it will help with the assignmentA2: Because it will help with the assignment

• Computing intersection between a parabola and ground Computing intersection between a parabola and ground planeplane

Why are we slogging through all this tedium?Why are we slogging through all this tedium?

A1: Because you’ll have to do it on the testA1: Because you’ll have to do it on the test

A2: Because it will help with the assignmentA2: Because it will help with the assignment

• Computing intersection between a parabola and ground Computing intersection between a parabola and ground planeplane

dist = ?

y+

Page 28: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

3-D Rotation Matrices

So an arbitrary rotation about So an arbitrary rotation about AA composes several composes several canonical rotations togethercanonical rotations together

We can express each rotation as a matrixWe can express each rotation as a matrix

Composing transforms == multiplying matricesComposing transforms == multiplying matrices

Thus we can express the final rotation as the product of Thus we can express the final rotation as the product of canonical rotation matricescanonical rotation matrices

Thus we can express the final rotation with a single Thus we can express the final rotation with a single matrix!matrix!

So an arbitrary rotation about So an arbitrary rotation about AA composes several composes several canonical rotations togethercanonical rotations together

We can express each rotation as a matrixWe can express each rotation as a matrix

Composing transforms == multiplying matricesComposing transforms == multiplying matrices

Thus we can express the final rotation as the product of Thus we can express the final rotation as the product of canonical rotation matricescanonical rotation matrices

Thus we can express the final rotation with a single Thus we can express the final rotation with a single matrix!matrix!

Page 29: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Composing MatricesSo we have the following matrices:So we have the following matrices:

pp: The point to be rotated about : The point to be rotated about A A by by

RRyy : Rotate about : Rotate about YY by by

RRx x : Rotate about : Rotate about XX by by

RRzz : Rotate about : Rotate about ZZ by by

RRx x -1-1: Undo rotation about : Undo rotation about XX by by

RRyy-1-1

: Undo rotation about : Undo rotation about YY by by

In what order should we multiply them?In what order should we multiply them?

So we have the following matrices:So we have the following matrices:

pp: The point to be rotated about : The point to be rotated about A A by by

RRyy : Rotate about : Rotate about YY by by

RRx x : Rotate about : Rotate about XX by by

RRzz : Rotate about : Rotate about ZZ by by

RRx x -1-1: Undo rotation about : Undo rotation about XX by by

RRyy-1-1

: Undo rotation about : Undo rotation about YY by by

In what order should we multiply them?In what order should we multiply them?

Page 30: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Compositing Matrices

Short answer: the transformations, in order, are Short answer: the transformations, in order, are written from written from rightright to to leftleft

• In other words, the first matrix to affect the vector goes next In other words, the first matrix to affect the vector goes next to the vector, the second next to the first, etc.to the vector, the second next to the first, etc.

So in our case:So in our case:

p’ = p’ = R Ryy-1 -1 RRx x

-1 -1 RRzz RRx x RRyy pp

Short answer: the transformations, in order, are Short answer: the transformations, in order, are written from written from rightright to to leftleft

• In other words, the first matrix to affect the vector goes next In other words, the first matrix to affect the vector goes next to the vector, the second next to the first, etc.to the vector, the second next to the first, etc.

So in our case:So in our case:

p’ = p’ = R Ryy-1 -1 RRx x

-1 -1 RRzz RRx x RRyy pp

Page 31: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Rotation Matrices

Notice these two matrices:Notice these two matrices:

RRx x : Rotate about : Rotate about XX by by

RRx x -1-1: Undo rotation about : Undo rotation about XX by by

How can we calculate RHow can we calculate Rx x -1-1??

Notice these two matrices:Notice these two matrices:

RRx x : Rotate about : Rotate about XX by by

RRx x -1-1: Undo rotation about : Undo rotation about XX by by

How can we calculate RHow can we calculate Rx x -1-1??

Page 32: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Rotation Matrices

Notice these two matrices:Notice these two matrices:

RRx x : Rotate about : Rotate about XX by by

RRx x -1-1: Undo rotation about : Undo rotation about XX by by

How can we calculate RHow can we calculate Rx x -1-1??

• Obvious answer: calculate RObvious answer: calculate Rx x ((--))

• Clever answer: exploit fact that rotation matrices are Clever answer: exploit fact that rotation matrices are orthonormalorthonormal

Notice these two matrices:Notice these two matrices:

RRx x : Rotate about : Rotate about XX by by

RRx x -1-1: Undo rotation about : Undo rotation about XX by by

How can we calculate RHow can we calculate Rx x -1-1??

• Obvious answer: calculate RObvious answer: calculate Rx x ((--))

• Clever answer: exploit fact that rotation matrices are Clever answer: exploit fact that rotation matrices are orthonormalorthonormal

Page 33: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Rotation Matrices

Notice these two matrices:Notice these two matrices:

RRx x : Rotate about : Rotate about XX by by

RRx x -1-1: Undo rotation about : Undo rotation about XX by by

How can we calculate RHow can we calculate Rx x -1-1??

• Obvious answer: calculate RObvious answer: calculate Rx x ((--))

• Clever answer: exploit fact that rotation matrices are Clever answer: exploit fact that rotation matrices are orthonormal orthonormal

What is an orthonormal matrix?What is an orthonormal matrix?

What property are we talking about?What property are we talking about?

Notice these two matrices:Notice these two matrices:

RRx x : Rotate about : Rotate about XX by by

RRx x -1-1: Undo rotation about : Undo rotation about XX by by

How can we calculate RHow can we calculate Rx x -1-1??

• Obvious answer: calculate RObvious answer: calculate Rx x ((--))

• Clever answer: exploit fact that rotation matrices are Clever answer: exploit fact that rotation matrices are orthonormal orthonormal

What is an orthonormal matrix?What is an orthonormal matrix?

What property are we talking about?What property are we talking about?

Page 34: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Rotation Matrices

Orthonormal matrix: Orthonormal matrix:

• orthogonalorthogonal (columns/rows linearly independent) (columns/rows linearly independent)

• normalizednormalized (columns/rows length of 1) (columns/rows length of 1)

The inverse of an orthogonal matrix is just its The inverse of an orthogonal matrix is just its transpose:transpose:

Orthonormal matrix: Orthonormal matrix:

• orthogonalorthogonal (columns/rows linearly independent) (columns/rows linearly independent)

• normalizednormalized (columns/rows length of 1) (columns/rows length of 1)

The inverse of an orthogonal matrix is just its The inverse of an orthogonal matrix is just its transpose:transpose:

jfc

ieb

hda

jih

fed

cba

jih

fed

cbaT1

Page 35: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Rotation Matrix

9 DOFs must reduce to 39 DOFs must reduce to 3

Rows must be unit length (-3 DOFs)Rows must be unit length (-3 DOFs)

Rows must be orthogonal (-3 DOFs)Rows must be orthogonal (-3 DOFs)

Drifting matrices is very badDrifting matrices is very bad• Numerical errors results when trying to gradually rotate matrix Numerical errors results when trying to gradually rotate matrix

by adding derivativesby adding derivatives

• Resulting matrix may scale / shearResulting matrix may scale / shear

• Gram-Schmidt algorithm will re-orthogonalize your matrixGram-Schmidt algorithm will re-orthogonalize your matrix

Difficult to interpolate between matricesDifficult to interpolate between matrices

9 DOFs must reduce to 39 DOFs must reduce to 3

Rows must be unit length (-3 DOFs)Rows must be unit length (-3 DOFs)

Rows must be orthogonal (-3 DOFs)Rows must be orthogonal (-3 DOFs)

Drifting matrices is very badDrifting matrices is very bad• Numerical errors results when trying to gradually rotate matrix Numerical errors results when trying to gradually rotate matrix

by adding derivativesby adding derivatives

• Resulting matrix may scale / shearResulting matrix may scale / shear

• Gram-Schmidt algorithm will re-orthogonalize your matrixGram-Schmidt algorithm will re-orthogonalize your matrix

Difficult to interpolate between matricesDifficult to interpolate between matrices

Page 36: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Euler Angles

((xx, , yy, , zz) = R) = RzzRRyyRRxx

• Rotate Rotate xx degrees about x-axis degrees about x-axis

• Rotate Rotate yy degrees about y-axis degrees about y-axis

• Rotate Rotate zz degrees about z-axis degrees about z-axis

Axis order is not definedAxis order is not defined• (y, z, x), (x, z, y), (z, y, x)…(y, z, x), (x, z, y), (z, y, x)…

are all legal are all legal

• Pick onePick one

((xx, , yy, , zz) = R) = RzzRRyyRRxx

• Rotate Rotate xx degrees about x-axis degrees about x-axis

• Rotate Rotate yy degrees about y-axis degrees about y-axis

• Rotate Rotate zz degrees about z-axis degrees about z-axis

Axis order is not definedAxis order is not defined• (y, z, x), (x, z, y), (z, y, x)…(y, z, x), (x, z, y), (z, y, x)…

are all legal are all legal

• Pick onePick one

Page 37: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Euler Angles

Rotations not uniquely definedRotations not uniquely defined

• ex: (z, x, y) = (90, 45, 45) = (45, 0, -45)ex: (z, x, y) = (90, 45, 45) = (45, 0, -45)takes positive x-axis to (1, 1, 1)takes positive x-axis to (1, 1, 1)

• cartesian coordinates are independent of one another, but cartesian coordinates are independent of one another, but Euler angles are notEuler angles are not

Gimbal LockGimbal Lock

• Term derived from mechanical problem that arises in Term derived from mechanical problem that arises in gimbal mechanism that supports a compass or a gyrogimbal mechanism that supports a compass or a gyro

Rotations not uniquely definedRotations not uniquely defined

• ex: (z, x, y) = (90, 45, 45) = (45, 0, -45)ex: (z, x, y) = (90, 45, 45) = (45, 0, -45)takes positive x-axis to (1, 1, 1)takes positive x-axis to (1, 1, 1)

• cartesian coordinates are independent of one another, but cartesian coordinates are independent of one another, but Euler angles are notEuler angles are not

Gimbal LockGimbal Lock

• Term derived from mechanical problem that arises in Term derived from mechanical problem that arises in gimbal mechanism that supports a compass or a gyrogimbal mechanism that supports a compass or a gyro

Page 38: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Gimbal Lock

Page 39: CS 445 / 645 Introduction to Computer Graphics Lecture 5 Assignment 1 3D Primitives and Transformations Lecture 5 Assignment 1 3D Primitives and Transformations

Gimbal Lock

Occurs when two axes are Occurs when two axes are alignedaligned

Second and third rotations Second and third rotations have effect of transforming have effect of transforming earlier rotationsearlier rotations• ex: Rot x, Rot y, Rot zex: Rot x, Rot y, Rot z

– If Rot y = 90 degrees, Rot z == -If Rot y = 90 degrees, Rot z == -Rot xRot x

Occurs when two axes are Occurs when two axes are alignedaligned

Second and third rotations Second and third rotations have effect of transforming have effect of transforming earlier rotationsearlier rotations• ex: Rot x, Rot y, Rot zex: Rot x, Rot y, Rot z

– If Rot y = 90 degrees, Rot z == -If Rot y = 90 degrees, Rot z == -Rot xRot x