3D Transformation

• In 3D, we have x, y, and z.

• We will continue use column vectors: .

• Homogenous systems: .

3D Transformation

glVertex3f(x, y ,z);

x

y

z

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

x

y

z

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

A Right-Handle Coordinate System

x×y=z; y×z=x; z×x=y;

Transformation: 3D Translation

• Given a position (x, y, z) and an offset vector (tx, ty, tz):

x '=x+ txy'=y+ tyz'=z+ tz

x '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

1 tx1 ty

1 tz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

Transformation: 3D Scaling• Change the object size:

x '=sx⋅xy'=sy⋅yz'=sz⋅z

x '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

sxsy

sz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

Transformation: 3D Rotation

• Rotation needs an angle and an axis.

• Rotation is defined according to the right-hand rule (our convention).

Transformation: 3D RotationAxis Matrix

Rotate around X: glRotatef(θ, 1, 0, 0);

Rotate around Y: glRotatef(θ, 0, 1, 0);

Rotate around Z: glRotatef(θ, 0, 0, 1);

x '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

1cosθ −sinθsinθ cosθ

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

x '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

cosθ sinθ1

−sinθ cosθ1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

x '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

cosθ −sinθsinθ cosθ

11

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

How to quickly remember them…

• The axis coordinate is unchanged.

• For the other two coordinates:• Diagonals are filled with cos.• Off-diagonals are filled with sin.• There is a sign…

How to quickly remember them…

• Here is an easier way to think about it:

x '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

a b cd e fg h i

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

The vectorbefore rotation

The vector after rotation

How to quickly remember them…

a

d

g

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

a b cd e fg h i

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

1001

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

X axisWhat X becomesAfter rotation

b

e

h

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

a b cd e fg h i

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

0101

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

Y axisWhat Y becomesAfter rotation

c

f

i

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

a b cd e fg h i

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

0011

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

Z axisWhat Z becomesAfter rotation

For example

X

Y

Z

cosθ 0 sinθ0 1 0

−sinθ 0 cosθ1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

θ

cosθ0−sinθ

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

sinθ0cosθ

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

0

1

0

⎛

⎝

⎜⎜

⎞

⎠

⎟⎟

1

θ

XY Z

Generic Rotation• Use the rotation function:

(x, y, z)

θ

glRotatef(theta, x, y, z);

In degree No need to be normalized

x2 (1−c) + c xy(1−c)−zs xz(1−c) + ys

yx(1−c) + zs y2 (1−c) + c yz(1−c)−xs

xz(1−c)−ys yz(1−c) + xs z2 (1−c) + c1

⎛

⎝

⎜⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟⎟

c =cosθ s =sinθDon’t need to remember it,just for your reference.

• What if I don’t like a transformation, how do I get back?

How to reverse a transformation

x '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=M

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

x

y

z

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=?

x'y'z'1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=?M

x

y

z

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

? =M−1 : M−1M =M−1M =I

Inverse Translation

x '=x+ txy'=y+ tyz'=z+ tz

x '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

1 tx1 ty

1 tz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

x =x'−txy=y'−tyz=z'−tz

x

y

z

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

1 −tx1 −ty

1 −tz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

x'y'z'1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

glTranslatef(tx, ty, tz);

glTranslatef(-tx, -ty, -tz);

Inverse Scaling

x '=x⋅sxy'=y⋅syz'=z⋅sz

x '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

sxsy

sz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

x =x'/ sxy=y'/ syz=z'/ sz

x

y

z

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

1 sx

1 sy

1 sz

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

x'y'z'1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

glScalef(sx, sy, sz);

glScalef(1/sx, 1/sy, 1/sz);

Inverse Rotationx '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

1cosθ −sinθsinθ cosθ

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

glRotatef(theta, 1, 0, 0);

Rotate_X by θ

x '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

1cosθ sinθ−sinθ cosθ

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

glRotatef(-theta, 1, 0, 0);

Rotate_X by -θ

Inverse Transformation

• The transformation has multiple matrices:

• Its inverse:

v'=Mv=(M1M 2M 3M 4 )vScaling Translation Rotation TranslationM1 M2 M3 M4

vv’=

v'=M−1v=(M 4−1M 3

−1M 2−1M1

−1)vTranslation Rotation Translation Scaling vv’=M4

−1 M3−1 M2

−1 M1−1

OpenGL handles multiple matrices

glLoadIdentity();glRotatef(…);glTranslatef(…);glScalef(…);glTranslatef(…);glBegin(GL_POINTS);glVertex3fv(v);glEnd();

M =IM =I M R

M =I M RM T

M =I M RM TMS

M =I M RM TMSM T

v'=Mv=I M RM TMSM Tv

OpenGL handles multiple matrices

glLoadIdentity();glRotatef(…);glTranslatef(…);glScalef(…);glTranslatef(…);glBegin(GL_POINTS);glVertex3fv(v);glEnd();

