Computer Graphics: Course Notes

COURSE NOTES:
COMPUTER GRAPHICS
George Wolberg
Department of Computer Science
City College of New York
New York, NY 10031
wolberg@cs.ccny.cuny.edu
Course Description
Intense introduction to computer graphics.
Intended for advanced undergraduate and
graduate students.
Topics include:
Introduction to Computer
Graphics
Prof. George Wolberg
Dept. of Computer Science
- Graphics hardware, raster scan conversion

- OpenGL API
- Geometric transformations, 3D viewing
- Geometric modeling, curves and surfaces
- Shading, texture mapping, compositing
Angel: Interactive Computer Graphics 4E Addison-Wesley 2006
Syllabus
Week
1
2-3
4-5
6
7
8-9
10
11
12-14
Texts
Topic
Introduction, history, vector/raster graphics
OpenGL, GLUT, interaction
Geometry, 2D/3D transformations
Projections, perspective
3D viewing
Midterm, Spring break
Geometric modeling
Shading
Curves and surfaces, texture mapping
Required Text:
- Edward Angel, Interactive Computer Graphics:
A Top-Down Approach Using OpenGL, 4th
Edition, Addison-Wesley, 2006.
Supplementary Text:
- Mason Woo, Jackie Nieder, Tom Davis, and
Dave Shreiner, The OpenGL Programmers
Guide, 3rd Edition, Addison-Wesley,1999.
The definitive OpenGL programming reference
3
Grading
Computer Resources
The final grade is computed as follows:
SUN Blade workstations (NAC 7/105)
- Midterm exam: 25%

- Final exam: 25%
- Homework programming assignments: 50%
- Solaris 8 Operating System (UNIX)

- OpenGL hardware support for fast rendering
- 24-bit true-color graphics (16.7 million colors)
Substantial programming assignments are

due every three weeks.
Proficiency in C/C++ is expected.
Prereqs: CSc 30100 and CSc 32200
You can also program at home on your

PC/laptop under MS Windows or Linux.
Download MESA, if necessary, for Linux.
Use C/C++ programming language.
Contact Information
Objectives
Prof. Wolberg
- Office hours: Tuesday 4-5pm, NAC 8/202I
- Email: wolberg@cs.ccny.cuny.edu
Teaching Assistant (TA): Mr. Hadi Fadaifard

- Email: cs1025cd@yahoo.com
See class web page for all class info such

as homework and sample source code:
www-cs.ccny.cuny.edu/~wolberg/cs472
Part 1: Introduction
Text: Chapter 1
Lectures 1-3
Part 2: Basic OpenGL

Text: Chapters 2-3
Lectures 4-9
- What is Computer Graphics?

- Applications Areas
- History
- Image formation
- Basic Architecture
- Architecture
- GLUT
- Simple programs in two and three dimensions
- Interaction
Outline: Part 3
10
Outline: Part 4
Part 4: Discrete Methods
Text: Chapter 7-8
Lectures 21-26
Part 3: Three-Dimensional Graphics

Text: Chapters 4-6
Lectures 10-20
- Buffers
- Bitmaps and Pixel Maps
- Texture Mapping
- Compositing and Transparency
- Scan conversion
- Polygon filling
- Hidden surface removal
- Geometry
- Transformations
- Homogeneous Coordinates
- Viewing
- Shading
Outline: Part 2
Outline: Part 1
These presentations accompany the

textbook Interactive Computer Graphics,
A Top-down Approach with OpenGL
(Fourth Edition) by Edward Angel.
They form the basis for approximately 14
weeks of lectures.
The lectures cover Chapters 1-10.
Programs in C/C++ will be assigned to
reinforce understanding of the material.
11
12
Outline: Part 5
Outline: Part 6
Part 5: Objected-Oriented Modeling

Text: Chapter 10
Lectures 27-28
Part 6: Curves and Surfaces

Text: Chapter 11
Lectures 29-30
- Hierarchical Models
- Animation
- Scene Graphs
- Explicit, Implicit, and Parametric Forms

- Hermite, Bezier, and B-Spline Curves
- OpenGL Implementation
13
14
Objectives
In this lecture, we explore what computer
graphics is about and survey some
application areas
But we start with a historical introduction
What is Computer Graphics?

City College or New York
16
Computer Graphics
Related Fields
Computer graphics deals with all aspects

of creating images with a computer
Image Processing
Image
- Hardware
- Software
- Applications
Computer
Graphics
Computer
Vision
Scene
Description
17
18
Example
Preliminary Answer
Where did this image come from?
Application: The object is an artists

rendition of the sun for an animation to be
shown in a domed environment
(planetarium)
Software: Maya for modeling and
rendering but Maya is built on top of
OpenGL
Hardware: PC with graphics cards for
modeling and rendering
What hardware/software did we need to

produce it?
19
Approaches a Student
Should Bring to a Problem
20
Think Visually
Traditional problem-solving process:

- Recognizing a problem
- Building a model of the problem
- Developing a tentative solution based on model
- Testing the tentative solution against problem
Any shortcomings of the tentative solution are

identified, and the model and solution are
revised to address these shortcomings.
A student with experience in graphics should

create a visual representation of the problem
that can help develop a tentative solution.
Create a visualization for a problem as a way
to think about it or communicate it to others.
This helps create a tentative solution.
Problem Model Geometry Image
21
Basic Graphics System
22
CRT
Output device
Input devices
Can be used as a line-drawing device

(vector graphics) or to display contents of
frame buffer (raster graphics)
Image formed in FB
23
24
Computer Graphics: 1950-1960

Computer graphics goes back to the
earliest days of computing

Wireframe graphics
Project Sketchpad
Display Processors
Storage tube
- Strip charts
- Pen plotters
- Simple displays using A/D converters to go
from computer to calligraphic CRT
Cost of refresh for CRT too high

- Computers slow, expensive, unreliable
25
Project Sketchpad
26
Display Processor
Rather than have host computer try to refresh
display use a special purpose computer called
a display processor (DPU)
Ivan Sutherlands PhD thesis at MIT

- Recognized the potential of man-machine
interaction
- Loop
Display something
User moves light pen
Computer generates new display
- Sutherland also created many of the now

common algorithms for computer graphics
Graphics stored in display list (display file) on

display processor
Host compiles display list and sends to DPU
27
Direct View Storage Tube
28
Created by Tektronix
Raster Graphics
Beginning of graphics standards
- Did not require constant refresh

- Standard interface to computers
- IFIPS
Allowed for standard software

Plot3D in Fortran
GKS: European effort

Becomes ISO 2D standard
Core: North American effort
3D but fails to become ISO standard
- Relatively inexpensive
Opened door to use of computer graphics for CAD
community
Workstations and PCs
29
30
Raster Graphics
Raster Graphics
Image produced as an array (the raster)

of picture elements (pixels) in the frame
buffer
Allow us to go from lines and wireframes

to filled polygons
31
PCs and Workstations
32
Although we no longer make the

distinction between workstations and PCs
historically they evolved from different
roots
Realism comes to computer graphics
- Early workstations characterized by

Networked connection: client-server
High-level of interactivity
- Early PCs included frame buffer as part of user

memory
smooth shading
33

Special purpose hardware
bump mapping
34

OpenGL API
Completely computer-generated featurelength movies (Toy Story) are successful
New hardware capabilities
- Silicon Graphics geometry engine

VLSI implementation of graphics pipeline
Industry-based standards
- PHIGS
- RenderMan
- Texture mapping
- Blending
- Accumulation, stencil buffer
Networked graphics: X Window System

Human-Computer Interface (HCI)
environmental
mapping
35
36
Computer Graphics: 2000 Photorealism

Graphics cards for PCs dominate market
Image Formation
- Nvidia, ATI, 3DLabs
Game boxes and game players determine

direction of market
Computer graphics routine in movie
industry: Maya, Lightwave
37
Objectives
Image Formation
Fundamental imaging notions

Physical basis for image formation
In computer graphics, we form images

which are generally two dimensional using
a process analogous to how images are
formed by physical imaging systems
- Light
- Color
- Perception
- Cameras
- Microscopes
- Telescopes
- Human visual system
Synthetic camera model

Other models
39
Elements of Image Formation

Objects
Viewer
Light source(s)
40
Light
Light is the part of the electromagnetic
spectrum that causes a reaction in our
visual systems
Generally these are wavelengths in the
range of about 350-780 nm (nanometers)
Long wavelengths appear as reds and
short wavelengths as blues
Attributes that govern how light interacts

with the materials in the scene
Note the independence of the objects,
viewer, and light source(s)

41
42
Ray Tracing and

Geometric Optics
Luminance and Color Images
One way to form an image is to

follow rays of light from a
point source determine which
rays enter the lens of the
camera. However, each
ray of light may have
multiple interactions with objects
before being absorbed or going to infinity.
Luminance
- Monochromatic
- Values are gray levels
- Analogous to working with black and white film
or television
Color
- Has perceptional attributes of hue, saturation,
and lightness
- Do we have to match every frequency in visible
spectrum? No!
43
Three-Color Theory
44
Shadow Mask CRT
Human visual system has two types of

sensors
- Rods: monochromatic, night vision
- Cones
Color sensitive
Three types of cone
Only three values (the tristimulus
values) are sent to the brain
Need only match these three values

- Need only three primary colors
45
Additive and Subtractive Color
46
Pinhole Camera
Additive color
- Form a color by adding amounts of three
primaries
CRTs, projection systems, positive film
- Primaries are Red (R), Green (G), Blue (B)
Subtractive color
Use trigonometry to find projection of a point
- Form a color by filtering white light with cyan

(C), Magenta (M), and Yellow (Y) filters
xp= -d(x/z)
Light-material interactions
Printing
Negative film
yp= -d(y/z)
zp= -d
These are equations of simple perspective

47
48
Synthetic Camera Model
Advantages
Separation of objects, viewer, light sources
Two-dimensional graphics is a special case
of three-dimensional graphics
Leads to simple software API
projector
p
image plane
projection of p
center of projection
- Specify objects, lights, camera, attributes

- Let implementation determine image
Leads to fast hardware implementation
49
Global vs Local Lighting
50
Why not ray tracing?

Ray tracing seems more physically based
so why dont we use it to design a
graphics system?
Possible and is actually simple for simple
objects such as polygons and quadrics
with simple point sources
In principle, can produce global lighting
effects such as shadows and multiple
reflections but is slow and not well-suited
for interactive applications
Cannot compute color or shade of each

object independently
- Some objects are blocked from light
- Light can reflect from object to object
- Some objects might be translucent
51
52
Objectives
Models and Architectures

Learn the basic design of a graphics

system
Introduce pipeline architecture
Examine software components for an
interactive graphics system
54
Image Formation Revisited
Physical Approaches
Can we mimic the synthetic camera

model to design graphics hardware
software?
Application Programmer Interface (API)
Ray tracing: follow rays of light from

center of projection until they either are
absorbed by objects or go off to infinity
- Can handle global effects
Multiple reflections
Translucent objects
- Need only specify
Objects
Materials
Viewer
Lights
- Slow
- Need whole data base
Radiosity: Energy based approach
But how is the API implemented?
- Very slow
55
Practical Approach
56
The Programmers Interface
Process objects one at a time in the order

they are generated by the application
- Can consider only local lighting
Programmer sees the graphics system

through an interface: the Application
Programmer Interface (API)
Pipeline architecture
application
program
display
All steps can be implemented in hardware

on the graphics card
57
API Contents
58
Object Specification
Most APIs support a limited set of
primitives including
Functions that specify what we need to

form an image
- Points (1D object)

- Line segments (2D objects)
- Polygons (3D objects)
- Some curves and surfaces
- Objects
- Viewer
- Light Source(s)
- Materials
Quadrics
Parametric polynomial
Other information
- Input from devices such as mouse and keyboard
- Capabilities of system
59
All are defined through locations in space

or vertices
60
10
Example
Camera Specification
Six degrees of freedom
type of object
- Position of center of lens

- Orientation
location of vertex
glBegin(GL_POLYGON)
glVertex3f(0.0, 0.0, 0.0);
glVertex3f(0.0, 1.0, 0.0);
glVertex3f(0.0, 0.0, 1.0);
glEnd( );
Lens
Film size
Orientation of film plane
end of object definition
61
Types of lights
Much of the work in the pipeline is in

converting object representations from
one coordinate system to another
- Point sources vs distributed sources

- Spot lights
- Near and far sources
- Color properties
- World coordinates
- Camera coordinates
- Screen coordinates
Material properties
- Absorption: color properties
- Scattering
Every change of coordinates is equivalent

to a matrix transformation
Diffuse
Specular
63
Clipping
Projection
Just as a real camera cannot see the

whole world, the virtual camera can only
see part of the world space
Must carry out the process that combines

the 3D viewer with the 3D objects to
produce the 2D image
- Objects that are not within this volume are said

to be clipped out of the scene
62
Following the Pipeline:

Transformations
Lights and Materials
64
- Perspective projections: all projectors meet at

the center of projection
- Parallel projection: projectors are parallel,
center of projection is replaced by a direction of
projection
65
66
11
Rasterization
If an object is visible in the image, the
appropriate pixels in the frame buffer
must be assigned colors
Programming with OpenGL

Part 1: Background
- Vertices assembled into objects

- Effects of lights and materials must be
determined
- Polygons filled with interior colors/shades
- Must have also determined which objects are
in front (hidden surface removal)

67
Objectives
Early History of APIs

IFIPS (1973) formed two committees to
come up with a standard graphics API
Development of the OpenGL API

OpenGL Architecture
- Graphical Kernel System (GKS)
- OpenGL as a state machine
2D but contained good workstation model
Functions
- Core
Both 2D and 3D
- Types
- Formats
- GKS adopted as IS0 and later ANSI standard

(1980s)
Simple program
GKS not easily extended to 3D (GKS-3D)

Far behind hardware development
69
PHIGS and X
70
SGI and GL
Programmers Hierarchical Graphics

System (PHIGS)
Silicon Graphics (SGI) revolutionized the

graphics workstation by implementing the
pipeline in hardware (1982)
To use the system, application
programmers used a library called GL
With GL, it was relatively simple to
program three dimensional interactive
applications
- Arose from CAD community

- Database model with retained graphics
(structures)
X Window System
- DEC/MIT effort
- Client-server architecture with graphics
PEX combined the two

- Not easy to use (all the defects of each)
71
72
12
OpenGL
OpenGL Evolution
Controlled by an Architectural Review
Board (ARB)
The success of GL lead to OpenGL in

1992, a platform-independent API that
was
- Members include SGI, Microsoft, Nvidia, HP,

3DLabs,IBM,.
- Relatively stable (present version 1.4)
- Easy to use
- Close enough to the hardware to get excellent
performance
- Focused on rendering
- Omitted windowing and input to avoid window
system dependencies
Evolution reflects new hardware capabilities

3D texture mapping and texture objects
Vertex programs
- Allows for platform specific features through

extensions
- See www.opengl.org for up-to-date info
73
OpenGL Libraries
GLUT
OpenGL core library
OpenGL Utility Toolkit (GLUT)
- OpenGL32 on Windows
- GL on most Unix/Linux systems
- Provides functionality common to all window

systems
OpenGL Utility Library (GLU)
- Provides functionality in OpenGL core but

avoids having to rewrite code
Links with window system
Slide bars
75
OpenGL Architecture
Geometric
pipeline
Immediate Mode
application program
Polynomial
Evaluator
GLUT
X, Win32, Mac O/S
76
Software Organization
GLX, AGL
or WGL
Open a window
Get input from mouse and keyboard
Menus
Event-driven
- Code is portable but GLUT lacks the

functionality of a good toolkit for a specific
platform
- GLX for X window systems

- WGL for Windows
- AGL for Macintosh
OpenGL Motif
widget or similar
74
Per Vertex
Operations &
Primitive
Assembly
GLU
GL
CPU
Display
List
Rasterization
software and/or hardware
Per Fragment
Operations
Frame
Buffer
Texture
Memory
Pixel
Operations
77
78
13
OpenGL Functions
OpenGL State
Primitives
OpenGL is a state machine

OpenGL functions are of two types
- Points
- Line Segments
- Polygons
- Primitive generating
Can cause output if primitive is visible
How vertices are processed and appearance of primitive
are controlled by the state
Attributes
Transformations
- State changing
- Viewing
- Modeling
Transformation functions
Attribute functions
Control
Input (GLUT)
79
Lack of Object Orientation
80
OpenGL function format
OpenGL is not object oriented so that

there are multiple functions for a given
logical function, e.g. glVertex3f,
glVertex2i, glVertex3dv,..
function name
glVertex3f(x,y,z)
Underlying storage mode is the same

Easy to create overloaded functions in
C++ but issue is efficiency
belongs to GL library
x,y,z are floats
glVertex3fv(p)
p is a pointer to an array
81
OpenGL #defines
A Simple Program
Most constants are defined in the include

files gl.h, glu.h and glut.h
Generate a square on a solid background
82
- Note #include <glut.h> should

automatically include the others
- Examples
-glBegin(GL_POLYGON)
-glClear(GL_COLOR_BUFFER_BIT)
include files also define OpenGL data

types: Glfloat, Gldouble,.
83
84
14
simple.c
Event Loop
#include <glut.h>
void mydisplay(){
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_POLYGON);
glVertex2f(-0.5,-0.5);
glVertex2f(-0.5, 0.5);
glVertex2f( 0.5, 0.5);
glVertex2f( 0.5,-0.5);
glEnd();
glFlush();
}
int main(int argc, char** argv){
glutCreateWindow("simple");
glutDisplayFunc(mydisplay);
glutMainLoop();
}
Note that the program defines a display

callback function named mydisplay
- Every glut program must have a display
callback
- The display callback is executed whenever
OpenGL decides the display must be refreshed,
for example when the window is opened
- The main function ends with the program
entering an event loop
85
Defaults
86
Notes on compilation
simple.c is too simple
See website and ftp for examples

Unix/Linux
Makes heavy use of state variable default

values for
- Include files usually in /include/GL

- Compile with lglut lglu lgl loader flags
- May have to add L flag for X libraries
- Mesa implementation included with most linux
distributions
- Check web for latest versions of Mesa and glut
- Viewing
- Colors
- Window parameters
Next version will make the defaults more

explicit
87
88
Compilation on Windows
Visual C++
- Get glut.h, glut32.lib and glut32.dll from web
- Create a console application
- Add opengl32.lib, glut32.lib, glut32.lib to project
settings (under link tab)
Borland C similar
Cygwin (linux under Windows)

Part 2: Complete Programs
- Can use gcc and similar makefile to linux

- Use lopengl32 lglu32 lglut32 flags
89
15
Objectives
Program Structure
Most OpenGL programs have a similar
structure that consists of the following
functions
Refine the first program

- Alter the default values
- Introduce a standard program structure
-main():
Simple viewing
defines the callback functions

opens one or more windows with the required properties
enters event loop (last executable statement)
- Two-dimensional viewing as a special case of

three-dimensional viewing
-init(): sets the state variables
Fundamental OpenGL primitives

Attributes
viewing
Attributes
- callbacks
Display function
Input and window functions
91
92
Simple.c revisited
main.c
includes gl.h
#include <GL/glut.h>
In this version, we will see the same

output but have defined all the relevant
state values through function calls with
the default values
In particular, we set
int main(int argc, char** argv)

{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glutInitWindowSize(500,500);
glutInitWindowPosition(0,0);
glutCreateWindow("simple");
define window properties
glutDisplayFunc(mydisplay);
- Colors
- Viewing conditions
- Window properties
init();
display callback
set OpenGL state
glutMainLoop();
}
93
GLUT functions
94
init.c
glutInit allows application to get command line

arguments and initializes system
gluInitDisplayMode requests properties of the
window (the rendering context)
black clear color

void init()
opaque window
{
glClearColor (0.0, 0.0, 0.0, 1.0);
- RGB color
- Single buffering
- Properties logically ORed together
glutWindowSize in pixels
glutWindowPosition from top-left corner of
display
glutCreateWindow create window with title
simple
glutDisplayFunc display callback
glutMainLoop
enter
infinite event
Angel: Interactive Computer Graphics
4E Addison-Wesley
2006 loop
enter event loop
fill with white

glColor3f(1.0, 1.0, 1.0);
glMatrixMode (GL_PROJECTION);
glLoadIdentity ();
glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0,
1.0);
viewing volume
}
95
96
16
Coordinate Systems
OpenGL Camera
The units of in glVertex are determined by

the application and are called world or
problem coordinates
The viewing specifications are also in world
coordinates and it is the size of the viewing
volume that determines what will appear in
the image
Internally, OpenGL will convert to camera
coordinates and later to screen coordinates
97
Orthographic Viewing
OpenGL places a camera at the origin

pointing in the negative z direction
The default viewing volume
is a box centered at the
origin with a side of
length 2
98
Transformations and Viewing

In OpenGL, the projection is carried out by a
projection matrix (transformation)
There is only one set of transformation
functions so we must set the matrix mode first
In the default orthographic view, points are

projected forward along the z axis onto the
plane z=0
glMatrixMode (GL_PROJECTION)
z=0
Transformation functions are incremental so

we start with an identity matrix and alter it with
a projection matrix that gives the view volume
z=0
glLoadIdentity ();
glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);
99
Two- and threedimensional viewing
100
mydisplay.c
In glOrtho(left, right, bottom, top,

near, far) the near and far distances are
measured from the camera
Two-dimensional vertex commands place all
vertices in the plane z=0
If the application is in two dimensions, we can use
the function
gluOrtho2D(left, right,bottom,top)
In two dimensions, the view or clipping volume
becomes a clipping window
101
void mydisplay()
{
glVertex2f(-0.5,-0.5);
glVertex2f(-0.5, 0.5);
glVertex2f( 0.5, 0.5);
glVertex2f( 0.5,-0.5);
glEnd();
glFlush();
}
102
17
OpenGL Primitives
Example: Drawing an Arc

Given a circle with radius r, centered at
(x,y), draw an arc of the circle that sweeps
out an angle .
GL_POINTS
GL_POLYGON
GL_LINES
( x, y ) = ( x0 + r cos , y0 + r sin ),
GL_LINE_STRIP
for 0 2 .
GL_LINE_LOOP
GL_TRIANGLES
GL_QUAD_STRIP
GL_TRIANGLE_STRIP
GL_TRIANGLE_FAN
103
The Line Strip Primitive
Polygon Issues
void drawArc(float x, float y, float r,

float t0, float sweep)
{
float t, dt;
/* angle */
int
n = 30;
/* # of segments */
int
i;
t = t0 * PI/180.0;
/* radians */
dt = sweep * PI/(180*n); /* increment */
glBegin(GL_LINE_STRIP);
for(i=0; i<=n; i++, t += dt)
glVertex2f(x + r*cos(t), y + r*sin(t));
glEnd();
}
OpenGL will only display polygons correctly that are

