Advanced Graphics Algorithms Ying Zhu Georgia State University

1. Transformations, View, and Projection Advanced Graphics AlgorithmsYing ZhuGeorgia State University

2. Outline • 3D transformations • Concatenation of transformations • Transformations in Blender • Transformations in OpenGL • Anatomy of a simple OpenGL program

3. Geometric transformation • In 3D graphics, animation is achieved by transforming geometric objects in the virtual world • Transforming geometric objects means transforming points (vertices) and vectors • Transformation of points and vectors can be conveniently achieved by matrix multiplications • Introduced by Larry Roberts in 1966

4. Linear Algebra Review • Matrix: An array of elements • Vectors: A n x 1 matrix is called a column vector • In computer graphics, vertex coordinates and vectors (directed line segments) and are represented by column vectors.

5. Linear Algebra Review • Matrix-column vector multiplication

6. Linear Algebra Review • Matrix-matrix multiplication V1 V2 V3

7. Linear Algebra Review • Homogeneous representation • A vertex coordinate representation has 1 as the 4th component. • OpenGL uses homogeneous coordinates for all vertices. • (x, y, z) => (x, y, z, 1) • Why use homogeneous coordinates? • So that all transformations can be defined by matrix multiplication.

8. Affine Matrix • An affine matrix is a 4x4 matrix with last low [0 0 0 1] • Why include the bottom row of (0,0,0,1)? • It’ll be useful in perspective transforms. • Affine matrix is used to define affine transformation.

9. Affine Transformation • Any transformation preserving • collinearity (i.e., all points lying on a line initially still lie on a line after transformation) • ratios of distances (e.g., the midpoint of a line segment remains the midpoint after transformation). • Affine transformations preserve parallel lines. • We can transform vertices with affine transformation. • Affine transformations are what we use all the time in computer graphics.

10. Other Transformations • Isometry (preserves distance) • Similarity (preserves angles) • Collineation (lines remains lines) • Perspective projections • Non-linear (lines become curves) • Twists, bends, etc. • Can be used for deformation.

11. Elementary Affine Transformations • Four elementary affine transformations • Translation • Scaling • Rotation (about an axis) • Shear • Translation, scaling and rotation are the most commonly used transformations.

12. y P d x y d P’ x Translation • Translation

13. Scaling • Scaling

14. Rotation • Rotation about the origin Counter-clock wise rotation by 90 degree.

15. 2D Transformation Summary • Translation • Scaling • Rotation

16. Composition of Affine Transforms • Most of the time we want to apply more than one transformation. • Example: • Translate by vector t • Rotate by r degree about the origin • This can be represented by multiple matrix multiplications:

17. Composition of Affine Transforms • Matrix multiplication is associative: • We can group the combined transformation as • The affine matrices are applied right side first. • We can also apply all the transformations to form a single matrix • This called composing or concatenation of transforms. • The result is another affine transformation.

18. Composition of Affine Transforms • It is important to always remember that matrix multiplication is not commutative • The order of transforms DOES matter • E.g. scaling then rotating is usually different than rotating then scaling • Keep this in mind when you write OpenGL program – you need to know in which order your OpenGL transform calls are executed

19. Why use matrix formalisms? • Can’t I just hardcode transforms rather than use the matrix multiplication? • Yes. But it’s harder to derive, harder to debug, and not any more efficient • All current graphics APIs use this matrix formalism • Must understand this to use OpenGL or other graphics libraries • The beauty of matrix formalism: the accumulated effect of many transformations can be stored in a single matrix

20. 3D Affine Transformations • 3D affine transformations are an extension of the 2D transformations. • Use 4x4 matrices instead of 3x3 matrices in 2D transformations. • For example • 3D scaling

21. 3D Translation • 3D translation matrix • OpenGL function: glTranslatef(tx, ty, tz)

22. 3D Scaling • 3D scaling matrix • OpenGL Function: glScalef(Sx, Sy, Sz)

23. 3D Rotation About the Origin • 3D rotation is more complicated than 2D rotation. • Rotation about X axis • Rotation about Y axis • Rotation about Z axis

24. Arbitrary 3D Rotations • Normal practice is to decompose an arbitrary 3D rotation into rotations about x, y, z axes. • Create a single transformation matrix by composing.

