Introduction to Computer Graphics

Lecture
Lecture 33
Mathematical
Mathematical Primitives
Primitives
Introduction
Introduction to
to Transformations
Transformations
Show Your Gang Colors
Use
Use hand
hand to
to identify
identify handedness
handedness
•• Point
Point thumb,
thumb, index
index finger,
finger, and
and middle
middle finger
finger in
in orthogonal
orthogonal
directions
directions
–– Thumb
Thumb == x-axis
x-axis
–– Index
Index == y-axis
y-axis
–– Middle
Middle == z-axis
z-axis
•• Left
Left and
and right
right hands
hands correspond
correspond to
to left
left and
and right
right hand
hand
coordinate
coordinate systems
systems
Triangle Arithmetic
Consider
Consider aa triangle,
triangle, (a,
(a, b,
b, c)
c)
b
•• a,b,c
a,b,c == (x,y,z)
(x,y,z) tuples
tuples
a c

Surface
Surface area
area == ssaa == ½
½ ** ||(b
||(b –a)
–a) X
X (c-a)||
(c-a)||

Unit
Unit normal
normal == (1/2s
(1/2saa)) ** (b-a)
(b-a) X
X (c-a)
(c-a)
Vector Spaces
A
A linear
linear combination
combination of
of vectors
vectors results
results in
in aa new
new vector:
vector:
vv == 
11vv11 ++  … ++ 
22vv22 ++ … nnvvnn
IfIf the
the only
only set
set of
of scalars
scalars such
such that
that

11vv11 ++  … ++ 
22vv22 ++ … nnvvnn == 00
is 
is 11 ==  … == 
22 == … 33 == 00
then
then we
we say
say the
the vectors
vectors are
are linearly
linearly independent
independent
The
The dimension
dimension of
of aa space
space is
is the
the greatest
greatest number
number of
of linearly
linearly
independent
independent vectors
vectors possible
possible in
in aa vector
vector set
set
For
For aa vector
vector space
space of
of dimension
dimension n,n, any
any set
set of
of nn linearly
linearly
independent
independent vectors
vectors form
form aa basis
basis
Vector Spaces: Basis Vectors
Given
Given aa basis
basis for
for aa vector
vector space:
space:
•• Each
Each vector
vector in
in the
the space
space is
is aa unique
unique linear
linear combination
combination of
of the
the basis
basis
vectors
vectors
•• The
The coordinates
coordinates of
of aa vector
vector are
are the
the scalars
scalars from
from this
this linear
linear
combination
combination
•• IfIf basis
basis vectors
vectors are
are orthogonal
orthogonal and
and unit
unit length:
length:
–– Vectors
Vectors comprise
comprise orthonormal
orthonormal basis
basis
•• Best-known
Best-known example:
example: Cartesian
Cartesian coordinates
coordinates
•• Note
Note that
that aa given
given vector
vector vv will
will have
have different
different coordinates
coordinates for
for different
different
bases
bases
Matrices
By
By convention,
convention, matrixmatrix  M11 M12  M1n 
 M21 M2n 
element
element M Mrcrc is
is located
located at
at M22 
M
row
row rr and
and column
column c: c:      
 
Mm1 Mm2  Mmn 

 v1  By By (OpenGL)
(OpenGL)

v   v 2  convention,
convention, vectors
vectors
 v 3  are
are columns
columns
Matrices
Matrix-vector
Matrix-vector multiplication
multiplication applies
applies aa linear
linear
transformation
transformation to
to aa vector:
vector:
 M11 M12 M13   vx   a 
M  v  M 21 M 22 M 23  vy   b 
M 31 M 32 M 33  vz   c 