- Simple: edges cannot cross
- Convex: All points on line segment between two
points in a polygon are also in the polygon
- Flat: all vertices are in the same plane
User program must check if above true
Triangles satisfy all conditions
nonsimple polygon
104
105
Attributes
nonconvex polygon
106
RGB color
Each color component stored separately in the
frame buffer
Usually 8 bits per component in buffer
Note in glColor3f the color values range from
0.0 (none) to 1.0 (all), while in glColor3ub the
values range from 0 to 255
Attributes are part of the OpenGL and

determine the appearance of objects
- Color (points, lines, polygons)
- Size and width (points, lines)
- Stipple pattern (lines, polygons)
- Polygon mode
Display as filled: solid color or stipple pattern
Display edges
107
108
18
Indexed Color
Color and State
Colors are indices into tables of RGB values

Requires less memory
- indices usually 8 bits
- not as important now
- Colors and other attributes are not part of the

object but are assigned when the object is
rendered
We can create conceptual vertex colors by code

such as
glColor
glVertex
glColor
glVertex
Memory inexpensive
Need more colors for shading
The color as set by glColor becomes part of

the state and will be used until changed
109
Smooth Color
110
Viewports
Default is smooth shading

- OpenGL interpolates vertex colors across
visible polygons
Alternative is flat shading
- Color of first vertex
determines fill color
Do not have use the entire window for the

image: glViewport(x,y,w,h)
Values in pixels (screen coordinates)
glShadeModel
(GL_SMOOTH)
or GL_FLAT
111
112
Objectives
Part 3: Three Dimensions
Develop a more sophisticated threedimensional example

- Sierpinski gasket: a fractal
Introduce hidden-surface removal
114
19
Three-dimensional Applications
Sierpinski Gasket (2D)

Start with a triangle
In OpenGL, two-dimensional applications

are a special case of three-dimensional
graphics
- Not much changes
- Use glVertex3*( )
Connect bisectors of sides and remove central

triangle
- Have to worry about the order in which

polygons are drawn or use hidden-surface
removal
- Polygons should be simple, convex, flat
Repeat
115
116
The gasket as a fractal
Example
Five subdivisions
Consider the filled area (black) and the

perimeter (the length of all the lines around
the filled triangles)
As we continue subdividing
- the area goes to zero
- but the perimeter goes to infinity
This is not an ordinary geometric object

- It is neither two- nor three-dimensional
It has a fractal (fractional dimension) object

117
Gasket Program
118
Draw a triangle
#include <GL/glut.h>
/* display one triangle */

void triangle( point2 a, point2 b, point2 c)
{
glBegin(GL_TRIANGLES);
glVertex2fv(a);
glVertex2fv(b);
glVertex2fv(c);
glEnd();
}
/* a point data type

typedef GLfloat point2[2];
/* initial triangle */
point2 v[]={{-1.0, -0.58}, {1.0, -0.58}, {0.0,
1.15}};
int n; /* number of recursive steps */
119
120
20
Triangle Subdivision
Display and Init Functions
/* triangle subdivision using vertex numbers */

void divide_triangle(point2 a, point2 b, point2
c, int m)
{
point2 v0, v1, v2;
int
j;
if(m > 0) {
for(j=0; j<2; j++)
for(j=0; j<2; j++)
for(j=0; j<2; j++)
divide_triangle(a,
divide_triangle(c,
divide_triangle(b,
}
/* else, draw triangle
else triangle(a,b,c);
void display(void)
{
divide_triangle(v[0], v[1], v[2], n);
glFlush();
}
v0[j]=(a[j]+b[j])/2;
v1[j]=(a[j]+c[j])/2;
v2[j]=(b[j]+c[j])/2;
v0, v1, m-1);
v1, v2, m-1);
v2, v0, m-1);
at end of recursion */
}
121
main Function
122
Moving to 3D
int main(int argc, char **argv)

{
n=4;
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glutInitWindowSize(500, 500);
glutCreateWindow(2D Gasket");
glutDisplayFunc(display);
myinit();
glutMainLoop();
}
void myinit()
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-2.0, 2.0, -2.0, 2.0);
glMatrixMode(GL_MODELVIEW);
glClearColor (1.0, 1.0, 1.0,1.0)
glColor3f(0.0,0.0,0.0);
}
123
3D Gasket
We can easily make the program threedimensional by using

typedef Glfloat point3[3]
glVertex3f
glOrtho
But that would not be very interesting
Instead, we can start with a tetrahedron
124
Example
We can subdivide each of the four faces
after 5 iterations
Appears as if we remove a solid

tetrahedron from the center leaving four
smaller tetrahedtra
125
126
21
triangle code
subdivision code
void triangle(point3 a, point3 b, point3 c)

{
glVertex3fv(a);
glVertex3fv(b);
glVertex3fv(c);
glEnd();
}
void divide_triangle(point3 a, point3 b, point3 c,

int m)
{
point3 v1, v2, v3;
int
j;
if(m > 0) {
for(j=0; j<3; j++)
for(j=0; j<3; j++)
for(j=0; j<3; j++)
divide_triangle(a,
divide_triangle(c,
divide_triangle(b,
}
else triangle(a,b,c);
v1[j]=(a[j]+b[j])/2;
v2[j]=(a[j]+c[j])/2;
v3[j]=(b[j]+c[j])/2;
v1, v2, m-1);
v2, v3, m-1);
v3, v1, m-1);
}
127
tetrahedron code
128
Almost Correct
void tetrahedron(int m)
{
glColor3f(1.0,0.0,0.0);
divide_triangle(v[0], v[1], v[2], m);
glColor3f(0.0,1.0,0.0);
glColor3f(0.0,0.0,1.0);
Because the triangles are drawn in the order

they are defined in the program, the front
triangles are not always rendered in front of
triangles behind them
get this
want this
glColor3f(0.0,0.0,0.0);
}
129
Hidden-Surface Removal
130
Using the z-buffer algorithm
We want to see only those surfaces in front of

other surfaces
OpenGL uses a hidden-surface method called
the z-buffer algorithm that saves depth
information as objects are rendered so that only
the front objects appear in the image
The algorithm uses an extra buffer, the z-buffer, to

store depth information as geometry travels down the
pipeline
It must be
- Requested in main.c
glutInitDisplayMode
(GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH)
- Enabled in init.c
glEnable(GL_DEPTH_TEST)
- Cleared in the display callback

glClear(GL_COLOR_BUFFER_BIT |
GL_DEPTH_BUFFER_BIT)
131
132
22
Example: Drawing a
Sphere
Longitude and Latitude

Using Quad Strips
In this example, we draw a sphere using a

combination of OpenGL primitives.
Locate points on the sphere by varying
two parameters: longitude and latitude.
x ( , ) = sin cos
y ( , ) = cos cos
z ( , ) = cos
133
Covering the Poles with

Triangle Fans
c = M_PI / 180.0; /* convert degrees to radians */

for(p = -80.0; p <= 80.0; p += 20.0) {
glBegin(GL_QUAD_STRIP);
for(t = -180.0; t <= 180.0; t += 20.0) {
x = sin(c*t) * cos(c*p);
y = cos(c*t) * cos(c*p);
z = cos(c*p);
glVertex3d(x, y, z);
x = sin(c*t) * cos(c*(p + 20.0));
y = cos(c*t) * cos(c*(p + 20.0));
z = cos(c*(p + 20.0));
}
glEnd();
}
134
Subdivision Sphere
We can approximate a sphere to any
desired resolution by recursive
subdivision on a tetrahedron.
/* north pole */
z = 1.0;
glBegin(GL_TRIANGLE_FAN);
z = cos(c*80.0);
for(t = -180.0; t <= 180.0; t += 20.0) {
x = sin(c*t) * cos(c*80.0);
y = cos(c*t) * cos(c*80.0);
glVertex3d(x,y,z);
}
glEnd();
typedef float point[4];

/* initial tetrahedron */
point v[]={{ 0.0,
0.0,
1.0},
{ 0.0,
0.942809, -0.33333},
{-0.816497, -0.471405, -0.333333},
{ 0.816497, -0.471405, -0.333333}};
The south pole is a reflection in the xy-plane.

135
136
Subdividing a Tetrahedron
Subdividing the triangular faces of the
tetrahedron gives us the desired
approximation.
Input and Interaction
void tetrahedron(int m) {
/* subdivide the tetrahedron faces */
}

137
23
Objectives
Project Sketchpad
Introduce the basic input devices
Ivan Sutherland (MIT 1963) established

the basic interactive paradigm that
characterizes interactive computer
graphics:
- Physical Devices
- Logical Devices
- Input Modes
- User sees an object on the display

- User points to (picks) the object with an input
device (light pen, mouse, trackball)
- Object changes (moves, rotates, morphs)
- Repeat
Event-driven input
Introduce double buffering for smooth
animations
Programming event input with GLUT
139
140
Graphical Input
Physical Devices
Devices can be described either by

- Physical properties
Mouse
Keyboard
Trackball
mouse
- Logical Properties
trackball
What is returned to program via API

A position
An object identifier
light pen
Modes
- How and when input is obtained
data tablet
Request or event
141
Incremental (Relative) Devices

Devices such as the data tablet return a
position directly to the operating system
Devices such as the mouse, trackball, and
joy stick return incremental inputs (or
velocities) to the operating system
- Must integrate these inputs to obtain an
absolute position
Rotation of wheels in mouse

Roll of trackball
Difficult to obtain absolute position
Can get variable sensitivity
joy stick
space ball
142
Logical Devices
Consider the C and C++ code
- C++: cin >> x;
- C: scanf (%d, &x);
What is the input device?

- Cant tell from the code
- Could be keyboard, file, output from another
program
The code provides logical input

- A number (an int) is returned to the program
regardless of the physical device
143
144
24
Graphical Logical Devices
X Window Input
Graphical input is more varied than input to

standard programs which is usually numbers,
characters, or bits
Two older APIs (GKS, PHIGS) defined six
types of logical input
The X Window System introduced a client-server

model for a network of workstations
- Client: OpenGL program
- Graphics Server: bitmap display with a pointing
device and a keyboard
Locator: return a position

Pick: return ID of an object
Keyboard: return strings of characters
Stroke: return array of positions
Valuator: return floating point number
Choice: return one of n items
145
146
Input Modes
Request Mode
Input devices contain a trigger which can

be used to send a signal to the operating
system
Input provided to program only when user

triggers the device
Typical of keyboard input
- Button on mouse
- Pressing or releasing a key
- Can erase (backspace), edit, correct until enter

(return) key (the trigger) is depressed
When triggered, input devices return

information (their measure) to the system
- Mouse returns position information
- Keyboard returns ASCII code
147
Event Mode
148
Event Types
Most systems have more than one input

device, each if which can be triggered at
an arbitrary time by a user
Each trigger generates an event whose
measure is put in an event queue which
can be examined by the user program
Window: resize, expose, iconify

Mouse: click one or more buttons
Motion: move mouse
Keyboard: press or release a key
Idle: nonevent
- Define what should be done if no other event is
in queue
149
150
25
Callbacks
GLUT callbacks
Programming interface for event-driven

input
Define a callback function for each type of
event the graphics system recognizes
This user-supplied function is executed
when the event occurs
GLUT example:
glutMouseFunc(mymouse)
GLUT recognizes a subset of the events

recognized by any particular window
system (Windows, X, Macintosh)
-glutDisplayFunc
-glutMouseFunc
-glutReshapeFunc
-glutKeyFunc
-glutIdleFunc
-glutMotionFunc,
glutPassiveMotionFunc
mouse callback function

151
GLUT Event Loop
The display callback

The display callback is executed whenever
GLUT determines that the window should be
refreshed, for example
Remember that the last line in main.c for a

program using GLUT must be
glutMainLoop();
which puts the program in an infinite event loop

In each pass through the event loop, GLUT
- looks at the events in the queue
- for each event in the queue, GLUT executes the
appropriate callback function if one is defined
- if no callback is defined for the event, the event is
ignored
When the window is first opened

When the window is reshaped
When a window is exposed
When the user program decides it wants to change the
display
In main.c
-glutDisplayFunc(mydisplay) identifies the
function to be executed
- Every GLUT program must have a display callback
153
Posting redisplays
154
Animating a Display
Many events may invoke the display callback

function
- Can lead to multiple executions of the display callback on a
single pass through the event loop
We can avoid this problem by instead using

glutPostRedisplay();
which sets a flag.

GLUT checks to see if the flag is set at the end
of the event loop
If set then the display callback function is
executed
152
155
When we redraw the display through the

display callback, we usually start by clearing
the window
-glClear()
then draw the altered display

Problem: the drawing of information in the
frame buffer is decoupled from the display of
its contents
- Graphics systems use dual ported memory
Hence we can see partially drawn display

- See the program single_double.c for an example
with a rotating cube
156
26
Double Buffering
Using the idle callback
Instead of one color buffer, we use two

- Front Buffer: one that is displayed but not written to
- Back Buffer: one that is written to but not displayed
Program then requests a double buffer in main.c

-glutInitDisplayMode(GL_RGB | GL_DOUBLE)
- At the end of the display callback buffers are swapped
void mydisplay()
{
glClear()
.
/* draw graphics here */
.
glutSwapBuffers()
void myidle() {
/* change something */
t += dt
}
Void mydisplay() {
glClear();
/* draw something that depends on t */
glutSwapBuffers();
}
}
The idle callback is executed whenever there are no

events in the event queue
-glutIdleFunc(myidle)
- Useful for animations
157
158
Using globals
The form of all GLUT callbacks is fixed
- void mydisplay()
- void mymouse(GLint button, GLint state,
GLint x, GLint y)
Working with Callbacks
Must use globals to pass information to

callbacks

float t; /* global */
void mydisplay()
{
/* draw something that depends on t
}
159
Objectives
The mouse callback
Learn to build interactive programs using

GLUT callbacks
glutMouseFunc(mymouse)
void mymouse(GLint button,
GLint state, GLint x, GLint y)
- Mouse
- Keyboard
- Reshape
Returns
- which button (GLUT_LEFT_BUTTON,
GLUT_MIDDLE_BUTTON,
GLUT_RIGHT_BUTTON) caused event
- state of that button (GLUT_UP, GLUT_DOWN)
Introduce menus in GLUT
- Position in window
161
162
27
Positioning
Obtaining the window size
The position in the screen window is usually measured

in pixels with the origin at the top-left corner
Consequence of refresh done from top to bottom
OpenGL uses a world coordinate system with origin at
the bottom left
Must invert y coordinate returned by callback by
height of window
y = h y;
(0,0)
To invert the y position we need the

window height
- Height can change during program execution
- Track with a global variable
- New height returned to reshape callback that
we will look at in detail soon
- Can also use enquiry functions
glGetIntv
glGetFloatv
to obtain any value that is part of the state

163
Terminating a program
void mouse(int btn, int state, int x, int y)

{
if(btn==GLUT_RIGHT_BUTTON && state==GLUT_DOWN)
exit(0);
}
165
Drawing squares at cursor

location
In the next example, we draw a small square

at the location of the mouse each time the left
mouse button is clicked
This example does not use the display
callback but one is required by GLUT; We can
use the empty display callback function
mydisplay(){}
166
Using the motion callback
void mymouse(int btn, int state, int x, int y)

{
if(btn==GLUT_RIGHT_BUTTON && state==GLUT_DOWN)
exit(0);
if(btn==GLUT_LEFT_BUTTON && state==GLUT_DOWN)
drawSquare(x, y);
}
void drawSquare(int x, int y)
{
y = h-y; /* invert y position */
glColor3ub( (char) rand()%256, (char) rand )%256,
(char) rand()%256); /* a random color */
glVertex2f(x+size, y+size);
glVertex2f(x-size, y+size);
glVertex2f(x-size, y-size);
glVertex2f(x+size, y-size);
glEnd();
}
164
Using the mouse position
In our original programs, there was no

way to terminate them through OpenGL
We can use the simple mouse callback
We can draw squares (or anything else)

continuously as long as a mouse button is
depressed by using the motion callback
- glutMotionFunc(drawSquare)
We can draw squares without depressing

a button using the passive motion
callback
- glutPassiveMotionFunc(drawSquare)
167
168
28
Using the keyboard
Special and Modifier Keys

GLUT defines the special keys in glut.h
glutKeyboardFunc(mykey)
Void mykey(unsigned char key,
int x, int y)
- Function key 1: GLUT_KEY_F1

- Up arrow key: GLUT_KEY_UP
if(key == GLUT_KEY_F1
- Returns ASCII code of key depressed and mouse

location
- Note GLUT does not recognize key release as an event
void mykey()
{
if(key == Q | key == q)
exit(0);
}
169
Can also check if one of the modifiers

-GLUT_ACTIVE_SHIFT
-GLUT_ACTIVE_CTRL
-GLUT_ACTIVE_ALT
is depressed by
glutGetModifiers()
- Allows emulation of three-button mouse with one- or
two-button mice
170
Reshape possibilities
Reshaping the window

We can reshape and resize the OpenGL
display window by pulling the corner of
the window
What happens to the display?
- Must redraw from application
- Two possibilities
Display part of world
Display whole world but force to fit in new window
Can alter aspect ratio
original
reshaped
171
The Reshape callback
Example Reshape
glutReshapeFunc(myreshape)
void myreshape( int w, int h)
- Returns width and height of new window (in pixels)
- A redisplay is posted automatically at end of
execution of the callback
- GLUT has a default reshape callback but you
probably want to define your own
This reshape preserves shapes by making the viewport

and world window have the same aspect ratio
The reshape callback is good place to put

camera functions because it is invoked when
the window is first opened
173
172
void myReshape(int w, int h)

{
glViewport(0, 0, w, h);
glMatrixMode(GL_PROJECTION); /* switch matrix mode */
glLoadIdentity();
if (w <= h)
gluOrtho2D(-2.0, 2.0, -2.0 * (GLfloat) h / (GLfloat) w,
2.0 * (GLfloat) h / (GLfloat) w);
else gluOrtho2D(-2.0 * (GLfloat) w / (GLfloat) h, 2.0 *
(GLfloat) w / (GLfloat) h, -2.0, 2.0);
glMatrixMode(GL_MODELVIEW); /* return to modelview mode */
}
174
29
Toolkits and Widgets
Menus
Most window systems provide a toolkit or

library of functions for building user interfaces
that use special types of windows called
widgets
Widget sets include tools such as
-
GLUT supports pop-up menus

- A menu can have submenus
Three steps
- Define entries for the menu
- Define action for each menu item
Menus
Slidebars
Dials
Input boxes
Action carried out if entry selected
- Attach menu to a mouse button
But toolkits tend to be platform dependent

GLUT provides a few widgets including menus
175
Defining a simple menu
Menu actions
In main.c
- Menu callback
menu_id = glutCreateMenu(mymenu);
glutAddmenuEntry(clear Screen, 1);
gluAddMenuEntry(exit, 2);
glutAttachMenu(GLUT_RIGHT_BUTTON);
clear screen
glutAddSubMenu(char *submenu_name, submenu id)
identifiers
void mymenu(int id)

{
if(id == 1) glClear();
if(id == 2) exit(0);
}
- Note each menu has an id that is returned when it is

created
- Add submenus by
exit
entries that appear when

right button depressed
176
entry in parent menu

177
178
Other functions in GLUT

Dynamic Windows
Better Interactive Programs
- Create and destroy during execution
Subwindows
Multiple Windows
Changing callbacks during execution
Timers
Portable fonts

-glutBitmapCharacter
-glutStrokeCharacter
179
30
Objectives
Picking
Identify a user-defined object on the display
In principle, it should be simple because the
mouse gives the position and we should be able
to determine to which object(s) a position
corresponds
Practical difficulties
Learn to build more sophisticated

interactive programs using
- Picking
Select objects from the display
Three methods
- Rubberbanding
Interactive drawing of lines and rectangles
- Pipeline architecture is feed forward, hard to go from

screen back to world
- Complicated by screen being 2D, world is 3D
- How close do we have to come to object to say we
selected it?
- Display Lists
Retained mode graphics
181
Three Approaches
182
Rendering Modes
Hit list
OpenGL can render in one of three modes

selected by glRenderMode(mode)
- Most general approach but most difficult to

implement
-GL_RENDER: normal rendering to the frame buffer
(default)
Use back or some other buffer to store

object ids as the objects are rendered
Rectangular maps
-GL_FEEDBACK: provides list of primitives rendered
- Easy to implement for many applications

- See paint program in text
generates a hit record that is placed in a name

stack which can be examined later
but no output to the frame buffer

-GL_SELECTION: Each primitive in the view volume
183
184
Selection Mode Functions
Using Selection Mode
glSelectBuffer(): specifies name buffer
Initialize name buffer

Enter selection mode (using mouse)
Render scene with user-defined identifiers
Reenter normal render mode
glInitNames(): initializes name buffer

glPushName(id): push id on name buffer
glPopName(): pop top of name buffer
glLoadName(id): replace top name on
- This operation returns number of hits
buffer
id is set by application program to identify
objects
185
Examine contents of name buffer (hit

records)
- Hit records include id and depth information
186
31
Selection Mode and Picking
Example: Picking
As we just described it, selection mode

wont work for picking because every
primitive in the view volume will generate
a hit
Change the viewing parameters so that
only those primitives near the cursor are
in the altered view volume
In this example, we use picking to select

rectangles using the mouse.
- Use gluPickMatrix (see text for details)
187
Assigning Object Names
188
Initializing Select Mode
void drawSquares(GLenum mode) {

GLuint i, j;
2 names
for(i=0; i<3; i++) {
if(mode == GL_SELECT) glLoadName(i);
/* selection buffer */
/* window dimensions */
/* hit count
*/
glGetIntegerv(GL_VIEWPORT, viewport);
glSelectBuffer(BUFSIZE, buf);
(void) glRenderMode(GL_SELECT);
glInitNames();
results go here
glPushName(0);
}
}
This code segment belongs in the mouse

handler (or in a function called by the
mouse handler).
GLuint buf[BUFSIZE];
GLint viewport[4];
int hits;
for(j=0; j<3; j++) {

if(mode == GL_SELECT) glPushName(j);
glColor3fv((GLfloat) colors[i][j]);
glRecti(i, j, i+1, j+1);
if(mode == GL_SELECT) glPopName();
}
189
Drawing in Select Mode
190
Processing Hits
hits = glRenderMode(GL_RENDER);
ptr = (GLuint *) buf;
for(i=0; i<hits; i++) { /* for each hit */
names = *ptr; ptr++; /* how many names? */
z1 = (float) *ptr/0x7fffffff); ptr++;
z2 = (float) *ptr/0x7fffffff); ptr++;
for(j=0; j<names; j++) { /* for each name */
if(j == 0)
ii = *ptr; /* set row
*/
else if(j == 1)
jj = *ptr; /* set column */
ptr++;
}
}
glPushMatrix();
glLoadIdentity();
/* 5x5 picking region near cursor */
gluPickMatrix((GLdouble) x,
(GLdouble) (viewport[3] - y),
5.0, 5.0, viewport);
gluOrtho2D(0.0, 3.0, 0.0, 3.0);
drawSquares(GL_SELECT);
glPopMatrix();
same as reshape
glFlush();
Choose the smallest z.

