An Interactive Introduction

to OpenGL Programming

Dave Shreiner
Ed Angel
Vicki Shreiner
What You’ll See Today

General OpenGL Introduction

Rendering Primitives
Rendering Modes
Lighting
Texture Mapping
Additional Rendering Attributes
Imaging
2
Goals for Today

Demonstrate enough OpenGL to write

an interactive graphics program
with
• custom modeled 3D objects or imagery
• lighting
• texture mapping
Introduce advanced topics for future
investigation
3
OpenGL and GLUT Overview

Dave Shreiner
OpenGL and GLUT
Overview
What is OpenGL & what can it do for
me?
OpenGL in windowing systems
Why GLUT
A GLUT program template

5
What Is OpenGL?

Graphics rendering API

• high-quality color images composed of
geometric and image primitives
• window system independent
• operating system independent

6
OpenGL Architecture

Per Vertex
Polynomial Operations &
Evaluator Primitive
Assembly

Display Per Fragment Frame

CPU List
Rasterization
Operations Buffer

Texture
Memory
Pixel
Operations

7
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.
8
Related APIs

AGL, GLX, WGL

• glue between OpenGL and windowing systems
GLU (OpenGL Utility Library)
• part of OpenGL
• NURBS, tessellators, quadric shapes, etc.
GLUT (OpenGL Utility Toolkit)
• portable windowing API
• not officially part of OpenGL

9
OpenGL and Related APIs

application program

OpenGL Motif
widget or similar GLUT
GLX, AGL
or WGL GLU

X, Win32, Mac O/S GL

software and/or hardware

10
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.
11
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

12
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();
}
13
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 );
}

14
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 );
15
Rendering Callback

Do
Do all
all of
of your
your drawing
drawing here
here
glutDisplayFunc(
glutDisplayFunc( display
display );
);
void
void display(
display( void
void ))
{{
glClear(
glClear( GL_COLOR_BUFFER_BIT
GL_COLOR_BUFFER_BIT );
);
glBegin(
glBegin( GL_TRIANGLE_STRIP
GL_TRIANGLE_STRIP );
);
glVertex3fv(
glVertex3fv( v[0]
v[0] );
);
glVertex3fv(
glVertex3fv( v[1]
v[1] );
);
glVertex3fv(
glVertex3fv( v[2]
v[2] );
);
glVertex3fv(
glVertex3fv( v[3]
v[3] );
);
glEnd();
glEnd();
glutSwapBuffers();
glutSwapBuffers();
}}

16
Idle Callbacks

Use for animation and continuous

update
glutIdleFunc( idle );
void idle( void )
{
t += dt;
glutPostRedisplay();
}

17
User Input Callbacks

Process
Process user
user input
input
glutKeyboardFunc(
glutKeyboardFunc( keyboard
keyboard );
);
void
void keyboard(
keyboard( unsigned
unsigned char
char key,
key, int
int x,
x, int
int yy ))
{{
switch(
switch( key
key )) {{
case
case ‘q’
‘q’ :: case
case ‘Q’
‘Q’ ::
exit(
exit( EXIT_SUCCESS
EXIT_SUCCESS ););
break;
break;
case
case ‘r’
‘r’ :: case
case ‘R’
‘R’ ::
rotate
rotate == GL_TRUE;
GL_TRUE;
glutPostRedisplay();
glutPostRedisplay();
break;
break;
}}
}}

18
Elementary Rendering

Vicki Shreiner
Elementary Rendering

Geometric
Geometric Primitives
Primitives
Managing
Managing OpenGL
OpenGL State
State
OpenGL
OpenGL Buffers
Buffers

20
OpenGL Geometric
Primitives
All
All geometric
geometric primitives
primitives are
are specified
specified
by
by vertices
vertices
GL_LINES
GL_POINTS GL_POLYGON
GL_LINE_STRIP GL_LINE_LOOP

GL_TRIANGLES
GL_TRIANGLE_STRIP GL_QUADS GL_QUAD_STRIP
GL_TRIANGLE_FAN

21
Simple Example

void
void drawRhombus(
drawRhombus( GLfloat
GLfloat color[]
color[] ))
{{
glBegin(
glBegin( GL_QUADS
GL_QUADS );
);
glColor3fv(
glColor3fv( color
color );
);
glVertex2f(
glVertex2f( 0.0,
0.0, 0.0
0.0 );
);
glVertex2f(
glVertex2f( 1.0,
1.0, 0.0
0.0 );
);
glVertex2f(
glVertex2f( 1.5,
1.5, 1.118
1.118 );
);
glVertex2f(
glVertex2f( 0.5,
0.5, 1.118
1.118 );
);
glEnd();
glEnd();
}}
22
OpenGL Command Formats

glVertex3fv( v )

Number of Data Type Vector

components b - byte omit “v” for
ub - unsigned byte
2 - (x,y) scalar form
s - short
3 - (x,y,z)
us - unsigned short
4 - (x,y,z,w) glVertex2f( x, y )
i - int
ui - unsigned int
f - float
d - double

23
Specifying Geometric
Primitives
Primitives are specified using
glBegin( primType );
glEnd();
• primType determines how vertices are
combined
GLfloat red, green, blue;
Glfloat coords[3];
glBegin( primType );
for ( i = 0; i < nVerts; ++i ) {
glColor3f( red, green, blue );
glVertex3fv( coords );
}
glEnd();
24
OpenGL Color Poly.
Poly.
Per
Per
Vertex
Vertex
Frag FB
CPU DL Raster