25. Rotation in OpenGL • glRotatef(GLfloat angle, GLfloat x, GLfloat y, GLfloat z) • Equivalent to multiplying the following matrix

26. Rotation in OpenGL • Rotations are specified by a rotation axis and an angle • glRotatef(GLfloat angle, GLfloat x, GLfloat y, GLfloat z) • Angle is in degrees • x, y, and z are coordinates of a vector, the rotation axis • Normal practice is to decompose an arbitrary 3D rotation into rotations about x, y, z axes • Achieved by 3 glRotatef() calls

27. Rotation About a Fixed Point • The order is important: • Translate to the origin • Rotate about the origin • Translate back • Example: • To rotate by r about z around

28. Rotation About a Fixed Point • E.g. Rotate around point (9, -5, 3), 30 degree about z axis, then 45 degree about y axis … glTranslatef(9.0, -5.0, 3.0); glRotatef(45.0, 0.0, 1.0, 0.0); glRotatef(30.0, 0.0, 0.0, 1.0); glTranslatef(-9.0, 5.0, -3.0); glBegin(GL_POINTS); glVertex3f(…); glEnd(); …

29. Multiple 3D Transformations • By combining a scaling, rotation, and a translation matrix we get a single transformation matrix. • Notice that in the single matrix, translation is separated from scaling and rotation part.

30. Transformations in OpenGL • Internally each vertex in OpenGL is represented as homogeneous points • i.e. a column vector with 1 as the last item. • However you don’t need to specify the 1 in your program • Each vertex is transformed by the modelview matrix. • There is always a current modelview matrix that is applied to all vertices. • First tell OpenGL you’ll modify the modelview matrix by calling glMatrixMode(GL_MODELVIEW); • You need to initialize the modelview matrix to the identity matrix through glLoadIdentity();

31. Model-view Matrix

32. Manipulating the Current Matrix • Two ways to modify the modelview matrix: • Use OpenGL transformation calls (internally generate a matrix) • Explicitly load pre-defined affine matrix as the current modelview matrix. • We have to first tell OpenGL we’ll modify the modelview matrix by calling • glMatrixMode(GL_MODELVIEW);

33. OpenGL Transformation Calls • Translation: • glTranslatef(dx, dy, dz); • Scaling: • glScalef(sx, sy, sz); • Rotation: • glRotatef(angle, vx, vy, vz); • Rotate object counter-clock wise around vector (vx, vy, vz) • Angle is in degrees not radians. • There is a matrix multiplication behind every transformation function call • Current_MV_matrix  Current_MV_matrix * matrix

34. Example … glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(10.0, 20.0, 0.0); glRotatef(30.0, 0.0, 1.0, 0.0); glBegin(GL_LINES); glVertex3d(0, 0, 0); glVertex3d(100, 120, 0); … glEnd(); … • Pay attention to the patterns: • Specify transformations first, and then draw 3D geometries. • The order of transformations: rotate first, translate later. Transformations are applied in the reverse order – last transformation is applied first! • This is what makes OpenGL difficult to learn.

35. Transformation in OpenGL • It is important to understand the relationship among • Current modelview matrix, • OpenGL transformation calls • Vertices of 3D Object • So you can understand why OpenGL code has to be arranged in certain way

36. What happens inside OpenGL during transformation? Final modelview matrix Matrices created by OpenGL transformation calls Initial modelview matrix (initialized as an identity matrix) glMatrixMode(GL_MODELVIEW) glLoadIdentity() Vertex coordinates before transformation glVertex3f() Vertex coordinates after transformation

37. OpenGL matrix stack • OpenGL maintains a matrix stack to temporarily store a “snapshot” of the current modelview matrix. • We often need to back up the current modelview matrix, modify it, and then load the previous modelview matrix. • glPushMatrix(); // Push the current matrix onto stack • glPopMatrix(); // Pops the stack and load the top matrix // to be the current modelview matrix. • This makes it possible to do hierarchical transformation • glPushMatrix() and glPopMatrix() can be used to control the scope of transformation calls

