Transformations
Ed Angel
Professor Emeritus of Computer
Science
University of New Mexico
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
1
Objectives
• Introduce standard transformations
- Rotation
- Translation
- Scaling
- Shear
• Derive homogeneous coordinate
transformation matrices
• Learn to build arbitrary transformation
matrices from simple transformations
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
2
General Transformations
A transformation maps points to other points
and/or vectors to other vectors
v=R(u)
Q=T(P)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
3
Linear Functions
A function 𝑓 is a linear function if and only if, for any
scalars 𝛼 and 𝛽 and any two vertices (or vectors) 𝑝 and 𝑞,
𝑓 (𝛼𝑝 + 𝛽𝑞) = 𝛼𝑓 (𝑝) + 𝛽𝑓 (𝑞)
The importance of such functions is that if we know the
transformations of 𝑝 and 𝑞, we can obtain the
transformations of linear combinations of p and q by taking
linear combinations of their transformations. Hence, we
avoid having to calculate transformations for every linear
combination.
4
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
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
5
Pipeline Implementation
T (from application program)
u
transformation
v
T(u)
frame
buffer
rasterizer
T(v)
T(v)
T(v)
v
u
vertices
T(u)
vertices
T(u)
pixels
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
6
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
a, b, g: scalars
p, q, r: representations of points
-array of 4 scalars in homogeneous coordinates
u, v, w: representations of vectors
-array of 4 scalars in homogeneous coordinates
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
7
依照座標軸的方向，座標系統可分為右手和左手兩
類（如右圖所示）。 3D 繪圖通常使用右手座標系統。
OpenGL 採用左上圖所示的右手座標系統。
齊次座標
為了簡化矩陣的操作，電腦圖學常使用齊次座標系統
（homogenous coordinate system）。齊次座標系統用 n+1 維
的座標來表示 n 度空間的點。譬如：三維座標點 (x, y, z) 在
齊次座標系統中變成 (wx, wy, wz, w) ，其中第四個座標值 w
稱為齊次座標，它的值只要不等於 0 即可。反過來說，齊次
座標系統上的點 (x, y, z, w) 代表三度空間的點 (x/w, y/w, z/w) 。
Translation
• Move (translate, displace) a point to a new
location
𝑃’
d
𝑃
• Displacement determined by a vector d
- Three degrees of freedom
- 𝑃’ = 𝑃 + 𝑑
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
10
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
object
translation: every point displaced
by same vector
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
11
Translation Using
Representations
Using the homogeneous coordinate
𝑃’
representation in some frame
p=[ x y z 1]T
d
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
y’=y+dy
four dimensions and expresses
z’=z+dz
point = vector + point
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
12
Translation Matrix
We can also express translation using a
4 x 4 matrix T in homogeneous coordinates
p’=Tp where
1
0
T = T(dx, dy, dz) = 
0

0
0 0 dx 
1 0 dy 

0 1 dz 

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
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
13
Transformation Matrices
mat4 Translate ( const GLfloat x, const GLfloat y, const GLfloat z )
{
mat4 c;
1 0 0 𝑥
c[0][3] = x;
0 1 0 𝑦
c[1][3] = y;
0 0 1 𝑧
c[2][3] = z;
0 0 0 1
return c;
}
mat4 Translate( const vec3 &v );
mat4 Translate( const vec4 &v );
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
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
15
前一頁的轉換公式可以寫成底下的矩陣形式：
 x' cos q
 y '   sin q
  
 sin q   x 
cos q   y 
x'  r cos(f + q )  r (cos f cosq  sin f sin q )
 x cosq  y sin q
y '  r sin(q + f )  r (cosq sin f + sin q cos f )
 y cosq + x sin q
另解：
令 Q 是 P 逆時針旋轉 90 度所得的向量。由於 P 和
Q 垂直，所以 P’ 可以寫成以下的線性組合：
P’ = aP + bQ
P'P  P ' P cos(q )
 (aP + bQ)  P
Q = (-y,x)
x
P’
 aP  P
a P P
所以，a = cos(q)。
P 'Q  P ' Q cos( / 2  q )  P ' Q sin( q )
 (aP + b Q)  Q  bQ  Q  b Q Q
所以，b = sin(q)。
q
P = (x,y)
y
我們得到： P'  P cos(q ) + Q sin( q ) 。所以
x'  x cos(q )  y sin( q )
y '  x sin( q ) + y cos(q )
上面的式子可以寫成底下的矩陣形式：
 x' cos(q )  sin( q )  x 
 y '   sin( q ) cos(q )   y 
  
 
接下來我們列出其他三度空間的旋轉公式。
Positive Rotation in 3D ?
• Sit at + end of given axis
• Look at Origin
• CC (Counter Clockwise) Rotation is Positive direction
y
+
z
+
+
x
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
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
20
Rotation Matrix
z
R = Rz(q) =
cos q  sin q
 sin q cos q

 0
0

0
 0
0 0

0 0
1 0