Models
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

RGBA
RGBA or
or Color
Color Index
Index
color index mode
Red Green Blue
0
1 1 Display
2
4 2
8 3


16
 24 123 219 74
25
26


RGBA mode
25
Shapes Tutorial

26
Controlling Rendering
Appearance
From
From
Wireframe
Wireframe
to
to Texture
Texture
Mapped
Mapped

27
OpenGL’s State Machine

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

28
Manipulating OpenGL
State
Appearance
Appearance is
is controlled
controlled by
by current
current
state
state
for
for each
each (( primitive
primitive to
to render
render )) {
{
update
update OpenGL
OpenGL state
state
render
render primitive
primitive
}
}
Manipulating
Manipulating vertex
vertex attributes
attributes is
is most
most
common
common wayway to
to manipulate
manipulate state
state
glColor*()
glColor*() // glIndex*()
glIndex*()
glNormal*()
glNormal*()
glTexCoord*()
glTexCoord*()

29
Controlling current state

Setting
Setting State
State
glPointSize(
glPointSize( size
size );
);
glLineStipple(
glLineStipple( repeat
repeat,, pattern
pattern );
);
glShadeModel(
glShadeModel( GL
GL__SMOOTH
SMOOTH );
);
Enabling
Enabling Features
Features
glEnable(
glEnable( GL
GL__LIGHTING
LIGHTING );
);
glDisable(
glDisable( GL_TEXTURE_2D
GL_TEXTURE_2D );
);

30
Transformations

Ed Angel
Transformations in
OpenGL
Modeling
Viewing
• orient camera
• projection
Animation
Map to screen

32
Camera Analogy

3D is just like taking a photograph

(lots of photographs!)
viewing
volume

camera

tripod model

33
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

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

35
Affine Transformations

Want transformations which

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

36
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

37
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 vectorMisv
 m0 m4 m8 m12 
m m m m 
M  1 5 9 13 

 m2 m6 m10 m14 
 
m
 3 m 7 m 11 m 15 
38
Specifying
Transformations
Programmer has two styles of
specifying transformations
• specify matrices (glLoadMatrix,
glMultMatrix)
• specify operation (glRotate, glOrtho)
glOrtho
Programmer does not have to
remember the exact matrices
• check appendix of Red Book (Programming
Guide)

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

40
Transformation Poly.
Poly.
Per
Per
Vertex
Vertex
Frag FB
CPU DL Raster

Pipeline
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

object ey clip normalized window

e device
v
e
r Modelview Projection Perspective Viewport
t
e Matrix Matrix Division Transform
x

Modelview Projection other calculations here

• material  color
Modelview • shade model (flat)
 • polygon rendering mode

 • polygon culling
• clipping
41
Matrix Operations

Specify
Specify Current
Current Matrix
Matrix Stack
Stack
glMatrixMode(
glMatrixMode( GL_MODELVIEW
GL_MODELVIEW or
or GL_PROJECTION
GL_PROJECTION ))
Other
Other Matrix
Matrix or
or Stack
Stack Operations
Operations
glLoadIdentity()
glLoadIdentity() glPushMatrix()
glPushMatrix()
glPopMatrix()
glPopMatrix()
Viewport
Viewport
•• usually
usually same
same as
as window
window size
size
•• viewport
viewport aspect
aspect ratio
ratio should
should be
be same
same as
as projection
projection
transformation
transformation or
or resulting
resulting image
image may
may be
be distorted
distorted
glViewport(
glViewport( x,
x, y,
y, width,
width, height
height ))

42
Projection Transformation

Shape
Shape of
of viewing
viewing frustum
frustum
Perspective
Perspective projection
projection
gluPerspective(
gluPerspective( fovy,
fovy, aspect,
aspect, zNear,
zNear, zFar
zFar ))
glFrustum(( left,
glFrustum left, right,
right, bottom,
bottom, top,
top, zNear, zFar )
zNear, zFar )
Orthographic
Orthographic parallel
parallel projection
projection
glOrtho(
glOrtho( left,
left, right,
right, bottom,
bottom, top,
top, zNear,
zNear, zFar
zFar ))
gluOrtho2D(
gluOrtho2D( left,
left, right,
right, bottom,
bottom, top
top ))
••calls glOrtho with
calls glOrtho with zz values
values near
near zero
zero

43
Applying Projection
Transformations
Typical
Typical use
use (orthographic
(orthographic projection)
projection)
glMatrixMode(
glMatrixMode( GL_PROJECTION
GL_PROJECTION );
);
glLoadIdentity();
glLoadIdentity();
glOrtho(
glOrtho( left,
left, right,
right, bottom,
bottom, top,
top, zNear,
zNear, zFar
zFar );
);

44
Viewing Transformations

Position the camera/eye in the scene

• place the tripod down; aim camera
tripod
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

45
Projection Tutorial

46
Modeling Transformations

Move object
glTranslate{fd}( x, y, z )
x y z 
Rotate object around arbitrary axis
glRotate{fd}( angle, x, y, z )
• angle is in degrees
Dilate (stretch or shrink) or mirror
object
glScale{fd}( x, y, z )

47
Transformation Tutorial

