Chapter 03

Transformation
Instructor
LE Thanh Sach, Ph.D
 Contact

LE Thanh Sach, Ph.D.

Office:
Department of Computer Science,
Faculty of Computer Science and Engineering,
HoChiMinh City University of Technology.
Office Address:
268 LyThuongKiet Str., Dist. 10, HoChiMinh City,
Vietnam.
E-mail: LTSACH@cse.hcmut.edu.vn
E-home: http://cse.hcmut.edu.vn/~ltsach/
Tel: (+84) 83-864-7256 (Ext: 5839)
Computer Graphics: Chapter 03 – Transformation Slide: 2
 Acknowledgment

The slides in this PPT file are composed

using the materials supplied by
Prof. Edward Angel: He is currently from ARTS
Lab, University of New Mexico. He also the author
of the book “Interactive Computer Graphics: A
Top-down Approach Using OpenGL”

Prof. Donald Hearn and Prof. M. Pauline

Baker, from Indiana University and Purdue
University

Computer Graphics: Chapter 03 – Transformation Slide: 3

 Outline

Geometry
Representation
Geometric Transformation
Transformation in OpenGL
Building Models

Computer Graphics: Chapter 03 – Transformation Slide: 4

 Geometry

Computer Graphics: Chapter 03 – Transformation Slide: 5

 Objectives

Introduce the elements of geometry

Scalars
Vectors
Points
Develop mathematical operations among
them in a coordinate-free manner
Define basic primitives
Line segments
Polygons
Computer Graphics: Chapter 03 – Transformation Slide: 6
 Basic Elements

Geometry is the study of the relationships among

objects in an n-dimensional space
In computer graphics, we are interested in
objects that exist in three dimensions
Want a minimum set of primitives from which we
can build more sophisticated objects
We will need three basic elements
Scalars
Vectors
Points
Computer Graphics: Chapter 03 – Transformation Slide: 7
 Coordinate-Free Geometry

When we learned simple geometry, most of us started

with a Cartesian approach
Points were at locations in space p=(x,y,z)
We derived results by algebraic manipulations
involving these coordinates
This approach was nonphysical
Physically, points exist regardless of the location
of an arbitrary coordinate system
Most geometric results are independent of the
coordinate system
Example Euclidean geometry: two triangles are
identical if two corresponding sides and the angle
between them are identical
Computer Graphics: Chapter 03 – Transformation Slide: 8
 Scalars
Need three basic elements in geometry
Scalars, Vectors, Points
Scalars can be defined as members of sets which
can be combined by two operations (addition and
multiplication) obeying some fundamental axioms
(associativity, commutativity, inverses)
Examples include the real and complex number
systems under the ordinary rules with which we are
familiar
Scalars alone have no geometric properties

Computer Graphics: Chapter 03 – Transformation Slide: 9

 Vectors

Physical definition: a vector is a quantity

with two attributes
Direction
Magnitude
Examples include v
Force
Velocity
Directed line segments
Most important example for graphics
Can map to other types
Computer Graphics: Chapter 03 – Transformation Slide: 10
 Vector Operations
Every vector has an inverse
Same magnitude but points in opposite
direction
Every vector can be multiplied by a scalar
There is a zero vector
Zero magnitude, undefined orientation
The sum of any two vectors is a vector
Use head-to-tail axiom

v w
v -v v
u
Computer Graphics: Chapter 03 – Transformation Slide: 11
 Linear Vector Spaces
Mathematical system for manipulating vectors
Operations
Scalar-vector multiplication u=v
Vector-vector addition: w=u+v
Expressions such as
v=u+2w-3r
Make sense in a vector space

Computer Graphics: Chapter 03 – Transformation Slide: 12

 Vectors Lack Position

These vectors are identical

Same length and magnitude

Vectors spaces insufficient for geometry

Need points

Computer Graphics: Chapter 03 – Transformation Slide: 13

 Points

Location in space
Operations allowed between points and
vectors
Point-point subtraction yields a vector
Equivalent to point-vector addition

v=P-Q

P=v+Q

Computer Graphics: Chapter 03 – Transformation Slide: 14

 Affine Spaces

Point + a vector space

Operations
Vector-vector addition
Scalar-vector multiplication
Point-vector addition
Scalar-scalar operations
For any point define
1 • P = P
0 • P = 0 (zero vector)
Computer Graphics: Chapter 03 – Transformation Slide: 15
 Lines

Consider all points of the form

P()=P0 +  d
Set of all points that pass through P0 in the
direction of the vector d

