Computer Graphics
Chapter 5
Geometric Transformations
f
Somsak Walairacht, Computer Engineering, KMITL
1
Outline








Computer Graphics
Basic Two-Dimensional
Two Dimensional Geometric Transformations
Matrix Representations and Homogeneous
Coordinates
Inverse Transformations
Two-Dimensional
Two
Dimensional Composite Transformations
Other Two-Dimensional Transformations
Raster Methods for Geometric Transformations
OpenGL Raster Transformations
Transformations between Two
Two-Dimensional
Dimensional
Coordinate Systems
2
Outline (2)
( )

Geometric Transformations in Three
Three-Dimensional
Dimensional
Space







Computer Graphics
Translation
Rotation
Scaling
Composite Three-Dimensional Transformations
Other Three-Dimensional Transformations
Transformations between Three-Dimensional
Coordinate Systems
Affine Transformations
3
Introduction



Operations that are applied to the geometric
description of an object to change its position,
orientation, or size are called geometric
transformations
Sometimes geometric-transformation operations are
also referred to as modeling transformations
A distinction between the two


Computer Graphics
Modeling transformations are used to construct a scene or to
give the
h hierarchical
h
h l description
d
off a complex
l object
b
that
h is
composed of several parts
Geometric transformations describe how objects
j
might
g move
around in a scene during an animation sequence or simply
to view them from another angle
4
Basic Two-Dimensional
Two Dimensional
Geometric
Geo
e
Transformations
a so a o s

Available in all graphics packages are




Other useful transformation routines are


Computer Graphics
Translation
Rotation
S li
Scaling
Reflection
Shearing
5
Two-Dimensional
o
e s o a Translation
a sa o

To translate a two-dimensional p
position,, we add translation
distances tx and ty to the original coordinates (x, y) to obtain the
new coordinate position (x’, y’)

T
Translation
l ti equations
ti
in
i the
th matrix
ti

Translation is a rigid-body transformation that moves objects
without deformation
การทาใหผดรู
ํใ ้ ิ ป
Computer Graphics
6
Polygon
yg Translation


Computer Graphics
A polygon is translated similarly
Adding a translation vector to the coordinate
position of each vertex and then regenerate
the polygon using the new set of vertex
coordinates
7
Two-Dimensional Rotation



