Download S2K Arial, Bold, 37 points, 105% line spacing

Teaching a Graphics Class with
OpenGL: Two Approaches
Ed Angel
University of New Mexico
F.S. Hill
University of Massachusetts
Who are we?
• Ed Angel: Presidential Teaching Fellow,
UNM, author of Interactive Computer
Graphics (Second Edition)
• Sandy Hill, UMass, NTU. Author of
Computer Graphics with OpenGL
Why are we doing this?
• OpenGL is the dominant graphics API
• Supported on almost all architectures
• Makes it easy to teach a programming-oriented
class
• We believe OpenGL based classes are better
but there are multiple approaches
• Many (potential) instructors have little or no
experience with OpenGL
What can we do in two hours?
• Try to convince you why our approaches
•
•
•
•
should be considered
Intro to OpenGL
Look at two different courses that use
OpenGL
Identify resources
Future trends
Outline
•
•
•
•
•
OpenGL basics
Angel’s Approach
Hill’s Approach
Demo code/assignments
Question/answer/discussion
Approaches to teaching CG
•
•
•
•
Bottom Up
Survey
Top Down
Really Top Down
Kemeny’s Argument
• You don’t need to know what’s under the
hood to be literate, but unless you know
how to program, you’ll be sitting in the
back seat instead of driving.
• Bottom up = study the engine
• Survey = hire a chauffeur
• Top Down = learn to drive
What is important?
•
•
•
•
•
•
Three dimensional concepts
Light-material interactions
Transformations
Modeling
Interaction
Rendering/ Algorithms
What Is OpenGL?
• Graphics rendering API
• high-quality color images composed of geometric
and image primitives
• window system independent
• operating system independent
• close to hardware
• leads to discussions of algorithms and
implementation
Simple Demo
• This demo shows OpenGL capabilities
• Created for SIGGRAPH tutorial
• Could be written by student by end of semester
• Demonstrates
•
•
•
•
lighting
material properties
texture mapping
interaction (via GLUT)
Physical Approaches to
Rendering
• Ray tracing
•
•
•
•
Close to physics for simple models
Easy to teach
Easy to start with
Limited
• Radiosity
• Closer to rendering equation
• Not suitable for real time graphics
• Not suitable for teaching first class
Pipeline Model
• Close to hardware
• Easy to program
• Direct implementation of synthetic camera
• Image formation by computer is analogous to image
formation by camera (or human)
• Specify viewer, objects, lights
• Let hardware/software form image (via projection)
OpenGL Geometric Pipeline
State
Application
Program
ModelView
Transformation
Vertices
Projection
Rasterization
Frame
Buffer
Pixels
OpenGL Architecture
Polynomial
Evaluator
CPU
Display
List
Per Vertex
Operations &
Primitive
Assembly
Rasterization
Texture
Memory
Pixel
Operations
Per Fragment
Operations
Frame
Buffer
OpenGL as a Renderer
• Geometric primitives
• points, lines and polygons
• Image Primitives
• images and bitmaps
• separate pipeline for images and geometry
• linked through texture mapping
• Rendering depends on state
• colors, materials, light sources, etc.
OpenGL and the Windowing
System
• OpenGL is concerned only with rendering
• Window system independent
• No input functions
• OpenGL must interact with underlying OS
and windowing system
• Need minimal interface which may be system
dependent
• Done through additional libraries: AGL, GLX, WGL
GLU and GLUT
• GLU (OpenGL Utility Library)
• part of OpenGL
• NURBS, tessellators, quadric shapes, etc.
• GLUT (OpenGL Utility Toolkit)
• portable windowing API
• not officially part of OpenGL
OpenGL and Related APIs
application program
OpenGL Motif
widget or similar
GLX, AGL
or WGL
X, Win32, Mac O/S
GLUT
GLU
GL
software and/or hardware
Preliminaries
• Headers Files
• #include <GL/gl.h>
• #include <GL/glu.h>
• #include <GL/glut.h>
• Libraries
• Enumerated Types
• OpenGL defines numerous types for compatibility
– GLfloat, GLint, GLenum, etc.
GLUT Basics
• Application Structure
• Configure and open window
• Initialize OpenGL state
• Register input callback functions
• render
• resize
• input: keyboard, mouse, etc.
• Enter event processing loop
Sample Program
void main( int argc, char** argv )
{
int mode = GLUT_RGB|GLUT_DOUBLE;
glutInitDisplayMode( mode );
glutCreateWindow( argv[0] );
init();
glutDisplayFunc( display );
glutReshapeFunc( resize );
glutKeyboardFunc( key );
glutIdleFunc( idle );
glutMainLoop();
}
OpenGL Initialization
• Set up whatever state you’re going to use
void init( void )
{
glClearColor( 0.0, 0.0, 0.0, 1.0 );
glClearDepth( 1.0 );
glEnable( GL_LIGHT0 );
glEnable( GL_LIGHTING );
glEnable( GL_DEPTH_TEST );
}
GLUT Callback Functions
• Routine to call when something happens
• window resize or redraw
• user input
• animation
• “Register” callbacks with GLUT
glutDisplayFunc( display );
glutIdleFunc( idle );
glutKeyboardFunc( keyboard );
Rendering Callback
• Do all of your drawing here
glutDisplayFunc( display );
void display( void )
{
glClear( GL_COLOR_BUFFER_BIT );
glBegin( GL_TRIANGLE_STRIP );
glVertex3fv( v[0] );
glVertex3fv( v[1] );
glVertex3fv( v[2] );
glVertex3fv( v[3] );
glEnd();
glutSwapBuffers();
}
Idle Callbacks
• Use for animation and continuous update
glutIdleFunc( idle );
void idle( void )
{
t += dt;
glutPostRedisplay();
}
User Input Callbacks
• Process user input
glutKeyboardFunc( keyboard );
void keyboard( char key, int x, int y )
{
switch( key ) {
case ‘q’ : case ‘Q’ :
exit( EXIT_SUCCESS );
break;
case ‘r’ : case ‘R’ :
rotate = GL_TRUE;
break;
}
}
Elementary Rendering
• Geometric Primitives
• Managing OpenGL State
• OpenGL Buffers
OpenGL Geometric Primitives
• All geometric primitives are specified by
vertices
GL_LINES
GL_LINE_STRIP
GL_POINTS
GL_LINE_LOOP
GL_POLYGON
GL_TRIANGLES
GL_QUADS
GL_QUAD_STRIP
GL_TRIANGLE_STRIP
GL_TRIANGLE_FAN
Simple Example
void drawRhombus( GLfloat color[] )
{
glBegin( GL_QUADS );
glColor3fv( color );
glVertex2f( 0.0, 0.0 );
glVertex2f( 1.0, 0.0 );
glVertex2f( 1.5, 1.118 );
glVertex2f( 0.5, 1.118 );
glEnd();
}
OpenGL Command Formats
glVertex3fv( v )
Number of
components
2 - (x,y)
3 - (x,y,z)
4 - (x,y,z,w)
Data Type
b
ub
s
us
i
ui
f
d
-
byte
unsigned byte
short
unsigned short
int
unsigned int
float
double
Vector
omit “v” for
scalar form
glVertex2f( x, y )
Specifying Geometric Primitives
• Primitives are specified using
glBegin( primType );
glEnd();
• primType determines how vertices are combined
GLfloat red, greed, blue;
Glfloat coords[3];
glBegin( primType );
for ( i = 0; i < nVerts; ++i ) {
glColor3f( red, green, blue );
glVertex3fv( coords );
}
glEnd();
OpenGL Color
Models
Poly.
CPU
Per
Vertex
Raster
DL
Frag
Texture
Pixel
• RGBA or Color Index
color index mode
Red Green
1
2
4
8
ww
16
ww
Blue
0
1
2
3
24
25
26
Display
123
www
219
74
www
RGBA mode
FB
Shapes Tutorial
• developed by Nate Robbins
• Available on web (see references)
Controlling Rendering
Appearance
• From Wireframe to Texture Mapped
OpenGL’s State Machine
• All rendering attributes are encapsulated
in the OpenGL State
• rendering styles
• shading
• lighting
• texture mapping
Manipulating OpenGL State
• Appearance is controlled by current state
for each ( primitive to render ) {
update OpenGL state
render primitive
}
• Manipulating vertex attributes is most
common way to manipulate state
glColor*() / glIndex*()
glNormal*()
glTexCoord*()
Controlling current state
• Setting State
glPointSize( size );
glLineStipple( repeat, pattern );
glShadeModel( GL_SMOOTH );
• Enabling Features
glEnable( GL_LIGHTING );
glDisable( GL_TEXTURE_2D );
Transformations in OpenGL
• Modeling
• Viewing
• orient camera
• projection
• Animation
• Map to screen
Camera Analogy
• 3D is just like taking a photograph (lots of
photographs!)
viewing
volume
camera
tripod
model
Camera Analogy and
Transformations
• Projection transformations
• adjust the lens of the camera
• Viewing transformations
• tripod–define position and orientation of the viewing volume
in the world
• Modeling transformations
• moving the model
• Viewport transformations
• enlarge or reduce the physical photograph
Coordinate Systems and
Transformations
• Steps in Forming an Image
• specify geometry (world coordinates)
• specify camera (camera coordinates)
• project (window coordinates)
• map to viewport (screen coordinates)
• Each step uses transformations
• Every transformation is equivalent to a change
in coordinate systems (frames)
Affine Transformations
• Want transformations which preserve
geometry
• lines, polygons, quadrics
• Affine = line preserving
• Rotation, translation, scaling
• Projection
• Concatenation (composition)
Homogeneous Coordinates
• each vertex is a column vector
x 
 
 y
