Teaching a Graphics Class with OpenGL: Two Approaches

1
Teaching a Graphics Class with OpenGL Two
Approaches

• Ed Angel
• University of New Mexico
• F.S. Hill
• University of Massachusetts

2
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

3
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

4
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

5
Outline

• OpenGL basics
• Angels Approach
• Hills Approach
• Demo code/assignments
• Question/answer/discussion

6
Approaches to teaching CG

• Bottom Up
• Survey
• Top Down
• Really Top Down

7
Kemenys Argument

• You dont need to know whats under the hood to
  be literate, but unless you know how to program,
  youll be sitting in the back seat instead of
  driving.
• Bottom up study the engine
• Survey hire a chauffeur
• Top Down learn to drive

8
What is important?

• Three dimensional concepts
• Light-material interactions
• Transformations
• Modeling
• Interaction
• Rendering/ Algorithms

9
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

10
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)

11
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

12
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)

13
OpenGL Geometric Pipeline
State
ApplicationProgram
ModelView Transformation
Frame Buffer
Rasterization
Projection
Pixels
Vertices
14
OpenGL Architecture
15
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.

16
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

17
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

18
OpenGL and Related APIs
application program
OpenGL Motif widget or similar
GLUT
GLX, AGLor WGL
GLU
GL
X, Win32, Mac O/S
software and/or hardware
19
Preliminaries

• Headers Files
• include ltGL/gl.hgt
• include ltGL/glu.hgt
• include ltGL/glut.hgt
• Libraries
• Enumerated Types
• OpenGL defines numerous types for compatibility
• GLfloat, GLint, GLenum, etc.

20
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

21
Sample Program

• void main( int argc, char argv )
• int mode GLUT_RGBGLUT_DOUBLE
• glutInitDisplayMode( mode )
• glutCreateWindow( argv0 )
• init()
• glutDisplayFunc( display )
• glutReshapeFunc( resize )
• glutKeyboardFunc( key )
• glutIdleFunc( idle )
• glutMainLoop()

22
OpenGL Initialization

• Set up whatever state youre 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 )

23
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 )

24
Rendering Callback

• Do all of your drawing here
• glutDisplayFunc( display )
• void display( void )
• glClear( GL_COLOR_BUFFER_BIT )
• glBegin( GL_TRIANGLE_STRIP )
• glVertex3fv( v0 )
• glVertex3fv( v1 )
• glVertex3fv( v2 )
• glVertex3fv( v3 )
• glEnd()
• glutSwapBuffers()

25
Idle Callbacks

• Use for animation and continuous update
• glutIdleFunc( idle )
• void idle( void )
• t dt
• glutPostRedisplay()

26
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

27
Elementary Rendering

• Geometric Primitives
• Managing OpenGL State
• OpenGL Buffers

28
OpenGL Geometric Primitives

• All geometric primitives are specified by vertices

29
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()

30
OpenGL Command Formats
glVertex3fv( v )
Number of components
Data Type
Vector
b - byte ub - unsigned byte s - short us -
unsigned short i - int ui - unsigned int f -
float d - double
omit v for scalar form glVertex2f( x, y )
2 - (x,y) 3 - (x,y,z) 4 - (x,y,z,w)
31
Specifying Geometric Primitives

• Primitives are specified using
• glBegin( primType )
• glEnd()
• primType determines how vertices are combined

GLfloat red, greed, blue Glfloat
coords3 glBegin( primType ) for ( i 0 i lt
nVerts i ) glColor3f( red, green, blue
) glVertex3fv( coords ) glEnd()
32
OpenGL ColorModels

• RGBA or Color Index

color index mode
Red
Green
Blue
0
Display
1
1
2
2
4
8
3
ww
www
16
24
123
219
74
ww
25
26
www
RGBA mode
33
Shapes Tutorial

• developed by Nate Robbins
• Available on web (see references)

34
Controlling Rendering Appearance

• From Wireframe to Texture Mapped

35
OpenGLs State Machine

• All rendering attributes are encapsulated in the
  OpenGL State
• rendering styles
• shading
• lighting
• texture mapping

36
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()

37
Controlling current state

• Setting State
• glPointSize( size )
• glLineStipple( repeat, pattern )
• glShadeModel( GL_SMOOTH )
• Enabling Features
• glEnable( GL_LIGHTING )
• glDisable( GL_TEXTURE_2D )

38
Transformations in OpenGL

• Modeling
• Viewing
• orient camera
• projection
• Animation
• Map to screen

39
Camera Analogy

• 3D is just like taking a photograph (lots of
  photographs!)

viewing volume
camera
model
tripod
40
Camera Analogy and Transformations

• Projection transformations
• adjust the lens of the camera
• Viewing transformations
• tripoddefine position and orientation of the
  viewing volume in the world
• Modeling transformations
• moving the model
• Viewport transformations
• enlarge or reduce the physical photograph

41
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)

42
Affine Transformations

• Want transformations which preserve geometry
• lines, polygons, quadrics
• Affine line preserving
• Rotation, translation, scaling
• Projection
• Concatenation (composition)

43
Homogeneous Coordinates

• each vertex is a column vector
  
• w is usually 1.0
• all operations are matrix multiplications
• directions (directed line segments) can be
  represented with w 0.0