48
Connection: Viewing and
Modeling
Moving camera is equivalent to
moving every object in the world
towards a stationary camera
Viewing transformations are
equivalent to several modeling
transformations
gluLookAt() has its own command
can make your own polar view or pilot view
49
Projection is left handed

Projection transformations
(gluPerspective, glOrtho) are left
handed
• think of zNear and zFar as distance from
view point
Everything else is right handed, y
y
including the z+
vertexes to be
left handed right handed
rendered x
x
z+
50
Common Transformation
Usage
3
3 examples
examples of resize() routine
of resize() routine
• restate
restate projection
projection &
& viewing
viewing transformations
transformations
Usually
Usually called
called when
when window
window resized
resized
Registered
Registered as
as callback
callback for
for
glutReshapeFunc
glutReshapeFunc()
()

51
resize(): Perspective &
LookAt
void
void resize(
resize( int
int w,
w, int
int hh ))
{{
glViewport(
glViewport( 0,
0, 0,
0, (GLsizei)
(GLsizei) w, w, (GLsizei)
(GLsizei) hh );
);
glMatrixMode(
glMatrixMode( GL_PROJECTION
GL_PROJECTION ); );
glLoadIdentity();
glLoadIdentity();
gluPerspective(
gluPerspective( 65.0,
65.0, (GLdouble)
(GLdouble) ww // h,
h,
1.0,
1.0, 100.0
100.0 ););
glMatrixMode(
glMatrixMode( GL_MODELVIEW
GL_MODELVIEW ); );
glLoadIdentity();
glLoadIdentity();
gluLookAt(
gluLookAt( 0.0,
0.0, 0.0,
0.0, 5.0,
5.0,
0.0,
0.0, 0.0,
0.0, 0.0,
0.0,
0.0,
0.0, 1.0,
1.0, 0.0
0.0 );
);
}}

52
resize(): Perspective &
Translate
Same
Same effect
effect as
as previous
previous LookAt
LookAt
void
void resize(
resize( int
int w,
w, int
int hh ))
{{
glViewport(
glViewport( 0,
0, 0,
0, (GLsizei)
(GLsizei) w, w, (GLsizei)
(GLsizei) hh );
);
glMatrixMode(
glMatrixMode( GL_PROJECTION
GL_PROJECTION ); );
glLoadIdentity();
glLoadIdentity();
gluPerspective(
gluPerspective( 65.0,
65.0, (GLdouble)
(GLdouble) w/h,
w/h,
1.0,
1.0, 100.0
100.0 ););
glMatrixMode(
glMatrixMode( GL_MODELVIEW
GL_MODELVIEW ); );
glLoadIdentity();
glLoadIdentity();
glTranslatef(
glTranslatef( 0.0,
0.0, 0.0,
0.0, -5.0
-5.0 );
);
}}

