CSC 472

COURSE NOTES:
COMPUTER GRAPHICS
George Wolberg
Department of Computer Science
City College of New York
New York, NY 10031
wolberg@cs.ccny.cuny.edu
1
Introduction to Computer
Graphics
Prof. George Wolberg
Dept. of Computer Science
2
Angel/Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012
Course Description
Intense introduction to computer graphics.
Intended for advanced undergraduate and
graduate students.
Topics include:
- Graphics hardware, raster scan conversion
- OpenGL API
- Geometric transformations, 3D viewing
- Geometric modeling, curves and surfaces
- Shading, texture mapping, compositing
3
Syllabus
Week
1
2-3
4-5
6
7
8-9
10
11
12-14
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
4
Texts
Required Text:
- Edward Angel and Dave Shreiner, Interactive
Computer Graphics: A Top-Down Approach
With Shader-Based OpenGL, 6th Edition,
Addison-Wesley, 2012.
Supplementary Text:
- Dave Shreiner, Mason Woo, Jackie Nieder, and
Tom Davis, OpenGL Programming Guide, 6
th
Edition, Addison-Wesley, 2007.
The definitive OpenGL programming reference
5
Grading
The final grade is computed as follows:
- Midterm exam: 25%
- Final exam: 25%
- Homework programming assignments: 50%
Substantial programming assignments are
due every three weeks.
Proficiency in C/C++ is expected.
Prereqs: CSc 30100 and CSc 32200
6
Contact Information
Prof. Wolberg
- Office hours:
Wednesdays 3:30-4:30pm, 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
2
7
Objectives (1)
These presentations accompany the textbook
Interactive Computer Graphics, A Top-down
Approach with Shader-Based OpenGL (Sixth
Edition) by Edward Angel and Dave Shreiner.
They form the basis for 15 weeks of lectures.
The lectures cover Chapters 1-10.
Programs in C/C++ will be assigned to
reinforce understanding of the material.
8
Objectives (2)
Broad introduction to Computer Graphics
- Software
- Hardware
- Applications
Top-down approach
Shader-Based OpenGL compatible with
- OpenGL 3.1 (and later)
- Open GL ES 2.0
- webGL
9
Prerequisites
Good programming skills in C (or C++)
Basic Data Structures
- Linked lists
- Arrays
Geometry
Simple Linear Algebra
10
Computer Resources
Windows Lab (NAC 7/118, NAC 7/107)
Linux Lab (NAC 7/105)
You can also program at home on your
PC/Mac/Linux computer. Use the C/C++
programming language.
11
OpenGL Resources
Can run OpenGL on any system
- Windows: check graphics card properties for
level of OpenGL supported
- Linux
- Mac: need extensions for 3.1 equivalence
Get GLUT from web if needed
- Provided on Macs
- freeglut available on web
Get GLEW from web
WebGL: most newer browsers
12
References
www.opengl.org
- Standards documents
- Sample code
The OpenGL Programmers Guide (the
Redbook) 6
th
Edition
The definitive reference for OpenGL 2.x
OpenGL Shading Language, 3
rd
Edition
OpenGL ES 2.0 Programming Guide
All Addison-Wesley Professional
3
13
Outline: Part 1
Part 1: Introduction
Text: Chapter 1
Lectures 1-3
- What is Computer Graphics?
- Applications Areas
- History
- Image formation
- Basic Architecture
14
Outline: Part 2
Part 2: Basic OpenGL
Text: Chapter 2
Lectures 4-9
- Architecture
- GLUT
- Simple programs in two and three dimensions
- Basic shaders and GLSL
- Interaction
15
Outline: Part 3
Part 3: Three-Dimensional Graphics
Text: Chapters 3-5
Lectures 10-18
- Geometry
- Transformations
- Homogeneous Coordinates
- Viewing
- Lighting and Shading
16
Outline: Part 4
Part 5: Implementation
Text: Chapter 6
Lectures: 19-21
- Approaches (object vs image space)
- Implementing the pipeline
- Clipping
- Line drawing
- Polygon Fill
- Display issues (color)
17
Outline: Part 5
Part 4: Discrete Methods
Text: Chapter 7
Lectures 22-26
- Buffers
- Texture Mapping
- Shader Applications
- Compositing and Transparency
18
Outline: Part 6
Part 6: Hierarchy and Procedural Methods
Text: Chapters 8-9
Lectures: 27-28
Tree Structured Models
- Traversal Methods
- Scene Graphs
- Particle Systems
4
19
Outline: Part 7
Part 7: Curves and Surfaces
Text: Chapter 10
Lectures: 29-30
What is Computer Graphics?
City College or New York
21
Objectives
In this lecture, we explore what computer
graphics is about and survey some
application areas
But we start with a historical introduction
22
Computer Graphics
Computer graphics deals with all aspects
of creating images with a computer
- Hardware
- Software
- Applications
23
Related Fields
Image Processing
Scene
Description
Computer
Graphics
Computer
Vision
Image
24
Example
Where did this image come from?
What hardware/software did we need to
produce it?
5
25
Preliminary Answer
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
26
Approaches a Student
Should Bring to a Problem
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.
27
Think Visually
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
28
Basic Graphics System
Input devices
Output device
Image formed in frame buffer
29
CRT
Can be used as a line-drawing device
(vector graphics) or to display contents of
frame buffer (raster graphics)
30
Computer Graphics: 1950-1960
Computer graphics goes back to the
earliest days of computing
- 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
6
31
Wireframe graphics
- Draw only lines
Sketchpad
Display Processors
Storage tube
wireframe representation
of sun object
32
Project Sketchpad
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
33
Display Processor
Rather than have host computer try to refresh
display use a special purpose computer called
a display processor (DPU)
Graphics stored in display list (display file) on
display processor
Host compiles display list and sends to DPU
34
Direct View Storage Tube
Created by Tektronix
- Did not require constant refresh
- Standard interface to computers
Allowed for standard software
Plot3D in Fortran
- Relatively inexpensive
Opened door to use of computer graphics for CAD
community
35
Raster Graphics
Beginning of graphics standards
- IFIPS
GKS: European effort
Becomes ISO 2D standard
Core: North American effort
3D but fails to become ISO standard
Workstations and PCs
36
Raster Graphics
Image produced as an array (the raster)
of picture elements (pixels) in the frame
buffer
7
37
Raster Graphics
Allow us to go from lines and wireframes
to filled polygons
38
PCs and Workstations
Although we no longer make the
distinction between workstations and PCs,
historically they evolved from different
roots
- Early workstations characterized by
Networked connection: client-server model
High-level of interactivity
- Early PCs included frame buffer as part of user
memory
Easy to change contents and create images
39
Realism comes to computer graphics
smooth shading environment
mapping
bump mapping
40
Special purpose hardware
- Silicon Graphics geometry engine
VLSI implementation of graphics pipeline
Industry-based standards
- PHIGS
- RenderMan
Networked graphics: X Window System
Human-Computer Interface (HCI)
41
OpenGL API
Completely computer-generated feature-
length movies (Toy Story) are successful
New hardware capabilities
- Texture mapping
- Blending
- Accumulation, stencil buffers
42
Computer Graphics: 2000-
Photorealism
Graphics cards for PCs dominate market
- Nvidia, ATI
Game boxes and game players determine
direction of market
Computer graphics routine in movie
industry: Maya, Lightwave
Programmable pipelines
8
Image Formation
44
Objectives
Fundamental imaging notions
Physical basis for image formation
- Light
- Color
- Perception
Synthetic camera model
Other models
45
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
- Cameras
- Microscopes
- Telescopes
- Human visual system
46
Elements of Image Formation
Objects
Viewer
Light source(s)
Attributes that govern how light interacts
with the materials in the scene
Note the independence of the objects,
viewer, and light source(s)
47
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
48
Ray Tracing and
Geometric Optics
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.
9
49
Luminance and Color Images
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!
50
Three-Color Theory
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
51
Shadow Mask CRT
52
Additive and Subtractive Color
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
- Form a color by filtering white light with cyan
(C), Magenta (M), and Yellow (Y) filters
Light-material interactions
Printing
Negative film
53
Pinhole Camera
x
p
= -d(x/z) y
p
= -d(y/z)
Use trigonometry to find projection of a point
These are equations of simple perspective
z
p
= -d
54
Synthetic Camera Model
center of projection
image plane
projector
p
projection of p
10
55
Advantages
Separation of objects, viewer, light sources
Two-dimensional graphics is a special case
of three-dimensional graphics
Leads to simple software API
- Specify objects, lights, camera, attributes
- Let implementation determine image
Leads to fast hardware implementation
56
Global vs Local Lighting
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
57
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
ray tracing is slow and not well-suited for
interactive applications
Ray tracing with GPUs is close to real time
Models and Architectures
59
Objectives
Learn the basic design of a graphics system
Introduce pipeline architecture
Examine software components for an
interactive graphics system
60
Image Formation Revisited
Can we mimic the synthetic camera model
to design graphics hardware software?
Application Programmer Interface (API)
- Need only specify
Objects
Materials
Viewer
Lights
But how is the API implemented?
11
61
Physical Approaches
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
- Slow
- Must have whole data base
available at all times
Radiosity: Energy based approach
- Very slow
62
Practical Approach
Process objects one at a time in the order
they are generated by the application
- Can consider only local lighting
Pipeline architecture
All steps can be implemented in hardware
on the graphics card
application
program
display
63
Following the Pipeline:
Vertex Processing
Much of the work in the pipeline is in converting
object representations from one coordinate
system to another
- Object coordinates
- Camera (eye) coordinates
- Screen coordinates
Every change of coordinates is equivalent to a
matrix transformation
Vertex processor also computes vertex colors
64
Projection
Projection is the process that combines
the 3D viewer with the 3D objects to
produce the 2D image
- 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
Primitive Assembly
Vertices must be collected into geometric
objects before clipping and rasterization
can take place
- Line segments
- Polygons
- Curves and surfaces
66
Clipping
Just as a real camera cannot see the
whole world, the virtual camera can only
see part of the world or object space
- Objects that are not within this volume are said
to be clipped out of the scene
12
67
Rasterization
If an object is not clipped out, the appropriate
pixels in the frame buffer must be assigned colors
Rasterizer produces a set of fragments for each
object
Fragments are potential pixels
- Have a location in frame bufffer
- Color and depth attributes
Vertex attributes are interpolated over objects by
the rasterizer
68
Fragment Processing
Fragments are processed to determine
the color of the corresponding pixel in the
frame buffer
Colors can be determined by texture
mapping or interpolation of vertex colors
Fragments may be blocked by other
fragments closer to the camera
- Hidden-surface removal
69
The Programmers Interface
Programmer sees the graphics system
through a software interface: the
Application Programmer Interface (API)
70
API Contents
Functions that specify what we need to
form an image
- Objects
- Viewer
- Light Source(s)
- Materials
Other information
- Input from devices such as mouse and keyboard
- Capabilities of system
71
Object Specification
Most APIs support a limited set of
primitives including
- Points (0D object)
- Line segments (1D objects)
- Polygons (2D objects)
- Some curves and surfaces
Quadrics
Parametric polynomials
All are defined through locations in space
or vertices
72
Example (old style)
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( );
type of object
location of vertex
end of object definition
13
Put geometric data in an array
Send array to GPU
Tell GPU to render as triangle
Example (GPU based)
73
vec3 points[3];
points[0] = vec3(0.0, 0.0, 0.0);
points[1] = vec3(0.0, 1.0, 0.0);
points[2] = vec3(0.0, 0.0, 1.0);
74
Camera Specification
Six degrees of freedom
- Position of center of lens
- Orientation
Lens
Film size
Orientation of film plane
75
Lights and Materials
Types of lights
- Point sources vs distributed sources
- Spot lights
- Near and far sources
- Color properties
Material properties
- Absorption: color properties
- Scattering
Diffuse
Specular
Programming with OpenGL
Part 1: Background
77
Objectives
Development of the OpenGL API
OpenGL Architecture
- OpenGL as a state machine
- OpenGL as a data flow machine
Functions
- Types
- Formats
Simple program
78
Early History of APIs
IFIPS (1973) formed two committees to come
up with a standard graphics API
- Graphical Kernel System (GKS)
2D but contained good workstation model
- Core
Both 2D and 3D
- GKS adopted as IS0 and later ANSI standard (1980s)
GKS not easily extended to 3D (GKS-3D)
- Far behind hardware development
14
79
PHIGS and X
Programmers Hierarchical Graphics
System (PHIGS)
- 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)
80
SGI and GL
Silicon Graphics (SGI) revolutionized the
graphics workstation by implementing the
pipeline in hardware (1982)
To access the system, application
programmers used a library called GL
With GL, it was relatively simple to
program three dimensional interactive
applications
81
OpenGL
The success of GL lead to OpenGL (1992),
a platform-independent API that was
- Easy to use
- Close enough to the hardware to get excellent
performance
- Focus on rendering
- Omitted windowing and input to avoid window
system dependencies
82
OpenGL Evolution
Originally controlled by an Architectural Review
Board (ARB)
- Members included SGI, Microsoft, Nvidia, HP,
3DLabs, IBM,.
- Now Kronos Group
- Was relatively stable (through version 2.5)
Backward compatible
Evolution reflected new hardware capabilities
3D texture mapping and texture objects
Vertex and fragment programs
- Allows platform specific features through extensions
Modern OpenGL
Performance is achieved by using GPU
rather than CPU
Control GPU through programs called
shaders
Applications job is to send data to GPU
GPU does all rendering
83
OpenGL 3.1
Totally shader-based
- No default shaders
- Each application must provide both a vertex
and a fragment shader
No immediate mode
Few state variables
Most 2.5 functions deprecated
Backward compatibility not required
84
15
Other Versions
OpenGL ES
- Embedded systems
- Version 1.0 simplified OpenGL 2.1
- Version 2.0 simplified OpenGL 3.1
Shader based
WebGL
- Javascript implementation of ES 2.0
- Supported on newer browsers
OpenGL 4.1 and 4.2
- Add geometry shaders and tessellator
85
What About Direct X?
Windows only
Advantages
- Better control of resources
- Access to high level functionality
Disadvantages
- New versions not backward compatible
- Windows only
Recent advances in shaders are leading
to convergence with OpenGL
86
87
OpenGL Libraries
OpenGL core library
- OpenGL32 on Windows
- GL on most unix/linux systems (libGL.a)
OpenGL Utility Library (GLU)
- Provides functionality in OpenGL core but
avoids having to rewrite code
- Will only work with legacy code
Links with window system
- GLX for X window systems
- WGL for Windows
- AGL for Macintosh
88
GLUT
OpenGL Utility Toolkit (GLUT)
- Provides functionality common to all window
systems
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
No slide bars
freeglut
GLUT was created long ago and has
been unchanged
- Amazing that it works with OpenGL 3.1
- Some functionality cant work since it requires
deprecated functions
freeglut updates GLUT
- Added capabilities
- Context checking
89
GLEW
OpenGL Extension Wrangler Library
Makes it easy to access OpenGL extensions
available on a particular system
Avoids having to have specific entry points
in Windows code
Application needs only to include glew.h and
run a glewInit()
90
16
91
Software Organization
92
OpenGL Architecture
93
OpenGL Functions
Primitives
- Points
- Line Segments
- Triangles
Attributes
Transformations
- Viewing
- Modeling
Control (GLUT)
Input (GLUT)
Query
94
OpenGL State
OpenGL is a state machine
OpenGL functions are of two types
- Primitive generating
Can cause output if primitive is visible
How vertices are processed and appearance of primitive
are controlled by the state
- State changing
Transformation functions
Attribute functions
Under 3.1 most state variables are defined by the
application and sent to the shaders
95
Lack of Object Orientation
OpenGL is not object oriented so that there
are multiple functions for a given logical
function
-glUniform3f
-glUniform2i
-glUniform3dv
Underlying storage mode is the same
Easy to create overloaded functions in C++
but issue is efficiency
96
OpenGL function format
glUniform3f(x,y,z)
belongs to GL library
function name
x,y,z are floats
glUniform3fv(p)
p is a pointer to an array
dimensions
17
97
OpenGL #defines
Most constants are defined in the include
files gl.h, glu.h and glut.h
- Note #include <GL/glut.h> should
automatically include the others
- Examples
-glEnable(GL_DEPTH_TEST)
-glClear(GL_COLOR_BUFFER_BIT)
include files also define OpenGL data
types: GLfloat, GLdouble,.
OpenGL and GLSL
Shader based OpenGL is based less on a
state machine model than a data flow model
Most state variables, attributes and related pre
3.1 OpenGL functions have been deprecated
Action happens in shaders
Job in application is to get data to GPU
98
GLSL
OpenGL Shading Language
C-like with
- Matrix and vector types (2, 3, 4 dimensional)
- Overloaded operators
- C++ like constructors
Similar to Nvidias Cg and Microsoft HLSL
Code sent to shaders as source code
New OpenGL functions to compile, link
and get information to shaders
99
100
A Simple Program (?)
Generate a square on a solid background
It used to be easy
101
#include <GL/glut.h>
void mydisplay(){
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_QUAD;
glVertex2f(-0.5,-0.5);
glVertex2f(-0,5, 0,5);
glVertex2f( 0.5, 0.5);
glVertex2f( 0.5,-0.5);
glEnd()
}
int main(int argc, char** argv){
glutCreateWindow("simple");
glutDisplayFunc(mydisplay);
glutMainLoop();
}
102
What happened
Most OpenGL functions deprecated
Makes heavy use of state variable default
values that no longer exist
- Viewing
- Colors
- Window parameters
Next version will make the defaults more
explicit
However, processing loop is the same
18
103
simple.c
void mydisplay(){
// need to fill in this part and add in shaders
}
int main(int argc, char** argv){
glutMainLoop();
}
104
Event Loop
Note that the program specifies 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
105
Notes on compilation
See website and ftp for examples
Unix/Linux
- Include files usually in /include/GL
- Compile with lglut 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
106
Compilation on Windows
Visual C++
- Get glut.h, glut32.lib and glut32.dll from web
- Install in same places as corresponding OpenGL files
- Create an empty application
- Add opengl32.lib, glut32.lib to project settings
(under link tab)
- Same for freeglut and GLEW
Cygwin (Linux under Windows)
- Can use gcc and similar makefile to Linux
- Use lopengl32 lglu32 lglut32 flags
Part 2: Complete Programs
108
Objectives
Build a complete first program
- Introduce shaders
- Introduce a standard program structure
Simple viewing
- Two-dimensional viewing as a special case of
three-dimensional viewing
Initialization steps and program structure
19
109
Program Structure
Most OpenGL programs have a similar structure
that consists of the following functions
-main():
specifies the callback functions
opens one or more windows with the required properties
enters event loop (last executable statement)
-init(): sets the state variables
Viewing
Attributes
-initShader():read, compile and link shaders
- callbacks
Display function
Input and window functions
110
simple.c revisited
main() function similar to last lecture
- Mostly GLUT functions
init() will allow more flexible colors
initShader() will hides details of setting up
shaders for now
Key issue is that we must form a data
array to send to GPU and then render it
111
main.c
#include <GL/glew.h>
int main(int argc, char** argv)
{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glutInitWindowSize(500,500);
glutInitWindowPosition(0,0);
glewInit();
init();
glutMainLoop();
}
includes gl.h
specify window properties
set OpenGL state and initialize shaders
enter event loop
display callback
112
GLUT functions
glutInit allows application to get command line
arguments and initializes system
gluInitDisplayMode requests properties for the
window (the rendering context)
- 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 loop
Immediate Mode Graphics
Geometry specified by vertices
- Locations in space (2 or 3 dimensional)
- Points, lines, circles, polygons, curves, surfaces
Immediate mode
- Each time a vertex is specified in application, its
location is sent to the GPU
- Old style uses glVertex
- Creates bottleneck between CPU and GPU
- Removed from OpenGL 3.1
113
Retained Mode Graphics
Put all vertex and attribute data in array
Send array to GPU to be rendered
immediately
Almost OK but problem is we would have
to send array over each time we need
another render of it
Better to send array over and store on
GPU for multiple renderings
114
20
Display Callback
Once we get data to GLU, we can initiate
the rendering with a simple callback
Arrays are buffer objects that contain
vertex arrays
115
void mydisplay()
{
glDrawArrays(GL_TRIANGLES, 0, 3);
glFlush();
}
Vertex Arrays
Vertices can have many attributes
- Position
- Color
- Texture Coordinates
- Application data
A vertex array holds these data
Using types in vec.h
116
point2 vertices[3] = {
point2(0.0, 0.0), point2(0.0, 1.0), point2(1.0, 1.0)
};
Vertex Array Object
Bundles all vertex data (positions, colors, ..,)
Get name for buffer then bind
At this point we have a current vertex array
but no contents
Use of glBindVertexArray lets us switch
between VBOs
117
Glunit abuffer;
glGenVertexArrays(1, &abuffer);
glBindVertexArray(abuffer);
Buffer Object
Buffers objects allow us to transfer large
amounts of data to the GPU
Need to create, bind and identify data
Data in current vertex array is sent to GPU
118
Gluint buffer;
glGenBuffers(1, &buffer);
glBindBuffer(GL_ARRAY_BUFFER, buffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(points), points);
Initialization
Vertex array objects and buffer objects
can be set up on init()
Also set clear color and other OpeGL
parameters
Also set up shaders as part of initialization
- Read
- Compile
- Link
First lets consider a few other issues
119
120
Coordinate Systems
The units in points are determined by the
application and are called object, world, model or
problem coordinates
Viewing specifications usually are also in object
coordinates
Eventually pixels will be produced in window
coordinates
OpenGL also uses some internal representations
that usually are not visible to the application but
are important in the shaders
21
121
OpenGL Camera
OpenGL places a camera at the origin in
object space pointing in the negative z
direction
The default viewing volume
is a box centered at the
origin with sides of
length 2
122
Orthographic Viewing
z=0
z=0
In the default orthographic view, points are projected
forward along the z axis onto the plane z=0
123
Viewports
Do not have use the entire window for the
image: glViewport(x,y,w,h)
Values in pixels (window coordinates)
124
Transformations and Viewing
In OpenGL, projection is carried out by a
projection matrix (transformation)
Transformation functions are also used for
changes in coordinate systems
Pre 3.0 OpenGL had a set of transformation
functions which have been deprecated
Three choices
- Application code
- GLSL functions
- vec.h and mat.h
125
Pre-OpenGL 3.0:
init.c
void init()
{
glClearColor (0.0, 0.0, 0.0, 1.0);
glColor3f(1.0, 1.0, 1.0);
glMatrixMode (GL_PROJECTION);
glLoadIdentity ();
glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);
}
black clear color
opaque window
fill with white
viewing volume
126
Pre-OpenGL 3.0:
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
glMatrixMode (GL_PROJECTION)
Transformation functions are incremental so
we start with an identity matrix and alter it with
a projection matrix that gives the view volume
glLoadIdentity ();
glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);
22
127
Pre-OpenGL 3.0:
2D and 3D Viewing
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
128
Pre-OpenGL 3.0:
mydisplay.c
void mydisplay()
{
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();
}
129
OpenGL Primitives
GL_QUAD_STRIP
GL_POLYGON
GL_TRIANGLE_STRIP
GL_TRIANGLE_FAN
GL_POINTS
GL_LINES
GL_LINE_LOOP
GL_LINE_STRIP
GL_TRIANGLES
130
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 u.
. 2 0 for
), sin , cos ( ) , (
0 0
t u
u u
s s
+ + = r y r x y x
131
Pre-OpenGL 3.0:
Example Using Line Strip Primitive
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();
}
132
Pre-OpenGL 3.0:
Color and State
The color as set by glColor becomes part of
the state and will be used until changed
- 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
23
Part 3: Shaders
134
Objectives
Simple Shaders
- Vertex shader
- Fragment shaders
Programming shaders with GLSL
Finish first program
135
Vertex Shader Applications
Moving vertices
- Morphing
- Wave motion
- Fractals
Lighting
- More realistic models
- Cartoon shaders
136
Fragment Shader Applications
Per fragment lighting calculations
per vertex lighting
per fragment lighting
137
Texture mapping
mapping
bump mapping
138
Writing Shaders
First programmable shaders were
programmed in an assembly-like manner
OpenGL extensions added for vertex and
fragment shaders
Cg (C for graphics) C-like language for
programming shaders
- Works with both OpenGL and DirectX
- Interface to OpenGL complex
OpenGL Shading Language (GLSL)
24
139
GLSL
OpenGL Shading Language
Part of OpenGL 2.0 and up
High level C-like language
New data types
- Matrices
- Vectors
- Samplers
As of OpenGL 3.1, application must
provide shaders
140
Simple Vertex Shader
in vec4 vPosition;
void main(void)
{
gl_Position = vPosition;
}
141
Execution Model
Vertex
Shader
GPU
Primitive
Assembly
Application
Program
glDrawArrays
Vertex
Vertex data
Shader Program
142
Simple Fragment Program
void main(void)
{
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
143
Execution Model
Fragment
Color
Fragment
Shader
Application
Frame Buffer
Rasterizer
Fragment
Shader Program
144
Data Types
C types: int, float, bool
Vectors:
- float vec2, vec3, vec4
- Also int (ivec) and boolean (bvec)
Matrices: mat2, mat3, mat4
- Stored by columns
- Standard referencing m[row][column]
C++ style constructors
- vec3 a =vec3(1.0, 2.0, 3.0)
- vec2 b = vec2(a)
25
145
Pointers
There are no pointers in GLSL
We can use C structs which
can be copied back from functions
Because matrices and vectors are basic
types they can be passed into and output
from GLSL functions, e.g.
mat3 func(mat3 a)
146
Qualifiers
GLSL has many of the same qualifiers such as
const as C/C++
Need others due to the nature of the execution
model
Variables can change
- Once per primitive
- Once per vertex
- Once per fragment
- At any time in the application
Vertex attributes are interpolated by the
rasterizer into fragment attributes
147
Attribute Qualifier
Attribute-qualified variables can change at
most once per vertex
There are a few built in variables such as
gl_Position but most have been deprecated
User defined (in application program)
- Use in qualifier to get to shader
-in float temperature
-in vec3 velocity
148
Uniform Qualified
Variables that are constant for an entire
primitive
Can be changed in application and sent to
shaders
Cannot be changed in shader
Used to pass information to shader such
as the bounding box of a primitive
149
Varying Qualified
Variables that are passed from vertex
shader to fragment shader
Automatically interpolated by the rasterizer
Old style used the varying qualifier
varying vec4 color;
Now use out in vertex shader and in in the
fragment shader
out vec4 color;
150
Example: Vertex Shader
const vec4 red = vec4(1.0, 0.0, 0.0, 1.0);
out vec3 color_out;
void main(void)
{
gl_Position = vPosition;
color_out = red;
}
26
151
Required Fragment Shader
in vec3 color_out;
void main(void)
{
gl_FragColor = color_out;
}
// in latest version use form
// out vec4 fragcolor;
// fragcolor = color_out;
152
Passing values
call by value-return
Variables are copied in
Returned values are copied back
Three possibilities
- in
- out
- inout (deprecated)
153
Operators and Functions
Standard C functions
- Trigonometric
- Arithmetic
- Normalize, reflect, length
Overloading of vector and matrix types
mat4 a;
vec4 b, c, d;
c = b*a; // a column vector stored as a 1D array
d = a*b; // a row vector stored as a 1D array
154
Swizzling and Selection
Can refer to array elements by element
using [ ] or selection (.) operator with
- x, y, z, w
- r, g, b, a
- s, t, p, q
-a[2], a.b, a.z, a.p are the same
Swizzling operator lets us manipulate
components
vec4 a;
a.yz = vec2(1.0, 2.0);
Part 4: Color and Attributes
156
Objectives
Expanding primitive set
Adding color
Vertex attributes
Uniform variables
27
157
OpenGL Primitives
GL_TRIANGLE_STRIP
GL_TRIANGLE_FAN
GL_POINTS
GL_LINES
GL_LINE_LOOP
GL_LINE_STRIP
GL_TRIANGLES
158
Polygon Issues
OpenGL will only display triangles
- 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
Application program must tessellate a polygon into
triangles (triangulation)
OpenGL 4.1 contains a tessellator
nonsimple polygon
nonconvex polygon
Polygon Testing
Conceptually simple to test for simplicity
and convexity
Time consuming
Earlier versions assumed both and left
testing to the application
Present version only renders triangles
Need algorithm to triangulate an arbitrary
polygon
159
Good and Bad Triangles
Long thin triangles render badly
Equilateral triangles render well
Maximize minimum angle
Delaunay triangulation for unstructured points
160
Triangularization
Convex polygon
Start with abc, remove b, then acd, .
161
a
c
b
d
Non-convex (concave)
162
28
Recursive Division
Find leftmost vertex and split
163
164
Attributes
Attributes 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
Display vertices
Only a few (glPointSize) are supported by
OpenGL functions
165
RGB color
Each color component is stored separately in
the frame buffer
Usually 8 bits per component in buffer
Color values can range from 0.0 (none) to 1.0
(all) using floats or over the range from 0 to 255
using unsigned bytels
166
Indexed Color
Colors are indices into tables of RGB values
Requires less memory
- indices usually 8 bits
- not as important now
Memory inexpensive
Need more colors for shading
167
Smooth Color
Default is smooth shading
- OpenGL interpolates vertex colors across
visible polygons
Alternative is flat shading
- Color of first vertex
determines fill color
- Handle in shader
Setting Colors
Colors are ultimately set in the fragment
shader but can be determined in either
shader or in the application
Application color: pass to vertex shader
as a uniform variable (next lecture) or as a
vertex attribute
Vertex shader color: pass to fragment
shader as varying variable (next lecture)
Fragment color: can alter via shader code
168
29
Part 5: More GLSL
Objectives
Coupling shaders to applications
- Reading
- Compiling
- Linking
Vertex Attributes
Setting up uniform variables
Example applications
170
Linking Shaders with Application
Read shaders
Compile shaders
Create a program object
Link everything together
Link variables in application with variables
in shaders
- Vertex attributes
- Uniform variables
171
Program Object
Container for shaders
- Can contain multiple shaders
- Other GLSL functions
GLuint myProgObj;
myProgObj = glCreateProgram();
// define shader objects here
glUseProgram (myProgObj);
glLinkProgram(myProgObj);
172
Reading a Shader
Shaders are added to the program object
and compiled
Usual method of passing a shader is as a
null-terminated string using the function
glShaderSource
If the shader is in a file, we can write a
reader to convert the file to a string
173
Shader Reader
#include <stdio.h>
static char*
readShaderSource(const char* shaderFile)
{
FILE* fp = fopen(shaderFile, "r");
if( fp == NULL ) { return NULL; }
fseek(fp, 0L, SEEK_END);
long size = ftell(fp);
fseek(fp, 0L, SEEK_SET);
char* buf = new char[size + 1];
fread(buf, 1, size, fp);
buf[size] = '\0';
fclose(fp);
return buf;
}
174
30
Adding a Vertex Shader
GLuint vShader;
GLunit myVertexObj;
GLchar vShaderfile[] = my_vertex_shader;
GLchar* vSource = readShaderSource(vShaderFile);
glShaderSource(myVertexObj, 1, &vertexShaderFile, NULL);
myVertexObj = glCreateShader(GL_VERTEX_SHADER);
glCompileShader(myVertexObj);
glAttachObject(myProgObj, myVertexObj);
175
Vertex Attributes
Vertex attributes are named in the shaders
Linker forms a table
Application can get index from table and tie
it to an application variable
Similar process for uniform variables
176
Vertex Attribute Example
#define BUFFER_OFFSET(offset) ((GLvoid*) (offset))
GLuint loc = glGetAttribLocation( program, "vPosition" );
glEnableVertexAttribArray( loc );
glVertexAttribPointer(loc, 2, GL_FLOAT, GL_FALSE,
0, BUFFER_OFFSET(0) );
177
Uniform Variable Example
GLint angleParam;
angleParam = glGetUniformLocation(myProgObj, "angle");
// angle defined in shader
// my_angle set in application
GLfloat my_angle;
my_angle = 5.0 // or some other value
glUniform1f(angleParam, my_angle);
178
Double Buffering
Updating the value of a uniform variable
opens the door to animating an application
- Execute glUniform in display callback
- Force a redraw through glutPostRedisplay()
Need to prevent a partially redrawn frame
buffer from being displayed
Draw into back buffer
Display front buffer
Swap buffers after updating finished
179
Adding Double Buffering
Request a double buffer
-glutInitDisplayMode(GLUT_DOUBLE)
Swap buffers
180
void mydisplay()
{
glClear();
glDrawArrays();
glutSwapBuffers();
}
31
Idle Callback
Idle callback specifies function to be
executed when no other actions pending
-glutIdleFunc(myIdle);
181
void myIdle()
{
// recompute display
glutPostRedisplay();
}
Attribute and Varying
Qualifiers
Starting with GLSL 1.5 attribute and
varying qualifiers have been replaced by
in and out qualifiers
No changes needed in application
Vertex shader example:
182
#version 1.4
attribute vec3 vPosition;
varying vec3 color;
#version 1.5
in vec3 vPosition;
out vec3 color;
Adding Color
If we set a color in the application, we can
send it to the shaders as a vertex attribute
or as a uniform variable depending on
how often it changes
Lets associate a color with each vertex
Set up an array of same size as positions
Send to GPU as a vertex buffer object
183
Setting Colors
184
typedef vec3 color3;
color3 base_colors[4] = {color3(1.0, 0.0. 0.0), .
color3 colors[NumVertices];
vec3 points[NumVertices];
// in loop setting positions
colors[i] = basecolors[color_index]
position[i] = .
Setting Up Buffer Object
185
//need larger buffer
glBufferData(GL_ARRAY_BUFFER, sizeof(points) + sizeof(colors),
NULL, GL_STATIC_DRAW);
//load data separately
glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(points), points);
glBufferSubData(GL_ARRAY_BUFFER, sizeof(points), sizeof(colors),
colors);
Second Vertex Array
186
// vPosition and vColor identifiers in vertex shader
loc = glGetAttribLocation(program, vPosition);
glEnableVertexAttribArray(loc);
glVertexAttribPointer(loc, 3, GL_FLOAT, GL_FALSE, 0,
BUFFER_OFFSET(0));
loc2 = glGetAttribLocation(program, vColor);
glEnableVertexAttribArray(loc2);
glVertexAttribPointer(loc2, 3, GL_FLOAT, GL_FALSE, 0,
BUFFER_OFFSET(sizeofpoints));
32
Moving vertices
- Morphing
- Wave motion
- Fractals
Lighting
- Cartoon shaders
187
Wave Motion Vertex Shader
in vec4 vPosition;
uniform float xs, zs, // frequencies
uniform float h; // height scale
void main()
{
vec4 t = vPosition;
t.y = vPosition.y
+ h*sin(time + xs*vPosition.x)
+ h*sin(time + zs*vPosition.z);
gl_Position = t;
}
188
Particle System
in vec3 vPosition;
uniform mat4 ModelViewProjectionMatrix;
uniform vec3 init_vel;
uniform float g, m, t;
void main(){
vec3 object_pos;
object_pos.x = vPosition.x + vel.x*t;
object_pos.y = vPosition.y + vel.y*t + g/(2.0*m)*t*t;
object_pos.z = vPosition.z + vel.z*t;
gl_Position = ModelViewProjectionMatrix*vec4(object_pos,1);
}
189
Pass Through Fragment Shader
// pass-through fragment shader
in vec4 color;
void main(void)
{
gl_FragColor = color;
}
190
Vertex vs Fragment Lighting
per vertex lighting per fragment lighting
191
Texture mapping
mapping
bump mapping
192
33
Part 6: Three Dimensions
194
Objectives
Develop a more sophisticated 3D example
- Sierpinski gasket: a fractal
Introduce hidden-surface removal
195
Three-dimensional Applications
In OpenGL, two-dimensional applications are
a special case of three-dimensional graphics
Going to 3D
- Not much changes
- Use vec3, glUniform3f
- Have to worry about the order in which primitives
are rendered or use hidden-surface removal
196
Sierpinski Gasket (2D)
Start with a triangle
Connect bisectors of sides and remove central
triangle
Repeat
197
Example
Five subdivisions
198
The gasket as a fractal
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 is a fractal (fractional dimension) object
34
199
Gasket Program
// initial triangle
point2 v[3] = {point2(-1.0, -0.58),
point2( 1.0, -0.58),
point2( 0.0, 1.15)};
int n; // number of recursive steps
200
Draw one triangle
// display one triangle
void triangle(point2 a, point2 b, point2 c)
{
static int i =0;
points[i] = a;
points[i] = b;
points[i] = c;
i += 3;
}
201
Triangle Subdivision
// triangle subdivision using vertex numbers
void divide_triangle(point2 a, point2 b, point2 c, int m)
{
point2 ab, ac, bc;
if(m > 0){
ab = (a + b)/2;
ac = (a + c)/2;
bc = (b + c)/2;
divide_triangle(a, ab, ac, m-1);
divide_triangle(c, ac, bc, m-1);
divide_triangle(b, bc, ac, m-1);
}
// else, draw triangle at end of recursion
else(triangle(a,b,c));
}
202
display and init Functions
void display()
{
glDrawArrays(GL_TRIANGLES, 0, NumVertices);
glFlush();
}
void myinit()
{
...
// v: initial triangle vertices
// n: number of recursive steps
divide_triangle(v[0], v[1], v[2], n);
...
}
203
main Function
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();
}
204
Moving to 3D
We can easily make the program three-
dimensional by using
point3 v[3]
and starting with a tetrahedron
35
205
3D Gasket
We can subdivide each of the four faces
Appears as if we remove a solid
tetrahedron from the center leaving four
smaller tetrahedra
Code almost identical to 2D example
206
Triangle code
// display one triangle
void triangle(point3 a, point3 b, point3 c)
{
static int i =0;
points[i] = a;
points[i] = b;
points[i] = c;
i += 3;
}
207
Subdivision code
// triangle subdivision using vertex numbers
void divide_triangle(point3 a, point3 b, point3 c, int m)
{
point3 ab, ac, bc;
if(m > 0){
ab = (a + b)/2;
ac = (a + c)/2;
bc = (b + c)/2;
divide_triangle(a, ab, ac, m-1);
divide_triangle(c, ac, bc, m-1);
divide_triangle(b, bc, ac, m-1);
}
// else, draw triangle at end of recursion
else(triangle(a,b,c));
}
208
Tetrahedron code
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);
glColor3f(0.0,0.0,0.0);
}
209
Almost Correct
Because the triangles are drawn in the order
they are specified in the program, the front
triangles are not always rendered in front of
triangles behind them
get this
want this
210
Hidden-Surface Removal
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
36
211
Using the Z-buffer algorithm
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)
212
Surface vs. Volume Subdvision
In our example, we divided the surface of
each face
We could also divide the volume using the
same midpoints
The midpoints define four smaller
tetrahedrons, one for each vertex
Keeping only these tetrahedrons removes
a volume in the middle
See text for code
213
Volume Subdivision
Input and Interaction
215
Objectives
Introduce the basic input devices
- Physical Devices
- Logical Devices
- Input Modes
Event-driven input
Introduce double buffering for smooth
animations
Programming event input with GLUT
216
Project Sketchpad
Ivan Sutherland (MIT 1963) established
the basic interactive paradigm that
characterizes interactive computer
graphics:
- 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
37
217
Graphical Input
Devices can be described either by
- Physical properties
Mouse
Keyboard
Trackball
- Logical Properties
What is returned to program via API
A position
An object identifier
Modes
- How and when input is obtained
Request or event
218
Physical Devices
mouse trackball
light pen
data tablet
joy stick
space ball
219
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
220
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
221
Graphical Logical Devices
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
- 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
222
X Window 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
38
223
Input Modes
Input devices contain a trigger which can
be used to send a signal to the operating
system
- Button on mouse
- Pressing or releasing a key
When triggered, input devices return
information (their measure) to the system
- Mouse returns position information
- Keyboard returns ASCII code
224
Request Mode
Input provided to program only when user
triggers the device
Typical of keyboard input
- Can erase (backspace), edit, correct until enter
(return) key (the trigger) is depressed
225
Event Mode
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
226
Event Types
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
227
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)
mouse callback function
228
GLUT callbacks
GLUT recognizes a subset of the events
recognized by any particular window
system (Windows, X, Macintosh)
-glutDisplayFunc
-glutMouseFunc
-glutReshapeFunc
-glutKeyFunc
-glutIdleFunc
-glutMotionFunc,
glutPassiveMotionFunc
39
229
GLUT Event Loop
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
230
The display callback
The display callback is executed whenever
GLUT determines that the window should be
refreshed, for example
- 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
231
Posting redisplays
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
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
232
Animating a Display
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
233
Double Buffering
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()
}
234
Using the idle callback
The idle callback is executed whenever there are no
events in the event queue
-glutIdleFunc(myidle)
- Useful for animations
void myidle() {
// change something
t += dt
}
Void mydisplay() {
glClear();
// draw something that depends on t
glutSwapBuffers();
}
40
235
Using globals
The form of all GLUT callbacks is fixed
- void mydisplay()
- void mymouse(GLint button, GLint state,
GLint x, GLint y)
Must use globals to pass information to
callbacks
float t; // global
void mydisplay()
{
// draw something that depends on t
}
Working with Callbacks
237
Objectives
Learn to build interactive programs using
GLUT callbacks
- Mouse
- Keyboard
- Reshape
Introduce menus in GLUT
238
The mouse callback
glutMouseFunc(mymouse)
void mymouse(GLint button,
GLint state, GLint x, GLint y)
Returns
- which button (GLUT_LEFT_BUTTON,
GLUT_MIDDLE_BUTTON,
GLUT_RIGHT_BUTTON) caused event
- state of that button (GLUT_UP, GLUT_DOWN)
- Position in window
239
Positioning
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)
h
w 240
Obtaining the window size
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
41
241
Terminating a program
In our original programs, there was no
way to terminate them through OpenGL
We can use the simple mouse callback
void mouse(int btn, int state, int x, int y)
{
if(btn==GLUT_RIGHT_BUTTON && state==GLUT_DOWN)
exit(0);
}
242
Using the mouse position
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(){}
243
Drawing squares at cursor location
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
points[ i ] = point2(x+size, y+size);
points[i+1] = point2(x-size, y+size);
points[i+2] = point2(x-size, y-size);
points[i+3] = point2 x+size, y-size);
i+=4
}
244
Using the motion 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)
245
Using the keyboard
glutKeyboardFunc(mykey)
Void mykey(unsigned char key,
int x, int y)
- 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);
}
246
Special and Modifier Keys
GLUT defines the special keys in glut.h
- Function key 1: GLUT_KEY_F1
- Up arrow key: GLUT_KEY_UP
if(key == GLUT_KEY_F1
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
42
247
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
248
Reshape possibilities
original
reshaped
249
The Reshape callback
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
The reshape callback is good place to put
camera functions because it is invoked when
the window is first opened
250
Pre-OpenGL 3.0:
Example Reshape
This reshape preserves shapes by making the viewport
and world window have the same aspect ratio
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 */
}
251
Toolkits and Widgets
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
- Menus
- Slidebars
- Dials
- Input boxes
But toolkits tend to be platform dependent
GLUT provides a few widgets including menus
252
Menus
GLUT supports pop-up menus
- A menu can have submenus
Three steps
- Define entries for the menu
- Define action for each menu item
Action carried out if entry selected
- Attach menu to a mouse button
43
253
Defining a simple menu
In main.c
menu_id = glutCreateMenu(mymenu);
glutAddmenuEntry(clear Screen, 1);
gluAddMenuEntry(exit, 2);
glutAttachMenu(GLUT_RIGHT_BUTTON);
entries that appear when
right button depressed
identifiers
clear screen
exit
254
Menu actions
- Menu callback
- Note each menu has an id that is returned when it is
created
- Add submenus by
glutAddSubMenu(char *submenu_name, submenu id)
void mymenu(int id)
{
if(id == 1) glClear();
if(id == 2) exit(0);
}
entry in parent menu
255
Other functions in GLUT
Dynamic Windows
- Create and destroy during execution
Subwindows
Multiple Windows
Changing callbacks during execution
Timers
Portable fonts (deprecated)
-glutBitmapCharacter
-glutStrokeCharacter
Geometry
257
Objectives
Introduce the elements of geometry
- Scalars
- Vectors
- Points
Develop mathematical operations among
them in a coordinate-free manner
Define basic primitives
- Line segments
- Polygons
258
Basic Elements
Geometry is the study of the relationships
among objects in an n-dimensional space
- 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
- Scalars
- Vectors
- Points
44
259
Coordinate-Free Geometry
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
260
Scalars
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
261
Vectors
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
v
262
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
v
-v
ov
v
u
w
263
Linear Vector Spaces
Mathematical system for manipulating vectors
Operations
- Scalar-vector multiplication u=ov
- Vector-vector addition: v=u+w
Expressions such as
v=u+2w-3r
Make sense in a vector space
264
Vectors Lack Position
These vectors are identical
- Same length and magnitude
Vectors spaces insufficient for geometry
- Need points
45
265
Points
Location in space
Operations allowed between points and
vectors
- Point-point subtraction yields a vector
- Equivalent to point-vector addition
P=v+Q
v=P-Q
266
Affine Spaces
Point + a vector space
Operations
- Vector-vector addition
- Scalar-vector multiplication
- Point-vector addition
- Scalar-scalar operations
For any point define
- 1 P = P
- 0 P = 0 (zero vector)
267
Lines
Consider all points of the form
- P(o)=P
0
+ o d
- Set of all points that pass through P
0
in the
direction of the vector d
268
Parametric Form
This form is known as the parametric form
of the line
- 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(o) = ox
0
+ (1-o)x
1
y(o) = oy
0
+ (1-o)y
1
269
Rays and Line Segments
If o >= 0, then P(o) is the ray leaving P
0
in
the direction d
If we use two points to define v, then
P( o) = Q + o (R-Q)=Q+ov
=oR + (1-o)Q
For 0<=o<=1 we get all the
points on the line segment
joining R and Q
270
Convexity
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
P
Q
Q
P
46
271
Affine Sums
Consider the sum
P=o
1
P
1
+o
2
P
2
+..+o
n
P
n
Can show by induction that this sum makes
sense iff
o
1
+o
2
+..o
n
=1
in which case we have the affine sum of
the points P
1
,P
2
,..P
n
If, in addition, o
i
>=0, we have the convex
hull of P
1
,P
2
,..P
n
272
Convex Hull
Smallest convex object containing P
1
,P
2
,..P
n
Formed by shrink wrapping points
273
Curves and Surfaces
Curves are one parameter entities of the
form P(o) where the function is nonlinear
Surfaces are formed from two-parameter
functions P(o, |)
- Linear functions give planes and polygons
P(o)
P(o, |)
274
Planes
A plane be determined by a point and two
vectors or by three points
P(o,|)=R+ou+|v
P(o,|)=R+o(Q-R)+|(P-Q)
275
Triangles
convex sum of P and Q
convex sum of S(o) and R
for 0<=o,|<=1, we get all points in triangle
Barycentric Coordinates
Triangle is convex so any point inside can be
represented as an affine sum
P(o
1,
o
2,
o
3
)=o
1
P+o
2
Q+o
3
R
where
o
1
+o
2
+o
3
= 1
o
i
>=0
The representation is called the barycentric
coordinate representation of P
276
47
277
Normals
Every plane has a vector n normal
(perpendicular, orthogonal) to it
From point-two vector form P(o,|)=R+ou+|v, we
know we can use the cross product to find
n = u v and the equivalent form
(P(o)-P) n=0
u
v
P
Representation
279
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
280
Linear Independence
A set of vectors v
1
, v
2
, , v
n
is linearly
independent if
v
1
+v
2
+..v
n
=0 iff o
1
=o
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
281
Dimension
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 v
1
, v
2
,., v
n
, any vector v can be
written as
v=o
1
v
1
+ o
2
v
2
+.+o
n
v
n
where the {o
i
} are unique
282
Representation
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
48
283
Coordinate Systems
Consider a basis v
1
, v
2
,., v
n
A vector is written v=o
1
v
1
+ o
2
v
2
+.+o
n
v
n
The list of scalars {o
1
, o
2
, . o
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
a=[o
1
o
2
. o
n
]
T
=
(
(
(
(
(
o
o
o
n
2
1
.
284
Example
v=2v
1
+3v
2
-4v
3
a=[2 3 4]
T
Note that this representation is with
respect to a particular basis
For example, in OpenGL we start by
representing vectors using the object
basis but later the system needs a
representation in terms of the camera or
eye basis
285
Coordinate Systems
Which is correct?
Both are correct because vectors have no
fixed location
v
v
286
Frames
A 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
P
0
v
1
v
2
v
3
287
Representation in a Frame
Frame determined by (P
0
, v
1
, v
2
, v
3
)
Within this frame, every vector can be
written as
v=o
1
v
1
+ o
2
v
2
+.+o
n
v
n
Every point can be written as
P = P
0
+ |
1
v
1
+ |
2
v
2
+.+|
n
v
n
288
Confusing Points and Vectors
Consider the point and the vector
P = P
0
+ |
1
v
1
+ |
2
v
2
+.+|
n
v
n
v=o
1
v
1
+ o
2
v
2
+.+o
n
v
n
They appear to have the similar representations
p=[|
1
|
2
|
3
] v=[o
1
o
2
o
3
]
which confuses the point with the vector
A vector has no position
v
p
v
Vector can be placed anywhere
point: fixed
49
289
A Single Representation
If we define 0P = 0 and 1P =P then we can
write
v=o
1
v
1
+ o
2
v
2
+o
3
v
3
= [o
1
o
2
o
3
0 ] [v
1
v
2
v
3
P
0
]
T
P = P
0
+ |
1
v
1
+ |
2
v
2
+|
3
v
3
= [|
1
|
2
|
3
1 ] [v
1
v
2
v
3
P
0
]
T
Thus we obtain the four-dimensional
homogeneous coordinate representation
v = [o
1
o
2
o
3
0 ]
T
p = [|
1
|
2
|
3
1 ]
T
290
Homogeneous Coordinates
The homogeneous coordinates form for a three
dimensional point [x y z] is given as
p =[x y z w]
T
=[wx wy wz w]
T
We return to a three dimensional point (for w=0) 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
For w=1, the representation of a point is [x y z 1]
291
Homogeneous Coordinates
and Computer Graphics
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
292
Change of Coordinate Systems
Consider two representations of a the
same vector with respect to two different
bases. The representations are
v=o
1
v
1
+ o
2
v
2
+o
3
v
3
= [o
1
o
2
o
3
] [v
1
v
2
v
3
]
T
=|
1
u
1
+ |
2
u
2
+|
3
u
3
= [|
1
|
2
|
3
] [u
1
u
2
u
3
]
T
a=[o
1
o
2
o
3
]
b=[|
1
|
2
|
3
]
where
293
Representing second
basis in terms of first
Each of the basis vectors, u1,u2, u3, are vectors
that can be represented in terms of the first basis
u
1
=
11
v
1
+
12
v
2
+
13
v
3
u
2
=
21
v
1
+
22
v
2
+
23
v
3
u
3
=
31
v
1
+
32
v
2
+
33
v
3
v
294
Matrix Form
The coefficients define a 3 x 3 matrix
and the basis can be related by
See text for numerical examples
a=M
T
b
(
(
(

32 31
23 22 21
13 12 11
33
M =
50
295
Change of Frames
We can apply a similar process in homogeneous
coordinates to the representations of both points and
vectors
Any point or vector can be represented in either frame
We can represent Q
0
, u
1
, u
2
, u
3
in terms of P
0
, v
1
, v
2
, v
3
Consider two frames:
(P
0
, v
1
, v
2
, v
3
)
(Q
0
, u
1
, u
2
, u
3
)
P
0
v
1
v
2
v
3
Q
0
u
1
u
2
u
3
296
Representing One Frame
in Terms of the Other
u
1
=
11
v
1
+
12
v
2
+
13
v
3
u
2
=
21
v
1
+
22
v
2
+
23
v
3
u
3
=
31
v
1
+
32
v
2
+
33
v
3
Q
0
=
41
v
1
+
42
v
2
+
43
v
3
+
44
P
0
Extending what we did with change of bases
defining a 4 x 4 matrix
(
(
(
(
1
0
0
0
43 42 41
33 32 31
23 22 21
13 12 11
M=
297
Working with Representations
Within the two frames any point or vector has a
representation of the same form
a=[o
1
o
2
o
3
o
4
] in the first frame
b=[|
1
|
2
|
3
|
4
] in the second frame
where o
4
= |
4
= 1 for points and o
4
= |
4
= 0 for vectors and
The matrix Mis 4 x 4 and specifies an affine
transformation in homogeneous coordinates
a=M
T
b
298
Affine Transformations
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
299
The World and Camera Frames
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)
300
Moving the Camera
If objects are on both sides of z=0, we must move
camera frame
(
(
(
(
1 0 0 0
d 1 0 0
0 0 1 0
0 0 0 1
M =
51
Transformations
302
Objectives
Introduce standard transformations
- Rotations
- Translation
- Scaling
- Shear
Derive homogeneous coordinate
transformation matrices
Learn to build arbitrary transformation
matrices from simple transformations
303
General Transformations
A transformation maps points to other
points and/or vectors to other vectors
Q=T(P)
v=T(u)
304
Affine Transformations
Line preserving
Characteristic of many physically
important transformations
- 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
305
Pipeline Implementation
transformation rasterizer
u
v
u
v
T
T(u)
T(v)
T(u)
T(u)
T(v)
T(v)
vertices vertices pixels
frame
buffer
(from application program)
306
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
o, |, : 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
52
307
Translation
Move (translate, displace) a point to a
new location
Displacement determined by a vector d
- Three degrees of freedom
- P=P+d
P
P
d
308
Object Translation
Every point in object is displaced by same vector
object translation: every point is displaced
by same vector
309
Translation Using Representations
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
x = x+dx
y = y+dy
z = z+dz
note that this expression is in
four dimensions and expresses
that point = vector + point
310
Translation Matrix
We can also express translation using a
4 x 4 matrix T in homogeneous coordinates
p=Tp where
T = T(d
x
, d
y
, d
z
) =
This form is better for implementation because all affine
transformations can be expressed this way and
multiple transformations can be concatenated together
(
(
(
(
1 0 0 0
d 1 0 0
d 0 1 0
d 0 0 1
z
y
x
311
Rotation (2D)
Consider rotation about the origin by u degrees
- radius stays the same, angle increases by u
x = x cos u y sin u
y = x sin u + y cos u
x = r cos |
y = r sin |
x = r cos (| + u)
y = r sin (| + u)
312
Rotation about the z-axis
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
- or in homogeneous coordinates
p=R
z
(u)p
x = x cos u y sin u
y = x sin u + y cos u
z = z
53
313
Rotation Matrix
(
(
(
(
u u
u u
1 0 0 0
0 1 0 0
0 0 cos sin
0 0 sin cos
R = R
z
(u) =
314
Rotation about x and y axes
Same argument as for rotation about z-axis
- For rotation about x-axis, x is unchanged
- For rotation about y-axis, y is unchanged
R = R
x
(u) =
R = R
y
(u) =
(
(
(
(
u u
u u
1 0 0 0
0 cos sin 0
0 sin - cos 0
0 0 0 1
(
(
(
(
u u
u u
1 0 0 0
0 cos 0 sin -
0 0 1 0
0 sin 0 cos
315
Scaling
(
(
(
(
1 0 0 0
0 0 0
0 0 0
0 0 0
z
y
x
s
s
s
S = S(s
x
, s
y
, s
z
) =
x=s
x
x
y=s
y
y
z=s
z
z
p=Sp
Expand or contract along each axis (fixed point of origin)
316
Reflection
corresponds to negative scale factors
original s
x
= -1 s
y
= 1
s
x
= -1 s
y
= -1 s
x
= 1 s
y
= -1
317
Inverses
Although we could compute inverse matrices
by general formulas, we can use simple
geometric observations
- Translation: T
-1
(d
x
, d
y
, d
z
) = T(-d
x
, -d
y
, -d
z
)
- Rotation: R
-1
(u) = R(-u)
Holds for any rotation matrix
Note that since cos(-u) = cos(u) and sin(-u)=-sin(u)
R
-1
(u) = R
T
(u)
- Scaling: S
-1
(s
x
, s
y
, s
z
) = S(1/s
x
, 1/s
y
, 1/s
z
)
318
Concatenation
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
54
319
Order of Transformations
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
p
T
= p
T
C
T
B
T
A
T
320
General Rotation About the Origin
u
x
z
y
v
A rotation by u about an arbitrary axis
can be decomposed into the concatenation
of rotations about the x, y, and z axes
R(u) = R
z
(u
z
) R
y
(u
y
) R
x
(u
x
)
u
x
u
y
u
z
are called the Euler angles
Note that rotations do not commute
We can use rotations in another order but
with different angles
321
Rotation About a Fixed
Point other than the Origin
Move fixed point to origin
Rotate
Move fixed point back
M= T(-p
f
) R(u) T(p
f
)
322
Instancing
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
Scale
Orient
Locate
323
Shear
Helpful to add one more basic transformation
Equivalent to pulling faces in opposite directions
324
Shear Matrix
Consider simple shear along x axis
x = x + y cot u
y = y
z = z
(
(
(
(
u
1 0 0 0
0 1 0 0
0 0 1 0
0 0 cot 1
H(u) =
55
OpenGL Transformations
326
Objectives
Learn how to carry out transformations in
OpenGL
- Rotation
- Translation
- Scaling
Introduce mat.h and vec.h transformations
- Model-view
- Projection
327
Pre-OpenGL 3.0 Matrices
In OpenGL matrices were part of the state
Multiple types
- Model-View (GL_MODELVIEW)
- Projection (GL_PROJECTION)
- Texture (GL_TEXTURE)
- Color(GL_COLOR)
Single set of functions for manipulation
Select which to manipulated by
-glMatrixMode(GL_MODELVIEW);
-glMatrixMode(GL_PROJECTION);
328
Current Transformation Matrix (CTM)
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
CTM vertices vertices
p
p=Cp
C
329
CTM operations
The CTM can be altered either by loading a new
CTM or by postmutiplication
Load an identity matrix: C I
Load an arbitrary matrix: C M
Load a translation matrix: C T
Load a rotation matrix: C R
Load a scaling matrix: C S
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
330
Rotation about a Fixed Point
Start with identity matrix: C I
Move fixed point to origin: C CT
Rotate: C CR
Move fixed point back: C CT
-1
Result: C = TR T
1
which is backwards.
This result is a consequence of doing postmultiplications.
Lets try again.
56
331
Reversing the Order
We want C = T
1
R T so we must do the operations in the
following order
C I
C CT
-1
C CR
C CT
Each operation corresponds to one function call in the program.
Note that the last operation specified is the first executed in the
program
332
CTM in OpenGL
OpenGL had a model-view and a projection
matrix in the pipeline which were
concatenated together to form the CTM
We will emulate this process
333
Rotation, Translation, Scaling
mat4 r = Rotate(theta, vx, vy, vz)
m = m*r;
mat4 s = Scale( sx, sy, sz)
mat4 t = Transalate(dx, dy, dz);
m = m*s*t;
mat4 m = Identity();
Create an identity matrix:
Multiply on right by rotation matrix of theta in degrees
where (vx, vy, vz) define axis of rotation
Do same with translation and scaling:
334
Example
Rotation about z axis by 30 degrees with a fixed
point of (1.0, 2.0, 3.0)
Remember that last matrix specified in the
program is the first applied
mat 4 m = Identity();
m = Translate( 1.0, 2.0, 3.0) *
Rotate (30.0, 0.0, 0.0, 1.0) *
Translate(-1.0,-2.0,-3.0);
335
Arbitrary Matrices
Can load and multiply by matrices defined
in the application program
Matrices are stored as one dimensional
array of 16 elements which are the
components of the desired 4 x 4 matrix
stored by columns
OpenGL functions that have matrices as
parameters allow the application to send
the matrix or its transpose
336
Matrix Stacks
In many situations we want to save
transformation matrices for use later
- Traversing hierarchical data structures (Chapter 8)
- Avoiding state changes when executing display lists
Pre 3.0 OpenGL maintained stacks for each
type of matrix
Easy to create the same functionality with a
simple stack class
57
337
Reading Back State
Can also access OpenGL variables (and other
parts of the state) by query functions
glGetIntegerv
glGetFloatv
glGetBooleanv
glGetDoublev
glIsEnabled
338
Using Transformations
Example: use idle function to rotate a cube and
mouse function to change direction of rotation
Start with a program that draws a cube in a
standard way
- Centered at origin
- Sides aligned with axes
- Will discuss modeling in next lecture
339
main.c
void main(int argc, char **argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB |
GLUT_DEPTH);
glutInitWindowSize(500, 500);
glutCreateWindow("colorcube");
glutReshapeFunc(myReshape);
glutDisplayFunc(display);
glutIdleFunc(spinCube);
glutMouseFunc(mouse);
glEnable(GL_DEPTH_TEST);
glutMainLoop();
}
340
Idle and Mouse callbacks
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;
}
341
Display callback
void display()
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glUniform(); // or glUniformMatrix
glDrawArrays();
glutSwapBuffers();
}
1) We can form matrix in application and send to shader and let
shader do the rotation or
2) We can send the angle and axis to the shader and let the
shader form the transformation matrix and then do the rotation
More efficient than transforming data in application and resending
the data
342
Using the Model-view Matrix
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 a LookAt function
- Build models of objects
The projection matrix is used to define the
view volume and to select a camera lens
Although these matrices are no longer part of
the OpenGL state, it is usually a good strategy
to create them in our own applications
58
343
Smooth Rotation
From a practical standpoint, we are often want
to use transformations to move and reorient an
object smoothly
- Problem: find a sequence of model-view
matrices M
0
,M
1
,..,M
n
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)
344
Incremental Rotation
Consider the two approaches
- For a sequence of rotation matrices
R
0
,R
1
,..,R
n
, find the Euler angles for each
and use R
i
= R
iz
R
iy
R
ix
Not very efficient
- Use the final positions to determine the axis
and angle of rotation, then increment only the
angle
Quaternions can be more efficient than either
345
Quaternions
Extension of imaginary numbers from two to
three dimensions
Requires one real and three imaginary
components i, j, k
Quaternions can express rotations on sphere
smoothly and efficiently. Process:
- Model-view matrix quaternion
- Carry out operations with quaternions
- Quaternion Model-view matrix
q=q
0
+q
1
i+q
2
j+q
3
k
346
Interfaces
One of the major problems in interactive
computer graphics is how to use two-
dimensional devices such as a mouse to
interface with three dimensional obejcts
Example: how to form an instance matrix?
Some alternatives
- 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
Building Models
348
Objectives
Introduce simple data structures for
building polygonal models
- Vertex lists
- Edge lists
Deprecated OpenGL vertex arrays
59
349
Representing a Mesh
Consider a mesh
There are 8 nodes and 12 edges
- 5 interior polygons
- 6 interior (shared) edges
Each vertex has a location v
i
= (x
i
y
i
z
i
)
v
1
v
2
v
7
v
6
v
8
v
5
v
4
v
3
e
1
e
8
e
3
e
2
e
11
e
6
e
7
e
10
e
5
e
4
e
9
e
12
350
Simple Representation
Define each polygon by the geometric locations
of its vertices
Leads to OpenGL code such as
Inefficient and unstructured
- Consider moving a vertex to a new location
- Must search for all occurrences
vertex[ i ] = vec3(x1, x1, x1);
vertex[i+1] = vec3(x6, x6, x6);
vertex[i+2] = vec3(x7, x7, x7);
i+=3;
351
Inward and Outward
Facing Polygons
The order {v
1
, v
6
, v
7
} and {v
6
, v
7
, v
1
} are equivalent in
that the same polygon will be rendered by OpenGL but
the order {v
1
, v
7
, v
6
} is different
The first two describe outwardly
facing polygons
Use the right-hand rule =
counter-clockwise encirclement
of outward-pointing normal
OpenGL can treat inward and
outward facing polygons differently
352
Geometry vs Topology
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
353
Vertex Lists
Put the geometry in an array
Use pointers from the vertices into this array
Introduce a polygon list
x
1
y
1
z
1
x
2
y
2
z
2
x
3
y
3
z
3
x
4
y
4
z
4
x
5
y
5
z
5.
x
6
y
6
z
6
x
7
y
7
z
7
x
8
y
8
z
8
P1
P2
P3
P4
P5
v
1
v
7
v
6
v
8
v
5
v
6
topology
geometry
354
Shared Edges
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
60
355
Edge List
v
1
v
2
v
7
v
6
v
8
v
5
v
3
e
1
e
8
e
3
e
2
e
11
e
6
e
7
e
10
e
5
e
4
e
9
e
12
e1
e2
e3
e4
e5
e6
e7
e8
e9
x
1
y
1
z
1
x
2
y
2
z
2
x
3
y
3
z
3
x
4
y
4
z
4
x
5
y
5
z
5.
x
6
y
6
z
6
x
7
y
7
z
7
x
8
y
8
z
8
v1
v6
Note polygons are
not represented
356
Modeling a Cube
typedef vec3 point3;
point3 vertices[] = {
point3(-1.0,-1.0,-1.0), point3( 1.0,-1.0,-1.0),
point3( 1.0, 1.0,-1.0), point3(-1.0, 1.0,-1.0),
point3(-1.0,-1.0, 1.0), point3( 1.0,-1.0, 1.0),
point3( 1.0, 1.0, 1.0), point3(-1.0, 1.0, 1.0)
};
typedef vec3 color3;
color3 colors[] = {
color3(0.0,0.0,0.0), color3(1.0,0.0,0.0),
color3(1.0,1.0,0.0), color3(0.0,1.0,0.0),
color3(0.0,0.0,1.0), color3(1.0,0.0,1.0),
color3(1.0,1.0,1.0), color3(0.0,1.0,1.0)
};
Define global arrays for vertices and colors
357
Drawing a triangle from a
list of indices
Draw a triangle from a list of indices into the array
vertices and assign a color to each index
void triangle(int a, int b, int c, int d)
{
vcolors [i] = colors [d];
position[i] = vertices[a];
vcolors [i+1] = colors [d];
position[i+1] = vertices[a];
vcolors [i+2] = colors [d];
position[i+2] = vertices[a];
i+=3;
}
358
Draw cube from faces
void colorcube( )
{
quad(0,3,2,1);
quad(2,3,7,6);
quad(0,4,7,3);
quad(1,2,6,5);
quad(4,5,6,7);
quad(0,1,5,4);
}
0
5 6
2
4
7
1
3
Note that vertices are ordered so that
we obtain correct outward facing normals
359
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 used to require
- 6 glBegin, 6 glEnd
- 6 glColor
- 24 glVertex
- More if we use texture and lighting
360
Vertex Arrays
OpenGL provided a facility called vertex arrays
that allows us to store array data in the
implementation
Six types of arrays were supported initially
- Vertices
- Colors
- Color indices
- Normals
- Texture coordinates
- Edge flags
Now vertex arrays can be used for any attributes
61
361
Old Style Initialization
Using the same color and vertex data, first we
enable
glEnableClientState(GL_COLOR_ARRAY);
glEnableClientState(GL_VERTEX_ARRAY);
Identify location of arrays
glVertexPointer(3, GL_FLOAT, 0, vertices);
glColorPointer(3, GL_FLOAT, 0, colors);
3d arrays stored as floats
data contiguous
data array
362
Mapping indices to faces
Form an array of face indices
Each successive four indices describe a
face of the cube
Draw through glDrawElements which
replaces all glVertex and glColor calls in
the display callback
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};
363
Drawing the cube
Old Method:
Problem is that although we avoid many function
calls, data are still on client side
Solution:
- no immediate mode
- Vertex buffer object
- Use glDrawArrays
glDrawElements(GL_QUADS, 24,
GL_UNSIGNED_BYTE, cubeIndices);
Draws cube with 1 function call!!
Rotating Cube
Full example
Model Colored Cube
Use 3 button mouse to change direction
of rotation
Use idle function to increment angle of
rotation
364
Cube Vertices
365
// Vertices of a unit cube centered at origin
// sides aligned with axes
point4 vertices[8] = {
point4( -0.5, -0.5, 0.5, 1.0 ),
point4( -0.5, 0.5, 0.5, 1.0 ),
point4( 0.5, 0.5, 0.5, 1.0 ),
point4( 0.5, -0.5, 0.5, 1.0 ),
point4( -0.5, -0.5, -0.5, 1.0 ),
point4( -0.5, 0.5, -0.5, 1.0 ),
point4( 0.5, 0.5, -0.5, 1.0 ),
point4( 0.5, -0.5, -0.5, 1.0 )
};
Colors
366
// RGBA colors
color4 vertex_colors[8] = {
color4( 0.0, 0.0, 0.0, 1.0 ), // black
color4( 1.0, 0.0, 0.0, 1.0 ), // red
color4( 1.0, 1.0, 0.0, 1.0 ), // yellow
color4( 0.0, 1.0, 0.0, 1.0 ), // green
color4( 0.0, 0.0, 1.0, 1.0 ), // blue
color4( 1.0, 0.0, 1.0, 1.0 ), // magenta
color4( 1.0, 1.0, 1.0, 1.0 ), // white
color4( 0.0, 1.0, 1.0, 1.0 ) // cyan
};
62
Quad Function
367
// quad generates two triangles for each face
// and assigns colors to the vertices
int Index = 0;
void quad( int a, int b, int c, int d )
{
colors[Index] = vertex_colors[a]; points[Index] = vertices[a]; Index++;
colors[Index] = vertex_colors[b]; points[Index] = vertices[b]; Index++;
colors[Index] = vertex_colors[c]; points[Index] = vertices[c]; Index++;
colors[Index] = vertex_colors[a]; points[Index] = vertices[a]; Index++;
colors[Index] = vertex_colors[c]; points[Index] = vertices[c]; Index++;
colors[Index] = vertex_colors[d]; points[Index] = vertices[d]; Index++;
}
Color Cube
368
// generate 12 triangles: 36 vertices and 36 colors
void colorcube()
{
quad( 1, 0, 3, 2 );
quad( 2, 3, 7, 6 );
quad( 3, 0, 4, 7 );
quad( 6, 5, 1, 2 );
quad( 4, 5, 6, 7 );
quad( 5, 4, 0, 1 );
}
Initialization I
369
void
init()
{
colorcube();
// create a vertex array object
GLuint vao;
glGenVertexArrays ( 1, &vao );
glBindVertexArray ( vao );
// create and initialize a buffer object
GLuint buffer;
glGenBuffers( 1, &buffer );
glBindBuffer( GL_ARRAY_BUFFER, buffer );
glBufferData( GL_ARRAY_BUFFER, sizeof(points) + sizeof(colors), NULL,
GL_STATIC_DRAW );
glBufferSubData( GL_ARRAY_BUFFER, 0, sizeof(points), points );
glBufferSubData( GL_ARRAY_BUFFER, sizeof(points), sizeof(colors), colors );
// load shaders and use the resulting shader program
GLuint program = InitShader( "vshader36.glsl", "fshader36.glsl" );
glUseProgram( program );
Initialization II
370
// set up vertex arrays
GLuint vPosition = glGetAttribLocation( program, "vPosition" );
glEnableVertexAttribArray( vPosition );
glVertexAttribPointer( vPosition, 4, GL_FLOAT, GL_FALSE, 0,
BUFFER_OFFSET(0) );
GLuint vColor = glGetAttribLocation( program, "vColor" );
glEnableVertexAttribArray( vColor );
glVertexAttribPointer( vColor, 4, GL_FLOAT, GL_FALSE, 0,
BUFFER_OFFSET(sizeof(points)) );
theta = glGetUniformLocation( program, "theta" );
}
Display Callback
371
void
display( void )
{
glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );
glUniform3fv( theta, 1, theta );
glDrawArrays( GL_TRIANGLES, 0, NumVertices );
glutSwapBuffers();
}
Mouse Callback
372
void
mouse( int button, int state, int x, int y )
{
if ( state == GLUT_DOWN ) {
switch( button ) {
case GLUT_LEFT_BUTTON: Axis = Xaxis; break;
case GLUT_MIDDLE_BUTTON: Axis = Yaxis; break;
case GLUT_RIGHT_BUTTON: Axis = Zaxis; break;
}
}
}
63
Idle Callback
373
void
idle( void )
{
theta[axis] += 0.01;
if( theta[axis] > 360.0 ) {
theta[axis]-= 360.0;
}
}
Classical Viewing
375
Objectives
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
376
Classical Viewing
Viewing requires three basic elements
- 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
377
Planar Geometric 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
378
Classical Projections
64
379
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
380
Taxonomy of Planar
Geometric Projections
parallel perspective
axonometric
multiview
orthographic
oblique
isometric dimetric trimetric
2 point 1 point 3 point
planar geometric projections
381
Perspective Projection
382
Parallel Projection
383
Orthographic Projection
Projectors are orthogonal to projection surface
384
Multiview Orthographic
Projection
Projection plane parallel to principal face
Usually form front, top, side views
isometric (not multiview
orthographic view)
front
side
top
in CAD and architecture,
we often display three
multiviews plus isometric
65
385
Advantages and
Disadvantages
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
386
Axonometric Projections
Allow projection plane to move relative to object
classify by how many angles of
a corner of a projected cube are
the same
none: trimetric
two: dimetric
three: isometric
u
1
u
3
u
2
387
Types of Axonometric Projections
388
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
Does not look real because far objects are
scaled the same as near objects
Used in CAD applications
389
Oblique Projection
Arbitrary relationship between projectors and
projection plane
Can pick the angles to emphasize a particular face
- 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)
390
Advantages and Disadvantages
66
391
Perspective Projection
Projectors converge at center of projection
392
Vanishing Points
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
393
Three-Point Perspective
No principal face parallel to projection plane
Three vanishing points for cube
394
Two-Point Perspective
On principal direction parallel to projection plane
Two vanishing points for cube
395
One-Point Perspective
One principal face parallel to projection plane
One vanishing point for cube
396
Advantages and
Disadvantages
Objects further from viewer are projected smaller
than the same sized objects closer to the viewer
(diminuition)
- Looks realistic
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)
67
Computer Viewing
398
Objectives
Introduce the mathematics of projection
Introduce OpenGL viewing functions
Look at alternate viewing APIs
399
Computer Viewing
There are three aspects of the viewing
process, all of which are implemented in
the pipeline,
- Positioning the camera
Setting the model-view matrix
- Selecting a lens
Setting the projection matrix
- Clipping
Setting the view volume
400
The OpenGL Camera
In OpenGL, initially the object and camera
frames are the same
- Default model-view matrix is an identity
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
- Default projection matrix is an identity
401
Default Projection
Default projection is orthogonal
clipped out
z=0
2
402
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
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
- Want a translation (Translate(0.0,0.0,-d);)
-d > 0
68
403
Moving Camera back from Origin
default frames
frames after translation by d
d > 0
404
Moving the Camera
We can move the camera to any desired
position by a sequence of rotations and
translations
Example: side view
- Rotate the camera
- Move it away from origin
- Model-view matrix C = TR
405
OpenGL code
Remember that last transformation
specified is first to be applied
// Using mat.h
mat4 t = Translate (0.0, 0.0, -d);
mat4 ry = RotateY(90.0);
mat4 m = t*ry;
406
The LookAt Function
The GLU library contained the function gluLookAt
to form the required modelview matrix through a
simple interface
Note the need for setting an up direction
Replaced by LookAt() in mat.h
- Can concatenate with modeling transformations
Example: isometric view of cube aligned with axes
mat4 mv = LookAt(vec4 eye, vec4 at, vec4 up);
407
gluLookAt
LookAt(eye, at, up)
408
Other Viewing APIs
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
69
409
Projections and Normalization
The default projection in the eye (camera)
frame is orthogonal
For points within the default view volume
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
x
p
= x
y
p
= y
z
p
= 0
410
Homogeneous Coordinate
Representation
x
p
= x
y
p
= y
z
p
= 0
w
p
= 1
p
p
= Mp
M =
(
(
(
(
1 0 0 0
0 0 0 0
0 0 1 0
0 0 0 1
In practice, we can let M = I and set the z term to zero later
default orthographic projection
411
Simple Perspective
Center of projection at the origin
Projection plane z = d, d < 0
412
Perspective Equations
Consider top and side views
x
p
=
d z
x
/
d z
x
/
y
p
=
d z
y
/
z
p
= d
413
Homogeneous Coordinate Form
M =
(
(
(
(
0 / 1 0 0
0 1 0 0
0 0 1 0
0 0 0 1
d
Consider q = Mp where
(
(
(
(
1
z
y
x
(
(
(
(
d z
z
y
x
/
q =
p =
414
Perspective Division
However w = 1, so we must divide by w to
return from homogeneous coordinates
This perspective division yields
the desired perspective equations
We will consider the corresponding clipping
volume with mat.h functions that are
equivalent to deprecated OpenGL functions
x
p
=
d z
x
/
y
p
=
d z
y
/
z
p
= d
70
415
OpenGL Orthogonal Viewing
Ortho(left,right,bottom,top,near,far)
near and far measured from camera
416
OpenGL Perspective
Frustum(left,right,bottom,top,near,far)
417
Using Field of View
With Frustum it is often difficult to get the
desired view
Perpective(fovy, aspect, near, far)
often provides a better interface
aspect = w/h
front plane
Projection Matrices
419
Objectives
Derive the projection matrices used for
standard OpenGL projections
Introduce oblique projections
Introduce projection normalization
420
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
71
421
Pipeline View
modelview
transformation
projection
transformation
perspective
division
clipping projection
nonsingular
4D 3D
against default cube
3D 2D
422
Notes
We stay in four-dimensional homogeneous
coordinates through both the modelview and
projection transformations
- Both these transformations are nonsingular
- Default to identity matrices (orthogonal view)
Normalization lets us clip against simple
cube regardless of type of projection
Delay final projection until end
- Important for hidden-surface removal to retain
depth information as long as possible
423
Orthogonal Normalization
Ortho(left,right,bottom,top,near,far)
normalization find transformation to convert
specified clipping volume to default
424
Orthogonal Matrix
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))
(
(
(
(
(
(
(
(
1 0 0 0
2
0 0
0
2
0
0 0
2
near far
near far
far near
bottom top
bottom top
bottom top
left right
left right
left right
P = ST =
425
Final Projection
Set z =0
Equivalent to the homogeneous coordinate
transformation
Hence, general orthogonal projection in 4D is
(
(
(
(
1 0 0 0
0 0 0 0
0 0 1 0
0 0 0 1
M
orth
=
P = M
orth
ST
426
Oblique Projections
The OpenGL projection functions cannot
produce general parallel projections such as
However if we look at the example of the cube
it appears that the cube has been sheared
Oblique Projection = Shear + Orthogonal
Projection
72
427
General Shear
top view
side view
xy shear (z values unchanged)
Projection matrix
General case:
428
Shear Matrix
(
(
(
(
1 0 0 0
0 1 0 0
0 cot 1 0
0 cot 0 1
H(u,|) =
P = M
orth
H(q,f)
P = M
orth
STH(u,|)
429
Equivalency
430
Effect on Clipping
The projection matrix P = STH transforms
the original clipping volume to the default
clipping volume
top view
DOP
DOP
near plane
far plane
object
clipping
volume
z = -1
z = 1
x = -1
x = 1
distorted object
(projects correctly)
431
Simple Perspective
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
432
Perspective Matrices
Simple projection matrix in homogeneous
coordinates
Note that this matrix is independent of the
far clipping plane
(
(
(
(
0 1 0 0
0 1 0 0
0 0 1 0
0 0 0 1
M =
73
433
Generalization
(
(
(
(
0 1 0 0
0 0
0 0 1 0
0 0 0 1
N =
after perspective division, the point (x, y, z, 1) goes to
x = x/z
y = y/z
Z = -(a+b/z)
which projects orthogonally to the desired point
regardless of a and b
434
Picking o and |
If we pick
o =
| =
near far
far near
+
far near
far near 2
-
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
Hence the new clipping volume is the default clipping volume
435
Normalization
Transformation
original clipping
volume original object
new clipping
volume
distorted object
projects correctly
436
Normalization and
Hidden-Surface Removal
Although our selection of the form of the
perspective matrices may appear somewhat
arbitrary, it was chosen so that if z
1
> z
2
in the
original clipping volume then the for the
transformed points z
1
> z
2
Thus hidden surface removal works if we first

apply the normalization transformation
However, the formula z = -(o+|/z) implies that the
distances are distorted by the normalization
which can cause numerical problems especially if
the near distance is small
437
OpenGL Perspective
Frustum allows for an unsymmetric viewing
frustum (although Perspective does not)
438
OpenGL Perspective Matrix
The normalization in Frustum 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
perspective matrix
shear and scale
74
439
Why do we do it this way?
Normalization allows for a single pipeline for
both perspective and orthogonal viewing
We stay in four dimensional homogeneous
coordinates as long as possible to retain
three-dimensional information needed for
hidden-surface removal and shading
We simplify clipping
Shadows
441
Objectives
Introduce Shadow Algorithms
Expand to projective textures
Flashlight in the Eye Graphics
When do we not see shadows in a real scene?
When the only light source is a point source at
the eye or center of projection
- Shadows are behind objects and not visible
Shadows are a global rendering issue
- Is a surface visible from a source
- May be obscured by other objects
442
Projective Shadows
Oldest methods
- Used in flight simulators to provide visual clues
Projection of a polygon is a polygon called a
shadow polygon
Given a point light source and a polygon,
the vertices of the shadow polygon are the
projections of the original polygons vertices
from a point source onto a surface
443
Shadow Polygon
444
75
Computing Shadow Vertex
1. Source at (x
l
, y
l
, z
l
)
2. Vertex at (x, y, z)
3. Consider simple case of shadow projected onto
ground at (x
p
, 0, z
p
)
4. Translate source to origin with T(-x
l
, -y
l
, -z
l
)
5. Perspective projection
6. Translate back
445

M =
1 0 0 0
0 1 0 0
0 0 1 0
0
1
l
y
0 0

(

(
(
(
(
(
Shadow Process
1. Put two identical triangles and their colors on GPU
(black for shadow triangle)
2. Compute two model view matrices as uniforms
3. Send model view matrix for original triangle
4. Render original triangle
5. Send second model view matrix
6. Render shadow triangle
- Note shadow triangle undergoes two transformations
- Note hidden surface removal takes care of depth issues
446
Generalized Shadows
Approach was OK for shadows on a single flat surface
Note with geometry shader we can have the shader
create the second triangle
Cannot handle shadows on general objects
Exist a variety of other methods based on same basic
idea
Well pursue methods based on projective textures
447
Image Based Lighting
We can project a texture onto the surface
in which case we are treating the texture
as a slide projector
This technique is the basis of projective
textures and image based lighting
Supported in OpenGL and GLSL through
four-dimensional texture coordinates
448
4D Textures Coordinates
Texture coordinates (s, t, r, q) are affected by a
perspective division so the actual coordinates
used are (s/q, t/q, r/q) or (s/q, t/q) for a two
dimensional texture
GLSL has a variant of the function texture
textureProj which will use the two- or three-
dimensional texture coordinate obtained by a
perspective division of a 4D texture coordinate a
texture value from a sampler
color = textureProj(my_sampler, tex_coord)
449
Shadow Maps
If we render a scene from a light source, the
depth buffer will contain the distances from the
source to each fragment.
We can store these depths in a texture called
a depth map or shadow map
Note that although we dont care about the
image in the shadow map, if we render with
some light, anything lit is not in shadow.
Form a shadow map for each source
450
76
Final Rendering
During the final rendering we compare the
distance from the fragment to the light
source with the distance in the shadow map
If the depth in the shadow map is less than
the distance from the fragment to the
source, the fragment is in shadow (from this
source)
Otherwise we use rendered color
451
Applications Side
Start with vertex in object coordinates
Want to convert representation to texture coordinates
Form LookAt matrix from light source to origin in
object coordinates (MVL)
From projection matrix for light source (PL)
From a matrix to convert from [-1, 1] clip coordinates
to [0, 1] texture coordinates
Concatenate to form object to texture coordinate
matrix (OTC)
452
Vertex Shader
453
uniform mat4 modelview;
uniform mat4 projection;
uniform normalmatrix; // for diffuse lighting
uniform mat4 otc; // object to texture coordinate
uniform vec4 diffuseproduct; // diffuse light*diffuse reflectivity
in vec4 vPosition;
in vec4 normal;
out vec4 color;
out vec4 shadowCoord;
void main()
{
// compute diffuse color as usual
// using normal, normal matrix, diffuse product
color = ...
gl_Position = projection*modelview*vPosition;
shadowCoord = OTC*vPosition;
}
textureProj function
Application provides the shadow map as a texture
object
The GLSL function textureProj compares the
third value of the texture coordinate with the third
value of the texture image
For nearest filtering of the texture object,
textureProj returns 0.0 if the shadow map value
is less than the third coordinate and 1.0 otherwise
For other filtering options, textureProj returns
values between 0.0 and 1.0
454
Fragment Shader
455
uniform sampler2DShadow ShadowMap;
in vec4 shadowCoord;
in vec4 Color;
main()
{
// assume nearest sampling in ShadowMap
float shadeFactor = textureProj(ShadowMap, ShadowCoord);
gl_FragColor = vec4(shadeFactor*Color.rgb, Color.a)
}
Shading
77
457
Objectives
Learn to shade objects so their images appear
three-dimensional
Introduce the types of light-material interactions
Build a simple reflection model (Phong model)
that can be used with real-time graphics
hardware
458
Why we need shading
Suppose we build a model of a sphere
using many polygons and color it with
glColor. We get something like
But we want
459
Shading
Why does the image of a real sphere look like
Light-material interactions cause each point to
have a different color or shade
Need to consider
- Light sources
- Material properties
- Location of viewer
- Surface orientation
460
Scattering
Light strikes A
- Some scattered
- Some absorbed
Some of scattered light strikes B
- Some scattered
- Some absorbed
Some of this scattered light strikes A
and so on
461
Rendering Equation
The infinite scattering and absorption of
light can be described by the rendering
equation
- Cannot be solved in general
- Ray tracing is a special case for perfectly
reflecting surfaces
Rendering equation is global and includes
- Shadows
- Multiple scattering from object to object
462
Global Effects
translucent surface
shadow
multiple reflection
78
463
Local vs Global Rendering
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
464
Light-Material Interaction
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
465
Light Sources
General light sources are difficult to work
with because we must integrate light
coming from all points on the source
466
Simple Light Sources
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
467
Surface Types
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
smooth surface
rough surface
468
Phong Model
A simple model that can be computed rapidly
Has three components
- Diffuse
- Specular
- Ambient
Uses four vectors
- To source
- To viewer
- Normal
- Perfect reflector
79
469
Ideal Reflector
Normal is determined by local orientation
Angle of incidence = angle of reflection
The three vectors must be coplanar
r = 2 (l n ) n - l
470
Lambertian Surface
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 u
i
- cos u
i
= l n if vectors normalized
- There are also three coefficients, k
r
, k
b
, k
g
that
show how much of each color component is
reflected
471
Specular Surfaces
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
specular
highlight
472
Modeling Specular Reflections
Phong proposed using a term that
dropped off as the angle between the
viewer and the ideal reflection increased
|
I
r
~ k
s
I cos
o
|
shininess coef
absorption coef
incoming intensity
reflected
intensity
473
The Shininess Coefficient
Values of o between 100 and 200 correspond to
metals
Values between 5 and 10 give surface that look
like plastic
cos
o
|
|
90 -90
474
Ambient Light
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 k
a
I
a
to diffuse and specular terms
reflection coef
intensity of ambient light
80
475
Distance Terms
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 +cd
2
) to
the diffuse and specular
terms
The constant and linear terms soften the
effect of the point source
476
Light Sources
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
- I
dr
, I
dg
, I
db
, I
sr
, I
sg
, I
sb
, I
ar
, I
ag
, I
ab
477
Material Properties
Material properties match light source
properties
- Nine absorption coefficients
k
dr
, k
dg
, k
db
, k
sr
, k
sg
, k
sb
, k
ar
, k
ag
, k
ab
- Shininess coefficient o
478
Adding up the Components
For each light source and each color
component, the Phong model can be
written (without the distance terms) as
I =k
d
I
d
l n + k
s
I
s
(v r )
o
+ k
a
I
a
For each color component
we add contributions from
all sources
479
Modified Phong Model
The specular term in the Phong model is
problematic because it requires the
calculation of a new reflection vector and
view vector for each vertex
Blinn suggested an approximation using
the halfway vector that is more efficient
h is normalized vector halfway between l and v
480
The Halfway Vector
h = ( l + v )/ | l + v |
81
481
Using the halfway vector
Replace (v r )
o
by (n h )
|
| is chosen to match shineness
Note that halfway angle is half of angle
between r and v if vectors are coplanar
Resulting model is known as the modified
Phong or Blinn lighting model
- Specified in OpenGL standard
482
Example
Only differences in
these teapots are
the parameters
in the Phong model
483
Computation of Vectors
l and v are specified by the application
Can computer r from l and n
Problem is determining n
For simple surfaces is can be determined but
how we determine n differs depending on
underlying representation of surface
OpenGL leaves determination of normal to
application
- Exception for GLU quadrics and Bezier surfaces was
deprecated
Computing Reflection Direction
Angle of incidence = angle of reflection
Normal, light direction and reflection
direction are coplaner
Want all three to be unit length
484

r = 2(l - n)n l
485
Plane Normals
Equation of plane: ax+by+cz+d = 0
From Chapter 3 we know that plane is
determined by three points p
0
, p
2
, p
3
or
normal n and p
0
Normal can be obtained by
n = (p
2
-p
0
) (p
1
-p
0
)
486
Normal to Sphere
Implicit function f(x,y.z)=0
Normal given by gradient
Sphere f(p)=p p-1
n = [f/x, f/y, f/z]
T
=p
82
487
Parametric Form
For sphere
Tangent plane determined by vectors
Normal given by cross product
x=x(u,v)=cos u sin v
y=y(u,v)=cos u cos v
z= z(u,v)=sin u
p/u = [x/u, y/u, z/u]T
p/v = [x/v, y/v, z/v]T
n = p/u p/v
488
General Case
We can compute parametric normals for
other simple cases
- Quadrics
- Parameteric polynomial surfaces
Bezier surface patches (Chapter 10)
Shading in OpenGL
490
Objectives
Introduce the OpenGL shading methods
- per vertex vs per fragment shading
- Where to carry out
Discuss polygonal shading
- Flat
- Smooth
- Gouraud
491
OpenGL shading
Need to specify:
- Normals
- Material properties
- Lights
- State-based shading functions have
been deprecated (glNormal, glMaterial,
glLight)
- Get computed values in application or
send attributes to shaders
492
Normalization
Cosine terms in lighting calculations can be
computed using dot product
Unit length vectors simplify calculation
Usually we want to set the magnitudes to have
unit length but
- Length can be affected by transformations
- Note that scaling does not preserved length
GLSL has a normalization function
83
493
Normal for Triangle
p
0
p
1
p
2
n
plane n (p - p
0
) = 0
n = (p
1
- p
0
) (p
2
- p
0
)
normalize n n/ |n|
p
Note that right-hand rule determines outward face
494
Specifying a Point Light Source
For each light source, we can set an RGBA for the
diffuse, specular, and ambient components, and
for the position
vec4 diffuse0 = vec4(1.0, 0.0, 0.0, 1.0);
vec4 ambient0 = vec4(1.0, 0.0, 0.0, 1.0);
vec4 specular0 = vec4(1.0, 0.0, 0.0, 1.0);
vec4 light0_pos = vec4(1.0, 2.0, 3,0, 1.0);
495
Distance and Direction
The source colors are specified in RGBA
The position is given in homogeneous
coordinates
- 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
The coefficients in distance terms are usually
quadratic (1/(a+b*d+c*d*d)) where d is the
distance from the point being rendered to the
light source
496
Spotlights
Derive from point source
- Direction
- Cutoff
- Attenuation Proportional to cos
o
|
u
u
|
497
Global Ambient Light
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
A global ambient term that is often helpful
for testing
498
Moving Light Sources
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
84
499
Material Properties
Material properties should match the terms in
the light model
Reflectivities
w component gives opacity
vec4 ambient = vec4(0.2, 0.2, 0.2, 1.0);
vec4 diffuse = vec4(1.0, 0.8, 0.0, 1.0);
vec4 specular = vec4(1.0, 1.0, 1.0, 1.0);
GLfloat shine = 100.0
500
Front and Back Faces
Every face has a front and back
For many objects, we never see the back face
so we dont care how or if its rendered
If it matters, we can handle in shader
back faces not visible back faces visible
501
Emissive Term
We can simulate a light source in OpenGL
by giving a material an emissive
component
This component is unaffected by any
sources or transformations
502
Transparency
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
503
Polygonal Shading
In per vertex shading, shading calculations are
done for each vertex
- Vertex colors become vertex shades and can be
sent to the vertex shader as a vertex attribute
- Alternately, we can send the parameters to the
vertex shader and have it compute the shade
By default, vertex shades are interpolated
across an object if passed to the fragment
shader as a varying variable (smooth shading)
We can also use uniform variables to shade
with a single shade (flat shading)
504
Polygon Normals
Triangles have a single normal
- 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
Consider model of sphere
Want different normals at
each vertex even though
this concept is not quite
correct mathematically
85
505
Smooth Shading
We can set a new
normal at each vertex
Easy for sphere model
- If centered at origin n = p
Now smooth shading
works
Note silhouette edge
506
Mesh 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 the normals around
a mesh vertex
n = (n
1
+n
2
+n
3
+n
4
)/ |n
1
+n
2
+n
3
+n
4
|
507
Gouraud and Phong Shading
Gouraud Shading
- Find average normal at each vertex (vertex normals)
- Apply modified Phong model at each vertex
- Interpolate vertex shades across each polygon
Phong shading
- Find vertex normals
- Interpolate vertex normals across edges
- Interpolate edge normals across polygon
- Apply modified Phong model at each fragment
508
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
- Until recently not available in real time systems
- Now can be done using fragment shaders
Both need data structures to represent meshes
so we can obtain vertex normals
Vertex Lighting Shaders I
509
// Vertex Shader
in vec4 vPosition;
in vec3 vNormal;
out vec4 color; // vertex shade
// light and material properties
uniform vec4 AmbientProduct, DiffuseProduct, SpecularProduct;
uniform mat4 ModelView;
uniform mat4 Projection;
uniform vec4 LightPosition;
uniform float Shininess;
Vertex Lighting Shaders II
510
void
main()
{
// transform vertex position into eye coordinates
vec3 pos = (ModelView * vPosition).xyz;
vec3 L = normalize( LightPosition.xyz - pos );
vec3 E = normalize( -pos );
vec3 H = normalize( L + E );
// transform vertex normal into eye coordinates
vec3 N = normalize( ModelView*vec4(vNormal, 0.0) ).xyz;
86
Vertex Lighting Shaders III
511
// compute terms in the illumination equation
// ambient lighting term
vec4 ambient = AmbientProduct;
// diffuse lighting term
float Kd = max( dot(L, N), 0.0 );
vec4 diffuse = Kd*DiffuseProduct;
// specular lighting term
float Ks = pow( max(dot(N, H), 0.0), Shininess );
vec4 specular = Ks * SpecularProduct;
if( dot(L, N) < 0.0 ) specular = vec4(0.0, 0.0, 0.0, 1.0);
// add lighting terms to form color
color = ambient + diffuse + specular;
color.a = 1.0;
gl_Position = Projection * ModelView * vPosition;
}
Vertex Lighting Shaders IV
512
// Fragment Shader
in vec4 color;
void main()
{
gl_FragColor = color;
}
Fragment Lighting Shaders I
513
// Vertex Shader
in vec4 vPosition;
in vec3 vNormal;
// output values that will be interpolatated per-fragment
out vec3 fN;
out vec3 fE;
out vec3 fL;
Fragment Lighting Shaders II
514
void main()
{
fN = vNormal;
fE = vPosition.xyz;
fL = LightPosition.xyz;
if( LightPosition.w != 0.0 ) {
fL = LightPosition.xyz - vPosition.xyz;
}
gl_Position = Projection*ModelView*vPosition;
}
Fragment Lighting Shaders III
515
// Fragment Shader
// per-fragment interpolated values from the vertex shader
in vec3 fN;
in vec3 fL;
in vec3 fE;
uniform vec4 AmbientProduct, DiffuseProduct, SpecularProduct;
uniform float Shininess;
void main()
{
// normalize the input lighting vectors
vec3 N = normalize(fN);
vec3 E = normalize(fE);
vec3 L = normalize(fL);
Fragment Lighting Shaders IV
516
vec3 H = normalize( L + E );
vec4 ambient = AmbientProduct;
float Kd = max(dot(L, N), 0.0);
vec4 diffuse = Kd*DiffuseProduct;
float Ks = pow(max(dot(N, H), 0.0), Shininess);
vec4 specular = Ks*SpecularProduct;
// discard the specular highlight if the light
// is behind the vertex
if( dot(L, N) < 0.0 )
specular = vec4(0.0, 0.0, 0.0, 1.0);
gl_FragColor = ambient + diffuse + specular;
gl_FragColor.a = 1.0;
}
87
Implementation of a Renderer I
518
Objectives
Introduce basic implementation strategies
Clipping
Scan conversion
519
Basic Implementation Strategies
A black box graphics system takes as
input a set of vertices and produces as
output set of pixels.
520
Overview
At end of the geometric pipeline, vertices
have been assembled into primitives
Must clip out primitives that are outside
the view frustum
- Algorithms based on representing primitives by
lists of vertices
Must find which pixels can be affected by
each primitive
- Fragment generation
- Rasterization or scan conversion
521
Required Tasks
Clipping
Rasterization or scan conversion
Transformations
Some tasks deferred until fragement
processing
- Hidden surface removal
- Antialiasing
522
Rasterization Meta Algorithms
Consider two approaches to rendering a
scene with opaque objects
For every pixel, determine which object that
projects on the pixel is closest to the viewer
and compute the shade of this pixel
- Ray tracing paradigm
For every object, determine which pixels it
covers and shade these pixels
- Pipeline approach
- Must keep track of depths
88
523
The Outer Loop
First, we choose which variable to use to
control the outer loop.
- object-oriented: loops over objects
also known as sort-last
- image-oriented: loops over pixels
also known as sort-first
for(each_object) render(object);
for(each_pixel) assign_a_color(pixel);
524
The Graphics Pipeline
A pipeline renderer fits the description of
an object-oriented graphics system.
- Today, the pipeline is often implemented in
hardware for maximum speed.
525
The Four Major Tasks in
Rendering
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.
526
Implementation of
Transformations
The geometric processing stage of the
pipeline involves five coordinate systems:
Object (world) coordinates
Eye (camera) coordinates
Clip coordinates
Normalized device coordinates
Window (screen) coordinates
527
Line-Segment Clipping
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.
528
Clipping
2D against clipping window
3D against clipping volume
Easy for line segments polygons
Hard for curves and text
- Convert to lines and polygons first
89
529
Clipping 2D Line Segments
Brute force approach: compute intersections
with all sides of clipping window
- Inefficient: one division per intersection
530
Cohen-Sutherland Algorithm
Idea: eliminate as many cases as possible
without computing intersections
Start with four lines that determine the
sides of the clipping window
x = x
max
x = x
min
y = y
max
y = y
min
531
The Cases
Case 1: both endpoints of line segment inside all
four lines
- Draw (accept) line segment as is
Case 2: both endpoints outside all lines and on
same side of a line
- Discard (reject) the line segment
x = x
max
x = x
min
y = y
max
y = y
min
532
The Cases
Case 3: One endpoint inside, one outside
- Must do at least one intersection
Case 4: Both outside
- May have part inside
- Must do at least one intersection
x = x
max
x = x
min
y = y
max
533
Defining Outcodes
For each endpoint, define an outcode
Outcodes divide space into 9 regions
Computation of outcode requires at most
4 subtractions
b
0
b
1
b
2
b
3
b
0
= 1 if y > y
max
, 0 otherwise
b
1
= 1 if y < y
min
, 0 otherwise
b
2
= 1 if x > x
max
, 0 otherwise
b
3
= 1 if x < x
min
, 0 otherwise
534
Using Outcodes
Consider the 5 cases below
AB: outcode(A) = outcode(B) = 0
- Accept line segment
90
535
Using Outcodes
CD: outcode (C) = 0, outcode(D) = 0
- Compute intersection
- Location of 1 in outcode(D) determines which
edge to intersect with
- Note if there were a segment from A to a point in
a region with 2 ones in outcode, we might have to
do two interesections
536
Using Outcodes
EF: outcode(E) logically ANDed with
outcode(F) (bitwise) = 0
- Both outcodes have a 1 bit in the same place
- Line segment is outside of corresponding side
of clipping window
- reject
537
Using Outcodes
GH and IJ: same outcodes, neither zero
but logical AND yields zero
Shorten line segment by intersecting with
one of sides of window
Compute outcode of intersection (new
endpoint of shortened line segment)
Reexecute algorithm
538
Efficiency
In many applications, the clipping window
is small relative to the size of the entire
data base
- Most line segments are outside one or more
side of the window and can be eliminated
based on their outcodes
Inefficiency when code has to be
reexecuted for line segments that must be
shortened in more than one step
539
Cohen Sutherland in 3D
Use 6-bit outcodes
When needed, clip line segment against planes
540
Liang-Barsky Clipping
Consider the parametric form of a line segment
We can distinguish between the cases by looking at the
ordering of the values of o where the line determined by
the line segment crosses the lines that determine the
window
p(o) = (1-o)p
1
+ op
2
1 > o > 0
p
1
p
2
91
541
Liang-Barsky Clipping
In (a): o
4
> o
3
> o
2
> o
1
- Intersect right, top, left, bottom: shorten
In (b): o
4
> o
2
> o
3
> o
1
- Intersect right, left, top, bottom: reject
542
Advantages
Can accept/reject as easily as with
Cohen-Sutherland
Using values of o, we do not have to use
algorithm recursively as with C-S
Extends to 3D
543
Clipping and Normalization
General clipping in 3D requires
intersection of line segments against
arbitrary plane
Example: oblique view
544
Plane-Line Intersections
) (
) (
1 2
1
p p n
p p n
a
o
-
-
=
545
Normalized Form
before normalization after normalization
Normalization is part of viewing (pre clipping)
but after normalization, we clip against sides of
right parallelepiped
Typical intersection calculation now requires only
a floating point subtraction, e.g. is x > x
max
?
Top View
Implementation of a Renderer II
92
Objectives
Introduce clipping algorithms for polygons
Survey hidden-surface algorithms
547
Polygon Clipping
Not as simple as line segment clipping
- Clipping a line segment yields at most one line
segment
- Clipping a polygon can yield multiple polygons
However, clipping a convex polygon can
yield at most one other polygon
548
Tessellation and Convexity
One strategy is to replace nonconvex (concave)
polygons with a set of triangular polygons (a
tessellation)
Also makes fill easier
Tessellation code in GLU library
549
Clipping as a Black Box
Can consider line segment clipping as a
process that takes in two vertices and
produces either no vertices or the vertices
of a clipped line segment
550
Pipeline Clipping of Line Segments
Clipping against each side of window is
independent of other sides
- Can use four independent clippers in a pipeline
551
Pipeline Clipping of Polygons
Three dimensions: add front and back clippers
Strategy used in SGI Geometry Engine
Small increase in latency
552
93
Bounding Boxes
Rather than doing clipping on a complex
polygon, we can use an axis-aligned bounding
box or extent
- Smallest rectangle aligned with axes that
encloses the polygon
- Simple to compute: max and min of x and y
553
Bounding boxes
Can usually determine accept/reject based
only on bounding box
reject
accept
requires detailed
clipping
554
Clipping and Visibility
Clipping has much in common with
hidden-surface removal
In both cases, we are trying to remove
objects that are not visible to the camera
Often we can use visibility or occlusion
testing early in the process to eliminate as
many polygons as possible before going
through the entire pipeline
555
Hidden Surface Removal
Object-space approach: use pairwise
testing between polygons (objects)
Worst case complexity O(n
2
) for n polygons
partially obscuring can draw independently
556
Painters Algorithm
Render polygons a back to front order so
that polygons behind others are simply
painted over
B behind A as seen by viewer
Fill B then A
557
Depth Sort
Requires ordering of polygons first
- O(n log n) calculation for ordering
- Not every polygon is either in front or behind all
other polygons
Order polygons and deal with
easy cases first, harder later
Polygons sorted by
distance from COP
558
94
A lies behind all other polygons
- Can render
Polygons overlap in z but not in either x or y
- Can render independently
Easy Cases
559
Hard Cases
Overlap in all directions but all the vertices
of one polygon lie on the same side of the
plane determined by the other
cyclic overlap
penetration
560
Back-Face Removal (Culling)
u Face is visible iff 90 > u > -90
equivalently cos u > 0
or v n > 0
Plane of face has form ax + by +cz +d =0
but after normalization n = ( 0 0 1 0)
T
Need only test the sign of c
In OpenGL we can simply enable culling but may not
work correctly if we have nonconvex objects
561
Image Space Approach
Look at each projector (nm for an n x m
frame buffer) and find closest of k polygons
Complexity O(nmk)
Ray tracing
z-buffer
562
z-Buffer Algorithm
Use a buffer called the z or depth buffer to store
the depth of the closest object at each pixel
found so far
As we render each polygon, compare the depth
of each pixel to depth in z buffer
If less, place shade of pixel in color buffer and
update z buffer
563
Efficiency
If we work scan line by scan line as we
move across a scan line, the depth
changes satisfy aAx+bAy+cAz=0
Along scan line
Ay = 0
Az = - Ax
c
a
In screen space Ax = 1
564
95
Scan-Line Algorithm
Can combine shading and hsr through
scan line algorithm
scan line i: no need for depth
information, can only be in no
or one polygon
scan line j: need depth
information only when in
more than one polygon
565
Implementation
Need a data structure to store
- Flag for each polygon (inside/outside)
- Incremental structure for scan lines that stores
which edges are encountered
- Parameters for planes
566
Visibility Testing
In many realtime applications, such as
games, we want to eliminate as many
objects as possible within the application
- Reduce burden on pipeline
- Reduce traffic on bus
Partition space with Binary Spatial
Partition (BSP) Tree
567
Simple Example
consider 6 parallel polygons
top view
The plane of A separates B and C from D, E and F
568
BSP Tree
Can continue recursively
- Plane of C separates B from A
- Plane of D separates E and F
Can put this information in a BSP tree
- Use for visibility and occlusion testing
569
Implementation of a Renderer III
96
Objectives
Survey Line Drawing Algorithms
- DDA
- Bresenhams Algorithm
Aliasing and Antialiasing
571
Rasterization
Rasterization (scan conversion)
- Determine which pixels that are inside primitive
specified by a set of vertices
- Produces a set of fragments
- Fragments have a location (pixel location) and
other attributes such color and texture
coordinates that are determined by interpolating
values at vertices
Pixel colors determined later using color,
texture, and other vertex properties
572
Scan Conversion of Line Segments
Start with line segment in window
coordinates with integer values for
endpoints
Assume implementation has a
write_pixel function
y = mx + h
x
y
m
A
A
=
573
DDA Algorithm
Digital Differential Analyzer
- DDA was a mechanical device for numerical
solution of differential equations
- Line y=mx+ h satisfies differential equation
dy/dx = m = Ay/Ax = y
2
-y
1
/x
2
-x
1
Along scan line Ax = 1
for(x=x1; x<=x2; ix++) {
y+=m;
write_pixel(x, round(y), line_color)
}
574
Problem
DDA = for each x plot pixel at closest y
- Problems for steep lines
575
Using Symmetry
Use for 1 > m > 0
For m > 1, swap role of x and y
- For each y, plot closest x
576
97
Bresenhams Algorithm
DDA requires one floating point addition per step
We can eliminate all fp through Bresenhams algorithm
Consider only 1 > m > 0
- Other cases by symmetry
Assume pixel centers are at half integers
If we start at a pixel that has been written, there are
only two candidates for the next pixel to be written into
the frame buffer
577
Candidate Pixels
1 > m > 0
last pixel
candidates
Note that line could have
passed through any
part of this pixel
578
Decision Variable
-
d = Dx(b-a)
d is an integer
d > 0 use upper pixel
d < 0 use lower pixel
579
Incremental Form
More efficient if we look at d
k
, the value of
the decision variable at x = k
d
k+1
= d
k
2Ay, if d
k
<0
d
k+1
= d
k
2(Ay- Ax), otherwise
For each x, we need do only an integer
addition and a test
Single instruction on graphics chips
580
Polygon Scan Conversion
Scan Conversion = Fill
How to tell inside from outside
- Convex easy
- Nonsimple difficult
- Odd even test
Count edge crossings
- Winding number
odd-even fill
581
Winding Number
Count clockwise encirclements of point
Alternate definition of inside: inside if
winding number = 0
winding number = 2
winding number = 1
582
98
Filling in the Frame Buffer
Fill at end of pipeline
- Convex Polygons only
- Nonconvex polygons assumed to have been
tessellated
- Shades (colors) have been computed for
vertices (Gouraud shading)
- Combine with z-buffer algorithm
March across scan lines interpolating shades
Incremental work small
583
Using Interpolation
span
C
1
C
3
C
2
C
5
C
4
scan line
C
1
C
2
C
3
specified by glColor or by vertex shading
C
4
determined by interpolating between C
1
and C
2
C
5
determined by interpolating between C
2
and C
3
interpolate between C
4
and C
5
along span
584
Flood Fill
Fill can be done recursively if we know a seed
point located inside (WHITE)
Scan convert edges into buffer in edge/inside
color (BLACK)
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);
} }
585
Scan Line Fill
Can also fill by maintaining a data structure of all
intersections of polygons with scan lines
- Sort by scan line
- Fill each span
vertex order generated
by vertex list
desired order
586
Data Structure
587
Aliasing
Ideal rasterized line should be 1 pixel wide
All line segments, other than vertical and
horizontal segments, partially cover pixels
Simple algorithms color only whole pixels
Leads to jaggies or aliased raster lines
588
99
Antialiasing by Area Averaging
Color multiple pixels for each x depending on
coverage by ideal line
original
antialiased
magnified
589
Polygon Aliasing
Aliasing problems can be serious for
polygons
- Jaggedness of edges
- Small polygons neglected
- Need compositing so color
of one polygon does not
totally determine color of
pixel
All three polygons should contribute to color
590
Buffers
592
Objectives
Introduce additional OpenGL buffers
Learn to read from buffers
Learn to use blending
593
Buffer
Define a buffer by its spatial resolution (n x m) and
its depth (or precision) k, the number of bits/pixel
pixel
594
OpenGL Frame Buffer
100
595
OpenGL Buffers
Color buffers can be displayed
- Front
- Back
- Auxiliary
- Stereo
Depth
Stencil
- Holds masks
Most RGBA buffers 8 bits per component
Latest are floating point (IEEE)
596
Writing in Buffers
Conceptually, we can consider all of memory as a
large two-dimensional array of pixels
We read and write rectangular block of pixels
- Bit block transfer (bitblt) operations
The frame buffer is part of this memory
frame buffer
(destination)
writing into frame buffer
source
memory
597
Writing Model
Read destination pixel before writing source
598
Bit Writing Modes
Source and destination bits are combined bitwise
16 possible functions (one per column in table)
replace
OR
XOR
599
XOR mode
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 S M
M S M
S S M
swaps the S and M
600
The Pixel Pipeline
OpenGL has a separate pipeline for pixels
- Writing pixels involves
Moving pixels from processor memory to the frame buffer
Format conversions
Mapping, Lookups, Tests
- Reading pixels
Format conversion
101
601
Buffer Selection
OpenGL can read from any of the buffers
(front, back, depth)
Default to the back buffer
Change with 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
- Reading can be slow
Drawing through texture functions
602
OpenGL Pixel Functions
glReadPixels(x,y,width,height,format,type,myimage)
start pixel in frame buffer
size
type of image
type of pixels
pointer to processor
memory
GLubyte myimage[512][512][3];
glReadPixels(0,0, 512, 512, GL_RGB,
GL_UNSIGNED_BYTE, myimage);
Deprecated Functionality
glDrawPixels
glCopyPixels
glBitMap
Replace by use of texture functionality,
glBltFrameBuffer, frame buffer objects
603
Render to Texture
GPUs now include a large amount of texture
memory that we can write into
Advantage: fast (not under control of window
system)
Using frame buffer objects (FBOs) we can
render into texture memory instead of the
frame buffer and then read from this memory
- Image processing
- GPGPU
604
605
Image Formats
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
- OpenGL knows nothing of image formats
- Some code available on Web
- Can write readers/writers for some simple
formats in OpenGL
606
Displaying a PPM Image
PPM is a very simple format
Each image file consists of a header
followed by all the pixel data
Header
P3
# comment 1
# comment 2
.
#comment n
rows columns maxvalue
pixels
102
607
Reading the Header
FILE *fd;
int k, nm;
char c;
int i;
char b[100];
float s;
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);
check for P3
in first line
608
Reading the Header (cont)
fscanf(fd, "%c",&c);
while(c == '#')
{
fscanf(fd, "%[^\n] ", b);
printf("%s\n",b);
fscanf(fd, "%c",&c);
}
ungetc(c,fd);
skip over comments by
looking for # in first column
609
Reading the Data
fscanf(fd, "%d %d %d", &n, &m, &k);
printf("%d rows %d columns max value= %d\n",n,m,k);
nm = n*m;
image=malloc(3*sizeof(GLuint)*nm);
s=255./k;
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;
}
scale factor
Texture Mapping
611
Objectives
Introduce Mapping Methods
- Texture Mapping
- Environment Mapping
- Bump Mapping
Consider basic strategies
- Forward vs backward mapping
- Point sampling vs area averaging
612
The Limits of Geometric Modeling
Although graphics cards can render over
10 million polygons per second, that
number is insufficient for many phenomena
- Clouds
- Grass
- Terrain
- Skin
103
613
Modeling an Orange
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
614
Modeling an Orange (2)
Take a picture of a real orange, scan it,
and paste onto simple geometric model
- This process is known as texture mapping
Still might not be sufficient because
resulting surface will be smooth
- Need to change local shape
- Bump mapping
615
Three Types of Mapping
Texture Mapping
- Uses images to fill inside of polygons
Environment (reflection mapping)
- Uses a picture of the environment for texture
maps
- Allows simulation of highly specular surfaces
Bump mapping
- Emulates altering normal vectors during the
rendering process
616
Texture Mapping
geometric model texture mapped
617
Environment Mapping
618
Bump Mapping
104
619
Where does mapping take place?
Mapping techniques are implemented at the end
of the rendering pipeline
- Very efficient because few polygons make it
past the clipper
620
Is it simple?
Although the idea is simple---map an
image to a surface---there are 3 or 4
coordinate systems involved
2D image
3D surface
621
Coordinate Systems
Parametric coordinates
- May be used to model curves and surfaces
Texture coordinates
- Used to identify points in the image to be mapped
Object or World Coordinates
- Conceptually, where the mapping takes place
Window Coordinates
- Where the final image is really produced
622
Texture Mapping
parametric coordinates
texture coordinates
world coordinates
window coordinates
623
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
x = x(s,t)
y = y(s,t)
z = z(s,t)
But we really want
to go the other way
s
t
(x,y,z)
624
Backward 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
Need a map of the form
s = s(x,y,z)
t = t(x,y,z)
Such functions are difficult to find in general
105
625
Two-part mapping
One solution to the mapping problem is to
first map the texture to a simple
intermediate surface
Example: map to cylinder
626
Cylindrical Mapping
Parametric cylinder
x = r cos 2tu
y = r sin 2tu
z = v/h
Maps rectangle in u,v space to
cylinder of radius r and height h
in world coordinates.
s = u
t = v
Maps from texture space
627
Spherical Map
We can use a parametric sphere
x = r cos 2tu
y = r sin 2tu cos 2tv
z = r sin 2tu sin 2tv
in a similar manner to the cylinder but have to decide
where to put the distortion
Spheres are used in environmental maps
628
Box Mapping
Easy to use with simple orthographic projection
Also used in environment maps
629
Second Mapping
Map from intermediate object to actual object
- Normals from intermediate to actual
- Normals from actual to intermediate
- Vectors from center of intermediate
intermediate
actual
630
Aliasing
Point sampling of the texture can lead to
aliasing errors
point samples in u,v
(or x,y,z) space
point samples in texture space
miss blue stripes
106
631
Area Averaging
A better but slower option is to use area averaging
Note that preimage of pixel is curved
pixel
preimage
OpenGL Texture Mapping
633
Objectives
Introduce the OpenGL texture functions
and options
634
Basic Stragegy
Three steps to applying a texture
1. specify the texture
read or generate image
assign to texture
enable texturing
2. assign texture coordinates to vertices
Proper mapping function is left to application
3. specify texture parameters
wrapping, filtering
635
Texture Mapping
s
t
x
y
z
image
geometry display
636
Texture Example
The texture (below) is a
256 x 256 image that has
been mapped to a
rectangular polygon which
is viewed in perspective
107
637
Texture Mapping and the
OpenGL Pipeline
geometry pipeline vertices
pixel pipeline
image
fragmentpr
ocessor
Images and geometry flow through
separate pipelines that join during
fragment processing
- complex textures do not affect geometric
complexity
638
Define a texture image from an array of
texels (texture elements) in CPU memory
Glubyte my_texels[512][512];
Define as any other pixel map
- Scanned image
- Generate by application code
Enable texture mapping
-glEnable(GL_TEXTURE_2D)
- OpenGL supports 1-4 dimensional texture maps
Specifying a Texture Image
639
Define Image as a Texture
glTexImage2D( target, level, components,
w, h, border, format, type, texels );
target: type of texture, e.g. GL_TEXTURE_2D
level: used for mipmapping (discussed later)
components: elements per texel
w, h: width and height of texels in pixels
border: used for smoothing (discussed later)
format and type: describe texels
texels: pointer to texel array
glTexImage2D(GL_TEXTURE_2D, 0, 3, 512, 512, 0,
GL_RGB, GL_UNSIGNED_BYTE, my_texels);
640
Based on parametric texture coordinates
glTexCoord*() specified at each vertex
s
t
1, 1
0, 1
0, 0 1, 0
(s, t) = (0.2, 0.8)
(0.4, 0.2)
(0.8, 0.4)
A
B C
a
b
c
Texture Space Object Space
Mapping a Texture
641
Typical Code
offset = 0;
GLuint vPosition = glGetAttribLocation( program,
"vPosition" );
glEnableVertexAttribArray( vPosition );
glVertexAttribPointer( vPosition, 4, GL_FLOAT,
GL_FALSE, 0,BUFFER_OFFSET(offset) );
offset += sizeof(points);
GLuint vTexCoord = glGetAttribLocation( program,
"vTexCoord" );
glEnableVertexAttribArray( vTexCoord );
glVertexAttribPointer( vTexCoord, 2,GL_FLOAT,
GL_FALSE, 0, BUFFER_OFFSET(offset) );
642
Interpolation
OpenGL uses interpolation to find proper texels
from specified texture coordinates
Can be distortions
good selection
of tex coordinates
poor selection
of tex coordinates
texture stretched
over trapezoid
showing effects of
bilinear interpolation
108
643
Texture Parameters
OpenGL has a variety of parameters that
determine how texture is applied
- Wrapping parameters determine what happens
if 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
644
Wrapping Mode
Clamping: if s,t > 1 use 1, if s,t <0 use 0
Wrapping: use s,t modulo 1
glTexParameteri( GL_TEXTURE_2D,
GL_TEXTURE_WRAP_S, GL_CLAMP )
glTexParameteri( GL_TEXTURE_2D,
GL_TEXTURE_WRAP_T, GL_REPEAT )
texture
s
t
GL_CLAMP
wrapping
GL_REPEAT
wrapping
645
Magnification and Minification
Texture Polygon
Magnification Minification
Polygon Texture
More than one texel can cover a pixel (minification) or
more than one pixel can cover a texel (magnification)
Can use point sampling (nearest texel) or linear filtering
( 2 x 2 filter) to obtain texture values
646
Filter Modes
Modes determined by
-glTexParameteri( target, type, mode )
glTexParameteri(GL_TEXTURE_2D, GL_TEXURE_MAG_FILTER,
GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXURE_MIN_FILTER,
GL_LINEAR);
Note that linear filtering requires a border of an
extra texel for filtering at edges (border = 1)
647
Mipmapped Textures
Mipmapping allows for prefiltered texture
maps of decreasing resolutions
Lessens interpolation errors for smaller
textured objects
Declare mipmap level during texture definition
glTexImage2D( GL_TEXTURE_*D, level, )
648
Example
point
sampling
mipmapped
point
sampling
mipmapped
linear
filtering
linear
filtering
109
649
Texture Functions
Controls how texture is applied
glTexEnv{fi}[v]( GL_TEXTURE_ENV, prop,
param )
GL_TEXTURE_ENV_MODE modes
- GL_MODULATE: modulates with computed shade
- GL_BLEND: blends with an environmental color
- GL_REPLACE: use only texture color
- GL(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE,
GL_MODULATE);
Set blend color with GL_TEXTURE_ENV_COLOR
650
Using Texture Objects
1. specify textures in texture objects
2. set texture filter
3. set texture function
4. set texture wrap mode
5. set optional perspective correction hint
6. bind texture object
7. enable texturing
8. supply texture coordinates for vertex
- coordinates can also be generated
651
Other Texture Features
Environment Maps
- Start with image of environment through a wide
angle lens
Can be either a real scanned image or an image created in
OpenGL
- Use this texture to generate a spherical map
- Alternative is to use a cube map
Multitexturing
- Apply a sequence of textures through cascaded
texture units
Applying Textures
Textures are applied during fragments shading
by a sampler
Samplers return a texture color from a texture
object
652
in vec4 color; //color from rasterizer
in vec2 texCoord; //texure coordinate from rasterizer
uniform sampler2D texture; //texture object from application
void main() {
gl_FragColor = color * texture2D( texture, texCoord );
}
Usually vertex shader will output texture
coordinates to be rasterized
Must do all other standard tasks too
- Compute vertex position
- Compute vertex color if needed
Vertex Shader
653
in vec4 vPosition; //vertex position in object coordinates
in vec4 vColor; //vertex color from application
in vec2 vTexCoord; //texture coordinate from application
out vec4 color; //output color to be interpolated
out vec2 texCoord; //output tex coordinate to be interpolated
Checkerboard Texture
654
GLubyte image[64][64][3];
// Create a 64 x 64 checkerboard pattern
for ( int i = 0; i < 64; i++ ) {
for ( int j = 0; j < 64; j++ ) {
GLubyte c = (((i & 0x8)==0)^((j & 0x8)==0)) * 255;
image[i][j][0] = c;
image[i][j][1] = c;
image[i][j][2] = c;
110
Adding Texture Coordinates
655
void quad( int a, int b, int c, int d )
{
quad_colors[Index] = colors[a];
points[Index] = vertices[a];
tex_coords[Index] = vec2( 0.0, 0.0 );
Index++;
quad_colors[Index] = colors[a];
points[Index] = vertices[b];
tex_coords[Index] = vec2( 0.0, 1.0 );
Index++;
// other vertices
}
Texture Object
656
GLuint textures[1];
glGenTextures( 1, textures );
glBindTexture( GL_TEXTURE_2D, textures[0] );
glTexImage2D( GL_TEXTURE_2D, 0, GL_RGB, TextureSize,
TextureSize, 0, GL_RGB, GL_UNSIGNED_BYTE, image );
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER,
GL_NEAREST);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER,
GL_NEAREST );
glActiveTexture(GL_TEXTURE0);
Linking with Shaders
657
GLuint vTexCoord = glGetAttribLocation( program, "vTexCoord" );
glEnableVertexAttribArray( vTexCoord );
glVertexAttribPointer( vTexCoord, 2, GL_FLOAT, GL_FALSE, 0,
BUFFER_OFFSET(offset) );
// Set the value of the fragment shader texture sampler variable
// ("texture") to the the appropriate texture unit. In this case,
// zero, for GL_TEXTURE0 which was previously set by calling
// glActiveTexture().
glUniform1i( glGetUniformLocation(program, "texture"), 0 );
Environment Mapping
659
Introduction
Environment mapping is way to create
the appearance of highly reflective
surfaces without ray tracing which
requires global calculations
Examples: The Abyss, Terminator 2
Is a form of texture mapping
- Supported by OpenGL and Cg
660
Example
111
661
Reflecting the Environment
V
N
R
662
Mapping to a Sphere
V
N
R
663
Hemisphere Map as a Texture
If we map all objects to a hemisphere, we
cannot tell if they are on the sphere or
anywhere else along the reflector
Use the map on the sphere as a texture
that can be mapped onto the object
Can use other surfaces as the
intermediate
- Cube maps
- Cylinder maps
664
Issues
Must assume environment is very far from
object (equivalent to the difference
between near and distant lights)
Object cannot be concave (no self
reflections possible)
No reflections between objects
Need a reflection map for each object
Need a new map if viewer moves
665
OpenGL Implementation
OpenGL supports spherical and cube maps
First must form map
- Use images from a real camera
- Form images with OpenGL
Texture map it to object
666
Cube Map
112
667
Forming Cube Map
Use six cameras, each with a 90 degree
angle of view
668
Indexing into Cube Map
V
R
Compute R = 2(NV)N-V
Object at origin
Use largest magnitude
component of R to determine
face of cube
Other two components give
texture coordinates
669
Example
R = (-4, 3, -1)
Same as R = (-1, 0.75, -0.25)
Use face x = -1 and y = 0.75, z = -0.25
Not quite right since cube defined by x, y,
z = 1 rather than [0, 1] range needed for
texture coordinates
Remap by s = + y, t = + z
Hence, s =0.875, t = 0.375
670
Doing it in OpenGL
glTextureMap2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X,
level, rows, columns, border, GL_RGBA,
GL_UNSIGNED_BYTE, image1)
Same for the other five images
Make one texture object out of the six images
Parameters apply to all six images
glTexParameteri(GL_TEXTURE_CUBE_MAP,
GL_TEXTURE_MAP_WRAP_S, GL_REPEAT)
Same for t and r
Note that texture coordinates are in 3D space (s, t, r)
Cube Map Example (init I)
671
// colors for sides of cube
GLubyte red [3] = {255, 0, 0 };
GLubyte green [3] = {0, 255, 0 };
GLubyte blue [3] = {0, 0, 255};
GLubyte cyan [3] = {0, 255, 255};
GLubyte magenta[3] = {255, 0, 255};
GLubyte yellow [3] = {255, 255, 0 };
// enable cube mapping
glEnable(GL_TEXTURE_CUBE_MAP);
// texture object
glGenTextures(1, tex);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_CUBE_MAP, tex[0]);
Cube Map Example (init II)
672
glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X ,
0,3,1,1,0,GL_RGB,GL_UNSIGNED_BYTE, red);
glTexImage2D(GL_TEXTURE_CUBE_MAP_NEGATIVE_X ,
0,3,1,1,0,GL_RGB,GL_UNSIGNED_BYTE, green);
glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_Y ,
0,3,1,1,0,GL_RGB,GL_UNSIGNED_BYTE, blue);
glTexImage2D(GL_TEXTURE_CUBE_MAP_NEGATIVE_Y ,
0,3,1,1,0,GL_RGB,GL_UNSIGNED_BYTE, cyan);
glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_Z ,
0,3,1,1,0,GL_RGB,GL_UNSIGNED_BYTE, magenta);
glTexImage2D(GL_TEXTURE_CUBE_MAP_NEGATIVE_Z ,
0,3,1,1,0,GL_RGB,GL_UNSIGNED_BYTE, yellow);
glTexParameteri(GL_TEXTURE_CUBE_MAP,
GL_TEXTURE_MAG_FILTER,GL_NEAREST);
113
Cube Map Example (init III)
673
GLuint texMapLocation;
GLuint tex[1];
texMapLocation = glGetUniformLocation(program, "texMap");
glUniform1i(texMapLocation, tex[0]);
Adding Normals
674
void quad(int a, int b, int c, int d)
{
static int i =0;
float normal;
normal = normalize(cross(vertices[b] - vertices[a],
vertices[c] - vertices[b]));
normals[i] = normal;
points [i] = vertices[a];
i++;
// rest of data
}
Vertex Shader
675
out vec3 R;
in vec4 vPosition;
in vec4 Normal;
void main() {
vec4 eyePos = vPosition;
vec4 NN = ModelView*Normal;
vec3 N = normalize(NN.xyz);
R = reflect(eyePos.xyz, N);
}
Fragment Shader
676
in vec3 R;
uniform samplerCube texMap;
void main()
{
vec4 texColor = textureCube(texMap, R);
gl_FragColor = texColor;
}
677
Sphere Mapping
Original environmental mapping technique
proposed by Blinn and Newell based in
using lines of longitude and latitude to map
parametric variables to texture coordinates
OpenGL supports sphere mapping which
requires a circular texture map equivalent to
an image taken with a fisheye lens
678
Sphere Map
114
679
vs Cube Image Reflection Map
680
Objects are mapped to unit sphere
All objects along a reflector map to same point on sphere
Mapping Equations
Consider a unit sphere and the viewer at
at (s, t, 0)
Normal is (s, t, sqrt(1 s*s t*t)
Can compute r = 2(n.v)n v
Going backwards, given r, we get
s = rx/f + , t = ry/f+1/2
where f = sqrt(rx*rx+ry*ry +(rz+1)(rz+1))
681
Shader Applications
683
Objectives
Shader Applications
Texture Mapping Applications
Reflection Maps
Bump Maps
684
Moving vertices
- Morphing
- Wave motion
- Fractals
Lighting
- Cartoon shaders
115
685
Wave Motion Vertex Shader
uniform float time;
uniform float xs, zs, // frequencies
uniform float h; // height scale
uniform mat4 ModelView, Projection;
in vec4 vPosition;
void main() {
vec4 t =vPosition;
t.y = vPosition.y
+ h*sin(time + xs*vPosition.x)
+ h*sin(time + zs*vPosition.z);
gl_Position = Projection*ModelView*t;
}
Particle System
uniform vec3 init_vel;
uniform float g, m, t;
uniform mat4 Projection, ModelView;
in vPosition;
void main(){
vec3 object_pos;
object_pos.x = vPosition.x + vel.x*t;
object_pos.y = vPosition.y + vel.y*t
+ g/(2.0*m)*t*t;
object_pos.z = vPosition.z + vel.z*t;
gl_Position = Projection*
ModelView*vec4(object_pos,1);
}
686
687
Texture mapping
mapping
bump mapping
688
Cube Maps
We can form a cube map texture by
defining six 2D texture maps that
correspond to the sides of a box
Supported by OpenGL
Also supported in GLSL through cubemap
sampler
vec4 texColor = textureCube(mycube, texcoord);
Texture coordinates must be 3D
689
Environment Map
Use reflection vector to locate texture in
cube map
690
Environment Maps with Shaders
Environment map usually computed in
world coordinates which can differ from
object coordinates because of modeling
matrix
- May have to keep track of modeling matrix and
pass it shader as a uniform variable
Can also use reflection map or refraction
map (for example to simulate water)
116
691
Reflection Map Vertex Shader
uniform mat4 Projection, ModelView, NormalMatrix;
in vec4 vPosition;
in vec4 normal;
out vec3 R;
void main(void)
{
vec3 N = normalize(NormalMatrix*normal);
vec4 eyePos = ModelView*gvPosition;
R = reflect(-eyePos.xyz, N);
}
692
Reflection Map Fragment Shader
in vec3 R;
uniform samplerCube texMap;
void main(void)
{
gl_FragColor = textureCube(texMap, R);
}
693
Bump Mapping
Perturb normal for each fragment
Store perturbation as textures
694
Normalization Maps
Cube maps can be viewed as lookup
tables 1-4 dimensional variables
Vector from origin is pointer into table
Example: store normalized value of vector
in the map
- Same for all points on that vector
- Use normalization map instead of
normalization function
- Lookup replaces sqrt, mults and adds
695
Introduction
Lets consider an example for which a
fragment program might make sense
Mapping methods
- Texture mapping
- Environmental (reflection) mapping
Variant of texture mapping
- Bump mapping
Solves flatness problem of texture mapping
696
Modeling an Orange
Consider modeling an orange
Texture map a photo of an orange onto a
surface
- Captures dimples
- Will not be correct if we move viewer or light
- We have shades of dimples rather than their
correct orientation
Ideally we need to perturb normal across
surface of object and compute a new
color at each interior point
117
697
Bump Mapping (Blinn)
Consider a smooth surface
n
p
698
Rougher Version
n
p
p
699
Equations
p
u
=[ x/ u, y/ u, z/ u]
T
p(u,v) = [x(u,v), y(u,v), z(u,v)]
T
p
v
=[ x/ v, y/ v, z/ v]
T
n = (p
u
p
v
) / | p
u
p
v
|
700
Tangent Plane
p
u
p
v
n
701
Displacement Function
p = p + d(u,v) n
d(u,v) is the bump or displacement function
|d(u,v)| << 1
702
Perturbed Normal
n = p
u
p
v
p
u
= p
u
+ (d/u)n + d(u,v)n
u
p
v
= p
v
+ (d/v)n + d(u,v)n
v
If d is small, we can neglect last term
118
703
Approximating the Normal
n = p
u
p
v
n + (d/u)n p
v
+ (d/v)n p
u
The vectors n p
v
and n p
u
lie
in the tangent plane
Hence the normal is displaced in the tangent
plane
Must precompute the arrays d/ u and d/ v
Finally,we perturb the normal during shading
704
Image Processing
Suppose that we start with a function d(u,v)
We can sample it to form an array D=[d
ij
]
Then d/ u d
ij
d
i-1,j
and d/ v d
ij
d
i,j-1
Embossing: multipass approach using
floating point buffer
Example
705
Single Polygon and a Rotating Light Source
706
How to do this?
The problem is that we want to apply the
perturbation at all points on the surface
Cannot solve by vertex lighting (unless
polygons are very small)
Really want to apply to every fragment
Cant do that in fixed function pipeline
But can do with a fragment program!!
Compositing and Blending
708
Objectives
Learn to use the A component in RGBA
color for
- Blending for translucent surfaces
- Compositing images
- Antialiasing
119
709
Opacity and Transparency
Opaque surfaces permit no light to pass through
Transparent surfaces permit all light to pass
Translucent surfaces pass some light
translucency = 1 opacity (o)
opaque surface o =1
710
Physical Models
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
711
Writing Model
Use A component of RGBA (or RGBo) color to
store opacity
During rendering we can expand our writing
model to use RGBA values
Color Buffer
destination
component
blend
destination blending
factor
source blending factor
source
component
712
Blending Equation
We can define source and destination blending
factors for each RGBA component
s = [s
r
, s
g
, s
b
, s
o
]
d = [d
r
, d
g
, d
b
, d
o
]
Suppose that the source and destination colors are
b = [b
r
, b
g
, b
b
, b
o
]
c = [c
r
, c
g
, c
b
, c
o
]
Blend as
c = [b
r
s
r
+ c
r
d
r
, b
g
s
g
+ c
g
d
g
, b
b
s
b
+ c
b
d
b
, b
o
s
o
+ c
o
d
o
]
713
OpenGL Blending and Compositing
Must enable blending and pick source and
destination factors
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
714
Example
Suppose that we start with the opaque background
color (R
0
,G
0
,B
0
,1)
- This color becomes the initial destination color
We now want to blend in a translucent polygon with
color (R
1
,G
1
,B
1
,o
1
)
Select GL_SRC_ALPHA and GL_ONE_MINUS_SRC_ALPHA
as the source and destination blending factors
R
1
= o
1
R
1
+(1- o
1
) R
0,

Note this formula is correct if polygon is either
opaque or transparent
120
715
Clamping and Accuracy
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
- 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
716
Order Dependency
Is this image correct?
- Probably not
- Polygons are rendered
in the order they pass
down the pipeline
- Blending functions
are order dependent
717
Opaque and Translucent Polygons
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
- Render with glDepthMask(GL_FALSE) which makes
depth buffer read-only
Sort polygons first to remove order dependency
718
Fog
We can composite with a fixed color and have
the blending factors depend on depth
- Simulates a fog effect
Blend source color C
s
and fog color C
f
by
C
s
=f C
s
+ (1-f) C
f
f is the fog factor
- Exponential
- Gaussian
- Linear (depth cueing)
Deprecated but can recreate
719
Fog Functions
720
Line Aliasing
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
121
721
Antialiasing
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
no overlap overlap
722
Area Averaging
Use average area o
1
+o
2
-o
1
o
2
as blending factor
723
OpenGL Antialiasing
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);
724
Accumulation Techniques
Compositing and blending are limited by resolution
of the frame buffer
- Typically 8 bits per color component
The accumulation buffer was a high resolution buffer
(16 or more bits per component) that avoided this
problem
Could write into it or read from it with a scale factor
Slower than direct compositing into the frame buffer
Now deprecated but can do techniques with floating
point frame buffers
725
Applications
Compositing
Image Filtering (convolution)
Whole scene antialiasing
Depth of Field
Motion effects
Hierarchical Modeling I
122
727
Objectives
Examine the limitations of linear modeling
- Symbols and instances
Introduce hierarchical models
- Articulated models
- Robots
Introduce Tree and DAG models
728
Instance Transformation
Start with a prototype object (a symbol)
Each appearance of the object in the
model is an instance
- Must scale, orient, position
- Defines instance transformation
729
Symbol-Instance Table
Can store a model by assigning a number to
each symbol and storing the parameters
for the instance transformation
730
Relationships in Car Model
Symbol-instance table does not show
relationships between parts of model
Consider model of car
- Chassis + 4 identical wheels
- Two symbols
Rate of forward motion determined by
rotational speed of wheels
731
Structure Through Function Calls
car(speed)
{
chassis()
wheel(right_front);
wheel(left_front);
wheel(right_rear);
wheel(left_rear);
}
Fails to show relationships well
Look at problem using a graph
A graph consists of a set of nodes (vertices)
and a set of edges (links)
Edge connects a pair of nodes
- Directed or undirected
Cycle: directed path that is a loop
732
Graph Representation
loop
123
A tree is a directed graph with no cycles.
Each node (except the root) has exactly
one parent node
- May have multiple children
- Leaf or terminal node: no children
733
Tree
root node
leaf node
734
Tree Model of Car
735
DAG Model
If we use the fact that all the wheels are
identical, we get a directed acyclic graph
- Use a single prototype object.
- Many edges point to it, but none point back.
- Not much different than dealing with a tree
736
Modeling with Trees
Must decide what information to place in
nodes and what to put in edges
Nodes
- What to draw
- Pointers to children
Edges
- May have information on incremental changes
to transformation matrices (can also store in
nodes)
737
Robot Arm
robot arm
parts in their own
coodinate systems
738
Articulated Models
Robot arm is an example of an articulated
model
- Parts connected at joints
- Can specify state of model by
giving all joint angles
124
739
Relationships in Robot Arm
Base rotates independently
- Single angle determines position
Lower arm attached to base
- Its position depends on rotation of base
- Must also translate relative to base and rotate
about connecting joint
Upper arm attached to lower arm
- Its position depends on both base and lower arm
- Must translate relative to lower arm and rotate
about joint connecting to lower arm
740
Required Matrices
Rotation of base: R
b
- Apply M= R
b
to base
Translate lower arm relative to base: T
lu
Rotate lower arm around joint: R
lu
- Apply M= R
b
T
lu
R
lu
to lower arm
Translate upper arm relative to upper arm: T
uu
Rotate upper arm around joint: R
uu
- Apply M= R
b
T
lu
R
lu
T
uu
R
uu
to upper arm
741
OpenGL Code for Robot
mat4 ctm;
robot_arm()
{
ctm = RotateY(theta);
base();
ctm *= Translate(0.0, h1, 0.0);
ctm *= RotateZ(phi);
lower_arm();
ctm *= Translate(0.0, h2, 0.0);
ctm *= RotateZ(psi);
upper_arm();
}
742
Tree Model of Robot
Note code shows relationships between
parts of model
- Can change look of parts easily without
altering relationships
Simple example of tree model
Want a general node structure
for nodes
743
Possible Node Structure
Code for drawing part or
pointer to drawing function
linked list of pointers to children
matrix relating node to parent
744
Generalizations
Need to deal with multiple children
- How do we represent a more general tree?
- How do we traverse such a data structure?
Animation
- How to use dynamically?
- Can we create and delete nodes during
execution?
125
Hierarchical Modeling II
746
Objectives
Build a tree-structured model of a
humanoid figure
Examine various traversal strategies
Build a generalized tree-model structure
that is independent of the particular model
747
Humanoid Figure
748
Building the Model
Can build a simple implementation using
quadrics: ellipsoids and cylinders
Access parts through functions
-torso()
-left_upper_arm()
Matrices describe position of node with
respect to its parent
- M
lla
positions left lower leg with respect to left
upper arm
749
Tree with Matrices
750
Display and Traversal
The position of the figure is determined by
11 joint angles (two for the head and one
for each other part)
Display of the tree requires a graph
traversal
- Visit each node once
- Display function at each node that describes
the part associated with the node, applying the
correct transformation matrix for position and
orientation
126
751
Transformation Matrices
There are 10 relevant matrices
- Mpositions and orients entire figure through
the torso which is the root node
- M
h
positions head with respect to torso
- M
lua
, M
rua
, M
lul
, M
rul
position arms and legs with
respect to torso
- M
lla
, M
rla
, M
lll
, M
rll
position lower parts of limbs
with respect to corresponding upper limbs
752
Stack-based Traversal
Set model-view matrix to Mand draw torso
Set model-view matrix to MM
h
and draw
head
For left-upper arm need MM
lua
and so on
Rather than recomputing MM
lua
from
scratch or using an inverse matrix, we can
use the matrix stack to store M and other
matrices as we traverse the tree
753
Traversal Code
figure() {
PushMatrix()
torso();
Rotate ();
head();
PopMatrix();
PushMatrix();
Translate();
Rotate();
left_upper_arm();
PopMatrix();
PushMatrix();
save present model-view matrix
update model-view matrix for head
recover original model-view matrix
save it again
update model-view matrix
for left upper arm
recover and save original
model-view matrix again
rest of code
754
Analysis
The code describes a particular tree and a
particular traversal strategy
- Can we develop a more general approach?
Note that the sample code does not
include state changes, such as changes
to colors
- May also want to use a PushAttrib and
PopAttrib to protect against unexpected
state changes affecting later parts of the code
755
General Tree Data Structure
Need a data structure to represent tree
and an algorithm to traverse the tree
We will use a left-child right sibling
structure
- Uses linked lists
- Each node in data structure is two pointers
- Left: next node
- Right: linked list of children
756
Left-Child Right-Sibling Tree
127
757
Tree node Structure
At each node we need to store
- Pointer to sibling
- Pointer to child
- Pointer to a function that draws the object
represented by the node
- Homogeneous coordinate matrix to multiply on
the right of the current model-view matrix
Represents changes going from parent to node
In OpenGL this matrix is a 1D array storing
matrix by columns
758
C Definition of treenode
typedef struct treenode
{
mat4 m;
void (*f)();
struct treenode *sibling;
struct treenode *child;
} treenode;
759
Torso and head nodes
treenode torso_node, head_node, lua_node, ;
torso_node.m = RotateY(theta[0]);
torso_node.f = torso;
torso_node.sibling = NULL;
torso_node.child = &head_node;
head_node.m = translate(0.0,
TORSO_HEIGHT+0.5*HEAD_HEIGHT,
0.0)*RotateX(theta[1])*RotateY(theta[2]);
head_node.f = head;
head_node.sibling = &lua_node;
head_node.child = NULL;
760
Notes
The position of figure is determined by 11 joint
angles stored in theta[11]
Animate by changing the angles and
redisplaying
We form the required matrices using Rotate
and Translate
- More efficient than software
- Because the matrix is formed using the model-
view matrix, we may want to first push original
model-view matrix on matrix stack
761
Preorder Traversal
void traverse(treenode* root)
{
if(root==NULL) return;
mvstack.push(model_view);
model_view = model_view*root->m;
root->f();
if(root->child!=NULL)
traverse(root->child);
model_view = mvstack.pop();
if(root->sibling!=NULL)
traverse(root->sibling);
}
762
Notes
We must save model-view matrix before
multiplying it by node matrix
- Updated matrix applies to children of node but
not to siblings which contain their own matrices
The traversal program applies to any left-
child right-sibling tree
- The particular tree is encoded in the definition
of the individual nodes
The order of traversal matters because of
possible state changes in the functions
128
763
Dynamic Trees
If we use pointers, the structure can be dynamic
typedef treenode *tree_ptr;
tree_ptr torso_ptr;
torso_ptr = malloc(sizeof(treenode));
Definition of nodes and traversal are
essentially the same as before but we can add
and delete nodes during execution
Graphical Objects and Scene Graphs
765
Objectives
Introduce graphical objects
Generalize the notion of objects to include
lights, cameras, attributes
Introduce scene graphs
766
Limitations of Immediate
Mode Graphics
When we define a geometric object in an
application, upon execution of the code
the object is passed through the pipeline
It then disappears from the graphical
system
To redraw the object, either changed or
the same, we must reexecute the code
Display lists provide only a partial solution
to this problem
767
OpenGL and Objects
OpenGL lacks an object orientation
Consider, for example, a green sphere
- We can model the sphere with polygons or use
OpenGL quadrics
- Its color is determined by the OpenGL state and
is not a property of the object
Defies our notion of a physical object
We can try to build better objects in code
using object-oriented languages/techniques
768
Imperative Programming
Model
Example: rotate a cube
The rotation function must know how the
cube is represented
- Vertex list
- Edge list
Application Rotate
cube data
results
129
769
Object-Oriented
Programming Model
Application Cube Object
In this model, the representation is stored with
the object
The application sends a message to the object
The object contains functions (methods) which
allow it to transform itself
message
770
C/C++
Can try to use C structs to build objects
C++ provides better support
- Use class construct
- Can hide implementation using public, private,
and protected members in a class
- Can also use friend designation to allow
classes to access each other
771
Cube Object
Suppose that we want to create a simple
cube object that we can scale, orient,
position and set its color directly through
code such as
cube mycube;
mycube.color[0]=1.0;
mycube.color[1]= mycube.color[2]=0.0;
mycube.matrix[0][0]=
772
Cube Object Functions
We would also like to have functions that
act on the cube such as
-mycube.translate(1.0, 0.0,0.0);
-mycube.rotate(theta, 1.0, 0.0, 0.0);
-setcolor(mycube, 1.0, 0.0, 0.0);
We also need a way of displaying the cube
-mycube.render();
773
Building the Cube Object
class cube {
public:
float color[3];
float matrix[4][4];
// public methods
private:
// implementation
}
774
The Implementation
Can use any implementation in the private
part such as a vertex list
The private part has access to public
members and the implementation of class
methods can use any implementation
without making it visible
Render method is tricky but it will invoke
the standard OpenGL drawing functions
130
775
Other Objects
Other objects have geometric aspects
- Cameras
- Light sources
But we should be able to have
nongeometric objects too
- Materials
- Colors
- Transformations (matrices)
776
Application Code
cube mycube;
material plastic;
mycube.setMaterial(plastic);
camera frontView;
frontView.position(x ,y, z);
777
Light Object
class light { // match Phong model
public:
boolean type; //ortho or perspective
boolean near;
float position[3];
float orientation[3];
float specular[3];
float diffuse[3];
float ambient[3];
}
778
Scene Descriptions
If we recall figure model, we saw that
- We could describe model either by tree or by
equivalent code
- We could write a generic traversal to display
If we can represent all the elements of a
scene (cameras, lights,materials,
geometry) as C++ objects, we should be
able to show them in a tree
- Render scene by traversing this tree
779
Scene Graph
780
Preorder Traversal
PushAttrib
PushMatrix
Color
Translate
Rotate
Object1
Translate
Object2
PopMatrix
PopAttrib
131
781
Group Nodes
Necessary to isolate state chages
- Equivalent to Push/Pop
Note that as with the figure model
- We can write a universal traversal algorithm
- The order of traversal can matter
If we do not use the group node, state changes
can persist
782
Inventor and Java3D
Inventor and Java3D provide a scene graph API
Scene graphs can also be described by a file
(text or binary)
- Implementation independent way of
transporting scenes
- Supported by scene graph APIs
However, primitives supported should match
capabilities of graphics systems
- Hence most scene graph APIs are built on top
of OpenGL or DirectX (for PCs)
783
VRML
Want to have a scene graph that can be
used over the World Wide Web
Need links to other sites to support
distributed data bases
Virtual Reality Markup Language
- Based on Inventor data base
- Implemented with OpenGL
Open Scene Graph
Supports very complex geometries by
adding occulusion culling in first path
Supports translucently through a second
pass that sorts the geometry
First two passes yield a geometry list that
is rendered by the pipeline in a third pass
784
Curves and Surfaces
786
Objectives
Introduce types of curves and surfaces
- Explicit
- Implicit
- Parametric
- Strengths and weaknesses
Discuss Modeling and Approximations
- Conditions
- Stability
132
787
Escaping Flatland
Until now we have worked with flat entities
such as lines and flat polygons
- Fit well with graphics hardware
- Mathematically simple
But the world is not composed of flat entities
- Need curves and curved surfaces
- May only have need at the application level
- Implementation can render them approximately
with flat primitives
788
Modeling with Curves
data points
approximating curve
interpolating data point
789
What Makes a Good Representation?
There are many ways to represent curves and
surfaces
Want a representation that is
- Stable
- Smooth
- Easy to evaluate
- Must we interpolate or can we just come close to data?
- Do we need derivatives?
790
Representation of Curves & Surfaces
Three types of object representation:
- explicit:
- implicit:
- parametric: . )] ( ) ( ) ( [ ) (
T
u z u y u x u = p
). (x f y =
. 0 ) , ( = y x f
791
Explicit Representation
Most familiar form of curve in 2D
y=f(x)
Cannot represent all curves
- Vertical lines
- Circles
Extension to 3D
- y=f(x), z=g(x)
- The form z = f(x,y) defines a surface
x
y
x
y
z
792
Explicit Representation of Lines
The explicit form of a curve in 2D gives
the value of one dependent variable in
terms of the other independent variable.
- An explicit form may or may not exist. We write
for the line even though the equation does not
hold for vertical lines.
). (x f y =
h mx y + =
133
793
Explicit Representation of Circles
A circle has constant curvature.
- An explicit form exists only for half of the curve:
- The other half requires a second equation:
- 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.
.
2 2
x r y =
.
2 2
x r y =
794
Explicit Surfaces
A surface requires two independent
variables and two equations:
- The line cannot be in a plane of constant x.
- We cannot represent a sphere with only one
equation of the form
.
,
d cx z
b ax y
+ =
+ =
). , ( y x f z =
795
Implicit Representation
An implicit curve has the form
Much more robust
- A line: ax + by + c = 0.
- A circle: x
2
+ y
2
- r
2
= 0.
Implicit functions test membership.
- 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.
. 0 ) , ( = y x f
796
Implicit Surfaces
In three dimensions, a surface is described by
the implicit form
- A plane: ax + by + cz + d = 0.
- A sphere: x
2
+ y
2
+ z
2
- r
2
= 0.
Intersect two 3D surfaces to get a 3D curve.
Implicit curve representations are difficult to
use in 3D.
. 0 ) , , ( = z y x f
797
Algebraic 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 two: 2 > i+j+k
This yields at most 10 terms
0 =
z
y
x
k
j
i j k
i
798
Parametric Form
Expresses the value of each spatial
component in terms of an independent
variable u, the parameter:
- 3 explicit functions, 1 independent variable.
- Same form in 2D and 3D.
The most flexible and robust form for
computer graphics.
). ( ), ( ), ( u z z u y y u x x = = =
134
Separate equation for each spatial variable
x=x(u)
y=y(u)
z=z(u)
The parametric form describes the locus of points
being drawn as u varies: u
min
u u
max
799
Parametric Curves
Matrix notation:
p(u)=[x(u), y(u), z(u)]
T
p(u)
p(u
min
)
p(u
max
)
800
Derivative of the Curve
The derivative is the velocity with which
the curve is traced out:
- It points in the direction tangent to the curve.
.
) (
) (
) (
) (
(
(
(
=
du u dz
du u dy
du u dx
du
u dp
801
Parametric Lines
Line connecting two points p
0
and p
1
p(u)=(1-u)p
0
+up
1
We can normalize u to be over the interval (0,1)
p(0) = p
0
p(1)= p
1
Ray from p
0
in the direction d
p(u)=p
0
+ud
p(0) = p
0
p(1)= p
0
+d
d
802
Parametric Surfaces
Surfaces require 2 parameters
x=x(u,v)
y=y(u,v)
z=z(u,v)
p(u,v) = [x(u,v), y(u,v), z(u,v)]
T
Want same properties as curves:
- Smoothness
- Differentiability
- Ease of evaluation
x
y
z p(u,0)
p(1,v)
p(0,v)
p(u,1)
803
Normals
We can differentiate with respect to u and v to
obtain the normal at any point p
(
(
(
c c
c c
c c
=
c
c
u v u
u v u
u v u
u
v u
/ ) , ( z
/ ) , ( y
/ ) , ( x
) , ( p
(
(
(
c c
c c
c c
=
c
c
v v u
v v u
v v u
v
v u
/ ) , ( z
/ ) , ( y
/ ) , ( x
) , ( p
v
v u
u
v u
c
c
c
c
=
) , ( ) , ( p p
n
804
Parametric Planes
Point-Vector form
p(u,v)=p
0
+uq+vr
n = q x r q
r
p
0
n
Three-point form
p
0
n
p
1
p
2
q = p
1
p
0
r = p
2
p
0
135
805
Parametric Sphere
x(u,v) = r cos q sin f
y(u,v) = r sin q sin f
z(u,v) = r cos f
360 > q > 0
180 > f > 0
u constant: circles of constant longitude
f constant: circles of constant latitude
differentiate to show n = p
806
Curve Segments
After normalizing u, each curve is written
p(u)=[x(u), y(u), z(u)]
T
, 1 > u > 0
In classical numerical methods, we design a
single global curve
In computer graphics and CAD, it is better to
design small connected curve segments
p(u)
q(u)
p(0)
q(1)
join point p(1) = q(0)
807
Parametric Polynomial Curves
u c
u x
i
N
i
xi
=
=
0
) (
u c
u y
j
M
j
yj
=
=
0
) (
u c
u z
k
L
k
zk
=
=
0
) (
If N=M=K, we need to determine 3(N+1) coefficients
Equivalently we need 3(N+1) independent conditions
Noting that the curves for x, y and z are independent,
we can define each independently in an identical manner
We will use the form where p can be any of x, y, z
u c
u
k
L
k
k
=
=
0
) ( p
808
Why Polynomials
Easy to evaluate
Continuous and differentiable everywhere
- Must worry about continuity at join points
including continuity of derivatives
p(u)
q(u)
join point p(1) = q(0)
but p(1) = q(0)
809
Cubic Parametric Polynomials
N=M=L=3, gives balance between ease of
evaluation and flexibility in design
Four coefficients to determine for each of x, y and z
Seek four independent conditions for various
values of u resulting in 4 equations in 4 unknowns
for each of x, y and z
- Conditions are a mixture of continuity
requirements at the join points and conditions for
fitting the data
u c
u
k
k
k
=
=
3
0
) ( p
810
Cubic Polynomial Surfaces
v u c
v u
j i
i j
ij
= =
=
3
0
3
0
) , ( p
p(u,v)=[x(u,v), y(u,v), z(u,v)]
T
where
p is any of x, y or z
Need 48 coefficients (3 independent sets of 16) to
determine a surface patch
136
811
Parametric Polynomial Surfaces
A surface patch:
- Specify 3(n+1)(m+1) coefficients.
- Let n = m, and let u and v vary over the
rectangle 0 s u, v s 1.

= =
=
n
i
m
j
j i
ij
v u c v u
0 0
) , ( p
In general,
Designing Parametric Cubic Curves
813
Objectives
Introduce the types of curves
- Interpolating
- Hermite
- Bezier
- B-Spline
Analyze their performance
814
Design Criteria
Why we prefer parametric polynomials of
low degree:
- Local control of shape,
- Smoothness and continuity,
- Ability to evaluate derivatives,
- Stability,
- Ease of rendering.
815
Smoothness
Smoothness guaranteed because our
polynomial equations are differentiable.
Difficulties arise at the join points.
816
Control 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.
137
817
Parametric Cubic
Polynomial Curves
Choosing the degree:
- High degree allows many control points, but
computation is expensive.
- Low degree may mean low level of control.
The compromise: use low-degree curves
over short intervals.
- Most designers work with cubic polynomial
curves.
818
Matrix Notation
=
= =
3
0
, ) (
k
T k
k
u u c u c p
,
3
2
1
0
(
(
(
(
=
c
c
c
c
c ,
1
3
2
(
(
(
(
=
u
u
u
u .
(
(
(
=
kz
ky
kx
k
c
c
c
c
where
the coefficient
matrix to be
determined
control
points
819
Interpolation
An interpolating polynomial passes
through its control points.
- Suppose we have four controls points
- We let u vary over the interval [0,1], giving us
four equally spaced values: 0, 1/3, 2/3, 1.
. 3 0 for , s s
(
(
(
= k
z
y
x
k
k
k
k
p
820
Evaluating the Control
Points
We seek coefficients c
0
, c
1
, c
2
, c
3
satisfying the four conditions:
. ) 1 (
, ) 3 2 ( ) 3 2 ( 3 2 ) 3 2 (
, ) 3 1 ( ) 3 1 ( 3 1 ) 3 1 (
, ) 0 (
3 2 1 0 3
3
3
2
2
1 0 2
3
3
2
2
1 0 1
0 0
c c c c p p
c c c c p p
c c c c p p
c p p
+ + + = =
+ + + = =
+ + + = =
= =
821
Matrix Notation
In matrix notation
, Ac p =
(
(
(
(
=
3
2
1
0
p
p
p
p
p .
1 1 1 1
) 3 2 ( ) 3 2 ( 3 2 1
) 3 1 ( ) 3 1 ( 3 1 1
0 0 0 1
3 2
3 2
(
(
(
(
= A
where
and
a column vector
of row vectors
nonsingular: we
will use its inverse
822
Interpolating Geometry Matrix
The desired coefficients are
(
(
(
(

= =

5 . 4 5 . 13 5 . 13 5 . 4
5 . 4 18 5 . 22 9
1 5 . 4 9 5 . 5
0 0 0 1
1
A M
I
. p M c
I
=
138
823
Interpolating Multiple Segments
Use the last control point of one segment
as the first control point of the next
segment.
- To achieve smoothness in addition to
continuity, we will need additional constraints
on the derivatives.
824
Blending Functions
Substituting the interpolating coefficients
into our polynomial:
Let
The b(u) are the blending polynomials.
. ) ( p M u c u p
I
T T
u = =
, ) ( ) ( p b p
T
u u = . ) ( u M b
T
I
u = where
825
Visualizing the Curve
Using Blending Functions
The effect on the curve of an individual
control point is easier to see by studying
its blending function.
826
The Cubic Interpolating Patch
A bicubic surface patch:

= =
=
3
0
3
0
. ) , (
i j
ij
j i
v u v u c p
827
Matrix Notation
In matrix form, the patch is defined by
- The column vector v = [1 v v
2
v
3
]
T
.
- C is a 4 x 4 matrix of column vectors.
16 equations in 16 unknowns.
, ) , ( Cv u p
T
v u =
828
Solving the Surface Equations
By setting v = 0, 1/3, 2/3, 1 we can
sample the surface using curves in u:
- The coefficient matrix C is computed by
- The equation for the surface becomes
.
T T
I
T
CA u P M u =
.
T
I I
PM M C=
. ) , ( v PM M u p
T
I I
T
v u =
139
829
Blending Patches
Extending our use of blending
polynomials to surfaces:
- 16 simple patches form a surface.
- Also known as tensor-product surfaces.
- These surfaces are not very smooth.
But they are separable, meaning they allow us to work
with functions in u and v independently.

= =
=
3
0
3
0
. ) ( ) ( ) , (
i j
ij j i
v b u b v u p p
830
Other Types of Curves and Surfaces
How can we get around the limitations of
the interpolating form
- Lack of smoothness
- Discontinuous derivatives at join points
We have four conditions (for cubics) that
we can apply to each segment
- Use them other than for interpolation
- Need only come close to the data
831
Hermite Form
p(0) p(1)
p(0)
p(1)
Use two interpolating conditions and
two derivative conditions per segment
Ensures continuity and first derivative
continuity between segments
832
Hermite Curves and Surfaces
Use the data at control points differently in
an attempt to get smoother results.
- We insist that the curve interpolate the control
points only at the two ends, p
0
and p
3
.
. ) 1 (
, ) 0 (
3 2 1 0 3
0 0
c c c c p p
c p p
+ + + = =
= =
833
Additional Conditions
The derivative is a quadratic polynomial:
- We now can derive two additional conditions:
. 3 2 ) (
3
2
2 1
c c c p u u
du dz
du dy
du dx
u + + =
(
(
(
= '
. 3 2 ) 1 (
, ) 0 (
3 2 1 3
1 0
c c c p p
c p p
+ + = ' = '
= ' = '
834
Matrix Form
The desired coefficient matrix is
- M
H
is the Hermite geometry matrix.
. q M c
H
=
.
2 2 1 0
0 0 1 0
1 1 1 1
0 0 0 1
3
0
3
0
c
p
p
p
p
(
(
(
(
=
(
(
(
(
'
'
call this q
140
835
The Hermite Geometry Matrix
The resulting polynomial is
.
1 1 2 2
1 2 3 3
0 1 0 0
0 0 0 1
(
(
(
(

=
H
M
. ) ( q M u p
H
T
u =
836
Blending polynomials
Using blending functions p(u)=b(u)
T
q,
Although these functions are smooth, the Hermite form is
not used directly in Computer Graphics and CAD because
we usually have control points but not derivatives
However, the Hermite form is the basis of the Bezier form
.
2
3 2
1 3 2
) (
2 3
2 3
2 3
2 3
(
(
(
(
+
+
+
= =
u u
u u u
u u
u u
u
T
H
u M b
837
Parametric and Geometric Continuity
We can require the derivatives of x, y,and
z to each be continuous at join points
(parametric continuity)
Alternately, we can only require that the
tangents of the resulting curve be
continuous (geometry continuity)
The latter gives more flexibility as we
have need satisfy only two conditions
rather than three at each join point
838
Example
Here the p and q have the same tangents
at the ends of the segment but different
derivatives
Generate different
Hermite curves
This techniques is used
in drawing applications
839
Parametric Continuity
Continuity is enforced by matching
polynomials at join points.
- C
0
parametric continuity:
.
) 0 (
) 0 (
) 0 (
) 0 (
) 1 (
) 1 (
) 1 (
) 1 (
(
(
(
= =
(
(
(
=
z
y
x
z
y
x
q
q
q
p
p
p
q p
840
C
1
Parametric Continuity
Matching derivatives at the join points
gives us C
1
continuity:
.
) 0 (
) 0 (
) 0 (
) 0 (
) 1 (
) 1 (
) 1 (
) 1 (
(
(
(
'
'
'
= ' =
(
(
(
'
'
'
= '
z
y
x
z
y
x
q
q
q
p
p
p
q p
141
841
Another Approach:
Geometric Continuity
If the derivatives are proportional, then we
have geometric continuity.
- One extra degree of freedom.
- Extends to higher dimensions.
different
magnitude
same
direction
842
Bezier Curves: Basic Idea
In graphics and CAD, we usually dont have
derivative data
Bezier suggested using the same 4 data
points as with the cubic interpolating curve
to approximate the derivatives in the
Hermite form
843
Bezier Curves and Surfaces
Bezier added control points to manipulate
derivatives.
- The two derivative conditions become
. 3 2 3 3
, 3 3
3 2 1 2 3
1 0 1
c c c p p
c p p
+ + =
=
844
Bezier Geometry Matrix
We solve c=M
B
p, where
The cubic Bezier polynomial is thus
.
1 3 3 1
0 3 6 3
0 0 3 3
0 0 0 1
(
(
(
(
=
B
M
. ) ( p M u p
B
T
u =
845
Bezier Blending Functions
- These functions are Bernstein polynomials:
. ) 1 (
)! ( !
!
) (
k d k
kd
u u
k d k
d
u b

=
846
Properties of Bernstein Polynomials
All zeros are either at u = 0 or u = 1.
- Therefore, the curve must be smooth over (0,1)
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.
142
847
Bezier Surface Patches
Using a 4 x 4 array of control points P,
.
) ( ) ( ) , (
3
0
3
0
v PM M u
p p
T
B B
T
i j
ij j i
u b u b v u
=
=
= =
two blending functions
848
Convex Hull Property in 3D
The patch is inside the convex hull of the
control points and interpolates the four
corner points p
00
, p
03
, p
30
, p
33
.
849
Bezier Patch Edges
Partial derivatives in the u and v directions
treat the edges of the patch as 1D curves.
). ( 3 ) 0 , 0 (
), ( 3 ) 0 , 0 (
00 01
00 10
p p
p
p p
p
=
c
c
=
c
c
v
u
850
Bezier Patch Corners
The twist vector draws the center of the
patch away from the plane.
). ( 9 ) 0 , 0 (
11 10 01 00
2
p p p p
p
+ =
c c
c
v u
851
Cubic B-Splines
Bezier curves and surfaces are widely
used.
- One limitation: C
0
continuity at the join points.
B-Splines are not required to interpolate
any control points.
- Relaxing this requirement makes it possible to
enforce greater smoothness at join points.
852
The Cubic B-Spline Curve
The control points now reside in the
middle of a sequence:
- The curve spans only the distance between the
middle two control points.
}. , , , {
1 1 2 + i i i i
p p p p
143
853
Formulating the Geometry Matrix
We are looking for a polynomial
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.
, ) ( Mp u p
T
u =
854
Join Point Continuity
Construct q from the same matrix as p:
- Now let q(u) = u
T
Mq.
- Constraints on derivates allow us to control
smoothness.
(
(
(
(
=
+
1
1
2
i
i
i
i
p
p
p
p
p .
1
2
3
(
(
(
(
i
i
i
i
p
p
p
p
q and
855
Symmetric Approximations
Enforcing symmetry at the join points is a
popular choice for M.
Two conditions that satisfy symmetry are
), (
2
1
) 1 ( ) 0 (
), 4 (
6
1
) 1 ( ) 0 (
2
1 2

= ' = '
+ + = =
i i
i i i
p p q p
p p p q p
856
Additional Conditions
We apply the same symmetry conditions
to p(1), the other endpoint.
- We now have four equations in the four
unknowns c
0
, c
1
, c
2
, c
3
:
. ) ( c u p
T
u =
857
The B-Spline Geometry Matrix
Once we have the coefficient matrix, we
can solve for the geometry matrix:
.
1 3 3 1
0 3 6 3
0 3 0 3
0 1 4 1
6
1
(
(
(
(
=
S
M
858
B-Spline Blending Functions
The blending functions are
(
(
(
(
+ +
+

3
3 2
3 2
3
3 3 3 1
3 6 4
) 1 (
6
1
u
u u u
u u
u
144
859
Advantages of B-spline Curves
In sequence, B-spline curve segments
have C
2
continuity at the join points.
- They are also confined to their convex hulls.
On the other hand, we need more control
points than we did for Bezier curves.
860
B-Splines and Bases
Each control point affects four adjacent
intervals.
+ >
+ < s +
+ < s
< s +
< s +
<
=
. 2 0
, 2 1 ) 1 (
, 1 ) (
, 1 ) 1 (
, 1 2 ) 2 (
, 2 0
) (
3
2
1
0
i u
i u i u b
i u i u b
i u i u b
i u i u b
i u
u B
i
861
Spline Basis Function
A single expression for the spline curve
using basis functions:
=
=
1
1
. ) ( ) (
m
i
i i
u B u p p
862
Approximating Splines
Each B
i
is a shifted version of a single
function.
- Linear combinations of the B
i
form a piecewise
polynomial curve over the whole interval.
863
Spline Surfaces
The same form as Bezier surfaces:
- But one segment per patch, instead of nine!
- However, they are also much smoother.
. ) ( ) ( ) , (
3
0
3
0

= =
=
i j
ij j i
u b u b v u p p
864
General B-Splines
Polynomials of degree d between n knots
u
0
,...,u
n
:
- 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.
=
+
< < =
d
j
k k
j
jk
u u u u u
0
1
, ) ( c p
145
865
The Cox-deBoor Recursion
A particular set of basis splines is defined
by the Cox-deBoor recursion:
s s
=
+
otherwise; 0
, 1
1
0
k k
k
u u u
B
). (
) (
1 , 1
1 1
1 ,
u B
u u
u u
u B
u u
u u
B
d k
k d k
d k
d k
k d k
k
kd
+
+ + +
+
=
866
Recursively Defined B-Splines
Linear interpolation of polynomials of
degree k produces polynomials of degree
k + 1.
867
Uniform Splines
Equally spaced knots.
periodic
uniform
B-spline
868
Nonuniform B-Splines
Repeated knots pull the spline closer to
the control point.
- Open splines extend the curve by repeating
the endpoints.
- Knot sequences:
- Any spacing between the knots is allowed in
the general case.
} , , , , 1 , , 2 , 1 , 0 , 0 , 0 , 0 { n n n n n
}. 1 , 1 , 1 , 1 , 0 , 0 , 0 , 0 {
cubic Bezier curve
often used
869
NURBS
Use weights to increase or decrease the
importance of a particular point.
- The weighted homogeneous-coordinate
representation of a control point p
i
=[x
i
y
i
z
i
] is
.
1
(
(
(
(
=
i
i
i
i i
z
y
x
w q
870
The NURBS Basis Functions
A 4D B-spline
- Derive the w component from the weights:
=
=
(
(
(
=
n
i
i i d i
w u B
u z
u y
u x
u
0
,
. ) (
) (
) (
) (
) ( p q
=
=
n
i
i d i
w u B u w
0
,
. ) ( ) (
146
871
Nonuniform Rational B-Splines
Each component of p(u) is a rational
function in u.
- We use perspective division to recover the 3D
points:
- These curves are invariant under perspective
transformations.
- They can approximate quadricsone
representation for all types of curves.
. ) (
) (
1
) (
0
,
0
,
) (
) (
= =
=
=
n
i
i d i
n
i
i i d i
w u B
w u B
u
u w
u
p
q p
Rendering Curves and Surfaces
873
Objectives
Introduce methods to draw curves
- Approximate with lines
- Finite Differences
Derive the recursive method for
evaluation of Bezier curves and surfaces
Learn how to convert all polynomial data
to data for Bezier polynomials
874
Evaluating Polynomials
Simplest method to render a polynomial
curve is to evaluate the polynomial at many
points and form an approximating polyline
For surfaces we can form an approximating
mesh of triangles or quadrilaterals
Use Horners method to evaluate
polynomials
p(u)=c
0
+u(c
1
+u(c
2
+uc
3
))
- 3 multiplications/evaluation for cubic
875
Polynomial Evaluation Methods
Our standard representation:
Horner's method:
- If the points {u
i
} are spaced uniformly, we can
use the method of forward differences.
=
s s =
n
i
i
i
u u u
0
1 0 , ) ( c p
))). ( ( ( ) (
2 1 0
u u u u u
n
c c c c p + + + + =
876
The Method of Forward Differences
Forward differences defined iteratively:
If u
k+1
- u
k
= h is constant, then A
(n)
p(u
k
) is
constant for all k.
). ( ) ( ) (
), ( ) ( ) (
), ( ) (
) (
1
) ( ) 1 (
1
) 1 (
) 0 (
k
m
k
m
k
m
k k k
k k
u u u
u u u
u u
p p p
p p p
p p
A A = A
= A
= A
+
+
+
147
877
Computing The Forward-
Difference Table
For the cubic polynomial
we construct the table as follows:
, 2 3 1 ) (
3 2
u u u u p + + + =
compute
these
878
Using the Table
Compute successive values of p(u
k
)
starting from the bottom:
). ( ) ( ) (
) 1 ( ) (
1
) 1 (
k
m
k
m
k
m
u p u p p

+
A + A = A
879
Subdivision Curves and Surfaces
A process of iterative refinement that
produces smooth curves and surfaces.
880
Recursive Subdivision of Bezier
Polynomials: deCasteljau Algorithm
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:
881
Efficient Computation of
the Subdivision
), (
2
1
,
1 0 1
0 0
p p l
p l
+ =
=
( ).
2
1
, ) (
2
1
2
1
1 2 0 3
2 1 1 2
r + = =
|
.
|
\
|
+ + =
l r l
p p l l
Requires only shifts and adds!
882
Every Curve is a Bezier Curve
We can render a given polynomial using the
recursive method if we find control points for its
representation as a Bezier curve
Suppose that p(u) is given as an interpolating
curve with control points q
There exist Bezier control points p such that
Equating and solving, we find p=M
B
-1
M
I
p(u)=u
T
M
I
q
p(u)=u
T
M
B
p
148
883
Matrices
Interpolating to Bezier
B-Spline to Bezier
(
(
(
(
(
(
1 0 0 0
6
5
3
2
3
3
1
3
1
2
3
3
6
5
0 0 0 1
1
M M I B
(
(
(
(
1 4 1 0
0 4 2 0
0 2 4 0
0 1 4 1
1
M M S B
884
Example
These three curves were all generated from the same
original data using Bezier recursion by converting all
control point data to Bezier control points
Bezier
Interpolating
B Spline
885
Surfaces
Can apply the recursive method to surfaces if
we recall that for a Bezier patch curves of
constant u (or v) are Bezier curves in u (or v)
First subdivide in u
- Process creates new points
- Some of the original points are discarded
original and kept new
original and discarded
886
Second Subdivision
16 final points for
1 of 4 patches created
887
Normals
For rendering we need the normals if we
want to shade
- Can compute from parametric equations
- Can use vertices of corner points to determine
- OpenGL can compute automatically
v
v u
u
v u
c
c
c
c
=
) , ( ) , ( p p
n
888
Utah Teapot
Most famous data set in computer graphics
Widely available as a list of 306 3D vertices and
the indices that define 32 Bezier patches
149
889
Algebraic Surfaces
Quadric surfaces are described by
implicit equations of the form
- 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.
. 0 = + + c
T T
p b Ap p
890
Rendering Quadric Surfaces
Finding the intersection of a quadric with a
ray involves solving a scalar quadratic
equation.
- We substitute ray p = p
0
+od and use the
quadratic formula.
- Derivatives determine the normal at a given
point.
891
Quadric Objects in OpenGL
OpenGL supports disks, cylinders and
spheres with quadric objects.
- Choose wire frame rendering with
- To draw an object, pass the reference:
GLUquadricObj *qobj;
qobj = gluNewQuadric();
gluQuadricDrawStyle(qobj, GLU_LINE);
gluSphere(qobj, RADIUS, SLICES, STACKS);
892
Bezier Curves in OpenGL
Creating a 1D evaluator:
-type: points, colors, normals, textures, etc.
-u_min, u_max: range.
-stride: points per curve segment.
-order: degree + 1.
-point_array: control points.
glMap1f(type, u_min, u_max, stride,
order, point_array);
893
Drawing the Curve
One evaluator call takes the place of
vertex, color, and normal calls.
- 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();
894
Bezier Surfaces in OpenGL
Using a 2D evaluator:
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();
}
150
895
Example: Bezier Teapot
Vertex information goes in an array:
GLfloat data[32][4][4];
Initialize the grid for wireframe rendering:
void myInit() {
glEnable(GL_MAP2_VERTEX_3);
glMapGrid2f(20, 0.0, 1.0, 20, 0.0, 1.0);
}
896
Drawing the Teapot
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();
}
}

CSC 472

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSC 472

Uploaded by

Copyright:

Available Formats

COURSE NOTES:

Thus hidden surface removal works if we first

You might also like