A rotation transformation is generated by specifying a
rotation axis and a rotation angle
Parameters are the rotation angle θ and a position
( r, yr) called
(x
ll d the
th rotation
t ti point
i t (or
( pivot
i t point),
i t) จุดหมุน
about which the object is to be rotated
A positive value for the angle θ defines a
counterclockwise rotation about the pivot point
ทวนเข็มนาฬิกา
Computer Graphics
8
Two-Dimensional Rotation (2)
( )

Computer Graphics
Let r is the constant distance of the point
from the origin, angle  is the original angular
position of the point
p
p
from the horizontal,, and
θ is the rotation angle
9
Rotation about Arbitraryy Point


Computer Graphics
Transformation equations for rotation of a point
about any specified rotation position (xr, yr)
Rotations are rigid body transformations that move
objects without deformation
10
Two-Dimensional Scaling
g


Computer Graphics
A simple
p two-dimensional scaling
g operation
p
is performed
p
byy
multiplying object positions (x, y) by scaling factors sx and sy to
produce the transformed coordinates (x’, y’)
I matrix
In
t i format,
f
t where
h
S iis a 2x2
2 2 scaling
li matrix
ti
11
Scaling
g byy a Fixed Point


Coordinates for the fixed p
point,, (x
( f, yf ), are often chosen at
some object position, such as its centroid
Objects are now resized by scaling the distances between object
points and the fixed point
where the additive terms xf(1−sx) and
yf(1−s
(1 sy) are constants for all points in the object
Computer Graphics
12
Matrix Representations and
Homogeneous
o oge eous Coo
Coordinates
d a es

Many graphics applications involve sequences
of geometric transformations


Computer Graphics
An animation might require an object to be
translated and rotated at each increment of the
motion
i
The viewing transformations involve sequences of
translations and rotations to take us from the
original scene specification to the display on an
output device
d
13
Matrix Representations and
Homogeneous
o oge eous Coo
Coordinates
d a es



Computer Graphics
Matrix M1 is a 2x2 array containing multiplicative
factors, and M2 is a two-element
two element column matrix (2x1
matrix) containing translational terms
Multiplicative
p
and translational terms can be
combined into a single matrix if we expand the
representations to 3x3
A three-element representation (xh, yh, h), called
homogeneous coordinates, where the homogeneous
parameter
t h iis a nonzero value
l such
h that
th t
14
Matrix Representations and
Homogeneous
o oge eous Coo
Coordinates
d a es

Two-Dimensional
Two
Dimensional Translation Matrix

Rotation Matrix

Scaling Matrix
Computer Graphics
15
Inverse
e se Transformations
a so a o s

Inverse translation matrix


Inverse rotation matrix


Computer Graphics
Translate in the opposite direction
Rotate in the clockwise direction
Inverse scaling matrix
16
Two Dimensional Composite
Two-Dimensional
Transformations
a so a o s



Computer Graphics
Forming products of transformation matrices is often
referred to as a concatenation, or composition, of
matrices
We do premultiply the column matrix by the matrices
representing any transformation sequence
Since many positions in a scene are typically
transformed by the same sequence, it is more
efficient
ffi i t to
t first
fi t multiply
lti l the
th transformation
t
f
ti matrices
ti
to form a single composite matrix
17
Composite Two-Dimensional
Two Dimensional
Translations


Computer Graphics
If two successive translation vectors ((t1x, t1y) and (t
( 2x, t2y) are
applied to a 2-D coordinate position P, the final transformed
location P’ is
The composite transformation matrix for this sequence of
translations is
18
Composite Two-Dimensional
Two Dimensional
Rotations



Computer Graphics
Two successive rotations applied to a point P
We can verify that two successive rotations are
additive:
The composition matrix
19
Composite Two-Dimensional
Two Dimensional
Scaling
g

Computer Graphics
For two successive scaling operations in
2-D produces the following composite
scaling matrix
20
General Two
Two-Dimensional
Dimensional
Pivot-Point Rotation


Graphics package provides only a rotate
function with respect to the coordinate
origin
g
To generate a 2-D rotation about any other
pivot point
p
p
(x
( r, yr), follows the sequence
q
of
translate-rotate-translate operations
Translate the object so that the pivot-point
position is moved
d to the
h coordinate
d
origin
2. Rotate the object about the coordinate origin
3. Translate
T
l t th
the object
bj t so th
thatt th
the pivot
i t point
i t iis
returned to its original position
1.
Computer Graphics
21
General Two
Two-Dimensional
Dimensional
Pivot-Point Rotation (2)
( )
Computer Graphics
22
General Two
Two-Dimensional
Dimensional
Fixed-Point Scaling
g
1.
2.
3
3.
Computer Graphics
Translate the object
j
so that the fixed point
p
coincides with the
coordinate origin
Scale the object with respect to the coordinate origin
Use the inverse of the translation in step (1) to return the
object to its original position
23
General Two
Two-Dimensional
Dimensional
Scaling
g Directions

To accomplish the scaling without changing the
orientation of the object
1.
2.
3.
Computer Graphics
Performs a rotation so that the directions for s1 and s2
coincide with the x and y axes
Scaling transformation S(s1, s2) is applied
An opposite rotation to return points to their original
orientations
i t ti
24
Example of Scaling
Transformation

Turn a unit square into a parallelogram by stretching
it along the diagonal from (0, 0) to (1, 1)



Computer Graphics
Rotate the diagonal
g
onto the y axis using
g θ = 45
Double its length with the scaling values s1=1 and s2=2
Rotate again to return the diagonal to its original orientation
25
Matrix Concatenation
Properties
p

Multiplication
p
of matrices is associative

Depending upon the order in which the transformations

Premultiplying, concatenated transformations are applied from right to left
Postmultiplying, concatenated transformations are applied from left to right

Premultiplying



V’ = [M1 * M2 * M3] * V
Postmultiplying

V’T = VT * [M3 * M2 * M1]T
Computer Graphics
26
Matrix Concatenation
Properties
p
(2)
( )

Transformation p
products mayy not be commutative



Some special cases the multiplication of transformation matrices
is commutative

Computer Graphics
M2  M1 is not equal to M1  M2
Be careful about the order to translate and rotate an object
Two successive rotations g
give the same final position
p
27
General Two-Dimensional Composite
Transformations
f
and
dC
Computationall
Efficiencyy


From ((5.41),
), it requires
q
9 multiplications
p
and 6
additions
Actually, only 4 multiplications and 4 additions


Computer Graphics
Once matrix is concatenated
concatenated, it is maximum number of
computations required
Without concatenation, individual transformations would be
applied one at a time,
time and the number of calculations could
be significantly increased
28
Computational
p
Efficiencyy (2)
( )



Computer Graphics
Rotation calculations require trigonometric
evaluations and several multiplications
Computational efficiency can become an important
consideration in rotation transformations
For small enough
g angles
g
(less
(
than 10),
), cosθ is
approximately 1.0 and sinθ has a value very close to
the value of θ in radians
29
Computational
p
Efficiencyy (3)
( )


Composite transformations often
involve inverse matrices
Operations are much simpler than direct
inverse matrix calculations


Computer Graphics
Inverse translation matrix is obtained by
changing the signs of the translation
distances
I
Inverse
rotation
t ti matrix
t i iis obtained
bt i d by
b
performing a matrix transpose
30
Two Dimensional Rigid
Two-Dimensional
Rigid-Body
Body
Transformation


All angles and distances between coordinate
positions are unchanged by the
transformation
Upper-left 2x2 submatrix is an orthogonal
matrix


Computer Graphics
Two row vectors (rxx, rxy) and (ryx, ryy) (or the two
col mn vectors)
column
ecto s) fo
form
m an orthogonal
o thogonal set of unit
nit
vectors
Set of vectors is also referred to as an
orthonormal vector set
31
Two Dimensional Rigid
Two-Dimensional
Rigid-Body
Body
Transformation
Slide #22

Each vector has unit length

Their dot product is 0

If these unit vectors are transformed by the rotation sub-matrix, then

Example,
Computer Graphics
32
Constructing Two
Two-Dimensional
Dimensional
Rotation Matrices


Computer Graphics
The orthogonal
g
property
p p y of rotation matrices is useful for
constructing the matrix when we know the final orientation of
an object
In modeling application, we can obtain the transformation
matrix within object’s co-or system when knowing its orientation
within overall word co-or system
33
Other Two
Two-Dimensional
Dimensional
Transformations
a so a o s


Computer Graphics
Reflection
Shear
34
Reflection

Computer Graphics
Reflection about the line
y = 0 (the x axis) is
accomplished with the
transformation matrix

A reflection about the
line x = 0 (the y axis)
flips x coordinates while
keeping y coordinates
the same
35
Reflection (2)
( )

Computer Graphics
Reflection relative to
the coordinate origin

Reflection axis as the
diagonal line y = x
36
Shear



Computer Graphics
A transformation that distorts the shape of an object
The transformed shape appears as if the object were
composed of internal layers that had been caused to
slide
lid over each
h other
th
An x-direction shear relative to the x axis
37
Shear (2)
( )

xx-direction
direction shears relative to other reference lines

y-direction shear relative to the line x = xref
Computer Graphics
38
Raster Methods for Geometric
Transformations
a so a o s


Computer Graphics
All bit settings in the rectangular area shown are copied as a block into
another
h part off the
h frame
f
buffer
b ff
Rotate a two-dimensional object or pattern 90
90 counterclockwise by
reversing the pixel values in each row of the array, then interchanging
rows and columns
39
Raster Methods for Geometric
Transformations
a s o a o s ((2))


Computer Graphics
For array rotations that are not multiples of
90, we need to do some extra processing
Similar methods to scale a block of pixels
40
Transformations between TwoDimensional Coordinate Systems


Computer-graphics
p
g p
applications
pp
involve coordinate
transformations from one reference frame to another during
various stages of scene processing
To transform object descriptions from xy co-or
co or to x’y’
x y co
co-or
or
1.
2.
Computer Graphics
Translate so that the origin (x0, y0) of the x’y’ system is moved to
the origin (0, 0) of the xy system
Rotate the x’
x axis onto the x axis
41
Transformations between 2
2-D
D
Coordinate
Coo
d a e Systems
Sys e s ((2))




Computer Graphics
Alternative method
Specify a vector V that indicates the direction for the
positive y’ axis
Obtain the unit vector u along the x’ axis by applying
a 90 clockwise rotation to vector v
Rotation mat
matrix
i could
co ld be expressed
e p essed as elements of a
set of orthonormal vectors
42
Geometric Transformations in
Three-Dimensional
ee
e s o a Spa
Space
e

Computer Graphics
A position P
P=(x,
(x, y, z) in 3
3-D
D is translated to a
location P’=(x’, y’, z’) by adding translation distances
tx, ty, and tz
43
3-Dimensional Rotation

z-axis
i rotation
i
cos 

 sin 
 0

 0
Computer Graphics
 sin 
cos 
0
0
0 0
0 0
1 0

0 1
44
3-Dimensional Rotation (2)
( )

Transformation equations for rotations about the
other two coordinate axes can be obtained with a
cyclic permutation of the coordinate parameters x, y,
and z
xyzx
Computer Graphics
45
3-Dimensional Rotation (3)
( )

0
1
0 cos 

0 sin 

0
0
xx-axis
axis rotation
0
 sin 
cos 
0
Computer Graphics
0
0
0

1

yy-axis
axis rotation
 cos 
 0

 sin 

 0
0 sin 
1
0
0 cos 
0
0
0
0
0

1
46
Composite Three-Dimensional
Three Dimensional
Transformations
a so a o s

A rotation matrix for any axis that does not
coincide with a coordinate axis
1.
2.
3.
Computer Graphics
Translate the object so that the rotation axis
coincides with the parallel coordinate axis
Perform the specified rotation about that axis
Translate the object
j
so that the rotation axis is
moved back to its original position
47
Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s ((2))

A coordinate position P is transformed with the
sequence
where
Computer Graphics
48
Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s (3)


Rotate about an axis that is not parallel to one of
the coordinate axes
Transformation requires 5 steps
1.
2.
3.
4.
5
5.
Computer Graphics
Translate the object so that the rotation axis passes
through the coordinate origin
Rotate the object so that the axis of rotation coincides with
one of the coordinate axes
Perform the specified rotation about the selected coordinate
axis
Apply inverse rotations to bring the rotation axis back to its
original orientation
Apply the inverse translation to bring the rotation axis back
to its original spatial position
49
Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s ((4))
Computer Graphics
50
Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s (5)

The components
p
of the rotation-axis vector

The unit rotation-axis vector u

Move the point P1 to the origin


x-axis rotation gets u into the xz plane
yy-axis
axis rotation swings u around to the z axis
Computer Graphics
51
Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s (6)


Rotate around the x axis to get u into
the xz plane
Rotation matrix
0
1
0 cos 

0 sin 

0
0
Computer Graphics
0
 sin 
cos 
0
|uz|=1, |u’|=d
0
0
0

1
52
Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s ((7))



Resulting from the rotation about
x axis is a vector labeled u’’
Rotation angle β
The transformation matrix for rotation of u’’
about the y axis is
 cos 
 0

 sin 

 0
Computer Graphics
0 sin 
1
0
0 cos 
0
0
0
0
0

1
53
Composite Three-Dimensional
Three Dimensional
Transformations
a s o a o s (8)



Computer Graphics
The rotation axis is aligned with the positive z axis
Apply the specified rotation angle θ
To complete the required rotation about the given
axis we need to transform the rotation axis back to
axis,
its original position
54
Quaternion Methods for
Three-Dimensional Rotations

A more efficient method


Require less storage space than 4x4 matrices
Important in animations, which often require complicated motion
sequences
q
and motion interpolations
p
between two given
g
positions
p
of an object
q=(a,b,c)
MR() = Rx-1() Ry-1() Rz() Ry() Rx()
Computer Graphics
55
ควอเทอเนียน

ควอเทอเนยนทแทนการหมุ
ควอเทอเนี
ยนทีแ
่ ทนการหมนเป็
นเปนมุ
นมม
ม 
รอบแกน (x, y, z) คือ




cos ; x sin , y sin , z sin
2
2
2
2

Computer Graphics
ระวังว่า (x, y, z) ต ้องเป็ นเวกเตอร์หนึง่ หน่วย
56
ตัวอย่าง

จงหาควอเทอเนยนทแทนการหมุ
จงหาควอเทอเนี
ยนทีแ
่ ทนการหมนเป็
นเปนมุ
นมม
ม 60 องศา
รอบแกน (1,1,1)




เวกเตอร์หนึง่ หน่วยของแกนคือ 1
3 ,1
3 ,1
3

คํานวณค่า cos และ sin
cos 30  3 2 , sin 30  1 2
และจะได ้ว่าควอเทอเนียนคือ
3 1
1
1
;
,
,
2 2 3 2 3 2 3
Computer Graphics
57
ตัวอย่าง

ควอเทอเนียนต่อไปนีแ
ควอเทอเนยนตอไปนแทนการหมุ
้ ทนการหมนกี
นกองศา
อ
่ งศา รอบแกนอะไร?
1
6 6
;0,
,
2
4 4

 1
เราได ้ว่า cos   sin 60
2


2
ฉะนน
ฉะนั
น
้   120
แกนทีห
่ มุนรอบคือ
1 
6 6
 0,

,

sin 60  4 4 
Computer Graphics
2
6 6 
2 2
 0,
   0,

,
,



3  4 4   2 2 
58
Other Three-Dimensional
Three Dimensional
Transformations
a so a o s

Computer Graphics
Scaling
59
Other Three-Dimensional
Three Dimensional
Transformations
a s o a o s ((2))

Reflection

Shear
Computer Graphics
60
Transformations between ThreeDimensional Coordinate Systems


An xx’y’z’
y z system is defined with respect to an xyz
system
To transfer the xyz coordinate descriptions to the
x’y’z’
’ ’ ’ system
t



Translation that brings the x’y’z’ coordinate origin to the xyz
o g
origin
A sequence of rotations that align corresponding coordinate
axes
A scaling transformation may also be necessary
T(-x0, -y0, -z0)
The composition matrix is RT
RT
Computer Graphics
61
Two main classes of
Transformations
a so a o s
การแปลงสัมพรรค

Affine transformations can be represented
by a matrix


Structure deforming transformations are
nonlinear, and cannot be represented by a
matrix

Computer Graphics
A sett off affine
ffi transformations
t
f
ti
can b
be
combined into a single overall affine
transformation
Ex. tapering, twisting, bending
62
Affine
e Transformations
a so a o s




An affine transformation is a form of coordinate transformation
An affine transformation preserves angles and lengths
Parallel lines are transformed into parallel lines and finite points
map to finite points
Examples


Computer Graphics
Translation, rotation, scaling, reflection, and shear
C
Conversion
i off coordinate
di
descriptions
d
i i
from
f
one reference
f
system to
another
63
Affine Transformations

To represent
p
affine transformations with matrices,, we must use
homogeneous coordinates

a 2-vector (x, y) as a 3-vector (x, y, 1), and similarly for higher
dimensions

Translation can be expressed with matrix multiplication


Any linear transformation can be represented by a g
general
transformation
f
matrix

Computer Graphics
The functional form x' = x + tx; y' = y + ty
Translation can be seamlessly intermixed with all other types of
transformations
64
OpenGL Geometric
GeometricTransformation
a s o a o Functions
u
o s

Basic OpenGL Geometric Transformations







OpenGL Matrix Operations


Computer Graphics
glTranslate* (tx, ty, tz);
glTranslatef (25.0,
g
(
, -10.0,, 0.0);
);
glRotate* (theta, vx, vy, vz);
glRotatef (90.0, 0.0, 0.0, 1.0);
glScale* (sx, sy, sz);
glScalef (2.0, -3.0, 1.0);
glMatrixMode
glMat
i Mode (GL_MODELVIEW);
GL MODELVIEW
glMatrixMode (GL_PROJECTION);
65
End of Chapter
p
5
Computer Graphics
66