44
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

45
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)

46
Programming Transformations

• Prior to rendering, view, locate, and orient
• eye/camera position
• 3D geometry
• Manage the matrices
• including matrix stack
• Combine (composite) transformations

47
TransformationPipeline
normalized device
eye
object
clip
window
v e r t e x
Modelview Matrix
Projection Matrix
Perspective Division
Viewport Transform
Modelview
Projection

• other calculations here
• material è color
• shade model (flat)
• polygon rendering mode
• polygon culling
• clipping

Modelview
l l l
48
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 )

49
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

50
Applying Projection Transformations

• Typical use (orthographic projection)
• glMatrixMode( GL_PROJECTION )
• glLoadIdentity()
• glOrtho( left, right, bottom, top, zNear, zFar )

51
Viewing Transformations

• Position the camera/eye in the scene
• place the tripod down aim camera
• To fly through a scene
• change viewing transformation andredraw scene
• gluLookAt( eyex, eyey, eyez, aimx,
  aimy, aimz, upx, upy, upz )
• up vector determines unique orientation
• careful of degenerate positions

52
Modeling Transformations

• Move object
• glTranslatefd( x, y, z )
• Rotate object around arbitrary axis
• glRotatefd( angle, x, y, z )
• angle is in degrees
• Dilate (stretch or shrink) or mirror object
• glScalefd( x, y, z )

53
DoubleBuffering
54
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

55
Depth Buffering andHidden Surface Removal
1
1
2
2
4
4
Color Buffer
Depth Buffer
8
8
16
16
Display
56
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

57
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()

58
An Updated Program Template (cont.)

• void init( void ) glClearColor( 0.0, 0.0,
  1.0, 1.0 )void idle( void )
  glutPostRedisplay()

59
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()

60
Lighting Principles

• Lighting simulates how objects reflect light
• material composition of object
• lights color and position
• global lighting parameters
• ambient light
• two sided lighting
• available in both color indexand RGBA mode

61
How OpenGL Simulates Lights

• Phong lighting model
• Computed at vertices
• Lighting contributors
• Surface material properties
• Light properties
• Lighting model properties

62
SurfaceNormals

• Normals define how a surface reflects light
• glNormal3f( x, y, z )
• Current normal is used to compute vertexs color
• Use unit normals for proper lighting
• scaling affects a normals length
• glEnable( GL_NORMALIZE ) orglEnable(
  GL_RESCALE_NORMAL )

63
Material Properties

• Define the surface properties of a primitive
• glMaterialfv( face, property, value )
• separate materials for front and back

64
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

65
TextureMapping

• Apply a 1D, 2D, or 3D image to geometric
  primitives
• Uses of Texturing
• simulating materials
• reducing geometric complexity
• image warping
• reflections

66
Texture Mapping
screen
geometry
image
67
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

68
Applying Textures I

• Three steps
• specify texture
• read or generate image
• assign to texture
• assign texture coordinates to vertices
• specify texture parameters
• wrapping, filtering

69
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

70
Other OpenGL Features

• Curves and Surfaces
• Quadrics
• Bezier Curves and Surfaces
• Pixels and bit-maps
• Buffers
• Accumulation
• Auxiliary
• Stencil

71
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

72
Angel Syllabus

• Week 1 Intro
• Image formation
• Synthetic Camera Model
• Rendering Paradigms
• Ray tracing
• Pipeline
• Modeling vs Rendering

73
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

74
Angel Syllabus (Cont)

• Weeks 5-6 Three Dimensional Graphics
• Transformations
• Viewing
• Assign third programming project
• Rubiks cube
• 3D Maze walk through
• Week 7 Shading

75
Angel Syllabus (Cont)

• Weeks 8-9 Modeling
• Weeks 10-11 Implementation
• Weeks 12-15 Topics
• Fractals
• Particles
• Curves and Surfaces

76
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

77
Angel Assignment 2

• Interaction emphasis on use of callbacks
• Variants of painting programs
• Simple checkers game
• users plays both sides
• room for optional extensions

78
Angel Assignment 3

• Three-dimensional transformations and viewing
• Extend maze to three dimensions and do a walk
  through
• Simple lighting

79
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

80
Examples of Term Projects

• Logic design package
• Games
• Scientific Visualization
• Surface display from equations
• Marching cubes
• Modelers
• Interfaces (Maya, Renderman, AutoCad)

81
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

82
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.

83
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.

84
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.

85
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.

86
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.

87
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.

88
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.)

89
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.

90
Obtaining OpenGL

• Windows
• SGI
• SUN
• Mesa

91
Language Bindings

• C standard
• C OK but OpenGL not object oriented
• Fortran binding exists
• Java under discussion
• Magician (www.arcana.symbolstone.org)

92
Higher Level APIs

• VRML
• Inventor
• Java 3D
• Java-OpenGL

93
On-Line Resources

• http//www.opengl.org
• newscomp.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

94
Books

• OpenGL Programming Guide, 3rd Edition
• OpenGL Reference Manual, 3rd Edition
• OpenGL Programming for the X Window System
• Interactive Computer Graphics A top-down
  approach with OpenGL, 2nd Edition
• Computer Graphics with OpenGL

95
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