Computer Graphics: Chapter 03 – Transformation Slide: 16

 Parametric Form

This form is known as the parametric form

of the line
More robust and general than other forms
Extends to curves and surfaces
Two-dimensional forms
Explicit: y = mx +h
Implicit: ax + by +c =0
Parametric:
x() = x0 + (1-)x1
y() = y0 + (1-)y1
Computer Graphics: Chapter 03 – Transformation Slide: 17
 Rays and Line Segments

If  >= 0, then P() is the ray leaving P0 in the

direction d
If we use two points to define v, then
P( ) = Q +  (R-Q)
=Q+v
=R + (1-)Q
For 0<=<=1 we get all the
points on the line segment
joining R and Q
Computer Graphics: Chapter 03 – Transformation Slide: 18
 Convexity

An object is convex iff for any two points in

the object all points on the line segment
between these points are also in the object
P
P

Q Q

convex not convex

Computer Graphics: Chapter 03 – Transformation Slide: 19
 Affine Sums

Consider the “sum”

P=1P1+2P2+…..+nPn
Can show by induction that this sum makes
sense iff
1+2+…..n=1
in which case we have the affine sum of the
points P1,P2,…..Pn
If, in addition, i>=0, we have the convex
hull of P1,P2,…..Pn
Computer Graphics: Chapter 03 – Transformation Slide: 20
 Convex Hull
Smallest convex object containing P1,P2,…..Pn
Formed by “shrink wrapping” points

Computer Graphics: Chapter 03 – Transformation Slide: 21

 Curves and Surfaces

Curves are one parameter entities of the

form P() where the function is nonlinear
Surfaces are formed from two-parameter
functions P(, b)
Linear functions give planes and polygons

P() P(, b)
Computer Graphics: Chapter 03 – Transformation Slide: 22
 Planes

A plane can be defined by a point and two

vectors or by three points P

Q
R u R

P(,b)=R+u+bv P(,b)=R+(Q-R)+b(P-Q)

Computer Graphics: Chapter 03 – Transformation Slide: 23

 Triangles

convex sum of S() and R

convex sum of P and Q

for 0<=,b<=1, we get all points in triangle

Computer Graphics: Chapter 03 – Transformation Slide: 24

 Normals

Every plane has a vector n normal (perpendicular,

orthogonal) to it
From point-two vector form P(,b)=R+u+bv, we
know we can use the cross product to find
n = u  v and the equivalent form
(P()-P)  n=0
v

u
P
Computer Graphics: Chapter 03 – Transformation Slide: 25
 Representation

Computer Graphics: Chapter 03 – Transformation Slide: 26

 Objectives

Introduce concepts such as dimension and

basis
Introduce coordinate systems for
representing vectors spaces and frames for
representing affine spaces
Discuss change of frames and bases
Introduce homogeneous coordinates

Computer Graphics: Chapter 03 – Transformation Slide: 27

 Linear Independence

A set of vectors v1, v2, …, vn is linearly

independent if
1v1+2v2+.. nvn=0 iff 1=2=…=0
If a set of vectors is linearly independent,
we cannot represent one in terms of the
others
If a set of vectors is linearly dependent, as
least one can be written in terms of the others
Computer Graphics: Chapter 03 – Transformation Slide: 28
 Dimension

In a vector space, the maximum number of linearly

independent vectors is fixed and is called the
dimension of the space
In an n-dimensional space, any set of n linearly
independent vectors form a basis for the space
Given a basis v1, v2,…., vn, any vector v can be
written as
v=1v1+ 2v2 +….+nvn
where the {i} are unique
Computer Graphics: Chapter 03 – Transformation Slide: 29
 Representation

Until now we have been able to work with

geometric entities without using any frame
of reference, such as a coordinate system
Need a frame of reference to relate points
and objects to our physical world.
For example, where is a point? Can’t answer
without a reference system
World coordinates
Camera coordinates
Computer Graphics: Chapter 03 – Transformation Slide: 30
 Coordinate Systems

Consider a basis v1, v2,…., vn

A vector is written v=1v1+ 2v2 +….+nvn
The list of scalars {1, 2, …. n}is the
representation of v with respect to the given basis
We can write the representation as a row or
column array of scalars  1 
 
a=[1 2 ….  2
n] =  . 
T
 
 n
 
Computer Graphics: Chapter 03 – Transformation Slide: 31
 Example

v=2v1+3v2-4v3
a=[2 3 –4]T
Note that this representation is with respect
to a particular basis
For example, in OpenGL we start by
representing vectors using the object basis
but later the system needs a representation in
terms of the camera or eye basis
Computer Graphics: Chapter 03 – Transformation Slide: 32
 Coordinate Systems

