lecture 04
TRANSCRIPT
Introduction to Computer GraphicsCS 445 / 645
Lecture 4Lecture 4
OpenGLOpenGL
Lecture 4Lecture 4
OpenGLOpenGLOpenGL Programming Guide
AnnouncementAnnouncement
• Visit discussion forum to keep up to dateVisit discussion forum to keep up to date
• Red Book is good source for OpenGLRed Book is good source for OpenGL
AnnouncementAnnouncement
• Visit discussion forum to keep up to dateVisit discussion forum to keep up to date
• Red Book is good source for OpenGLRed Book is good source for OpenGL
Intro to OpenGL
OpenGL operates as an infinite loopOpenGL operates as an infinite loop
• Put things in the scene (points, colored lines, textured polys)Put things in the scene (points, colored lines, textured polys)
• Describe the camera (location, orientation, field of view)Describe the camera (location, orientation, field of view)
• Listen for keyboard eventsListen for keyboard events
• Render – draw the sceneRender – draw the scene
OpenGL operates as an infinite loopOpenGL operates as an infinite loop
• Put things in the scene (points, colored lines, textured polys)Put things in the scene (points, colored lines, textured polys)
• Describe the camera (location, orientation, field of view)Describe the camera (location, orientation, field of view)
• Listen for keyboard eventsListen for keyboard events
• Render – draw the sceneRender – draw the scene
Intro to OpenGL
OpenGL has a “state”OpenGL has a “state”
• There are a lot of ways your OpenGL program can be There are a lot of ways your OpenGL program can be configuredconfigured
• The current configuration is stored in OpenGL’s stateThe current configuration is stored in OpenGL’s state
• Be aware that OpenGL commands affect the program’s state Be aware that OpenGL commands affect the program’s state rather than redirect its logical executionrather than redirect its logical execution
OpenGL has a “state”OpenGL has a “state”
• There are a lot of ways your OpenGL program can be There are a lot of ways your OpenGL program can be configuredconfigured
• The current configuration is stored in OpenGL’s stateThe current configuration is stored in OpenGL’s state
• Be aware that OpenGL commands affect the program’s state Be aware that OpenGL commands affect the program’s state rather than redirect its logical executionrather than redirect its logical execution
Intro to OpenGL
OpenGL uses matricesOpenGL uses matrices
• Matrix describes camera typeMatrix describes camera type
• Matrix describes current configuration of the 3D spaceMatrix describes current configuration of the 3D space
– Explanation…Explanation…
OpenGL uses matricesOpenGL uses matrices
• Matrix describes camera typeMatrix describes camera type
• Matrix describes current configuration of the 3D spaceMatrix describes current configuration of the 3D space
– Explanation…Explanation…
Intro to OpenGL
OpenGL coordinate systemOpenGL coordinate system
• right-handedright-handed
– Hold out your right hand and hold your thumb, index, and Hold out your right hand and hold your thumb, index, and middle fingers middle fingers orthogonalorthogonal to one another to one another
– Call your thumb the x-axis, index = y-axis, and middle = Call your thumb the x-axis, index = y-axis, and middle = axisaxis
– This is the OpenGL coordinate systemThis is the OpenGL coordinate system
• The camera defaults to look down negative z-axisThe camera defaults to look down negative z-axis
OpenGL coordinate systemOpenGL coordinate system
• right-handedright-handed
– Hold out your right hand and hold your thumb, index, and Hold out your right hand and hold your thumb, index, and middle fingers middle fingers orthogonalorthogonal to one another to one another
– Call your thumb the x-axis, index = y-axis, and middle = Call your thumb the x-axis, index = y-axis, and middle = axisaxis
– This is the OpenGL coordinate systemThis is the OpenGL coordinate system
• The camera defaults to look down negative z-axisThe camera defaults to look down negative z-axis
Intro to OpenGL
So…So…
• X-axis = thumb = 1, 0, 0X-axis = thumb = 1, 0, 0
• Y-axis = index = 0, 1, 0Y-axis = index = 0, 1, 0
• Z-axis = middle = 0, 0, 1Z-axis = middle = 0, 0, 1
• Camera defaults to look down negative z-axisCamera defaults to look down negative z-axis
• Let’s say we want it to look down x-axisLet’s say we want it to look down x-axis
So…So…
• X-axis = thumb = 1, 0, 0X-axis = thumb = 1, 0, 0
• Y-axis = index = 0, 1, 0Y-axis = index = 0, 1, 0
• Z-axis = middle = 0, 0, 1Z-axis = middle = 0, 0, 1
• Camera defaults to look down negative z-axisCamera defaults to look down negative z-axis
• Let’s say we want it to look down x-axisLet’s say we want it to look down x-axis
100
010
001
Intro to OpenGL
Coordinate system transformation so camera Coordinate system transformation so camera looks down x-axislooks down x-axis
• If x-axis If x-axis negative z-axis negative z-axis
– x x -z -z
– y y y y
– z z x x
Coordinate system transformation so camera Coordinate system transformation so camera looks down x-axislooks down x-axis
• If x-axis If x-axis negative z-axis negative z-axis
– x x -z -z
– y y y y
– z z x x
001
010
100
Intro to OpenGL
The aThe a i matrix defines the transformation i matrix defines the transformation
Why store the transformation matrix and not the final Why store the transformation matrix and not the final desired matrix?desired matrix?
The aThe a i matrix defines the transformation i matrix defines the transformation
Why store the transformation matrix and not the final Why store the transformation matrix and not the final desired matrix?desired matrix?
ihg
fed
cba
100
010
001
001
010
100
=
Intro to OpenGL
The transformation will be applied to many pointsThe transformation will be applied to many points
• If the following transformation moves the axesIf the following transformation moves the axes
• The same transformation moves vertices The same transformation moves vertices
– Example: (1, 1, -1) Example: (1, 1, -1) (-1, 1, -1) (-1, 1, -1)
The transformation will be applied to many pointsThe transformation will be applied to many points
• If the following transformation moves the axesIf the following transformation moves the axes
• The same transformation moves vertices The same transformation moves vertices
– Example: (1, 1, -1) Example: (1, 1, -1) (-1, 1, -1) (-1, 1, -1)
ihg
fed
cba
100
010
001
001
010
100
=
'
'
'
001
010
100
k
j
i
k
j
i
Intro to OpenGL
This important matrix is stored as the This important matrix is stored as the MODELVIEWMODELVIEW matrix matrix
• The MODELVIEW matrix is so important OpenGL maintains a stack of The MODELVIEW matrix is so important OpenGL maintains a stack of these matricesthese matrices
• You have control of this stack with the glPushMatrix and glPopMatrix You have control of this stack with the glPushMatrix and glPopMatrix commandscommands
• (The matrix is actually 4x4, but we will study the details to understand (The matrix is actually 4x4, but we will study the details to understand why in the future)why in the future)
Note OpenGL preserves a similar matrix to describe the Note OpenGL preserves a similar matrix to describe the camera type and this is called the camera type and this is called the PROJECTION_MATRIXPROJECTION_MATRIX
This important matrix is stored as the This important matrix is stored as the MODELVIEWMODELVIEW matrix matrix
• The MODELVIEW matrix is so important OpenGL maintains a stack of The MODELVIEW matrix is so important OpenGL maintains a stack of these matricesthese matrices
• You have control of this stack with the glPushMatrix and glPopMatrix You have control of this stack with the glPushMatrix and glPopMatrix commandscommands
• (The matrix is actually 4x4, but we will study the details to understand (The matrix is actually 4x4, but we will study the details to understand why in the future)why in the future)
Note OpenGL preserves a similar matrix to describe the Note OpenGL preserves a similar matrix to describe the camera type and this is called the camera type and this is called the PROJECTION_MATRIXPROJECTION_MATRIX
Introduction to OpenGL
What’s hard about this assignment?What’s hard about this assignment?• Managing the MODELVIEW stackManaging the MODELVIEW stack
• We’ll use:We’ll use:
– glLoadIdentity();glLoadIdentity();
– glTranslatef(GLfloat x, y, z);glTranslatef(GLfloat x, y, z);
– glRotatef(GLfloat degrees, x, y, z);glRotatef(GLfloat degrees, x, y, z);
– glScalef (GLfloat x, y, z);glScalef (GLfloat x, y, z);
– glPushMatrix(), glPopMatrix();glPushMatrix(), glPopMatrix();
What’s hard about this assignment?What’s hard about this assignment?• Managing the MODELVIEW stackManaging the MODELVIEW stack
• We’ll use:We’ll use:
– glLoadIdentity();glLoadIdentity();
– glTranslatef(GLfloat x, y, z);glTranslatef(GLfloat x, y, z);
– glRotatef(GLfloat degrees, x, y, z);glRotatef(GLfloat degrees, x, y, z);
– glScalef (GLfloat x, y, z);glScalef (GLfloat x, y, z);
– glPushMatrix(), glPopMatrix();glPushMatrix(), glPopMatrix();
Modeling Transformations
glTranslate (x, y, z)glTranslate (x, y, z)• Post-multiplies the current matrix by a matrix that moves Post-multiplies the current matrix by a matrix that moves
the object by the given x-, y-, and z-valuesthe object by the given x-, y-, and z-values
glRotate (theta, x, y, z)glRotate (theta, x, y, z)• Post-multiplies the current matrix by a matrix that rotates Post-multiplies the current matrix by a matrix that rotates
the object in a counterclockwise direction about the ray the object in a counterclockwise direction about the ray from the origin through the point (x, y, z)from the origin through the point (x, y, z)
glTranslate (x, y, z)glTranslate (x, y, z)• Post-multiplies the current matrix by a matrix that moves Post-multiplies the current matrix by a matrix that moves
the object by the given x-, y-, and z-valuesthe object by the given x-, y-, and z-values
glRotate (theta, x, y, z)glRotate (theta, x, y, z)• Post-multiplies the current matrix by a matrix that rotates Post-multiplies the current matrix by a matrix that rotates
the object in a counterclockwise direction about the ray the object in a counterclockwise direction about the ray from the origin through the point (x, y, z)from the origin through the point (x, y, z)
Modeling Transformations
glScale (x, y, z)glScale (x, y, z)
• Post-multiplies the current matrix by a matrix that stretches, Post-multiplies the current matrix by a matrix that stretches, shrinks, or reflects an object along the axesshrinks, or reflects an object along the axes
glScale (x, y, z)glScale (x, y, z)
• Post-multiplies the current matrix by a matrix that stretches, Post-multiplies the current matrix by a matrix that stretches, shrinks, or reflects an object along the axesshrinks, or reflects an object along the axes
Modeling Transformations
It is important that you understand the order in which It is important that you understand the order in which OpenGL concatenates matricesOpenGL concatenates matrices
It is important that you understand the order in which It is important that you understand the order in which OpenGL concatenates matricesOpenGL concatenates matrices
glMatrixMode (MODELVIEW);glMatrixMode (MODELVIEW);
glLoadIdentity();glLoadIdentity();
glMultMatrix(N);glMultMatrix(N);
glMultMatrix(M);glMultMatrix(M);
glMultMatrix(L);glMultMatrix(L);
glBegin(POINTS);glBegin(POINTS);
glVertex3f(v);glVertex3f(v);
glEnd();glEnd();
glMatrixMode (MODELVIEW);glMatrixMode (MODELVIEW);
glLoadIdentity();glLoadIdentity();
glMultMatrix(N);glMultMatrix(N);
glMultMatrix(M);glMultMatrix(M);
glMultMatrix(L);glMultMatrix(L);
glBegin(POINTS);glBegin(POINTS);
glVertex3f(v);glVertex3f(v);
glEnd();glEnd();
Modelview matrix successively contains:I(dentity), N, NM, NML
The transformed vertex is:NMLv = N(M(Lv))
Manipulating Matrix Stacks
Observation: Certain model transformations are shared Observation: Certain model transformations are shared among many modelsamong many models
We want to avoid continuously reloading the same We want to avoid continuously reloading the same sequence of transformationssequence of transformations
glPushMatrix ( )glPushMatrix ( ) • push all matrices in current stack down one level and copy topmost push all matrices in current stack down one level and copy topmost
matrix of stackmatrix of stack
glPopMatrix ( )glPopMatrix ( )• pop the top matrix off the stackpop the top matrix off the stack
Observation: Certain model transformations are shared Observation: Certain model transformations are shared among many modelsamong many models
We want to avoid continuously reloading the same We want to avoid continuously reloading the same sequence of transformationssequence of transformations
glPushMatrix ( )glPushMatrix ( ) • push all matrices in current stack down one level and copy topmost push all matrices in current stack down one level and copy topmost
matrix of stackmatrix of stack
glPopMatrix ( )glPopMatrix ( )• pop the top matrix off the stackpop the top matrix off the stack
Matrix Manipulation - Example
Drawing a car with wheels and lugnutsDrawing a car with wheels and lugnutsDrawing a car with wheels and lugnutsDrawing a car with wheels and lugnuts
draw_wheel( );for (j=0; j<5; j++) {
glPushMatrix ();glRotatef(72.0*j, 0.0, 0.0, 1.0);glTranslatef (3.0, 0.0, 0.0);draw_bolt ( );
glPopMatrix ( );}
Matrix Manipulation – ExampleMatrix Manipulation – ExampleGrand, fixed coordinate systemGrand, fixed coordinate systemdraw_wheel( );for (j=0; j<5; j++) {
glPushMatrix ();glRotatef(72.0*j, 0.0, 0.0, 1.0);glTranslatef (3.0, 0.0, 0.0);draw_bolt ( );
glPopMatrix ( );
Global – Bottom Up
Start RotTrans
RRT
RTv
Matrix Manipulation – ExampleMatrix Manipulation – ExampleLocal coordinate systemLocal coordinate system
draw_wheel( );for (j=0; j<5; j++) {
glPushMatrix ();glRotatef(72.0*j, 0.0, 0.0, 1.0);glTranslatef (3.0, 0.0, 0.0);draw_bolt ( );
glPopMatrix ( );
Local – Top Down
Start Rot Trans
RRT
RTv
OpenGL: Conventions
Functions in OpenGL start with Functions in OpenGL start with glgl
• Most functions just Most functions just gl gl (e.g., (e.g., glColor()glColor()) )
• Functions starting with Functions starting with gluglu are utility functions (e.g., are utility functions (e.g., gluLookAt()gluLookAt()))
• Functions starting with Functions starting with glxglx are for interfacing with the X are for interfacing with the X Windows system (e.g., in gfx.c)Windows system (e.g., in gfx.c)
Functions in OpenGL start with Functions in OpenGL start with glgl
• Most functions just Most functions just gl gl (e.g., (e.g., glColor()glColor()) )
• Functions starting with Functions starting with gluglu are utility functions (e.g., are utility functions (e.g., gluLookAt()gluLookAt()))
• Functions starting with Functions starting with glxglx are for interfacing with the X are for interfacing with the X Windows system (e.g., in gfx.c)Windows system (e.g., in gfx.c)
OpenGL: Conventions
Function names indicate argument type and numberFunction names indicate argument type and number
• Functions ending with Functions ending with ff take floats take floats
• Functions ending with Functions ending with ii take ints take ints
• Functions ending with Functions ending with bb take bytes take bytes
• Functions ending with Functions ending with ubub take unsigned bytes take unsigned bytes
• Functions that end with Functions that end with vv take an array. take an array.
ExamplesExamples• glColor3f()glColor3f() takes 3 floats takes 3 floats
• glColor4fv() glColor4fv() takes an array of 4 floatstakes an array of 4 floats
Function names indicate argument type and numberFunction names indicate argument type and number
• Functions ending with Functions ending with ff take floats take floats
• Functions ending with Functions ending with ii take ints take ints
• Functions ending with Functions ending with bb take bytes take bytes
• Functions ending with Functions ending with ubub take unsigned bytes take unsigned bytes
• Functions that end with Functions that end with vv take an array. take an array.
ExamplesExamples• glColor3f()glColor3f() takes 3 floats takes 3 floats
• glColor4fv() glColor4fv() takes an array of 4 floatstakes an array of 4 floats
OpenGL: Conventions
Variables written in CAPITAL lettersVariables written in CAPITAL letters
• Example: GLUT_SINGLE, GLUT_RGBExample: GLUT_SINGLE, GLUT_RGB
• usually constantsusually constants
• use the bitwise or command (x | y) to combine constantsuse the bitwise or command (x | y) to combine constants
Variables written in CAPITAL lettersVariables written in CAPITAL letters
• Example: GLUT_SINGLE, GLUT_RGBExample: GLUT_SINGLE, GLUT_RGB
• usually constantsusually constants
• use the bitwise or command (x | y) to combine constantsuse the bitwise or command (x | y) to combine constants
OpenGL: Simple Use
Open a window and attach OpenGL to itOpen a window and attach OpenGL to it
Set projection parameters (e.g., field of view)Set projection parameters (e.g., field of view)
Setup lighting, if anySetup lighting, if any
Main rendering loopMain rendering loop
• Set camera pose with Set camera pose with gluLookAt() gluLookAt()
– Camera position specified in world coordinatesCamera position specified in world coordinates
• Render polygons of modelRender polygons of model
– Simplest case: vertices of polygons in world coordinatesSimplest case: vertices of polygons in world coordinates
Open a window and attach OpenGL to itOpen a window and attach OpenGL to it
Set projection parameters (e.g., field of view)Set projection parameters (e.g., field of view)
Setup lighting, if anySetup lighting, if any
Main rendering loopMain rendering loop
• Set camera pose with Set camera pose with gluLookAt() gluLookAt()
– Camera position specified in world coordinatesCamera position specified in world coordinates
• Render polygons of modelRender polygons of model
– Simplest case: vertices of polygons in world coordinatesSimplest case: vertices of polygons in world coordinates
OpenGL: Simple Use
Open a window and attach OpenGL to itOpen a window and attach OpenGL to it
• glutCreateWindow() or FLTK window methodglutCreateWindow() or FLTK window method
Open a window and attach OpenGL to itOpen a window and attach OpenGL to it
• glutCreateWindow() or FLTK window methodglutCreateWindow() or FLTK window method
OpenGL: Perspective Projection
Set projection parameters (e.g., field of view)Set projection parameters (e.g., field of view)
Typically, we use a Typically, we use a perspective projectionperspective projection
• Distant objects appear smaller than near objects Distant objects appear smaller than near objects
• Vanishing point at center of screenVanishing point at center of screen
• Defined by a Defined by a view frustumview frustum (draw it) (draw it)
Other projections: Other projections: orthographicorthographic, , isometricisometric
Set projection parameters (e.g., field of view)Set projection parameters (e.g., field of view)
Typically, we use a Typically, we use a perspective projectionperspective projection
• Distant objects appear smaller than near objects Distant objects appear smaller than near objects
• Vanishing point at center of screenVanishing point at center of screen
• Defined by a Defined by a view frustumview frustum (draw it) (draw it)
Other projections: Other projections: orthographicorthographic, , isometricisometric
Setting up CameraglMatrixMode(GL_MODELVIEW);glMatrixMode(GL_MODELVIEW);
glLoadIdentity();glLoadIdentity();
gluLookAt(gluLookAt( eyeX, eyeY, eyeZ, eyeX, eyeY, eyeZ, lookX, lookY, lookZ, lookX, lookY, lookZ, upX, upY, upZ);upX, upY, upZ);
• eye[XYZ]: camera position in world coordinateseye[XYZ]: camera position in world coordinates
• look[XYZ]: a point centered in camera’s viewlook[XYZ]: a point centered in camera’s view
• up[XYZ]: a up[XYZ]: a vectorvector defining the camera’s vertical defining the camera’s vertical
Creates a matrix that transforms points in world coordinates to Creates a matrix that transforms points in world coordinates to camera coordinatescamera coordinates
• Camera at originCamera at origin
• Looking down -Z axisLooking down -Z axis
• Up vector aligned with Y axisUp vector aligned with Y axis
glMatrixMode(GL_MODELVIEW);glMatrixMode(GL_MODELVIEW);
glLoadIdentity();glLoadIdentity();
gluLookAt(gluLookAt( eyeX, eyeY, eyeZ, eyeX, eyeY, eyeZ, lookX, lookY, lookZ, lookX, lookY, lookZ, upX, upY, upZ);upX, upY, upZ);
• eye[XYZ]: camera position in world coordinateseye[XYZ]: camera position in world coordinates
• look[XYZ]: a point centered in camera’s viewlook[XYZ]: a point centered in camera’s view
• up[XYZ]: a up[XYZ]: a vectorvector defining the camera’s vertical defining the camera’s vertical
Creates a matrix that transforms points in world coordinates to Creates a matrix that transforms points in world coordinates to camera coordinatescamera coordinates
• Camera at originCamera at origin
• Looking down -Z axisLooking down -Z axis
• Up vector aligned with Y axisUp vector aligned with Y axis
OpenGL: Perspective Projection
In OpenGL: In OpenGL: • Projections implemented by Projections implemented by projection matrixprojection matrix
• gluPerspective()gluPerspective() creates a perspective creates a perspective projection matrix:projection matrix:
glSetMatrix(GL_PROJECTION);glSetMatrix(GL_PROJECTION);
glLoadIdentity(); //glLoadIdentity(); //load an identity matrixload an identity matrix
gluPerspective(vfov, aspect, near, far);gluPerspective(vfov, aspect, near, far);
Parameters to Parameters to gluPerspective()gluPerspective()::• vfovvfov: vertical field of view: vertical field of view
• aspectaspect: window width/height: window width/height
• nearnear, , farfar: distance to near & far clipping planes: distance to near & far clipping planes
In OpenGL: In OpenGL: • Projections implemented by Projections implemented by projection matrixprojection matrix
• gluPerspective()gluPerspective() creates a perspective creates a perspective projection matrix:projection matrix:
glSetMatrix(GL_PROJECTION);glSetMatrix(GL_PROJECTION);
glLoadIdentity(); //glLoadIdentity(); //load an identity matrixload an identity matrix
gluPerspective(vfov, aspect, near, far);gluPerspective(vfov, aspect, near, far);
Parameters to Parameters to gluPerspective()gluPerspective()::• vfovvfov: vertical field of view: vertical field of view
• aspectaspect: window width/height: window width/height
• nearnear, , farfar: distance to near & far clipping planes: distance to near & far clipping planes
OpenGL: Lighting
Setup lighting, if anySetup lighting, if any
Simplest option: change the Simplest option: change the current colorcurrent color between between polygons or verticespolygons or vertices• glColor() sets the current colorglColor() sets the current color
Or OpenGL provides a simple lighting model:Or OpenGL provides a simple lighting model:• Set parameters for light(s)Set parameters for light(s)
– Intensity, position, direction & falloff (if applicable) Intensity, position, direction & falloff (if applicable)
• Set Set materialmaterial parameters to describe how light reflects from the parameters to describe how light reflects from the surfacesurface
Won’t go into details now; check the red book if Won’t go into details now; check the red book if interestedinterested
Setup lighting, if anySetup lighting, if any
Simplest option: change the Simplest option: change the current colorcurrent color between between polygons or verticespolygons or vertices• glColor() sets the current colorglColor() sets the current color
Or OpenGL provides a simple lighting model:Or OpenGL provides a simple lighting model:• Set parameters for light(s)Set parameters for light(s)
– Intensity, position, direction & falloff (if applicable) Intensity, position, direction & falloff (if applicable)
• Set Set materialmaterial parameters to describe how light reflects from the parameters to describe how light reflects from the surfacesurface
Won’t go into details now; check the red book if Won’t go into details now; check the red book if interestedinterested
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...
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
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
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
OpenGL: More Examples
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
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
OpenGL: Drawing TrianglesYou 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• What do the triangles drawn above look like?What do the triangles drawn above look like?
• 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• What do the triangles drawn above look like?What do the triangles drawn above look like?
• How much redundant computation is happening?How much redundant computation is happening?
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 (again, triangle 3 is v4, v3, v5 (again, notnot v3, v4, v5) 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 (again, triangle 3 is v4, v3, v5 (again, notnot v3, v4, v5) v3, v4, v5)
v0v2
v1v3
v4
v5
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
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
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• What do the triangles drawn above look like?What do the triangles drawn above look like?
• 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• What do the triangles drawn above look like?What do the triangles drawn above look like?
• How much redundant computation is happening?How much redundant computation is happening?
OpenGL: Triangle StripsAn OpenGL An OpenGL triangle striptriangle strip primitive reduces this redundancy by sharing primitive reduces this redundancy by sharing
vertices: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 (again, triangle 3 is v4, v3, v5 (again, notnot v3, v4, v5) v3, v4, v5)
An OpenGL An OpenGL triangle striptriangle strip primitive reduces this redundancy by sharing primitive reduces this redundancy by sharing vertices: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 (again, triangle 3 is v4, v3, v5 (again, notnot v3, v4, v5) v3, v4, v5)
v0v2
v1v3
v4
v5
Double Buffering
Avoids displaying partially rendered frame bufferAvoids displaying partially rendered frame buffer
OpenGL generates one raster image while another OpenGL generates one raster image while another raster image is displayed on monitorraster image is displayed on monitor
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
OpenGL generates one raster image while another OpenGL generates one raster image while another raster image is displayed on monitorraster image is displayed on monitor
glxSwapBuffers (Display *dpy, Window, w)glxSwapBuffers (Display *dpy, Window, w)
glutSwapBuffers (void)glutSwapBuffers (void)
Learn OpenGL by example
robot.c from the OpenGL Programming Guiderobot.c from the OpenGL Programming Guiderobot.c from the OpenGL Programming Guiderobot.c from the OpenGL Programming Guide
Learn OpenGL by example
Two bodiesTwo bodies
• Upper armUpper arm
• Lower armLower arm
Major tasksMajor tasks
• PositionPosition
• OrientationOrientation
Two bodiesTwo bodies
• Upper armUpper arm
• Lower armLower arm
Major tasksMajor tasks
• PositionPosition
• OrientationOrientation
Learn OpenGL by example
Both bodies originally at originBoth bodies originally at originBoth bodies originally at originBoth bodies originally at origin
Learn OpenGL by example
HeadersHeaders#include <GL/gl.h> #include <GL/gl.h>
#include <GL/glu.h> #include <GL/glu.h>
#include <GL/glut.h> #include <GL/glut.h>
HeadersHeaders#include <GL/gl.h> #include <GL/gl.h>
#include <GL/glu.h> #include <GL/glu.h>
#include <GL/glut.h> #include <GL/glut.h>
Learn OpenGL by exampleint main(int argc, char** argv) { int main(int argc, char** argv) {
glutInit(&argc, argv); glutInit(&argc, argv);
glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize (500, 500);glutInitWindowSize (500, 500);
glutInitWindowPosition (100, 100); glutInitWindowPosition (100, 100);
glutCreateWindow (argv[0]); glutCreateWindow (argv[0]);
init (); init ();
glutDisplayFunc(display); glutDisplayFunc(display);
glutReshapeFunc(reshape);glutReshapeFunc(reshape);
glutKeyboardFunc(keyboard); glutKeyboardFunc(keyboard);
glutMainLoop(); glutMainLoop();
return 0;return 0; } }
int main(int argc, char** argv) { int main(int argc, char** argv) {
glutInit(&argc, argv); glutInit(&argc, argv);
glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize (500, 500);glutInitWindowSize (500, 500);
glutInitWindowPosition (100, 100); glutInitWindowPosition (100, 100);
glutCreateWindow (argv[0]); glutCreateWindow (argv[0]);
init (); init ();
glutDisplayFunc(display); glutDisplayFunc(display);
glutReshapeFunc(reshape);glutReshapeFunc(reshape);
glutKeyboardFunc(keyboard); glutKeyboardFunc(keyboard);
glutMainLoop(); glutMainLoop();
return 0;return 0; } }
Learn OpenGL by examplevoid init(void) { void init(void) {
glClearColor (0.0, 0.0, 0.0, 0.0); glClearColor (0.0, 0.0, 0.0, 0.0);
glShadeModel (GL_FLAT); glShadeModel (GL_FLAT);
}}
void init(void) { void init(void) {
glClearColor (0.0, 0.0, 0.0, 0.0); glClearColor (0.0, 0.0, 0.0, 0.0);
glShadeModel (GL_FLAT); glShadeModel (GL_FLAT);
}}
Learn OpenGL by examplevoid display(void){ void display(void){
glClear (GL_COLOR_BUFFER_BIT); glClear (GL_COLOR_BUFFER_BIT);
glPushMatrix(); glPushMatrix();
glTranslatef (-1.0, 0.0, 0.0); glTranslatef (-1.0, 0.0, 0.0);
glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0); glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0);
glTranslatef (1.0, 0.0, 0.0); glTranslatef (1.0, 0.0, 0.0);
glPushMatrix(); glPushMatrix();
glScalef (2.0, 0.4, 1.0); glScalef (2.0, 0.4, 1.0);
glutWireCube (1.0); glutWireCube (1.0);
glPopMatrix(); glPopMatrix();
Continued…Continued…
void display(void){ void display(void){
glClear (GL_COLOR_BUFFER_BIT); glClear (GL_COLOR_BUFFER_BIT);
glPushMatrix(); glPushMatrix();
glTranslatef (-1.0, 0.0, 0.0); glTranslatef (-1.0, 0.0, 0.0);
glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0); glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0);
glTranslatef (1.0, 0.0, 0.0); glTranslatef (1.0, 0.0, 0.0);
glPushMatrix(); glPushMatrix();
glScalef (2.0, 0.4, 1.0); glScalef (2.0, 0.4, 1.0);
glutWireCube (1.0); glutWireCube (1.0);
glPopMatrix(); glPopMatrix();
Continued…Continued…
Learn OpenGL by exampleglTranslatef (1.0, 0.0, 0.0); glTranslatef (1.0, 0.0, 0.0);
glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0); glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0);
glTranslatef (1.0, 0.0, 0.0); glTranslatef (1.0, 0.0, 0.0);
glPushMatrix(); glPushMatrix();
glScalef (2.0, 0.4, 1.0); glScalef (2.0, 0.4, 1.0);
glutWireCube (1.0); glutWireCube (1.0);
glPopMatrix(); glPopMatrix();
glPopMatrix(); glPopMatrix();
glutSwapBuffers();glutSwapBuffers();
} }
glTranslatef (1.0, 0.0, 0.0); glTranslatef (1.0, 0.0, 0.0);
glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0); glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0);
glTranslatef (1.0, 0.0, 0.0); glTranslatef (1.0, 0.0, 0.0);
glPushMatrix(); glPushMatrix();
glScalef (2.0, 0.4, 1.0); glScalef (2.0, 0.4, 1.0);
glutWireCube (1.0); glutWireCube (1.0);
glPopMatrix(); glPopMatrix();
glPopMatrix(); glPopMatrix();
glutSwapBuffers();glutSwapBuffers();
} }