Transformation Matrix

Wanho Choi(wanochoi.com)

http://wanochoi.com

• 2D

• 3D

q( ′x , ′y )p(x, y)

q( ′x , ′y , ′z )p(x, y, z)

Transformation (변환, 變換)

• 2D

• 3D

q( ′x , ′y )p(x, y)

q( ′x , ′y , ′z )p(x, y, z)

Transformation (변환, 變換)

2D Scale• About origin

x − axis

y − axis

origin

q( ′x , ′y )

p(x, y)

x : ′x = 1:ay : ′y = 1:b

′x = ax′y = by

• About origin

θ

2D Rotation

p(x, y)

q( ′x , ′y )

x − axis

y − axis

origin

• About origin

θ

2D Rotation

p(x, y)

q( ′x , ′y )

x − axis

y − axis

origin

θ

• About origin

θ

x

y θ

2D Rotation

p(x, y)

q( ′x , ′y )

x − axis

y − axis

origin

θ

π2−θ

• About origin

θ

θ

xsinθ

xcosθ

x

y

2D Rotation

p(x, y)

q( ′x , ′y )

x − axis

y − axis

origin

θ

π2−θ

• About origin

θ

θ

xsinθ

xcosθ

ycosθ

ysinθ

x

y

2D Rotation

p(x, y)

q( ′x , ′y )

x − axis

y − axis

origin

θ

π2−θ

• About origin

θ

θ

xsinθ

xcosθ

ycosθ

ysinθ

x

y

2D Rotation

p(x, y)

q( ′x , ′y )

x − axis

y − axis

origin

θ

π2−θ

′x = xcosθ − ysinθ′y = xsinθ + ycosθ

2D Translation

′x = x + dx′y = y + dy

x − axis

y − axis

origin

q( ′x , ′y )

p(x, y)

dx

dy

All Together• 2D scale

• 2D rotation

• 2D translation

′x = ax′y = by

′x = xcosθ − ysinθ′y = xsinθ + ycosθ

′x = x + dx′y = y + dy

As Matrices• 2D scale

• 2D rotation

• 2D translation

′x = ax′y = by

′x = xcosθ − ysinθ′y = xsinθ + ycosθ

′x = x + dx′y = y + dy

′x′y

⎡

⎣⎢⎢

⎤

⎦⎥⎥= a 0

0 b⎡

⎣⎢

⎤

⎦⎥

xy

⎡

⎣⎢⎢

⎤

⎦⎥⎥

′x′y

⎡

⎣⎢⎢

⎤

⎦⎥⎥= cosθ −sinθ

sinθ cosθ⎡

⎣⎢

⎤

⎦⎥

xy

⎡

⎣⎢⎢

⎤

⎦⎥⎥

′x′y

⎡

⎣⎢⎢

⎤

⎦⎥⎥= xy⎡

⎣⎢⎢

⎤

⎦⎥⎥+ dxdy⎡

⎣⎢⎢

⎤

⎦⎥⎥

As Matrices• 2D scale

• 2D rotation

• 2D translation

′x = ax′y = by

′x = xcosθ − ysinθ′y = xsinθ + ycosθ

′x = x + dx′y = y + dy

′x′y

⎡

⎣⎢⎢

⎤

⎦⎥⎥= a 0

0 b⎡

⎣⎢

⎤

⎦⎥

xy

⎡

⎣⎢⎢

⎤

⎦⎥⎥

′x′y

⎡

⎣⎢⎢

⎤

⎦⎥⎥= cosθ −sinθ

sinθ cosθ⎡

⎣⎢

⎤

⎦⎥

xy

⎡

⎣⎢⎢

⎤

⎦⎥⎥

′x′y

⎡

⎣⎢⎢

⎤

⎦⎥⎥= xy⎡

⎣⎢⎢

⎤

⎦⎥⎥+ dxdy⎡

⎣⎢⎢

⎤

⎦⎥⎥

matrix × vector

matrix × vector

vector + vector

Simple Trick• 2D scale

• 2D rotation

• 2D translation

′x = ax′y = by

′x = xcosθ − ysinθ′y = xsinθ + ycosθ

′x = x + dx′y = y + dy

′x′y1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥=

a 0 00 b 00 0 1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

xy1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

′x′y1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥=

cosθ −sinθ 0sinθ cosθ 00 0 1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