Which is correct?

v
v

Both are because vectors have no fixed

location
Computer Graphics: Chapter 03 – Transformation Slide: 33
 Frames

A coordinate system is insufficient to

represent points
If we work in an affine space we can add a
single point, the origin, to the basis vectors
to form a frame
v2
v1
P0
v3

Computer Graphics: Chapter 03 – Transformation Slide: 34

 Representation in a Frame

Frame determined by (P0, v1, v2, v3)

Within this frame, every vector can be
written as
v=1v1+ 2v2 +….+nvn
Every point can be written as
P = P0 + b1v1+ b2v2 +….+bnvn

Computer Graphics: Chapter 03 – Transformation Slide: 35

 Confusing Points and Vectors

Consider the point and the vector

P = P0 + b1v1+ b2v2 +….+bnvn
v=1v1+ 2v2 +….+nvn
They appear to have the similar representations
p=[b1 b2 b3] v=[1 2 3] v
which confuses the point with the vector p
A vector has no position v

Vector can be placed anywhere

point: fixed
Computer Graphics: Chapter 03 – Transformation Slide: 36
 A Single Representation

If we define 0•P = 0 and 1•P =P then we can write

v= v +  v + v = [   0 ] [v v v P ] T
1 1 2 2 3 3 1 2 3 1 2 3 0
P = P0 + b1v1+ b2v2 +b3v3= [b1 b2 b3 1 ] [v1 v2 v3 P0]
T
Thus we obtain the four-dimensional homogeneous
coordinate representation
v = [1 2 3 0 ] T
p = [b1 b2 b3 1 ] T
Computer Graphics: Chapter 03 – Transformation Slide: 37
 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
xx’/w
yy’/w
zz’/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]

Computer Graphics: Chapter 03 – Transformation Slide: 38

 Homogeneous Coordinates and
Computer Graphics

Homogeneous coordinates are key to all computer

graphics systems
All standard transformations (rotation, translation,
scaling) can be implemented with matrix
multiplications using 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

Computer Graphics: Chapter 03 – Transformation Slide: 39

 Change of Coordinate Systems

Consider two representations of a the same

vector with respect to two different bases.
The representations are
a=[1 2 3 ]
b=[b1 b2 b3]
where
v=1v1+ 2v2 +3v3 = [1 2 3] [v1 v2 v3] T
=b u + b u +b u = [b b b ] [u u u ] T
1 1 2 2 3 3 1 2 3 1 2 3

Computer Graphics: Chapter 03 – Transformation Slide: 40

 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

u1 = g11v1+g12v2+g13v3
u2 = g21v1+g22v2+g23v3
u3 = g31v1+g32v2+g33v3

Computer Graphics: Chapter 03 – Transformation Slide: 41

 Matrix Form

The coefficients define a 3 x 3 matrix

 g g g 


M = g  g 

g  

 g  g  g 33 

and the bases can be related by

a=MTb

see text for numerical examples

Computer Graphics: Chapter 03 – Transformation Slide: 42
 Change of Frames

We can apply a similar process in homogeneous

coordinates to the representations of both points and
vectors u2
Consider two frames: v2 u1
(P0, v1, v2, v3)
(Q0, u1, u2, u3) Q0
P0 v1
v3 u3

Any point or vector can be represented in either frame

We can represent Q0, u1, u2, u3 in terms of P0, v1, v2, v3
Computer Graphics: Chapter 03 – Transformation Slide: 43
 Representing One Frame in Terms of the
Other
Extending what we did with change of bases

u1 = g11v1+g12v2+g13v3
u2 = g21v1+g22v2+g23v3
u3 = g31v1+g32v2+g33v3
Q0 = g41v1+g42v2+g43v3 +g44P0
defining a 4 x 4 matrix  g g g 
g g  
M =   g 
 g  g  g  
 
 g  g  g  
Computer Graphics: Chapter 03 – Transformation Slide: 44
 Working with Representations

Within the two frames any point or vector has a

representation of the same form

a=[1 2 3 4 ] in the first frame

b=[b1 b2 b3 b4 ] in the second frame

where 4 = b4 =  for points and 4 = b4 =  for vectors and

a=MTb
The matrix M is 4 x 4 and specifies an affine
transformation in homogeneous coordinates
Computer Graphics: Chapter 03 – Transformation Slide: 45
 Affine Transformations

Every linear transformation is equivalent to