38. Why use glPushMatrix()/glPopMatrix()? … glRotatef(theta[0], 0.0, 1.0, 0.0); // apply to all subsequent objects Draw_torso(); glPushMatrix(); glTranslatef(0.0, HEADX, 0.0); // only apply to head glRotatef(theta[1], 1.0, 0.0, 0.0); // only apply to head Draw_head(); glPopMatrix(); glPushMatrix(); glRotatef(theta[3], 1.0, 0.0, 0.0); // apply to left_upper_arm and left_lower_arm Draw_left_upper_arm(); glTranslatef(0.0, LLAY, 0.0); // apply only to left_lower_arm glRotatef(theta[4], 1.0, 0.0, 0.0); // apply only to left_lower_arm Draw_left_lower_arm(); glPopMatrix(); Draw_somthing_else(); // which transform(s) call is applied to this one? …

39. Anatomy of an OpenGL program /* * planet.c * This program shows how to composite modeling transformations * to draw translated and rotated models. * Interaction: pressing the d and y keys (day and year) * alters the rotation of the planet around the sun. */ #include <GL/glut.h> #include <stdlib.h> static int year = 0, day = 0; void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0); // initialize frame buffer to black color (background) glShadeModel (GL_FLAT); // choose shading model }

40. Anatomy of an OpenGL program void display(void) { glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0, 1.0, 1.0); glPushMatrix(); // current modelview matrix is the view matrix glutWireSphere(1.0, 20, 16); // draw sun, internally call glVertex3f() glRotatef ((GLfloat) year, 0.0, 1.0, 0.0); // Multiply modelview matrix with a // rotation matrix glTranslatef (2.0, 0.0, 0.0); // Multiply current modelview matrix with a // translation matrix glRotatef ((GLfloat) day, 0.0, 1.0, 0.0); // Multiply current modelview matrix with a // rotation matrix glutWireSphere(0.2, 10, 8); // draw smaller planet, internally call glVertex3f() glPopMatrix(); // current modelview matrix is view matrix again glutSwapBuffers(); }

41. Anatomy of an OpenGL program void reshape (int w, int h) { glViewport (0, 0, (GLsizei) w, (GLsizei) h); // adjust image size based on // window size glMatrixMode (GL_PROJECTION); glLoadIdentity (); // initialize projection matrix gluPerspective(60.0, (GLfloat) w/(GLfloat) h, 1.0, 20.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); // initialize modelview matrix to identity matrix // place camera, internally generates a view matrix and // then multiply the current modelview matrix with the view matrix gluLookAt (0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); }

42. Anatomy of an OpenGL program void keyboard (unsigned char key, int x, int y) { switch (key) { case 'd': day = (day + 10) % 360; glutPostRedisplay(); // force a call to display() break; case 'D': day = (day - 10) % 360; glutPostRedisplay(); break; case 'y': year = (year + 5) % 360; glutPostRedisplay(); break; case 'Y': year = (year - 5) % 360; glutPostRedisplay(); break; case 27: exit(0); break; default: break; } }

43. Anatomy of an OpenGL program int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB); glutInitWindowSize (500, 500); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init (); // clear frame buffer and select shading model glutDisplayFunc(display); // register event handlers glutReshapeFunc(reshape); glutKeyboardFunc(keyboard); glutMainLoop(); // Start the event loop return 0; }

44. Summary • Affine transformations are used for transforming 3D objects. • Three elementary affine transformations: • Translation • Scaling • Rotation • 3D rotation is the most complicated among the three. • If we use homogeneous coordinates, then all affine transformations can be represented by affine matrix multiplication. • Notice the pattern of transformation in OpenGL programming.

45. OpenGL Tutorial Programs • Download OpenGL transformation tutorial program from http://www.xmission.com/~nate/tutors.html

46. Readings • OpenGL Programming Guide: Chapter 3 • Sample programs • http://www.sgi.com/products/software/opengl/examples/redbook/ • Cube.c, planet.c, robot.c

47. Outline • Camera and view transformation • View volume and projection transformation • Orthographic projection • Perspective projection • View port transformation

48. Outline

49. 3D Scenes and Camera • In computer graphics, we often use terms that are analog to theatre or photography • A virtual world is a “scene” • Objects in the scene are “actors” • There is a “camera” to specify viewing position and viewing parameters. • Viewing and projection is about how to position the camera and project the 3D scene to a 2D screen.

50. Camera in computer graphics • Computer graphics uses the pinhole camera model • This results in perfectly sharp images • No depth of field or motion blur • Real cameras use lenses with variable aperture sizes • This causes depth-of-field: out-of-focus objects appear blurry