An Interactive Introduction to OpenGL Programming

An Interactive Introduction to 

OpenGL Programming 

Course # 29 

Dave Shreiner 

Ed Angel 

Vicki Shreiner

Welcome

Welcome 

• Today’s Goals and Agenda 

– Describe OpenGL and its uses 

– Demonstrate and describe OpenGL’s 

capabilities and features 

– Enable you to write an interactive, 3-D 

computer graphics program in OpenGL

What Is OpenGL, and What 

Can It Do for Me? 

• OpenGL is a computer graphics rendering API 

– Generate high-quality color images by rendering with 

geometric and image primitives 

– Create interactive applications with 3D graphics 

• OpenGL is 

• operating system independent 

• window system independent

Related APIs 

• GLU (OpenGL Utility Library) 

– part of OpenGL 

– NURBS, tessellators, quadric shapes, etc. 

• AGL, GLX, WGL 

– glue between OpenGL and windowing systems 

• 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

What Is Required For Your 

Programs 

• Headers Files 

#include 

#include 

#include 

#include 

• Libraries 

• Enumerated Types 

– OpenGL defines numerous types for compatibility 

•GLfloat, GLint, GLenum, etc.

OpenGL Command 

Formats 

glVertex3fv( v ) 

Number of 

components 

2 - (x,y) 

3 - (x,y,z) 

4 - (x,y,z,w) 

Data Type 

b - byte 

ub - unsigned byte 

s - short 

us - unsigned short 

i - int 

ui - unsigned int 

f - float 

d - double 

Vector 

omit “v” for 

scalar form 

glVertex2f( x, y )

The OpenGL Pipeline 

Vertex 

Processing 

Fragment 

Processing 

Framebuffer 

• Processing is controlled by setting 

OpenGL’s state 

– colors, lights and object materials, texture 

maps 

– drawing styles, depth testing

An Example OpenGL Program

Sequence of Most OpenGL 

Programs 

Configure 

and open a 

window 

Initialize 

OpenGL’s 

state 

Process 

user events 

Update 


State 

(if necessary) 

Draw an 

image

An OpenGL Program 

#include 

#include "cube.h" 

void main( int argc, char *argv[] ) 

{ 

glutInit( &argc, argv ); 

glutInitDisplayMode( GLUT_RGBA | 

GLUT_DEPTH ); 

glutCreateWindow( “cube” ); 

} 

init(); 

glutDisplayFunc( display ); 

glutReshapeFunc( reshape ); 

glutMainLoop(); 

The main part of 

the program. 

GLUT is used to 

open the OpenGL 

window, and handle 

input from the user.


(cont’d.) 

void init( void ) 

{ 

glClearColor( 0, 0, 0, 1 ); 

gluLookAt( 2, 2, 2, 0, 0, 0, 0, 1, 0 ); 

glEnable( GL_DEPTH_TEST ); 

} 

Set up some initial 

OpenGL state 

void reshape( int width, int height ) 

{ 

glViewport( 0, 0, width, height ); 

glMatrixMode( GL_PROJECTION ); 

Handle when the 

glLoadIdentity(); 

user resizes the 

gluPerspective( 60, (GLdouble) width / height, window 

1.0, 10.0 ); 

glMatrixMode( GL_MODELVIEW ); 

}


(cont’d.) 

void display( void ) 

{ 

int i, j; 

glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); 

glBegin( GL_QUADS ); 

for ( i = 0; i < NUM_CUBE_FACES; ++i ) { 

glColor3fv( faceColor[i] ); 

for ( j = 0; j < NUM_VERTICES_PER_FACE; ++j ) { 

glVertex3fv( vertex[face[i][j]] ); 

} 

} 

glEnd(); 

Have OpenGL 

draw a cube 

from some 

3D points 

(vertices) 

} 

glFlush();

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

Drawing with OpenGL

What can OpenGL Draw? 

• 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 Geometric 

Primitives 

• All geometric primitives are specified by 

vertices 

GL_POINTS 

GL_LINES 

GL_LINE_STRIP 

GL_POLYGON 

GL_LINE_LOOP 

GL_TRIANGLES 

GL_QUAD_STRIP 

GL_TRIANGLE_STRIP 

