Computer Graphics
2D & 3D Transformation
2D Transformation
• transform composition: multiple transform on the same object (same
reference point or line!)
• p’ = T1 * T2 * T3 * …. * Tn-1 * Tn * p, where T1…Tn are transform
matrices
• efficiency-wise, for objects with many vertices, which one is better?
– 1) p’ = (T1 * (T2 * (T3 * ….* (Tn-1 * (Tn * p))…)
– 2) p’ = (T1 * T2 * T3 * …. * Tn-1 * Tn) * p
• matrix multiplication is NOT commutative, in general
–
–
–
–
(T1 * T2) * T3 != T1 * (T2 * T3)
translate  scale may differ from scale  translate
translate  rotate may differ from rotate  translate
rotate  non-uniform scale may differ from non-uniform scale  rotate
2D Transformation
• commutative transform composition:
–
–
–
–
translate 1  translate 2 == translate 2  translate 1
scale 1  scale 2 == scale 2  scale 1
rotate 1  rotate 2 == rotate 2  rotate 1
uniform scale  rotate == rotate  uniform scale
• matrix multiplication is NOT commutative, in general
–
–
–
–
(T1 * T2) * T3 != T1 * (T2 * T3)
translate  scale may differ from scale  translate
translate  rotate may differ from rotate  translate
rotate  non-uniform scale may differ from non-uniform scale  rotate
3D Transformation
• simple extension of 2D by adding a Z coordinate
• transformation matrix: 4 x 4
• 3D homogeneous coordinates: p = [x y z w]T
• Our textbook and OpenGL use a RIGHT-HANDED system
y
note: z axis comes toward the
viewer from the screen
x
z
3D Translation
1
0
0
tx
0
1
0
ty
0
0
1
tz
0
0
0
1
T (tx, ty, tz) =
3D Scale
sx
0
0
0
0
sy
0
0
0
0
sz
0
0
0
0
1
S (sx, sy, sz) =
3D Rotation about x-axis
1
0
0
0 cos(θ) -sin(θ)
0
0
Rx (θ) =
0 sin(θ)
0
0
cos(θ) 0
0
note: x-coordinate does not change
1
3D Rotation about x-axis
• suppose we have a unit cube at the origin
–
–
–
–
blue vertex
green vertex
yellow vertex
red vertex
(0, 1, 0)  Rx(90)  (0, 0, -1)
(0, 1, 1)  Rx(90)  (0, 1, -1)
(1, 1, 0)  Rx(90)  (1, 0, -1)
(1, 1, 1)  Rx(90)  (1, 1, -1)
• rotate this cube about the x-axis by 90 degrees
y
y
x
z
z
3D Rotation about y-axis
cos(θ) 0
0
1
sin(θ)
0
0
0
cos(θ)
0
0
1
Ry (θ) =
-sin(θ) 0
0
0
note: y-coordinate does not change, and
the signs of these two are different from Rx and Rz
3D Rotation about y-axis
• suppose you are at (0, 10, 0) and you look down towards the Origin
• you will see x-z plane and the new coordinates after rotation can be
found as before (2D rotation about (0, 0): vertices on x-y plane) x
• x’ = z * sin(θ) + x * cos(θ): same
z’ = z * cos(θ) – x * sin(θ): different
(x’, z’)
θ
(x, z)
z
note: y-coordinate does not change, and
the signs of these two are different from Rx and Rz
3D Rotation about y-axis
• p (x, z) = (R * cos(a), R * sin(a))
• p’(x’, z’) = (R * cos(b), R* sin(b))  b = a – θ
• x’ = R * cos(a - θ) = R * (cos(a)cos(θ) + sin(a)sin(θ))
= R cos(a)cos(θ) + R sin(a)sin(θ)  x = Rcos(a), z = Rsin(a)
= x*cos(θ) + z*sin(θ)
• z’ = R * sin(a – θ)
= R * (sin(a)cos(θ) – cos(a)sin(θ))
= R sin(a)cos(θ) – R cos(a)sin(θ)
= z*cos(θ) – x*sin(θ)
= -x*sin(θ) + z*cos(θ)
(x’, z’)
θ
(x, z)
z
x
3D Rotation about y-axis
cos(θ) 0
0
1
sin(θ)
0
0
0
cos(θ)
0
0
1
Ry (θ) =
-sin(θ) 0
0
0
note: y-coordinate does not change, and
the signs of these two are different from Rx and Rz
3D Rotation about z-axis
cos(θ) -sin(θ) 0
0
sin(θ) cos(θ) 0
0
Rz (θ) =
0
0
1
0
0
0
0
1
note: z-coordinate does not change
Transform Properties
• translation on same axes: additive
– translate by (2, 0, 0), then by (3, 0, 0)  translate by (5, 0, 0)
• rotation on same axes: additive
– Rx (30), then Rx (15)  Rx(45)
• scale on same axes: multiplicative
– Sx(2), then Sx(3)  Sx(6)
• rotations on different axis are not commutative
– Rx(30) then Ry (15) != Ry(15) then Rx(30)
OpenGL Transformation
• keeps a 4x4 floating point transformation matrix globally
• user’s command (rotate, translate, scale) creates a matrix which is
then multiplied to the global transformation matrix
• glRotate{f/d}(angle, x, y, z): rotates current transformation matrix
counter-clockwise by angle about the line from the Origin to (x,y,z)
– glRotatef(45, 0, 0, 1): rotates 45 degrees about the z-axis
– glRotatef(45, 0, 1, 0): rotates 45 degrees about the y-axis
– glRotatef(45, 1, 0, 0): rotates 45 degrees about the x-axis
• glTranslate{f/d}(tx, ty, tz)
• glScale{f/d}(sx, sy, sz)
OpenGL Transformation
• OpenGL transform commands are applied in reverse order
• for example,
glScalef(3, 1, 1);
 S(3,1,1)
glRotatef(45, 1, 0, 0);
 Rx(45)
glTranslatef(10, 20, 0);
 T(10,20,0)
line.draw();
 line is drawn translated, rotated and scaled
• transformations occur in reverse order to reflect matrix multiplication
from right to left
– S(3,1,1) * Rx(45) * T(10, 20, 0) * line = (S * (R * T)) * line
• user can compute S * R * T and issue glMultMatrixf(matrix);
– multiplies matrix with the global transformation matrix
OpenGL Transformation
• glMatrixMode(GL_MODELVIEW); must be called first before
issuing transformation commands
• glMatrixMode(GL_PROJECTION); must be called to set up
perspective viewing  will be discussed later
• individual transformations are not saved by OpenGL but users are
able to save these in a stack(glPushMatrix(), glPopMatrix(),
glLoadIdentity())  very useful when drawing hierarchical scenes
• glLoadMatrixf(matrix); replaces the global transformation matrix
with matrix
OpenGL Transformation
• argument to glLoadMatrix, glMultMatrix is an array of 16 floating
point values
• for example,
– float mat[] = {
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
};
// 1st row
// 2nd row
// 3rd row
// 4th row
• lab time: copy files in hw0a to hw0b (use this directory for lab)
– replace glScalef, glRotatef, glTranslatef in display() method with
glMultMatrixf command with our own transformation matrix