v
z 
 
 w
• w is usually 1.0
• all operations are matrix multiplications
• directions (directed line segments) can be represented with w = 0.0
3D Transformations
• A vertex is transformed by 4 x 4 matrices
•
•
•
•
all affine operations are matrix multiplications
all matrices are stored column-major in OpenGL
matrices are always post-multiplied

product of matrix and vector is Mv
m0 m4 m8 m12 
m m m m 
1
5
9
13 

M
m2 m6 m10 m14 


 m3 m7 m11 m15 
Specifying Transformations
• Programmer has two styles of specifying
transformations
• specify matrices (glLoadMatrix, glMultMatrix)
• specify operation (glRotate, glOrtho)
• Programmer does not have to remember
the exact matrices
• check appendix of Red Book (Programming Guide)
Programming Transformations
• Prior to rendering, view, locate, and orient:
• eye/camera position
• 3D geometry
• Manage the matrices
• including matrix stack
• Combine (composite) transformations
Transformation
Pipeline
v
e
r
t
e
x
CPU
eye
object
Per
Vertex
Poly.
Raster
DL
Frag
FB
Texture
Pixel
normalized
device
clip
window
Modelview
Matrix
Projection
Matrix
Perspective
Division
Modelview
Projection
• other calculations here
Modelview
l
l
l
•
•
•
•
•
Viewport
Transform
material  color
shade model (flat)
polygon rendering mode
polygon culling
clipping
Matrix Operations
• Specify Current Matrix Stack
glMatrixMode( GL_MODELVIEW or GL_PROJECTION )
• Other Matrix or Stack Operations
glLoadIdentity()
glPushMatrix()
glPopMatrix()
• Viewport
• usually same as window size
• viewport aspect ratio should be same as projection transformation
or resulting image may be distorted
glViewport( x, y, width, height )
Projection Transformation
• Shape of viewing frustum
• Perspective projection
gluPerspective( fovy, aspect, zNear, zFar )
glFrustum( left, right, bottom, top, zNear, zFar )
• Orthographic parallel projection
glOrtho( left, right, bottom, top, zNear, zFar )
gluOrtho2D( left, right, bottom, top )
• calls glOrtho with z values near zero
Applying Projection
Transformations
• Typical use (orthographic projection)
glMatrixMode( GL_PROJECTION );
glLoadIdentity();
glOrtho( left, right, bottom, top, zNear, zFar );
Viewing Transformations
• Position the camera/eye in the scene
• place the tripod down; aim camera
• To “fly through” a scene
• change viewing transformation and
redraw scene
•
gluLookAt( eyex, eyey, eyez,
aimx, aimy, aimz,
upx, upy, upz )
• up vector determines unique orientation
• careful of degenerate positions
tripod
Modeling Transformations
• Move object
glTranslate{fd}( x, y, z )
• Rotate object around arbitrary axis x y z 
glRotate{fd}( angle, x, y, z )
• angle is in degrees
• Dilate (stretch or shrink) or mirror object
glScale{fd}( x, y, z )
Double
Buffering
CPU
Raster
DL
Frag
FB
Texture
Pixel
1
Front
Buffer
Per
Vertex
Poly.
2
1
4
8
16
2
4
8
16
Display
Back
Buffer
Animation Using Double
Buffering