•• Why
Why do
do we
we call
call this
this aa linear
linear transformation?
transformation?
Recall
Recall how
how to
to do
do matrix
matrix multiplication?
multiplication?
Matrix Transformations
A
A sequence
sequence or
or composition
composition of of linear
linear transformations
transformations
corresponds
corresponds to
to the
the product
product of of the
the corresponding
corresponding
matrices
matrices M 1M 2 M 3vold  vnew
•• Note:
Note: the
the matrices
matrices to
to the
the right
right affect
affect vector
vector first
first
•• Note:
Note: order
order of
of matrices
matrices matters!
matters!
The
The identity
identity matrix
matrix II has
has no
no effect
effect in
in multiplication
multiplication
Some
Some (not
(not all)
all) matrices
matrices have
have an an inverse:
inverse:
M 1  M  v    v
Matrix Transformations
A
A linear
linear transformation
transformation::
•• Maps
Maps one
one vector
vector to
to another
another
•• Preserves
Preserves linear
linear combinations
combinations
Thus
Thus behavior
behavior of
of linear
linear transformation
transformation is is completely
completely
determined
determined by
by what
what itit does
does to
to aa basis
basis
Turns
Turns out
out any
any linear
linear transform
transform can
can be
be represented
represented by
by
aa matrix
matrix
Matrix Transformations
•• We
We hypothesize
hypothesize that
that all
all necessary
necessary linear
linear transformations
transformations can
can
be
be accomplished
accomplished with
with matrix
matrix multiplication
multiplication
•• Let’s
Let’s look
look at
at aa few
few
–– Scaling
Scaling
–– Rotation
Rotation
–– Translation?
Translation?
Scaling
Scaling
Scaling aa coordinate
coordinate means
means multiplying
multiplying each
each of
of its
its
components
components by by aa scalar
scalar
Uniform
Uniform scaling
scaling means
means this
this scalar
scalar is
is the
the same
same for
for all
all
components:
components:

2
Scaling
Non-uniform
Non-uniform scaling
scaling:: different
different scalars
scalars per
per component:
component:

X  2,
Y  0.5

How
How can
can we
we represent
represent this
this in
in matrix
matrix form?
form?
Scaling

Scaling
Scaling operation:
operation:  x ' ax 
 y '  by 
   

Or,
Or, in
in matrix
matrix form:
 x '   a 0  x 
 y '   0
form:
  
b  y 
  
scaling matrix
2-D Rotation
(x’, y’)

(x, y)

x’ = x cos() - y sin()
 y’ = x sin() + y cos()
2-D Rotation
x = r cos ()
y = r sin ()
x’ = r cos ( + )
y’ = r sin ( + )
(x’, y’)
Trig Identity…
(x, y) x’ = r cos() cos() – r sin() sin()
y’ = r sin() sin() + r cos() cos()

 
Substitute…
x’ = x cos() - y sin()
y’ = x sin() + y cos()
2-D Rotation
This
This is
is easy
easy to
to capture
capture in
in matrix
matrix form:
form:

 x' cos   sin     x 

 y '   sin   cos    y 
  