xy1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

′x′y1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥=

1 0 dx0 1 dy0 0 1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

xy1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

matrix × vector

matrix × vector

matrix × vector

Transformation Matrices• 2D scale

• 2D rotation

• 2D translation

′x = ax′y = by

′x = xcosθ − ysinθ′y = xsinθ + ycosθ

′x = x + dx′y = y + dy

′x′y1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥=

a 0 00 b 00 0 1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

xy1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

′x′y1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥=

cosθ −sinθ 0sinθ cosθ 00 0 1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

xy1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

′x′y1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥=

1 0 dx0 1 dy0 0 1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

xy1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

q = Sp

q = Rp

q = Tp

Homogeneous Coordinate• Introduced by August Ferdinand Möbius (1790~1868) (a German mathematician and theoretical astronomer)

• A 2D point is represented by a 3D point.

• It has somewhat complex background, but you can think that it is just a trick.

′x′y1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥=

e00 e01 e01e10 e11 e12e20 e21 e22

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

xy1

⎡

⎣

⎢⎢⎢

⎤

⎦

⎥⎥⎥

x, y,1( ) → ′x , ′y ,1( ) instead of x, y( ) → ′x , ′y( )

2D Point vs 2D Vector• 2D point:

• When transforming a vector using transformation matrices, we must not consider the translation.

• Therefore, 2D vector:

(x, y,1)

(x, y,0)

(0,0) (1,0)

(0,1)

dx = 1, dy = 1(1,1) (2,1)

(1,2)(0,1)right

wrong

Addition/Subtraction of Point/Vector• Vector + Vector = Vector (vector addition)

• Vector - Vector = Vector (vector subtraction)

• Point + Point: undefined

• Point - Point = Vector (displacement)

• Point + Vector = Point (translation)

• Point - Vector = Point (translation)

Addition/Subtraction of Point/Vector• Vector + Vector = Vector (vector addition)

• Vector - Vector = Vector (vector subtraction)

• Point + Point = Point (practically)

• Point - Point = Vector (displacement)

• Point + Vector = Point (translation)

• Point - Vector = Point (translation)

Position Vector (위치 벡터) • The addition of two points is not defined

mathematically.• But, we need this operation practically.

(for example, the center of points)

• For solving this problem, we introduce the concept of “position vector”.

• A point is regarded as a vector (from the origin to the point position) temporarily for the computation.

c = p1 + p2 + p3 +!+ pnn

Operating Order• The result depends on the order of operations.

rotate translate

translate rotate

q = TRp

q = RTp

The Order of Operations• The result depends on the order of operations.

• But usually, scale → rotation → translation

TRSp ≠ TSRp ≠ SRTp ≠ RSTp ≠!

Sp → R Sp( ) → T R Sp( )( ) = TRSp

′x = axcosθ − bysinθ + dx′y = axsinθ + bycosθ + dy

• 2D

• 3D

q( ′x , ′y )p(x, y)

q( ′x , ′y , ′z )p(x, y, z)

Transformation (변환, 變換)

3D Transformation

′y′z

⎡

⎣⎢⎢

⎤

⎦⎥⎥=

cosβ −sinβsinβ cosβ

⎡

⎣⎢⎢

⎤

⎦⎥⎥

yz

⎡

⎣⎢⎢

⎤

⎦⎥⎥

′z′x

⎡

⎣⎢

⎤

⎦⎥ =

cosγ −sinγsinγ cosγ

⎡

⎣⎢⎢

⎤

⎦⎥⎥

zx

⎡

⎣⎢

⎤

⎦⎥

′x′y

⎡

⎣⎢⎢

⎤

⎦⎥⎥= cosα −sinα

sinα cosα⎡

⎣⎢

⎤

⎦⎥

xy

⎡

⎣⎢⎢

⎤

⎦⎥⎥

′x′y′z1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

=

a 0 0 00 b 0 00 0 c 00 0 0 1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

′x′y′z1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

=

1 0 0 dx0 1 0 dy0 0 1 dz0 0 0 1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

xyz1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

3D Transformation

Rz (α ) =

cosα −sinα 0 0sinα cosα 0 00 0 1 00 0 0 1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

Rx (β ) =

1 0 0 00 cosβ −sinβ 00 sinβ cosβ 00 0 0 1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