53
resize(): Ortho (part 1)
void
void resize(
resize( int
int width,
width, int
int height
height ))
{{
GLdouble
GLdouble aspect
aspect == (GLdouble)
(GLdouble) width
width // height;
height;
GLdouble
GLdouble left
left == -2.5,
-2.5, right
right == 2.5;
2.5;
GLdouble
GLdouble bottom
bottom == -2.5,
-2.5, top
top == 2.5;
2.5;
glViewport(
glViewport( 0,
0, 0,
0, (GLsizei)
(GLsizei) w,w, (GLsizei)
(GLsizei) hh );
);
glMatrixMode(
glMatrixMode( GL_PROJECTION
GL_PROJECTION ););
glLoadIdentity();
glLoadIdentity();
…
… continued
continued …
…

54
resize(): Ortho (part 2)

if ( aspect < 1.0 ) {

left /= aspect;
right /= aspect;
} else {
bottom *= aspect;
top *= aspect;
}
glOrtho( left, right, bottom, top, near, far );
glMatrixMode( GL_MODELVIEW );
glLoadIdentity();
}

55
Compositing Modeling
Transformations
Problem 1: hierarchical objects
• one position depends upon a previous position
• robot arm or hand; sub-assemblies
Solution 1: moving local coordinate
system
• modeling transformations move coordinate system
• post-multiply column-major matrices
• OpenGL post-multiplies matrices

56
Compositing Modeling
Transformations
Problem 2: objects move relative to
absolute world origin
• my object rotates around the wrong origin
• make it spin around its center or something else
Solution 2: fixed coordinate system
• modeling transformations move objects around fixed
coordinate system
• pre-multiply column-major matrices
• OpenGL post-multiplies matrices
• must reverse order of operations to achieve desired
effect
57
Additional Clipping Planes

At least 6 more clipping planes

available
Good for cross-sections
Modelview
Ax  By  Cz matrix
D0 moves clipping
plane
clipped
glEnable( GL_CLIP_PLANEi )
glClipPlane( GL_CLIP_PLANEi, GLdouble* coeff )

58
Reversing Coordinate
Projection
Screen space back to world space
glGetIntegerv( GL_VIEWPORT, GLint viewport[4] )
glGetDoublev( GL_MODELVIEW_MATRIX, GLdouble mvmatrix[16] )
glGetDoublev( GL_PROJECTION_MATRIX,
GLdouble projmatrix[16] )
gluUnProject( GLdouble winx, winy, winz,
mvmatrix[16], projmatrix[16],
GLint viewport[4],
GLdouble *objx, *objy, *objz )

gluProject goes from world to screen

space
59
Animation and Depth
Buffering

Vicki Shreiner
Animation and Depth
Buffering
Discuss double buffering and
animation
Discuss hidden surface removal
using the depth buffer

61
Double Poly.
Poly.
Per
Per
Vertex
Vertex
Frag FB
CPU DL Raster

Buffering
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

1 1
2 2
4 4
Front 8 8 Back
16 16
Buffer Buffer

Display

62
Animation Using Double
Buffering
Request
Request a
a double
double buffered
buffered color
color buffer
buffer
glutInitDisplayMode(
glutInitDisplayMode( GLUT_RGB
GLUT_RGB || GLUT_DOUBLE
GLUT_DOUBLE );
);
Clear
Clear color
color buffer
buffer
glClear(
glClear( GL_COLOR_BUFFER_BIT
GL_COLOR_BUFFER_BIT );
);
Render
Render scene
scene
Request
Request swap
swap of
of front
front and
and back
back buffers
buffers
glutSwapBuffers();
glutSwapBuffers();
Repeat
Repeat steps
steps 2
2 -- 4
4 for
for animation
animation

63
Depth Buffering and
Hidden Surface Removal

1 1
2 2
4 4
Color 8 8 Depth
16 16
Buffer Buffer

Display

64
Depth Buffering Using
OpenGL
Request
Request a
a depth
depth buffer
buffer
glutInitDisplayMode(
glutInitDisplayMode( GLUT_RGB
GLUT_RGB ||
GLUT_DOUBLE
GLUT_DOUBLE || GLUT_DEPTH
GLUT_DEPTH );
);
Enable
Enable depth
depth buffering
buffering
glEnable(
glEnable( GL_DEPTH_TEST
GL_DEPTH_TEST );
);
Clear
Clear color
color and
and depth
depth buffers
buffers
glClear(
glClear( GL_COLOR_BUFFER_BIT
GL_COLOR_BUFFER_BIT ||
GL_DEPTH_BUFFER_BIT
GL_DEPTH_BUFFER_BIT );
);
Render
Render scene
scene
Swap
Swap color
color buffers
buffers
65
An Updated Program
Template
void
void main(
main( int
int argc,
argc, char**
char** argv
argv ))
{{
glutInit(
glutInit( &argc,
&argc, argv
argv );
);
glutInitDisplayMode(
glutInitDisplayMode( GLUT_RGB
GLUT_RGB ||
GLUT_DOUBLE
GLUT_DOUBLE || GLUT_DEPTH
GLUT_DEPTH ););
glutCreateWindow(
glutCreateWindow( “Tetrahedron”
“Tetrahedron” ););
init();
init();
glutIdleFunc(
glutIdleFunc( idle
idle );
);
glutDisplayFunc(
glutDisplayFunc( display
display );
);
glutMainLoop();
glutMainLoop();
}}

66
An Updated Program
Template (cont.)

void
void init(
init( void
void ))
{{
glClearColor(
glClearColor( 0.0,
0.0, 0.0,
0.0, 1.0,
1.0, 1.0
1.0 );
);
}}

void
void idle(
idle( void
void ))
{{
glutPostRedisplay();
glutPostRedisplay();
}}

67
An Updated Program
Template (cont.)
void
void drawScene(
drawScene( void
void ))
{{
GLfloat
GLfloat vertices[]
vertices[] == {{ …… };
};
GLfloat
GLfloat colors[]
colors[] == {{ …… };
};
glClear(
glClear( GL_COLOR_BUFFER_BIT
GL_COLOR_BUFFER_BIT ||
GL_DEPTH_BUFFER_BIT
GL_DEPTH_BUFFER_BIT ); );
glBegin(
glBegin( GL_TRIANGLE_STRIP
GL_TRIANGLE_STRIP ); );
/*
/* calls
calls to
to glColor*()
glColor*() andand glVertex*()
glVertex*() */
*/
glEnd();
glEnd();
glutSwapBuffers();
glutSwapBuffers();
}}

68
 Lighting

Vicki Shreiner
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
70
How OpenGL Simulates
Lights
Phong lighting model
• Computed at vertices
Lighting contributors
• Surface material properties
• Light properties
• Lighting model properties

71
Surface Poly.
Poly.
Per
Per
Vertex
Vertex
Frag FB
CPU DL Raster

Normals
CPU DL Raster Frag FB
Texture
Texture
Pixel
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 )

72
Material Properties

Define the surface properties of a

primitive
glMaterialfv( face, Base
GL_DIFFUSE property,
color value );
GL_SPECULAR Highlight Color

GL_AMBIENT Low-light Color

GL_EMISSION Glow Color

GL_SHININESS Surface Smoothness

• separate materials for front and back

73
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

74
Light Sources (cont.)

Light
Light color
color properties
properties
• GL_AMBIENT
GL_AMBIENT
• GL_DIFFUSE
GL_DIFFUSE
• GL_SPECULAR
GL_SPECULAR

75
Types of Lights

OpenGL supports two types of Lights

• Local (Point) light sources
• Infinite (Directional) light sources
Type of light controlled by w
w 0 Infinite Light directed along x y z 
coordinate
w 0 Local Light positioned at x w y
w
z
w 

76
Turning on the Lights

Flip each light’s switch

glEnable( GL_LIGHTn );
Turn on the power
glEnable( GL_LIGHTING );

77
Light Material Tutorial