a change in frames
Every affine transformation preserves lines
However, an affine transformation has only
12 degrees of freedom because 4 of the
elements in the matrix are fixed and are a
subset of all possible 4 x 4 linear
transformations
Computer Graphics: Chapter 03 – Transformation Slide: 46
 The World and Camera Frames

When we work with representations, we work with n-tuples

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

Computer Graphics: Chapter 03 – Transformation Slide: 47

 Moving the Camera

If objects are on both sides of z=0, we must move

camera frame 1 0 0 0 
0 1 0 0 
MT =  
0 0 1  d 
 
 0 0 0 1 

Computer Graphics: Chapter 03 – Transformation Slide: 48

 Transformations

Computer Graphics: Chapter 03 – Transformation Slide: 49

 Objectives

Introduce standard transformations

Rotation
Translation
Scaling
Shear
Derive homogeneous coordinate
transformation matrices
Learn to build arbitrary transformation
matrices from simple transformations
Computer Graphics: Chapter 03 – Transformation Slide: 50
 General Transformations

A transformation maps points to other points

and/or vectors to other vectors
v=T(u)

Q=T(P)

Computer Graphics: Chapter 03 – Transformation Slide: 51

 Affine Transformations

Line preserving
Characteristic of many physically important
transformations
Rigid body transformations: rotation, translation
Scaling, shear
Importance in graphics is that we need only
transform endpoints of line segments and let
implementation draw line segment between the
transformed endpoints

Computer Graphics: Chapter 03 – Transformation Slide: 52

 Pipeline Implementation

T (from application program)

frame
u T(u) buffer
transformation rasterizer
T(v) T(v)
v
T(v)
v
T(u)
u T(u)
vertices vertices pixels

Computer Graphics: Chapter 03 – Transformation Slide: 53

 Notation

We will be working with both coordinate-free

representations of transformations and
representations within a particular frame
P,Q, R: points in an affine space
u, v, w: vectors in an affine space
, b, g: 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
Computer Graphics: Chapter 03 – Transformation Slide: 54
 Translation

Move (translate, displace) a point to a new

location
P’

d
P

Displacement determined by a vector d

Three degrees of freedom
P’=P+d
Computer Graphics: Chapter 03 – Transformation Slide: 55
 How many ways?

Although we can move a point to a new location in

infinite ways, when we move many points there is
usually only one way

translation: every point displaced

object by same vector
Computer Graphics: Chapter 03 – Transformation Slide: 56
 Translation Using Representations

Using the homogeneous coordinate representation in

some frame
p=[ x y z 1]T
p’=[x’ y’ z’ 1]T
d=[dx dy dz 0]T
Hence p’ = p + d or
x’=x+dx note that this expression is in
four dimensions and expresses
y’=y+dy point = vector + point
z’=z+dz

Computer Graphics: Chapter 03 – Transformation Slide: 57

 Translation Matrix

We can also express translation using a

4 x 4 matrix T in homogeneous coordinates
p’=Tp where 1 0 0 d x 
0 1 0 d 
 y

0 0 1 d z 
T = T(dx, dy, dz) =  
0 0 0 1 

This form is better for implementation because all affine

transformations can be expressed this way and multiple
transformations can be concatenated together
Computer Graphics: Chapter 03 – Transformation Slide: 58
 Rotation (2D)

Consider rotation about the origin by q degrees

radius stays the same, angle increases by q
x = r cos (f + q)
y = r sin (f + q)

x’=x cos q –y sin q

y’ = x sin q + y cos q

x = r cos f
y = r sin f

Computer Graphics: Chapter 03 – Transformation Slide: 59

 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
x’=x cos q –y sin q
y’ = x sin q + y cos q
z’ =z
or in homogeneous coordinates
p’=Rz(q)p

Computer Graphics: Chapter 03 – Transformation Slide: 60

 Rotation Matrix

cos q  sin q 0 0
 sin q cos q 0 0

R = Rz(q) =  0 0 1 0
 
 0 0 0 1

Computer Graphics: Chapter 03 – Transformation Slide: 61

 Rotation about x and y axes

Same argument as for rotation about z axis

For rotation about x axis, x is unchanged
For rotation about y axis, y is unchanged
1 0 0 0
0 cos q - sin q 0
R = Rx(q) =  
0 sin q cos q 0
 
0 0 0 1
 cos q 0 sin q 0
 0 1 0 0
R = Ry(q) =  
- sin q 0 cos q 0
 
 0 0 0 1
Computer Graphics: Chapter 03 – Transformation Slide: 62
 Scaling
