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 systemy

x

z

note: z axis comes toward the viewer from the screen

3D Translation

T (tx, ty, tz) =

1 0 0 tx0 1 0 ty0 0 1 tz0 0 0 1

3D Scale

S (sx, sy, sz) =

sx 0 0 0

0 sy 0 0

0 0 sz 0

0 0 0 1

3D Rotation about x-axis

Rx (θ) =

1 0 0 0

0 cos(θ) -sin(θ) 0

0 0 0 1

0 sin(θ) cos(θ) 0

note: x-coordinate does not change

3D Rotation about x-axis

• suppose we have a unit cube at the origin– blue vertex (0, 1, 0) Rx(90) (0, 0, -1)

– green vertex (0, 1, 1) Rx(90) (0, 1, -1)

– yellow vertex (1, 1, 0) Rx(90) (1, 0, -1)

– red vertex (1, 1, 1) Rx(90) (1, 1, -1)

• rotate this cube about the x-axis by 90 degreesy

x

z

y

z

3D Rotation about y-axis

Ry (θ) =0 1 0 0

cos(θ) 0 sin(θ) 0

0 0 0 1

-sin(θ) 0 cos(θ) 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’ = z * sin(θ) + x * cos(θ): same

z’ = z * cos(θ) – x * sin(θ): different

note: y-coordinate does not change, and the signs of these two are different from Rx and Rz

x

z

(x, z)

(x’, z’)

θ

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’)

(x, z)

θ

3D Rotation about y-axis

Ry (θ) =0 1 0 0

cos(θ) 0 sin(θ) 0

0 0 0 1

-sin(θ) 0 cos(θ) 0

note: y-coordinate does not change, and the signs of these two are different from Rx and Rz

3D Rotation about z-axis

Rz (θ) =

0 0 0 1

sin(θ) cos(θ) 0 0

cos(θ) -sin(θ) 0 0

0 0 1 0

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, // 1st row

0, 1, 0, 0, // 2nd row

0, 0, 1, 0, // 3rd row

0, 0, 0, 1 }; // 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