Even
Even though sin()) and
though sin( cos()) are
and cos( are nonlinear
nonlinear functions
functions
of ,,
of
•• x’
x’ is
is aa linear
linear combination
combination of
of xx and
and yy
•• y’
y’ is
is aa linear
linear combination
combination of
of xx and
and yy
Translation
What
What can
can you
you do
do with
with aa 2x2
2x2 matrix
matrix transformation?
transformation?

a b   x   x'
 c d   y    y '
    
Nothing
Nothing corresponds
corresponds to
to translation…
translation…
Homogeneous Coordinates
Homogeneous
Homogeneous coordinates
coordinates
 x
•• represent
represent coordinates
coordinates inin 22  x  homogeneous coords  
dimensions
dimensions with
with aa 3-vector
3-vector  y       y 
   1 

Homogeneous
Homogeneous coordinates
coordinates seem
seem unintuitive,
unintuitive, but
but they
they
make
make graphics
graphics operations
operations much
much easier
easier
Homogeneous Coordinates
Our
Our transformation
transformation matrices
matrices are
are now
now 3x3:
3x3:

cos( )  sin( ) 0

Rotation   sin( ) cos( ) 0
 0 0 1

 a 0 0

Scale  0 b 0 
0 0 1
Homogeneous Coordinates
Q:
Q: How
How can
can we
we represent
represent translation
translation as
as aa 3x3
3x3 matrix?
matrix?
A:
A: Using
Using the
the rightmost
rightmost column:
column:
1 0 Tx 
 
Translation  0 1 Ty 
0 0 1 

Translation
Example
Example of
of translation
translation 1 0 Tx   x   x  Tx 
    
 0 1 T y y
   y  T y
0 0 1   1   1 
 

Tx = 2
Ty = 1
Total Picture
Think
Think about
about what
what happens
happens with
with
manipulating
manipulating transformation
transformation a b c
matrix
matrix
d e f 

•• a,
a, ee == negative?
negative?
•• Changing
Changing dd and
and e?
e?
•• Changing
Changing ii !=
!= 1?
1?  g h i 
Composing Transformations
What
What ifif we
we want
want to
to scale
scale and
and rotate
rotate and
and translate?
translate?
•• We
We can
can execute
execute transformations
transformations one
one after
after the
the other
other
•• Ex:
Ex: Rotate
Rotate line
line segment
segment by
by 45
45 degrees
degrees about
about endpoint
endpoint aa

a a
Multiplication Order – Wrong Way
Our
Our line
line is
is defined
defined by
by two
two endpoints
endpoints
•• Applying
Applying aa rotation
rotation of
of 45
45 degrees,
degrees, R(45),
R(45), affects
affects both
both points
points
•• We
We could
could try
try to
to translate
translate both
both endpoints
endpoints to
to return
return endpoint
endpoint aa to
to its
its
original
original position,
position, but
but by
by how
how much?
much?

T(-3), R(45), T(3)

a
a
Wrong Correct
R(45) T(-3) R(45) T(3)
Multuplication Order - Correct
Isolate
Isolate endpoint
endpoint aa from
from rotation
rotation effects
effects a

•• First
First translate
translate line
line so
so aa is
is at
at origin:
origin: TT (-3)
(-3)
a

•• Then
Then rotate
rotate line
line 45
45 degrees:
degrees: R(45)
R(45)
a

•• Then
Then translate
translate back
back so
so aa is
is where
where itit was:
was: T(3)
T(3)
a
Compositing Matrices
Will
Will this
this sequence
sequence of
of operations
operations work?
work?
1 0  3 cos(45)  sin(45) 0 1 0 3  a x   a' x 
0 1 0   sin(45) cos(45) 0 0 1 0 a   a ' 
    y   y 
0 0 1   0 0 1 0 0 1  1   1 

Result
Result of
of first
first multiply
multiply with
with vector
vector
1 0 3  a x  a x  3
0 1 0   a    a 
  y   y 
0 0 1  1   1 
Compositing Matrices
Order
Order of
of multiplication
multiplication matters
matters

Short
Short answer:
answer: the
the transformations,
transformations, in
in order,
order, are
are
written
written from
from right
right to
to left
left
•• In
In other
other words,
words, the
the first
first matrix
matrix to
to affect
affect the
the vector
vector goes
goes next
next
to
to the
the vector,
vector, the
the second
second next
next to
to the
the first,
first, etc.
etc.
Compositing Matrices
After
After correctly
correctly ordering
ordering the
the matrices
matrices
Multiply
Multiply matrices
matrices together
together
What
What results
results is
is one
one matrix
matrix –– store
store it!
it!
Multiply
Multiply this
this matrix
matrix by
by the
the vector
vector of
of each
each vertex
vertex
All
All vertices
vertices easily
easily trasformed
trasformed with
with one
one matrix
matrix
multiply
multiply
Frame Buffers

A
A frame
frame buffer
buffer may
may bebe thought
thought of of as
as computer
computer
memory
memory organized
organized asas aa two-dimensional
two-dimensional array
array
with
with each
each (x,y)
(x,y) addressable
addressable location
location
corresponding
corresponding toto one
one pixel.
pixel.
Bit
Bit Plane
Planess or
or Bit
Bit Depth
Depth is
is the
the number
number of
of bits
bits
corresponding
corresponding to to each
each pixel.
pixel.
A
A typical
typical frame
frame buffer
buffer resolution
resolution might
might be
be
640
640 xx 480
480 xx 88
1280
1280 xx 1024
1024 xx 88
1280
1280 xx 1024
1024 xx 24
24
1-Bit Memory, Monochrome Display
(Bitmap Display)

1 bit
2 levels

Electron
Gun
3-Bit Color Display

red

green
blue

COLOR: black red green blue yellow cyan magenta white

R 0 1 0 0 1 0 1 1
G 0 0 1 0 1 1 0 1
B 0 0 0 1 0 1 1 1
True Color Display

24 bitplanes, 8 bits per

8 color gun.
 242 = 16,777,216
8

8 Red

Green
Blue
 Color Map Look-Up Tables

Extends
Extends the
the number
number ofof colors
colors that
that can
can be
be displayed
displayed by
by aa
given
given number
number of
of bit-planes.
bit-planes.

y RED
max
GREEN
255
BLUE

y
Pixel displayed
7 1001 1010 0001
6
67 100110100001 at x', y'
R G B
Pixel in
bit map 0
0 at x', y'
0 x x
max

Frame buffer Look-up table Display

Pseudo color
RED GREEN BLUE

28 x 24 Color Map LUT 255

254

256 colors chosen from a

palette of 16,777,216.

Each entry in the color map 3

2
LUT can be user defined.
1
0
Rendering 3D Scenes

Transform
Illuminate
Transform
Clip
Project
Rasterize

Model & Camera

Rendering Pipeline Framebuffer Display
Parameters
The Rendering Pipeline
Transform
Illuminate
Transform
Clip
Project
Rasterize

Model & Camera

Rendering Pipeline Framebuffer Display
Parameters
Rendering: Transformations
We’ve
We’ve learned
learned about
about transformations
transformations
But
But they
they are
are used
used in
in three
three ways:
ways:
•• Modeling
Modeling transforms
transforms
•• Viewing
Viewing transforms
transforms (Move
(Move the
the camera)
camera)
•• Projection
Projection transforms
transforms (Change
(Change the
the type
type of
of camera)
camera)
The Rendering Pipeline: 3-D
Scene graph
Object geometry Result:
Modeling
• All vertices of scene in shared 3-D “world” coordinate system
Transforms

Lighting
Calculations • Vertices shaded according to lighting model

Viewing
Transform • Scene vertices in 3-D “view” or “camera” coordinate system

Clipping
• Exactly those vertices & portions of polygons in view frustum

Projection
Transform • 2-D screen coordinates of clipped vertices
The Rendering Pipeline: 3-D
Scene graph
Object geometry Result:
Modeling
Transforms • All vertices of scene in shared 3-D “world” coordinate system

Lighting
Calculations

Viewing
Transform

Clipping

Projection
Transform
Rendering: Transformations
Modeling
Modeling transforms
transforms
•• Size,
Size, place,
place, scale,
scale, and
and rotate
rotate objects
objects and
and parts
parts of
of the
the
model
model w.r.t.
w.r.t. each
each other
other
•• Object
Object coordinates
coordinates ->
-> world
world coordinates
coordinates

Y
Y
Z
X
X
Z
The Rendering Pipeline: 3-D
Scene graph
Object geometry Result:
Modeling
Transforms • Scene vertices in 3-D “view” or “camera” coordinate system

Lighting
Calculations

Viewing
Transform

Clipping

Projection
Transform
Rendering: Transformations

Viewing
Viewing transform
transform
•• Rotate
Rotate &
& translate
translate the
the world
world to
to lie
lie directly
directly in
in front
front of
of
the
the camera
camera
––Typically
Typically place
place camera
camera at
at origin
origin
––Typically
Typically looking
looking down
down -Z
-Z axis
axis
•• World
World coordinates
coordinates  view
view coordinates
coordinates
The Rendering Pipeline: 3-D
Scene graph
Object geometry Result:
Modeling
Transforms • 2-D screen coordinates of clipped vertices

Lighting
Calculations

Viewing
Transform

Clipping

Projection
Transform
Rendering: Transformations
Projection
Projection transform
transform
•• Apply
Apply perspective
perspective foreshortening
foreshortening
––Distant
Distant == small:
small: the
the pinhole
pinhole camera
camera model
model
•• View
View coordinates
coordinates  screen
screen coordinates
coordinates
Rendering: Transformations
Perspective
Perspective Camera
Camera

Orthographic
Orthographic Camera
Camera
Introducing OpenGL
mid-level,
mid-level, device-independent,
device-independent, portable
portable graphics
graphics
subroutine
subroutine package
package
developed
developed primarily
primarily by
by SGI
SGI
2D/3D
2D/3D graphics,
graphics, lower-level
lower-level primitives
primitives (polygons)
(polygons)
does
does not
not include
include low-level
low-level I/O
I/O management
management
basis
basis for
for higher-level
higher-level libraries/toolkits
libraries/toolkits
Introducing OpenGL
Recall
Recall the
the rendering
rendering pipeline:
pipeline:
•• Transform
Transform geometry
geometry (object
(object world,
world, world
world eye)
eye)
•• Apply
Apply perspective
perspective projection
projection (eye
(eye screen)
screen)
•• Clip
Clip to
to the
the view
view frustum
frustum
•• Perform
Perform visible-surface
visible-surface processing
processing (Z-buffer)
(Z-buffer)
•• Calculate
Calculate surface
surface lighting
lighting
Implementing
Implementing all
all this
this is
is aa lot
lot of
of work
work
OpenGL
OpenGL provides
provides aa standard
standard implementation
implementation
•• So
So why
why study
study the
the basics?
basics?