Expand or contract along each axis (fixed point of origin)
x’=sxx
y’=syy
z’=szz
p’=Sp

 sx 0 0 0
0 sy 0 0
 
S = S(sx, sy, sz) = 0 0 sz 0
 
0 0 0 1

Computer Graphics: Chapter 03 – Transformation Slide: 63

 Reflection

corresponds to negative scale factors

sx = -1 sy = 1 original

sx = -1 sy = -1 sx = 1 sy = -1

Computer Graphics: Chapter 03 – Transformation Slide: 64

 Inverses

Although we could compute inverse matrices by general

formulas, we can use simple geometric observations
Translation: T-1(dx, dy, dz) = T(-dx, -dy, -dz)
Rotation: R -1(q) = R(-q)
Holds for any rotation matrix
Note that since cos(-q) = cos(q) and sin(-q)=-sin(q)
R -1(q) = R T(q)
Scaling: S-1(sx, sy, sz) = S(1/sx, 1/sy, 1/sz)

Computer Graphics: Chapter 03 – Transformation Slide: 65

 Concatenation

We can form arbitrary affine transformation

matrices by multiplying together rotation,
translation, and scaling matrices
Because the same transformation is applied to
many vertices, the cost of forming a matrix
M=ABCD is not significant compared to the cost
of computing Mp for many vertices p
The difficult part is how to form a desired
transformation from the specifications in the
application
Computer Graphics: Chapter 03 – Transformation Slide: 66
 Order of Transformations

Note that matrix on the right is the first

applied
Mathematically, the following are
equivalent
p’ = ABCp = A(B(Cp))
Note many references use column matrices
to represent points. In terms of column
matrices
p’T = pTCTBTAT
Computer Graphics: Chapter 03 – Transformation Slide: 67
 General Rotation About the Origin
A rotation by q about an arbitrary axis
can be decomposed into the concatenation
of rotations about the x, y, and z axes

R(q) = Rz(qz) Ry(qy) Rx(qx)

y
v
qx qy qz are called the Euler angles q
Note that rotations do not commute x
We can use rotations in another order but
with different angles
z
Computer Graphics: Chapter 03 – Transformation Slide: 68
 Rotation About a Fixed Point other
than the Origin
Move fixed point to origin
Rotate
Move fixed point back
M = T(pf) R(q) T(-pf)

Computer Graphics: Chapter 03 – Transformation Slide: 69

 Instancing

In modeling, we often start with a simple

object centered at the origin, oriented with
the axis, and at a standard size
We apply an instance transformation to its
vertices to
Scale
Orient
Locate

Computer Graphics: Chapter 03 – Transformation Slide: 70

 Shear

Helpful to add one more basic transformation

Equivalent to pulling faces in opposite directions

Computer Graphics: Chapter 03 – Transformation Slide: 71

 Shear Matrix

Consider simple shear along x axis

x’ = x + y cot q
y’ = y
z’ = z

1 cot q 0 0
0 1 0 0
H(q) =  
0 0 1 0
 
0 0 0 1

Computer Graphics: Chapter 03 – Transformation Slide: 72

 Transformation in OpenGL

Computer Graphics: Chapter 03 – Transformation Slide: 73

 Objectives

Learn how to carry out transformations in

OpenGL
Rotation
Translation
Scaling
Introduce OpenGL matrix modes
Model-view
Projection

Computer Graphics: Chapter 03 – Transformation Slide: 74

 OpenGL Matrices

In OpenGL matrices are part of the state

Multiple types
Model-View (GL_MODELVIEW)
Projection (GL_PROJECTION)
Texture (GL_TEXTURE) (ignore for now)
Color(GL_COLOR) (ignore for now)
Single set of functions for manipulation
Select which to manipulated by
glMatrixMode(GL_MODELVIEW);
glMatrixMode(GL_PROJECTION);
Computer Graphics: Chapter 03 – Transformation Slide: 75
 Current Transformation Matrix (CTM)

Conceptually there is a 4 x 4 homogeneous

coordinate matrix, the current transformation
matrix (CTM) that is part of the state and is applied
to all vertices that pass down the pipeline
The CTM is defined in the user program and
loaded into a transformation unit
C
p p’=Cp
vertices CTM vertices

Computer Graphics: Chapter 03 – Transformation Slide: 76

 CTM operations

The CTM can be altered either by loading a new

CTM or by postmutiplication
Load an identity matrix: C  I
Load an arbitrary matrix: C  M

Load a translation matrix: C  T