78
Controlling a Light’s
Position
Modelview matrix affects a light’s
position
• Different effects based on when position is
specified
• eye coordinates
• world coordinates
• model coordinates
• Push and pop matrices to uniquely control a
light’s position
79
Light Position Tutorial

80
Advanced Lighting
Features
Spotlights
• localize lighting affects
•GL_SPOT_DIRECTION
•GL_SPOT_CUTOFF
•GL_SPOT_EXPONENT

81
Advanced Lighting
Features
Light attenuation
• decrease light intensity with distance
•GL_CONSTANT_ATTENUATION
•GL_LINEAR_ATTENUATION
•GL_QUADRATIC_ATTENUATION

1
fi 
k c  kl d  k q d 2

82
Light Model Properties

glLightModelfv( property, value );

Enabling two sided lighting
GL_LIGHT_MODEL_TWO_SIDE
Global ambient color
GL_LIGHT_MODEL_AMBIENT
Local viewer mode
GL_LIGHT_MODEL_LOCAL_VIEWER
Separate specular color
GL_LIGHT_MODEL_COLOR_CONTROL

83
Tips for Better Lighting

Recall lighting computed only at

vertices
• model tessellation heavily affects lighting
results
• better results but more geometry to process
Use a single infinite light for fastest
lighting
• minimal computation per vertex
84
Imaging and Raster
Primitives

Dave Shreiner
Imaging and Raster
Primitives
Describe OpenGL’s raster primitives:
bitmaps and image rectangles
Demonstrate how to get OpenGL to
read and render pixel rectangles

86
Pixel-based primitives

Bitmaps
• 2D array of bit masks for pixels
• update pixel color based on current color
Images
• 2D array of pixel color information
• complete color information for each pixel
OpenGL doesn’t understand image
formats
87
 Per
Poly. Per
Poly. Vertex

Pixel Pipeline
Vertex
CPU DL Raster Frag FB
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

Programmable pixel storage

and transfer operations
glBitmap(), glDrawPixels()
Pixel Pixel-Transfer Rasterization Per Fragment Frame
CPU Storage Operations (including Operations Buffer
Modes (and Pixel Map) Pixel Zoom)

Texture glCopyTex*Image();
Memory

glReadPixels(), glCopyPixels()
Positioning Image
Primitives
glRasterPos3f( x, y, z )
• raster position transformed like geometry
• discarded if raster position
is outside of viewport
• may need to fine tune
viewport for desired
results

Raster Position

89
Rendering Bitmaps

glBitmap( width, height, xorig, yorig, xmove,

ymove, bitmap )
• render bitmap in current color
at  x  xorig   y  yorig  

height
• advance raster position by
xmove ymove after yorig

rendering width
xorig

xmove

90
Rendering Fonts using
Bitmaps
OpenGL uses bitmaps for font
rendering
• each character is stored in a display list
containing a bitmap
• window system specific routines to access
system fonts
•glXUseXFont()
•wglUseFontBitmaps()

91
Rendering Images

glDrawPixels( width, height, format, type,

pixels )
• render pixels with lower left of
image at current raster position
• numerous formats and data types
for specifying storage in memory
• best performance by using format and type
that matches hardware

92
Reading Pixels

glReadPixels( x, y, width, height, format,

type, pixels )
• read pixels from specified (x,y) position in
framebuffer
• pixels automatically converted from
framebuffer format into requested format and
type
Framebuffer pixel copy
glCopyPixels( x, y, width, height, type )
93
Pixel Zoom

glPixelZoom(
glPixelZoom( x,
x, yy ))
• expand,
expand, shrink
shrink or
or reflect
reflect pixels
pixels
around
around current
current raster
raster position
position
• fractional
fractional zoom
zoom supported
supported
Raster glPixelZoom(1.0, -1.0);
Position

94
Storage and Transfer
Modes
Storage modes control accessing
memory
• byte alignment in host memory
• extracting a subimage
Transfer modes allow modify pixel
values
• scale and bias pixel component values
• replace colors using pixel maps
95
Texture Mapping

Ed Angel
Texture Poly.
Poly.
Per
Per
Vertex
Vertex
Frag FB
CPU DL Raster

Mapping
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

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

z x
geometry screen

t
image

s 98
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

99
Texture Example

The texture (below) is a

256 x 256 image that has been
mapped to a rectangular
polygon which is viewed in
perspective

100
Applying Textures I

Three steps
specify texture
• read or generate image
• assign to texture
• enable texturing
assign texture coordinates to vertices
specify texture parameters
• wrapping, filtering
101
Applying Textures II

•• specify
specify textures
textures inin texture
texture objects
objects
•• set
set texture
texture filter
filter
•• set
set texture
texture function
function
•• set
set texture
texture wrap
wrap mode
mode
•• set
set optional
optional perspective
perspective correction
correction hint
hint
•• bind
bind texture
texture object
object
•• enable
enable texturing
texturing
•• supply
supply texture
texture coordinates
coordinates for
for vertex
vertex
•• coordinates
coordinates can
can also
also be
be generated
generated

102
Texture Objects

Like display lists for texture images

• one image per texture object
• may be shared by several graphics contexts
Generate texture names
glGenTextures( n, *texIds );

103
Texture Objects (cont.)

Create texture objects with texture data

and state
glBindTexture( target, id );
Bind textures before using
glBindTexture( target, id );

104
Specify Texture Poly.
Poly.
Per
Per
Vertex
Vertex
Frag FB
CPU DL Raster