0 1
(x’,y’,z)
q
(x,y,z)
x
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
y
21
繞著 x 軸旋轉 q 角度：
z
(x,y’,z’)
Rx (q )  x, y, z ,1
T
0
0
0  x 
1
x
0 cos q  sin q 0  y 
 

0 sin q cos q 0  z 

 
0
0
1  1 
0
 [ x, y  cos q  z  sin q , y  sin q + z  cos q , 1]T
(x,y,z)
q
y
繞著 y 軸旋轉 q 角度：
R y (q )  x, y, z ,1
(x’,y,z’)
T
 cos q
 0

 sin q

 0
0 sin q
1
0
0 cos q
0
0
 [ x  cos q + z  sin q ,
z
q
(x,y,z)
0  x 
0  y 
x
0  z 
 
1  1 
y,  x  sin q + z  cos q , 1]T
註：x-z-y 是左手座標系統，換成右手座標系統時， q 變
為 q。
y
• RotateX (對 x-軸旋轉)
mat4 RotateX ( const GLfloat theta )
{
GLfloat angle = DegreesToRadians * theta;
mat4 c;
c[2][2] = c[1][1] = cos(angle);
c[2][1] = sin(angle);
c[1][2] = -c[2][1];
return c;
}
1
cos(𝜃)
sin(𝜃)
0
0
−sin(𝜃)
cos(𝜃)
0
0
0
1
0
0
0
0
1
• RotateY (對 y-軸旋轉)
mat4 RotateY( const GLfloat theta )
{
GLfloat angle = DegreesToRadians * theta;
mat4 c;
c[2][2] = c[0][0] = cos(angle);
c[0][2] = sin(angle);
c[2][0] = -c[0][2];
return c;
}
cos(𝜃)
0
−sin(𝜃)
0
sin(𝜃)
1
cos(𝜃)
0
0
0
1
0
0
0
0
1
• RotateZ (對 z-軸旋轉)
mat4 RotateZ ( const GLfloat theta )
{
GLfloat angle = DegreesToRadians * theta;
mat4 c;
c[0][0] = c[1][1] = cos(angle);
c[1][0] = sin(angle);
c[0][1] = -c[1][0];
return c;
}
cos(𝜃)
sin(𝜃)
0
0
−sin(𝜃)
cos(𝜃)
0
0
0
0
1
0
0
0
0
1
對任意軸旋轉
27
A
假定 A 是任意一個單位向
量。P 點繞著方向為 A 的
軸線旋轉 q 角度得到 P’點。
q
P’
P
A
把向量 P 分解成右圖所示
的垂直於 A 和投影至 A 的
兩個部分。繞 A 旋轉時，
只影響垂直的分向量。
P
PA
 ( A  P) A
P  P  ( A  P) A
由於 A 是一個單位向量，向量外積 A  P 垂直於 P，
而且兩者的長度相同。由前述的旋轉另解推導，若
P 旋轉 q 角所得的向量 P' 滿足以下的公式：
P'  P cos(q ) + ( A  P) sin( q )
 P  ( A  P) Acos(q ) + ( A  P) sin( q )
因此，
P'  PA + P'
 ( A  P) A + P  ( A  P) Acos(q ) + ( A  P) sin( q )
 P cos(q ) + ( A  P) sin( q ) + ( A  P) A(1  cos(q ))
把前一頁最後的公式整理之後，我們得到以下
的旋轉矩陣：
 C + Ax2 (1  C )

Ax Ay (1  C ) + Az S

RA (q ) 
 Ax Az (1  C )  Ay S

0

其中，
A  ( Ax , Ay , Az ),
C  cos(q ),
S  sin( q )
Ax Ay (1  C )  Az S
C + Ay2 (1  C )
Ax Az (1  C ) + Ay S
Ay Az (1  C )  Ax S
Ay Az (1  C ) + Ax S
0
C + Az2 (1  C )
0
0

0
0

1
Scaling
Expand or contract along each axis (fixed point of origin)
x’=sxx
y’=syy
z’=szz
p’=Sp
S = S(sx, sy, sz) =
 sx
0

0

0
0
0
sy
0
0
0
sz
0
0
0

0

1
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
31
Reflection
corresponds to negative scale factors
sx = -1 sy = 1
original
sx = -1 sy = -1
sx = 1 sy = -1
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
32
• Scaling
mat4 Scale( const GLfloat x, const GLfloat y, const
GLfloat z )
{
𝑥 0 0 0
mat4 c;
0 𝑦 0 0
c[0][0] = x;
0 0 𝑧 0
c[1][1] = y;
0 0 0 1
c[2][2] = z;
return c;
}
mat4 Scale( const vec3 &v );
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)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
34
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
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
35
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
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
36
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
qx qy qz are called the Euler angles
Note that rotations do not commute
We can use rotations in another order but
with different angles
q
v
x
z
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
37
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)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
38
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
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
39
Shear
• Helpful to add one more basic transformation
• Equivalent to pulling faces in opposite directions
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
40
Shear Matrix
Consider simple shear along x axis
x’ = x + y cot q
y’ = y
z’ = z
1 cot q
0
1
H(q) = 
0
0

0
0
0 0
0 0

1 0

0 1
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
41