Load a rotation matrix: C  R
Load a scaling matrix: C  S

Postmultiply by an arbitrary matrix: C  CM

Postmultiply by a translation matrix: C  CT
Postmultiply by a rotation matrix: C  C R
Postmultiply by a scaling matrix: C  C S

Computer Graphics: Chapter 03 – Transformation Slide: 77

 Rotation about a Fixed Point

Start with identity matrix: C  I

Move fixed point to origin: C  CT
Rotate: C  CR
Move fixed point back: C  CT -1

Result: C = TR T –1 which is backwards.

This result is a consequence of doing postmultiplications.

Let’s try again.

Computer Graphics: Chapter 03 – Transformation Slide: 78

 Reversing the Order

We want C = T –1 R T
so we must do the operations in the following order

CI
C  CT -1
C  CR
C  CT

Each operation corresponds to one function call in the

program.

Note that the last operation specified is the first executed in

the program
Computer Graphics: Chapter 03 – Transformation Slide: 79
 CTM in OpenGL

OpenGL has a model-view and a projection

matrix in the pipeline which are
concatenated together to form the CTM
Can manipulate each by first setting the
correct matrix mode

Computer Graphics: Chapter 03 – Transformation Slide: 80

 Rotation, Translation, Scaling

Load an identity matrix:

glLoadIdentity()

Multiply on right:

glRotatef(theta, vx, vy, vz)

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

Computer Graphics: Chapter 03 – Transformation Slide: 81

 Example

Rotation about z axis by 30 degrees with a fixed

point of (1.0, 2.0, 3.0)
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(1.0, 2.0, 3.0);
glRotatef(30.0, 0.0, 0.0, 1.0);
glTranslatef(-1.0, -2.0, -3.0);

Remember that last matrix specified in the

program is the first applied, why?
Computer Graphics: Chapter 03 – Transformation Slide: 82
 Arbitrary Matrices
Can load and multiply by matrices defined in
the application program
glLoadMatrixf(m)
glMultMatrixf(m)

The matrix m is a one dimension array of 16

elements which are the components of the
desired 4 x 4 matrix stored by columns
In glMultMatrixf, m multiplies the existing
matrix on the right

Computer Graphics: Chapter 03 – Transformation Slide: 83

 Matrix Stacks
In many situations we want to save transformation
matrices for use later
Traversing hierarchical data structures (Chapter 10)
Avoiding state changes when executing display lists
OpenGL maintains stacks for each type of matrix
Access present type (as set by glMatrixMode) by

glPushMatrix()
glPopMatrix()

Computer Graphics: Chapter 03 – Transformation Slide: 84

 Reading Back Matrices

Can also access matrices (and other parts of the

state) by query functions
glGetIntegerv
glGetFloatv
glGetBooleanv
glGetDoublev
glIsEnabled

For matrices, we use as

double m[16];
glGetFloatv(GL_MODELVIEW, m);
Computer Graphics: Chapter 03 – Transformation Slide: 85
 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
(colorcube.c) in a standard way
Centered at origin
Sides aligned with axes
Will discuss modeling in next lecture

Computer Graphics: Chapter 03 – Transformation Slide: 86

 main.c
void main(int argc, char **argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB |
GLUT_DEPTH);
glutInitWindowSize(500, 500);
glutCreateWindow("colorcube");
glutReshapeFunc(myReshape);
glutDisplayFunc(display);
glutIdleFunc(spinCube);
glutMouseFunc(mouse);
glEnable(GL_DEPTH_TEST);
glutMainLoop();
}

Computer Graphics: Chapter 03 – Transformation Slide: 87

 Idle and Mouse callbacks
void spinCube()
{
theta[axis] += 2.0;
if( theta[axis] > 360.0 ) theta[axis] -= 360.0;
glutPostRedisplay();
}
void mouse(int btn, int state, int x, int y)
{
if(btn==GLUT_LEFT_BUTTON && state == GLUT_DOWN)
axis = 0;
if(btn==GLUT_MIDDLE_BUTTON && state == GLUT_DOWN)
axis = 1;
if(btn==GLUT_RIGHT_BUTTON && state == GLUT_DOWN)
axis = 2;
}
Computer Graphics: Chapter 03 – Transformation Slide: 88
 Display callback