Request a double buffered color buffer
glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE );

Clear color buffer
glClear( GL_COLOR_BUFFER_BIT );
Render scene
 Request swap of front and back buffers

glutSwapBuffers();
• Repeat steps 2 - 4 for animation
Depth Buffering and
Hidden Surface Removal
1
Color
Buffer
2
1
4
8
16
2
4
8
16
Display
Depth
Buffer
Depth Buffering Using OpenGL
 Request a depth buffer
glutInitDisplayMode( GLUT_RGB |
GLUT_DOUBLE | GLUT_DEPTH );
 Enable depth buffering
glEnable( GL_DEPTH_TEST );
 Clear color and depth buffers
glClear( GL_COLOR_BUFFER_BIT |
GL_DEPTH_BUFFER_BIT );
 Render
scene
 Swap color buffers
An Updated Program Template
void main( int argc, char** argv )
{
glutInit( &argc, argv );
glutInitDisplayMode( GLUT_RGB |
GLUT_DOUBLE | GLUT_DEPTH );
glutCreateWindow( “Tetrahedron” );
init();
glutIdleFunc( idle );
glutDisplayFunc( display );
glutMainLoop();
}
An Updated Program Template
(cont.)
void init( void )
{
glClearColor( 0.0, 0.0, 1.0, 1.0 );
}
void idle( void )
{
glutPostRedisplay();
}
An Updated Program Template
(cont.)
void drawScene( void )
{
GLfloat vertices[] = { … };
GLfloat colors[] = { … };
glClear( GL_COLOR_BUFFER_BIT |
GL_DEPTH_BUFFER_BIT );
glBegin( GL_TRIANGLE_STRIP );
/* calls to glColor*() and glVertex*() */
glEnd();
glutSwapBuffers();
}
Lighting Principles
• Lighting simulates how objects reflect light
• material composition of object
• light’s color and position
• global lighting parameters
• ambient light
• two sided lighting
• available in both color index
and RGBA mode
How OpenGL Simulates Lights
• Phong lighting model
• Computed at vertices
• Lighting contributors
• Surface material properties
• Light properties
• Lighting model properties
Surface
Normals
Poly.
CPU
Per
Vertex
Raster
DL
Frag
FB
Texture
Pixel
• Normals define how a surface reflects light
glNormal3f( x, y, z )
• Current normal is used to compute vertex’s color
• Use unit normals for proper lighting
• scaling affects a normal’s length
glEnable( GL_NORMALIZE )
or
glEnable( GL_RESCALE_NORMAL )
Material Properties
• Define the surface properties of a primitive
glMaterialfv( face, property, value );
GL_DIFFUSE
Base color
GL_SPECULAR
Highlight Color
GL_AMBIENT
Low-light Color
GL_EMISSION
Glow Color
GL_SHININESS
Surface Smoothness
• separate materials for front and back
Light Properties
glLightfv( light, property, value );
• light specifies which light
• multiple lights, starting with GL_LIGHT0
glGetIntegerv( GL_MAX_LIGHTS, &n );
• properties
• colors
• position and type
• attenuation
Texture
Mapping
Poly.
CPU
Per
Vertex
Raster
DL
Frag
FB
Texture
Pixel
• Apply a 1D, 2D, or 3D image to geometric
•
primitives
Uses of Texturing
• simulating materials
• reducing geometric complexity
• image warping
• reflections
Texture Mapping
y
z
x
geometry
t
image
s
screen
Texture Mapping and the
OpenGL Pipeline
• Images and geometry flow through
separate pipelines that join at the
rasterizer
• “complex” textures do not affect geometric
complexity
vertices
geometry pipeline
rasterizer
image
pixel pipeline
Applying Textures I
• Three steps
 specify
