Transformation Matrix

Transformation Matrix

Wanho Choi (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:a y :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 θ θ x sinθ x cosθ x y

2D Rotation

p(x, y) q(x ,′ y )′ x− axis y− axis origin θ π 2−θ

• About origin θ θ x sinθ x cosθ y cosθ ysinθ x y

2D Rotation

p(x, y) q(x ,′ y )′ x− axis y− axis origin θ π 2−θ

• About origin θ θ x sinθ x cosθ y cosθ ysinθ x y

2D Rotation

p(x, y) q(x ,′ y )′ x− axis y− axis origin θ π 2−θ

′

x

= x cos

θ

− 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 = x cosθ − ysinθ ′ y = xsinθ + ycosθ ′ x = x + dx ′ y = y + dy

As Matrices

• 2D scale • _{2D rotation} • 2D translation ′ x = ax ′ y = by ′ x = x cosθ − ysinθ ′ y = xsinθ + ycosθ ′ x = x + dx ′ y = y + dy ′ x ′ y ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ = a 00 b ⎡ ⎣ ⎢ ⎤ ⎦ ⎥⎡ x_y ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ′ x ′ y ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ = cos θ −sinθ sinθ cosθ ⎡ ⎣ ⎢ ⎤ ⎦ ⎥⎡ x_y ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ′ x ′ y ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ = x y ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥+ dx dy ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥

As Matrices

• 2D scale • _{2D rotation} • 2D translation ′ x = ax ′ y = by ′ x = x cosθ − ysinθ ′ y = xsinθ + ycosθ ′ x = x + dx ′ y = y + dy ′ x ′ y ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ = a 00 b ⎡ ⎣ ⎢ ⎤ ⎦ ⎥⎡ x_y ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ′ x ′ y ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ = cos θ −sinθ sinθ cosθ ⎡ ⎣ ⎢ ⎤ ⎦ ⎥⎡ x_y ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ′ x ′ y ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ = x y ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥+ dx dy ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ matrix × vector matrix × vector vector + vector

Simple Trick

• 2D scale • _{2D rotation} • 2D translation ′ x = ax ′ y = by ′ x = x cosθ − ysinθ ′ y = xsinθ + ycosθ ′ x = x + dx ′ y = y + dy ′ x ′ y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ = a 0 0 0 b 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ x y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ′ x ′ y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ = cosθ −sinθ 0 sinθ cosθ 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ x y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ′ x ′ y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ = 1 0 dx 0 1 dy 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ x y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ matrix × vector matrix × vector matrix × vector

Transformation Matrices

• 2D scale • _{2D rotation} • 2D translation ′ x = ax ′ y = by ′ x = x cosθ − ysinθ ′ y = xsinθ + ycosθ ′ x = x + dx ′ y = y + dy ′ x ′ y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ = a 0 0 0 b 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ x y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ′ x ′ y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ = cosθ −sinθ 0 sinθ cosθ 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ x y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ′ x ′ y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ = 1 0 dx 0 1 dy 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ x y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ 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 ′ y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ = e₀₀ e₀₁ e₀₁ e₁₀ e₁₁ e₁₂ e₂₀ e₂₁ e₂₂ ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥ x y 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ 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)

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)

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 +!+ pn

Operating Order

• The result depends on the order of operations.

rotate translate

translate rotate

q = TRp

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 = ax cosθ − 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β ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ y z ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ′ z ′ x ⎡ ⎣ ⎢ ⎤ ⎦

⎥ = ⎡ cos_sinγγ −sin_cosγγ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ z x ⎡ ⎣ ⎢ ⎤ ⎦ ⎥ ′ x ′ y ⎡ ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ = cos α −sinα sinα cosα ⎡ ⎣ ⎢ ⎤ ⎦ ⎥⎡ x_y ⎣ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ′ x ′ y ′ z 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥ = a 0 0 0 0 b 0 0 0 0 c 0 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥ x y z 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥ ′ x ′ y ′ z 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥ = 1 0 0 dx 0 1 0 dy 0 0 1 dz 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥ x y z 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥

3D Transformation

R_z(α) = cosα −sinα 0 0 sinα cosα 0 0 0 0 1 0 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥ R_x(β) = 1 0 0 0 0 cosβ −sinβ 0 0 sinβ cosβ 0 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥ ⎥ R_y(γ ) = cosγ 0 sinγ 0 0 1 0 0 −sinγ 0 cosγ 0 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥ ⎥ S = a 0 0 0 0 b 0 0 0 0 c 0 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥ T = 1 0 0 dx 0 1 0 dy 0 0 1 dz 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥

Six Rotation Orders

• • • • • • R_xR_yR_z R_xR_zR_y R_yR_xR_z R_yR_zR_x R_zR_xR_y R_zR_yR_x R_z(γ )⋅ R_y(β)⋅ R_x(α)= cosγ 0 sinγ 0 0 1 0 0 −sinγ 0 cosγ 0 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥ ⎥ 1 0 0 0 0 cosβ −sinβ 0 0 sinβ cosβ 0 0 0 0 1 ⎡ ⎣ ⎢ ⎢ ⎢ ⎢ ⎢ ⎤ ⎦ ⎥ ⎥ ⎥ ⎥ ⎥ cosα −sinα 0 0 sinα cosα 0 0 0 0 1 0 0 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}

Affine Transformation

M =

m

₀₀

m

₀₁

m

₀₂

m

₀₃

m

₁₀

m

₁₁

m

₁₂

m

₁₃

m

₂₀

m

₂₁

m

₂₂

m

₂₃

m

₃₀

m

₃₁

m

₃₂

m

₃₃ 0 1 translation

rotation and/or shear

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 point

M: transformation matrix

Transformation with a Pivot

1 0 pivot.x 0 1 pivot.y 0 0 1 ⎛ ⎝ ⎜ ⎜ ⎜ ⎞ ⎠ ⎟ ⎟ ⎟ ⋅ cosθ −sinθ 0 sinθ cosθ 0 0 0 1 ⎛ ⎝ ⎜ ⎜⎜ ⎞ ⎠ ⎟ ⎟⎟⋅ 1 0 − pivot.x 0 1 − pivot.y 0 0 1 ⎛ ⎝ ⎜ ⎜ ⎜ ⎞ ⎠ ⎟ ⎟ ⎟ = 1 0 pivot.x 0 1 pivot.y 0 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.x sinθ cosθ − pivot.x ⋅sinθ − pivot.y⋅cosθ + pivot.y

0 0 1 ⎛ ⎝ ⎜ ⎜ ⎜ ⎞ ⎠ ⎟ ⎟ ⎟ ≡ cosθ −sinθ tx sinθ cosθ ty 0 0 1 ⎛ ⎝ ⎜ ⎜⎜ ⎞ ⎠ ⎟ ⎟⎟ tx ty ⎛ ⎝

⎜ ⎞_⎠⎟ = ⎛ − pivot.x ⋅cos_{− pivot.x ⋅sinθ}θ_{− pivot.y⋅cos}+ pivot.y⋅sinθ_θ + pivot.x_{+ pivot.y} ⎝ ⎜ ⎞ ⎠ ⎟ = cosθ −sinθ sinθ cosθ ⎛ ⎝⎜ ⎞ ⎠⎟ − pivot.x − pivot.y ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ +⎛ pivot.x_pivot.y ⎝ ⎜ ⎞ ⎠ ⎟

Column-Major vs Row-Major Vector

• Column-major vector • Row-major vector

p

_c

=

[

x

y

z]

p

r

= [x y z]

3 × 1 1 × 3

p

_c

= p

_rT

q

_c

= TRSp

_c

q

_r

= p

_r

S

T

R

T

T

T

Column-Major vs Row-Major Vector

• Column-major vector • Row-major vector [x′ y′ z′] = [x y z] a d g b e h c f i = [ax + by + cz dx + ey + fz gx + hy + iz] x′ y′ z′ = a b c d e f g h i [ x y z] = ax + by + cz dx + ey + fz gx + hy + iz x′= ax + by + cz y′ = dx + ey + fz z′= gx + hy + iz

Column-Major vs Row-Major Matrix

• Column-major matrix • Row-major matrix

Maya, DirectX, PBRT, Zelos OpenGL, Eigen (default)

m₀ m₁ m₂ m₃ m₄ m₅ m₆ m₇ m₈ m₉ m₁₀ m₁₁ m₁₂ m₁₃ m₁₄ m₁₅ m₀ m₄ m₈ m₁₂ m₁ m₅ m₉ m₁₃ m₂ m₆ m₁₀ m₁₄ m₃ m₇ m₁₁ m₁₅