void display()
{
glClear(GL_COLOR_BUFFER_BIT |
GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glRotatef(theta[0], 1.0, 0.0, 0.0);
glRotatef(theta[1], 0.0, 1.0, 0.0);
glRotatef(theta[2], 0.0, 0.0, 1.0);
colorcube();
glutSwapBuffers();
}
Note that because of fixed from of callbacks, variables
such as theta and axis must be defined as globals

Camera information is in standard reshape callback

Computer Graphics: Chapter 03 – Transformation Slide: 89
 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
gluLookAt
Build models of objects
The projection matrix is used to define the view
volume and to select a camera lens

Computer Graphics: Chapter 03 – Transformation Slide: 90

 Model-view and Projection Matrices

Although both are manipulated by the same

functions, we have to be careful because
incremental changes are always made by
postmultiplication
For example, rotating model-view and projection
matrices by the same matrix are not equivalent
operations. Postmultiplication of the model-view
matrix is equivalent to premultiplication of the
projection matrix

Computer Graphics: Chapter 03 – Transformation Slide: 91

 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
M0,M1,…..,Mn so that when they are applied successively
to one or more objects we see a smooth transition
For orientating an object, we can use the fact that every
rotation corresponds to part of a great circle on a sphere
Find the axis of rotation and angle
Virtual trackball (see text)

Computer Graphics: Chapter 03 – Transformation Slide: 92

 Incremental Rotation

Consider the two approaches

For a sequence of rotation matrices
R0,R1,…..,Rn , find the Euler angles for each
and use Ri= Riz Riy Rix
Not very efficient
Use the final positions to determine the axis
and angle of rotation, then increment only
the angle
Quaternions can be more efficient than either

Computer Graphics: Chapter 03 – Transformation Slide: 93

 Quaternions

Extension of imaginary numbers from two to three

dimensions
Requires one real and three imaginary components
i, j, k q=q0+q1i+q2j+q3k

Quaternions can express rotations on sphere

smoothly and efficiently. Process:
Model-view matrix  quaternion
Carry out operations with quaternions
Quaternion  Model-view matrix

Computer Graphics: Chapter 03 – Transformation Slide: 94

 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 objects
Example: how to form an instance matrix?
Some alternatives
Virtual trackball
3D input devices such as the spaceball
Use areas of the screen
Distance from center controls angle, position,
scale depending on mouse button depressed

Computer Graphics: Chapter 03 – Transformation Slide: 95

 Building Models

Computer Graphics: Chapter 03 – Transformation Slide: 96

 Objectives

Introduce simple data structures for

building polygonal models
Vertex lists
Edge lists
OpenGL vertex arrays

Computer Graphics: Chapter 03 – Transformation Slide: 97

 Representing a Mesh

Consider a mesh e2 v5
v6 e9 e3
e8 v v4
8
e1 e11
e10
v1 e7 v7 e4
v2 e12
e6 e5 v3
There are 8 nodes and 12 edges
5 interior polygons
6 interior (shared) edges
Each vertex has a location vi = (xi yi zi)
Computer Graphics: Chapter 03 – Transformation Slide: 98
 Simple Representation

Define each polygon by the geometric locations of its

vertices
Leads to OpenGL code such as
glBegin(GL_POLYGON);
glVertex3f(x1, y1, z1);
glVertex3f(x6, y6, z6);
glVertex3f(x7, y7, z7);
glEnd();
Inefficient and unstructured
Consider moving a vertex to a new location
Must search for all occurrences

Computer Graphics: Chapter 03 – Transformation Slide: 99

 Inward and Outward Facing
Polygons
The order {v1, v6, v7} and {v6, v7, v1} are equivalent in
that the same polygon will be rendered by OpenGL but
the order {v1, v7, v6} is different
The first two describe outwardly
facing polygons
Use the right-hand rule =
counter-clockwise encirclement
of outward-pointing normal
OpenGL can treat inward and
outward facing polygons differently
Computer Graphics: Chapter 03 – Transformation Slide: 100
 Geometry vs Topology

Generally it is a good idea to look for data

structures that separate the geometry from
the topology
Geometry: locations of the vertices
Topology: organization of the vertices and
edges
Example: a polygon is an ordered list of
vertices with an edge connecting successive
pairs of vertices and the last to the first
Topology holds even if geometry changes
Computer Graphics: Chapter 03 – Transformation Slide: 101
 Vertex Lists

Put the geometry in an array

Use pointers from the vertices into this array
Introduce a polygon list x 1 y 1 z1
v1 x 2 y 2 z2
P1 v7 x 3 y 3 z3
P2 v6 x 4 y 4 z4
P3 x5 y5 z5.
P4 v8
x 6 y 6 z6
P5 v5
v6 x 7 y 7 z7
topology geometry x8 y8 z8
Computer Graphics: Chapter 03 – Transformation Slide: 102
 Shared Edges

Vertex lists will draw filled polygons correctly but

if we draw the polygon by its edges, shared edges
are drawn twice

Can store mesh by edge list

Computer Graphics: Chapter 03 – Transformation Slide: 103
 Edge List
e2 v5
x 1 y 1 z1 v6 e3
e1 v1 e8 v e 9
e2 v6 x 2 y 2 z2 e1 e11
8
e3 x 3 y 3 z3 e10
e4 e7 v7 e4
x 4 y 4 z4 v1
v2 e12
e5 x5 y5 z5. e6 e5 v3
e6
x 6 y 6 z6
e7
e8 x 7 y 7 z7 Note polygons are
e9 x 8 y 8 z8 not represented

Computer Graphics: Chapter 03 – Transformation Slide: 104

 Modeling a Cube
Model a color cube for rotating cube program

Define global arrays for vertices and colors

GLfloat vertices[][3] = {{-1.0,-1.0,-1.0},{1.0,-

1.0,-1.0},
{1.0,1.0,-1.0}, {-1.0,1.0,-1.0}, {-1.0,-1.0,1.0},
{1.0,-1.0,1.0}, {1.0,1.0,1.0}, {-1.0,1.0,1.0}};

GLfloat colors[][3] = {{0.0,0.0,0.0},{1.0,0.0,0.0},

{1.0,1.0,0.0}, {0.0,1.0,0.0}, {0.0,0.0,1.0},
{1.0,0.0,1.0}, {1.0,1.0,1.0}, {0.0,1.0,1.0}};

Computer Graphics: Chapter 03 – Transformation Slide: 105

 Drawing a polygon from a list of
indices
Draw a quadrilateral from a list of indices into the
array vertices and use color corresponding to
first index void polygon(int a, int b, int c
, int d)
{
glBegin(GL_POLYGON);
glColor3fv(colors[a]);
glVertex3fv(vertices[a]);
glVertex3fv(vertices[b]);
glVertex3fv(vertices[c]);
glVertex3fv(vertices[d]);
glEnd();
}
Computer Graphics: Chapter 03 – Transformation Slide: 106
 Draw cube from faces

void colorcube( ) 5 6
{
polygon(0,3,2,1);
polygon(2,3,7,6); 2
polygon(0,4,7,3);
1
polygon(1,2,6,5);
polygon(4,5,6,7); 7
4
polygon(0,1,5,4);
} 0 3
Note that vertices are ordered so that
we obtain correct outward facing normals

Computer Graphics: Chapter 03 – Transformation Slide: 107

 Efficiency

The weakness of our approach is that we

are building the model in the application and
must do many function calls to draw the
cube
Drawing a cube by its faces in the most
straight forward way requires
6 glBegin, 6 glEnd
6 glColor
24 glVertex
More if we use texture and lighting
Computer Graphics: Chapter 03 – Transformation Slide: 108
 Vertex Arrays

OpenGL provides a facility called vertex arrays

that allows us to store array data in the
implementation
Six types of arrays supported
Vertices
Colors
Color indices
Normals
Texture coordinates
Edge flags
We will need only colors and vertices
Computer Graphics: Chapter 03 – Transformation Slide: 109
 Initialization
Using the same color and vertex data, first we enable
glEnableClientState(GL_COLOR_ARRAY);
glEnableClientState(GL_VERTEX_ARRAY);

Identify location of arrays

glVertexPointer(3, GL_FLOAT, 0, vertices);
data array
3d arrays stored as floats data contiguous

glColorPointer(3, GL_FLOAT, 0, colors);

Computer Graphics: Chapter 03 – Transformation Slide: 110

 Mapping indices to faces

Form an array of face indices

GLubyte cubeIndices[24] = {0,3,2,1,2,3,7,6
0,4,7,3,1,2,6,5,4,5,6,7,0,1,5,4};

Each successive four indices describe a face

of the cube
Draw through glDrawElements which
replaces all glVertex and glColor calls in
the display callback
Computer Graphics: Chapter 03 – Transformation Slide: 111
 Drawing the cube
number of indices
what to draw
Method 1:
for(i=0; i<6; i++) glDrawElements(GL_POLYGON, 4,
GL_UNSIGNED_BYTE, &cubeIndices[4*i]);

format of index data start of index data

Method 2:
glDrawElements(GL_QUADS, 24,
GL_UNSIGNED_BYTE, cubeIndices);

Draws cube with 1 function call!!

Computer Graphics: Chapter 03 – Transformation Slide: 112