Image
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

Define a texture image from an array

of
texels in CPU memory
glTexImage2D( target, level, components,
w, h, border, format, type, *texels );
• dimensions of image must be powers of 2
Texel colors are processed by pixel
pipeline
• pixel scales, biases and lookups can be
done 105
Converting A Texture
Image
If dimensions of image are not power
of 2
gluScaleImage( format, w_in, h_in,
type_in, *data_in, w_out, h_out,
type_out, *data_out );
• *_in is for source image
• *_out is for destination image
Image interpolated and filtered during
scaling
106
Specifying a Texture:
Other Methods
Use frame buffer as source of texture image
• uses current buffer as source image
glCopyTexImage1D(...)
glCopyTexImage2D(...)
Modify part of a defined texture
glTexSubImage1D(...)
glTexSubImage2D(...)
glTexSubImage3D(...)
Do both with glCopyTexSubImage2D(...), etc.

107
Mapping a Poly.
Poly.
Per
Per
Vertex
Vertex
Frag FB
CPU DL Raster

Texture
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

Based on parametric texture coordinates

glTexCoord*() specified at each vertex
Texture Space Object Space
t 1, 1 (s, t) = (0.2, 0.8)
0, 1 A
a

c (0.4, 0.2)
b
B C
0, 0 1, 0 s (0.8, 0.4)
108
Generating Texture
Coordinates
Automatically generate texture coords
glTexGen{ifd}[v]()
specify a plane
• generate texture coordinates based upon distance
Ax  By  Cz
from plane  D 0
generation modes
• GL_OBJECT_LINEAR
• GL_EYE_LINEAR
• GL_SPHERE_MAP

109
Tutorial: Texture

110
Texture Application
Methods
Filter Modes
• minification or magnification
• special mipmap minification filters
Wrap Modes
• clamping or repeating
Texture Functions
• how to mix primitive’s color with texture’s color
• blend, modulate or replace texels

111
Filter Modes

Example:
glTexParameteri( target, type, mode );

Texture Polygon Texture Polygon

Magnification Minification

112
Mipmapped Textures

Mipmap allows for prefiltered texture maps of

decreasing resolutions
Lessens interpolation errors for smaller
textured objects
Declare mipmap level during texture definition
glTexImage*D( GL_TEXTURE_*D, level, … )

GLU mipmap builder routines

gluBuild*DMipmaps( … )
OpenGL 1.2 introduces advanced LOD controls

113
Wrapping Mode

Example:
glTexParameteri( GL_TEXTURE_2D,
GL_TEXTURE_WRAP_S, GL_CLAMP )
glTexParameteri( GL_TEXTURE_2D,
GL_TEXTURE_WRAP_T, GL_REPEAT )

s
GL_REPEAT GL_CLAMP
texture wrapping wrapping
114
Texture Functions

Controls how texture is applied

glTexEnv{fi}[v]( GL_TEXTURE_ENV, prop, param )
GL_TEXTURE_ENV_MODE modes
• GL_MODULATE
• GL_BLEND
• GL_REPLACE
Set blend color with
GL_TEXTURE_ENV_COLOR
115
Perspective Correction
Hint
Texture coordinate and color interpolation
• either linearly in screen space
• or using depth/perspective values (slower)
Noticeable for polygons “on edge”
glHint( GL_PERSPECTIVE_CORRECTION_HINT, hint )
where hint is one of
• GL_DONT_CARE
• GL_NICEST
• GL_FASTEST

116
Is There Room for a
Texture?
Query largest dimension of texture image
• typically largest square texture
• doesn’t consider internal format size
glGetIntegerv( GL_MAX_TEXTURE_SIZE, &size )
Texture proxy
• will memory accommodate requested texture size?
• no image specified; placeholder
• if texture won’t fit, texture state variables set to 0
• doesn’t know about other textures
• only considers whether this one texture will fit all of memory

117
Texture Residency

Working set of textures

• high-performance, usually hardware accelerated
• textures must be in texture objects
• a texture in the working set is resident
• for residency of current texture, check
GL_TEXTURE_RESIDENT state
If too many textures, not all are resident
• can set priority to have some kicked out first
• establish 0.0 to 1.0 priorities for texture objects

118
Advanced OpenGL Topics

Dave Shreiner
Advanced OpenGL Topics

Display Lists and Vertex Arrays

Alpha Blending and Antialiasing
Using the Accumulation Buffer
Fog
Feedback & Selection
Fragment Tests and Operations
Using the Stencil Buffer
120
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

121
Immediate Mode versus
Display Lists
Immediate Mode

Per Vertex
Polynomial Operations &
Evaluator Primitive
Assembly

Display Per Fragment Frame

CPU List
Rasterization
Operations Buffer

Display Listed

Texture
Memory
Pixel
Operations
122
 Per
Poly. Per
Poly. Vertex

Display Lists
Vertex
CPU DL Raster Frag FB
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

Creating a display list

GLuint id;
void init( void )
{
id = glGenLists( 1 );
glNewList( id, GL_COMPILE );
/* other OpenGL routines */
glEndList();
}
Call a created list
void display( void )
{
glCallList( id );
}
123
Display Lists

Not all OpenGL routines can be stored in

display lists
State changes persist, even after a display
list is finished
Display lists can call other display lists
Display lists are not editable, but you can
fake it
• make a list (A) which calls other lists (B, C, and D)
• delete and replace B, C, and D, as needed
124
Display Lists and Hierarchy