Ry(γ ) =

cosγ 0 sinγ 00 1 0 0

−sinγ 0 cosγ 00 0 0 1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

S =

a 0 0 00 b 0 00 0 c 00 0 0 1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

T =

1 0 0 dx0 1 0 dy0 0 1 dz0 0 0 1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

Six Rotation Orders• • • • • •

RxRyRzRxRzRyRyRxRzRyRzRxRzRxRyRzRyRx

Rz (γ ) ⋅Ry(β ) ⋅Rx (α ) =

cosγ 0 sinγ 00 1 0 0

−sinγ 0 cosγ 00 0 0 1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

1 0 0 00 cosβ −sinβ 00 sinβ cosβ 00 0 0 1

⎡

⎣

⎢⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥⎥

cosα −sinα 0 0sinα cosα 0 00 0 1 00 0 0 1

⎡

⎣

⎢⎢⎢⎢

⎤

⎦

⎥⎥⎥⎥

Affine Transformation• Translation, rotation, scaling, shear, and reflection

• It preserves parallelism, and ratios of distances between points lying on a straight line.

• But, it does not necessarily preserve angles between lines.

Affine Transformation

M =

m00 m01 m02 m03m10 m11 m12 m13m20 m21 m22 m23m30 m31 m32 m33

0 1

translationrotation and/or shearscale and/or reflection

Non Affine Transformation

Classes of Transformations• Rigid Transformation: distance preserving• Translation + Rotation

• Similarity Transformation: angle preserving• Rigid + Isotropic Scale

• Affine Transformation: line parallelism/ratio preserving• Similarity + Scale + Shear + Reflection

v: pivot pointM: transformation matrix

Transformation with a Pivot

q =M(p − v)+ v

1 0 pivot.x0 1 pivot.y0 0 1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟⋅cosθ −sinθ 0sinθ cosθ 00 0 1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟⋅1 0 − pivot.x0 1 − pivot.y0 0 1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

=1 0 pivot.x0 1 pivot.y0 0 1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟⋅cosθ −sinθ − pivot.x ⋅cosθ + pivot.y ⋅sinθsinθ cosθ − pivot.x ⋅sinθ − pivot.y ⋅cosθ0 0 1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

=cosθ −sinθ − pivot.x ⋅cosθ + pivot.y ⋅sinθ + pivot.xsinθ cosθ − pivot.x ⋅sinθ − pivot.y ⋅cosθ + pivot.y0 0 1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

≡cosθ −sinθ txsinθ cosθ ty0 0 1

⎛

⎝

⎜⎜⎜

⎞

⎠

⎟⎟⎟

txty

⎛

⎝⎜

⎞

⎠⎟ =

− pivot.x ⋅cosθ + pivot.y ⋅sinθ + pivot.x− pivot.x ⋅sinθ − pivot.y ⋅cosθ + pivot.y

⎛

⎝⎜

⎞

⎠⎟

= cosθ −sinθsinθ cosθ

⎛

⎝⎜⎞

⎠⎟− pivot.x− pivot.y

⎛

⎝⎜

⎞

⎠⎟ +

pivot.xpivot.y

⎛

⎝⎜

⎞

⎠⎟

Rotation Matrix considering a Pivot

Column-Major vs Row-Major Vector• Column-major vector • Row-major vector

pc = [xyz] pr = [x y z]

3 × 1 1 × 3

pc = prT

qc = TRSpc qr = prST RTTT

right or post-multiplication left or pre-multiplication

Column-Major vs Row-Major Vector

• Column-major vector

• Row-major vector

[x′ y′ z′ ] = [x y z]a d gb e hc f i

= [ax + by + cz dx + ey + fz gx + hy + iz]

x′ y′ z′

=a b cd e fg h i [

xyz] =

ax + by + czdx + ey + fzgx + hy + iz

x′ = ax + by + czy′ = dx + ey + fzz′ = gx + hy + iz

Column-Major vs Row-Major Matrix• Column-major matrix • Row-major matrix

Maya, DirectX, PBRT, ZelosOpenGL, Eigen (default)

m0 m1 m2 m3m4 m5 m6 m7m8 m9 m10 m11m12 m13 m14 m15

m0 m4 m8 m12m1 m5 m9 m13m2 m6 m10 m14m3 m7 m11 m15

Q & A