191
192
32
Using another buffer and

colors for picking
Using Regions of the Screen

Many applications use a simple rectangular
arrangement of the screen
For a small number of objects, we can assign

a unique color (often in color index mode) to
each object
We then render the scene to a color buffer
other than the front buffer so the results of the
rendering are not visible
We then get the mouse position and use
glReadPixels() to read the color in the buffer
we just wrote at the position of the mouse
The returned color gives the id of the object
- Example: paint/CAD program
tools
drawing area
menus
Easier to look at mouse position and

determine which area of screen it is in that
using selection mode picking
193
Writing Modes
application
194
XOR write
Usual (default) mode: source replaces
destination (d = s)
bitwise logical operation
- Cannot write temporary lines this way because

we cannot recover what was under the line in
a fast simple way
Exclusive OR mode (XOR) (d = d s)

- x y x =x
- Hence, if we use XOR mode to write a line, we
can draw it a second time and line is erased!
frame buffer
195
Rubberbanding
Rubberband Lines
Switch to XOR write mode

Draw object
second point
- For line can use first mouse click to fix one

endpoint and then use motion callback to
continuously update the second endpoint
- Each time mouse is moved, redraw line which
erases it and then draw line from fixed first
position to to new second position
- At end, switch back to normal drawing mode
and draw line
- Works for other objects: rectangles, circles
196
first point
initial display
draw line with mouse

in XOR mode
mouse moved to original line redrawn new line drawn

with XOR
new position
with XOR
197
198
33
XOR in OpenGL
Example: Erasing Lines
There are 16 possible logical operations

between two bits
All are supported by OpenGL
In this example, we use the XOR drawing

mode to draw erasable line segments.
The user selects the first endpoint using
the mouse.
- Must first enable logical operations

glEnable(GL_COLOR_LOGIC_OP)
/* global variables */
float xm, ym, xmm, ymm;
- Choose logical operation

glLogicOp(GL_XOR)
glLogicOp(GL_COPY) (default)
/* in mouse handler */
xm = x/500.;
ym = (500 - y)/500.;
199
XOR Drawing Mode
200
Erasing the Line
When the user selects a second point,

draw the line in XOR mode.
Redraw the old line in XOR mode before

retrieving new coordinates.
glLogicOp(GL_XOR);
glBegin(GL_LINES);
glVertex2f(xm, ym);
glVertex2f(xmm, ymm);
glEnd();
glFlush();
xmm = x/500.;
ymm = (500 - y)/500.;
glBegin(GL_LINES);
...
glLogicOp(GL_COPY);
xmm = x/500.;
ymm = (500 - y)/500.;
glLogicOp(GL_XOR);
glBegin(GL_LINES);
glVertex2f(xm, ym);
glVertex2f(xmm, ymm);
glEnd();
glLogicOp(GL_COPY);
glFlush();
201
Immediate and Retained Modes

Recall that in a standard OpenGL program,
once an object is rendered there is no memory
of it and to redisplay it, we must re-execute the
code for it
- Known as immediate mode graphics
- Can be especially slow if the objects are complex and
must be sent over a network
202
Display Lists
Conceptually similar to a graphics file
- Must define (name, create)
- Add contents
- Close
In client-server environment, display list is

placed on server
Alternative is define objects and keep them in

some form that can be redisplayed easily
- Can be redisplayed without sending primitives

over network each time
- Retained mode graphics

- Accomplished in OpenGL via display lists
203
204
34
Display List Functions
Display Lists and State
Creating a display list
Most OpenGL functions can be put in

display lists
State changes made inside a display list
persist after the display list is executed
Can avoid unexpected results by using
glPushAttrib and glPushMatrix upon
entering a display list and glPopAttrib
and glPopMatrix before exiting
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 );
}
205
206
Hierarchy and Display Lists

Consider model of a car
Geometry
- Create display list for chassis

- Create display list for wheel

glNewList( CAR, GL_COMPILE );

glCallList( CHASSIS );
glTranslatef( );
glCallList( WHEEL );
glTranslatef( );
glCallList( WHEEL );
glEndList();
207
Objectives
Basic Elements
Geometry is the study of the relationships
among objects in an n-dimensional space
Introduce the elements of geometry

- Scalars
- Vectors
- Points
- In computer graphics, we are interested in objects that

exist in three dimensions
Want a minimum set of primitives from which

we can build more sophisticated objects
We will need three basic elements
Develop mathematical operations among

them in a coordinate-free manner
Define basic primitives
- Scalars
- Vectors
- Points
- Line segments
- Polygons
209
210
35
Coordinate-Free Geometry
Scalars
When we learned simple geometry, most of us started

with a Cartesian approach
- Points were at locations in space p=(x,y,z)
- We derived results by algebraic manipulations
involving these coordinates
This approach was nonphysical
- Physically, points exist regardless of the location of
an arbitrary coordinate system
- Most geometric results are independent of the
coordinate system
- Euclidean geometry: two triangles are identical if
two corresponding sides and the angle between
them are identical
211
Need three basic elements in geometry

- Scalars, Vectors, Points
Scalars can be defined as members of sets

which can be combined by two operations
(addition and multiplication) obeying some
fundamental axioms (associativity,
commutivity, inverses)
Examples include the real and complex
number under the ordinary rules with which we
are familiar
Scalars alone have no geometric properties
Vectors
Vector Operations
Every vector has an inverse
- Same magnitude but points in opposite direction
Every vector can be multiplied by a scalar
There is a zero vector
- Zero magnitude, undefined orientation
The sum of any two vectors is a vector
- Use head-to-tail axiom
Physical definition: a vector is a quantity

with two attributes
- Direction
- Magnitude
Examples include
- Force
- Velocity
- Directed line segments
Most important example for graphics

Can map to other types
212
-v
v
u
213
Linear Vector Spaces
214
Vectors Lack Position
Mathematical system for manipulating vectors

Operations
These vectors are identical

- Same length and magnitude
- Scalar-vector multiplication u=v

- Vector-vector addition: v=u+w
Expressions such as
v=u+2w-3r
Make sense in a vector space

Vectors spaces insufficient for geometry
- Need points
215
216
36
Points
Affine Spaces
Location in space
Operations allowed between points and
vectors
Point + a vector space

Operations
- Vector-vector addition
- Scalar-vector multiplication
- Point-vector addition
- Scalar-scalar operations
- Point-point subtraction yields a vector

- Equivalent to point-vector addition
v=P-Q
For any point define

-1P=P
- 0 P = 0 (zero vector)
P=v+Q
217
218
Lines
Parametric Form
This form is known as the parametric form
of the line
Consider all points of the form

- P()=P0 + d
- Set of all points that pass through P0 in the
direction of the vector d
- More robust and general than other forms

- Extends to curves and surfaces
Two-dimensional forms
- Explicit: y = mx +b
- Implicit: ax + by +c =0
- Parametric:
x() = x0 + (1-)x1
y() = y0 + (1-)y1
219
220
Rays and Line Segments
Convexity
If >= 0, then P() is the ray leaving P0 in

the direction d
If we use two points to define v, then
P( ) = Q + (R-Q)=Q+v
=R + (1-)Q
For 0<=<=1 we get all the
points on the line segment
joining R and Q
An object is convex iff for any two points

in the object all points on the line segment
between these points are also in the
object
221
P
P
222
37
Affine Sums
Convex Hull
Consider the sum

P=1P1+2P2+..+nPn
Can show by induction that this sum makes
sense iff
1+2+..n=1
in which case we have the affine sum of
the points P1,P2,..Pn
If, in addition, i>=0, we have the convex
hull of P1,P2,..Pn
Smallest convex object containing P1,P2,..Pn

Formed by shrink wrapping points
223
224
Curves and Surfaces
Planes
Curves are one parameter entities of the

form P() where the function is nonlinear
Surfaces are formed from two-parameter
functions P(, )
A plane be determined by a point and two

vectors or by three points
- Linear functions give planes and polygons
P(,)=R+u+v
P(, )
P()
225
Triangles
P(,)=R+(Q-R)+(P-Q)
226
Normals
Every plane has a vector n normal
(perpendicular, orthogonal) to it
convex sum of S() and R
convex sum of P and Q
From point-two vector form P(,)=R+u+v, we

know we can use the cross product to find
n = u v and the equivalent form
(P()-P) n=0
v
for 0<=,<=1, we get all points in triangle

P
227
u
228
38
Objectives
Introduce concepts such as dimension
and basis
Introduce coordinate systems for
representing vectors spaces and frames
for representing affine spaces
Discuss change of frames and basis
Introduce homogeneous coordinates
Representation
230
Linear Independence
Dimension
A set of vectors v1, v2, , vn is linearly

independent if
v1+v2+..vn=0 iff 1=2==0
If a set of vectors is linearly independent,
we cannot represent one in terms of the
others
If a set of vectors is linearly dependent, as
least one can be written in terms of the
others
In a vector space, the maximum number of

linearly independent vectors is fixed and is
called the dimension of the space
In an n-dimensional space, any set of n
linearly independent vectors form a basis for
the space
Given a basis v1, v2,., vn, any vector v can be
written as
v=1v1+ 2v2 +.+nvn
where the {i} are unique
231
Representation
Coordinate Systems
Until now we have been able to work with

geometric entities without using any frame
of reference, such a coordinate system
Need a frame of reference to relate points
and objects to our physical world.
- For example, where is a point? Cant answer
without a reference system
- World coordinates
- Camera coordinates
232
Consider a basis v1, v2,., vn

A vector is written v=1v1+ 2v2 +.+nvn
The list of scalars {1, 2, . n}is the
representation of v with respect to the given
basis
We can write the representation as a row or
column array of scalars

T 2
a=[1 2 . n] = .

n

233
234
39
Example
Coordinate Systems
V=2v1+3v2-4v3
A=[2 3 4]
Note that this representation is with
respect to a particular basis
For example, in OpenGL we start by
representing vectors using the world
basis but later the system needs a
representation in terms of the camera or
eye basis
Which is correct?
v
v
Both are correct because vectors have no

fixed location
235
Frames
Frames II
Coordinate System is insufficient to

present points
If we work in an affine space we can add
a single point, the origin, to the basis
vectors to form a frame
v2
236
Frame determined by (P0, v1, v2, v3)

Within this frame, every vector can be
written as
v=1v1+ 2v2 +.+nvn
Every point can be written as
P = P0 + 1v1+ 2v2 +.+nvn
v1
P0
v3
237
Confusing Points and Vectors

Consider the point and the vector
238
A Single Representation
If we define 0P = 0 and 1P =P then we can
write
P = P0 + 1v1+ 2v2 +.+nvn

v=1v1+ 2v2 +.+nvn
They appear to have the similar representations
v=[1 2 3]
p=[1 2 3]
v
which confuse the point with the vector
p
A vector has no position
v
v=1v1+ 2v2 +3v3 = [1 2 3 0 ] [v1 v2 v3 P0] T

P = P0 + 1v1+ 2v2 +3v3= [1 2 3 1 ] [v1 v2 v3 P0]
T
Thus we obtain the four-dimensional
homogeneous coordinate representation
v = [1 2 3 0 ] T
p = [ 1 ] T
can place anywhere

fixed
239
240
40
Homogeneous Coordinates
and Computer Graphics
Homogeneous Coordinates
The general form of four dimensional homogeneous
coordinates is
p=[x y z w] T
We return to a three dimensional point (for w0) by
xx/w
yy/w
zz/w
If w=0, the representation is that of a vector
Note that homogeneous coordinates replaces points in
three dimensions by lines through the origin in four
dimensions
Homogeneous coordinates are key to all

computer graphics systems
- All standard transformations (rotation,
translation, scaling) can be implemented by
matrix multiplications with 4 x 4 matrices
- Hardware pipeline works with 4 dimensional
representations
- For orthographic viewing, we can maintain w=0
for vectors and w=1 for points
- For perspective we need a perspective division
241
242
Change of Coordinate
Systems
Representing second
basis in terms of first
Consider two representations of a the

same vector with respect to two different
bases. The representations are
Each of the basis vectors, u1,u2, u3, are vectors

that can be represented in terms of the first
basis
v
a=[1 2 3 ]
b=[1 2 3]
u1 = 11v1+12v2+13v3
u2 = 21v1+22v2+23v3
u3 = 31v1+32v2+33v3
where
v=1v1+ 2v2 +3v3 = [1 2 3] [v1 v2 v3] T

= u + u + u = [ ] [u u u ] T
1 1
2 2
3 3
243
Change of Frames
Matrix Form
The coefficients define a 3 x 3 matrix
11 12 13
M = 21 22 23
31 32 33
We can apply a similar process in

homogeneous coordinates to the
representations of both points anduvectors
1
v2
Consider two frames
P0
v3
a=MTb
u2
Q0
(P0, v1, v2, v3)

(Q0, u1, u2, u3)
and the basis can be related by
v1
u3
Any point or vector can be represented in each
see text for numerical examples

244
245
246
41
Representing One Frame in

Terms of the Other
Working with Representations

Within the two frames any point or vector has a
representation of the same form
Extending what we did with change of bases
u1 = 11v1+12v2+13v3
u2 = 21v1+22v2+23v3
u3 = 31v1+32v2+33v3
Q0 = 41v1+42v2+43v3 +44P0
defining a 4 x 4 matrix
11
21
M=
31
41
a=[1 2 3 4 ] in the first frame

b=[ 1 2 3 4 ] in the second frame
12
13
22
32
23
33
42
43
where 4 = 4 = 1 for points and 4 = 4 = 0 for vectors
0
0
0
and
a=MTb
The matrix M is 4 x 4 and specifies an affine

transformation in homogeneous coordinates
247
248
Affine Transformations
The World and Camera

Frames
Every linear transformation is equivalent

to a change in frames
Every affine transformation preserves
lines
However, an affine transformation has
only 12 degrees of freedom because 4 of
the elements in the matrix are fixed and
are a subset of all possible 4 x 4 linear
transformations
When we work with representations, we work

with n-tuples or arrays of scalars
Changes in frame are then defined by 4 x 4
matrices
In OpenGL, the base frame that we start with
is the world frame
Eventually we represent entities in the camera
frame by changing the world representation
using the model-view matrix
Initially these frames are the same (M=I)
249
250
Moving the Camera

If objects are on both sides of z=0, we must move
camera frame
M=
1
0
0
0
0 1 d
0 0 1
0 0
Transformations
1 0

251
42
Objectives
General Transformations
Introduce standard transformations
A transformation maps points to other

points and/or vectors to other vectors
- Rotations
- Translation
- Scaling
- Shear
v=T(u)
Derive homogeneous coordinate

transformation matrices
Learn to build arbitrary transformation
matrices from simple transformations
Q=T(P)
253
Affine Transformations
Pipeline Implementation
Line preserving
Characteristic of many physically
important transformations
T (from application program)
- Rigid body transformations: rotation, translation

- Scaling, shear
Importance in graphics is that we need

only transform endpoints of line segments
and let implementation draw line segment
between the transformed endpoints
255
frame
buffer
T(u)
transformation
rasterizer
T(v)
T(v)
T(v)
T(u)
u
vertices
T(u)
vertices
pixels
Notation
We will be working with both coordinate-free
representations of transformations and
representations within a particular frame
P,Q, R: points in an affine space
u, v, w: vectors in an affine space
, , : scalars
p, q, r: representations of points
-array of 4 scalars in homogeneous
coordinates
u, v, w: representations of points
-array of 4 scalars in homogeneous
coordinates
254
256
Translation
Move (translate, displace) a point to a
new location
P
d
P
Displacement determined by a vector d

- Three degrees of freedom
- P=P+d
257
258
43
Translation Using
Representations
Object Translation
Every point in object is displaced by same vector
object
Object translation
259
Translation Matrix
Consider rotation about the origin by degrees

- radius stays the same, angle increases by
x = r cos ( + )
y = r sin ( + )
0 0 dx
1 0 dy
0 1 dz
0 0 1
x = x cos y sin
y = x sin + y cos
x = r cos
y = r sin
This form is better for implementation because all affine

transformations can be expressed this way and
multiple transformations can be concatenated together
260
Rotation (2D)
We can also express translation using a

4 x 4 matrix T in homogeneous coordinates
p=Tp where
1
0
T = T(dx, dy, dz) = 0
Using the homogeneous coordinate

representation in some frame
p=[ x y z 1]T
p=[x y z 1]T
d=[dx dy dz 0]T
Hence p = p + d or
note that this expression is in
x=x+dx
four dimensions and expresses
y=y+dy
that point = vector + point
z=z+dz
261
Rotation about the z-axis
262
Rotation Matrix
Rotation about z axis in three dimensions leaves

all points with the same z
- Equivalent to rotation in two dimensions in
planes of constant z
x = x cos y sin
y = x sin + y cos
z = z
cos sin
cos
0
0
0
0
R = Rz() = sin
0 0
0 0
1 0
0 1
- or in homogeneous coordinates
p=Rz()p
263
264
44
Rotation about x and y axes
Scaling
Expand or contract along each axis (fixed point of origin)
Same argument as for rotation about z-axis

- For rotation about x-axis, x is unchanged
- For rotation about y-axis, y is unchanged
0
0
0
1
0 cos - sin 0
R = Rx() = 0 sin cos 0
0
0
1
0
x=sxx
y=syy
z=szz
p=Sp
cos
0 sin 0
1
0
0
- sin 0 cos 0
0
0
1
0
S = S(sx, sy, sz) =
R = Ry() = 0
265
0
0
sz
0
0
1
266
Inverses
Although we could compute inverse matrices
by general formulas, we can use simple
geometric observations
corresponds to negative scale factors

sx = -1 sy = 1
original
sx = -1 sy = -1
sx = 1 sy = -1
- Translation: T-1(dx, dy, dz) = T(-dx, -dy, -dz)

- Rotation: R -1() = R(-)
Holds for any rotation matrix
Note that since cos(-) = cos() and sin(-)=-sin()
R -1() = R T()
- Scaling: S-1(sx, sy, sz) = S(1/sx, 1/sy, 1/sz)

267
Concatenation
268
Order of Transformations
We can form arbitrary affine transformation

matrices by multiplying together rotation,
translation, and scaling matrices
Because the same transformation is applied to
many vertices, the cost of forming a matrix
M=ABCD is not significant compared to the
cost of computing Mp for many vertices p
The difficult part is how to form a desired
transformation from the specifications in the
application
0
sy
0
Reflection
sx
0
269
Note that matrix on the right is the first

applied
Mathematically, the following are
equivalent
p = ABCp = A(B(Cp))
Note many references use column
matrices to present points. In terms of
column matrices
pT = pTCTBTAT
270
45
General Rotation About

the Origin
Rotation About a Fixed

Point other than the Origin
Move fixed point to origin
Rotate
Move fixed point back
M = T(-pf) R() T(pf)
A rotation by about an arbitrary axis

can be decomposed into the concatenation
of rotations about the x, y, and z axes
R() = Rz(z) Ry(y) Rx(x)

y
x y z are called the Euler angles

Note that rotations do not commute
We can use rotations in another order but
with different angles
v
x
271
272
Instancing
Shear
In modeling, we often start with a simple

object centered at the origin, oriented with
the axis, and at a standard size
We apply an instance transformation to its
vertices to
Helpful to add one more basic transformation

Equivalent to pulling faces in opposite directions
Scale
Orient
Locate
273
274
Example: Plotting a
Function
Shear Matrix
Consider simple shear along x axis
Draw a dot plot for the following function:
f ( x ) = e x cos 2 x for 0 x 4.
x = x + y cot
y = y
z = z
1 cot
0
1
H() =
0
0
0
0
0 0
0 0
1 0
0 1
275
276
46
Viewport Transformation
Scale and Translation
Use a linear transformation to fit the

function in the window:
A B w / 4 0
C D = h / 2 h / 2

A B x x
C D y = y .
A
B
C
D
Translates the origin to the center of the

window.
Scales the drawing to fit.
=
=
=
=
screenWidth / 4.0;
0.0;
screenHeight / 2.0;
C;
glBegin(GL_POINTS);
for(x = 0.0; x <= 4.0; x += 0.005)
glVertex2f(A*x + B, C*f(x) + D);
glEnd();
277
278
Objectives
Learn how to carry out transformations in
OpenGL
OpenGL Transformations
- Rotation
- Translation
- Scaling

Introduce OpenGL matrix modes

- Model-view
- Projection
280
Current Transformation
Matrix (CTM)
OpenGL Matrices
Conceptually there is a 4 x 4 homogeneous

coordinate matrix, the current transformation
matrix (CTM) that is part of the state and is
applied to all vertices that pass down the
pipeline
The CTM is defined in the user program and
loaded into a transformation unit
In OpenGL matrices are part of the state

Three types
- Model-View (GL_MODEL_VIEW)
- Projection (GL_PROJECTION)
- Texture (GL_TEXTURE) (ignore for now)
Single set of functions for manipulation

Select which to manipulated by
-glMatrixMode(GL_MODEL_VIEW);
-glMatrixMode(GL_PROJECTION);
p=Cp
vertices
281
CTM
vertices
282
47
Rotation about a Fixed Point
CTM operations
The CTM can be altered either by loading a new
CTM or by postmultiplication
Load an identity matrix: C I
Load an arbitrary matrix: C M
Result: C = T -1RT
Load a translation matrix: C T

Load a rotation matrix: C R
Load a scaling matrix: C S
Each operation corresponds to one function call in the

program.
Postmultiply by an arbitrary matrix: C CM

Postmultiply by a translation matrix: C CT
Postmultiply by a rotation matrix: C C R
Postmultiply by a scaling matrix: C C S
Start with identity matrix: C I

Move fixed point to origin: C CT -1
Rotate: C CR
Move fixed point back: C CT
Note that the last operation specified is the first

executed in the program
283
CTM in OpenGL
284
Rotation, Translation, Scaling
OpenGL has a model-view and a

projection matrix in the pipeline which are
concatenated together to form the CTM
Can manipulate each by first setting the
matrix mode
Load an identity matrix:

glLoadIdentity()
Multiply on right:
glRotatef(theta, vx, vy, vz)
theta in degrees, (vx, vy, vz) define axis of rotation
glTranslatef(dx, dy, dz)
glScalef( sx, sy, sz)
Each has a float (f) and double (d) format (glScaled)