GL_TRIANGLE_FAN 

GL_QUADS

Specifying Geometric 

Primitives 

• Primitives are specified using 

glBegin( primType ); 

glEnd(); 

• primType determines how vertices are combined 

glBegin( primType ); 

for ( i = 0; i < n; ++i ) { 

glColor3f( red[i], green[i], blue[i] ); 

glVertex3fv( coords[i] ); 

} 

glEnd();

The Power of Setting 

OpenGL State 

Appearance 

is controlled 

by setting 


state.

How OpenGL Works: The 

Conceptual Model 

Configure 

how OpenGL 

should draw 

stuff 

Draw stuff

Controlling OpenGL’s 

Drawing 

• Set OpenGL’s rendering state 

– State controls how things are drawn 

• shading 

• texture maps 

• polygon patterns 

– lighting 

– line styles (stipples) 

– transparency

Setting OpenGL State 

• Three ways to set OpenGL state: 

1. Set values to be used for processing 

vertices 

• most common methods of setting state 

– glColor() / glIndex() 

– glNormal() 

– glTexCoord() 

• state must be set before calling glVertex()

Setting OpenGL State 

(cont’d.) 

2. Turning on a rendering mode 

glEnable() / glDisable() 

3. Configuring the specifics of a particular 

rendering mode 

• Each mode has unique commands for setting 

its values 

glMaterialfv()

OpenGL and Color 

• The OpenGL Color Model 

– OpenGL uses the RGB(A) color model 

• There is also a color-index mode, but we won’t 

discuss it today 

• Colors are specified as floating-point 

numbers in the range [ 0.0, 1.0 ] 

– for example, to set a window’s background 

color, you would call 

glClearColor( 1.0, 0.3, 0.6, 1.0 ); 

R G B A

Shapes Tutorial

Animation and Depth Buffering

Double Buffering 

1 

2 

4 

8 

16 

1 

2 

4 

8 

16 

Front 

Buffer 

Back 

Buffer 

Display

Animation Using Double 

Buffering 

1. Request a double buffered color buffer 

glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE ); 

2. Clear color buffer 

glClear( GL_COLOR_BUFFER_BIT ); 

3. Render scene 

4. Request swap of front and back buffers 

glutSwapBuffers(); 

• Repeat steps 2 - 4 for animation

Depth Buffering and 

Hidden Surface Removal 

1 

2 

4 

8 

16 

1 

2 

4 

8 

16 

Color 

Buffer 

Depth 

Buffer 

Display

Depth Buffering Using 

OpenGL 

1. Request a depth buffer 

glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE | 

GLUT_DEPTH ); 

2. Enable depth buffering 

glEnable( GL_DEPTH_TEST ); 

3. Clear color and depth buffers 

glClear( GL_COLOR_BUFFER_BIT | 

GL_DEPTH_BUFFER_BIT ); 

4. Render scene 

5. Swap color buffers

Transformations

Camera Analogy 

• 3D is just like taking a photograph (lots 

of photographs!) 

camera 

viewing 

volume 

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

Transformation Pipeline 

v 

e 

r 

t 

e 

x 

object 

Modelview 

Matrix 

ey 

e 

Projection 

Matrix 

clip 

Perspective 

Division 

normalized 

device 

Viewport 

Transform 

window 

Modelview 

Modelview 

 

 

 

Projection 

• other calculations here 

– material color 

– shade model (flat) 

– polygon rendering mode 

– polygon culling 

– clipping

Coordinate Systems and 


• Steps in forming an image 

1. specify geometry (object coordinates) 

2. specify camera (camera coordinates) 

3. project (window coordinates) 

4. map to viewport (screen coordinates) 

• Each step uses transformations 

• Every transformation is equivalent to a change 

in coordinate systems (frames)

Homogeneous Coordinates 

– each vertex is a column vector 

⎡x⎤ 

⎢ ⎥ 

⎢ 

y 

v r = ⎥ 

⎢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 v v M 

M 

= 

⎡m 

⎢ 

m 

⎢ 

⎢m 

⎢ 

⎣m 

0 

1 

2 

3 

m 

m 

m 

m 

4 

5 

6 

7 

m 

m 

m 

m 

8 

9 

10 

11 