Consider model of a car

• Create display list for chassis
• Create display list for wheel
glNewList( CAR, GL_COMPILE );
glCallList( CHASSIS );
glTranslatef( … );
glCallList( WHEEL );
glTranslatef( … );
glCallList( WHEEL );
…
glEndList();

125
Advanced Primitives

Vertex
Vertex Arrays
Arrays
Bernstein
Bernstein Polynomial
Polynomial Evaluators
Evaluators
• basis
basis for
for GLU
GLU NURBS
NURBS
••NURBS
NURBS (Non-Uniform
(Non-Uniform Rational
Rational B-Splines)
B-Splines)
GLU
GLU Quadric
Quadric Objects
Objects
• sphere
sphere
• cylinder
cylinder (or
(or cone)
cone)
• disk
disk (circle)
(circle)
126
Vertex Poly.
Poly.
Per
Per
Vertex
Vertex
Frag FB
CPU DL Raster

Arrays
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

Pass
Pass arrays
arrays of
of vertices,
vertices, colors,
colors, etc.
etc. toto
Color Vertex
OpenGL
OpenGL inin a
a large
large chunk
chunk data data
glVertexPointer(
glVertexPointer( 3,
3, GL_FLOAT,
GL_FLOAT, 0, coords ))
0, coords
glColorPointer
glColorPointer(( 4,
4, GL_FLOAT,
GL_FLOAT, 0, colors ))
0, colors
glEnableClientState
glEnableClientState(( GL_VERTEX_ARRAY
GL_VERTEX_ARRAY ))
glEnableClientState
glEnableClientState(( GL_COLOR_ARRAY
GL_COLOR_ARRAY ))
glDrawArrays(
glDrawArrays( GL_TRIANGLE_STRIP,
GL_TRIANGLE_STRIP, 0, numVerts );
0, numVerts );

All
All active
active arrays
arrays are
are used
used in
in rendering
rendering

127
Why use Display Lists or
Vertex Arrays?
May provide better performance than
immediate mode rendering
Display lists can be shared between
multiple OpenGL context
• reduce memory usage for multi-context
applications
Vertex arrays may format data for
better memory access

128
Alpha: the 4th Color
Component
Measure of Opacity
• simulate translucent objects
• glass, water, etc.
• composite images
• antialiasing
• ignored if blending is not enabled
glEnable( GL_BLEND )

129
 Per
Poly. Per
Poly. Vertex

Blending
Vertex
CPU DL Raster Frag FB
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

Combine pixels with what’s in

already
in the framebuffer
  
glBlendFunc( src,
Cr src C f  dst Cdst )
p
Blending
Blending
Equation
Equation Blended
Fragment Pixel
(src)
Framebuffer
Pixel
(dst)

130
Multi-pass Rendering

Blending allows results from multiple

drawing passes to be combined
together
• enables more complex rendering algorithms
Example of bump-mapping
done with a multi-pass
OpenGL algorithm

131
Antialiasing

Removing the Jaggies

glEnable( mode )
•GL_POINT_SMOOTH
•GL_LINE_SMOOTH
•GL_POLYGON_SMOOTH
• alpha value computed by computing
sub-pixel coverage
• available in both RGBA and colormap modes
132
Accumulation Buffer

Problems of compositing into color

buffers
• limited color resolution
• clamping
• loss of accuracy
• Accumulation buffer acts as a “floating point”
color buffer
• accumulate into accumulation buffer
• transfer results to frame buffer
133
Accessing Accumulation
Buffer
glAccum( op, value )
• operations
• within the accumulation buffer: GL_ADD,
GL_MULT
• from read buffer: GL_ACCUM, GL_LOAD
• transfer back to write buffer: GL_RETURN
• glAccum(GL_ACCUM, 0.5) multiplies each
value in write buffer by 0.5 and adds to
accumulation buffer
134
Accumulation Buffer
Applications
Compositing
Full Scene Antialiasing
Depth of Field
Filtering
Motion Blur

135
Full Scene Antialiasing :
Jittering the view
Each time we move the viewer, the
image shifts
• Different aliasing artifacts in each image
• Averaging images using accumulation
buffer averages out
these artifacts

136
Depth of Focus : Keeping a
Plane in Focus
Jitter the viewer to keep one plane
unchanged Back Plane

Focal Plane

Front Plane

eye pos1 eye pos2

137
Fog

glFog{if}( property, value )

Depth Cueing
• Specify a range for a linear fog ramp
•GL_FOG_LINEAR
Environmental effects
• Simulate more realistic fog
•GL_FOG_EXP
•GL_FOG_EXP2

138
Fog Tutorial

139
Feedback Mode

Transformed vertex data is returned

to the application, not rendered
• useful to determine which primitives will
make it to the screen
Need to specify a feedback buffer
glFeedbackBuffer( size, type, buffer )
Select feedback mode for rendering
glRenderMode( GL_FEEDBACK )

140
Selection Mode

Method to determine which

primitives are inside the viewing
volume
Need to set up a buffer to have
results returned to you
glSelectBuffer( size, buffer )
Select selection mode for rendering
glRenderMode( GL_SELECT )
141
Selection Mode (cont.)

To identify a primitive, give it a name