285
286
Example
Arbitrary Matrices
Rotation about z-axis by 30 degrees with

a fixed point of (1.0, 2.0, 3.0)
Can load and multiply by matrices defined

in the application program
glLoadMatrixf(m)
glMultMatrixf(m)
glLoadIdentity();
glTranslatef(1.0, 2.0, 3.0);
glRotatef(30.0, 0.0, 0.0, .10);
glTranslatef(-1.0, -2.0, -3.0);
Remember that last matrix specified in the

program is the first applied
287
The matrix m is a one dimension array of

16 elements which are the components of
the desired 4 x 4 matrix stored by columns
In glMultMatrixf, m multiplies the existing
matrix on the right
288
48
Matrix Stacks
Reading Back Matrices

Can also access matrices (and other parts of the
state) by enquiry (query) functions
In many situations we want to save

transformation matrices for use later
- Traversing hierarchical data structures (Chapter 9)
- Avoiding state changes when executing display lists
OpenGL maintains stacks for each type of

matrix
- Access present type (as set by glMatrixMode) by
glPushMatrix()
glPopMatrix()
glGetIntegerv
glGetFloatv
glGetBooleanv
glGetDoublev
glIsEnabled
For matrices, we use as

double m[16];
glGetFloatv(GL_MODELVIEW, m);
289
Using Transformations
main.c
Example: use idle function to rotate a cube and

mouse function to change direction of rotation
void main(int argc, char **argv)

{
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB |
GLUT_DEPTH);
glutCreateWindow("colorcube");
glutReshapeFunc(myReshape);
glutDisplayFunc(display);
glutIdleFunc(spinCube);
glutMouseFunc(mouse);
glEnable(GL_DEPTH_TEST);
glutMainLoop();
}
Start with a program that draws a cube

(colorcube.c) in a standard way
- Centered at origin
- Sides aligned with axes
- Will discuss modeling in next lecture
291
Idle and Mouse callbacks
292
Display callback
void spinCube()
{
theta[axis] += 2.0;
if( theta[axis] > 360.0 ) theta[axis] -= 360.0;
}
void mouse(int btn, int state, int x, int y)
{
if(btn==GLUT_LEFT_BUTTON && state == GLUT_DOWN)
axis = 0;
if(btn==GLUT_MIDDLE_BUTTON && state == GLUT_DOWN)
axis = 1;
if(btn==GLUT_RIGHT_BUTTON && state == GLUT_DOWN)
axis = 2;
}
290
293
void display()
{
glLoadIdentity();
glRotatef(theta[0], 1.0, 0.0,
colorcube();
glutSwapBuffers();
}
GL_DEPTH_BUFFER_BIT);
0.0);
0.0);
1.0);
Note that because of fixed from of callbacks, variables

such as theta and axis must be defined as globals
Camera information is in standard reshape callback
294
49
Using the Model-View Matrix
Example: Solar System
In OpenGL the model-view matrix is used to

- Position the camera
Can be done by rotations and translations but is often
easier to use gluLookAt (Chapter 5)
- Build models of objects
The projection matrix is used to define the view

volume and to select a camera lens
Although both are manipulated by the same functions,
we have to be careful because incremental changes
are always made by postmultiplication
This example demonstrates how to

combine transformations.
Planets rotate on their axes and also orbit
the sun.
When issuing transformation commands,
the order is significant.
- For example, rotating model-view and projection matrices by

the same matrix are not equivalent operations.
Postmultiplication of the model-view matrix is equivalent to
premultiplication of the projection matrix
295
Motion Control
296
The Keyboard Handler
Use global variables to keep track of the

planet's orbit.
static int year = 0, day = 0;
Update the orbital state in response to events

such as keyboard input.
switch(key) {
case 'd': day = (day + 10) % 360;
break;
case 'y': year = (year + 5) % 360;
...
297
Viewing Parameters
void keyboard(unsigned char key, int x, int y) {

switch(key) {
case d:
day = (day + 10) % 360;
break;
case D:
day = (day 10) % 360;
break;
case y:
year = (year + 5) % 360;
break;
case Y:
year = (year 5) % 360;
break;
default:
break;
}
298
}
The Reshape Handler
Set up a perspective projection in the reshape

handler.
glLoadIdentity();
gluPerspective(60.0, (float) w/h, 1.0, 20.0);
Since the camera is stationary, we can set up

the model-view matrix here as well.
void reshape()
{
glLoadIdentity();
gluPerspective(60.0, (float) w/h, 1.0, 20.0);
glLoadIdentity();
gluLookAt(0., 0., 5., 0., 0., 0., 0., 1., 0.);
}
glLoadIdentity();
gluLookAt(0., 0., 5., 0., 0., 0., 0., 1., 0.);
299
300
50
Ordering the
Transformations
The Display Handler
An initial rotation around the sun is

determined by the time of year.
Translation along the x-axis moves the
planet to the correct spot along its orbit.
A second rotation based on the time of
day rotates the local coordinate axis.
void display(void) {
glClear (GL_COLOR_BUFFER_BIT);
glColor3f(1.0, 1.0, 1.0);
draw sun at origin
glPushMatrix ();
glutWireSphere(1.0, 20, 16);
glRotatef
((GLfloat) year, 0.0, 1.0, 0.0);
glTranslatef (2.0, 0.0, 0.0);
glRotatef
((GLfloat) day, 0.0, 1.0, 0.0);
glutWireSphere(0.2, 10, 8);
glPopMatrix
();
glutSwapBuffers();
}
301
Putting It All Together
302
Smooth Rotation
void init(void) {
glClearColor(0., 0., 0., 0.);
glShadeModel(GL_FLAT);
}
From a practical standpoint, we are often want

to use transformations to move and reorient an
object smoothly
int main(int argc, char** argv)

{
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100, 100);
glutCreateWindow(argv[0]);
init();
glutDisplayFunc (display);
glutReshapeFunc (reshape);
glutKeyboardFunc(keyboard);
glutMainLoop();
return 0;
}
303
Incremental Rotation
- Problem: find a sequence of model-view

matrices M0,M1,..,Mn so that when they are
applied successively to one or more objects we
see a smooth transition
For orientating an object, we can use the fact

that every rotation corresponds to part of a
great circle on a sphere
- Find the axis of rotation and angle
- Virtual trackball (see text)
304
Quaternions
Extension of imaginary numbers from two to
three dimensions
Requires one real and three imaginary
components i, j, k
q=q0+q1i+q2j+q3k
Consider the two approaches

- For a sequence of rotation matrices
R0,R1,..,Rn , find the Euler angles for each
and use Ri= Riz Riy Rix
Not very efficient
- Use the final positions to determine the axis

and angle of rotation, then increment only the
angle
Quaternions can express rotations on sphere

smoothly and efficiently. Process:
- Model-view matrix quaternion
- Carry out operations with quaternions
- Quaternion Model-view matrix
Quaternions can be more efficient than either
draw planet after

applying transformations
305
306
51
Interfaces
One of the major problems in interactive
computer graphics is how to use twodimensional devices such as a mouse to
interface with three dimensional objects
Example: how to form an instance matrix?
Some alternatives
Building Models
- Virtual trackball
- 3D input devices such as the spaceball
- Use areas of the screen
Distance from center controls angle, position, scale
depending on mouse button depressed
307
Objectives
Representing a Mesh
Consider a mesh e2
Introduce simple data structures for

building polygonal models
v6
- Vertex lists
- Edge lists
e1
v1
OpenGL vertex arrays
e6
e9
v5
e3
e8 v
v4
8
e11
e10
e4
e7 v7
v2 e12
v3
e5
There are 8 nodes and 12 edges

- 5 interior polygons
- 6 interior (shared) edges
Each vertex has a location vi = (xi yi zi)

309
310
Inward and Outward

Facing Polygons
Simple Representation
List all polygons by their geometric
locations
Leads to OpenGL code such as
The order {v0, v1, v2, v3} and {v1, v2, v3, v0} are
equivalent in that the same polygon will be rendered
by OpenGL but the order {v3, v2, v1, v0} is different
The first two describe inwardly
facing polygons
Use the right-hand rule =
counter-clockwise encirclement
of outward-pointing normal
OpenGL treats inward and
outward facing polygons differently
glVertex3f(x1, y1, z1);
glEnd();
Inefficient and unstructured

- Consider moving a vertex to a new locations
311
312
52
Geometry vs Topology
Vertex Lists
Generally it is a good idea to look for data

structures that separate the geometry
from the topology
- Geometry: locations of the vertices
- Topology: organization of the vertices and
edges
- Example: a polygon is an ordered list of
vertices with an edge connecting successive
pairs of vertices and the last to the first
- Topology holds even if geometry changes
313
Put the geometry in an array

Use pointers from the vertices into this array
Introduce a polygon list
x1 y1 z1
v1
x2 y2 z2
P1
v7
x3 y3 z3
P2
v6
x4 y4 z4
P3
x5 y5 z5.
P4
v8
x6 y6 z6
P5
v5
v6
x7 y7 z7
topology
geometry x8 y8 z8
Shared Edges
Edge List
Vertex lists will draw filled polygons

correctly but if we draw the polygon by its
edges, shared edges are drawn twice
Can store mesh by edge list

314
315
e2
e1
e2
e3
e4
e5
e6
e7
e8
e9
v1
v6
x1 y1 z1
x2 y2 z2
x3 y3 z3
x4 y4 z4
x5 y5 z5.
x6 y6 z6
x7 y7 z7
x8 y8 z8
v6
e1
v1
e6
e9
v5
e3
e8 v
8
e11
e10
v
e4
e7
7
e
v2 12
v3
e5
Note polygons are

not represented
316
Drawing a polygon from a

list of indices
Modeling a Cube
Draw a quadrilateral from a list of indices into the

array vertices and use color corresponding to
first index
Model a color cube for rotating cube program

Define global arrays for vertices and colors
GLfloat vertices[][3] = {{-1.0,-1.0,-1.0},{1.0,-1.0,-1.0},
{1.0,1.0,-1.0}, {-1.0,1.0,-1.0}, {-1.0,-1.0,1.0},
{1.0,-1.0,1.0}, {1.0,1.0,1.0}, {-1.0,1.0,1.0}};
GLfloat colors[][3] = {{0.0,0.0,0.0},{1.0,0.0,0.0},

{1.0,1.0,0.0}, {0.0,1.0,0.0}, {0.0,0.0,1.0},
{1.0,0.0,1.0}, {1.0,1.0,1.0}, {0.0,1.0,1.0}};
void polygon(int a, int b, int c, int d)

{
glColor3fv (colors [a]);
glVertex3fv(vertices[a]);
glVertex3fv(vertices[b]);
glVertex3fv(vertices[c]);
glVertex3fv(vertices[d]);
glEnd();
}
317
318
53
Draw cube from faces

void colorcube( )
{
polygon(0,3,2,1);
polygon(2,3,7,6);
polygon(0,4,7,3);
polygon(1,2,6,5);
polygon(4,5,6,7);
polygon(0,1,5,4);
}
Efficiency
The weakness of our approach is that we
are building the model in the application
and must do many function calls to draw
the cube
Drawing a cube by its faces in the most
straight forward way requires
6
2
4
0
- 6 glBegin, 6 glEnd
- 6 glColor
- 24 glVertex
- More if we use texture and lighting
Note that vertices are ordered so that

we obtain correct outward facing normals
319
320
Vertex Arrays
Initialization
OpenGL provides a facility called vertex arrays

that allow us to store array data in the
implementation
Six types of arrays supported
Using the same color and vertex data, first we

enable
glEnableClientState(GL_COLOR_ARRAY);
glEnableClientState(GL_VERTEX_ARRAY);
Identify location of arrays
Vertices
Colors
Color indices
Normals
Texture coordinates
Edge flags
glVertexPointer(3, GL_FLOAT, 0, vertices);
data array
3d arrays
stored as floats
data contiguous
glColorPointer(3, GL_FLOAT, 0, colors);
We will need only colors and vertices

321
322
Mapping indices to faces
Drawing the cube

Method 1:
Form an array of face indices

GLubyte cubeIndices[24] = {0,3,2,1,2,3,7,6
0,4,7,3,1,2,6,5,4,5,6,7,0,1,5,4};
Each successive four indices describe a

face of the cube
Draw through glDrawElements which
replaces all glVertex and glColor calls in
the display callback
what to draw
number of indices
for(i=0; i<6; i++) glDrawElements(GL_POLYGON, 4,

GL_UNSIGNED_BYTE, &cubeIndices[4*i]);
format of index data
start of index data
Method 2:
glDrawElements(GL_QUADS, 24,
GL_UNSIGNED_BYTE, cubeIndices);
Draws cube with 1 function call!!

323
324
54
Example: Cube Using

Quad Primitives
Cube Using Vertex Arrays
OpenGL fills the polygon by interpolating