m 

m 

m 

m 

12 

13 

14 

15 

⎤ 

⎥ 

⎥ 

⎥ 

⎥ 

⎦

Specifying 


• Programmer has two styles of specifying 

transformations 

– specify matrices (glLoadMatrix, 

glMultMatrix) 

– specify operation (glRotate, glOrtho) 

• Programmer does not have to remember 

the exact matrices 

– see appendix of the OpenGL Programming 

Guide

Programming 


• Prior to rendering, view, locate, and 

orient: 

– eye/camera position 

– 3D geometry 

• Manage the matrices 

– including matrix stack 

• Combine (composite) transformations

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 


• Typical use (orthographic projection) 



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( eye x , eye y , eye z , 

aim x , aim y , aim z , 

up x , up y , up z ) 

– up vector determines unique orientation 

– careful of degenerate positions 

tripod

Projection Tutorial

Modeling Transformations 

• Move object 

glTranslate{fd}( x, y, z ) 

( z) 

• Rotate object around arbitrary axis x y 

glRotate{fd}( angle, x, y, z ) 

– angle is in degrees 

• Dilate (stretch or shrink) or mirror object 

glScale{fd}( x, y, z )

Transformation Tutorial

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

Common Transformation 

Usage 

• 2 examples of resize() routine 

– restate projection & viewing transformations 

• Usually called when window resized 

• Registered as callback for 

glutReshapeFunc()

Example 1: Perspective & 

LookAt 

void resize( int width, int height ) 

{ 




gluPerspective( 65.0, 

(GLdouble)width/height, 

1.0, 100.0 ); 



gluLookAt( 0.0, 0.0, 5.0, 

0.0, 0.0, 0.0, 

0.0, 1.0, 0.0 ); 

}

Example 2: Ortho 

void resize( int width, int height ) 

{ 

GLdouble aspect = (GLdouble) width / 

height; 

GLdouble left = -2.5, right = 2.5; 

GLdouble bottom = -2.5, top = 2.5; 




… continued …

Example 2: Ortho (cont’d) 

} 

if ( aspect < 1.0 ) { 

left /= aspect; 

right /= aspect; 

} else { 

bottom *= aspect; 

top *= aspect; 

} 

glOrtho( left, right, bottom, top, 

near, far ); 


glLoadIdentity();

Compositing Modeling 


• Problem: hierarchical objects 

– one position depends upon a previous 

position 

– robot arm or hand; sub-assemblies 

• Solution: moving local coordinate system 

– modeling transformations move coordinate 

system 

– post-multiply column-major matrices 

– OpenGL post-multiplies matrices

Compositing Modeling 


• Problem: objects move relative to 

absolute world origin 

– my object rotates around the wrong origin 

• make it spin around its center or something else 

• Solution: 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

Lighting

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 

• 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 

GL_SPECULAR 

GL_AMBIENT 

GL_EMISSION 

GL_SHININESS 

Base color 

Highlight Color 

Low-light Color 

Glow Color 

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