• “names” are just integer values, not strings
Names are stack based
• allows for hierarchies of primitives
Selection Name Routines
glLoadName( name ) glPushName( name )
glInitNames()

142
Picking

Picking is a special case of selection

Programming steps
• restrict “drawing” to small region near pointer
use gluPickMatrix() on projection matrix
• enter selection mode; re-render scene
• primitives drawn near cursor cause hits
• exit selection; analyze hit records

143
Picking Template

glutMouseFunc( pickMe );

void pickMe( int button, int state, int x, int y )

{
GLuint nameBuffer[256];
GLint hits;
GLint myViewport[4];
if (button != GLUT_LEFT_BUTTON ||
state != GLUT_DOWN) return;
glGetIntegerv( GL_VIEWPORT, myViewport );
glSelectBuffer( 256, nameBuffer );
(void) glRenderMode( GL_SELECT );
glInitNames();

144
Picking Template (cont.)
glMatrixMode( GL_PROJECTION );
glPushMatrix();
glLoadIdentity();
gluPickMatrix( (GLdouble) x, (GLdouble)
(myViewport[3]-y), 5.0, 5.0, myViewport );
/* gluPerspective or glOrtho or other projection */
glPushName( 1 );
/* draw something */
glLoadName( 2 );
/* draw something else … continue … */

145
Picking Template (cont.)

glMatrixMode( GL_PROJECTION );
glPopMatrix();
hits = glRenderMode( GL_RENDER );
/* process nameBuffer */
}

146
Picking Ideas

For OpenGL Picking Mechanism

• only render what is pickable (e.g., don’t clear screen!)
• use an “invisible” filled rectangle, instead of text
• if several primitives drawn in picking region, hard to
use z values to distinguish which primitive is “on top”
Alternatives to Standard Mechanism
• color or stencil tricks (for example, use
glReadPixels() to obtain pixel value from back buffer)

147
Getting to the Framebuffer
Fragment

Scissor
Scissor Alpha
Alpha Stencil
Stencil
Test
Test Test
Test Test
Test

Framebuffer
Depth
Depth Logical
Logical
Blending
Blending Dithering
Dithering
Test
Test Operations
Operations

148
Scissor Box

Additional Clipping Test

glScissor( x, y, w, h )
• any fragments outside of box are clipped
• useful for updating a small section of a
viewport
• affects glClear() operations

149
 Per
Poly. Per
Poly. Vertex

Alpha Test
Vertex
CPU DL Raster Frag FB
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

Reject pixels based on their alpha

value
glAlphaFunc( func, value )
glEnable( GL_ALPHA_TEST )
• use alpha as a mask in textures

150
 Per
Poly. Per
Poly. Vertex

Stencil Buffer
Vertex
CPU DL Raster Frag FB
CPU DL Raster Frag FB
Texture
Texture
Pixel
Pixel

Used to control drawing based on

values in the stencil buffer
• Fragments that fail the stencil test are not
drawn
• Example: create a mask in stencil buffer and
draw only objects not in mask area

151
Controlling Stencil Buffer

glStencilFunc( func, ref, mask )

• compare value in buffer with ref using func
• only applied for bits in mask which are 1
• func is one of standard comparison functions
glStencilOp( fail, zfail, zpass )
• Allows changes in stencil buffer based on
passing or failing stencil and depth tests:
GL_KEEP, GL_INCR

152
Creating a Mask

glInitDisplayMode( …|GLUT_STENCIL|… );
glEnable( GL_STENCIL_TEST );
glClearStencil( 0x0 );

glStencilFunc( GL_ALWAYS, 0x1, 0x1 );

glStencilOp( GL_REPLACE, GL_REPLACE,
GL_REPLACE );
draw mask

153
Using Stencil Mask

Draw objects where stencil = 1

glStencilFunc( GL_EQUAL, 0x1, 0x1 )
Draw objects where stencil != 1
glStencilFunc( GL_NOTEQUAL, 0x1, 0x1 );
glStencilOp( GL_KEEP, GL_KEEP, GL_KEEP );

154
Dithering

glEnable( GL_DITHER )
Dither colors for better looking
results
• Used to simulate more available colors

155
Logical Operations on
Pixels
Combine pixels using bitwise logical
operations
glLogicOp( mode )
• Common modes
•GL_XOR
•GL_AND

156
Advanced Imaging

Imaging Subset
• Only available if GL_ARB_imaging defined
• Color matrix
• Convolutions
• Color tables
• Histogram
• MinMax
• Advanced Blending

157
Summary / Q & A

Dave Shreiner
Ed Angel
Vicki Shreiner
On-Line Resources

• http://www.opengl.org
• start here; up to date specification and lots of sample code
• news:comp.graphics.api.opengl
• http://www.sgi.com/software/opengl
• http://www.mesa3d.org/
• Brian Paul’s Mesa 3D
• http://www.cs.utah.edu/~narobins/opengl.html
• very special thanks to Nate Robins for the OpenGL Tutors
• source code for tutors available here!

159
Books

OpenGL Programming Guide, 3rd Edition

OpenGL Reference Manual, 3rd Edition
OpenGL Programming for the X
Window System
• includes many GLUT examples
Interactive Computer Graphics: A top-
down approach with OpenGL, 2nd
Edition
160
Thanks for Coming

Questions and Answers

Dave Shreiner shreiner@sgi.com
Ed Angel angel@cs.unm.edu
Vicki Shreiner vshreiner@sgi.com

161