texture
• read or generate image
• assign to texture
 assign
texture coordinates to vertices
 specify
texture parameters
• wrapping, filtering
Immediate Mode versus Display
Listed Rendering
• Immediate Mode Graphics
• Primitives are sent to pipeline and display right away
• No memory of graphical entities
• Display Listed Graphics
• Primitives placed in display lists
• Display lists kept on graphics server
• Can be redisplayed with different state
• Can be shared among OpenGL graphics contexts
Other OpenGL Features
• Curves and Surfaces
• Quadrics
• Bezier Curves and Surfaces
• Pixels and bit-maps
• Buffers
• Accumulation
• Auxiliary
• Stencil
Angel Class
•
•
•
•
www.cs.unm.edu/~angel/CS433
Class 50% undergrad, 50% grads
Mostly computer science and engineering
Emphasis
• Importance of significant term project
• Three dimensional ideas
• viewing/transformations
• Modeling
Angel Syllabus
• Week 1: Intro
• Image formation
• Synthetic Camera Model
• Rendering Paradigms
• Ray tracing
• Pipeline
• Modeling vs Rendering
Angel Syllabus (cont)
• Weeks 2-4 Programming with OpenGL
• 2D as special case of 3D
• Assign first programming project
– 2D maze (extends to 3D)
– Hilbert curves and turtle graphics
• Interaction with GLUT
• Assign second programming project
– Paint program
– Modeling project
Angel Syllabus (Cont)
• Weeks 5-6 Three Dimensional Graphics
• Transformations
• Viewing
• Assign third programming project
• Rubik’s cube
• 3D Maze walk through
• Week 7 Shading
Angel Syllabus (Cont)
• Weeks 8-9 Modeling
• Weeks 10-11 Implementation
• Weeks 12-15 Topics
• Fractals
• Particles
• Curves and Surfaces
Angel Assignment 1
• Simple OpenGL program
• Generate a Hilbert curve or a two•
•
dimensional maze
Assignment is 2D and requires a minimal
amount of interaction
Should be sufficiently difficult to test
whether students can carry out larger
programming projects
Angel Assignment 2
• Interaction: emphasis on use of callbacks
• Variants of painting programs
• Simple checkers game
• users plays both sides
• room for optional extensions
Angel Assignment 3
• Three-dimensional transformations and
•
•
viewing
Extend maze to three dimensions and do a
walk through
Simple lighting
Angel Term Project
• Takes about half the semester
• Allows students to explore an area
•
•
relevant to their own interests
Acts as capstone class (design, analysis,
software engineering, algorithms)
Problem: students pick too ambitious
projects
• need layered projects
Examples of Term Projects
• Logic design package
• Games
• Scientific Visualization
• Surface display from equations
• Marching cubes
• Modelers
• Interfaces (Maya, Renderman, AutoCad)
Hill class
• http://www.ecs.umass.edu/ece/hill/ece660.htm
• Fundamentals of graphics display devices and input
•
•
•
•
devices;
PostScript as an elementary page layout graphics
language;
Geometric transformations in PostScript;
Menu design and interaction;
Windowing and clipping;
Hill Syllabus II
•
•
•
•
•
•
•
•
OpenGL for rendering 2D and 3D scenes;
Interactive techniques;
2D and 3D transformations
Tiling patterns, fractals, and the Mandelbrot set;
Perspective and parallel projections;
Lighting and shading models for rendering scenes;
Navigating a camera through a 3D scene;
Adding textures to surfaces.
Hill Project 1: Callbacks
• At start-up a screen window is opened,
showing a large "drawing area", with four
small icons at the bottom. These icons are
miniature versions of three "polyline figures"
as described below, and one procedural
figure.
• The user interacts with the application using
both the mouse and keyboard.
Hill Project 2: Mandelbrot Set
• Write an application that draws a portion of the Mandelbrot
set in "pixel blocks" (described in class). Initially the entire
Mandelbrot set is shown as an array of colored squares (a
raster), using the default window (with opposite corners: 1.5 + j1.2 and 0.5 - j1.2). The raster consists of numAcross
columns and as many rows as will fit in the
screen window. The user then designates a
rectangle (using a rubber rectangle), and
the designated portion of the Mandelbrot set
is redrawn in the biggest viewport that fits
in the screen window.
Hill Project 3: The Wonderful
Whirler Watcher
• Fashion and exercise a program that lets a
user fly a camera through a dynamically
changing scene. The scene consists of the
three coordinate axes (each shown as a thin
cylinder of length 2 with a small cone at its
end), the axis of rotation (shown as a thin
cylinder emanating from the origin), and the
chosen object rotating about the axis of
rotation.
Hill Project 3 (cont)
• The Objects: The user can choose which
object is displayed from a fixed set, (by
picking from a menu or using GLUI radio
buttons). The set of objects consists of the
nine shapes listed on pages 659-660 (pages
583-584 if you are using the Second edition),
plus the cylinder described on page 489 (or
page 431 in the Second edition). Wireframe
or solid views of each object are selectable by
the user.
Hill Project 4: Modeling
• Model a fair approximation to one of the
world's great architectural buildings. A castle
provides a good choice, but you can instead
choose to do some other building such as the
Taj Mahal, the Parthenon, the Horyuji temple
at Nara, the Forbideen City at Beijing, San
Vitale at Ravenna, the Dome of the Rock in
Jerusalem, the Chateua of Fontainebleu, etc.
Hill Project 4 (cont)
• The user browses through and around this
scene with a camera that is controlled by
mouse clicks and keystrokes. Give your
browser the functionality similar to that of a
VRML browser (Have a look at VrmLab for an
example. Perhaps download a VRML browser
and get some practice navigating VRML
scenes.)
Hill Project 5
• Enhance the application of your previous
project so that textures are mapped onto
some of the parts of the building.
• Use at least three different textures, one of
which is created algorithmically (see note
below), and two of which are obtained by
reading BMP-format image files from
disk. You may find the RGBpixmap
class on the course FTP site
useful for this.
Obtaining OpenGL
•
•
•
•
Windows
SGI
SUN
Mesa
Language Bindings
•
•
•
•
C standard
C++ OK but OpenGL not object oriented
Fortran binding exists
Java under discussion
• Magician (www.arcana.symbolstone.org)
Higher Level APIs
•
•
•
•
VRML
Inventor
Java 3D
Java-OpenGL
On-Line Resources
• http://www.opengl.org
• news:comp.graphics.api.opengl
• http://www.sgi.com/software/opengl
• http://www.mesa3d.org/ (Mesa)
• http://www.cs.utah.edu/~narobins/opengl.html
(Tutorials)
• http://www.cs.unm.edu/~angel
• http://www.ecs.umass.edu/ece/hill
Books
• OpenGL Programming Guide, 3rd Edition
• OpenGL Reference Manual, 3rd Edition
• OpenGL Programming for the X Window
•
•
System
Interactive Computer Graphics: A topdown approach with OpenGL, 2nd Edition
Computer Graphics with OpenGL
Acknowledgements
• Dave Shreiner and Vicki Shreiner (SGI) for
•
•
•
notes from SIGGRAPH OpenGL tutorial
Nate Robins for creating the tutor demos
Brian Paul for Mesa
Mark Kilgard for GLUT