Light Sources (cont'd.) 

• Light color properties 

– GL_AMBIENT 

– GL_DIFFUSE 

– GL_SPECULAR

Types of Lights 

• OpenGL supports two types of Lights 

– Local (Point) light sources 

– Infinite (Directional) light sources 

• Type of light controlled by w coordinate 

w = 0 

w ≠ 0 

Infinite Light directed 

along 

Local Light positioned at 

( x y z) 

( ) 

x y z 

w 

w 

w

Turning on the Lights 

• Flip each light’s switch 

glEnable( GL_LIGHTn ); 

• Turn on the power 

glEnable( GL_LIGHTING );

Light Material Tutorial

Controlling a Light’s 

Position 

• The model-view 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

Light Position Tutorial

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

Texture Mapping

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 does not understand image 

formats

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

Rendering Bitmaps and 

Images 

• OpenGL can render blocks of pixels 

– Doesn’t understand image formats 

• Raster position controls placement of 

entire image 

– If the raster position is clipped, the entire 

block of pixels is not rendered 

glDrawPixels( width, height, format, 

type, pixels ); 

glBitmap( width, height, xorig, yorig, 

xmove, ymove, bitmap );

Reading the Framebuffer 

• Generated images can be read from the 

framebuffer 

– You get back a block of pixels 

• Read width×height rectangle of pixels 

– Lower-left corner of rectangle positioned 

at (x, y) 

glReadPixels( x, y, width, height, 

format, type, pixels );

Pixel Pipeline 

• Programmable pixel storage 

and transfer operations 

glBitmap(), glDrawPixels() 

CPU 

Pixel 

Storage 

Modes 

Pixel-Transfer 

Operations 

(and Pixel Map) 

Rasterization 

(including 

Pixel Zoom) 

Per Fragment 

Operations 

Frame 

Buffer 

Texture 

Memory 

glCopyTex*Image(); 

glReadPixels(), glCopyPixels()

Texture Mapping 

y 

z 

x 

geometry 

screen 

t 

image 

s

Texture Example 

• The texture (below) is a 

256 x 256 image that has 

been mapped to a 

rectangular polygon 

which is viewed in 

perspective

Applying Textures I 

• Three steps to applying a texture 

1. specify the texture 

• read or generate image 

• assign to texture 

• enable texturing 

2. assign texture coordinates to vertices 

3. specify texture parameters 

• wrapping, filtering

Texture Objects 

• Have OpenGL store your images 

– one image per texture object 

– may be shared by several graphics contexts 

• Generate texture names 

glGenTextures( n, *texIds );

Texture Objects (cont'd.) 

• Create texture objects with texture data and 

state 

glBindTexture( target, id ); 

• Bind textures before using 

glBindTexture( target, id );

Specify the Texture Image 

• 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

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

Mapping a Texture 

• Based on parametric texture coordinates 

• glTexCoord*() specified at each vertex 

t 

0, 1 

Texture Space 

a 

1, 1 

Object Space 

(s, t) = (0.2, 0.8) 

A 

b 

c 

0, 0 1, 0 

s 

(0.4, 0.2) 

B 

C 

(0.8, 0.4)

Tutorial: Texture

Applying Textures II 

– specify textures in texture objects 

– set texture filter 

– set texture function 

– set texture wrap mode 

– set optional perspective correction hint 

– bind texture object 

– enable texturing 

– supply texture coordinates for vertex 

• coordinates can also be generated

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

Filter Modes 

Example: 

glTexParameteri( target, type, mode ); 

Texture Polygon 

Magnification 

Texture Polygon 

Minification

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

Wrapping Mode 

• Example: 

glTexParameteri( GL_TEXTURE_2D, 

GL_TEXTURE_WRAP_S, GL_CLAMP ) 

glTexParameteri( GL_TEXTURE_2D, 

GL_TEXTURE_WRAP_T, GL_REPEAT ) 

t 

texture 

s 

GL_REPEAT 

wrapping 

GL_CLAMP 

wrapping

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

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

Advanced OpenGL Topics

Working with OpenGL 

Extensions 

• OpenGL is always changing 

– features are first introduced as extensions 

• Call glGetString( GL_EXTENSIONS ) to see 

the extensions for your OpenGL implementation 

• glext.h contains latest function names and 

tokens 

• May need to query a function pointer to 

gain access to extension’s function 

– Window system dependent pointer request 

function 

• glXGetProcAddress(), wglGetProcAddress()

Alpha: the 4 th Color 

Component 

• Measure of Opacity 

– simulate translucent objects 

• glass, water, etc. 

– composite images 

– antialiasing 

– ignored if blending is not enabled 

glEnable( GL_BLEND )

Blending 

• Combine fragments with pixel values that 

are already in the framebuffer 

glBlendFunc( src, dst ) 

v 

C 

r 

v 

= src C 

f 

+ 

dst 

v 

C 

p 

Fragment 

(src) 

Framebuffer 

Pixel 

(dst) 

Blending 

Equation 

Blended 

Pixel

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

Summary / Q & A

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!

Books 

• OpenGL Programming Guide, 4 th Edition 

• OpenGL Reference Manual, 4 th Edition 

• OpenGL Shading Language 

• Interactive Computer Graphics: A topdown 

approach with OpenGL, 3 rd Edition 

• OpenGL Programming for the X Window 

System 

– includes many GLUT examples

An Interactive Introduction to OpenGL Programming

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?