CSC 472

1
Introduction to Computer
Graphics
P f G W lb Prof. George Wolberg
Dept. of Computer Science
City College of New York
Course Description
Intense introduction to computer graphics.
Intended for advanced undergraduate and
graduate students.
Topics include:
2
Angel/Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012
Topics include:
- Graphics hardware, raster scan conversion
- OpenGL API
- Geometric transformations, 3D viewing
- Geometric modeling, curves and surfaces
- Shading, texture mapping, compositing
Syllabus
Week
1
2-3
4-5
Topic
Introduction, history, vector/raster graphics
OpenGL, GLUT, interaction
Geometry, 2D/3D transformations
3
6
7
8-9
10
11
12-14
Projections, perspective
3D viewing
Midterm, Spring break
Geometric modeling
Shading
Curves and surfaces, texture mapping
Required Text
Edward Angel and Dave Shreiner, Interactive
Computer Graphics: A Top-Down Approach With
Shader-Based OpenGL, 6th Edition, Addison-Wesley,
2012.
4
Supplementary Texts
Supplementary Texts:
- Mike Bailey and Steve Cunningham,
Graphics Shaders, 2
nd
Edition, CRC Press, 2012.
- Rost, Licea-Kane, Ginsburg, Kessenich, Lichtenbelt, Malan,
and Weiblen OpenGL Shading Language 3
rd
Edition
5
and Weiblen, OpenGL Shading Language, 3 Edition,
Addison-Wesley, 2009.
The definitive OpenGL shading language reference (GLSL).
- Dave Shreiner, Mason Woo, Jackie Nieder, and Tom Davis,
OpenGL Programming Guide, 6
th
Edition, Addison-Wesley,
2007.
The definitive OpenGL programming reference
Grading
The final grade is computed as follows:
- Midterm exam: 25%
- Final exam: 25%
- Homework programming assignments: 50%
6
p g g g
Substantial programming assignments are
due every three weeks.
Proficiency in C/C++ is expected.
Prereqs: CSc 30100 and CSc 32200
2
Contact Information
Prof. Wolberg
- Office hours:
Wednesdays 3:30-4:30pm, NAC 8/202I
- Email: wolberg@cs.ccny.cuny.edu
7
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
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.
8
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.
Objectives (2)
Broad introduction to Computer Graphics
- Software
- Hardware
- Applications
9
pp
Top-down approach
Shader-Based OpenGL compatible with
- OpenGL 3.1 (and later)
- Open GL ES 2.0
- webGL
Prerequisites
Good programming skills in C (or C++)
Basic data structures
- Linked lists
- Arrays
10
Arrays
Geometry
Simple linear algebra
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++
11
PC/Mac/Linux computer. Use the C/C++
programming language.
OpenGL Resources
Can run OpenGL on any system
- Windows: check graphics card properties for
level of OpenGL supported
- Linux
12
- 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
3
References
www.opengl.org
- Standards documents
- Sample code
The OpenGL Programmers Guide (the
13
g (
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
Outline: Part 1
Part 1: Introduction
Text: Chapter 1
Lectures 1-3
What is Computer Graphics?
14
- What is Computer Graphics?
- Applications Areas
- History
- Image formation
- Basic Architecture
Outline: Part 2
Part 2: Basic OpenGL
Text: Chapter 2
Lectures 4-9
Architecture
15
- Architecture
- GLUT
- Simple programs in two and three dimensions
- Basic shaders and GLSL
- Interaction
Outline: Part 3
Part 3: Three-Dimensional Graphics
Text: Chapters 3-5
Lectures 10-18
Geometry
16
- Geometry
- Transformations
- Homogeneous Coordinates
- Viewing
- Lighting and Shading
Outline: Part 4
Part 5: Implementation
Text: Chapter 6
Lectures: 19-21
Approaches (object vs image space)
17
- Approaches (object vs image space)
- Implementing the pipeline
- Clipping
- Line drawing
- Polygon Fill
- Display issues (color)
Outline: Part 5
Part 4: Discrete Methods
Text: Chapter 7
Lectures 22-26
Buffers
18
- Buffers
- Texture Mapping
- Shader Applications
- Compositing and Transparency
4
Outline: Part 6
Part 6: Hierarchy and Procedural Methods
Text: Chapters 8-9
Lectures: 27-28
T St t d M d l
19
Tree Structured Models
- Traversal Methods
- Scene Graphs
- Particle Systems
Outline: Part 7
Part 7: Curves and Surfaces
Text: Chapter 10
Lectures: 29-30
20
What is Computer Graphics?
City College or New York
Objectives
In this lecture, we explore what computer
graphics is about and survey some
application areas
But we start with a historical introduction
22
But we start with a historical introduction
Computer Graphics
Computer graphics deals with all aspects
of creating images with a computer
- Hardware
- Software
23
- Applications
Related Fields
Image Processing
Image
24
Scene
Description
Computer
Graphics
Computer
Vision
5
Example
Where did this image come from?
25
What hardware/software did we need to
produce it?
Preliminary Answer
Application: The object is an artists
rendition of the sun for an animation to be
shown in a domed environment
(planetarium)
26
(p )
Software: Maya for modeling and
rendering but Maya is built on top of
OpenGL
Hardware: PC with graphics cards for
modeling and rendering
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
27
- 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.
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
28
to think about it or communicate it to others.
This helps create a tentative solution.
Problem Model Geometry Image
Basic Graphics System
29
Input devices
Output device
Image formed in frame buffer
CRT
30
Can be used as a line-drawing device
(vector graphics) or to display contents of
frame buffer (raster graphics)
6
Computer Graphics: 1950-1960
Computer graphics goes back to the
earliest days of computing
- Strip charts
- Pen plotters
31
p
- Simple displays using A/D converters to go
from computer to calligraphic CRT
Cost of refresh for CRT too high
- Computers slow, expensive, unreliable
Wireframe graphics
- Draw only lines
Sketchpad
Display Processors
32
Display Processors
Storage tube
wireframe representation
of sun object
Project Sketchpad
Ivan Sutherlands PhD thesis at MIT
- Recognized the potential of man-machine
interaction
- Loop
33
Display something
User moves light pen
Computer generates new display
- Sutherland also created many of the now
common algorithms for computer graphics
Display Processor
Rather than have host computer try to refresh
display use a special purpose computer called
a display processor (DPU)
34
Graphics stored in display list (display file) on
display processor
Host compiles display list and sends to DPU
Direct View Storage Tube
Created by Tektronix
- Did not require constant refresh
- Standard interface to computers
Allowed for standard software
35
Plot3D in Fortran
- Relatively inexpensive
Opened door to use of computer graphics for CAD
community
Raster Graphics
Beginning of graphics standards
- IFIPS
GKS: European effort
36
p
Becomes ISO 2D standard
Core: North American effort
3D but fails to become ISO standard
Workstations and PCs
7
Raster Graphics
Image produced as an array (the raster)
of picture elements (pixels) in the frame
buffer
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
39
- 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
Realism comes to computer graphics
40
smooth shading environment
mapping
bump mapping
Special purpose hardware
- Silicon Graphics geometry engine
VLSI implementation of graphics pipeline
Industry-based standards
41
y
- PHIGS
- RenderMan
Networked graphics: X Window System
Human-Computer Interface (HCI)
OpenGL API
Completely computer-generated feature-
length movies (Toy Story) are successful
New hardware capabilities
42
New hardware capabilities
- Texture mapping
- Blending
- Accumulation, stencil buffers
8
Computer Graphics: 2000-
Photorealism
Graphics cards for PCs dominate market
- Nvidia, ATI
Game boxes and game players determine
43
Game boxes and game players determine
direction of market
Computer graphics routine in movie
industry: Maya, Lightwave
Programmable pipelines
Image Formation
Objectives
Fundamental imaging notions
Physical basis for image formation
- Light
- Color
45
Color
- Perception
Synthetic camera model
Other models
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
46
y p y g g y
- Cameras
- Microscopes
- Telescopes
- Human visual system
Elements of Image Formation
Objects
Viewer
Light source(s)
47
Attributes that govern how light interacts
with the materials in the scene
Note the independence of the objects,
viewer, and light source(s)
Light
Light is the part of the electromagnetic
spectrum that causes a reaction in our
visual systems
Generally these are wavelengths in the
48
Generally these are wavelengths in the
range of about 350-780 nm (nanometers)
Long wavelengths appear as reds and
short wavelengths as blues
9
Ray Tracing and
Geometric Optics
One way to form an image is to
follow rays of light from a
point source determine which
t th l f th
49
rays enter the lens of the
camera. However, each
ray of light may have
multiple interactions with objects
before being absorbed or going to infinity.
Luminance and Color Images
Luminance
- Monochromatic
- Values are gray levels
- Analogous to working with black and white film
50
g g
or television
Color
- Has perceptional attributes of hue, saturation,
and lightness
- Do we have to match every frequency in visible
spectrum? No!
Three-Color Theory
Human visual system has two types of
sensors
- Rods: monochromatic, night vision
- Cones
51
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
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)
53
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
Pinhole Camera
54
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
10
Synthetic Camera Model
projector
55
center of projection
image plane
p
projection of p
Advantages
Separation of objects, viewer, light sources
Two-dimensional graphics is a special case
of three-dimensional graphics
Leads to simple software API
56
Leads to simple software API
- Specify objects, lights, camera, attributes
- Let implementation determine image
Leads to fast hardware implementation
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
57
g j j
- Some objects might be translucent
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
58
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
Objectives
Learn the basic design of a graphics system
Introduce pipeline architecture
Examine software components for an
interactive graphics system
60
interactive graphics system
11
Image Formation Revisited
Can we mimic the synthetic camera model
to design graphics hardware software?
Application Programmer Interface (API)
- Need only specify
61
Need only specify
Objects
Materials
Viewer
Lights
But how is the API implemented?
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
T l t bj t
62
Translucent objects
- Slow
- Must have whole data base
available at all times
Radiosity: Energy based approach
- Very slow
Practical Approach
Process objects one at a time in the order
they are generated by the application
- Can consider only local lighting
Pipeline architecture
63
All steps can be implemented in hardware
on the graphics card
application
program
display
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
64
- Camera (eye) coordinates
- Screen coordinates
Every change of coordinates is equivalent to a
matrix transformation
Vertex processor also computes vertex colors
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
65
p p j p j
the center of projection
- Parallel projection: projectors are parallel,
center of projection is replaced by a direction of
projection
Primitive Assembly
Vertices must be collected into geometric
objects before clipping and rasterization
can take place
- Line segments
66
g
- Polygons
- Curves and surfaces
12
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
67
j
to be clipped out of the scene
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
68
Fragments are potential pixels
- Have a location in frame bufffer
- Color and depth attributes
Vertex attributes are interpolated over objects by
the rasterizer
Fragment Processing
Fragments are processed to determine
the color of the corresponding pixel in the
frame buffer
Colors can be determined by texture
69
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
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
71
- Light Source(s)
- Materials
Other information
- Input from devices such as mouse and keyboard
- Capabilities of system
Object Specification
Most APIs support a limited set of
primitives including
- Points (0D object)
- Line segments (1D objects)
P l (2D bj t )
72
- Polygons (2D objects)
- Some curves and surfaces
Quadrics
Parametric polynomials
All are defined through locations in space
or vertices
13
Example (old style)
gl Begi n( GL_POLYGON)
gl Ver t ex3f ( 0 0 0 0 0 0) ;
type of object
location of vertex
73
gl Ver t ex3f ( 0. 0, 0. 0, 0. 0) ;
gl Ver t ex3f ( 0. 0, 1. 0, 0. 0) ;
gl Ver t ex3f ( 0. 0, 0. 0, 1. 0) ;
gl End( ) ;
end of object definition
Put geometric data in an array
Example (GPU based)
vec3 poi nt s[ 3] ;
poi nt s[ 0] = vec3( 0. 0, 0. 0, 0. 0) ;
poi nt s[ 1] = vec3( 0. 0, 1. 0, 0. 0) ;
poi nt s[ 2] = vec3( 0 0 0 0 1 0) ;
Send array to GPU
Tell GPU to render as triangle
74
poi nt s[ 2] = vec3( 0. 0, 0. 0, 1. 0) ;
Camera Specification
Six degrees of freedom
- Position of center of lens
- Orientation
Lens
75
Lens
Film size
Orientation of film plane
Lights and Materials
Types of lights
- Point sources vs distributed sources
- Spot lights
- Near and far sources
C
76
- Color properties
Material properties
- Absorption: color properties
- Scattering
Diffuse
Specular
Programming with OpenGL
Part 1: Background
Objectives
Development of the OpenGL API
OpenGL Architecture
- OpenGL as a state machine
- OpenGL as a data flow machine
78
OpenGL as a data flow machine
Functions
- Types
- Formats
Simple program
14
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
79
- 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
PHIGS and X
Programmers Hierarchical Graphics
System (PHIGS)
- Arose from CAD community
- Database model with retained graphics
(structures)
80
(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)
SGI and GL
Silicon Graphics (SGI) revolutionized the
graphics workstation by implementing the
pipeline in hardware (1982)
To access the system application
81
To access the system, application
programmers used a library called GL
With GL, it was relatively simple to
program three dimensional interactive
applications
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
82
g g
performance
- Focus on rendering
- Omitted windowing and input to avoid window
system dependencies
OpenGL Evolution
Originally controlled by an Architectural Review
Board (ARB)
- Members included SGI, Microsoft, Nvidia, HP,
3DLabs, IBM,.
N K G
83
- 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 shaders
Applications job is to send data to GPU
GPU does all rendering
84
15
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
85
Other Versions
OpenGL ES
- Embedded systems
- Version 1.0 simplified OpenGL 2.1
- Version 2.0 simplified OpenGL 3.1 p p
Shader based
WebGL
- Javascript implementation of ES 2.0
- Supported on newer browsers
OpenGL 4.1 and 4.2
- Add geometry shaders and tessellator
86
What About Direct X?
Windows only
Advantages
- Better control of resources
- Access to high level functionality Access to high level functionality
Disadvantages
- New versions not backward compatible
- Windows only
Recent advances in shaders are leading
to convergence with OpenGL
87
OpenGL Libraries
OpenGL core library
- OpenGL32 on Windows
- GL on most unix/linux systems (libGL.a)
OpenGL Utility Library (GLU)
88
- 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
GLUT
OpenGL Utility Toolkit (GLUT)
- Provides functionality common to all window
systems
Open a window
G t i t f d k b d
89
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 y q
deprecated functions
freeglut updates GLUT
- Added capabilities
- Context checking
90
16
GLEW
OpenGL Extension Wrangler Library
Makes it easy to access OpenGL extensions
available on a particular system
Avoids having to have specific entry points Avoids having to have specific entry points
in Windows code
Application needs only to include glew.h and
run a glewInit()
91
Software Organization
92
OpenGL Architecture
93
OpenGL Functions
Primitives
- Points
- Line Segments
- Triangles
Attributes
94
Attributes
Transformations
- Viewing
- Modeling
Control (GLUT)
Input (GLUT)
Query
OpenGL State
OpenGL is a state machine
OpenGL functions are of two types
- Primitive generating
Can cause output if primitive is visible
95
p p
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
Lack of Object Orientation
OpenGL is not object oriented so that there
are multiple functions for a given logical
function
- gl Uni f or m3f
96
- gl Uni f or m2i
- gl Uni f or m3dv
Underlying storage mode is the same
Easy to create overloaded functions in C++
but issue is efficiency
17
OpenGL function format
glUniform3f(x,y,z)
function name
dimensions
97
belongs to GL library
x,y,z are floats
glUniform3fv(p)
p is a pointer to an array
OpenGL #defines
Most constants are defined in the include
files gl . h, gl u. h and gl ut . h
- Note #i ncl ude <GL/ gl ut . h>should
automatically include the others
98
- Examples
- gl Enabl e( GL_DEPTH_TEST)
- gl Cl ear ( GL_COLOR_BUFFER_BI T)
include files also define OpenGL data
types: GLf l oat , GLdoubl e,.
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 3.1 OpenGL functions have been deprecated
Action happens in shaders
Job in application is to get data to GPU
99
GLSL
OpenGL Shading Language
C-like with
- Matrix and vector types (2, 3, 4 dimensional)
- Overloaded operators 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
100
A Simple Program (?)
Generate a square on a solid background
101
It used to be easy
#i ncl ude <GL/ gl ut . h>
voi d mydi spl ay( ) {
gl Cl ear ( GL_COLOR_BUFFER_BI T) ;
gl Begi n( GL_QUAD;
gl Ver t ex2f ( - 0. 5, - 0. 5) ;
gl Ver t ex2f ( - 0, 5, 0, 5) ;
102
g
gl Ver t ex2f ( 0. 5, 0. 5) ;
gl Ver t ex2f ( 0. 5, - 0. 5) ;
gl End( )
}
i nt mai n( i nt ar gc, char ** ar gv) {
gl ut Cr eat eWi ndow( " si mpl e" ) ;
gl ut Di spl ayFunc( mydi spl ay) ;
gl ut Mai nLoop( ) ;
}
18
What happened
Most OpenGL functions deprecated
Makes heavy use of state variable default
values that no longer exist
- Viewing
103
Viewing
- Colors
- Window parameters
Next version will make the defaults more
explicit
However, processing loop is the same
simple.c
voi d mydi spl ay( ) {
/ / need t o f i l l i n t hi s par t and add i n shader s
}
104
i nt mai n( i nt ar gc, char ** ar gv) {
}
Event Loop
Note that the program specifies a display
callback function named mydi spl ay
- Every glut program must have a display
callback
105
- The display callback is executed whenever
OpenGL decides the display must be refreshed,
for example when the window is opened
- The mai n function ends with the program
entering an event loop
Notes on compilation
See website and ftp for examples
Unix/Linux
- Include files usually in /include/GL
- Compile with lglut lgl loader flags
106
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
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
107
p y pp
- 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
19
Objectives
Build a complete first program
- Introduce shaders
- Introduce a standard program structure
Simple viewing
109
Simple viewing
- Two-dimensional viewing as a special case of
three-dimensional viewing
Initialization steps and program structure
Program Structure
Most OpenGL programs have a similar structure
that consists of the following functions
- mai n( ) :
specifies the callback functions
opens one or more windows with the required properties
110
p q p p
enters event loop (last executable statement)
- i ni t ( ) : sets the state variables
Viewing
Attributes
- i ni t Shader ( ) : read, compile and link shaders
- callbacks
Display function
Input and window functions
simple.c revisited
mai n( ) function similar to last lecture
- Mostly GLUT functions
init() will allow more flexible colors
initShader() will hides details of setting up
111
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
mai n. c
#i ncl ude <GL/ gl ew. h>
i nt mai n( i nt ar gc, char ** ar gv)
{
gl ut I ni t ( &ar gc, ar gv) ;
includes gl.h
112
gl ut I ni t Di spl ayMode( GLUT_SI NGLE| GLUT_RGB) ;
gl ut I ni t Wi ndowSi ze( 500, 500) ;
gl ut I ni t Wi ndowPosi t i on( 0, 0) ;
gl ewI ni t ( ) ;
i ni t ( ) ;
}
specify window properties
set OpenGL state and initialize shaders
enter event loop
display callback
GLUT functions
gl ut I ni t allows application to get command line
arguments and initializes system
gl uI ni t Di spl ayMode requests properties for the
window (the rendering context)
- RGB color
Single buffering
113
- Single buffering
- Properties logically ORed together
gl ut Wi ndowSi ze in pixels
gl ut Wi ndowPosi t i on from top-left corner of display
gl ut Cr eat eWi ndow create window with title simple
gl ut Di spl ayFunc display callback
gl ut Mai nLoop 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 Immediate mode
- Each time a vertex is specified in application, its
location is sent to the GPU
- Old style uses gl Ver t ex
- Creates bottleneck between CPU and GPU
- Removed from OpenGL 3.1
114
20
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 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
115
Display Callback
Once we get data to GLU, we can initiate
the rendering with a simple callback
voi d mydi spl ay( )
{
gl Cl ear ( GL COLOR BUFFER BI T) ;
Arrays are buffer objects that contain
vertex arrays
116
gl Dr awAr r ays( GL_TRI ANGLES, 0, 3) ;
gl Fl ush( ) ;
}
Vertex Arrays
Vertices can have many attributes
- Position
- Color
- Texture Coordinates
- Application data
A vertex array holds these data
Using types in vec. h
117
poi nt 2 ver t i ces[ 3] = {
poi nt 2( 0. 0, 0. 0) , poi nt 2( 0. 0, 1. 0) , poi nt 2( 1. 0, 1. 0)
};
Vertex Array Object
Bundles all vertex data (positions, colors, ..,)
Get name for buffer then bind
Gl uni t abuf f er ;
gl GenVer t exAr r ays( 1, &abuf f er ) ;
gl Bi ndVer t e Ar r a ( ab f f er )
At this point we have a current vertex array
but no contents
Use of glBindVertexArray lets us switch
between VBOs
118
gl Bi ndVer t exAr r ay( abuf f er ) ;
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
119
Gl ui nt buf f er ;
gl GenBuf f er s( 1, &buf f er ) ;
gl Bi ndBuf f er ( GL_ARRAY_BUFFER, buf f er ) ;
gl Buf f er Dat a( GL_ARRAY_BUFFER, si zeof ( poi nt s) , poi nt s) ;
Initialization
Vertex array objects and buffer objects
can be set up on init()
Also set clear color and other OpeGL
parameters parameters
Also set up shaders as part of initialization
- Read
- Compile
- Link
First lets consider a few other issues
120
21
Coordinate Systems
The units in poi nt s are determined by the
application and are called object, world, model or
problem coordinates
Viewing specifications usually are also in object
coordinates
121
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
OpenGL Camera
OpenGL places a camera at the origin in
object space pointing in the negative z
direction
The default viewing volume
122
The default viewing volume
is a box centered at the
origin with sides of
length 2
Orthographic Viewing
In the default orthographic view, points are projected
forward along the z axis onto the plane z=0
123
z=0
z=0
Viewports
Do not have use the entire window for the
image: gl Vi ewpor t ( 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
125
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
Pre-OpenGL 3.0:
i ni t . c
voi d i ni t ( )
{
gl Cl ear Col or ( 0. 0, 0. 0, 0. 0, 1. 0) ;
black clear color
opaque window
fill with white
126
gl Col or 3f ( 1. 0, 1. 0, 1. 0) ;
gl Mat r i xMode ( GL_PROJ ECTI ON) ;
gl LoadI dent i t y ( ) ;
gl Or t ho( - 1. 0, 1. 0, - 1. 0, 1. 0, - 1. 0, 1. 0) ;
}
fill with white
viewing volume
22
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
127
gl Mat r i xMode ( GL_PROJ ECTI ON)
Transformation functions are incremental so
we start with an identity matrix and alter it with
a projection matrix that gives the view volume
gl LoadI dent i t y ( ) ;
gl Or t ho( - 1. 0, 1. 0, - 1. 0, 1. 0, - 1. 0, 1. 0) ;
Pre-OpenGL 3.0:
2D and 3D Viewing
In gl Or t ho( l ef t , r i ght , bot t om, t op,
near , f ar ) the near and far distances are
measured from the camera
Two-dimensional vertex commands place all
128
vertices in the plane z=0
If the application is in two dimensions, we can use
the function
gl uOr t ho2D( l ef t , r i ght , bot t om, t op)
In two dimensions, the view or clipping volume
becomes a clipping window
Pre-OpenGL 3.0:
mydi spl ay. c
{
gl Begi n( GL_POLYGON) ;
129
gl Ver t ex2f ( - 0. 5, - 0. 5) ;
gl Ver t ex2f ( - 0. 5, 0. 5) ;
gl Ver t ex2f ( 0. 5, 0. 5) ;
gl Ver t ex2f ( 0. 5, - 0. 5) ;
gl End( ) ;
gl Fl ush( ) ;
}
OpenGL Primitives
GL_POLYGON GL_POLYGON
GL_POI NTS GL_POI NTS
GL LI NES GL LI NES
GL LI NE STRI P GL LI NE STRI P
130
GL_QUAD_STRI P GL_QUAD_STRI P
GL_TRI ANGLE_STRI P GL_TRI ANGLE_STRI P
GL_TRI ANGLE_FAN GL_TRI ANGLE_FAN
GL_LI NES GL_LI NES
GL_LI NE_LOOP GL_LI NE_LOOP
_ _ _ _
GL_TRI ANGLES GL_TRI ANGLES
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.
) i ( ) ( u u
131
. 2 0 for
), sin , cos ( ) , (
0 0
t u
u u
s s
+ + = r y r x y x
Pre-OpenGL 3.0:
Example Using Line Strip Primitive
voi d dr awAr c( f l oat x, f l oat y, f l oat r ,
f l oat t 0, f l oat sweep)
{
f l oat t , dt ; / * angl e */
i nt n = 30; / * # of segment s */
i nt i ;
132
t = t 0 * PI / 180. 0; / * r adi ans */
dt = sweep * PI / ( 180*n) ; / * i ncr ement */
gl Begi n( GL_LI NE_STRI P) ;
f or ( i =0; i <=n; i ++, t += dt )
gl Ver t ex2f ( x + r *cos( t ) , y + r *si n( t ) ) ;
gl End( ) ;
}
23
Pre-OpenGL 3.0:
Color and State
The color as set by gl Col or 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
133
We can create conceptual vertex colors by code
such as
gl Col or
gl Ver t ex
gl Col or
gl Ver t ex
Part 3: Shaders
Objectives
Simple Shaders
- Vertex shader
- Fragment shaders
Programming shaders with GLSL
135
Programming shaders with GLSL
Finish first program
Vertex Shader Applications
Moving vertices
- Morphing
- Wave motion
- Fractals
136
Lighting
- More realistic models
- Cartoon shaders
Fragment Shader Applications
Per fragment lighting calculations
137
per vertex lighting
per fragment lighting
Texture mapping
138
mapping
bump mapping
24
Writing Shaders
First programmable shaders were
programmed in an assembly-like manner
OpenGL extensions added for vertex and
fragment shaders
139
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)
GLSL
OpenGL Shading Language
Part of OpenGL 2.0 and up
High level C-like language
New data types
140
New data types
- Matrices
- Vectors
- Samplers
As of OpenGL 3.1, application must
provide shaders
Simple Vertex Shader
i n vec4 vPosi t i on;
voi d mai n( voi d)
{
141
{
gl _Posi t i on = vPosi t i on;
}
Execution Model
GPU
Vertex data
Shader Program
142
Vertex
Shader
Primitive
Assembly
Application
Program
glDrawArrays
Vertex
Simple Fragment Program
voi d mai n( voi d)
{
gl _Fr agCol or = vec4( 1. 0, 0. 0, 0. 0, 1. 0) ;
}
143
Execution Model
Application
Shader Program
144
Fragment
Color
Fragment
Shader
Frame Buffer
Rasterizer
Fragment
25
Data Types
C types: int, float, bool
Vectors:
- float vec2, vec3, vec4
- Also int (ivec) and boolean (bvec)
145
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)
Pointers
There are no pointers in GLSL
We can use C structs which
can be copied back from functions
B t i d t b i
146
Because matrices and vectors are basic
types they can be passed into and output
from GLSL functions, e.g.
mat3 func(mat3 a)
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
147
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
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
148
gl_Position but most have been deprecated
User defined (in application program)
- Use in qualifier to get to shader
- i n f l oat t emper at ur e
- i n vec3 vel oci t y
Uniform Qualified
Variables that are constant for an entire
primitive
Can be changed in application and sent to
shaders
149
shaders
Cannot be changed in shader
Used to pass information to shader such
as the bounding box of a primitive
Varying Qualified
Variables that are passed from vertex
shader to fragment shader
Automatically interpolated by the rasterizer
Old style used the varying qualifier
150
Old style used the varying qualifier
var yi ng vec4 col or ;
Now use out in vertex shader and in in the
fragment shader
out vec4 col or ;
26
Example: Vertex Shader
const vec4 r ed = vec4( 1. 0, 0. 0, 0. 0, 1. 0) ;
out vec3 col or _out ;
voi d mai n( voi d)
{
l P i t i P i t i
151
gl _Posi t i on = vPosi t i on;
col or _out = r ed;
}
Required Fragment Shader
i n vec3 col or _out ;
voi d mai n( voi d)
{
gl _Fr agCol or = col or _out ;
}
152
}
/ / i n l at est ver si on use f or m
/ / out vec4 f r agcol or ;
/ / f r agcol or = col or _out ;
Passing values
call by value-return
Variables are copied in
Returned values are copied back
Th ibiliti
153
Three possibilities
- in
- out
- inout (deprecated)
Operators and Functions
Standard C functions
- Trigonometric
- Arithmetic
- Normalize, reflect, length
154
, , g
Overloading of vector and matrix types
mat 4 a;
vec4 b, c, d;
c = b*a; / / a r ow vect or st or ed as a 1D ar r ay
d = a*b; / / a col umn vect or st or ed as a 1D ar r ay
Swizzling and Selection
Can refer to array elements by element
using [ ] or selection (.) operator with
- x, y, z, w
- r, g, b, a
t
155
- 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
27
Objectives
Expanding primitive set
Adding color
Vertex attributes
U if i bl
157
Uniform variables
OpenGL Primitives
GL_POI NTS GL_POI NTS
GL LI NES GL LI NES
GL LI NE STRI P GL LI NE STRI P
158
GL_TRI ANGLE_STRI P GL_TRI ANGLE_STRI P
GL_TRI ANGLE_FAN GL_TRI ANGLE_FAN
GL_LI NES GL_LI NES
GL_LI NE_LOOP GL_LI NE_LOOP
_ _ _ _
GL_TRI ANGLES GL_TRI ANGLES
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
159
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 Earlier versions assumed both and left
testing to the application
Present version only renders triangles
Need algorithm to triangulate an arbitrary
polygon
160
Good and Bad Triangles
Long thin triangles render badly
Equilateral triangles render well
Maximize minimum angle
Delaunay triangulation for unstructured points
161
Triangularization
Convex polygon
c
d
Start with abc, remove b, then acd, .
162
a
b
28
Non-convex (concave)
163
Recursive Division
Find leftmost vertex and split
164
Attributes
Attributes determine the appearance of objects
- Color (points, lines, polygons)
- Size and width (points, lines)
- Stipple pattern (lines, polygons)
165
pp p ( , p yg )
- Polygon mode
Display as filled: solid color or stipple pattern
Display edges
Display vertices
Only a few (glPointSize) are supported by
OpenGL functions
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
166
(all) using floats or over the range from 0 to 255
using unsigned bytels
Indexed Color
Colors are indices into tables of RGB values
Requires less memory
- indices usually 8 bits
- not as important now
167
not as important now
Memory inexpensive
Need more colors for shading
Smooth Color
Default is smooth shading
- OpenGL interpolates vertex colors across
visible polygons
Alternative is flat shading
168
- Color of first vertex
determines fill color
- Handle in shader
29
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 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
169
Part 5: More GLSL
Objectives
Coupling shaders to applications
- Reading
- Compiling
- Linkingg
Vertex Attributes
Setting up uniform variables
Example applications
171
Linking Shaders with Application
Read shaders
Compile shaders
Create a program object
Li k thi t th Link everything together
Link variables in application with variables
in shaders
- Vertex attributes
- Uniform variables
172
Program Object
Container for shaders
- Can contain multiple shaders
- Other GLSL functions
GLui nt myPr ogObj ;
myPr ogObj = gl Cr eat ePr ogr am( ) ;
/ / def i ne shader obj ect s her e
gl UsePr ogr am( myPr ogObj ) ;
gl Li nkPr ogr am( myPr ogObj ) ;
173
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 null terminated string using the function
gl Shader Sour ce
If the shader is in a file, we can write a
reader to convert the file to a string
174
30
Shader Reader
#i ncl ude <st di o. h>
st at i c char *
r eadShader Sour ce( const char * shader Fi l e)
{
FI LE* f p = f open( shader Fi l e, "r " ) ;
i f ( f p == NULL ) { r et ur n NULL; }
f seek( f p, 0L, SEEK_END) ;
l ong si ze = f t el l ( f p) ;
f seek( f p, 0L, SEEK_SET) ;
char * buf = new char [ si ze + 1] ;
f r ead( buf , 1, si ze, f p) ;
buf [ si ze] = ' \ 0' ;
f cl ose( f p) ;
r et ur n buf ;
}
175
Adding a Vertex Shader
GLui nt vShader ;
GLuni t myVer t exObj ;
GLchar vShader f i l e[ ] = my_ver t ex_shader ;
GLchar * vSour ce = r eadShader Sour ce( vShader Fi l e) ;
gl Shader Sour ce( myVer t exObj , 1, &ver t exShader Fi l e, NULL) ;
myVer t exObj = gl Cr eat eShader ( GL_VERTEX_SHADER) ;
gl Compi l eShader ( myVer t exObj ) ; gl Compi l eShader ( myVer t exObj ) ;
gl At t achObj ect ( myPr ogObj , myVer t exObj ) ;
176
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 it to an application variable
Similar process for uniform variables
177
Vertex Attribute Example
#def i ne BUFFER_OFFSET( of f set ) ( ( GLvoi d*) ( of f set ) )
GLui nt l oc = gl Get At t r i bLocat i on( pr ogr am, "vPosi t i on" ) ;
gl Enabl eVer t exAt t r i bAr r ay( l oc ) ;
gl Ver t exAt t r i bPoi nt er ( l oc, 2, GL_FLOAT, GL_FALSE,
0, BUFFER_OFFSET( 0) ) ; _
178
Uniform Variable Example
GLi nt angl ePar am;
angl ePar am= gl Get Uni f or mLocat i on( myPr ogObj , " angl e") ;
/ / angl e def i ned i n shader
/ / my_angl e set i n appl i cat i on
GLf l oat my angl e; y_ g
my_angl e = 5. 0 / / or some ot her val ue
gl Uni f or m1f ( angl ePar am, my_angl e) ;
179
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() g g p y()
Need to prevent a partially redrawn frame
buffer from being displayed
Draw into back buffer
Display front buffer
Swap buffers after updating finished
180
31
Adding Double Buffering
Request a double buffer
- gl ut I ni t Di spl ayMode( GLUT_DOUBLE)
Swap buffers
i d di l ( )
181
{
gl Cl ear ( ) ;
gl Dr awAr r ays( ) ;
gl ut SwapBuf f er s( ) ;
}
Idle Callback
Idle callback specifies function to be
executed when no other actions pending
- gl ut I dl eFunc( myI dl e) ;
182
voi d myI dl e( )
{
/ / r ecomput e di spl ay
gl ut Post Redi spl ay( ) ;
}
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 No changes needed in application
Vertex shader example:
183
#ver si on 1. 4
at t r i but e vec3 vPosi t i on;
var yi ng vec3 col or ;
#ver si on 1. 5
out vec3 col or ;
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 g
Lets associate a color with each vertex
Set up an array of same size as positions
Send to GPU as a vertex buffer object
184
Setting Colors
t ypedef vec3 col or 3;
col or 3 base_col or s[ 4] = {col or 3( 1. 0, 0. 0. 0. 0) , .
col or 3 col or s[ NumVer t i ces] ;
vec3 poi nt s[ NumVer t i ces] ;
185
/ / i n l oop set t i ng posi t i ons
col or s[ i ] = basecol or s[ col or _i ndex]
posi t i on[ i ] = .
Setting Up Buffer Object
/ / need l ar ger buf f er
gl Buf f er Dat a( GL_ARRAY_BUFFER, si zeof ( poi nt s) + si zeof ( col or s) ,
NULL, GL_STATI C_DRAW) ;
/ / l oad dat a separ at el y
gl Buf f er SubDat a( GL_ARRAY_BUFFER, 0, si zeof ( poi nt s) , poi nt s) ;
186
_ _
gl Buf f er SubDat a( GL_ARRAY_BUFFER, si zeof ( poi nt s) , si zeof ( col or s) ,
col or s) ;
32
Second Vertex Array
/ / vPosi t i on and vCol or i dent i f i er s i n ver t ex shader
l oc = gl Get At t r i bLocat i on( pr ogr am, vPosi t i on) ;
gl Enabl eVer t exAt t r i bAr r ay( l oc) ;
gl Ver t exAt t r i bPoi nt er ( l oc, 3, GL_FLOAT, GL_FALSE, 0,
BUFFER_OFFSET( 0) ) ;
187
l oc2 = gl Get At t r i bLocat i on( pr ogr am, vCol or ) ;
gl Enabl eVer t exAt t r i bAr r ay( l oc2) ;
gl Ver t exAt t r i bPoi nt er ( l oc2, 3, GL_FLOAT, GL_FALSE, 0,
BUFFER_OFFSET( si zeof poi nt s) ) ;
Moving vertices
- Morphing
- Wave motion
- Fractals
Lighting
- Cartoon shaders
188
Wave Motion Vertex Shader
uni f or mf l oat xs, zs, / / f r equenci es
uni f or mf l oat h; / / hei ght scal e
voi d mai n( )
{
vec4 t = vPosi t i on;
t . y = vPosi t i on. y
+ h*si n( t i me + xs*vPosi t i on. x)
+ h*si n( t i me + zs*vPosi t i on. z) ;
gl _Posi t i on = t ;
}
189
Particle System
uni f or mmat 4 Model Vi ewPr oj ect i onMat r i x;
uni f or mvec3 i ni t _vel ;
uni f or mf l oat g, m, t ;
voi d mai n( ) {
3 bj t vec3 obj ect _pos;
obj ect _pos. x = vPosi t i on. x + vel . x*t ;
obj ect _pos. y = vPosi t i on. y + vel . y*t + g/ ( 2. 0*m) *t *t ;
obj ect _pos. z = vPosi t i on. z + vel . z*t ;
gl _Posi t i on = Model Vi ewPr oj ect i onMat r i x*vec4( obj ect _pos, 1) ;
}
190
Pass Through Fragment Shader
/ / pass- t hr ough f r agment shader
i n vec4 col or ;
voi d mai n( voi d)
{{
gl _Fr agCol or = col or ;
}
191
Vertex vs Fragment Lighting
per vertex lighting per fragment lighting
192
33
Texture mapping
mapping
bump mapping
193
Part 6: Three Dimensions
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
196
- Use vec3, gl Uni f or m3f
- Have to worry about the order in which primitives
are rendered or use hidden-surface removal
Sierpinski Gasket (2D)
Start with a triangle
C f
197
Connect bisectors of sides and remove central
triangle
Repeat
Example
Five subdivisions
198
34
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
199
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
Gasket Program
/ / i ni t i al t r i angl e
poi nt 2 v[ 3] = {poi nt 2( - 1. 0, - 0. 58) ,
poi nt 2( 1. 0, - 0. 58) ,
200
poi nt 2( 0. 0, 1. 15) };
i nt n; / / number of r ecur si ve st eps
Draw one triangle
/ / di spl ay one t r i angl e
voi d t r i angl e( poi nt 2 a, poi nt 2 b, poi nt 2 c)
{
st at i c i nt i =0;
201
poi nt s[ i ] = a;
poi nt s[ i +1] = b;
poi nt s[ i +2] = c;
i += 3;
}
Triangle Subdivision
/ / t r i angl e subdi vi si on usi ng ver t ex number s
voi d di vi de_t r i angl e( poi nt 2 a, poi nt 2 b, poi nt 2 c, i nt m)
{
poi nt 2 ab, ac, bc;
i f ( m> 0) {
ab = ( a + b) / 2;
202
( ) / ;
ac = ( a + c) / 2;
bc = ( b + c) / 2;
di vi de_t r i angl e( a, ab, ac, m- 1) ;
di vi de_t r i angl e( c, ac, bc, m- 1) ;
di vi de_t r i angl e( b, bc, ab, m- 1) ;
}
/ / el se, dr aw t r i angl e at end of r ecur si on
el se t r i angl e( a, b, c) ;
}
display and init Functions
voi d di spl ay( )
{
gl Dr awAr r ays( GL_TRI ANGLES, 0, NumVer t i ces) ;
gl Fl ush( ) ;
}
203
voi d myi ni t ( )
{
. . .
/ / v: i ni t i al t r i angl e ver t i ces
/ / n: number of r ecur si ve st eps
di vi de_t r i angl e( v[ 0] , v[ 1] , v[ 2] , n) ;
. . .
}
main Function
i nt mai n( i nt ar gc, char **ar gv)
{
n=4;
gl ut I ni t Di spl ayMode( GLUT_SI NGLE| GLUT_RGB) ;
204
gl ut Cr eat eWi ndow( 2D Gasket " ) ;
gl ut Di spl ayFunc( di spl ay) ;
myi ni t ( ) ;
}
35
Moving to 3D
We can easily make the program three-
dimensional by using
poi nt 3 v[ 3]
and starting with a tetrahedron
205
and starting with a tetrahedron
3D Gasket
We can subdivide each of the four faces
206
Appears as if we remove a solid
tetrahedron from the center leaving four
smaller tetrahedra
Code almost identical to 2D example
Triangle code
/ / di spl ay one t r i angl e
voi d t r i angl e( poi nt 3 a, poi nt 3 b, poi nt 3 c)
{
207
poi nt s[ i ] = a;
poi nt s[ i +1] = b;
poi nt s[ i +2] = c;
i += 3;
}
Subdivision code
/ / t r i angl e subdi vi si on usi ng ver t ex number s
voi d di vi de_t r i angl e( poi nt 3 a, poi nt 3 b, poi nt 3 c, i nt m)
{
poi nt 3 ab, ac, bc;
i f ( m> 0) {
ab = ( a + b) / 2;
208
( ) / ;
ac = ( a + c) / 2;
bc = ( b + c) / 2;
di vi de_t r i angl e( a, ab, ac, m- 1) ;
di vi de_t r i angl e( c, ac, bc, m- 1) ;
di vi de_t r i angl e( b, bc, ab, m- 1) ;
}
/ / el se, dr aw t r i angl e at end of r ecur si on
el se t r i angl e( a, b, c) ;
}
Tetrahedron code
voi d t et r ahedr on( i nt m)
{
gl Col or 3f ( 1. 0, 0. 0, 0. 0) ;
di vi de_t r i angl e( v[ 0] , v[ 1] , v[ 2] , m) ;
gl Col or 3f ( 0. 0, 1. 0, 0. 0) ;
209
gl Col or 3f ( 0. 0, 1. 0, 0. 0) ;
gl Col or 3f ( 0. 0, 0. 0, 1. 0) ;
gl Col or 3f ( 0. 0, 0. 0, 0. 0) ;
}
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
210
get this
want this
36
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
i f ti bj t d d th t l
211
information as objects are rendered so that only
the front objects appear in the image
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 mai n c
212
Requested in mai n. c
gl ut I ni t Di spl ayMode
( GLUT_SI NGLE | GLUT_RGB | GLUT_DEPTH)
- Enabled in i ni t . c
gl Enabl e( GL_DEPTH_TEST)
- Cleared in the display callback
gl Cl ear ( GL_COLOR_BUFFER_BI T | GL_DEPTH_BUFFER_BI T)
Surface vs. Volume Subdvision
In our example, we divided the surface of
each face
We could also divide the volume using the
same midpoints
213
The midpoints define four smaller
tetrahedrons, one for each vertex
Keeping only these tetrahedrons removes
a volume in the middle
See text for code
Volume Subdivision
214
Input and Interaction
Objectives
Introduce the basic input devices
- Physical Devices
- Logical Devices
- Input Modes
216
p
Event-driven input
Introduce double buffering for smooth
animations
Programming event input with GLUT
37
Project Sketchpad
Ivan Sutherland (MIT 1963) established
the basic interactive paradigm that
characterizes interactive computer
graphics:
217
g p
- 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
Graphical Input
Devices can be described either by
- Physical properties
Mouse
Keyboard
Trackball
218
- Logical Properties
What is returned to program via API
A position
An object identifier
Modes
- How and when input is obtained
Request or event
Physical Devices
219
mouse trackball
light pen
data tablet
joy stick
space ball
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
l iti ) t th ti t
220
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
Logical Devices
Consider the C and C++ code
- C++: ci n >> x;
- C: scanf ( %d, &x) ;
What is the input device?
221
- Cant tell from the code
- Could be keyboard, file, output from another
program
The code provides logical input
- A number (an i nt ) is returned to the program
regardless of the physical device
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
222
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
38
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
223
device and a keyboard
Input Modes
Input devices contain a trigger which can
be used to send a signal to the operating
system
- Button on mouse
224
- Pressing or releasing a key
When triggered, input devices return
information (their measure) to the system
- Mouse returns position information
- Keyboard returns ASCII code
Request Mode
Input provided to program only when user
triggers the device
Typical of keyboard input
- Can erase (backspace) edit correct until enter
225
Can erase (backspace), edit, correct until enter
(return) key (the trigger) is depressed
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
226
Each trigger generates an event whose
measure is put in an event queue which
can be examined by the user program
Event Types
Window: resize, expose, iconify
Mouse: click one or more buttons
Motion: move mouse
K b d l k
227
Keyboard: press or release a key
Idle: nonevent
- Define what should be done if no other event is
in queue
Callbacks
Programming interface for event-driven
input
Define a callback function for each type of
event the graphics system recognizes
228
event the graphics system recognizes
This user-supplied function is executed
when the event occurs
GLUT example:
gl ut MouseFunc( mymouse)
mouse callback function
39
GLUT callbacks
GLUT recognizes a subset of the events
recognized by any particular window
system (Windows, X, Macintosh)
- gl ut Di spl ayFunc
l t M F
229
- gl ut MouseFunc
- gl ut ReshapeFunc
- gl ut KeyFunc
- gl ut I dl eFunc
- gl ut Mot i onFunc,
gl ut Passi veMot i onFunc
GLUT Event Loop
Remember that the last line in mai n. c for a
program using GLUT must be
which puts the program in an infinite event loop
230
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
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
231
p
- When a window is exposed
- When the user program decides it wants to change the
display
In mai n. c
- gl ut Di spl ayFunc( mydi spl ay) identifies the
function to be executed
- Every GLUT program must have a display callback
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
232
p y g
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
Animating a Display
When we redraw the display through the
display callback, we usually start by clearing
the window
- gl Cl ear ( )
then draw the altered display
233
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 si ngl e_doubl e. c for an example
with a rotating cube
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
- gl ut I ni t Di spl ayMode( GL RGB | GL DOUBLE)
234
g p y ( _ | _ )
- At the end of the display callback buffers are swapped
{
gl Cl ear ( )
. . .
/ / dr aw gr aphi cs her e
. . .
gl ut SwapBuf f er s( )
}
40
Using the idle callback
The idle callback is executed whenever there are no
events in the event queue
- gl ut I dl eFunc( myi dl e)
- Useful for animations
voi d myi dl e( ) {
/ / h t hi
235
/ / change somet hi ng
t += dt
}
Voi d mydi spl ay( ) {
gl Cl ear ( ) ;
/ / dr aw somet hi ng t hat depends on t
}
Using globals
The form of all GLUT callbacks is fixed
- void mydi spl ay( )
- void mymouse( GLi nt but t on, GLi nt st at e,
GLi nt x, GLi nt y)
Must use globals to pass information to
236
Must use globals to pass information to
callbacks
f l oat t ; / / gl obal
{
/ / dr aw somet hi ng t hat depends on t
}
Working with Callbacks
Objectives
Learn to build interactive programs using
GLUT callbacks
- Mouse
- Keyboard
238
y
- Reshape
Introduce menus in GLUT
The mouse callback
gl ut MouseFunc( mymouse)
voi d mymouse( GLi nt but t on,
GLi nt st at e, GLi nt x, GLi nt y)
Returns
239
Returns
- which button (GLUT_LEFT_BUTTON,
GLUT_MI DDLE_BUTTON,
GLUT_RI GHT_BUTTON) caused event
- state of that button (GLUT_UP, GLUT_DOWN)
- Position in window
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
M t i t di t t d b llb k b
240
Must invert y coordinate returned by callback by
height of window
y = h y;
(0,0)
h
w
41
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
241
g
- New height returned to reshape callback that
we will look at in detail soon
- Can also use enquiry functions
gl Get I nt v
gl Get Fl oat v
to obtain any value that is part of the state
Terminating a program
In our original programs, there was no
way to terminate them through OpenGL
We can use the simple mouse callback
242
voi d mouse( i nt bt n, i nt st at e, i nt x, i nt y)
{
i f ( bt n==GLUT_RI GHT_BUTTON && st at e==GLUT_DOWN)
exi t ( 0) ;
}
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
243
This example does not use the display
callback but one is required by GLUT; We can
use the empty display callback function
mydi spl ay( ) {}
Drawing squares at cursor location
voi d mymouse( i nt bt n, i nt st at e, i nt x, i nt y)
{
i f ( bt n==GLUT_RI GHT_BUTTON && st at e==GLUT_DOWN)
exi t ( 0) ;
i f ( bt n==GLUT_LEFT_BUTTON && st at e==GLUT_DOWN)
dr awSquar e( x, y) ;
}
244
voi d dr awSquar e( i nt x, i nt y)
{
y = h- y; / / i nver t y posi t i on
poi nt s[ i ] = poi nt 2( x+si ze, y+si ze) ;
poi nt s[ i +1] = poi nt 2( x- si ze, y+si ze) ;
poi nt s[ i +2] = poi nt 2( x- si ze, y- si ze) ;
poi nt s[ i +3] = poi nt 2( x+si ze, y- si ze) ;
i +=4
}
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
- gl ut Mot i onFunc( dr awSquar e)
245
g q
We can draw squares without depressing a
button using the passive motion callback
- gl ut Passi veMot i onFunc( dr awSquar e)
Using the keyboard
gl ut Keyboar dFunc( mykey)
Voi d mykey( unsi gned char key,
i nt x, i nt y)
- Returns ASCII code of key depressed and mouse location
246
- Note GLUT does not recognize key release as an event
voi d mykey( )
{
i f ( key == Q | key == q )
exi t ( 0) ;
}
42
Special and Modifier Keys
GLUT defines the special keys in gl ut . h
- Function key 1: GLUT_KEY_F1
- Up arrow key: GLUT_KEY_UP
i f ( key == GLUT_KEY_F1
Can also check if one of the modifiers
247
- GLUT_ACTI VE_SHI FT
- GLUT_ACTI VE_CTRL
- GLUT_ACTI VE_ALT
is depressed by
gl ut Get Modi f i er s( )
- Allows emulation of three-button mouse with one- or
two-button mice
Reshaping the window
We can reshape and resize the OpenGL
display window by pulling the corner of
the window
What happens to the display?
248
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
Reshape possibilities
249
original
reshaped
The Reshape callback
gl ut ReshapeFunc( myr eshape)
voi d myr eshape( i nt w, i nt h)
- Returns width and height of new window (in pixels)
- A redisplay is posted automatically at end of
execution of the callback
250
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
Pre-OpenGL 3.0:
Example Reshape
This reshape preserves shapes by making the viewport
and world window have the same aspect ratio
voi d myReshape( i nt w, i nt h)
{
gl Vi ewpor t ( 0, 0, w, h) ;
gl Mat r i xMode( GL PROJ ECTI ON) ; / * swi t ch mat r i x mode */
251
gl Mat r i xMode( GL_PROJ ECTI ON) ; / * swi t ch mat r i x mode */
gl LoadI dent i t y( ) ;
i f ( w <= h)
gl uOr t ho2D( - 2. 0, 2. 0, - 2. 0 * ( GLf l oat ) h / ( GLf l oat ) w,
2. 0 * ( GLf l oat ) h / ( GLf l oat ) w) ;
el se gl uOr t ho2D( - 2. 0 * ( GLf l oat ) w / ( GLf l oat ) h, 2. 0 *
( GLf l oat ) w / ( GLf l oat ) h, - 2. 0, 2. 0) ;
gl Mat r i xMode( GL_MODELVI EW) ; / * r et ur n t o model vi ew mode */
}
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
252
- Menus
- Slidebars
- Dials
- Input boxes
But toolkits tend to be platform dependent
GLUT provides a few widgets including menus
43
Menus
GLUT supports pop-up menus
- A menu can have submenus
Three steps
- Define entries for the menu
253
Define entries for the menu
- Define action for each menu item
Action carried out if entry selected
- Attach menu to a mouse button
Defining a simple menu
In mai n. c
menu_i d = gl ut Cr eat eMenu( mymenu) ;
gl ut AddmenuEnt r y( cl ear Scr een, 1) ;
gl uAddMenuEnt r y( exi t , 2) ;
254
g y( , )
gl ut At t achMenu( GLUT_RI GHT_BUTTON) ;
entries that appear when
right button depressed
identifiers
clear screen
exit
Menu actions
- Menu callback
voi d mymenu( i nt i d)
{
i f ( i d == 1) gl Cl ear ( ) ;
i f ( i d == 2) exi t ( 0) ;
255
- Note each menu has an id that is returned when it is
created
- Add submenus by
gl ut AddSubMenu( char *submenu_name, submenu i d)
}
entry in parent menu
Other functions in GLUT
Dynamic Windows
- Create and destroy during execution
Subwindows
Multiple Windows
256
Multiple Windows
Changing callbacks during execution
Timers
Portable fonts (deprecated)
- gl ut Bi t mapChar act er
- gl ut St r okeChar act er
Geometry
Objectives
Introduce the elements of geometry
- Scalars
- Vectors
- Points
258
Develop mathematical operations among
them in a coordinate-free manner
Define basic primitives
- Line segments
- Polygons
44
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
259
Want a minimum set of primitives from which
we can build more sophisticated objects
We will need three basic elements
- Scalars
- Vectors
- Points
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
260
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
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
261
( p ) y g
fundamental axioms (associativity,
commutivity, inverses)
Examples include the real and complex
number under the ordinary rules with which we
are familiar
Scalars alone have no geometric properties
Vectors
Physical definition: a vector is a quantity
with two attributes
- Direction
- Magnitude
262
g
Examples include
- Force
- Velocity
- Directed line segments
Most important example for graphics
Can map to other types
v
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
263
- Zero magnitude, undefined orientation
The sum of any two vectors is a vector
- Use head-to-tail axiom
v
-v
ov
v
u
w
Linear Vector Spaces
Mathematical system for manipulating vectors
Operations
- Scalar-vector multiplication u=ov
- Vector-vector addition: v=u+w
264
Vector vector addition: v u+w
Expressions such as
v=u+2w-3r
Make sense in a vector space
45
Vectors Lack Position
These vectors are identical
- Same length and magnitude
265
Vectors spaces insufficient for geometry
- Need points
Points
Location in space
Operations allowed between points and
vectors
- Point-point subtraction yields a vector
266
Point point subtraction yields a vector
- Equivalent to point-vector addition
P=v+Q
v=P-Q
Affine Spaces
Point + a vector space
Operations
- Vector-vector addition
- Scalar-vector multiplication
267
Scalar vector multiplication
- Point-vector addition
- Scalar-scalar operations
For any point define
- 1 P = P
- 0 P = 0(zero vector)
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
269
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
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
270
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
46
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
271
P
Q
Q
P
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
272
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
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, |)
274
functions P(o, |)
- Linear functions give planes and polygons
P(o)
P(o, |)
Planes
A plane be determined by a point and two
vectors or by three points
275
P(o,|)=R+ou+|v
P(o,|)=R+o(Q-R)+|(P-Q)
Triangles
convex sum of P and Q
convex sum of S(o) and R
276
convex sum of P and Q
for 0<=o,|<=1, we get all points in triangle
47
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 where
o
1
+o
2
+o
3
= 1
o
i
>=0
The representation is called the barycentric
coordinaterepresentation of P
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
278
n = u v and the equivalent form
(P(o)-P) n=0
u
v
P
Representation
Objectives
Introduce concepts such as dimension
and basis
Introduce coordinate systems for
representing vectors spaces and frames
280
representing vectors spaces and frames
for representing affine spaces
Discuss change of frames and basis
Introduce homogeneous coordinates
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
281
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
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
282
linearly independent vectors form a basis for
the space
Given a basis v
1
, v
2
,., v
n
, any vector vcan be
written as
v=o
1
v
1
+ o
2
v
2
+.+o
n
v
n
where the {o
i
} are unique
48
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
283
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
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 vwith respect to the given
284
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
.
Example
v=2v
1
+3v
2
-4v
3
a=[2 3 4]
T
Note that this representation is with
respect to a particular basis
285
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
Coordinate Systems
Which is correct?
v
286
Both are correct because vectors have no
fixed location
v
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
287
a single point, the origin, to the basis
vectors to form a frame
P
0
v
1
v
2
v
3
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 v +o v + +o v
288
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
49
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
289
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
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 + | v +| v +| v = [| | | 1 ] [v v v P ]
290
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
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
291
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]
Homogeneous Coordinates
and Computer Graphics
Homogeneous coordinates are key to all
computer graphics systems
- All standard transformations (rotation,
translation, scaling) can be implemented by
292
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
Change of Coordinate Systems
Consider two representations of a the
same vector with respect to two different
bases. The representations are
a=[o o o ]
293
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
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
v
294
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
50
Matrix Form
The coefficients define a 3 x 3 matrix
(
(
(

23 22 21
13 12 11
M =
295
and the basis can be related by
See text for numerical examples
a=M
T
b
(

32 31 33
Change of Frames
We can apply a similar process in homogeneous
coordinates to the representations of both points and
vectors
Consider two frames:
v
2
Q
u
1
u
2
296
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
(P
0
, v
1
, v
2
, v
3
)
(Q
0
, u
1
, u
2
, u
3
)
P
0
v
1
v
3
Q
0
u
3
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 + + + P
Extending what we did with change of bases
297
Q
0
=
41
v
1
+
42
v
2
+
43
v
3
+
44
P
0
defining a 4 x 4 matrix
(
(
(
(
1
0
0
0
43 42 41
33 32 31
23 22 21
13 12 11
M =
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
298
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 M is 4 x 4 and specifies an affine
transformation in homogeneous coordinates
a=M
T
b
Affine Transformations
Every linear transformation is equivalent to
a change in frames
Every affine transformation preserves lines
However an affine transformation has only
299
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
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
300
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 )
51
Moving the Camera
If objects are on both sides of z=0, we must move
camera frame
(
(
(
(
(
d 1 0 0
0 0 1 0
0 0 0 1
M =
301
(
1 0 0 0
Transformations
Objectives
Introduce standard transformations
- Rotations
- Translation
- Scaling
303
g
- Shear
Derive homogeneous coordinate
transformation matrices
Learn to build arbitrary transformation
matrices from simple transformations
General Transformations
A transformation maps points to other
points and/or vectors to other vectors
v=T(u)
304
Q=T(P)
Affine Transformations
Line preserving
Characteristic of many physically
important transformations
- Rigid body transformations: rotation translation
305
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
Pipeline Implementation
u
T
T(u)
frame
buffer
(from application program)
306
transformation rasterizer
u
v
u
v
T(u)
T(v)
T(u)
T(u)
T(v)
T(v)
vertices vertices pixels
buffer
52
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
t i ffi
307
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
Translation
Move (translate, displace) a point to a
new location
P
d
308
Displacement determined by a vector d
- Three degrees of freedom
- P=P+d
P
d
Object Translation
Every point in object is displaced by same vector
309
object translation: every point is displaced
by same vector
Translation Using Representations
Using the homogeneous coordinate
representation in some frame
p = [ x y z 1]
T
p= [x y z 1]
T
310
p [ y ]
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
Translation Matrix
We can also express translation using a
4 x 4 matrix T in homogeneous coordinates
p=Tp where
(
(
d 0 1 0
d 0 0 1
x
311
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
z
y
Rotation (2D)
Consider rotation about the origin by u degrees
- radius stays the same, angle increases by u
x = r cos (| + u)
y = r sin (| + u)
312
x = x cos u y sin u
y = x sin u + y cos u
x = r cos |
y = r sin |
53
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
313
- 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
Rotation Matrix
(
(
(
u u
u u
0 0 cos sin
0 0 sin cos
R = R (u) =
314
(
(
(
u u
1 0 0 0
0 1 0 0
0 0 cos sin
R = R
z
(u) =
Rotation about x and y axes
Same argument as for rotation about z-axis
- For rotation about x-axis, xis unchanged
- For rotation about y-axis, yis unchanged
(
(
(
u u 0 sin cos 0
0 0 0 1
315
R = R
x
(u) =
R = R
y
(u) =
(
(
(
(
u u
u u
1 0 0 0
0 cos sin 0
0 sin - cos 0
(
(
(
(
u u
u u
1 0 0 0
0 cos 0 sin -
0 0 1 0
0 sin 0 cos
Scaling
x=s
x
x
y=s
y
y
z=s
z
z
Expand or contract along each axis (fixed point of origin)
316
(
(
(
(
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
) =
p=Sp
Reflection
corresponds to negative scale factors
original s
x
= -1 s
y
= 1
317
s
x
= -1 s
y
= -1 s
x
= 1 s
y
= -1
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
)
1
318
- 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
)
54
Concatenation
We can form arbitrary affine transformation
matrices by multiplying together rotation,
translation, and scaling matrices
Because the same transformation is applied to
319
many vertices, the cost of forming a matrix
M=ABCDis 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
Order of Transformations
Note that matrix on the right is the first
applied
Mathematically, the following are
equivalent
320
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
General Rotation About the Origin
A rotation by u about an arbitrary axis
can be decomposed into the concatenation
of rotations about the x, y, and z axes
321
u
x
z
y
v
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
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
( p
f
) ( ) (p
f
)
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
323
We apply an instance transformation to its
vertices to
Scale
Orient
Locate
Shear
Helpful to add one more basic transformation
Equivalent to pulling faces in opposite directions
324
55
Shear Matrix
Consider simple shear along xaxis
x = x + y cot u
y = y
325
z = z
(
(
(
(
u
1 0 0 0
0 1 0 0
0 0 1 0
0 0 cot 1
H(u) =
OpenGL Transformations
Objectives
Learn how to carry out transformations in
OpenGL
- Rotation
- Translation
327
- Scaling
Introduce mat.h and vec.h transformations
- Model-view
- Projection
Pre-OpenGL 3.0 Matrices
In OpenGL matrices were part of the state
Multiple types
- Model-View (GL_MODELVI EW)
- Projection (GL_PROJ ECTI ON)
328
- Texture (GL_TEXTURE)
- Color(GL_COLOR)
Single set of functions for manipulation
Select which to manipulated by
- gl Mat r i xMode( GL_MODELVI EW) ;
- gl Mat r i xMode( GL_PROJ ECTI ON) ;
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
329
pipeline
The CTM is defined in the user program and
loaded into a transformation unit
CTM vertices vertices
p
p=Cp
C
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
330
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
56
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
331
Result: C =TR T
1
which is backwards.
This result is a consequence of doing postmultiplications.
Lets try again.
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
332
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
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
We will emulate this process
Rotation, Translation, Scaling
mat 4 m= I dent i t y( ) ;
Create an identity matrix:
Multiply on right by rotation matrix of theta in degrees
where (vx, vy, vz) define axis of rotation
334
mat 4 r = Rot at e( t het a, vx, vy, vz)
m= m*r ;
mat 4 s = Scal e( sx, sy, sz)
mat 4 t = Tr ansal at e( dx, dy, dz) ;
m= m*s*t ;
where (vx, vy, vz) define axis of rotation
Do same with translation and scaling:
Example
Rotation about z axis by 30 degrees with a fixed
point of (1.0, 2.0, 3.0)
mat 4 m= I dent i t y( ) ;
m= Tr ansl at e( 1. 0, 2. 0, 3. 0) *
335
Remember that last matrix specified in the
program is the first applied
Rot at e ( 30. 0, 0. 0, 0. 0, 1. 0) *
Tr ansl at e( - 1. 0, - 2. 0, - 3. 0) ;
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
t f th d i d 4 4 t i
336
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
57
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
337
g g g p y
Pre 3.0 OpenGL maintained stacks for each
type of matrix
Easy to create the same functionality with a
simple stack class
Reading Back State
Can also access OpenGL variables (and other
parts of the state) by query functions
gl Get I nt eger v
gl Get Fl oat v
338
gl Get Bool eanv
gl Get Doubl ev
gl I sEnabl ed
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
339
- Centered at origin
- Sides aligned with axes
- Will discuss modeling in next lecture
main.c
voi d mai n( i nt ar gc, char **ar gv)
{
gl ut I ni t Di spl ayMode( GLUT_DOUBLE | GLUT_RGB |
GLUT_DEPTH) ;
340
gl ut Cr eat eWi ndow( " col or cube") ;
gl ut ReshapeFunc( myReshape) ;
gl ut Di spl ayFunc( di spl ay) ;
gl ut I dl eFunc( spi nCube) ;
gl ut MouseFunc( mouse) ;
gl Enabl e( GL_DEPTH_TEST) ;
}
Idle and Mouse callbacks
voi d spi nCube( )
{
t het a[ axi s] += 2. 0;
i f ( t het a[ axi s] > 360. 0 ) t het a[ axi s] - = 360. 0;
}
341
voi d mouse( i nt bt n, i nt st at e, i nt x, i nt y)
{
i f ( bt n==GLUT_LEFT_BUTTON && st at e == GLUT_DOWN)
axi s = 0;
i f ( bt n==GLUT_MI DDLE_BUTTON && st at e == GLUT_DOWN)
axi s = 1;
i f ( bt n==GLUT_RI GHT_BUTTON && st at e == GLUT_DOWN)
axi s = 2;
}
Display callback
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
M ffi i t th t f i d t i li ti d di
342
voi d di spl ay( )
{
gl Cl ear ( GL_COLOR_BUFFER_BI T | GL_DEPTH_BUFFER_BI T) ;
gl Uni f or m( ) ; / / or gl Uni f or mMat r i x
gl Dr awAr r ays( ) ;
}
More efficient than transforming data in application and resending
the data
58
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
343
- 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
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
344
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)
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
345
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
Quaternions
Extension of imaginary numbers from two to
three dimensions
Requires one real and three imaginary
components i, j, k
+ i+ j+ k
346
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
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?
347
a p e o to o a sta ce at
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
59
Objectives
Introduce simple data structures for
building polygonal models
- Vertex lists
- Edge lists
349
g
Deprecated OpenGL vertex arrays
Representing a Mesh
Consider a mesh
v
7
v
6
v
8
v
5
v
4
e
1
e
8
e
3
e
2
e
11
e
7
e
10
e
4
e
9
350
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
3 e
6
7
e
5
e
12
Simple Representation
Define each polygon by the geometric locations
of its vertices
Leads to OpenGL code such as
ver t ex[ i ] = vec3( x1, x1, x1) ;
ver t ex[ i +1] = vec3( x6 x6 x6) ;
351
Inefficient and unstructured
- Consider moving a vertex to a new location
- Must search for all occurrences
ver t ex[ i +1] = vec3( x6, x6, x6) ;
ver t ex[ i +2] = vec3( x7, x7, x7) ;
i +=3;
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
352
facing polygons
Use the right-hand rule =
counter-clockwise encirclement
of outward-pointing normal
OpenGL can treat inward and
outward facing polygons differently
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
353
y
- 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
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 y z
v
1
354
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
1
v
7
v
6
v
8
v
5
v
6
topology
geometry
60
Shared Edges
Vertex lists will draw filled polygons correctly but
if we draw the polygon by its edges, shared
edges are drawn twice
355
Can store mesh by edge list
Edge List
v
7
v
6
v
8
v
5
e
1
e
8
e
3
e
2
e
11
e
10
e
4
e
9 e1
e2
e3
x
1
y
1
z
1
x
2
y
2
z
2
x
3
y
3
z
3
v1
v6
356
v
1
v
2
v
7
v
3 e
6
e
7
e
5
e
4
e
12
e4
e5
e6
e7
e8
e9
3
y
3 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
Note polygons are
not represented
Modeling a Cube
t ypedef vec3 poi nt 3;
poi nt 3 ver t i ces[ ] = {
poi nt 3( - 1. 0, - 1. 0, - 1. 0) , poi nt 3( 1. 0, - 1. 0, - 1. 0) ,
poi nt 3( 1. 0, 1. 0, - 1. 0) , poi nt 3( - 1. 0, 1. 0, - 1. 0) ,
poi nt 3( - 1 0 - 1 0 1 0) poi nt 3( 1 0 - 1 0 1 0)
Define global arrays for vertices and colors
357
poi nt 3( 1. 0, 1. 0, 1. 0) , poi nt 3( 1. 0, 1. 0, 1. 0) ,
poi nt 3( 1. 0, 1. 0, 1. 0) , poi nt 3( - 1. 0, 1. 0, 1. 0)
};
t ypedef vec3 col or 3;
col or 3 col or s[ ] = {
col or 3( 0. 0, 0. 0, 0. 0) , col or 3( 1. 0, 0. 0, 0. 0) ,
col or 3( 1. 0, 1. 0, 0. 0) , col or 3( 0. 0, 1. 0, 0. 0) ,
col or 3( 0. 0, 0. 0, 1. 0) , col or 3( 1. 0, 0. 0, 1. 0) ,
col or 3( 1. 0, 1. 0, 1. 0) , col or 3( 0. 0, 1. 0, 1. 0)
};
Drawing a triangle from a
list of indices
Draw a triangle from a list of indices into the array
ver t i ces and assign a color to each index
voi d t r i angl e( i nt a, i nt b, i nt c, i nt d)
{
l [ i ] l [ d]
358
vcol or s [ i ] = col or s [ d] ;
posi t i on[ i ] = ver t i ces[ a] ;
vcol or s [ i +1] = col or s [ d] ;
posi t i on[ i +1] = ver t i ces[ a] ;
vcol or s [ i +2] = col or s [ d] ;
posi t i on[ i +2] = ver t i ces[ a] ;
i +=3;
}
Draw cube from faces
voi d col or cube( )
{
quad( 0, 3, 2, 1) ;
quad( 2, 3, 7, 6) ;
quad( 0, 4, 7, 3) ;
quad( 1, 2, 6, 5) ;
5 6
2
1
359
quad( 4, 5, 6, 7) ;
quad( 0, 1, 5, 4) ;
}
0
4
7
3
Note that vertices are ordered so that
we obtain correct outward facing normals
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
D i b b it f i th t
360
Drawing a cube by its faces in the most
straight forward way used to require
- 6 gl Begi n, 6 gl End
- 6 gl Col or
- 24 gl Ver t ex
- More if we use texture and lighting
61
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
361
- Vertices
- Colors
- Color indices
- Normals
- Texture coordinates
- Edge flags
Now vertex arrays can be used for any attributes
Old Style Initialization
Using the same color and vertex data, first we
enable
gl Enabl eCl i ent St at e( GL_COLOR_ARRAY) ;
gl Enabl eCl i ent St at e( GL_VERTEX_ARRAY) ;
Id tif l ti f
362
Identify location of arrays
gl Ver t exPoi nt er ( 3, GL_FLOAT, 0, ver t i ces) ;
gl Col or Poi nt er ( 3, GL_FLOAT, 0, col or s) ;
3d arrays stored as floats
data contiguous
data array
Mapping indices to faces
Form an array of face indices
E h i f i di d ib
GLubyt e cubeI ndi ces[ 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
Each successive four indices describe a
face of the cube
Draw through gl Dr awEl ement s which
replaces all gl Ver t ex and gl Col or calls in
the display callback
Drawing the cube
Old Method:
gl Dr awEl ement s( GL_QUADS, 24,
GL_UNSI GNED_BYTE, cubeI ndi ces) ;
Draws cube with 1 function call!!
364
Problem is that although we avoid many function
calls, data are still on client side
Solution:
- no immediate mode
- Vertex buffer object
- Use glDrawArrays
Rotating Cube
Full example
Model Colored Cube
Use 3 button mouse to change direction
of rotation of rotation
Use idle function to increment angle of
rotation
365
Cube Vertices
/ / Ver t i ces of a uni t cube cent er ed at or i gi n
/ / si des al i gned wi t h axes
poi nt 4 ver t i ces[ 8] = {
poi nt 4( - 0. 5, - 0. 5, 0. 5, 1. 0 ) ,
poi nt 4( - 0. 5, 0. 5, 0. 5, 1. 0 ) ,
366
p ( , , , ) ,
poi nt 4( 0. 5, 0. 5, 0. 5, 1. 0 ) ,
poi nt 4( 0. 5, - 0. 5, 0. 5, 1. 0 ) ,
poi nt 4( - 0. 5, - 0. 5, - 0. 5, 1. 0 ) ,
poi nt 4( - 0. 5, 0. 5, - 0. 5, 1. 0 ) ,
poi nt 4( 0. 5, 0. 5, - 0. 5, 1. 0 ) ,
poi nt 4( 0. 5, - 0. 5, - 0. 5, 1. 0 )
};
62
Colors
/ / RGBA col or s
col or 4 ver t ex_col or s[ 8] = {
col or 4( 0. 0, 0. 0, 0. 0, 1. 0 ) , / / bl ack
col or 4( 1. 0, 0. 0, 0. 0, 1. 0 ) , / / r ed
col or 4( 1. 0, 1. 0, 0. 0, 1. 0 ) , / / yel l ow
367
( , , , ) , / / y
col or 4( 0. 0, 1. 0, 0. 0, 1. 0 ) , / / gr een
col or 4( 0. 0, 0. 0, 1. 0, 1. 0 ) , / / bl ue
col or 4( 1. 0, 0. 0, 1. 0, 1. 0 ) , / / magent a
col or 4( 1. 0, 1. 0, 1. 0, 1. 0 ) , / / whi t e
col or 4( 0. 0, 1. 0, 1. 0, 1. 0 ) / / cyan
};
Quad Function
/ / quad gener at es t wo t r i angl es f or each f ace
/ / and assi gns col or s t o t he ver t i ces
i nt I ndex = 0;
voi d quad( i nt a, i nt b, i nt c, i nt d )
{
col or s[ I ndex] = ver t ex_col or s[ a] ; poi nt s[ I ndex] = ver t i ces[ a] ; I ndex++;
col or s[ I ndex] = ver t ex_col or s[ b] ; poi nt s[ I ndex] = ver t i ces[ b] ; I ndex++;
col or s[ I ndex] = ver t ex_col or s[ c] ; poi nt s[ I ndex] = ver t i ces[ c] ; I ndex++;
368
col or s[ I ndex] = ver t ex_col or s[ a] ; poi nt s[ I ndex] = ver t i ces[ a] ; I ndex++;
col or s[ I ndex] = ver t ex_col or s[ c] ; poi nt s[ I ndex] = ver t i ces[ c] ; I ndex++;
col or s[ I ndex] = ver t ex_col or s[ d] ; poi nt s[ I ndex] = ver t i ces[ d] ; I ndex++;
}
Color Cube
/ / gener at e 12 t r i angl es: 36 ver t i ces and 36 col or s
voi d col or cube( )
{
quad( 1, 0, 3, 2 ) ;
quad( 2, 3, 7, 6 ) ;
369
q ( , , , )
quad( 3, 0, 4, 7 ) ;
quad( 6, 5, 1, 2 ) ;
quad( 4, 5, 6, 7 ) ;
quad( 5, 4, 0, 1 ) ;
}
Initialization I
voi d
i ni t ( )
{
col or cube( ) ;
/ / cr eat e a ver t ex ar r ay obj ect
GLui nt vao;
gl GenVer t exAr r ays ( 1, &vao ) ;
gl Bi ndVer t exAr r ay ( vao ) ;
370
/ / cr eat e and i ni t i al i ze a buf f er obj ect
GLui nt buf f er ;
gl GenBuf f er s( 1, &buf f er ) ;
gl Bi ndBuf f er ( GL_ARRAY_BUFFER, buf f er ) ;
gl Buf f er Dat a( GL_ARRAY_BUFFER, si zeof ( poi nt s) + si zeof ( col or s) , NULL,
GL_STATI C_DRAW) ;
gl Buf f er SubDat a( GL_ARRAY_BUFFER, 0, si zeof ( poi nt s) , poi nt s ) ;
gl Buf f er SubDat a( GL_ARRAY_BUFFER, si zeof ( poi nt s) , si zeof ( col or s) , col or s ) ;
/ / l oad shader s and use t he r esul t i ng shader pr ogr am
GLui nt pr ogr am= I ni t Shader ( "vshader 36. gl sl ", "f shader 36. gl sl " ) ;
gl UsePr ogr am( pr ogr am) ;
Initialization II
/ / set up ver t ex ar r ays
GLui nt vPosi t i on = gl Get At t r i bLocat i on( pr ogr am, " vPosi t i on" ) ;
gl Enabl eVer t exAt t r i bAr r ay( vPosi t i on ) ;
gl Ver t exAt t r i bPoi nt er ( vPosi t i on, 4, GL_FLOAT, GL_FALSE, 0,
BUFFER_OFFSET( 0) ) ;
GL i nt Col or gl Get At t r i bLocat i on( pr ogr am " Col or " )
371
GLui nt vCol or = gl Get At t r i bLocat i on( pr ogr am, " vCol or " ) ;
gl Enabl eVer t exAt t r i bAr r ay( vCol or ) ;
gl Ver t exAt t r i bPoi nt er ( vCol or , 4, GL_FLOAT, GL_FALSE, 0,
BUFFER_OFFSET( si zeof ( poi nt s) ) ) ;
t het a = gl Get Uni f or mLocat i on( pr ogr am, "t het a" ) ;
}
Display Callback
voi d
di spl ay( voi d )
{
gl Cl ear ( GL_COLOR_BUFFER_BI T | GL_DEPTH_BUFFER_BI T ) ;
gl Uni f or m3f v( t het a 1 t het a ) ;
372
gl Uni f or m3f v( t het a, 1, t het a ) ;
gl Dr awAr r ays( GL_TRI ANGLES, 0, NumVer t i ces ) ;
}
63
Mouse Callback
voi d
mouse( i nt but t on, i nt st at e, i nt x, i nt y )
{
i f ( st at e == GLUT_DOWN ) {
swi t ch( but t on ) {
case GLUT LEFT BUTTON: Axi s Xaxi s; br eak;
373
case GLUT_LEFT_BUTTON: Axi s = Xaxi s; br eak;
case GLUT_MI DDLE_BUTTON: Axi s = Yaxi s; br eak;
case GLUT_RI GHT_BUTTON: Axi s = Zaxi s; br eak;
}
}
}
Idle Callback
voi d
i dl e( voi d )
{
t het a[ axi s] += 0. 01;
374
i f ( t het a[ axi s] > 360. 0 ) {
t het a[ axi s] - = 360. 0;
}
}
Classical Viewing
Objectives
Introduce the classical views
Compare and contrast image formation
by computer with how images have been
formed by architects artists and
376
formed by architects, artists, and
engineers
Learn the benefits and drawbacks of
each type of view
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
377
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
Planar Geometric Projections
Standard projections project onto a plane
Projectors are lines that either
- converge at a center of projection
- are parallel
378
are parallel
Such projections preserve lines
- but not necessarily angles
Nonplanar projections are needed for
applications such as map construction
64
Classical Projections
379
Perspective vs Parallel
Computer graphics treats all projections
the same and implements them with a
single pipeline
Classical viewing developed different
t h i f d i h t f
380
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
Taxonomy of Planar
Geometric Projections
parallel perspective
planar geometric projections
381
axonometric
multiview
orthographic
oblique
isometric dimetric trimetric
2 point 1 point 3 point
Perspective Projection
382
Parallel Projection
383
Orthographic Projection
Projectors are orthogonal to projection surface
384
65
Multiview Orthographic
Projection
Projection plane parallel to principal face
Usually form front, top, side views
isometric (not multiview
orthographic view)
f t
385
orthographic view)
front
side
top
in CAD and architecture,
we often display three
multiviews plus isometric
Advantages and
Disadvantages
Preserves both distances and angles
- Shapes preserved
- Can be used for measurements
Building plans
386
Manuals
Cannot see what object really looks like
because many surfaces hidden from view
- Often we add the isometric
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
387
the same
none: trimetric
two: dimetric
three: isometric
u
1
u
3
u
2
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
389
p j p p
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
Oblique Projection
Arbitrary relationship between projectors and
projection plane
390
66
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
Advantages and Disadvantages
In physical world, cannot create with simple
camera; possible with bellows camera or special
lens (architectural)
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
th i hi i t( )
393
these vanishing point(s)
vanishing point
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
67
Advantages and
Disadvantages
Objects further from viewer are projected smaller
than the same sized objects closer to the viewer
(diminuition)
- Looks realistic
397
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)
Computer Viewing
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
400
g
Setting the model-view matrix
- Selecting a lens
Setting the projection matrix
- Clipping
Setting the view volume
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
401
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
Default Projection
Default projection is orthogonal
clipped out
2
402
z=0
68
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
403
- 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 (Tr ansl at e( 0. 0, 0. 0, - d) ; )
- d > 0
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
405
Example: side view
- Rotate the camera
- Move it away from origin
- Model-view matrix C = TR
OpenGL code
Remember that last transformation
specified is first to be applied
/ / Usi ng mat . h
mat 4 t = Tr ansl at e ( 0. 0, 0. 0, - d) ;
406
mat 4 r y = Rot at eY( 90. 0) ;
mat 4 m = t *r y;
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
407
Replaced by LookAt() in mat.h
- Can concatenate with modeling transformations
Example: isometric view of cube aligned with axes
mat 4 mv = LookAt ( vec4 eye, vec4 at , vec4 up) ;
gluLookAt
LookAt ( eye, at , up)
408
69
Other Viewing APIs
The LookAt function is only one possible
API for positioning the camera
Others include
- View reference point view plane normal view
409
View reference point, view plane normal, view
up (PHIGS, GKS-3D)
- Yaw, pitch, roll
- Elevation, azimuth, twist
- Direction angles
Projections and Normalization
The default projection in the eye (camera)
frame is orthogonal
For points within the default view volume
x = x
410
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
Homogeneous Coordinate
Representation
x
p
= x
y
p
= y
z
p
= 0
w = 1
p
p
= Mp
( 0 0 0 1
default orthographic projection
411
w
p
= 1
M =
(
(
(
(
1 0 0 0
0 0 0 0
0 0 1 0
In practice, we can let M = I and set the z term to zero later
Simple Perspective
Center of projection at the origin
Projection plane z= d, d< 0
412
Perspective Equations
Consider top and side views
x
413
x
p
=
d z/
d z
x
/
y
p
=
d z
y
/
z
p
= d
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
414

0 / 1 0 0 d
(
(
(
(
1
z
y
x
(
(
(
(
d z
z
y
x
/
q =
p =
70
Perspective Division
However w= 1, so we must divide by wto
return from homogeneous coordinates
This perspective division yields
415
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
OpenGL Orthogonal Viewing
Or t ho( l ef t , r i ght , bot t om, t op, near , f ar )
416
near and far measured from camera
OpenGL Perspective
Fr ust um( l ef t , r i ght , bot t om, t op, near , f ar )
417
Using Field of View
With Fr ust umit is often difficult to get the
desired view
Per pect i ve( f ovy, aspect , near , f ar )
often provides a better interface
418
often provides a better interface
aspect = w/ h
front plane
Projection Matrices
Objectives
Derive the projection matrices used for
standard OpenGL projections
Introduce oblique projections
I t d j ti li ti
420
Introduce projection normalization
71
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
421
p j
This strategy allows us to use standard
transformations in the pipeline and makes
for efficient clipping
Pipeline View
modelview
transformation
projection
transformation
perspective
division
4D 3D
422
clipping projection
nonsingular
4D 3D
against default cube
3D 2D
Notes
We stay in four-dimensional homogeneous
coordinates through both the modelview and
projection transformations
- Both these transformations are nonsingular
D f lt t id tit t i ( th l i )
423
- 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
Orthogonal Normalization
Or t ho( l ef t , r i ght , bot t om, t op, near , f ar )
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
425
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 =
Final Projection
Set z=0
Equivalent to the homogeneous coordinate
transformation
(
(
0 0 0 1
426
Hence, general orthogonal projection in 4D is
(
(
(
(
1 0 0 0
0 0 0 0
0 0 1 0
M
orth
=
P = M
orth
ST
72
Oblique Projections
The OpenGL projection functions cannot
produce general parallel projections such as
427
However if we look at the example of the cube
it appears that the cube has been sheared
Oblique Projection = Shear + Orthogonal
Projection
General Shear
428
top view
side view
xy shear (zvalues unchanged)
Shear Matrix
(
(
(
(
0 1 0 0
0 cot 1 0
0 cot 0 1
H(u,|) =
Projection matrix
General case:
429
(
(
1 0 0 0
0 1 0 0
P = M
orth
H(q,f)
P = M
orth
STH(u,|)
Equivalency
430
Effect on Clipping
The projection matrix P = STH transforms
the original clipping volume to the default
clipping volume
top view
object
z = 1
431
DOP
DOP
near plane
far plane
clipping
volume
z = -1
x = -1
x = 1
distorted object
(projects correctly)
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
73
Perspective Matrices
Simple projection matrix in homogeneous
coordinates
(
(
(
0 0 1 0
0 0 0 1
M
433
Note that this matrix is independent of the
far clipping plane
(
(
(
0 1 0 0
0 1 0 0
0 0 1 0
M =
Generalization
(
(
(
(
0 1 0 0
0 0
0 0 1 0
0 0 0 1
N =
434

0 1 0 0
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
Picking o and |
If we pick
o =
| =
near far
far near
+
far near 2 -
435
| =
far near
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
Normalization
Transformation
distorted object
projects correctly
436
original clipping
volume original object
new clipping
volume
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
437
1 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
OpenGL Perspective
Fr ust umallows for an unsymmetric viewing
frustum (although Per spect i ve does not)
438
74
OpenGL Perspective Matrix
The normalization in Fr ust umrequires an
initial shear to form a right viewing
pyramid, followed by a scaling to get the
normalized perspective volume. Finally,
439
p p y
the perspective matrix results in needing
only a final orthogonal transformation
P = NSH
our previously defined
perspective matrix
shear and scale
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
440
coordinates as long as possible to retain
three-dimensional information needed for
hidden-surface removal and shading
We simplify clipping
Shadows
Objectives
Introduce Shadow Algorithms
Expand to projective textures
442
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 behind objects and not visible
Shadows are a global rendering issue
- Is a surface visible from a source
- May be obscured by other objects
443
Projective Shadows
Oldest methods
- Used in flight simulators to provide visual clues
Projection of a polygon is a polygon called a
shadow polygon 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
444
75
Shadow Polygon
445
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
) 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
446
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
447
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 Cannot handle shadows on general objects
Exist a variety of other methods based on same basic
idea
Well pursue methods based on projective textures
448
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 This technique is the basis of projective
textures and image based lighting
Supported in OpenGL and GLSL through
four-dimensional texture coordinates
449
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
col or = t ext ur ePr oj ( my_sampl er , t ex_coor d)
450
76
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
451
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 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
452
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) 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)
453
Vertex Shader
uni f or mmat 4 model vi ew;
uni f or mmat 4 pr oj ect i on;
uni f or mnor mal mat r i x; / / f or di f f use l i ght i ng
uni f or mmat 4 ot c; / / obj ect t o t ext ur e coor di nat e
uni f or mvec4 di f f usepr oduct ; / / di f f use l i ght *di f f use r ef l ect i vi t y
i n vec4 nor mal ;
454
out vec4 col or ;
out vec4 shadowCoor d;
voi d mai n( )
{
/ / comput e di f f use col or as usual
/ / usi ng nor mal , nor mal mat r i x, di f f use pr oduct
col or = . . .
gl _Posi t i on = pr oj ect i on*model vi ew*vPosi t i on;
shadowCoor d = OTC*vPosi t i on;
}
textureProj function
Application provides the shadow map as a texture
object
The GLSL function t ext ur ePr oj compares the
third value of the texture coordinate with the third
value of the texture image
For nearest filtering of the texture object,
t ext ur ePr oj returns 0.0 if the shadow map value
is less than the third coordinate and 1.0 otherwise
For other filtering options, t ext ur ePr oj returns
values between 0.0 and 1.0
455
Fragment Shader
uni f or msampl er 2DShadow ShadowMap;
i n vec4 shadowCoor d;
i n vec4 Col or ;
mai n( )
456
{
/ / assume near est sampl i ng i n ShadowMap
f l oat shadeFact or = t ext ur ePr oj ( ShadowMap, ShadowCoor d) ;
gl _Fr agCol or = vec4( shadeFact or *Col or . r gb, Col or . a)
}
77
Shading
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)
458
Build a simple reflection model (Phong model)
that can be used with real-time graphics
hardware
Why we need shading
Suppose we build a model of a sphere
using many polygons and color it with
gl Col or . We get something like
459
But we want
Shading
Why does the image of a real sphere look like
460
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
Scattering
Light strikes A
- Some scattered
- Some absorbed
Some of scattered light strikes B
461
Some of scattered light strikes B
- Some scattered
- Some absorbed
Some of this scattered light strikes A
and so on
Rendering Equation
The infinite scattering and absorption of
light can be described by the rendering
equation
- Cannot be solved in general
462
g
- Ray tracing is a special case for perfectly
reflecting surfaces
Rendering equation is global and includes
- Shadows
- Multiple scattering from object to object
78
Global Effects
shadow
463
translucent surface
multiple reflection
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)
464
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
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
465
g j
- 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
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
467
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
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
di ti
468
directions
smooth surface
rough surface
79
Phong Model
A simple model that can be computed rapidly
Has three components
- Diffuse
- Specular
A bi t
469
- Ambient
Uses four vectors
- To source
- To viewer
- Normal
- Perfect reflector
Ideal Reflector
Normal is determined by local orientation
Angle of incidence = angle of reflection
The three vectors must be coplanar
470
r = 2 (l n) n- l
Lambertian Surface
Perfectly diffuse reflector
Light scattered equally in all directions
Amount of light reflected is proportional to
the vertical component of incoming light
471
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
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
t t d l t th di ti f f t
472
concentrated close to the direction of a perfect
reflection
specular
highlight
Modeling Specular Reflections
Phong proposed using a term that
dropped off as the angle between the
viewer and the ideal reflection increased
473
|
I
r
~ k
s
I cos
o
|
shininess coef
absorption coef
incoming intensity
reflected
intensity
The Shininess Coefficient
Values of o between 100 and 200 correspond to
metals
Values between 5 and 10 give surface that look
like plastic
474
cos
o
|
|
90 -90
80
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
475
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
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
476
form 1/(a + bd +cd
2
) to
the diffuse and specular
terms
The constant and linear terms soften the
effect of the point source
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
477
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
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
478
dr dg db sr sg sb ar ag ab
- Shininess coefficient o
Adding up the Components
For each light source and each color
component, the Phong model can be
written (without the distance terms) as
479
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
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
480
Blinn suggested an approximation using
the halfway vector that is more efficient
81
h is normalized vector halfway between l and v
The Halfway Vector
h = ( l + v )/ | l + v |
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
b t d if t l
482
between r and v if vectors are coplanar
Resulting model is known as the modified
Phong or Blinn lighting model
- Specified in OpenGL standard
Example
Only differences in
483
these teapots are
the parameters
in the Phong model
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
484
p
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 Want all three to be unit length
485
r = 2(l - n)n l
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
486
normal n and p
0
Normal can be obtained by
n = (p
2
-p
0
) (p
1
-p
0
)
82
Normal to Sphere
Implicit function f(x,y.z)=0
Normal given by gradient
Sphere f(p)=pp-1
[f/ f/ f/ ]
T
487
n = [f/x, f/y, f/z]
T
=p
Parametric Form
For sphere
T t l d t i d b t
x=x(u,v)=cos u sin v
y=y(u,v)=cos u cos v
z= z(u,v)=sin u
488
Tangent plane determined by vectors
Normal given by cross product
p/u = [x/u, y/u, z/u]T
p/v = [x/v, y/v, z/v]T
n = p/u p/v
General Case
We can compute parametric normals for
other simple cases
- Quadrics
- Parameteric polynomial surfaces
489
p y
Bezier surface patches (Chapter 10)
Shading in OpenGL
Objectives
Introduce the OpenGL shading methods
- per vertex vs per fragment shading
- Where to carry out
Discuss polygonal shading
491
Discuss polygonal shading
- Flat
- Smooth
- Gouraud
OpenGL shading
Need to specify:
- Normals
- Material properties
- Lights
492
g
- State-based shading functions have
been deprecated (glNormal, glMaterial,
glLight)
- Get computed values in application or
send attributes to shaders
83
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
493
unit length but
- Length can be affected by transformations
- Note that scaling does not preserved length
GLSL has a normalization function
Normal for Triangle
p
2
n
plane n(p- p
0
) = 0
n= (p
1
- p
0
) (p
2
- p
0
)
494
p
0
p
1
(p
1
p
0
) (p
2
p
0
)
normalize n n/ |n|
p
Note that right-hand rule determines outward face
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
4 di f f 0 4( 1 0 0 0 0 0 1 0)
495
vec4 di f f use0 = vec4( 1. 0, 0. 0, 0. 0, 1. 0) ;
vec4 ambi ent 0 = vec4( 1. 0, 0. 0, 0. 0, 1. 0) ;
vec4 specul ar 0 = vec4( 1. 0, 0. 0, 0. 0, 1. 0) ;
vec4 l i ght 0_pos = vec4( 1. 0, 2. 0, 3, 0, 1. 0) ;
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
496
- 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
Spotlights
Derive from point source
- Direction
- Cutoff
- Attenuation Proportional to cos
o
|
497
Attenuation Proportional to cos |
u u
|
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
498
turned off
A global ambient term that is often helpful
for testing
84
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
499
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
Material Properties
Material properties should match the terms in
the light model
Reflectivities
w component gives opacity
500
vec4 ambi ent = vec4( 0. 2, 0. 2, 0. 2, 1. 0) ;
vec4 di f f use = vec4( 1. 0, 0. 8, 0. 0, 1. 0) ;
vec4 specul ar = vec4( 1. 0, 1. 0, 1. 0, 1. 0) ;
GLf l oat shi ne = 100. 0
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
501
back faces not visible back faces visible
Emissive Term
We can simulate a light source in OpenGL
by giving a material an emissive
component
This component is unaffected by any
502
This component is unaffected by any
sources or transformations
Transparency
Material properties are specified as RGBA
values
The A value can be used to make the surface
translucent
503
translucent
The default is that all surfaces are opaque
regardless of A
Later we will enable blending and use this
feature
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
Alt t l d th t t th
504
- 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)
85
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
i l t
505
is no specular component
Consider model of sphere
Want different normals at
each vertex even though
this concept is not quite
correct mathematically
Smooth Shading
We can set a new
normal at each vertex
Easy for sphere model
If centered at origin n= p
506
- If centered at origin n= p
Now smooth shading
works
Note silhouette edge
Mesh Shading
The previous example is not general
because we knew the normal at each
vertex analytically
For polygonal models Gouraud proposed
507
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
|
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
508
p p yg
Phong shading
- Find vertex normals
- Interpolate vertex normals across edges
- Interpolate edge normals across polygon
- Apply modified Phong model at each fragment
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
G d h di
509
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
/ / Ver t ex Shader
i n vec3 vNor mal ;
out vec4 col or ; / / ver t ex shade
510
/ / l i ght and mat er i al pr oper t i es
uni f or mvec4 Ambi ent Pr oduct , Di f f usePr oduct , Specul ar Pr oduct ;
uni f or mmat 4 Model Vi ew;
uni f or mmat 4 Pr oj ect i on;
uni f or mvec4 Li ght Posi t i on;
uni f or mf l oat Shi ni ness;
86
Vertex Lighting Shaders II
voi d
mai n( )
{
/ / t r ansf or mver t ex posi t i on i nt o eye coor di nat es
vec3 pos = ( Model Vi ew * vPosi t i on) . xyz;
511
vec3 L = nor mal i ze( Li ght Posi t i on. xyz - pos ) ;
vec3 E = nor mal i ze( - pos ) ;
vec3 H = nor mal i ze( L + E ) ;
/ / t r ansf or mver t ex nor mal i nt o eye coor di nat es
vec3 N = nor mal i ze( Model Vi ew*vec4( vNor mal , 0. 0) ) . xyz;
Vertex Lighting Shaders III
/ / comput e t er ms i n t he i l l umi nat i on equat i on
/ / ambi ent l i ght i ng t er m
vec4 ambi ent = Ambi ent Pr oduct ;
/ / di f f use l i ght i ng t er m
f l oat Kd = max( dot ( L, N) , 0. 0 ) ;
vec4 di f f use = Kd*Di f f usePr oduct ;
512
/ / specul ar l i ght i ng t er m
f l oat Ks = pow( max( dot ( N, H) , 0. 0) , Shi ni ness ) ;
vec4 specul ar = Ks * Specul ar Pr oduct ;
i f ( dot ( L, N) < 0. 0 ) specul ar = vec4( 0. 0, 0. 0, 0. 0, 1. 0) ;
/ / add l i ght i ng t er ms t o f or mcol or
col or = ambi ent + di f f use + specul ar ;
col or . a = 1. 0;
gl _Posi t i on = Pr oj ect i on * Model Vi ew * vPosi t i on;
}
Vertex Lighting Shaders IV
/ / Fr agment Shader
i n vec4 col or ;
voi d mai n( )
{
gl Fr agCol or = col or ;
513
gl _Fr agCol or col or ;
}
Fragment Lighting Shaders I
/ / Ver t ex Shader
i n vec3 vNor mal ;
/ / out put val ues t hat wi l l be i nt er pol at at ed per - f r agment
out vec3 f N;
514
out vec3 f N;
out vec3 f E;
out vec3 f L;
Fragment Lighting Shaders II
voi d mai n( )
{
f N = vNor mal ;
f E = vPosi t i on. xyz;
f L = Li ght Posi t i on. xyz;
515
i f ( Li ght Posi t i on. w ! = 0. 0 ) {
f L = Li ght Posi t i on. xyz - vPosi t i on. xyz;
}
gl _Posi t i on = Pr oj ect i on*Model Vi ew*vPosi t i on;
}
Fragment Lighting Shaders III
/ / Fr agment Shader
/ / per - f r agment i nt er pol at ed val ues f r omt he ver t ex shader
i n vec3 f N;
i n vec3 f L;
i n vec3 f E;
516
uni f or mvec4 Ambi ent Pr oduct , Di f f usePr oduct , Specul ar Pr oduct ;
uni f or mf l oat Shi ni ness;
voi d mai n( )
{
/ / nor mal i ze t he i nput l i ght i ng vect or s
vec3 N = nor mal i ze( f N) ;
vec3 E = nor mal i ze( f E) ;
vec3 L = nor mal i ze( f L) ;
87
Fragment Lighting Shaders IV
vec3 H = nor mal i ze( L + E ) ;
vec4 ambi ent = Ambi ent Pr oduct ;
f l oat Kd = max( dot ( L, N) , 0. 0) ;
vec4 di f f use = Kd*Di f f usePr oduct ;
f l oat Ks = pow( max( dot ( N H) 0 0) Shi ni ness) ;
517
f l oat Ks = pow( max( dot ( N, H) , 0. 0) , Shi ni ness) ;
vec4 specul ar = Ks*Specul ar Pr oduct ;
/ / di scar d t he specul ar hi ghl i ght i f t he l i ght
/ / i s behi nd t he ver t ex
i f ( dot ( L, N) < 0. 0 )
specul ar = vec4( 0. 0, 0. 0, 0. 0, 1. 0) ;
gl _Fr agCol or = ambi ent + di f f use + specul ar ;
gl _Fr agCol or . a = 1. 0;
}
Implementation of a Renderer I
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
521
- 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
Required Tasks
Clipping
Rasterization or scan conversion
Transformations
S t k d f d til f t
522
Some tasks deferred until fragement
processing
- Hidden surface removal
- Antialiasing
88
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
523
p j p
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
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
524
- image-oriented: loops over pixels
also known as sort-first
f or ( each_obj ect ) r ender ( obj ect ) ;
f or ( each_pi xel ) assi gn_a_col or ( pi xel ) ;
The Graphics Pipeline
A pipeline renderer fits the description of
an object-oriented graphics system.
525
- Today, the pipeline is often implemented in
hardware for maximum speed.
The Four Major Tasks in
Rendering
While rendering, we view the modeler as
a black box that produces vertices
526
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.
Implementation of
Transformations
The geometric processing stage of the
pipeline involves five coordinate systems:
527
Object (world) coordinates
Eye (camera) coordinates
Clip coordinates
Normalized device coordinates
Window (screen) coordinates
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
528
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.
89
Clipping
2D against clipping window
3D against clipping volume
Easy for line segments polygons
Hard for curves and text
529
- Convert to lines and polygons first
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
531
sides of the clipping window
x = x
max
x = x
min
y = y
max
y = y
min
The Cases
Case 1: both endpoints of line segment inside all
four lines
- Draw (accept) line segment as is
y = y
max
532
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
min
The Cases
Case 3: One endpoint inside, one outside
- Must do at least one intersection
Case 4: Both outside
- May have part inside
533
May have part inside
- Must do at least one intersection
x = x
max
x = x
min
y = y
max
Defining Outcodes
For each endpoint, define an outcode
b
0
b
1
b
2
b
3
b
0
= 1 if y > y
max
, 0 otherwise
1 f 0
534
Outcodes divide space into 9 regions
Computation of outcode requires at most
4 subtractions
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
90
Using Outcodes
Consider the 5 cases below
AB: outcode(A) = outcode(B) = 0
- Accept line segment
535
Using Outcodes
CD: outcode (C) = 0, outcode(D) = 0
- Compute intersection
- Location of 1 in outcode(D) determines which
edge to intersect with
536
- 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
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
537
g p g
of clipping window
- reject
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
538
one of sides of window
Compute outcode of intersection (new
endpoint of shortened line segment)
Reexecute algorithm
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
539
g
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
Cohen Sutherland in 3D
Use 6-bit outcodes
When needed, clip line segment against planes
540
91
Liang-Barsky Clipping
Consider the parametric form of a line segment
p(o) = (1-o)p
1
+ op
2
1 > o > 0
p
2
541
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
1
p
2
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
Intersect right, left, top, bottom: reject
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
543
algorithm recursively as with C S
Extends to 3D
Clipping and Normalization
General clipping in 3D requires
intersection of line segments against
arbitrary plane
Example: oblique view
544
Example: oblique view
Plane-Line Intersections
545
) (
) (
1 2
1
p p n
p p n
a
o
-
-
=
Normalized Form
before normalization after normalization
Top View
546
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
?
92
Implementation of a Renderer II
Objectives
Introduce clipping algorithms for polygons
Survey hidden-surface algorithms
548
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
549
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
550
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 pp g
551
Pipeline Clipping of Line Segments
Clipping against each side of window is
independent of other sides
- Can use four independent clippers in a pipeline
552
93
Pipeline Clipping of Polygons
Three dimensions: add front and back clippers
Strategy used in SGI Geometry Engine
Small increase in latency
553
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 pol gon encloses the polygon
- Simple to compute: max and min of x and y
554
Bounding boxes
Can usually determine accept/reject based
only on bounding box
reject
accept
requires detailed
clipping
555
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 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
556
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
557
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
558
94
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
559
A lies behind all other polygons
- Can render
Polygons overlap in z but not in either x or y
Easy Cases
Polygons overlap in z but not in either x or y
- Can render independently
560
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
561
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
562
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 Ray tracing
z-buffer
563
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
f h i l t d th i b ff of each pixel to depth in z buffer
If less, place shade of pixel in color buffer and
update z buffer
564
95
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
565
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 or one polygon
scan line j: need depth
information only when in
more than one polygon
566
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
567
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 p p
- Reduce traffic on bus
Partition space with Binary Spatial
Partition (BSP) Tree
568
Simple Example
consider 6 parallel polygons
top view
The plane of A separates B and C from D, E and F
569
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 Can put this information in a BSP tree
- Use for visibility and occlusion testing
570
96
Implementation of a Renderer III
Objectives
Survey Line Drawing Algorithms
- DDA
- Bresenhams Algorithm
Aliasing and Antialiasing
Aliasing and Antialiasing
572
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
573
Scan Conversion of Line Segments
Start with line segment in window
coordinates with integer values for
endpoints
Assume implementation has a
Assume implementation has a
wr i t e_pi xel function
y = mx + h
x
y
m
A
A
=
574
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
f or ( x=x1; x<=x2; i x++) {
y+=m;
wr i t e_pi xel ( x, r ound( y) , l i ne_col or )
}
575
Problem
DDA = for each x plot pixel at closest y
- Problems for steep lines
576
97
Using Symmetry
Use for 1 > m > 0
For m > 1, swap role of x and y
- For each y, plot closest x
577
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
y y y
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
578
Candidate Pixels
1 > m > 0
last pixel
candidates
Note that line could have
passed through any
part of this pixel
579
Decision Variable
d = Dx(b-a)
d is an integer
-
d s a tege
d > 0 use upper pixel
d < 0 use lower pixel
580
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 d 2(A A ) th i
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
581
Polygon Scan Conversion
Scan Conversion = Fill
How to tell inside from outside
- Convex easy
- Nonsimple difficult
Nonsimple difficult
- Odd even test
Count edge crossings
- Winding number
odd-even fill
582
98
Winding Number
Count clockwise encirclements of point
winding number = 1
Alternate definition of inside: inside if
winding number = 0
winding number = 2
583
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
584
Using Interpolation
C
1
C
1
C
2
C
3
specified by gl Col or 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
span
C
3
C
2
C
5
C
4
scan line
585
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)
f l ood_f i l l ( i nt x, i nt y) {
i f ( r ead_pi xel ( x, y) = = WHI TE) {
wr i t e_pi xel ( x, y, BLACK) ;
f l ood_f i l l ( x- 1, y) ;
f l ood_f i l l ( x+1, y) ;
f l ood_f i l l ( x, y+1) ;
f l ood_f i l l ( x, y- 1) ;
} }
586
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
587
Data Structure
588
99
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
Simple algorithms color only whole pixels
Leads to jaggies or aliased raster lines
589
Antialiasing by Area Averaging
Color multiple pixels for each x depending on
coverage by ideal line
original
antialiased
magnified
590
Polygon Aliasing
Aliasing problems can be serious for
polygons
- Jaggedness of edges
- Small polygons neglected
p yg g
- Need compositing so color
of one polygon does not
totally determine color of
pixel
All three polygons should contribute to color
591
Buffers
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
594
pixel
100
OpenGL Frame Buffer
595
OpenGL Buffers
Color buffers can be displayed
- Front
- Back
- Auxiliary
S
596
- Stereo
Depth
Stencil
- Holds masks
Most RGBA buffers 8 bits per component
Latest are floating point (IEEE)
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
597
The frame buffer is part of this memory
frame buffer
(destination)
writing into frame buffer
source
memory
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
600
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
101
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
601
Mapping, Lookups, Tests
- Reading pixels
Format conversion
Buffer Selection
OpenGL can read from any of the buffers
(front, back, depth)
Default to the back buffer
Change with gl ReadBuf f er
602
Change with gl ReadBuf f er
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
OpenGL Pixel Functions
gl ReadPi xel s( x, y, wi dt h, hei ght , f or mat , t ype, myi mage)
start pixel in frame buffer
size
type of image
type of pixels
pointer to processor
memory
603
memory
GLubyt e myi mage[ 512] [ 512] [ 3] ;
gl ReadPi xel s( 0, 0, 512, 512, GL_RGB,
GL_UNSI GNED_BYTE, myi mage) ;
Deprecated Functionality
glDrawPixels
glCopyPixels
glBitMap
R l b f t t f ti lit Replace by use of texture functionality,
glBltFrameBuffer, frame buffer objects
604
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) 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
605
Image Formats
We often work with images in a standard
format (JPEG, TIFF, GIF)
How do we read/write such images with
OpenGL?
606
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
102
Displaying a PPM Image
PPM is a very simple format
Each image file consists of a header
followed by all the pixel data
Header
607
Header
P3
# comment 1
# comment 2
.
#comment n
rows columns maxvalue
pixels
Reading the Header
FI LE *f d;
i nt k, nm;
char c;
i nt i ;
char b[ 100] ;
f l oat s;
check for P3
in first line
608
i nt r ed, gr een, bl ue;
pr i nt f ( " ent er f i l e name\ n") ;
scanf ( "%s", b) ;
f d = f open( b, " r " ) ;
f scanf ( f d, " %[ ^\ n] " , b) ;
i f ( b[ 0] ! =' P' | | b[ 1] ! = ' 3' ) {
pr i nt f ( " %s i s not a PPM f i l e! \ n", b) ;
exi t ( 0) ;
}
pr i nt f ( " %s i s a PPM f i l e\ n" , b) ;
in first line
Reading the Header (cont)
f scanf ( f d, " %c" , &c) ;
whi l e( c == ' #' )
{
f scanf ( f d, " %[ ^\ n] ", b) ;
609
( , [ ] , )
pr i nt f ( " %s\ n", b) ;
f scanf ( f d, " %c" , &c) ;
}
unget c( c, f d) ;
skip over comments by
looking for # in first column
Reading the Data
f scanf ( f d, " %d %d %d" , &n, &m, &k) ;
pr i nt f ( " %d r ows %d col umns max val ue= %d\ n", n, m, k) ;
nm= n*m;
i mage=mal l oc( 3*si zeof ( GLui nt ) *nm) ;
s=255 / k;
610
s=255. / k;
f or ( i =0; i <nm; i ++)
{
f scanf ( f d, " %d %d %d", &r ed, &gr een, &bl ue ) ;
i mage[ 3*nm- 3*i - 3] =r ed;
i mage[ 3*nm- 3*i - 2] =gr een;
i mage[ 3*nm- 3*i - 1] =bl ue;
}
scale factor
Texture Mapping
Objectives
Introduce Mapping Methods
- Texture Mapping
- Environment Mapping
- Bump Mapping
612
p pp g
Consider basic strategies
- Forward vs backward mapping
- Point sampling vs area averaging
103
The Limits of Geometric Modeling
Although graphics cards can render over
10 million polygons per second, that
number is insufficient for many phenomena
- Clouds
613
Clouds
- Grass
- Terrain
- Skin
Modeling an Orange
Consider the problem of modeling an orange
(the fruit)
Start with an orange-colored sphere
Too simple
614
- 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
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
615
Still might not be sufficient because
resulting surface will be smooth
- Need to change local shape
- Bump mapping
Three Types of Mapping
Texture Mapping
- Uses images to fill inside of polygons
Environment (reflection mapping)
- Uses a picture of the environment for texture
616
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
Texture Mapping
617
geometric model texture mapped
Environment Mapping
618
104
Bump Mapping
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
621
2D image
3D surface
Coordinate Systems
Parametric coordinates
- May be used to model curves and surfaces
Texture coordinates
Used to identify points in the image to be mapped
622
- 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
Texture Mapping
parametric coordinates
623
texture coordinates
world coordinates
window coordinates
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
624
pp
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)
105
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
t hi h i t i th t t it d
625
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
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
Example: map to cylinder
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.
627
z v/h
s = u
t = v
Maps from texture space
Spherical Map
We can use a parametric sphere
x = r cos 2tu
y = r sin 2tu cos 2tv
z = r sin 2tu sin 2tv
628
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
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
630
intermediate
actual
106
Aliasing
Point sampling of the texture can lead to
aliasing errors
point samples in u,v
(or x,y,z) space
miss blue stripes
631
point samples in texture space
Area Averaging
A better but slower option is to use area averaging
632
Note that preimage of pixel is curved
pixel
preimage
OpenGL Texture Mapping
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
635
enable texturing
2. assign texture coordinates to vertices
Proper mapping function is left to application
3. specify texture parameters
wrapping, filtering
Texture Mapping
x
y
z
636
s
t
x z
image
geometry display
107
Texture Example
The texture (below) is a
256 x 256 image that has
been mapped to a
rectangular polygon which
637
rectangular polygon which
is viewed in perspective
Texture Mapping and the
OpenGL Pipeline
Images and geometry flow through
separate pipelines that join during
fragment processing
- complex textures do not affect geometric
638
geometry pipeline vertices
pixel pipeline
image
fragmentpr
ocessor
p g
complexity
Define a texture image from an array of
texels (texture elements) in CPU memory
Gl ubyt e my_t exel s[ 512] [ 512] ;
Define as any other pixel map
Specifying a Texture Image
639
Define as any other pixel map
- Scanned image
- Generate by application code
Enable texture mapping
- gl Enabl e( GL_TEXTURE_2D)
- OpenGL supports 1-4 dimensional texture maps
Define Image as a Texture
gl TexI mage2D( t ar get , l evel , component s,
w, h, bor der , f or mat , t ype, t exel s ) ;
t ar get : type of texture, e.g. GL_TEXTURE_2D
l evel : used for mipmapping (discussed later)
component s: elements per texel
640
component s: elements per texel
w, h: width and height of t exel s in pixels
bor der : used for smoothing (discussed later)
f or mat and t ype: describe texels
t exel s: pointer to texel array
gl TexI mage2D( GL_TEXTURE_2D, 0, 3, 512, 512, 0,
GL_RGB, GL_UNSI GNED_BYTE, my_t exel s) ;
Based on parametric texture coordinates
gl TexCoor d*( ) specified at each vertex
Texture Space Object Space
Mapping a Texture
641
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
Typical Code
of f set = 0;
GLui nt vPosi t i on = gl Get At t r i bLocat i on( pr ogr am,
" vPosi t i on" ) ;
gl Enabl eVer t exAt t r i bAr r ay( vPosi t i on ) ;
gl Ver t exAt t r i bPoi nt er ( vPosi t i on, 4, GL_FLOAT,
GL FALSE, 0, BUFFER OFFSET( of f set ) ) ;
642
_ , , _ ( ) )
of f set += si zeof ( poi nt s) ;
GLui nt vTexCoor d = gl Get At t r i bLocat i on( pr ogr am,
" vTexCoor d" ) ;
gl Enabl eVer t exAt t r i bAr r ay( vTexCoor d ) ;
gl Ver t exAt t r i bPoi nt er ( vTexCoor d, 2, GL_FLOAT,
GL_FALSE, 0, BUFFER_OFFSET( of f set ) ) ;
108
Interpolation
OpenGL uses interpolation to find proper texels
from specified texture coordinates
Can be distortions
good selection poor selection
texture stretched
over trapezoid
showing effects of
643
good selection
of tex coordinates
poor selection
of tex coordinates
bilinear interpolation
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
644
- 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
Wrapping Mode
Clamping: if s,t > 1 use 1, if s,t <0 use 0
Wrapping: use s,t modulo 1
gl TexPar amet er i ( GL_TEXTURE_2D,
GL_TEXTURE_WRAP_S, GL_CLAMP )
gl TexPar amet er i ( GL TEXTURE 2D
645
gl TexPar amet er i ( GL_TEXTURE_2D,
GL_TEXTURE_WRAP_T, GL_REPEAT )
texture
s
t
GL_CLAMP
wrapping
GL_REPEAT
wrapping
Magnification and Minification
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
Texture Polygon
Magnification Minification
Polygon Texture
Filter Modes
Modes determined by
- gl TexPar amet er i ( t ar get , t ype, mode )
gl TexPar amet er i ( GL_TEXTURE_2D, GL_TEXURE_MAG_FI LTER,
GL NEAREST)
647
GL_NEAREST) ;
gl TexPar amet er i ( GL_TEXTURE_2D, GL_TEXURE_MI N_FI LTER,
GL_LI NEAR) ;
Note that linear filtering requires a border of an
extra texel for filtering at edges (border = 1)
Mipmapped Textures
Mipmapping allows for prefiltered texture
maps of decreasing resolutions
Lessens interpolation errors for smaller
textured objects
648
Declare mipmap level during texture definition
gl TexI mage2D( GL_TEXTURE_*D, l evel , )
109
Example
point
sampling
linear
filtering
649
mipmapped
point
sampling
mipmapped
linear
filtering
Texture Functions
Controls how texture is applied
gl TexEnv{f i }[ v] ( GL_TEXTURE_ENV, pr op,
par am)
GL_TEXTURE_ENV_MODE modes
650
- 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
Using Texture Objects
1. specify textures in texture objects
2. set texture filter
3. set texture function
4. set texture wrap mode
i l i i hi
651
5. set optional perspective correction hint
6. bind texture object
7. enable texturing
8. supply texture coordinates for vertex
- coordinates can also be generated
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
652
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
653
i n vec4 col or ; / / col or f r omr ast er i zer
i n vec2 t exCoor d; / / t exur e coor di nat e f r omr ast er i zer
uni f or msampl er 2D t ext ur e; / / t ext ur e obj ect f r omappl i cat i on
voi d mai n( ) {
gl _Fr agCol or = col or * t ext ur e2D( t ext ur e, t exCoor d ) ;
}
Usually vertex shader will output texture
coordinates to be rasterized
Must do all other standard tasks too
- Compute vertex position
Vertex Shader
- Compute vertex color if needed
654
i n vec4 vPosi t i on; / / ver t ex posi t i on i n obj ect coor di nat es
i n vec4 vCol or ; / / ver t ex col or f r omappl i cat i on
i n vec2 vTexCoor d; / / t ext ur e coor di nat e f r omappl i cat i on
out vec4 col or ; / / out put col or t o be i nt er pol at ed
out vec2 t exCoor d; / / out put t ex coor di nat e t o be i nt er pol at ed
110
Checkerboard Texture
GLubyt e i mage[ 64] [ 64] [ 3] ;
/ / Cr eat e a 64 x 64 checker boar d pat t er n
f or ( i nt i = 0; i < 64; i ++ ) {
f or ( i nt j = 0; j < 64; j ++ ) {
GLubyt e c ( ( ( i & 0x8) 0) ^( ( j & 0x8) 0) ) * 255;
655
GLubyt e c = ( ( ( i & 0x8) ==0) ^( ( j & 0x8) ==0) ) * 255;
i mage[ i ] [ j ] [ 0] = c;
i mage[ i ] [ j ] [ 1] = c;
i mage[ i ] [ j ] [ 2] = c;
Adding Texture Coordinates
voi d quad( i nt a, i nt b, i nt c, i nt d )
{
quad_col or s[ I ndex] = col or s[ a] ;
poi nt s[ I ndex] = ver t i ces[ a] ;
t ex_coor ds[ I ndex] = vec2( 0. 0, 0. 0 ) ;
I ndex++;
quad_col or s[ I ndex] = col or s[ a] ;
656
poi nt s[ I ndex] = ver t i ces[ b] ;
t ex_coor ds[ I ndex] = vec2( 0. 0, 1. 0 ) ;
I ndex++;
/ / ot her ver t i ces
}
Texture Object
GLui nt t ext ur es[ 1] ;
gl GenText ur es( 1, t ext ur es ) ;
gl Bi ndText ur e( GL_TEXTURE_2D, t ext ur es[ 0] ) ;
gl TexI mage2D( GL_TEXTURE_2D, 0, GL_RGB, Text ur eSi ze,
Text ur eSi ze, 0, GL_RGB, GL_UNSI GNED_BYTE, i mage ) ;
gl TexPar amet er f ( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT) ;
657
gl TexPar amet er f ( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT) ;
gl TexPar amet er f ( GL_TEXTURE_2D, GL_TEXTURE_MAG_FI LTER,
GL_NEAREST) ;
gl TexPar amet er f ( GL_TEXTURE_2D, GL_TEXTURE_MI N_FI LTER,
GL_NEAREST ) ;
gl Act i veText ur e( GL_TEXTURE0) ;
Linking with Shaders
GLui nt vTexCoor d = gl Get At t r i bLocat i on( pr ogr am, " vTexCoor d" ) ;
gl Enabl eVer t exAt t r i bAr r ay( vTexCoor d ) ;
gl Ver t exAt t r i bPoi nt er ( vTexCoor d, 2, GL_FLOAT, GL_FALSE, 0,
BUFFER_OFFSET( of f set ) ) ;
/ / Set t he val ue of t he f r agment shader t ext ur e sampl er var i abl e
/ / ( " t e t r e") t o t he t he appr opr i at e t e t r e ni t I n t hi s case
658
/ / ( " t ext ur e") t o t he t he appr opr i at e t ext ur e uni t . I n t hi s case,
/ / zer o, f or GL_TEXTURE0 whi ch was pr evi ousl y set by cal l i ng
/ / gl Act i veText ur e( ) .
gl Uni f or m1i ( gl Get Uni f or mLocat i on( pr ogr am, "t ext ur e" ) , 0 ) ;
Environment Mapping
Introduction
Environment mapping is way to create
the appearance of highly reflective
surfaces without ray tracing which
requires global calculations
660
requires global calculations
Examples: The Abyss, Terminator 2
Is a form of texture mapping
- Supported by OpenGL and Cg
111
Example
661
Reflecting the Environment
V
N
662
R
Mapping to a Sphere
V
N
663
R
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
664
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
Issues
Must assume environment is very far from
object (equivalent to the difference
between near and distant lights)
Object cannot be concave (no self
665
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
OpenGL Implementation
OpenGL supports spherical and cube maps
First must form map
- Use images from a real camera
- Form images with OpenGL
666
Form images with OpenGL
Texture map it to object
112
Cube Map
667
Forming Cube Map
Use six cameras, each with a 90 degree
angle of view
668
Indexing into Cube Map
V
Compute R = 2(NV)N-V
Object at origin
Use largest magnitude
669
V
R
Use largest magnitude
component of R to determine
face of cube
Other two components give
texture coordinates
Example
R = (-4, 3, -1)
Same as R = (-1, 0.75, -0.25)
Use face x = -1 and y = 0.75, z = -0.25
N t it i ht i b d fi d b
670
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
Doing it in OpenGL
gl Text ur eMap2D( GL_TEXTURE_CUBE_MAP_POSI TI VE_X,
l evel , r ows, col umns, bor der , GL_RGBA,
GL_UNSI GNED_BYTE, i mage1)
Same for the other five images
Make one texture object out of the six images
671
Make one texture object out of the six images
Parameters apply to all six images
gl TexPar amet er i ( 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)
/ / col or s f or si des of cube
GLubyt e r ed [ 3] = {255, 0, 0 };
GLubyt e gr een [ 3] = {0, 255, 0 };
GLubyt e bl ue [ 3] = {0, 0, 255};
GLubyt e cyan [ 3] = {0, 255, 255};
GLubyt e magent a[ 3] = {255, 0, 255};
GLubyt e yel l ow [ 3] = {255, 255, 0 };
672
y y [ ] { , , };
/ / enabl e cube mappi ng
gl Enabl e( GL_TEXTURE_CUBE_MAP) ;
/ / t ext ur e obj ect
gl GenText ur es( 1, t ex) ;
gl Act i veText ur e( GL_TEXTURE1) ;
gl Bi ndText ur e( GL_TEXTURE_CUBE_MAP, t ex[ 0] ) ;
113
Cube Map Example (init II)
gl TexI mage2D( GL_TEXTURE_CUBE_MAP_POSI TI VE_X ,
0, 3, 1, 1, 0, GL_RGB, GL_UNSI GNED_BYTE, r ed) ;
gl TexI mage2D( GL_TEXTURE_CUBE_MAP_NEGATI VE_X ,
0, 3, 1, 1, 0, GL_RGB, GL_UNSI GNED_BYTE, gr een) ;
gl TexI mage2D( GL_TEXTURE_CUBE_MAP_POSI TI VE_Y ,
0, 3, 1, 1, 0, GL_RGB, GL_UNSI GNED_BYTE, bl ue) ;
gl TexI mage2D( GL_TEXTURE_CUBE_MAP_NEGATI VE_Y ,
673
0, 3, 1, 1, 0, GL_RGB, GL_UNSI GNED_BYTE, cyan) ;
gl TexI mage2D( GL_TEXTURE_CUBE_MAP_POSI TI VE_Z ,
0, 3, 1, 1, 0, GL_RGB, GL_UNSI GNED_BYTE, magent a) ;
gl TexI mage2D( GL_TEXTURE_CUBE_MAP_NEGATI VE_Z ,
0, 3, 1, 1, 0, GL_RGB, GL_UNSI GNED_BYTE, yel l ow) ;
gl TexPar amet er i ( GL_TEXTURE_CUBE_MAP,
GL_TEXTURE_MAG_FI LTER, GL_NEAREST) ;
Cube Map Example (init III)
GLui nt t exMapLocat i on;
GLui nt t ex[ 1] ;
t exMapLocat i on = gl Get Uni f or mLocat i on( pr ogr am, "t exMap") ;
gl Uni f or m1i ( t exMapLocat i on, t ex[ 0] ) ;
674
Adding Normals
voi d quad( i nt a, i nt b, i nt c, i nt d)
{
f l oat nor mal ;
nor mal = nor mal i ze( cr oss( ver t i ces[ b] - ver t i ces[ a] ,
675
nor mal nor mal i ze( cr oss( ver t i ces[ b] ver t i ces[ a] ,
ver t i ces[ c] - ver t i ces[ b] ) ) ;
nor mal s[ i ] = nor mal ;
poi nt s [ i ] = ver t i ces[ a] ;
i ++;
/ / r est of dat a
}
Vertex Shader
out vec3 R;
i n vec4 Nor mal ;
voi d mai n( ) {
676
vec4 eyePos = vPosi t i on;
vec4 NN = Model Vi ew*Nor mal ;
vec3 N = nor mal i ze( NN. xyz) ;
R = r ef l ect ( eyePos. xyz, N) ;
}
Fragment Shader
i n vec3 R;
uni f or msampl er Cube t exMap;
voi d mai n( )
{
vec4 t exCol or = t ext ur eCube( t exMap, R) ;
677
vec4 t exCol or t ext ur eCube( t exMap, R) ;
gl _Fr agCol or = t exCol or ;
}
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
678
p
OpenGL supports sphere mapping which
requires a circular texture map equivalent to
an image taken with a fisheye lens
114
Sphere Map
679
vs Cube Image
680
Reflection Map
681
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 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))
682
Shader Applications
Objectives
Shader Applications
Texture Mapping Applications
Reflection Maps
B M
684
Bump Maps
115
Moving vertices
- Morphing
- Wave motion
- Fractals
685
Lighting
- Cartoon shaders
Wave Motion Vertex Shader
uni f or mf l oat t i me;
uni f or mf l oat xs, zs, / / f r equenci es
uni f or mf l oat h; / / hei ght scal e
uni f or mmat 4 Model Vi ew, Pr oj ect i on;
voi d mai n( ) {
686
voi d mai n( ) {
vec4 t =vPosi t i on;
t . y = vPosi t i on. y
+ h*si n( t i me + xs*vPosi t i on. x)
+ h*si n( t i me + zs*vPosi t i on. z) ;
gl _Posi t i on = Pr oj ect i on*Model Vi ew*t ;
}
Particle System
uni f or mvec3 i ni t _vel ;
uni f or mf l oat g, m, t ;
uni f or mmat 4 Pr oj ect i on, Model Vi ew;
i n vPosi t i on;
voi d mai n( ) {
vec3 obj ect _pos;
obj ect _pos. x = vPosi t i on. x + vel . x*t ;
obj ect _pos. y = vPosi t i on. y + vel . y*t
+ g/ ( 2. 0*m) *t *t ;
obj ect _pos. z = vPosi t i on. z + vel . z*t ;
gl _Posi t i on = Pr oj ect i on*
Model Vi ew*vec4( obj ect _pos, 1) ;
}
687
Texture mapping
688
mapping
bump mapping
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
689
Supported by OpenGL
Also supported in GLSL through cubemap
sampler
vec4 texColor = textureCube(mycube, texcoord);
Texture coordinates must be 3D
Environment Map
Use reflection vector to locate texture in
cube map
690
116
Environment Maps with Shaders
Environment map usually computed in
world coordinates which can differ from
object coordinates because of modeling
matrix
691
- 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)
Reflection Map Vertex Shader
uni f or mmat 4 Pr oj ect i on, Model Vi ew, Nor mal Mat r i x;
i n vec4 nor mal ;
out vec3 R;
692
voi d mai n( voi d)
{
vec3 N = nor mal i ze( Nor mal Mat r i x*nor mal ) ;
vec4 eyePos = Model Vi ew*gvPosi t i on;
R = r ef l ect ( - eyePos. xyz, N) ;
}
Reflection Map Fragment Shader
i n vec3 R;
uni f or msampl er Cube t exMap;
voi d mai n( voi d)
{
gl Fr agCol or = t ext ur eCube( t exMap R) ;
693
gl _Fr agCol or = t ext ur eCube( t exMap, R) ;
}
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
695
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
Introduction
Lets consider an example for which a
fragment program might make sense
Mapping methods
- Texture mapping
696
Texture mapping
- Environmental (reflection) mapping
Variant of texture mapping
- Bump mapping
Solves flatness problem of texture mapping
117
Modeling an Orange
Consider modeling an orange
Texture map a photo of an orange onto a
surface
- Captures dimples
697
- 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
Bump Mapping (Blinn)
Consider a smooth surface
n
698
p
Rougher Version
n
p
699
p
Equations
p =[ x/ u y/ u z/ u]
T
p(u,v) = [x(u,v), y(u,v), z(u,v)]
T
700
p
u
=[ x/ u, y/ u, z/ u]
p
v
=[ x/ v, y/ v, z/ v]
T
n = (p
u
p
v
) / | p
u
p
v
|
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
702
|d(u,v)| << 1
118
Perturbed Normal
n = p
u
p
v
p
u
= p
u
+ (d/u)n + d(u,v)n
u
703
u u u
p
v
= p
v
+ (d/v)n + d(u,v)n
v
If d is small, we can neglect last term
Approximating the Normal
n = p
u
p
v
n + (d/u)n p
v
+ (d/v)n p
u
704
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
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
d d/ d d
705
and d/ v d
ij
d
i,j-1
Embossing: multipass approach using
floating point buffer
Example
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)
707
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
119
Objectives
Learn to use the A component in RGBA
color for
- Blending for translucent surfaces
- Compositing images
709
p g g
- Antialiasing
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)
710
y p y ( )
opaque surface o =1
Physical Models
Dealing with translucency in a physically correct
manner is difficult due to
- the complexity of the internal interactions of
light and matter
711
- Using a pipeline renderer
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
blend
712
Color Buffer
destination
component
blend
destination blending
factor
source blending factor
source
component
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
]
713
[
r
,
g
,
b
,
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
]
OpenGL Blending and Compositing
Must enable blending and pick source and
destination factors
gl Enabl e( GL_BLEND)
gl Bl endFunc( sour ce_f act or ,
714
dest i nat i on_f act or )
Only certain factors supported
- GL_ZERO, GL_ONE
- GL_SRC_ALPHA, GL_ONE_MI NUS_SRC_ALPHA
- GL_DST_ALPHA, GL_ONE_MI NUS_DST_ALPHA
- See Redbook for complete list
120
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
715
p yg
color (R
1
,G
1
,B
1
,o
1
)
Select GL_SRC_ALPHA and GL_ONE_MI NUS_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
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
716
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
Order Dependency
Is this image correct?
- Probably not
- Polygons are rendered
in the order they pass
717
y p
down the pipeline
- Blending functions
are order dependent
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
718
them and affect the depth buffer
Translucent polygons should not affect depth
buffer
- Render with gl Dept hMask( GL_FALSE) which makes
depth buffer read-only
Sort polygons first to remove order dependency
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
719
C
s
=f C
s
+ (1-f) C
f
f is the fog factor
- Exponential
- Gaussian
- Linear (depth cueing)
Deprecated but can recreate
Fog Functions
720
121
Line Aliasing
Ideal raster line is one pixel wide
All line segments, other than vertical and
horizontal segments, partially cover pixels
Simple algorithms color
721
Simple algorithms color
only whole pixels
Lead to the jaggies
or aliasing
Similar issue for polygons
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
722
- Fraction depends on whether there is overlap
no overlap overlap
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
gl Enabl e( GL POI NT SMOOTH) ;
724
g ( _ _ )
gl Enabl e( GL_LI NE_SMOOTH) ;
gl Enabl e( GL_POLYGON_SMOOTH) ;
gl Enabl e( GL_BLEND) ;
gl Bl endFunc( GL_SRC_ALPHA, GL_ONE_MI NUS_SRC_ALPHA) ;
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
725
g
(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
Applications
Compositing
Image Filtering (convolution)
Whole scene antialiasing
D th f Fi ld
726
Depth of Field
Motion effects
122
Hierarchical Modeling I
Prof. George Wolberg
Objectives
Examine the limitations of linear modeling
- Symbols and instances
Introduce hierarchical models
- Articulated models
728
Articulated models
- Robots
Introduce Tree and DAG models
Instance Transformation
Start with a prototype object (a symbol)
Each appearance of the object in the
model is an instance
Must scale orient position
729
- Must scale, orient, position
- Defines instance transformation
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
731
- Two symbols
Rate of forward motion determined by
rotational speed of wheels
Structure Through Function Calls
car ( speed)
{
chassi s( )
wheel ( r i ght _f r ont ) ;
wheel ( l ef t _f r ont ) ;
732
wheel ( r i ght _r ear ) ;
wheel ( l ef t _r ear ) ;
}
Fails to show relationships well
Look at problem using a graph
123
A graph consists of a set of nodes (vertices)
and a set of edges (links)
Edge connects a pair of nodes
- Directed or undirected
Graph Representation
Cycle: directed path that is a loop
733
loop
A tree is a directed graph with no cycles.
Each node (except the root) has exactly
one parent node
- May have multiple children
Tree
May have multiple children
- Leaf or terminal node: no children
734
root node
leaf node
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.
N h diff h d li i h
736
- Not much different than dealing with a tree
Modeling with Trees
Must decide what information to place in
nodes and what to put in edges
Nodes
- What to draw
737
What to draw
- Pointers to children
Edges
- May have information on incremental changes
to transformation matrices (can also store in
nodes)
Robot Arm
738
robot arm
parts in their own
coodinate systems
124
Articulated Models
Robot arm is an example of an articulated
model
- Parts connected at joints
- Can specify state of model by
739
Can specify state of model by
giving all joint angles
Relationships in Robot Arm
Base rotates independently
- Single angle determines position
Lower arm attached to base
- Its position depends on rotation of base
740
p p
- 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
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
741
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
OpenGL Code for Robot
mat 4 ct m;
r obot _ar m( )
{
ct m= Rot at eY( t het a) ;
base( ) ;
742
ct m*= Tr ansl at e( 0. 0, h1, 0. 0) ;
ct m*= Rot at eZ( phi ) ;
l ower _ar m( ) ;
ct m*= Tr ansl at e( 0. 0, h2, 0. 0) ;
ct m*= Rot at eZ( psi ) ;
upper _ar m( ) ;
}
Tree Model of Robot
Note code shows relationships between
parts of model
- Can change look of parts easily without
altering relationships
743
Simple example of tree model
Want a general node structure
for nodes
Possible Node Structure
Code for drawing part or
pointer to drawing function
744
linked list of pointers to children
matrix relating node to parent
125
Generalizations
Need to deal with multiple children
- How do we represent a more general tree?
- How do we traverse such a data structure?
Animation
745
Animation
- How to use dynamically?
- Can we create and delete nodes during
execution?
Hierarchical Modeling II
Objectives
Build a tree-structured model of a
humanoid figure
Examine various traversal strategies
Build a generalized tree model structure
747
Build a generalized tree-model structure
that is independent of the particular model
Humanoid Figure
748
Building the Model
Can build a simple implementation using
quadrics: ellipsoids and cylinders
Access parts through functions
- t or so( )
749
t or so( )
- l ef t _upper _ar m( )
Matrices describe position of node with
respect to its parent
- M
lla
positions left lower leg with respect to left
upper arm
Tree with Matrices
750
126
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
751
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
Transformation Matrices
There are 10 relevant matrices
- M positions and orients entire figure through
the torso which is the root node
- M
h
positions head with respect to torso
752
- 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
Stack-based Traversal
Set model-view matrix to M and draw torso
Set model-view matrix to MM
h
and draw
head
For left pper arm need MM and so on
753
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
Traversal Code
f i gur e( ) {
PushMat r i x( )
t or so( ) ;
Rot at e ( ) ;
head( ) ;
save present model-view matrix
update model-view matrix for head
recover original model-view matrix
754
PopMat r i x( ) ;
PushMat r i x( ) ;
Tr ansl at e( ) ;
Rot at e( ) ;
l ef t _upper _ar m( ) ;
PopMat r i x( ) ;
PushMat r i x( ) ;
g
save it again
update model-view matrix
for left upper arm
recover and save original
model-view matrix again
rest of code
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
755
Note that the sample code does not
include state changes, such as changes
to colors
- May also want to use a PushAt t r i b and
PopAt t r i b to protect against unexpected
state changes affecting later parts of the code
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
756
structure
- Uses linked lists
- Each node in data structure is two pointers
- Left: next node
- Right: linked list of children
127
Left-Child Right-Sibling Tree
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
758
j
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
C Definition of treenode
t ypedef st r uct t r eenode
{
mat 4 m;
i d ( *f ) ( )
759
voi d ( *f ) ( ) ;
st r uct t r eenode *si bl i ng;
st r uct t r eenode *chi l d;
} t r eenode;
Torso and head nodes
t r eenode t or so_node, head_node, l ua_node, ;
t or so_node. m= Rot at eY( t het a[ 0] ) ;
t or so_node. f = t or so;
t or so_node. si bl i ng = NULL;
760
t or so_node. chi l d = &head_node;
head_node. m= t r ansl at e( 0. 0,
TORSO_HEI GHT+0. 5*HEAD_HEI GHT,
0. 0) *Rot at eX( t het a[ 1] ) *Rot at eY( t het a[ 2] ) ;
head_node. f = head;
head_node. si bl i ng = &l ua_node;
head_node. chi l d = NULL;
Notes
The position of figure is determined by 11 joint
angles stored in t het a[ 11]
Animate by changing the angles and
redisplaying
761
We form the required matrices using Rot at e
and Tr ansl at e
- 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
Preorder Traversal
voi d t r aver se( t r eenode* r oot )
{
i f ( r oot ==NULL) r et ur n;
mvst ack. push( model _vi ew) ;
model _vi ew = model _vi ew*r oot - >m;
762
_ _
r oot - >f ( ) ;
i f ( r oot - >chi l d! =NULL)
t r aver se( r oot - >chi l d) ;
model _vi ew = mvst ack. pop( ) ;
i f ( r oot - >si bl i ng! =NULL)
t r aver se( r oot - >si bl i ng) ;
}
128
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
Th t l li t l ft
763
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
Dynamic Trees
If we use pointers, the structure can be dynamic
t ypedef t r eenode *t r ee_pt r ;
t r ee_pt r t or so_pt r ;
764
t or so_pt r = mal l oc( si zeof ( t r eenode) ) ;
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
Objectives
Introduce graphical objects
Generalize the notion of objects to include
lights, cameras, attributes
Introduce scene graphs
766
Introduce scene graphs
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
767
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
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
768
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
129
Imperative Programming
Model
Example: rotate a cube
Application Rotate
cube data
769
The rotation function must know how the
cube is represented
- Vertex list
- Edge list
results
Object-Oriented
Programming Model
Application Cube Object
In this model, the representation is stored with
the object
770
The application sends a message to the object
The object contains functions (methods) which
allow it to transform itself
message
C/C++
Can try to use C structs to build objects
C++ provides better support
- Use class construct
- Can hide implementation using public private
771
Can hide implementation using public, private,
and protected members in a class
- Can also use friend designation to allow
classes to access each other
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
772
code such as
cube mycube;
mycube. col or [ 0] =1. 0;
mycube. col or [ 1] = mycube. col or [ 2] =0. 0;
mycube. mat r i x[ 0] [ 0] =
Cube Object Functions
We would also like to have functions that
act on the cube such as
- mycube. t r ansl at e( 1. 0, 0. 0, 0. 0) ;
- mycube. r ot at e( t het a, 1. 0, 0. 0, 0. 0) ;
773
mycube. r ot at e( t het a, 1. 0, 0. 0, 0. 0) ;
- set col or ( mycube, 1. 0, 0. 0, 0. 0) ;
We also need a way of displaying the cube
- mycube. r ender ( ) ;
Building the Cube Object
cl ass cube {
publ i c:
f l oat col or [ 3] ;
f l oat mat r i x[ 4] [ 4] ;
/ / publ i c met hods
774
/ / publ i c met hods
pr i vat e:
/ / i mpl ement at i on
}
130
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
775
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
Other Objects
Other objects have geometric aspects
- Cameras
- Light sources
But we should be able to have
776
But we should be able to have
nongeometric objects too
- Materials
- Colors
- Transformations (matrices)
Application Code
cube mycube;
mat er i al pl ast i c;
mycube. set Mat er i al ( pl ast i c) ;
777
camer a f r ont Vi ew;
f r ont Vi ew. posi t i on( x , y, z) ;
Light Object
cl ass l i ght { / / mat ch Phong model
publ i c:
bool ean t ype; / / or t ho or per spect i ve
bool ean near ;
778
f l oat posi t i on[ 3] ;
f l oat or i ent at i on[ 3] ;
f l oat specul ar [ 3] ;
f l oat di f f use[ 3] ;
f l oat ambi ent [ 3] ;
}
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
779
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
Scene Graph
780
131
Preorder Traversal
PushAt t r i b
PushMat r i x
Col or
Tr ansl at e
Rot at e
781
Rot at e
Obj ect 1
Tr ansl at e
Obj ect 2
PopMat r i x
PopAt t r i b
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
782
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
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
783
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)
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
784
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 pass that sorts the geometry
First two passes yield a geometry list that
is rendered by the pipeline in a third pass
785
Curves and Surfaces
132
Objectives
Introduce types of curves and surfaces
- Explicit
- Implicit
- Parametric
787
- Strengths and weaknesses
Discuss Modeling and Approximations
- Conditions
- Stability
Escaping Flatland
Until now we have worked with flat entities
such as lines and flat polygons
- Fit well with graphics hardware
- Mathematically simple
788
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
Modeling with Curves
789
data points
approximating curve
interpolating data point
What Makes a Good Representation?
There are many ways to represent curves and
surfaces
Want a representation that is
- Stable
790
Stable
- Smooth
- Easy to evaluate
- Must we interpolate or can we just come close to data?
- Do we need derivatives?
Representation of Curves & Surfaces
Three types of object representation:
- explicit:
- implicit:
). (x f y=
. 0 ) , ( = y x f
791
p
- parametric: . )] ( ) ( ) ( [ ) (
T
u z u y u x u = p
) , ( y f
Explicit Representation
Most familiar form of curve in 2D
y=f(x)
Cannot represent all curves
- Vertical lines
y
792
Vertical lines
- Circles
Extension to 3D
- y=f(x), z=g(x)
- The form z = f(x,y) defines a surface
x
x
y
z
133
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.
). (x f y=
793
- 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 + =
Explicit Representation of Circles
A circle has constant curvature.
- An explicit form exists only for half of the curve:
.
2 2
x r y =
794
- 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 =
Explicit Surfaces
A surface requires two independent
variables and two equations:
, b ax y + =
795
- 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 + =
). , ( y x f z=
Implicit Representation
An implicit curve has the form
Much more robust
A line: ax + by + c = 0
. 0 ) , ( = y x f
796
- 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.
Implicit Surfaces
In three dimensions, a surface is described by
the implicit form
- A plane: ax + by + cz + d = 0
. 0 ) , , ( = z y x f
797
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.
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.
798
- 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
134
Parametric Form
Expresses the value of each spatial
component in terms of an independent
variable u, the parameter:
) ( ) ( ) ( u z z u y y u x x
799
- 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 = = =
Separate equation for each spatial variable
x=x(u)
y=y(u)
z=z(u)
Parametric Curves
Matrix notation:
p(u)=[x(u), y(u), z(u)]
T
( )
The parametric form describes the locus of points
being drawn as u varies: u
min
u u
max
800
p(u)
p(u
min
)
p(u
max
)
Derivative of the Curve
The derivative is the velocity with which
the curve is traced out:
) (
) (
(
(
du u dx
u dp
801
- It points in the direction tangent to the curve.
.
) (
) (
) (
(
(
(
=
du u dz
du u dy
du
u dp
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(1)= p
1
802
p(0) = p
0
Ray from p
0
in the direction d
p(u)=p
0
+ud
p(0) = p
0
p(1)= p
0
+d
d
Parametric Surfaces
Surfaces require 2 parameters
x=x(u,v)
y=y(u,v)
z=z(u,v)
( ) ( ) ( ) ( )
T
x
y
p(1,v)
p(0,v)
p(u,1)
803
p(u,v) = [x(u,v), y(u,v), z(u,v)]
T
Want same properties as curves:
- Smoothness
- Differentiability
- Ease of evaluation
x
z p(u,0)
Normals
We can differentiate with respect to u and v to
obtain the normal at any point p
(
(
c c
c c
c
u v u
v u
/ ) (
/ ) , ( x
) , ( p
(
(
(
c c
c c
=
c
v v u
v v u
v u
/ ) ( y
/ ) , ( x
) , ( p
804
(
(
(
c c
c c =
c
u v u
u v u
u
/ ) , ( z
/ ) , ( y
) , ( p
(
(
c c
c c =
c
v v u
v v u
v
/ ) , ( z
/ ) , ( y
v
v u
u
v u
c
c
c
c
=
) , ( ) , ( p p
n
135
Parametric Planes
Point-Vector form
p(u,v)=p
0
+uq+vr
n = q x r q
r
n
805
n q x r q
p
0
Three-point form
p
0
n
p
1
p
2
q = p
1
p
0
r = p
2
p
0
Parametric Sphere
x(u,v) = r cos q sin f
y(u,v) = r sin q sin f
z(u,v) = r cos f
806
360 > q > 0
180 > f > 0
u constant: circles of constant longitude
f constant: circles of constant latitude
differentiate to show n = p
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
807
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)
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
808
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
Why Polynomials
Easy to evaluate
Continuous and differentiable everywhere
- Must worry about continuity at join points
including continuity of derivatives
809
g y
p(u)
q(u)
join point p(1) = q(0)
but p(1) = q(0)
Cubic Parametric Polynomials
N=M=L=3, gives balance between ease of
evaluation and flexibility in design
F ffi i t t d t i f h f d
u c
u
k
k
k
=
=
3
0
) ( p
810
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
136
Cubic Polynomial Surfaces
v u c
v u
j i
ij
=
3 3
) ( p
p(u,v)=[x(u,v), y(u,v), z(u,v)]
T
where
811
v u c
v u
i j
ij
= =
=
0 0
) , ( p
p is any of x, y or z
Need 48 coefficients (3 independent sets of 16) to
determine a surface patch
Parametric Polynomial Surfaces

= =
=
n
i
m
j
j i
ij
v u c v u
0 0
) , ( p
In general,
812
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.
Designing Parametric Cubic Curves
Objectives
Introduce the types of curves
- Interpolating
- Hermite
- Bezier
814
- B-Spline
Analyze their performance
Design Criteria
Why we prefer parametric polynomials of
low degree:
- Local control of shape,
- Smoothness and continuity,
815
y,
- Ability to evaluate derivatives,
- Stability,
- Ease of rendering.
Smoothness
Smoothness guaranteed because our
polynomial equations are differentiable.
Difficulties arise at the join points.
816
137
Control Points
We prefer local control for stability.
- The most common interface is a group of
control points.
817
- In this example, the curve passes through, or
interpolates, some of the control points, but
only comes close to, or approximates, others.
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.
818
The compromise: use low-degree curves
over short intervals.
- Most designers work with cubic polynomial
curves.
Matrix Notation
=
= =
3
0
, ) (
k
T k
k
u u c u c p
where
the coefficient
matrix to be
control
points
819
,
3
2
1
0
(
(
(
(
=
c
c
c
c
c ,
1
3
2
(
(
(
(
=
u
u
u
u .
(
(
(
=
kz
ky
kx
k
c
c
c
c
matrix to be
determined
points
Interpolation
An interpolating polynomial passes
through its control points.
- Suppose we have four controls points
(
x
k
820
- 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
Evaluating the Control
Points
We seek coefficients c
0
, c
1
, c
2
, c
3
satisfying the four conditions:
, ) 0 (
0 0
c p p = =
821
. ) 1 (
, ) 3 2 ( ) 3 2 ( 3 2 ) 3 2 (
, ) 3 1 ( ) 3 1 ( 3 1 ) 3 1 (
3 2 1 0 3
3
3
2
2
1 0 2
3
3
2
2
1 0 1
c c c c p p
c c c c p p
c c c c p p
+ + + = =
+ + + = =
+ + + = =
Matrix Notation
In matrix notation
, Ac p=
(
(
(
1
0
p
p
) 3 1 ( ) 3 1 ( 3 1 1
0 0 0 1
3 2
(
(
(
where
822
(
(
(
=
3
2
1
p
p
p
p .
1 1 1 1
) 3 2 ( ) 3 2 ( 3 2 1
) 3 1 ( ) 3 1 ( 3 1 1
3 2
(
(
(
= A and
a column vector
of row vectors
nonsingular: we
will use its inverse
138
Interpolating Geometry Matrix
(
(
(
(

= =

5 . 4 18 5 . 22 9
1 5 . 4 9 5 . 5
0 0 0 1
1
A M
I
823
The desired coefficients are
(
(
5 . 4 5 . 13 5 . 13 5 . 4
. p M c
I
=
Interpolating Multiple Segments
Use the last control point of one segment
as the first control point of the next
segment.
824
- To achieve smoothness in addition to
continuity, we will need additional constraints
on the derivatives.
Blending Functions
Substituting the interpolating coefficients
into our polynomial:
Let
. ) ( p M u c u p
I
T T
u = =
825
Let
The b(u) are the blending polynomials.
, ) ( ) ( p b p
T
u u = . ) ( u M b
T
I
u = where
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 3
827

= =
=
3
0
3
0
. ) , (
i j
ij
j i
v u v u c p
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
, ) , ( Cv u p
T
v u =
828
C is a 4 x 4 matrix of column vectors.
16 equations in 16 unknowns.
139
Solving the Surface Equations
By setting v = 0, 1/3, 2/3, 1 we can
sample the surface using curves in u:
.
T T
I
T
CA u P M u =
829
- The coefficient matrix C is computed by
- The equation for the surface becomes
.
T
I I
PM M C =
. ) , ( v PM M u p
T
I I
T
v u =
Blending Patches
Extending our use of blending
polynomials to surfaces:
=
3
0
3
0
. ) ( ) ( ) , (
i j
ij j i
v b u b v u p p
830
- 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.
= = 0 0 i j
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
831
j p
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
Hermite Form
p(0)
p(1)
832
p(0) p(1)
Use two interpolating conditions and
two derivative conditions per segment
Ensures continuity and first derivative
continuity between segments
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
.
833
. ) 1 (
, ) 0 (
3 2 1 0 3
0 0
c c c c p p
c p p
+ + + = =
= =
Additional Conditions
The derivative is a quadratic polynomial:
. 3 2 ) (
3
2
2 1
c c c p u u du dy
du dx
u + + =
(
(
(
= '
834
- We now can derive two additional conditions:
du dz (
(
. 3 2 ) 1 (
, ) 0 (
3 2 1 3
1 0
c c c p p
c p p
+ + = ' = '
= ' = '
140
Matrix Form
.
0 0 1 0
1 1 1 1
0 0 0 1
0
3
0
c
p
p
p
(
(
(
(
(
=
(
(
(
(
(
'
call this q
835
The desired coefficient matrix is
- M
H
is the Hermite geometry matrix.
. q M c
H
=
2 2 1 0
3
0
p
(
'
call this q
The Hermite Geometry Matrix
.
1 2 3 3
0 1 0 0
0 0 0 1
(
(
(
(
(

=
H
M
836
The resulting polynomial is
1 1 2 2
(

. ) ( q M u p
H
T
u =
Blending polynomials
Using blending functions p(u)=b(u)
T
q,
3 2
1 3 2
) (
2 3
2 3
(
(
(
+
+
u u
u u
T
u M b
837
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
) (
2 3
2 3
(
(
(

+
= =
u u
u u u
u
H
u M b
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
838
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
Example
Here the p and q have the same tangents
at the ends of the segment but different
derivatives
Generate different
839
Generate different
Hermite curves
This techniques is used
in drawing applications
Parametric Continuity
Continuity is enforced by matching
polynomials at join points.
840
- 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
141
C
1
Parametric Continuity
Matching derivatives at the join points
gives us C
1
continuity:
) 0 ( ) 1 (
(
(
'
(
(
'
x x
q p
841
.
) 0 (
) 0 ( ) 0 (
) 1 (
) 1 ( ) 1 (
(
(
(
'
' = ' =
(
(
(
'
' = '
z
y
z
y
q
q
p
p q p
Another Approach:
Geometric Continuity
If the derivatives are proportional, then we
have geometric continuity.
diff
842
- One extra degree of freedom.
- Extends to higher dimensions.
different
magnitude
same
direction
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
843
points as with the cubic interpolating curve
to approximate the derivatives in the
Hermite form
Bezier Curves and Surfaces
Bezier added control points to manipulate
derivatives.
844
- 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
+ + =
=
Bezier Geometry Matrix
We solve c=M
B
p, where
0 0 3 3
0 0 0 1
(
(
(
= M
845
The cubic Bezier polynomial is thus
.
1 3 3 1
0 3 6 3
(
(
(

=
B
M
. ) ( p M u p
B
T
u =
Bezier Blending Functions
- These functions are Bernstein polynomials:
846
. ) 1 (
)! ( !
!
) (
k d k
kd
u u
k d k
d
u b

=
142
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
847
p(u) is a convex sum, so the curve lies inside
the convex hull of the control points.
Bezier Surface Patches
Using a 4 x 4 array of control points P,
) ( ) ( ) (
3 3
b b
two blending functions
848
.
) ( ) ( ) , (
0 0
v PM M u
p p
T
B B
T
i j
ij j i
u b u b v u
=
=
= =
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 (
00 10
p p
p
=
c
c
850
). ( 3 ) 0 , 0 (
) ( ) (
00 01
00 10
p p
p
p p
=
c
c
c
v
u
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
851
) ( ) , (
11 10 01 00
p p p p
c c v u
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
852
B Splines are not required to interpolate
any control points.
- Relaxing this requirement makes it possible to
enforce greater smoothness at join points.
143
The Cubic B-Spline Curve
The control points now reside in the
middle of a sequence:
}. , , , {
1 1 2 + i i i i
p p p p
853
- The curve spans only the distance between the
middle two control points.
Formulating the Geometry Matrix
We are looking for a polynomial
where p is the matrix of control points
, ) ( Mp u p
T
u =
854
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.
Join Point Continuity
Construct q from the same matrix as p:
(
(
(
1
2
i
i
p
p
p
2
3
(
(
(
i
i
p
p
q and
855
- Now let q(u) = u
T
Mq.
- Constraints on derivates allow us to control
smoothness.
(
(
(
=
+1 i
i
p
p
p .
1
(
(
(
i
i
p
p
q and
Symmetric Approximations
Enforcing symmetry at the join points is a
popular choice for M.
Two conditions that satisfy symmetry are
856
), (
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
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
:
857
. ) ( c u p
T
u =
The B-Spline Geometry Matrix
Once we have the coefficient matrix, we
can solve for the geometry matrix:
0 1 4 1
(
(
858
.
1 3 3 1
0 3 6 3
0 3 0 3
6
1
(
(
(
(
=
S
M
144
B-Spline Blending Functions
The blending functions are
(
(
(

3 2
3
3 6 4
) 1 (
1
u
859
(
(
(
(
+ +
+
3
3 2
3 2
3 3 3 1
3 6 4
6
1
u
u u u
u u
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.
860
On the other hand, we need more control
points than we did for Bezier curves.
B-Splines and Bases
Each control point affects four adjacent
intervals.
< s +
<
1 2 ) 2 (
, 2 0
i u i u b
i u
861
+ >
+ < s +
+ < s
< s +
< s +
=
. 2 0
, 2 1 ) 1 (
, 1 ) (
, 1 ) 1 (
, 1 2 ) 2 (
) (
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
u B
i
Spline Basis Function
A single expression for the spline curve
using basis functions:
862
=
=
1
1
. ) ( ) (
m
i
i i
u B u p p
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!
. ) ( ) ( ) , (
3
0
3
0

= =
=
i j
ij j i
u b u b v u p p
864
- But one segment per patch, instead of nine!
- However, they are also much smoother.
145
General B-Splines
Polynomials of degree d between n knots
u
0
,...,u
n
:
=
+
< < =
d
j
k k
j
jk
u u u u u
0
1
, ) ( c p
865
- 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.
= j 0
The Cox-deBoor Recursion
A particular set of basis splines is defined
by the Cox-deBoor recursion:
s s
=
+
th i 0
, 1
1
0
k k
k
u u u
B
866
otherwise; 0
0 k
). (
) (
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
+
+ + +
+
=
Recursively Defined B-Splines
Linear interpolation of polynomials of
degree k produces polynomials of degree
k + 1.
867
Uniform Splines
Equally spaced knots.
868
periodic
uniform
B-spline
Nonuniform B-Splines
Repeated knots pull the spline closer to
the control point.
- Open splines extend the curve by repeating
the endpoints.
869
- 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
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
870
.
1
(
(
(
(
=
i
i
i
i i
z
y
x
w q
146
The NURBS Basis Functions
A 4D B-spline
=
(
(
(
=
n
i i d i
w u B u y
u x
u
,
. ) ( ) (
) (
) ( p q
871
- Derive the w component from the weights:
=
(
(
i
u z
0
) (
=
=
n
i
i d i
w u B u w
0
,
. ) ( ) (
Nonuniform Rational B-Splines
Each component of p(u) is a rational
function in u.
- We use perspective division to recover the 3D
points:
1

n
872
- 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
Objectives
Introduce methods to draw curves
- Approximate with lines
- Finite Differences
Derive the recursive method for
874
Derive the recursive method for
evaluation of Bezier curves and surfaces
Learn how to convert all polynomial data
to data for Bezier polynomials
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
875
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
Polynomial Evaluation Methods
Our standard representation:
H ' th d
=
s s =
n
i
i
i
u u u
0
1 0 , ) ( c p
876
Horner's method:
- If the points {u
i
} are spaced uniformly, we can
use the method of forward differences.
))). ( ( ( ) (
2 1 0
u u u u u
n
c c c c p + + + + =
147
The Method of Forward Differences
Forward differences defined iteratively:
), ( ) ( ) (
), ( ) (
1
) 1 (
) 0 (
k k k
k k
u u u
u u
p p p
p p
= A
= A
+
877
If u
k+1
- u
k
= h is constant, then A
(n)
p(u
k
) is
constant for all k.
). ( ) ( ) (
) (
1
) ( ) 1 (
k
m
k
m
k
m
u u u p p p A A = A
+
+
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 + + + =
878
compute
these
Using the Table
Compute successive values of p(u
k
)
starting from the bottom:
879
). ( ) ( ) (
) 1 ( ) (
1
) 1 (
k
m
k
m
k
m
u p u p p

+
A + A = A
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).
881
- The convex hulls for l and r must lie inside the
convex hull for p: the variation-diminishing
property:
Efficient Computation of
the Subdivision
882
), (
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!
148
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
ith t l i t
883
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
Matrices
Interpolating to Bezier
(
(
(
(
(
(
(
6
5
3
2
3
3
1
3
1
2
3
3
6
5
0 0 0 1
1
M M I B
884
B-Spline to Bezier
(
(
1 0 0 0
(
(
(
(
1 4 1 0
0 4 2 0
0 2 4 0
0 1 4 1
1
M M S B
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
885
Bezier
Interpolating
B Spline
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
886
- Process creates new points
- Some of the original points are discarded
original and kept new
original and discarded
Second Subdivision
887
16 final points for
1 of 4 patches created
Normals
For rendering we need the normals if we
want to shade
- Can compute from parametric equations
c c ) ( ) (
888
- 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
149
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
889
Algebraic Surfaces
Quadric surfaces are described by
implicit equations of the form
- 10 independent coefficients A b and c
. 0 = + + c
T T
p b Ap p
890
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.
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
891
y p p
0
quadratic formula.
- Derivatives determine the normal at a given
point.
Quadric Objects in OpenGL
OpenGL supports disks, cylinders and
spheres with quadric objects.
GLUquadr i cObj *qobj ;
qobj = gl uNewQuadr i c( ) ;
892
- Choose wire frame rendering with
- To draw an object, pass the reference:
gl uQuadr i cDr awSt yl e( qobj , GLU_LI NE) ;
gl uSpher e( qobj , RADI US, SLI CES, STACKS) ;
Bezier Curves in OpenGL
Creating a 1D evaluator:
t ype: points colors normals textures etc
gl Map1f ( t ype, u_mi n, u_max, st r i de,
or der , poi nt _ar r ay) ;
893
- t ype: points, colors, normals, textures, etc.
- u_mi n, u_max: range.
- st r i de: points per curve segment.
- or der : degree + 1.
- poi nt _ar r ay: control points.
Drawing the Curve
One evaluator call takes the place of
vertex, color, and normal calls.
- The user enables them with gl Enabl e.
t ypedef f l oat poi nt [ 3] ;
894
t ypedef f l oat poi nt [ 3] ;
poi nt dat a[ ] = {. . . };
gl Map1f ( GL_MAP_VERTEX_3, 0. 0, 1. 0, 3, 4, dat a) ;
gl Enabl e( GL_MAP_VERTEX_3) ;
gl Begi n( GL_LI NE_STRI P)
f or ( i =0; i <100; i ++) gl Eval Coor d1f ( i / 100. ) ;
gl End( ) ;
150
Bezier Surfaces in OpenGL
Using a 2D evaluator:
gl Map2f ( GL_MAP_VERTEX_3, 0, 1, 3, 4, 0, 1, 12, 4, dat a) ;
. . .
f or ( j =0; j <99; j ++) {
gl Begi n( GL QUAD STRI P) ;
895
gl Begi n( GL_QUAD_STRI P) ;
f or ( i =0; i <=100; i ++) {
gl Eval Coor d2f ( i / 100. , j / 100. ) ;
gl Eval Coor d2f ( ( i +1) / 100. , j / 100. ) ;
}
gl End( ) ;
}
Example: Bezier Teapot
Vertex information goes in an array:
GLf l oat dat a[ 32] [ 4] [ 4] ;
Initialize the grid for wireframe rendering:
896
Initialize the grid for wireframe rendering:
voi d myI ni t ( ) {
gl Enabl e( GL_MAP2_VERTEX_3) ;
gl MapGr i d2f ( 20, 0. 0, 1. 0, 20, 0. 0, 1. 0) ;
}
Drawing the Teapot
f or ( k=0; k<32; k++) {
gl Map2f ( GL_MAP2_VERTEX_3, 0, 1, 3, 4,
0, 1, 12, 4, &dat a[ k] [ 0] [ 0] [ 0] ) ;
f or ( j =0; j <=8; j ++) {
f or ( i =0; i <=30; i ++)
gl Eval Coor d2f ( ( GLf l oat ) i / 30 0
897
gl Eval Coor d2f ( ( GLf l oat ) i / 30. 0,
( GLf l oat ) j / 8. 0) ;
gl End( ) ;
f or ( i =0; i <=30; i ++)
gl Eval Coor d2f ( ( GLf l oat ) j / 8. 0,
( GLf l oat ) i / 30. 0) ;
gl End( ) ;
}
}

CSC 472

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CSC 472

Enviado por

Direitos autorais:

Formatos disponíveis

1

Você também pode gostar