v'=Mv=I M RM TMSM Tv

• Define v• Translation• Scaling• Translation• Rotation

Reverse Order

OpenGL has a reason.glRotatef(…); //AglTranslatef(…);//BglScalef(…); //CglVertex3fv(v);

• Define v• v=Cv• v=Bv• v=Av

We think: v is transformedin a world coordinate system.

• Given a world• local1=A(world)• local2=B(local1)• local3=C(local2)• Define v in local3

OpenGL think: world is movedinto local. Each transformation is defined respect to the local.

For exampleglTranslatef(3,2,0);glVertex3f(2,2,0);

We think (2, 2) moves by an offset (3, 2).

OpenGL thinks the coordinate System moves by an offset (3, 2). The vertex defines at (2, 2) locally.

For exampleglRotatef(45,0,0,1);glVertex3f(4,0,0);

We think (4, 0) rotates45 degree.

OpenGL thinks the coordinate System rotates 45 degree. The vertex defines at (4, 0) locally.

For exampleglRotatef(45,0,0,1);glTranslatef(4,0,0);glVertex3f(0,0,0);

We think (0, 0) first Translates, then rotates.

OpenGL thinks the coordinate System first rotates, then translates.

For exampleglRotatef(45,0,0,1);glTranslatef(4,0,0);glBegin(…);glVertex3f(0,0,0);glEnd();

Important Note:The second translationis defined respect to L1, not W!

OpenGL thinks the coordinate System first rotates, then translates.

L1

L2

W

A quiz

glRotatef(45,0,0,1);glTranslatef(4,0,0);glVertex3f(0,0,0);

L2

W(2.8, 2.8)

L1glTranslatef(2.8,2.8,0);glRotatef(45,0,0,1);glVertex3f(0,0,0);

L1

L2

W

What if we change the order?

glRotatef(45,0,0,1);glTranslatef(2.8,2.8,0);glVertex3f(0,0,0); L1

L2

WImportant Note:The second transformationis defined respect to L1, not W!

Order is important.

L2

W(2.8, 2.8)

L1

glTranslatef(2.8,2.8,0);glRotatef(45,0,0,1);glVertex3f(0,0,0);

glRotatef(45,0,0,1);glTranslatef(2.8,2.8,0);glVertex3f(0,0,0);

L1

L2

W

A quiz

W

(3.0, 4.0)

L1glTranslatef(3,4,0);

A quiz

W

(3.0, 4.0)

L1glTranslatef(3,4,0);

glRotatef(45,0,0,1);

L2

A quiz

W

(3.0, 4.0)

L1glTranslatef(3,4,0);

glRotatef(45,0,0,1);

L3

glScalef(1,2,1);

A quiz

W

(3.0, 4.0)

L1glTranslatef(3,4,0);

glRotatef(45,0,0,1);

L3

glScalef(1,2,1);

L4

glTranslatef(3,1,0);

A quiz

W

(3.0, 4.0)

L1glTranslatef(3,4,0);

glRotatef(45,0,0,1);

L3

glScalef(1,2,1);

L4

glTranslatef(3,1,0);

glVertex3f(3,0,0);

How do I know the coordinate system?

W

L3OpenGL only use a ModelView matrix M. M is transformed in various ways. M’s effect is toupdate each vertex as:

x '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=M

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

a b c de f g hi j k l

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

How do I know the coordinate system?

W

L3Case 1:

d

h

l

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

a b c de f g hi j k l

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

0001

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

If we draw a dot at (0, 0, 0) in L3,we actually get (d, h, l) in W.

How do I know the coordinate system?

W

L3Case 2:

a +de+hi + l1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

a b c de f g hi j k l

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

1001

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

If we draw a dot at (1, 0, 0) in L3,we actually get (a+d, e+h, i+l) in W.

How do I know the coordinate system?

W

L3Case 2:

a +de+hi + l1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

−

dhl1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

aei0

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

In other words, a unit x vector in L3 is (a, e, i) in W.

a +de+hi + l1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

a b c de f g hi j k l

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

1001

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

How do I know the coordinate system?

W

L3Case 2:

b +df +hj + l1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

−

dhl1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

bfj0

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

In other words, a unit y vector in L3 is (b, f, j) in W.

b +df +hj + l1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

a b c de f g hi j k l

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

0101

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

How do I know the coordinate system?

W

L3

x '

y '

z '

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

=

a b c de f g hi j k l

1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

xyz1

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

L3’s Origin in WL3’s Y in W

L3’s X in W L3’s Z in W

ModelView matrix isthe coordinate system L3:

Summary

• Alternatively, OpenGL thinks:• A transformation updates the coordinate system.• For each change, the transformation is defined in the

current (local) coordinate system.• Transformation matrix and coordinate system are the

same.• The code is in the forward order!

• If we think:• Each transformation updates the vertex in an

absolute world.• Then, the code is arranged in a reverse order.