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 system y note: z axis comes toward the viewer from the screen x z

3D Translation 1 0 0 tx 0 1 0 ty T (tx, ty, tz) = 0 0 1 tz 0 0 0 1

3D Scale sx 0 0 0 0 sy 0 0 S (sx, sy, sz) = 0 0 sz 0 0 0 0 1

3D Rotation about x-axis 1 0 0 0 0 cos(θ) -sin(θ) 0 Rx (θ) = 0 sin(θ) cos(θ) 0 0 0 0 1 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 degrees y y x z z

3D Rotation about y-axis cos(θ) 0 sin(θ) 0 0 1 0 0 Ry (θ) = -sin(θ) 0 cos(θ) 0 0 0 0 1 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 x (x’, z’) θ (x, z) z note: y-coordinate does not change, and the signs of these two are different from Rx and Rz

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 (x’, z’) θ (x, z) z

3D Rotation about y-axis cos(θ) 0 sin(θ) 0 0 1 0 0 Ry (θ) = -sin(θ) 0 cos(θ) 0 0 0 0 1 note: y-coordinate does not change, and the signs of these two are different from Rx and Rz

3D Rotation about z-axis cos(θ) -sin(θ) 0 0 sin(θ) cos(θ) 0 0 Rz (θ) = 0 0 1 0 0 0 0 1 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