among the vertex colors.
Flatten the data to one-dimensional arrays .
int faces[6][4] = {{0, 3, 2, 1}, {2, 3, 7, 6}, ...

glBegin(GL_QUADS);
for(i = 0; i < nfaces; i++) {
for(j = 0; j < 4; j++) {
glColor3fv (colors [ faces[i][j] ]);
glVertex3fv(vertices[ faces[i][j] ]);
}
}
glEnd();
float verts [24] = {-1.0, -1.0, -1.0, 1.0, -1.0, ...

float colors[24] = {0.0, 0.0, 0.0, 1.0, 0.0, 0.0, ...
float faces [24] = {0, 3, 2, 1, 2, 3, 7, 6, ...
glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_COLOR_ARRAY);
glVertexPointer(3, GL_FLOAT, 0, verts);
glColorPointer(3, GL_FLOAT, 0, colors);
glDrawElements(GL_QUADS, 24, GL_UNSIGNED_BYTE, faces);
Looping over the face list is replaced by

single function call.
325
326
Objectives
This is an optional lecture that
Virtual Trackball
- Introduces the use of graphical (virtual)

devices that can be created using OpenGL
- Makes use of transformations
- Leads to reusable code that will be helpful
later

Physical Trackball
328
A Trackball from a Mouse
The trackball is an upside down mouse
If there is little friction between the ball and the

rollers, we can give the ball a push and it will
keep rolling yielding continuous changes
Two possible modes of operation
Problem: we want to get the two behavior

modes from a mouse
We would also like the mouse to emulate
a frictionless (ideal) trackball
Solve in two steps
- Map trackball position to mouse position
- Use GLUT to obtain the proper modes
- Continuous pushing or tracking hand motion

- Spinning
329
330
55
Projection of Trackball
Position
Trackball Frame
We can relate position on trackball to

position on a normalized mouse pad by
projecting orthogonally onto pad
origin at center of ball
331
Reversing Projection
Computing Rotations
Because both the pad and the upper

hemisphere of the ball are twodimensional surfaces, we can reverse the
projection
A point (x,z) on the mouse pad
corresponds to the point (x,y,z) on the
upper hemisphere where
Suppose that we have two points that

were obtained from the mouse.
We can project them up to the
hemisphere to points p1 and p2
These points determine a great circle on
the sphere
We can rotate from p1 to p2
by finding the proper axis of rotation and
the angle between the points
2
2
2
y = r x z
if r |x| 0, r |z| 0
333
Using the cross product
332
334
Obtaining the angle
The axis of rotation is given by the normal

to the plane determined by the origin, p1 ,
and p2
n = p1 p2
The angle between p1 and p2 is given by

| sin | =
|n|
| p1 || p 2 |
If we move the mouse slowly or sample its

position frequently, then will be small
and we can use the approximation
sin
335
336
56
Implementing with GLUT
Example
We will use the idle, motion, and mouse

callbacks to implement the virtual trackball
Define actions in terms of three booleans
trackingMouse: if true update trackball
position
redrawContinue: if true, idle function
posts a redisplay
trackballMove: if true, update rotation
matrix
In this example, we use the virtual

trackball to rotate the color cube we
modeled earlier
The code for the colorcube function is
omitted because it is unchanged from the
earlier examples
337
Initialization
The Projection Step
#define bool int
/* if system does not support

bool type */
#define false 0
#define true 1
#define M_PI 3.14159 /* if not in math.h */
int
voidtrackball_ptov(int x, int y, int width,

int height, float v[3])
{
float d, a;
/* project x,y onto a hemisphere centered
within width, height , note z is up here
*/
v[0] = (2.0*x - width) / width;
v[1] = (height - 2.0F*y) / height;
d
= sqrt(v[0]*v[0] + v[1]*v[1]);
v[2] = cos((M_PI/2.0) * ((d < 1.0) ?
d : 1.0));
a = 1.0 / sqrt(v[0]*v[0] + v[1]*v[1] +
v[2]*v[2]);
v[0] *= a;
v[1] *= a;
v[2] *= a;
}
winWidth, winHeight;
float angle = 0.0, axis[3], trans[3];

bool
bool
bool
trackingMouse = false;
redrawContinue = false;
trackballMove = false;
float lastPos[3] = {0.0, 0.0, 0.0};

int curx,
cury;
int startX, startY;
338
339
glutMotionFunc (1)
340
glutMotionFunc (2)
if (dx || dy || dz) {
/* compute theta and cross product */
angle = 90.0 * sqrt(dx*dx + dy*dy + dz*dz);
axis[0] = lastPos[1]*curPos[2] lastPos[2]*curPos[1];
axis[1] = lastPos[2]*curPos[0]
lastPos[0]*curPos[2];
axis[2] = lastPos[0]*curPos[1]
lastPos[1]*curPos[0];
/* update position */
lastPos[0] = curPos[0];
}
voidmouseMotion(int x, int y)
{
float curPos[3],
dx, dy, dz;
/* compute position on hemisphere */
trackball_ptov(x, y, winWidth, winHeight, curPos);
if(trackingMouse) {
/* compute the change in position
on the hemisphere */
dx = curPos[0] - lastPos[0];
dy = curPos[1] - lastPos[1];
dz = curPos[2] - lastPos[2];
}
}
341
342
57
Idle and Display Callbacks
Mouse Callback
void spinCube() {
if(redrawContinue) glutPostRedisplay();
}
void mouseButton(int button, int state, int x, int y)

{
if(button==GLUT_RIGHT_BUTTON) exit(0);
void display() {
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
if (trackballMove){
glRotatef(angle, axis[0], axis[1], axis[2]);
}
colorcube();
glutSwapBuffers();
}
343
Start Function
344
Stop Function
void startMotion(int x, int y)

{
trackingMouse = true;
startX = x;
startY = y;
curx = x;
cury = y;
trackball_ptov(x, y, winWidth, winHeight, lastPos);
trackballMove=true;
}
/* holding down left button

allows user to rotate cube */
if(button==GLUT_LEFT_BUTTON) switch(state)
{
case GLUT_DOWN:
y = winHeight-y;
startMotion( x,y);
break;
case GLUT_UP:
stopMotion( x,y);
break;
}
}
345
void stopMotion(int x, int y)

{
trackingMouse = false;
/* check if position has changed */
if (startX != x || startY != y)
redrawContinue = true;
else {
angle = 0.0;
trackballMove = false;
}
}
346
Quaternions
Because the rotations are on the surface
of a sphere, quaternions provide an
interesting and more efficient way to
implement the trackball
See code in some of the standard demos
included with Mesa
Classical Viewing
347
58
Objectives
Classical Viewing
Viewing requires three basic elements
Introduce the classical views

Compare and contrast image formation
by computer with how images have been
formed by architects, artists, and
engineers
Learn the benefits and drawbacks of
each type of view
- One or more objects

- A viewer with a projection surface
- Projectors that go from the object(s) to the projection
surface
Classical views are based on the relationship among

these elements
- The viewer picks up the object and orients it how she
would like to see it
Each object is assumed to constructed from flat

principal faces
- Buildings, polyhedra, manufactured objects
349
350
Planar Geometric Projections
Classical Projections
Standard projections project onto a plane

Projectors are lines that either
- converge at a center of projection
- are parallel
Such projections preserve lines

- but not necessarily angles
Nonplanar projections are needed for

applications such as map construction
351
Taxonomy of Planar
Geometric Projections
Perspective vs Parallel
Computer graphics treats all projections
the same and implements them with a
single pipeline
Classical viewing developed different
techniques for drawing each type of
projection
Fundamental distinction is between
parallel and perspective viewing even
though mathematically parallel viewing is
the limit of perspective viewing
352
planar geometric projections
parallel
perspective
1 point
multiview axonometric oblique
orthographic
isometric
353
dimetric
2 point
3 point
trimetric
354
59
Perspective Projection
Parallel Projection
355
Multiview Orthographic
Projection
Orthographic Projection
Projectors are orthogonal to projection surface
Projection plane parallel to principal face

Usually form front, top, side views
isometric (not multiview
orthographic view)
in CAD and architecture,

we often display three
multiviews plus isometric
top
357
Advantages and
Disadvantages
front
side
358
Axonometric Projections
Allow projection plane to move relative to object
Preserves both distances and angles

- Shapes preserved
- Can be used for measurements
Building plans
Manuals
Cannot see what object really looks like

because many surfaces hidden from view
- Often we add the isometric
356
359
classify by how many angles of

a corner of a projected cube are
the same
1
none: trimetric
2 3
two: dimetric
three: isometric
360
60
Types of Axonometric
Projections
Advantages and
Disadvantages
Lines are scaled (foreshortened) but can find
scaling factors
Lines preserved but angles are not
- Projection of a circle in a plane not parallel to the
projection plane is an ellipse
Can see three principal faces of a box-like

object
Some optical illusions possible
- Parallel lines appear to diverge
361
Does not look real because far objects are

scaled the same as near objects
Used in CAD applications
362
Advantages and
Disadvantages
Oblique Projection
Can pick the angles to emphasize a particular

face
Arbitrary relationship between projectors and

projection plane
- Architecture: plan oblique, elevation oblique
Angles in faces parallel to projection plane are

preserved while we can still see around side
In physical world, cannot create with simple

camera; possible with bellows camera or
special lens (architectural)
363
364
Perspective Projection
Vanishing Points
Projectors converge at center of projection
Parallel lines (not parallel to the projection plan)

on the object converge at a single point in the
projection (the vanishing point)
Drawing simple perspectives by hand uses
these vanishing point(s)
vanishing point
365
366
61
Three-Point Perspective
Two-Point Perspective
No principal face parallel to projection plane

Three vanishing points for cube
On principal direction parallel to projection plane

Two vanishing points for cube
367
368
Advantages and
Disadvantages
One-Point Perspective
One principal face parallel to projection plane
One vanishing point for cube
Objects further from viewer are projected

smaller than the same sized objects closer to
the viewer (diminuition)
- Looks realistic
369
Equal distances along a line are not projected

into equal distances (nonuniform
foreshortening)
Angles preserved only in planes parallel to the
projection plane
More difficult to construct by hand than parallel
projections (but not more difficult by computer)
370
Objectives
Computer Viewing
Introduce the mathematics of projection

Introduce OpenGL viewing functions
Look at alternate viewing APIs

372
62
The OpenGL Camera
Computer Viewing
There are three aspects of the viewing
process, all of which are implemented in
the pipeline,
In OpenGL, initially the world and camera

frames are the same
- Default model-view matrix is an identity
- Positioning the camera
The camera is located at origin and points

in the negative z direction
OpenGL also specifies a default view
volume that is a cube with sides of length 2
centered at the origin
Setting the model-view matrix
- Selecting a lens
Setting the projection matrix
- Clipping
Setting the view volume
- Default projection matrix is an identity

373
Default Projection
374
Moving the Camera Frame

If we want to visualize object with both positive and
negative z values we can either
- Move the camera in the positive z direction
Default projection is orthogonal

clipped out
Translate the camera frame
- Move the objects in the negative z direction

Translate the world frame
Both of these views are equivalent and are

determined by the model-view matrix
z=0
- Want a translation (glTranslatef(0.0,0.0,-d);)

-d > 0
375
Moving Camera back

from Origin
376
Moving the Camera

We can move the camera to any desired
position by a sequence of rotations and
translations
Example: side view
frames after translation by d

d>0
default frames
- Rotate the camera

- Move it away from origin
- Model-view matrix C = TR
377
378
63
The LookAt Function
OpenGL code
The GLU library contains the function glLookAt to

from the required modelview matrix through a
simple interface
Note the need for setting an up direction
Still need to initialize
- Can concatenate with modeling transformations
Example: isometric view of cube aligned with axes
Remember that last transformation

specified is first to be applied
glMatrixMode(GL_MODELVIEW)
glLoadIdentity();
glTranslatef(0.0, 0.0, -d);
glRotatef(90.0, 0.0, 1.0, 0.0);
glMatrixMode(GL_MODELVIEW):
glLoadIdentity();
gluLookAt(1.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0., 1.0. 0.0);
379
The LookAt Function II
380
Other Viewing APIs
glLookAt(eyex, eyey, eyez, atx, aty, atz, upx, upy, upz)
The LookAt function is only one possible

API for positioning the camera
Others include
- View reference point, view plane normal, view
up (PHIGS, GKS-3D)
- Yaw, pitch, roll
- Elevation, azimuth, twist
- Direction angles
381
Projections and
Normalization
382
Homogeneous Coordinate
Representation
The default projection in the eye (camera)

frame is orthogonal
For points within the default view volume
xp = x
yp = y
zp = 0
wp = 1
xp = x
yp = y
zp = 0
Most graphics systems use view normalization

- All other views are converted to the default view by
transformations that determine the projection matrix
- Allows use of the same pipeline for all views
383
pp = Mp
1
0
M=
0
0 0 0
1 0 0
0 0 0
0 0 1
In practice, we can let M = I and set

the z term to zero later
384
64
Simple Perspective
Perspective Equations
Center of projection at the origin

Projection plane z = d, d < 0
Consider top and side views
x
z/d
xp =
385
x
z/d
consider q = Mp
where
p=
x
y

z

1
q=
1
0
0
1
0 1/ d
y
z/d
zp = d
386
Homogeneous
Coordinate Form
1
M = 0
0
yp =
Perspective Division
0
0
0
However w 1, so we must divide by w to

return from homogeneous coordinates
This perspective division yields
xp =
x
y
z / d
x
z/d
yp =
y
z/d
zp = d
the desired perspective equations

We will consider the corresponding clipping
volume with the OpenGL functions
387
OpenGL Orthogonal
Viewing
388
OpenGL Perspective
glOrtho(xmin,xmax,ymin,ymax,near,far)
glOrtho(left,right,bottom,top,near,far)
glFrustum(xmin,xmax,ymin,ymax,near,far)
near and far measured from camera

389
390
65
Using Field of View

With glFrustum it is often difficult to get the
desired view
Projection Matrices
gluPerpective(fovy, aspect, near, far)
often provides a better interface

front plane
aspect = w/h
391
Objectives
Normalization
Derive the projection matrices used for

standard OpenGL projections
Introduce oblique projections
Introduce projection normalization
Rather than derive a different projection

matrix for each type of projection, we can
convert all projections to orthogonal
projections with the default view volume
This strategy allows us to use standard
transformations in the pipeline and makes
for efficient clipping
393
Pipeline View
modelview
transformation
projection
transformation
We stay in four-dimensional homogeneous

coordinates through both the modelview and
projection transformations
perspective
division
- Both these transformations are nonsingular

- Default to identity matrices (orthogonal view)
nonsingular
against default cube
Normalization lets us clip against simple

cube regardless of type of projection
Delay final projection until end
projection
- Important for hidden-surface removal to retain

depth information as long as possible
3D 2D
394
Notes
4D 3D
clipping
395
396
66
Orthogonal Normalization
Orthogonal Matrix
glOrtho(left,right,bottom,top,near,far)
normalization find transformation to convert
specified clipping volume to default
Two steps
- Move center to origin
T(-(left+right)/2, -(bottom+top)/2,(near+far)/2))
- Scale to have sides of length 2

S(2/(left-right),2/(top-bottom),2/(near-far))
P = ST =
397
Final Projection
Morth =
0
1
0
0
0
0
0
0
2
top bottom
0
0
2
near far
0
right left
right left
top + bottom
top bottom
far + near
far near
1
398
Oblique Projections
Set z =0
Equivalent to the homogeneous
coordinate transformation
1
0
right left
The OpenGL projection functions cannot

produce general parallel projections such as
0
0
0
However if we look at the example of the cube

it appears that the cube has been sheared
Oblique Projection = Shear + Orthogonal
Projection
Hence, general orthogonal projection in

P4D
= Mis
orthST
399
General Shear
400
Shear Matrix
xy shear (z values unchanged)
1
H(,) = 0
0
0 cot 0
1 cot 0
0
1
0
0
0
1
Projection matrix
top view
P = Morth H(,)
side view
General case:
401
P = Morth STH(,)
402
67
Equivalency
Effect on Clipping
The projection matrix P = STH transforms
the original clipping volume to the default
clipping volume
object
top view
z= 1
DOP
DOP
x = -1
x=1
far plane
z = -1
clipping
volume
403
Simple Perspective
near plane
distorted object
(projects correctly)404
Perspective Matrices
Consider a simple perspective with the COP at the

origin, the near clipping plane at z = -1, and a 90
degree field of view determined by the planes
x = z, y = z
Simple projection matrix in homogeneous

coordinates
M=
1
0
0
0
0 1 0
0 1 0
0
Note that this matrix is independent of the

far clipping plane
405
Picking and
Generalization
N=
1
0
0
0
0
0 1 0
0
406
If we pick
near + far
far near
2near far
=
near far
after perspective division, the point (x, y, z, 1) goes to

the near plane is mapped to z = -1
the far plane is mapped to z =1
and the sides are mapped to x = 1, y = 1
x = x/z
y = y/z
z = -(+/z)
which projects orthogonally to the desired point
regardless of and
Hence the new clipping volume is the default clipping volume

407
408
68
Normalization
Transformation
Normalization and
Although our selection of the form of the
perspective matrices may appear somewhat
arbitrary, it was chosen so that if z1 > z2 in the
original clipping volume then the for the
transformed points z1 > z2
Thus hidden surface removal works if we first
apply the normalization transformation
However, the formula z = -(+/z) implies that
the distances are distorted by the normalization
which can cause numerical problems especially
if the near distance is small
distorted object
projects correctly
original clipping
volume
original object
new clipping
volume
409
OpenGL Perspective
410
OpenGL Perspective Matrix
glFrustum allows for an asymmetric

viewing frustum (although gluPerspective
does not)
The normalization in glFrustum requires

an initial shear to form a right viewing
pyramid, followed by a scaling to get the
normalized perspective volume. Finally,
the perspective matrix results in needing
only a final orthogonal transformation
P = NSH
our previously defined shear and scale

perspective matrix
411
412
Why do we do it this way?
Example: Shadows
Normalization allows for a single pipeline

for both perspective and orthogonal
viewing
We keep in four dimensional
homogeneous coordinates as long as
possible to retain three-dimensional
information needed for hidden-surface
removal and shading
We simplify clipping
In this example, we model a light casting

shadows on a cube.
0
1
0
1
M=
0
0
0 1 / y
0
0
1
0
0
0
0
0
M is a perspective projection matrix.

413
414
69
Specifying the Light

Position
The Shadow
Transformation
Compute the light position in the display

handler.
Update global theta in an animation loop
to make the light rotate around the origin.
GLfloat light[3]; /* light position */
light[0] = 10.0 * sin((PI2/180.0) * theta);
light[1] = 10.0;
light[2] = 10.0 * cos((PI2/180.0) * theta);
Compute the shadow transformation

based on the light position.
/* start with the identity matrix */
GLfloat m[16] = {
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0,
};
m[ 7] = -1.0/light[1];
m[15] = 0.0;
415
/* y_l */
416
Drawing Shadows
After drawing the scene, move the
viewpoint to the light position and apply
the shadow transformation.
Shading
glPushMatrix();
glTranslatef(light[0], light[1],light[2]);
glMultMatrixf(m);
glTranslatef(-light[0], -light[1],-light[2]);
glColor3f(0.0,0.0,0.0); /* shadow color */
drawPolygon();
glPopMatrix();

417
Objectives
Why we need shading
Learn to shade objects so their images

appear three-dimensional
Introduce the types of light-material
interactions
Build a simple reflection model---the
Phong model--- that can be used with
real time graphics hardware
Suppose we build a model of a sphere

using many polygons and color it with
glColor. We get something like
But we want
419
420
70
Shading
Scattering
Why does the image of a real sphere look like
Light strikes A
- Some scattered
- Some absorbed
Light-material interactions cause each point to

have a different color or shade
Need to consider
-
- Some scattered
- Some absorbed
Some of this scattered light strikes A

and so on
Light sources
Material properties
Location of viewer
Surface orientation
Some of scattered light strikes B
421
Rendering Equation
422
Global Effects
The infinite scattering and absorption of

light can be described by the rendering
equation
shadow
- Cannot be solved in general

- Ray tracing is a special case for perfectly
reflecting surfaces
multiple reflection
Rendering equation is global and includes
translucent surface
- Shadows
- Multiple scattering from object to object
423
Local vs Global Rendering
424
Light-Material Interaction
Correct shading requires a global

calculation involving all objects and light
sources
- Incompatible with pipeline model which shades
each polygon independently (local rendering)
However, in computer graphics, especially

real time graphics, we are happy if things
look right
- Exist many techniques for approximating global
effects
425
Light that strikes an object is partially

absorbed and partially scattered (reflected)
The amount reflected determines the color
and brightness of the object
- A surface appears red under white light because
the red component of the light is reflected and the
rest is absorbed
The reflected light is scattered in a manner

that depends on the smoothness and
orientation of the surface
426
71
Light Sources
Simple Light Sources
General light sources are difficult to work

with because we must integrate light
coming from all points on the source
Point source
- Model with position and color
- Distant source = infinite distance away (parallel)
Spotlight
- Restrict light from ideal point source
Ambient light
- Same amount of light everywhere in scene
- Can model contribution of many sources and
reflecting surfaces
427
Surface Types
Phong Model
The smoother a surface, the more reflected light

is concentrated in the direction a perfect mirror
would reflected the light
A very rough surface scatters light in all
directions
A simple model that can be computed rapidly

Has three components
428
- Diffuse
- Specular
- Ambient
Uses four vectors
smooth surface
- To source
- To viewer
- Normal
- Perfect reflector
rough surface
429
430
Ideal Reflector
Lambertian Surface
Normal is determined by local orientation

Angle of incidence = angle of reflection
The three vectors must be coplanar
Perfectly diffuse reflector

Light scattered equally in all directions
Amount of light reflected is proportional to
the vertical component of incoming light
- reflected light ~cos i
- cos i = l n if vectors normalized
- There are also three coefficients, kr, kb, kg that
show how much of each color component is
reflected
r = 2 (l n ) n - l
431
432
72
Specular Surfaces
Modeling Specular Reflections
Most surfaces are neither ideal diffusers nor

perfectly specular (ideal reflectors)
Smooth surfaces show specular highlights due
to incoming light being reflected in directions
concentrated close to the direction of a perfect
reflection
Phong proposed using a term that

dropped off as the angle between the
viewer and the ideal reflection increased
Ir ~ ks I cos
shininess coef
reflected
incoming intensity
intensity
absorption coef
specular
highlight
433
The Shininess Coefficient
Ambient Light
Values of between 100 and 200 correspond to

metals
Values between 5 and 10 give surface that look
like plastic
Ambient light is the result of multiple

interactions between (large) light sources
and the objects in the environment
Amount and color depend on both the
color of the light(s) and the material
properties of the object
Add ka Ia to diffuse and specular terms
cos
-90
reflection coef
90
435
434
intensity of ambient light
436
Distance Terms
Light Sources
The light from a point source that reaches

a surface is inversely proportional to the
square of the distance between them
We can add a factor of the
form 1/(a + bd +cd2) to
the diffuse and specular
terms
The constant and linear terms soften the
effect of the point source
In the Phong Model, we add the results

from each light source
Each light source has separate diffuse,
specular, and ambient terms to allow for
maximum flexibility even though this form
does not have a physical justification
Separate red, green and blue components
Hence, 9 coefficients for each point source
- Idr, Idg, Idb, Isr, Isg, Isb, Iar, Iag, Iab
437
438
73
Material Properties
Adding up the Components

For each light source and each color
component, the Phong model can be
written (without the distance terms) as
Material properties match light source

properties
- Nine absorption coefficients
kdr, kdg, kdb, ksr, ksg, ksb, kar, kag, kab
- Shininess coefficient
I =kd Id l n + ks Is (v r ) + ka Ia
For each color component
we add contributions from
all sources
439
440
Example
Shading in OpenGL
Only differences in
these teapots are
the parameters
in the Phong model

441
Objectives
Steps in OpenGL shading
Introduce the OpenGL shading functions

Discuss polygonal shading
1.
2.
3.
4.
- Flat
- Smooth
- Gouraud
443
Enable shading and select model

Specify normals
Specify material properties
Specify lights
444
74
Normals
Normal for Triangle
In OpenGL the normal vector is part of the

state
n
plane
Set by glNormal*()
-glNormal3f(x, y, z);
-glNormal3fv(p);
n = (p1 - p0 ) (p2 - p0 )
Usually we want to set the normal to have unit

length so cosine calculations are correct
- Length can be affected by transformations
- Note the scale does not preserved length
-glEnable(GL_NORMALIZE) allows for
autonormalization at a performance penalty
normalize n n/ |n|
445
446
Defining a Point Light Source
Shading calculations are enabled by
For each light source, we can set an RGB for the

diffuse, specular, and ambient parts, and the
position
-glEnable(GL_LIGHTING)
- Once lighting is enabled, glColor() ignored

Must enable each light source individually
-glEnable(GL_LIGHTi) i=0,1..
Can choose light model parameters
GL float diffuse0[]={1.0, 0.0, 0.0, 1.0};

GL float ambient0[]={1.0, 0.0, 0.0, 1.0};
GL float specular0[]={1.0, 0.0, 0.0, 1.0};
Glfloat light0_pos[]={1.0, 2.0, 3,0, 1.0};
-glLightModeli(parameter, GL_TRUE)
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0);
glLightv(GL_LIGHT0, GL_POSITION, light0_pos);
glLightv(GL_LIGHT0, GL_AMBIENT, ambient0);
glLightv(GL_LIGHT0, GL_DIFFUSE, diffuse0);
glLightv(GL_LIGHT0, GL_SPECULAR, specular0);
GL_LIGHT_MODEL_LOCAL_VIEWER do not use

simplifying distant viewer assumption in calculation
GL_LIGHT_MODEL_TWO_SIDED shades both sides of
polygons independently
447
Distance and Direction
448
Spotlights
Use glLightv to set
The source colors are specified in RGBA

The position is given in homogeneous
coordinates
- Direction GL_SPOT_DIRECTION
- Cutoff GL_SPOT_CUTOFF
- Attenuation GL_SPOT_EXPONENT
- If w =1.0, we are specifying a finite location

- If w =0.0, we are specifying a parallel source
with the given direction vector
Proportional to cos
The coefficients in the distance terms are by

default a=1.0 (constant terms), b=c=0.0 (linear
and quadratic terms). Change by
a= 0.80;
glLightf(GL_LIGHT0, GLCONSTANT_ATTENUATION, a);
p1
p0
Note that right-hand rule determines outward face
Enabling Shading
p2
n (p - p0 ) = 0
449
450
75
Global Ambient Light
Moving Light Sources
Ambient light depends on color of light

sources
- A red light in a white room will cause a red
ambient term that disappears when the light is
turned off
OpenGL allows a global ambient term that

is often helpful
-glLightModelfv(GL_LIGHT_MODEL_AMBIENT,
global_ambient)
451
Light sources are geometric objects whose

positions or directions are affected by the
model-view matrix
Depending on where we place the position
(direction) setting function, we can
- Move the light source(s) with the object(s)
- Fix the object(s) and move the light source(s)
- Fix the light source(s) and move the object(s)
- Move the light source(s) and object(s) independently
452
Material Properties
Front and Back Faces
Material properties are also part of the OpenGL

state and match the terms in the Phong model
Set by glMaterialv()
The default is shade only front faces which

works correct for convex objects
If we set two sided lighting, OpenGL will shaded
both sides of a surface
Each side can have its own properties which are
set by using GL_FRONT, GL_BACK, or
GL_FRONT_AND_BACK in glMaterialf
GLfloat ambient[] = {0.2, 0.2, 0.2, 1.0};

GLfloat diffuse[] = {1.0, 0.8, 0.0, 1.0};
GLfloat specular[] = {1.0, 1.0, 1.0, 1.0};
GLfloat shine = 100.0
glMaterialf(GL_FRONT, GL_AMBIENT, ambient);
glMaterialf(GL_FRONT, GL_DIFFUSE, diffuse);
glMaterialf(GL_FRONT, GL_SPECULAR, specular);
glMaterialf(GL_FRONT, GL_SHININESS, shine);
back faces not visible

453
back faces visible
454
Emissive Term
Transparency
We can simulate a light source in OpenGL

by giving a material an emissive
component
This color is unaffected by any sources or
transformations
Material properties are specified as RGBA

values
The A value can be used to make the
surface translucent
The default is that all surfaces are opaque
regardless of A
Later we will enable blending and use this
feature
GLfloat emission[] = 0.0, 0.3, 0.3, 1.0);

glMaterialf(GL_FRONT, GL_EMISSION, emission);
455
456
76
Efficiency
Polygonal Shading
Because material properties are part of the

state, if we change materials for many
surfaces, we can affect performance
We can make the code cleaner by defining a
material structure and setting all materials
during initialization
Shading calculations are done for each

vertex
- Vertex colors become vertex shades
By default, vertex colors are interpolated

across the polygon
typedef struct materialStruct {

GLfloat ambient[4];
GLfloat diffuse[4];
GLfloat specular[4];
GLfloat shininess;
} MaterialStruct;
-glShadeModel(GL_SMOOTH);
If we use glShadeModel(GL_FLAT); the

color at the first vertex will determine the
color of the whole polygon
We can then select a material by a pointer

457
Polygon Normals
- Shades at the vertices as computed by the
Phong model can be almost same
- Identical for a distant viewer (default) or if there
is no specular component
459
Mesh Shading
n1 + n 2 + n 3 + n 4
| n1 | + | n 2 | + | n 3 | + | n 4 |
n1 + n 2 + n 3 + n 4
| n1 | + | n 2 | + | n 3 | + | n 4 |
- If centered at origin n = p
460
Gouraud and Phong Shading
The previous example is not general

because we knew the normal at each
vertex analytically
For polygonal models, Gouraud proposed
we use the average of normals around a
mesh vertex
n=
We can set a new

normal at each vertex
Easy for sphere model
Now smooth shading
works
Note silhouette edge
Consider model of sphere

Want different normals at
each vertex even though
this concept is not quite
correct mathematically
n=
458
Smooth Shading
Polygons have a single normal
461
Gouraud Shading
- Find average normal at each vertex (vertex normals)
- Apply Phong model at each vertex
- Interpolate vertex shades across each polygon
Phong shading
- Find vertex normals
- Interpolate vertex normals across edges
- Find shades along edges
- Interpolate edge shades across polygons
462
77
Comparison
If the polygon mesh approximates surfaces with
a high curvatures, Phong shading may look
smooth while Gouraud shading may show edges
Phong shading requires much more work than
Gouraud shading
- Usually not available in real time systems
Both need data structures to represent meshes
so we can obtain vertex normals
Buffers
463
Objectives
Buffer
Define a buffer by its spatial resolution (n x m) and
its depth k, the number of bits/pixel
Introduce additional OpenGL buffers

Learn to read and write buffers
Learn to use blending
pixel
465
OpenGL Frame Buffer
466
OpenGL Buffers
Color buffers can be displayed
- Front
- Back
- Auxiliary
- Overlay
Depth
Accumulation
- High resolution buffer
Stencil
- Holds masks
467
468
78
Writing in Buffers
Writing Model
Conceptually, we can consider all of memory as a

large two-dimensional array of pixels
We read and write rectangular block of pixels
Read destination pixel before writing source
- Bit block transfer (bitblt) operations
The frame buffer is part of this memory
memory
source
frame buffer
(destination)
writing into frame buffer

469
Writing Modes
XOR
470
XOR mode
Source and destination bits are combined bitwise

16 possible functions (one per column in table)
replace
OR
Recall from Chapter 3 that we can use XOR by

enabling logic operations and selecting the XOR
write mode
XOR is especially useful for swapping blocks of
memory such as menus that are stored off screen
If S represents screen and M represents a menu
the sequence
S SM
M SM
S SM
swaps the S and M
471
The Pixel Pipeline
472
Raster Position
OpenGL has a separate pipeline for pixels

- Writing pixels involves
Moving pixels from processor memory to the frame buffer
Format conversions
Mapping, Lookups, Tests
OpenGL maintains a raster position as

part of the state
Set by glRasterPos*()
-glRasterPos3f(x, y, z);
The raster position is a geometric entity
- Reading pixels
- Passes through geometric pipeline

- Eventually yields a 2D position in screen
coordinates
- This position in the frame buffer is where the
next raster primitive is drawn
Format conversion
473
474
79
Buffer Selection
Bitmaps
OpenGL treats 1-bit pixels (bitmaps)
differently than multi-bit pixels (pixelmaps)
Bitmaps are masks which determine if the
corresponding pixel in the frame buffer is
drawn with the present raster color
OpenGL can draw into or read from any of the

color buffers (front, back, auxiliary)
Default to the back buffer
Change with glDrawBuffer and
glReadBuffer
Note that format of the pixels in the frame buffer is
different from that of processor memory and these
two types of memory reside in different places
- Need packing and unpacking
- Drawing and reading can be slow
Bitmaps are useful for raster text

-GLUT_BIT_MAP_8_BY_13
475
Raster Color
476
Drawing Bitmaps
glBitmap(width, height, x0, y0, xi, yi, bitmap)
offset from raster
position
Same as drawing color set by glColor*()

Fixed by last call to glRasterPos*()
increments in
raster
position after
bitmap drawn
glColor3f(1.0, 0.0, 0.0);

glRasterPos3f(x, y, z);
glColor3f(0.0, 0.0, 1.0);
glBitmap(.
glBegin(GL_LINES);
glVertex3f(..)
first raster position
Geometry drawn in blue

Ones in bitmap use a drawing color of red
- 0 color unchanged
- 1 color changed based on writing mode
second raster position

477
Example: Checker Board
478
Pixel Maps
GLubyte wb[2] = {0 x 00, 0 x ff};

GLubyte check[512];
int
i, j;
OpenGL works with rectangular arrays of

pixels called pixel maps or images
Pixels are in one byte ( 8 bit) chunks
for(i=0; i<64; i++) for (j=0; j<64; j++)

check[i*8+j] = wb[(i/8+j)%2];
- Luminance (gray scale) images 1 byte/pixel

- RGB 3 bytes/pixel
glBitmap( 64, 64, 0.0, 0.0, 0.0, 0.0, check);
Three functions
- Draw pixels: processor memory to frame buffer
- Read pixels: frame buffer to processor memory
- Copy pixels: frame buffer to frame buffer
479
480
80
OpenGL Pixel Functions
Image Formats
glReadPixels(x,y,width,height,format,type,myimage)
start pixel in frame buffer
type of pixels
size
type of image pointer to processor
memory
GLubyte myimage[512][512][3];
glReadPixels(0,0, 512, 512, GL_RGB,
GL_UNSIGNED_BYTE, myimage);
- OpenGL knows nothing of image formats

- Some code available on Web
- Can write readers/writers for some simple
formats in OpenGL
glDrawPixels(width,height,format,type,myimage)
starts at raster position
481
Displaying a PPM Image
P3
# comment 1
# comment 2
.
#comment n
rows columns maxvalue
pixels
483
Reading the Header (cont)
FILE *fd;
int k, nm;
char c;
int i;
char b[100];
check for P3
float s;
in first line
int red, green, blue;
printf("enter file name\n");
scanf("%s", b);
fd = fopen(b, "r");
fscanf(fd,"%[^\n] ",b);
if(b[0]!='P'|| b[1] != '3'){
printf("%s is not a PPM file!\n", b);
exit(0);
}
printf("%s is a PPM file\n",b);
484
Reading the Data

fscanf(fd, "%d %d %d", &n, &m, &k);
printf("%d rows %d columns max value= %d\n",n,m,k);
fscanf(fd, "%c",&c);
while(c == '#')
{
fscanf(fd, "%[^\n] ", b);
printf("%s\n",b);
fscanf(fd, "%c",&c);
}
ungetc(c,fd);
nm = n*m;
image=malloc(3*sizeof(GLuint)*nm);
s=255./k;
scale factor
for(i=0;i<nm;i++)
{
fscanf(fd,"%d %d %d",&red, &green, &blue );
image[3*nm-3*i-3]=red;
image[3*nm-3*i-2]=green;
image[3*nm-3*i-1]=blue;
}
skip over comments by

looking for # in first column
482
Reading the Header
PPM is a very simple format

Each image file consists of a header
followed by all the pixel data
Header
We often work with images in a standard

format (JPEG, TIFF, GIF)
How do we read/write such images with
OpenGL?
No support in OpenGL
485
486
81
Scaling the Image Data
The display callback

void display()
{
glRasterPos2i(0,0);
glDrawPixels(n,m,GL_RGB,
GL_UNSIGNED_INT, image);
glFlush();
}
We can scale the image in the pipeline

glPixelTransferf(GL_RED_SCALE, s);
glPixelTransferf(GL_GREEN_SCALE, s);
glPixelTransferf(GL_BLUE_SCALE, s);
We may have to swap bytes when we go from

processor memory to the frame buffer depending on
the processor. If so we need can use
glPixelStorei(GL_UNPACK_SWAP_BYTES,GL_TRUE);
487
488
Objectives
Introduce Mapping Methods
Texture Mapping
- Texture Mapping
- Environmental Mapping
- Bump Mapping

Consider basic strategies

- Forward vs backward mapping
- Point sampling vs area averaging
The Limits of Geometric

Modeling
Modeling an Orange
Although graphics cards can render over

10 million polygons per second, that
number is insufficient for many phenomena
- Clouds
- Grass
- Terrain
- Skin
490
Consider the problem of modeling an orange

(the fruit)
Start with an orange-colored sphere
- Too simple
Replace sphere with a more complex shape

- Does not capture surface characteristics (small
dimples)
- Takes too many polygons to model all the dimples
491
492
82
Modeling an Orange (2)
Three Types of Mapping
Take a picture of a real orange, scan it,

and paste onto simple geometric model
Texture Mapping
- Uses images to fill inside of polygons
- This process is texture mapping
Environmental (reflection mapping)
Still might not be sufficient because

resulting surface will be smooth
- Uses a picture of the environment for texture

maps
- Allows simulation of highly specular surfaces
- Need to change local shape

- Bump mapping
Bump mapping
- Emulates altering normal vectors during the
rendering process
493
Texture Mapping
geometric model
494
Environment Mapping
texture mapped
495
496
Where does mapping take

place?
Bump Mapping
Mapping techniques are implemented at the end

of the rendering pipeline
- Very efficient because few polygons pass down
the geometric pipeline
497
498
83
Is it simple?
Coordinate Systems
Although the idea is simple---map an

image to a surface---there are 3 or 4
coordinate systems involved
Parametric coordinates
- May be used to model curved surfaces
Texture coordinates
- Used to identify points in the image to be mapped
World Coordinates
- Conceptually, where the mapping takes place
Screen Coordinates
2D image
- Where the final image is really produced

3D surface
499
Texture Mapping
Mapping Functions
Basic problem is how to find the maps
Consider mapping from texture
coordinates to a point a surface
Appear to need three functions
parametric coordinates
x = x(s,t)
y = y(s,t)
z = z(s,t)
world coordinates
t
s
screen coordinates
501
Backward Mapping
(x,y,z)
But we really want

to go the other way
texture coordinates
500
502
Two-part mapping
We really want to go backwards

- Given a pixel, we want to know to which point
on an object it corresponds
- Given a point on an object, we want to know
to which point in the texture it corresponds
One solution to the mapping problem is to

first map the texture to a simple
intermediate surface
Example: map to cylinder
Need a map of the form

s = s(x,y,z)
t = t(x,y,z)
Such functions are difficult to find in general
503
504
84
Cylindrical Mapping
Spherical Map
We can use a parametric sphere
parametric cylinder
x = r cos 2 u
y = r sin 2u
z = v/h
x = r cos 2u
y = r sin 2u cos 2v
z = r sin 2u sin 2v
maps rectangle in u,v space to cylinder

of radius r and height h in world coordinates
in a similar manner to the cylinder

but have to decide where to put
the distortion
s=u
t=v
maps from texture space
Spheres are use in environmental maps
505
Box Mapping
Second Mapping
Map from intermediate object to actual object
- Normals from intermediate to actual
- Normals from actual to intermediate
- Vectors from center of intermediate
Easy to use with simple orthographic

projection
Also used in environmental maps
actual
507
Aliasing
intermediate
508
Area Averaging
Point sampling of the texture can lead to

aliasing errors
miss blue stripes
506
A better but slower option is to use area averaging
point samples in u,v

(or x,y,z) space
preimage
pixel
Note that preimage of pixel is curved

point samples in texture space
509
510
85
Objectives
Introduce the OpenGL texture functions
and options
OpenGL Texture Mapping

512
Basic Strategy
Texture Mapping
Three steps to applying a texture

1. specify the texture
read or generate image

assign to texture
enable texturing
geometry
2. assign texture coordinates to vertices
screen
Proper mapping function is left to application
3. specify texture parameters
wrapping, filtering
image
513
514
Texture Mapping and the

OpenGL Pipeline
Texture Example
The texture (below) is a
256 x 256 image that has
been mapped to a
rectangular polygon which
is viewed in perspective
Images and geometry flow through

separate pipelines that join at the
rasterizer
- complex textures do not affect geometric
complexity
vertices
geometry pipeline
rasterizer
image
515
pixel pipeline
516
86
Specify Texture Image
Define Image as a Texture

glTexImage2D( target, level, components,
w, h, border, format, type, texels );
Define a texture image from an array of

texels (texture elements) in CPU memory
target: type of texture, e.g. GL_TEXTURE_2D
Glubyte my_texels[512][512];
level: used for mipmapping (discussed later)
Define as any other pixel map
components: elements per texel

w, h: width and height of texels in pixels
- Scan
- Via application code
border: used for smoothing (discussed later)

format and type: describe texels
Enable texture mapping
texels: pointer to texel array
-glEnable(GL_TEXTURE_2D)
- OpenGL supports 1-4 dimensional texture maps
glTexImage2D(GL_TEXTURE_2D, 0, 3, 512, 512, 0,

GL_RGB, GL_UNSIGNED_BYTE, my_texels);
517
Converting A Texture
Image
Mapping a Texture
Based on parametric texture coordinates
glTexCoord*() specified at each vertex
OpenGL requires texture dimensions to be

powers of 2
If dimensions of image are not powers of 2
gluScaleImage( format, w_in, h_in,
type_in, *data_in, w_out, h_out,

type_out, *data_out );
0, 1
Texture Space
Object Space
1, 1
(s, t) = (0.2, 0.8)

A
-data_in is source image

-data_out is for destination image
(0.4, 0.2)
c
b
Image interpolated and filtered during scaling

518
0, 0
519
B
1, 0 s
Typical Code
C
(0.8, 0.4)
520
Interpolation
glColor3f(r0, g0, b0);
glNormal3f(u0, v0, w0);
glTexCoord2f(s0, t0);
glColor3f(r1, g1, b1);
glNormal3f(u1, v1, w1);
glTexCoord2f(s1, t1);
.
.
glEnd();
OpenGL uses bilinear interpolation to find proper

texels from specified texture coordinates
Can be distortions
texture stretched
good selection
of tex coordinates
poor selection
of tex coordinates
over trapezoid
showing effects of
bilinear interpolation
Note that we can use vertex arrays to increase efficiency

521
522
87
Texture Parameters
Wrapping Mode
OpenGL a variety of parameter that

determine how texture is applied
Clamping: if s,t > 1 use 1, if s,t <0 use 0

Wrapping: use s,t modulo 1
- Wrapping parameters determine what happens

of s and t are outside the (0,1) range
- Filter modes allow us to use area averaging
instead of point samples
- Mipmapping allows us to use textures at
multiple resolutions
- Environment parameters determine how texture
mapping interacts with shading
523
glTexParameteri( GL_TEXTURE_2D,
GL_TEXTURE_WRAP_S, GL_CLAMP )
glTexParameteri( GL_TEXTURE_2D,
GL_TEXTURE_WRAP_T, GL_REPEAT )
s
texture
GL_REPEAT
wrapping
GL_CLAMP
wrapping
524
Magnification and
Minification
Filter Modes
More than one texel can cover a pixel (minification) or

more than one pixel can cover a texel (magnification)
Modes determined by
-glTexParameteri( target, type, mode )
Can use point sampling (nearest texel) or linear filtering

( 2 x 2 filter) to obtain texture values
glTexParameteri(GL_TEXTURE_2D, GL_TEXURE_MAG_FILTER,
GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXURE_MIN_FILTER,
GL_LINEAR);
Texture
Polygon
Magnification
Texture
Polygon
Minification
525
Note that linear filtering requires a border of an

extra texel for filtering at edges (border = 1)
Mipmapped Textures
526
Example
Mipmapping allows for prefiltered texture maps

of decreasing resolutions
Lessens interpolation errors for smaller
textured objects
Declare mipmap level during texture definition
point
sampling
linear
filtering
glTexImage2D( GL_TEXTURE_*D, level, )
GLU mipmap builder routines will build all the

textures from a given image
mipmapped
point
sampling
gluBuild*DMipmaps( )
527
mipmapped
linear
filtering
528
88
Perspective Correction
Hint
Texture Functions
Controls how texture is applied
Texture coordinate and color interpolation

- either linearly in screen space
- or using depth/perspective values (slower)
glTexEnv{fi}[v]( GL_TEXTURE_ENV, prop,

param )
Noticeable for polygons on edge
GL_TEXTURE_ENV_MODE modes
glHint( GL_PERSPECTIVE_CORRECTION_HINT, hint )
-GL_MODULATE: modulates with computed shade

-GL_BLEND: blends with an environmental color
-GL_REPLACE: use only texture color
where hint is one of

GL_DONT_CARE
GL_NICEST
GL_FASTEST
- GL(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE,
GL_MODULATE);
Set blend color with GL_TEXTURE_ENV_COLOR

529
Generating Texture
Coordinates
Texture is part of the OpenGL state

- If we have different textures for different objects,
OpenGL will be moving large amounts data from
processor memory to texture memory
glTexGen{ifd}[v]()
specify a plane
- generate texture coordinates based upon distance from
the plane
generation modes
- Texture memory can hold multiple texture objects
531
Applying Textures II
532
Other Texture Features
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
Environmental Maps
- Start with image of environment through a wide
angle lens
Can be either a real scanned image or an image created in
OpenGL t
- Use this texture to generate a spherical map

- Use automatic texture coordinate generation
Multitexturing
- Apply a sequence of textures through cascaded
texture units
- coordinates can also be generated

Recent versions of OpenGL have texture

objects
- one image per texture object
-GL_OBJECT_LINEAR
-GL_EYE_LINEAR
-GL_SPHERE_MAP (used for environmental maps)
1.
2.
3.
4.
5.
6.
7.
8.
530
Texture Objects
OpenGL can generate texture coordinates

automatically
533
534
89
Objectives
Learn to use the A component in RGBA
color for
Compositing and Blending
- Blending for translucent surfaces

- Compositing images
- Antialiasing

536
Opacity and Transparency
Physical Models
Opaque surfaces permit no light to pass through

Transparent surfaces permit all light to pass
Translucent surfaces pass some light
translucency = 1 opacity ()
Dealing with translucency in a physically correct

manner is difficult due to
- the complexity of the internal interactions of
light and matter
- Using a pipeline renderer
- Revert to writing model
opaque surface =1
537
538
Writing Model
Blending Equation
Use A component of RGBA (or RGB) color to

store opacity
During rendering we can expand our writing
model to use RGBA values
We can define source and destination

blending factors for each component
s = [sr, sg, sb, s]
d = [dr, dg, db, d]
source and destination colors
b = [br, bg, bb, b]
c = [cr, cg, cb, c]
Blend as
c = [br sr+ cr dr, bg sg+ cg dg , bb sb+ cb db , b s+ c d
]
blend
source blending factor

source
component
destination blending
factor
destination
component
Color Buffer
539
540
90
OpenGL Blending and

Compositing
Example
Must enable blending and pick source and

destination factors
- This color becomes the initial destination color
glEnable(GL_BLEND)
glBlendFunc(source_factor,
destination_factor)
Only certain factors supported

-GL_ZERO, GL_ONE
-GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA
-GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA
- See Redbook for complete list
Suppose that we start with the opaque

background color (R0,G0,B0,1)
541
Clamping and Accuracy
We now want to blend in a translucent polygon

with color (R1,G1,B1,1)
Select GL_SRC_ALPHA and
GL_ONE_MINUS_SRC_ALPHA as the source and
destination blending factors
R1 = 1 R1 +(1- 1) R0,
Note this formula is correct if polygon is either
Angel: Interactive
Graphics 4E Addison-Wesley 2006
opaque
orComputer
transparent
542
Order Dependency
All the components (RGBA) are clamped

and stay in the range (0,1)
However, in a typical system, RGBA
values are only stored to 8 bits
Is this image correct?

- Probably not
- Polygons are rendered
in the order they pass
down the pipeline
- Blending functions
are order dependent
- Can easily loose accuracy if we add many

components together
- Example: add together n images
Divide all color components by n to avoid clamping
Blend with source factor = 1, destination factor = 1
But division by n loses bits
543
Opaque and Translucent

Polygons
544
Fog
Suppose that we have a group of polygons

some of which are opaque and some
translucent
How do we use hidden-surface removal?
Opaque polygons block all polygons behind
them and affect the depth buffer
Translucent polygons should not affect depth
buffer
We can composite with a fixed color and have

the blending factors depend on depth
- Simulates a fog effect
Blend source color Cs and fog color Cf by

Cs=f Cs + (1-f) Cf
f is the fog factor
- Exponential
- Gaussian
- Linear (depth cueing)
- Render with glDepthMask(GL_FALSE) which makes

depth buffer read-only
Sort polygons first to remove order

dependency
545
546
91
Fog Functions
OpenGL Fog Functions

GLfloat fcolor[4] = {}:
glEnable(GL_FOG);
glFogf(GL_FOG_MODE, GL_EXP);
glFogf(GL_FOG_DENSITY, 0.5);
glFOgv(GL_FOG, fcolor);
547
548
Line Aliasing
Antialiasing
Ideal raster line is one pixel wide

All line segments, other than vertical and
horizontal segments, partially cover pixels
Simple algorithms color
only whole pixels
Lead to the jaggies
or aliasing
Similar issue for polygons
Can try to color a pixel by adding a fraction of its

color to the frame buffer
- Fraction depends on percentage of pixel
covered by fragment
- Fraction depends on whether there is overlap
549
no overlap
overlap
550
Area Averaging
OpenGL Antialiasing
Use average area 1+2-12 as blending factor
Can enable separately for points, lines, or

polygons
glEnable(GL_POINT_SMOOTH);
glEnable(GL_LINE_SMOOTH);
glEnable(GL_POLYGON_SMOOTH);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
551
552
92
Accumulation Buffer
Applications
Compositing and blending are limited by

resolution of the frame buffer
Compositing
Image Filtering (convolution)
Whole scene antialiasing
Motion effects
- Typically 8 bits per color component
The accumulation buffer is a high resolution

buffer (16 or more bits per component) that
avoids this problem
Write into it or read from it with a scale factor
Slower than direct compositing into the frame
buffer
553
554
Basic Implementation
Strategies
A black box graphics system takes as
input a set of vertices and produces as
output set of pixels.
Implementation of a Renderer
The Outer Loop
The Graphics Pipeline
First, we choose which variable to use to

control the outer loop.
A pipeline renderer fits the description of

an object-oriented graphics system.
556
- object-oriented: loops over objects

also known as sort-last
for(each_object) render(object);
- image-oriented: loops over pixels

also known as sort-first
- Today, the pipeline is often implemented in

hardware for maximum speed.
for(each_pixel) assign_a_color(pixel);
557
558
93
The Four Major Tasks in

Rendering
Implementation of
Transformations
The geometric processing stage of the
pipeline involves five coordinate systems:
While rendering, we view the modeler as

a black box that produces vertices.
Likewise, display happens automatically
and is not of concern to the application.
- However, some display problems, such as

aliasing, can be improved at the application
level.
559
Object (world) coordinates

Eye (camera) coordinates
Clip coordinates
Normalized device coordinates
Window (screen) coordinates
Cohen-Sutherland
Clipping
Line-Segment Clipping
The 2D clipping problem:
A clipper decides which primitives, or

parts of primitives, appear on the display.
Clipping can occur at one or more places
in the viewing pipeline.
- Clipping can be handled entirely in 2D if it is
performed after projection to the viewport.
- In OpenGL, primitives are clipped against a 3D
view volume before projection and rasterization.
560
561
Dividing the Space with

Outcodes
Since clipping occurs in the inner loop,

we want to avoid intersection calculations.
- In particular, we want to replace division with
subtraction and bit operations.
562
Interpreting the Outcodes
Extend the sides of the window to infinity,

dividing the space into nine regions.
Assign a unique 4-bit number, or
outcode, to each region.
Let o1 and o2 be the outcodes for a given

line segment.
o1 = 0, o2 0
or vice versa
o1 & o2 = 0
o1 & o2 0
o1 = o2 = 0
563
564
94
Liang-Barsky Clipping
Intersection Tests
Use the parametric form for lines.
We can expect 4 intersections.
x ( ) = (1 ) x1 + x2 ,
y ( ) = (1 ) y1 + y2 ,
- This form is robust and needs no changes for
horizontal or vertical lines.
- As before, we extend the sides of the window to
infinity.
565
Computing Intersections
The i s occur out of order when the line

misses the window.
566
Polygon Clipping
The line hits the top of the window at

y
y
= max 1 .
y2 y1
Use line-clipping algorithms to clip the

edges of a polygon.
- Concave polygons pose problems because
they can generate more than one output
polygon.
- To avoid division, write it as
( y2 y1 ) = ymax y1.
All tests are stated in terms of ymax = ymax - y1, which
involves no floating point division.
We compute intersections only when a line needs to be
shortened, and we never shorten a line more than once.
567
568
Clipping Against the Top

of the Window
Tessellation
Clipping a convex polygon against a
rectangular window leaves at most one
convex polygon in the window.
Using similar triangles,
x3 = x1 + ( ymax y1 )
- Thus, we can divide, or tessellate, concave

polygons into convex polygons.
x2 x1
,
y2 y1
y3 = ymax .
569
570
95
Pipelining Clipping
Operations
Two Views of Clipping

We can think of a line-segment clipper
either graphically, or as a black box.
To clip against a rectangular window:
- Clipping against arbitrary polygons can be

accomplished by combining black box
components.
571
572
Clipping in Three
Dimensions
A Pipeline Clipper
The effect of successive clippers on a
polygon:
Line clipping against a bounded volume:
573
The Cohen-Sutherland
Algorithm in 3D
574
The Liang-Barsky
Algorithm in 3D
Add the equation z ( ) = (1 ) z1 + z2 .
Use a 6-bit outcode.

- The extra two bits indicate a point in front of or
behind the clipping volume.
- 3D parametric representation of the line.
Intersect the line with the six sides of the

view volume.
- Sides are represented by a normal vector n and
a point p0 on the plane.
575
576
96
Plane-Line Intersection
We must solve the equations

p( ) = (1 )p1 + p 2 ,
We want to know which objects are

obscured from the viewer so that we can
avoid rasterizing them.
n ( p( ) p 0 ) = 0.
is the intersection point.
- The object-space approach loops over each

object, determining its visibility by pairwise
comparison with other objects.
- The image-space approach loops over each
pixel, comparing all objects that are in the
pixel's line of sight.
n ( p0 p1 )
n ( p 2 p1 )
577
The Object-Space
Approach
578
The Object-Space
Algorithm
For any pair of polygons, we have 4

cases:
Step 1: Pick one out of k polygons and

compare it pairwise with the remaining
k - 1 polygons.
Step 2: Render the visible part.
Step 3: Repeat for the rest of the k - 1
polygons.
(a) B partially obscures A.

(b) A partially obscures B.
(c) A and B are both visible.
(d) B totally obscures A.
579
Object-Space Complexity
The Image-Space
Approach
For k polygons, the object-space

approach requires k2 comparisons to find
the hidden surfaces.
Cast a ray into the scene and choose the

intersection closest to the center of
projection.
580
- We can improve the algorithm to O(k log k) by

sorting the objects by their distance from the
camera.
581
582
97
Image-Space Complexity
Back-Face Removal
When k is large, the image-space

approach performs better than O(k2), the
complexity of the object-space approach.
An n x m display requires nmk
intersection tests, for a running time
proportional to k.
Also known as culling.

We see the front of a polygon if the
normal points toward the viewer.
583
584
Testing for Back-Facing

Polygons
Improving the Test
If is the angle between the normal and

the viewer, then the polygon is facing
forward if
All views in normalized device coordinates

are orthographic.
0
0
v=
1

0
90 90 or cos( ) 0.
We can test the 2nd condition easily by
n v 0.
view direction
surface
ax + by + cz + d = 0
We only need to check the sign of c.

585
586
The z-Buffer Algorithm
Basic Algorithm
The most widely used hidden-surface

removal algorithm.
It works in image space, but it loops over
the polygons rather than over the pixels.
It is incremental, and can be inserted into
the scan-conversion pipeline at little cost.
Color the pixel based on the polygon with

the smallest z value.
587
588
98
Incremental Version
The Painter's Algorithm
Write the equation for the plane in

differential form: a x + by + c z = 0.
Along a scan line,
y = 0
and
a
z = x.
c
Hidden-surface removal by back-to-front

rendering.
B appears
draw B first
behind A
z is constant.
589
Depth Sort
590
Two Difficult Cases
Order the polygons by their z extents.
In the first case, the best we can do is

divide one of the polygons into two.
In the second case, we must clip the
polygon against the volume.
- If two polygons overlap, the algorithm runs a

number of increasingly more difficult tests,
attempting to find an ordering.
591
The Scan-Line Algorithm
592
Scan Conversion
Combines scan conversion with hiddensurface removal.
Pixels can be set to a given color by a

function of the form
- Uses incremental depth calculations.

Similar to the z-Buffer algorithm, but it works one scan line
at a time rather than one polygon at a time.
write_pixel(int x, int y, int value);
- Values in screen coordinates are real numbers.

They must be rounded to integers.
593
594
99
The DDA Algorithm
Plotting Points
The digital differential analyzer was an

electromechanical device for simulating
differential equations.
A line satisfies the differential equation
dy / dx = m
where m is the slope.
For any x, we can compute a new value

for y using the formula
y = m x.
595
Drawing a Line in the

Frame Buffer
596
Slope Considerations
If we let x=1, then y=m.
We assume that m is between 0 and 1

and use symmetry for all other values.
effect of high slope
revised algorithm
for(x=x1; x <= x2; x++) {

y+=m;
write_pixel(x, round(y), color);
}
597
Bresenham's Algorithm
598
The Slope Condition
The standard algorithm used in hardware

and software rasterizers.
More efficient than the DDA Algorithm
because it avoids all floating-point
calculations.
The line segment connects the integer

points (x1,y1) and (x2,y2) and satisfies
y = mx + h
for 0 m 1.
599
600
100
Computational
Advantages
Using a Decision Variable

We have a choice between two pixels.
Choose the pixel closest to the ideal line.
Only the sign of d matters, so we can

replace d with a new decision variable
d = ( x2 x1 )( a b)
= x ( a b).
d = ab
d is an integer.
601
602
Scan Conversion of
Polygons
An Incremental Approach
Update d based on our last decision.
Raster displays made filled polygons

possible.
Unlike scan conversion of lines, where
one algorithm dominates, many viable
methods exist for polygons.
if d k > 0
2 y
d k +1 = d k
2( y x ) otherwise
603
Inside-Outside Testing
604
The Odd-Even Test
OpenGL only draws convex polygons, but

more general polygons arise in practice.
We need an efficient way to test whether
a given point is inside or outside the
polygon to fill general polygons correctly.
605
The crossing or odd-even test.

- Any ray emanating from a point inside the
polygon must cross an odd number of edges.
606
101
OpenGL and Concave

Polygons
The Winding Number

The number of times a point is encircled
by an edge of the polygon.
OpenGL provides tesselator objects to

preprocess concave polygons before
rendering.
- Add one for clockwise encirclements and

subtract one for counter-clockwise.
- If the winding number > 0, the point is inside.
mytess = gluNewTess();
gluTessBeginPolygon(mytess, NULL);
gluTessBeginContour(mytess);
for(i=0; i<nvertices; i++)
glTessVertex(mytess, vertex[i], vertex[i]);
gluTessEndContour();
gluTessEndPolygon(mytess);
607
OpenGL Tessellation
Options
We can rasterize the edges of a polygon

using Bresenham's algorithm.
- OpenGL uses the winding number to fill

polygons.
- The user can vary, for example, the direction of
encirclement.
609
Flood Fill
- Several algorithms exist for filling the polygon.

610
Scan-Line Algorithms
First choose a seed point.

Then, recursively color neighboring pixels
until encountering the polygon edge.
flood_fill(int x, int y) {
if(read_pixel(x, y) == WHITE) {
write_pixel(x, y, BLACK);
flood_fill(x-1, y);
flood_fill(x+1, y);
flood_fill(x, y-1);
flood_fill(x, y+1);
}
}
608
Displaying a Polygon
A variety of renderings are possible:
Generate pixels as they are displayed.

- Using the odd-even rule, we can group pixels in
spans:
- Parallel implementation is possible.
611
612
102
Generating Intersections
The Y-X Algorithm
If we process the vertices in order, it is

difficult to generate a good fill algorithm.
Create a bucket for each scan line and

sort the edges during processing.
613
Singularities
614
Resolving Singularities
When scan-line intersections occur at

vertices, we may face ambiguous cases:
Determine which case we have and be

sure to count the cases in a consistent
manner, or
Prevent special cases.
zero or two
edge crossings
- We can separate vertices and pixels using a

virtual frame buffer.
- Pixels lie at even locations and vertices at odd
locations.
- Alternatively, pixel locations can be located
halfway between integers.
one edge
crossing
615
Antialiasing
Area Averaging
Spatial domain aliasing is an artifact of

rasterization that makes straight lines look
jagged.
Arises from the discrete nature of the
frame buffer.
Many line segments map to the same
pattern of pixels.
Alter Bresenham's Algorithm to distribute

the value of x across a range of pixels.
616
- Shade each box by the percentage of the ideal

line that crosses it.
- The number of pixels is constant.

- Pixel locations are confined to a uniform grid.
- Pixels have fixed size and shape.
617
618
103
Time Domain Aliasing

A small object moving in front of the
projection plane may appear to flash on
and off due to the discrete sampling grid.
Hierarchical and Object-Oriented

Modeling
- One solution is to use more than one ray per

pixel.
619
Symbols
Instances
How can we store a model that may

include many sophisticated objects?
Each object is defined in its own

coordinate system, the model frame.
- We can take a nonhierarchical approach by

regarding objects as symbols.
- Symbols can include geometric objects, fonts,
and application-dependent sets of graphical
objects.
- The instance transformation allows us to

place copies of a symbol in the model at
specific locations, sizes, and orientations.
- It is a concatenation of a translation, a rotation,
and a scale (and possibly a shear).
M = TRS
621
Instance Transformation
622
Transformation Tables
Lines common to most OpenGL programs:
Each symbol has a unique identifier.
glLoadIdentity();
glTranslatef(...);
glRotatef(...);
glScalef(...);
glutSolidCylinder(...); /* symbols follow */
- A simple structure that is efficient for drawing.

- But, it contains no information about
relationships.
623
624
104
Hierarchical Models
First Attempt
If each wheel has radius r, a 360 rotation
moves the car a distance of 2r.
An automobile model composed of a

chassis and four wheels.
We would like to animate this automobile.
main() {
float s = ...; /* speed */
float d[3] = {...}; /* direction */
draw_right_front_wheel(s, d);
draw_left_front_wheel(s, d);
draw_right_rear_wheel(s, d);
draw_left_rear_wheel(s, d);
draw_chassis(s, d);
}
- Fails to exploit relationships among objects.

625
Graph Representation
626
Automobile Tree Structure
A graph consists of a set of vertices and

a set of edges.
A tree is a directed graph with no cycles.
A tree has one root vertex with no
parents.
A node without children is called a leaf.
627
Directed Acyclic Graphs

(DAGs)
We can store transformation matrices in

the nodes or in the edges.
628
A Robot Arm
We want to exploit the fact that all four

wheels are identical.
- Use a single prototype object.
- Many edges point to it, but none point back.
Symbols are built up from combinations of

primitives.
629
630
105
Incremental
Transformations
Joint Angles
Determine a components position with
respect to the main body of the object.
Traverse the arm starting from the base.

- Relative positioning ensures that the joints
always stay connected.
glRotatef(theta, 0.0, 1.0, 0.0);
base();
glTranslatef(0.0, h1, 0.0);
glRotatef(phi, 0.0, 0.0, 1.0);
lower_arm();
glTranslatef(0.0, h2, 0.0);
glRotatef(psi, 0.0, 0.0, 1.0);
upper_arm();
631
Tree Node Data Structure
Always use a pre-order traversal (depthfirst).
- A pointer to a display function.

- A homogeneous matrix that transforms the
node relative to its parent.
- Pointers to children.
- We can use a stack-based traversal or we can

use recursion.
633
Push and pop functions in OpenGL:

move to
head position
move to
leg position
634
Fine Points of Stack-Based

Traversal
Stack-Based Traversal
figure() {
glPushMatrix();
torso();
glTranslate();
glRotate();
head();
glPopMatrix();
glPushMatrix();
glTranslate();
glRotate();
left_upper_leg();
...
632
Tree Traversal
Tree node contains
OpenGL also provides a stack for color

and material properties.
- Use glPushAttrib and glPopAttrib to
save state during tree traversal.
move back
to torso
position
635
The programmer still must isolate the

graphics states explicitly.
There is no clear distinction between
modeling and rendering.
636
106
Use of Tree Data

Structures
Setting up a Node
A traversal algorithm based on the leftchild right-sibling structure is

independent of the model.
The following code fragment uses

OpenGL to set up the transformation for
the left-upper arm node:
glLoadIdentity();
glTranslatef(-(TORSO_RADIUS+UPPER_ARM_RADIUS),
0.9*TORSO_HEIGHT, 0.0);
glRotatef(theta[3], 1.0, 0.0, 0.0);
glGetFloatv(GL_MODELVIEW_MATRIX, lua_node.m);
lua_node.f = left_upper_arm;
lua_node.sibling = &rua_node;
lua_node.child = &lla_node;
typedef struct treenode {

GLfloat m[16];
void (*f)();
struct treenode *sibling;
struct treenode *child;
} treenode;
637
Traversing the Tree
638
Display Callback
Pre-order traversal looks like this:
The traversal method is generic; we use

the same display routine for every tree.
void traverse(treenode* root) {

if(root == NULL) return;
glPushMatrix();
glMultMatrixf(root->m);
root->f();
if(root->child != NULL)
traverse(root->child);
glPopMatrix();
if(root->sibling != NULL)
traverse(root->sibling);
}
void display(void) {
glLoadIdentity();
traverse(&torso_node);
glutSwapBuffers();
}
639
640
Animation
Difficulties
Studying kinematics involves describing

the position of the parts of the model
based only on the joint angles. Thus,
p = f ( ),
There may be no single-valued function of

the form =g(p).
- In this case, no sequence of angles can
achieve the desired state.
where is an array of joint angles.

- In animation, we are concerned with inverse
kinematics; we describe the desired state and
solve for the intermediate joint angles that
result in the correct state.
641
We may need to avoid obstacles or we

may have other physical constraints to
consider.
642
107
Key-Frame Animation
Graphical Objects
One approach to overcome the difficulties

in computer animation comes from handanimation techniques.
We have to deal with many graphical

objects besides polygons, such as
viewers, lights, and material properties.
- In key-frame animation, the animator positions

the objects at key points in their motion.
- The remaining frames are filled in by a process
of inbetweening, or interpolating, the joint
angles.
643
644
Scene Graphs
Node Types
We expand our notion of the contents of a

graph to describe all graphical objects.
We can either store extra attribute

information in the nodes, or we can create
new nodes to represent attributes.
- For instance, instead of storing transformation
matrices in the node data structure, we can
define a transformation node type.
- Another example is a separator node whose
function is to isolate two children that would
normally share a transformation.
645
Using Scene Graphs
646
A Simple Scene Graph API
The scene graph allows us to generate a

display program in a totally mechanical
fashion.
A high-level API used by the application

programmer.
- This is the approach taken by Open Inventor.

- Define classes to manipulate primitives,
attributes, and transformations as software
objects.
- Insert instances of these classes into the scene
graph to create different renderings.
647
648
108
The Node Class
The GLViewer Class
The public interface for the fundamental

class in the API:
The public interface for the viewer class:

class GLViewer {
public:
GLViewer();
~GLViewer();
void SetValue(Enum PName, Enum Type);
void Init(int argc, char **argv);
void Show(Node* N);
}
class Node {
public:
Node();
virtual ~Node();
virtual void Render();
void AddChild(Node*);
friend class GLViewer;
}
- The Show method initiates traversal of the

scene graph.
- Each node has its own render interface.

649
Object Types
enum Enum {
PERSPECTIVE, ORTHO, POSITION, AIMAT,
UPDIRECTION, ASPECT, NEAR, FAR, YANGLE,
BLACK, WHITE, RED, GREEN, YELLOW, BLUE,
MAGENTA, CYAN, GRAY, WIDTH, HEIGHT,
DEPTH, AMBIENT, DIFFUSE, SPECULAR,
SPOT_DIRECTION, DROPOFFRATE, CUTOFFANGLE,
EMISSION, SHININESS, TRANSLATION,
ROTATION, SCALE, BUFFER, SINGLE, DOUBLE,
RADIUS, STYLE, POINTSIZE, LINEWIDTH,
FILLED, LINE, POINT, BACKCOLOR
};
651
Geometry Nodes
The following code from a typical

application sets up a window on the
display and renders a scene graph.
GLViewer* MyViewer = new GLViewer;
MyViewer->Init(argc, argv);
MyViewer->SetValue(BACKCOLOR, GRAY);
MyViewer->SetValue(BUFFER, DOUBLE);
MyViewer->CreateWin("Working Hard", 500, 500);
MyViewer->Show(Root);
652
Camera Class
Colors, materials, and matrices are

common to all geometric objects
A simple camera interface makes use of

multiple set methods.
- Methods to set these attributes are provided by

the base class, while render functions are
provided by subclasses.
Color *myColor = new Color;
myColor->SetValue(red, green, blue);
myObject->SetColor(myColor);
650
Application Code
Symbolic constants specify node types.
653
- The camera type is passed to the constructor.

class Camera : public Node {
public:
Camera(Enum CType);
void SetValuev(Enum PName, float *v);
void SetValue(Enum PName, float v1,
float v2, float v3);
void SetValue(Enum PName, float v);
};
654
109
Specifying a Perspective
Camera
Lights
How do we turn lights on and off from
within the scene graph?
Camera *Camera1 = new Camera(PERSPECTIVE);

Camera1->SetValue(POSITION, 2.2, 0.9, 3);
Camera1->SetValue(AIMAT, 0, 0, 0);
Camera1->SetValue(UPDIRECTION, 0, 1, 0);
Camera1->SetValue(ASPECT, 1);
Camera1->SetValue(NEAR, 1);
Camera1->SetValue(FAR, 20);
Camera1->SetValue(YANGLE, 50);
- Use a switch object, and insert it at the spot

where the lighting state is supposed to change.
class Turnoff : public Node {
public:
TurnOff(Light*);
friend of the
void Render();
Light class
};
- In OpenGL, some of these attributes affect the

model-view matrix and others affect the
projection matrix.
Turnoff *Off1 = new Turnoff(Light1);

655
Materials
Transformations are also maintained

using SetValue methods.
class Transformation : public Node {
public:
Transformation();
void SetValue(Enum PName, ..., int Order);
void Render();
};
Material *myMat = new Material;

myMat->SetValue(DIFFUSE, 0, 0, 1, 1);
myMat->SetValue(AMBIENT, 0, 0, 1, 1);
myMat->SetValue(SPECULAR, 1, 1, 1, 1);
myMat->SetValue(SHININESS, 100);
- The Order member allows us to define an

ordered sequence of transformation matrices.
myObject->SetMaterial(myMat);
657
Creating The Robot Figure
658
Viewing The Figure
Cylinder *Torso = new Cylinder;
Material *RobotMat = new Material;

RobotMat->SetValue(DIFFUSE, 0, 0, 1, 1);
RobotMat->SetValue(AMBIENT, 0, 0, 1, 1);
RobotMat->SetValue(SPECULAR, 1, 1, 1, 1);
RobotMat->SetValue(SHININESS, 100);
Cylinder *ArmUL = new Cylinder;

...
Transform *ArmULT = new Transform;
ArmULT->SetValue(TRANSLATION, 0, 0, -UpLen, 0);
ArmULT->SetValue(ROTATION, -45, 0, 1, 0, 1);
ArmUL->SetTransform(ArmULT);
...
Torso->AddChild(ArmUL);
...
656
Transformations
Like lights, material nodes have a render

method and several methods to set
parameters.
Camera *Camera1 = new Camera(PERSPECTIVE);

Node *Root = new Node;
Root->AddChild(Camera1);
Root->AddChild(RobotMat);
Root->AddChild(Torso);
GLViewer *MyViewer = new GLViewer;
MyViewer->Show(Root);
659
660
110
Managing Multiple
Windows
Implementing the Viewer

Up to three independent viewers allowed.
class GLViewer {
private:
char *Name;
// window name
int I;
// instance index
static int Count;
// instance count
static Node *Root[3]; // scene graphs
static int BufType[3]; // single/double
static int Width[3];
static int Height[3];
static void Reshape0(int w, int h);
static void Display0();
...
};
GLViewer::~GLViewer() {
if(Root[I]) {
delete Root[I];
Root[I] = NULL;
}
}
661
One of Many Set Functions
663
Display and Reshape

Handlers
Root[0]->Traverse();
662
void GLViewer::GLInit() {
glutInitDisplayMode(BufType[I] | GLUT_RGB |
GLUT_DEPTH);
glutInitWindowSize(Width[I], Height[I]);
switch(I) {
case 0:
glutReshapeFunc(Reshape0);
glutDisplayFunc(Display0);
break;
...
}
glEnable(GL_DEPTH_TEST);
// other configuration options
}
664
Pass the root of a scene graph to the

viewers Show function.
tree traversal
starts here
if(BufType[0] == GLUT_DOUBLE)
glutSwapBuffers();
glFlush();
}
void GLViewer::Reshape0(int w, int h) {
Width[0] = w;
Height[0] = h;
}
Viewing a Scene Graph
void GLViewer::Display0() {
3 sets of
handlers
calls node
destructor
Initializing OpenGL
void GLViewer::SetValue(Enum PName, Enum Type) {

switch(PName) {
case BUFFER:
if(Type == DOUBLE)
BufType[I] = GLUT_DOUBLE;
else if(Type == SINGLE)
BufType[I] = GLUT_SINGLE;
break;
case BGCOLOR:
Root[I]->GetColor(Type, BGColor);
break;
default:
break;
}
}
GLViewer::GLViewer() {
I = Count++;
Name = "";
BufType[I] = GLUT_SINGLE;
Root[I] = NULL;
}
665
void GLViewer::Show(Node *N) {

GLInit();
Root[I] = N;
if(I == (Count - 1))
glutMainLoop();
}
666
111
Node Implementation
Geometry Nodes
This program, like the robot program,

uses a standard traversal algorithm.
Many methods can be shared among

geometry objects.
void Node::Traverse() {
if(!KeepMatrix) glPushMatrix();
different
for every
node type
class Geometry : public Node {

protected:
Color *ColorNode;
public:
void SetColor(Enum C) {
if(ColorNode == NULL)
ColorNode = new Color;
ColorNode->SetValue(C);
}
};
Render();
if(LeftChild != NULL)
LeftChild->Traverse();
if(!KeepMatrix) glPopMatrix();
if(RightSibling != NULL)
RightSibling->Traverse();
}
667
More Complex Objects
Render attribute nodes first.

void Polygon::Render() {
glPushAttrib(GL_ALL_ATTRIB_BITS);
if(ColorNode)
ColorNode->Render();
if(MatNode)
MatNode->Render();
if(TransNode)
TransNode->Render();
if(StyleNode)
StyleNode->Render();
for(int i=0; i<Size; i++)
glVertex3fv(Vertices[i]);
glEnd();
glPopAttrib();
}
class Polygon : public Geometry {

public:
Polygon();
void SetVerticesv(float v[][3], int);
void Render();
private:
float Vertices[1000][3];
int Size;
};
669
Other Tree Structures
670
CSG Trees
Tree and DAG structures are used in a

variety of other ways in computer
graphics.
Constructive solid geometry uses set

operations to create models out of
combinations of objects.
- union: A B means all points in either A or B.
- intersection: A B means all points in both A
and B.
- difference: A - B means all points in A that are
not in B.
- CSG Trees
- Shade Trees
- BSP Trees
- Quadtrees and Octrees
668
Rendering the Polygon
We can concentrate on the data and

rendering routines specific to the object.
671
672
112
Set Operations
Traversing CSG Trees

A CSG Tree is an expression tree.
- Internal nodes store operations.
- Leaf nodes store operands.
Use a post-order traversal to evaluate

the tree.
- Evaluate the children first from left to right, then
evaluate the node itself.
673
Shade Trees
674
Simple Phong Shade Tree
Expression trees applied to shading.

An efficient representation, and a good
platform for designing shaders.
Consider simple Phong shading without

the distance term:
I = kd Ld l n + k s Ls (r v ) + k L I .
675
676
BSP Trees
Quadtrees and Octrees
Binary space partition trees divide world

space and encapsulate spatial
relationships among groups of objects.
Quadtrees and octrees restrict separating

planes to parallel coordinate axes.
A quadtree subdivides a 2D space by
factors of 4.
- Use separating planes to group objects by

relative position.
- The partitioning enables fast visibility testing.
- An important algorithm in real-time animation
and games.
677
678
113
Quadtrees
Octrees
Exploits spatial redundancies.
Used to represent volume data sets

consisting of voxels.
Partitions 3D space into octants.
- A quadtree can reduce the amount of memory

required to store an image.
- It can also be used for visibility determination.
voxel
data
679
an octree
680
Representation of Curves
and Surfaces
Three types of object representation:
- explicit:
y = f (x ).
Curves and Surfaces

- implicit:
f ( x , y ) = 0.
- parametric:
p(u ) = [ x (u ) y (u ) z (u )]T .
Explicit Representation of
Lines
682
Explicit Representation of
Circles
The explicit form of a curve in 2D gives

the value of one dependent variable in
terms of the other independent variable.
y = f (x ).
- An explicit form may or may not exist. We write
y = mx + h
A circle has constant curvature.

- An explicit form exists only for half of the curve:
y = r2 x2 .
- The other half requires a second equation:
y = r2 x2 .
for the line even though the equation does not

hold for vertical lines.
- In addition, we must restrict the range of x.

f is a function, so there must be exactly one value of y for
every x.
683
684
114
Explicit Surfaces
Implicit Representations
A surface requires two independent

variables and two equations:
An implicit curve has the form

f ( x, y ) = 0.
y = ax + b,
z = cx + d .
- A line: ax + by + c = 0.
- A circle: x2 + y2 - r2 = 0.
Implicit functions test membership.
- The line cannot be in a plane of constant x.

- We cannot represent a sphere with only one
equation of the form
- Does the point (x, y) lie on the curve

determined by f ?
In general, there is no analytic way to find

the y value for a given x.
z = f ( x, y ).
685
Implicit Surfaces
One class of useful implicit surfaces is the

quadric surface.
- Algebraic surfaces are those for which the
function f(x, y, z) is the sum of polynomials.
- Quadric surfaces contain polynomials that have
degree at most 2.
- A plane: ax + by + cz + d = 0.
- A sphere: x2 + y2 + z2 - r2 = 0.
Implicit curve representations are difficult

to use in 3D.
687
Parametric Form
y = y (u ),
688
Matrix Notation
Expresses the value of each spatial

component in terms of an independent
variable u, the parameter:
x = x (u ),
686
Algebraic Surfaces
In three dimensions, a surface is

described by the implicit form
f ( x, y , z ) = 0.
The parametric form describes the locus

of points being drawn as u varies:
z = z (u ).
- 3 explicit functions, 1 independent variable.

- Same form in 2D and 3D.
The most flexible and robust form for

computer graphics.
p(u ) = [ x (u ) y ( u ) z (u )]T
689
690
115
Derivative of the Curve
Parametric Surfaces
The derivative is the velocity with which

the curve is traced out:
A surface requires two independent

variables and three equations:
dx (u ) du
dp ( u )
= dy (u ) du .
du
dz (u ) du
x ( u, v )
p(u, v ) = y (u, v ).
z (u, v )
- It points in the direction tangent to the curve.
691
Partial Derivatives of the

Surface
The Normal to the Tangent

Plane
The tangent plane at each point on the

surface is determined by
The cross product of the derivative

vectors is the normal vector to the plane:
x (u, v ) u
x ( u , v ) v
p
p
= y (u, v ) u and
= y (u, v ) v .
u
v
z (u, v ) u
z (u, v ) v
692
693
n=
p p
.
u v
694
Parametric Polynomial
Curves
Implementation Details
Most useful for computer graphics are

curves for which the parametric functions
are polynomials in u.
There is no coupling among the x, y, and

z components.
n
k
- independent equations p (u ) = u ck ,
k =0
- A polynomial parametric curve of degree n:

having n + 1 degrees of freedom.
- u can be anything, but
we assume 0 u 1.
p( u ) = u k c k .
k =0
- The coefficient matrices ck give us 3(n+1)

degrees of freedom.
695
696
116
Parametric Polynomial
Surfaces
Design Criteria
Why we prefer parametric polynomials of
low degree:
n m
p(u, v ) = cij ui v j
- Local control of shape,

- Smoothness and continuity,
- Ability to evaluate derivatives,
- Stability,
- Ease of rendering.
i = 0 j =0
A surface patch:
- Specify 3(n+1)(m+1) coefficients.
- Let n = m, and let u and v vary over the
rectangle 0 u, v 1.
697
698
Smoothness
Control Points
Smoothness guaranteed because our

polynomial equations are differentiable.
Difficulties arise at the join points.
We prefer local control for stability.

- The most common interface is a group of
control points.
- In this example, the curve passes through, or

interpolates, some of the control points, but
only comes close to, or approximates, others.
699
Parametric Cubic
Polynomial Curves
Matrix Notation
3
Choosing the degree:
p( u ) = c k u k = uT c,
- High degree allows many control points, but

computation is expensive.
- Low degree may mean low level of control.
k =0
the coefficient
matrix to be
determined
where
control
points
c0
1
c kx
c
u
1
c = , u = 2 , c k = c ky .

c2
u
c kz
c
u 3

3
The compromise: use low-degree curves

over short intervals.
- Most designers work with cubic polynomial
curves.
700
701
702
117
Evaluating the Control

Points
Interpolation
An interpolating polynomial passes
through its control points.
We seek coefficients c0, c1, c2, c3

satisfying the four conditions:
- Suppose we have four controls points
p 0 = p ( 0) = c 0 ,
xk
p k = yk , for 0 k 3.

zk
p1 = p(1 3) = c 0 + 1 3 c1 + (1 3) 2 c 2 + (1 3) 3 c 3 ,
p 2 = p( 2 3) = c 0 + 2 3 c1 + ( 2 3) 2 c 2 + ( 2 3) 3 c 3 ,
p3 = p(1) = c 0 + c1 + c 2 + c 3.
- We let u vary over the interval [0,1], giving us

four equally spaced values: 0, 1/3, 2/3, 1.
703
Interpolating Geometry
Matrix
Matrix Notation
In matrix notation p = Ac, where
0
p0
1 0
p
1 1 3 (1 3) 2
1
p = and A =
2
p
2
1 2 3 ( 2 3)
p
1 1
1
3
a column vector
of row vectors
704
(1 3)3
.
( 2 3) 3
1
0
0
0
0
1
5 .5
4.5
9
1
M I = A 1 =
22.5
4.5
18
9
4.5 13.5 13.5 4.5

The desired coefficients are
c = M I p.
nonsingular: we
will use its inverse
705
Joining Interpolating
Segments
706
Blending Functions
Use the last control point of one segment

as the first control point of the next
segment.
Substituting the interpolating coefficients

into our polynomial:
p(u ) = uT c = uT M I p.
Let
p(u ) = b(u )T p, where b(u ) = MTI u.
The b(u) are the blending polynomials.

- To achieve smoothness in addition to
continuity, we will need additional constraints
on the derivatives.
707
708
118
Visualizing the Curve

Using Blending Functions
The Cubic Interpolating

Patch
The effect on the curve of an individual

control point is easier to see by studying
its blending function.
A bicubic surface patch:
3 3
p(u, v ) = u i v j c ij .
i =0 j =0
709
710
Solving the Surface

Equations
Matrix Notation
In matrix form, the patch is defined by
p(u, v ) = uT Cv,
By setting v = 0, 1/3, 2/3, 1 we can

sample the surface using curves in u:
- The column vector v = [1 v v2 v3]T.

- C is a 4 x 4 matrix of column vectors.
uT M I P = uT CA T .
- The coefficient matrix C is computed by
16 equations in 16 unknowns.
C = M I PMTI .
- The equation for the surface becomes
p(u, v ) = uT M I PMTI v.
711
712
Hermite Curves and

Surfaces
Blending Patches
Extending our use of blending
polynomials to surfaces:
Use the data at control points differently in

an attempt to get smoother results.
3 3
- We insist that the curve interpolate the control

points only at the two ends, p0 and p3.
p(u, v ) = bi (u )b j ( v )pij .
i =0 j =0
- 16 simple patches form a surface.

- Also known as tensor-product surfaces.
- These surfaces are not very smooth.
p ( 0) = p 0 = c 0 ,
p(1) = p3 = c 0 + c1 + c 2 + c 3.
But they are separable, meaning they allow us to work

with functions in u and v independently.
713
714
119
Additional Conditions
Matrix Form
The derivative is a quadratic polynomial:
dx du
p (u ) = dy du = c1 + 2uc 2 + 3u 2c 3.
dz du
call this q
- We now can derive two additional conditions:
p3 = p (1) = c1 + 2c 2 + 3c 3.
- MH is the Hermite geometry matrix.

715
The Hermite Geometry

Matrix
MH
716
Smoothness of the
Hermite Form
Using blending functions p(u)=b(u)Tq,
0
0
0
1
0
0
1
0
.
=
3 3 2 1
2 2 1
1
2u 3 3u 2 + 1
2u 3 + 3u 2
b(u ) = MTH u = 3
.
u 2u 2 + u
3
2
u u
The resulting polynomial is
- These polynomials have no zeros inside the

interval (0, 1), which makes them smoother
than interpolating functions.
p(u ) = uT M H q.
0 0 0
1 1 1
c.
1 0 0
1 2 2
The desired coefficient matrix is

c = M H q.
p0 = p (0) = c1,
p 0 1
p 1
3 =
p0 0
p 0
3
717
Hermite Form at Join

Points
718
Parametric Continuity
By matching first derivatives at join points,

the first derivative is continuous over all
segments.
Continuity is enforced by matching

polynomials at join points.
- C0 parametric continuity:
q x ( 0)
p x (1)
p(1) = p y (1) = q(0) = q y (0).
p z (1)
q z (0)
719
720
120
Another Approach:
Geometric Continuity
C1 Parametric Continuity
Matching derivatives at the join points
gives us C1 continuity:
If the derivatives are proportional, then we

have geometric continuity.
p x (1)
q x (0)
p (1) = p y (1) = q (0) = q y (0).
p z (1)
q z (0)
different
magnitude
same
direction
- One extra degree of freedom.

- Extends to higher dimensions.
721
Bezier Curves and

Surfaces
722
Bezier Geometry Matrix
Bezier added control points to manipulate

derivatives.
- The two derivative conditions become
3p1 3p 0 = c1,
We solve c=MBp, where
0
1
3 3
MB =
3 6
1 3
0 0
0 0
.
3 0
3 1
The cubic Bezier polynomial is thus
3p3 3p 2 = c1 + 2c 2 + 3c 3.
p(u ) = uT M B p.
723
724
Properties of Bernstein
Polynomials
Bezier Blending Functions

- These functions are Bernstein polynomials:
All zeros are either at u = 0 or u = 1.

- Therefore, the curve must be smooth.
The value of u never exceeds 1.

- p(u) is a convex sum, so the curve lies inside
the convex hull of the control points.
bkd (u ) =
d!
u k (1 u ) d k .
k!( d k )!
725
726
121
Bezier Surface Patches
Convex Hull Property in 3D
Using a 4 x 4 array of control points P,
The patch is inside the convex hull of the

control points and interpolates the four
corner points p00, p03, p30, p33.
two blending functions

3 3
p(u, v ) = bi (u )b j (u )pij
i =0 j =0
= uT M B PMTB v.
727
Bezier Patch Edges
p
(0,0) = 3( p10 p00 ),
u
p
(0,0) = 3( p01 p 00 ).
v
The twist vector draws the center of the

patch away from the plane.
2p
(0,0) = 9( p00 p01 + p10 p11 ).
uv
729
Cubic B-Splines
730
The Cubic B-Spline Curve
Bezier curves and surfaces are widely

used.
The control points now reside in the

middle of a sequence:
- One limitation: C0 continuity at the join points.
{pi 2 , pi 1, pi , pi +1}.
B-Splines are not required to interpolate

any control points.
- The curve spans only the distance between the

middle two control points.
- Relaxing this requirement makes it possible to

enforce greater smoothness at join points.
728
Bezier Patch Corners
Partial derivatives in the u and v directions

treat the edges of the patch as 1D curves.
731
732
122
Formulating the Geometry

Matrix
Join Point Continuity
We are looking for a polynomial
Construct q from the same matrix as p:
pi 3
pi 2
p
p
i 1
i 2
and q =
p=
.
pi
pi 1
p
pi +1
i
p(u ) = u Mp,
T
where p is the matrix of control points.

- M can be made to enforce a number of
conditions.
- In particular, we can impose continuity
requirements at the join points.
- Now let q(u) = uTMq.

- Constraints on derivates allow us to control
smoothness.
733
Symmetric
Approximations
We apply the same symmetry conditions

to p(1), the other endpoint.
- We now have four equations in the four
unknowns c0, c1, c2, c3:
1
p(0) = q(1) = ( pi 2 + 4pi 1 + pi ),
6
1
p (0) = q (1) = ( pi pi 2 ),
2
p(u ) = uT c.
735
The B-Spline Geometry

Matrix
736
B-Spline Blending
Functions
Once we have the coefficient matrix, we

can solve for the geometry matrix:
734
Additional Conditions
Enforcing symmetry at the join points is a

popular choice for M.
Two conditions that satisfy symmetry are
4
1
1
3 0
3
1
MS =
6 3 6 3
1 3 3
The blending functions are
(1 u )3
2
3
1 4 6u + 3u
6 1 + 3u + 3u 2 3u 3
u3
0
0
.
0
1
737
738
123
Advantages of B-spline
Curves
B-Splines and Bases
In sequence, B-spline curve segments

have C2 continuity at the join points.
Each control point affects four adjacent

intervals.
u < i 2,
0
b ( u + 2) i 2 u < i 1,
0
b1 (u + 1) i 1 u < i,
Bi (u ) =
i u < i + 1,
b2 (u )
b3 (u 1) i + 1 u < i + 2,
u i + 2.
0
- They are also confined to their convex hulls.
On the other hand, we need more control

points than we did for Bezier curves.
739
Spline Basis Function
740
Approximating Splines
A single expression for the spline curve

using basis functions:
Each Bi is a shifted version of a single

function.
- Linear combinations of the Bi form a piecewise
polynomial curve over the whole interval.
m 1
p(u ) = Bi (u )pi .
i =1
741
Spline Surfaces
742
General B-Splines
The same form as Bezier surfaces:

3 3
Polynomials of degree d between n knots

u0,...,un:
i =0 j =0
p(u ) = c jk u j , uk < u < uk +1
p(u, v ) = bi (u )b j (u )pij .
j =0
- But one segment per patch, instead of nine!
- If d = 3, then each interval contains a cubic

polynomial: 4n equations in 4n unknowns.
- A global solution that is not well-suited to
computer graphics.
- However, they are also much smoother.
743
744
124
The Cox-deBoor
Recursion
Recursively Defined
B-Splines
A particular set of basis splines is defined

by the Cox-deBoor recursion:
Linear interpolation of polynomials of

degree k produces polynomials of degree
k + 1.
1 uk u uk +1,
Bk 0 =
0 otherwise;
u uk
Bk ,d 1 ( u ) +
Bkd =
uk + d uk
uk + d u
B
(u ).
uk + d +1 uk +1 k +1,d 1
745
Uniform Splines
746
Nonuniform B-Splines
Equally spaced knots.
Repeated knots pull the spline closer to

the control point.
- Open splines extend the curve by repeating
the endpoints.
- Knot sequences:
{0,0,0,0,1,2,K, n 1, n, n, n, n}
{0,0,0,0,1,1,1,1}.
periodic
uniform
B-spline
often used
cubic Bezier curve
- Any spacing between the knots is allowed in

the general case.
747
748
The NURBS Basis

Functions
NURBS
Use weights to increase or decrease the
importance of a particular point.
A 4D B-spline
x (u ) n
q(u ) = y (u ) = Bi ,d (u ) wi pi .
i =0
z (u )
- The weighted homogeneous-coordinate

representation of a control point pi=[xi yi zi] is
xi
y
i
q i = wi .
zi

1
- Derive the w component from the weights:

n
w(u ) = Bi ,d (u ) wi .
i =0
749
750
125
Nonuniform Rational
B-Splines
Rendering of Curves and

Surfaces
Each component of p(u) is a rational

function in u.
Compute ray intersections pixel-by-pixel.

- Too slow for real-time use.
- We use perspective division to recover the 3D

points:
p( u ) =
Sample the surface and approximate with

polygons.
n
1
B ( u ) wi pi
q(u ) = i =n0 i ,d
.
w( u )
i =0 Bi ,d (u ) wi
- These curves are invariant under perspective

transformations.
- They can approximate quadricsone
representation for all types of curves.
751
Polynomial Evaluation
Methods
Forward differences defined iteratively:
( 0)p( uk ) = p(uk ),
p( u ) = c i u , 0 u 1
i
i =0
(1) p(uk ) = p(uk +1 ) p(uk ),
Horner's method:
( m +1)p(uk ) = ( m ) p(uk +1 ) ( m ) p(uk ).
p(u ) = c 0 + u (c1 + u ( c 2 + u (K + c n u ))).
If uk+1 - uk = h is constant, then (n)p(uk) is

constant for all k.
- If the points {ui} are spaced uniformly, we can

use the method of forward differences.
752
The Method of Forward

Differences
Our standard representation:

n
753
Computing The ForwardDifference Table
754
Using the Table
For the cubic polynomial

p(u ) = 1 + 3u + 2u 2 + u 3 ,
we construct the table as follows:
Compute successive values of p(uk):
compute
these
( m 1) ( pk +1 ) = ( m ) p(uk ) + ( m 1) p(uk ).
755
756
126
Subdivision Curves and

Surfaces
Recursive Subdivision of Bezier

Polynomials: deCasteljau Algorithm
A process of iterative refinement that

produces smooth curves and surfaces.
Break the curve into two separate

polynomials, l(u) and r(u).
- The convex hulls for l and r must lie inside the

convex hull for p: the variation-diminishing
property:
757
Efficient Computation of
the Subdivision
758
Using Subdivision
Methods
Curve subdivision extends to surfaces.
l 0 = p0 ,
1
l1 = ( p0 + p1 ),
2
1
1
l1 + ( p1 + p 2 ) ,
2
2
1
l 3 = r0 = (l 2 + r1 ).
2
l2 =
- Since Bezier subdivision is efficient, we will

often convert other curves to Bezier form for
rendering by subdivision methods.
Requires only shifts and adds!
759
760
Rendering Quadric
Surfaces
Algebraic Surfaces
Quadric surfaces are described by
implicit equations of the form
pT Ap + bT p + c = 0.
Finding the intersection of a quadric with a

ray involves solving a scalar quadratic
equation.
- 10 independent coefficients A, b, and c

determine the quadric.
- Ellipsoids, paraboloids, and hyperboloids can
be created by different groups of coefficients.
- Equations for quadric surfaces can be reduced
to standard form by affine transformation.
761
- We substitute ray p = p0+d and use the

quadratic formula.
- Derivatives determine the normal at a given
point.
762
127
Quadric Objects in
OpenGL
Bezier Curves in OpenGL
OpenGL supports disks, cylinders and

spheres with quadric objects.
Creating a 1D evaluator:
glMap1f(type, u_min, u_max, stride,
order, point_array);
GLUquadricObj *qobj;
qobj = gluNewQuadric();
-type: points, colors, normals, textures, etc.

-u_min, u_max: range.
-stride: points per curve segment.
-order: degree + 1.
-point_array: control points.
- Choose wire frame rendering with

gluQuadricDrawStyle(qobj, GLU_LINE);
- To draw an object, pass the reference:

gluSphere(qobj, RADIUS, SLICES, STACKS);
763
Drawing the Curve
Using a 2D evaluator:
- The user enables them with glEnable.

typedef float point[3];
point data[] = {...};
glMap1f(GL_MAP_VERTEX_3, 0.0, 1.0, 3, 4, data);
glEnable(GL_MAP_VERTEX_3);
glBegin(GL_LINE_STRIP)
for(i=0; i<100; i++) glEvalCoord1f(i/100.);
glEnd();
765
Example: Bezier Teapot

Vertex
information goes in an array:
Initialize the grid for wireframe rendering:

void myInit() {
glEnable(GL_MAP2_VERTEX_3);
glMapGrid2f(20, 0.0, 1.0, 20, 0.0, 1.0);
}
glMap2f(GL_MAP_VERTEX_3,0,1,3,4,0,1,12,4,data);
...
for(j=0; j<99; j++) {
glBegin(GL_QUAD_STRIP);
for(i=0; i<=100; i++) {
glEvalCoord2f(i/100., j/100.);
glEvalCoord2f((i+1)/100., j/100.);
}
glEnd();
}
766
Drawing the Teapot
GLfloat data[32][4][4];
764
Bezier Surfaces in OpenGL
One evaluator call takes the place of

vertex, color, and normal calls.
767
for(k=0; k<32; k++) {

glMap2f(GL_MAP2_VERTEX_3, 0, 1, 3, 4,
0, 1, 12, 4, &data[k][0][0][0]);
for (j=0; j<=8; j++) {
for (i=0; i<=30; i++)
glEvalCoord2f((GLfloat)i/30.0,
(GLfloat)j/8.0);
glEnd();
for (i=0; i<=30; i++)
glEvalCoord2f((GLfloat)j/8.0,
(GLfloat)i/30.0);
glEnd();
}
}
768
128

Computer Graphics: Course Notes

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Computer Graphics: Course Notes

Transféré par

Droits d'auteur :

Formats disponibles

COURSE NOTES:

- Graphics hardware, raster scan conversion

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

The final grade is computed as follows:

SUN Blade workstations (NAC 7/105)

- Midterm exam: 25%

- Solaris 8 Operating System (UNIX)

Substantial programming assignments are

You can also program at home on your

Teaching Assistant (TA): Mr. Hadi Fadaifard

See class web page for all class info such

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Part 2: Basic OpenGL

- What is Computer Graphics?

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Part 3: Three-Dimensional Graphics

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

These presentations accompany the

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Part 5: Objected-Oriented Modeling

Part 6: Curves and Surfaces

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

- Explicit, Implicit, and Parametric Forms

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

What is Computer Graphics?

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Computer graphics deals with all aspects

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Where did this image come from?

Application: The object is an artists

What hardware/software did we need to

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Traditional problem-solving process:

Any shortcomings of the tentative solution are

A student with experience in graphics should

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Basic Graphics System

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Can be used as a line-drawing device

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Computer Graphics: 1950-1960

Computer Graphics: 1960-1970

Cost of refresh for CRT too high

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Ivan Sutherlands PhD thesis at MIT

- Sutherland also created many of the now

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Graphics stored in display list (display file) on

Direct View Storage Tube

Computer Graphics: 1970-1980

- Did not require constant refresh

Allowed for standard software

GKS: European effort

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Angel: Interactive Computer Graphics 4E Addison-Wesley 2006

Workstations and PCs