1. C O M P U T E R G R A P H I C S Guoying Zhao 1 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 1 / 73 Computer Graphics Three-Dimensional Graphics II

2. C O M P U T E R G R A P H I C S Guoying Zhao 2 / 73 Transformations

3. C O M P U T E R G R A P H I C S Guoying Zhao 3 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 3 / 73 Objectives Introduce standard transformations –Rotation –Translation –Scaling –Shear Derive homogeneous coordinate transformation matrices Learn to build arbitrary transformation matrices from simple transformations

4. C O M P U T E R G R A P H I C S Guoying Zhao 4 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 4 / 73 General Transformations A transformation maps points to other points and/or vectors to other vectors Q=T(P) v=T(u)

5. C O M P U T E R G R A P H I C S Guoying Zhao 5 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 5 / 73 Affine Transformations Line preserving Characteristic of many physically important transformations –Rigid body transformations: rotation, translation –Scaling, shear Importance in graphics is that we need only transform endpoints of line segments and let implementation draw line segment between the transformed endpoints

6. C O M P U T E R G R A P H I C S Guoying Zhao 6 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 6 / 73 Pipeline Implementation transformationrasterizer u v u v T T(u) T(v) T(u) T(v) vertices pixels frame buffer (from application program)

7. C O M P U T E R G R A P H I C S Guoying Zhao 7 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 7 / 73 Notation P,Q, R: points in an affine space u, v, w : vectors in an affine space , ,  : scalars p, q, r : representations of points -array of 4 scalars in homogeneous coordinates u, v, w : representations of vectors -array of 4 scalars in homogeneous coordinates

8. C O M P U T E R G R A P H I C S Guoying Zhao 8 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 8 / 73 Translation Move (translate, displace) a point to a new location Displacement determined by a vector d –Three degrees of freedom –P’=P+d P P’ d

9. C O M P U T E R G R A P H I C S Guoying Zhao 9 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 9 / 73 objecttranslation: every point displaced by same vector

10. C O M P U T E R G R A P H I C S Guoying Zhao 10 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 10 / 73 Translation Using Representations Using the homogeneous coordinate representation in some frame p=[ x y z 1] T p ’ =[x ’ y ’ z ’ 1] T d=[dx dy dz 0] T Hence p ’ = p + d or x ’ =x+d x y ’ =y+d y z ’ =z+d z note that this expression is in four dimensions and expresses point = vector + point

11. C O M P U T E R G R A P H I C S Guoying Zhao 11 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 11 / 73 Translation Matrix We can also express translation using a 4 x 4 matrix T in homogeneous coordinates p ’= Tp where T = T (d x, d y, d z ) = This form is better for implementation because all affine transformations can be expressed this way and multiple transformations can be concatenated together

12. C O M P U T E R G R A P H I C S Guoying Zhao 12 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 12 / 73 Rotation (2D) Consider rotation about the origin by  degrees –radius stays the same, angle increases by  x’=x cos  –y sin  y’ = x sin  + y cos  x = r cos  y = r sin  x’ = r cos (  y’ = r sin ( 

13. C O M P U T E R G R A P H I C S Guoying Zhao 13 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 13 / 73 Rotation about the z axis Rotation about z axis in three dimensions leaves all points with the same z –Equivalent to rotation in two dimensions in planes of constant z –or in homogeneous coordinates p ’= R z (  )p x’=x cos  –y sin  y’ = x sin  + y cos  z’ =z

14. C O M P U T E R G R A P H I C S Guoying Zhao 14 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 14 / 73 Rotation Matrix R = R z (  ) =

15. C O M P U T E R G R A P H I C S Guoying Zhao 15 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 15 / 73 Rotation about x and y axes Same argument as for rotation about z axis –For rotation about x axis, x is unchanged –For rotation about y axis, y is unchanged R = R x (  ) = R = R y (  ) =

16. C O M P U T E R G R A P H I C S Guoying Zhao 16 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 16 / 73 Scaling S = S(s x, s y, s z ) = x’=s x x y’=s y x z’=s z x p’=Sp Expand or contract along each axis (fixed point of origin)

17. C O M P U T E R G R A P H I C S Guoying Zhao 17 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 17 / 73 Reflection corresponds to negative scale factors original s x = -1 s y = 1 s x = -1 s y = -1s x = 1 s y = -1

18. C O M P U T E R G R A P H I C S Guoying Zhao 18 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 18 / 73 Inverses Although we could compute inverse matrices by general formulas, we can use simple geometric observations –Translation: T -1 (d x, d y, d z ) = T (-d x, -d y, -d z ) –Rotation: R -1 (  ) = R(-  ) Holds for any rotation matrix Note that since cos(-  ) = cos(  ) and sin(-  )=-sin(  ) R -1 (  ) = R T (  ) –Scaling: S -1 (s x, s y, s z ) = S(1/s x, 1/s y, 1/s z )

19. C O M P U T E R G R A P H I C S Guoying Zhao 19 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 19 / 73 Concatenation We can form arbitrary affine transformation matrices by multiplying together rotation, translation, and scaling matrices Because the same transformation is applied to many vertices, the cost of forming a matrix M=ABCD is not significant compared to the cost of computing Mp for many vertices p The difficult part is how to form a desired transformation from the specifications in the application

20. C O M P U T E R G R A P H I C S Guoying Zhao 20 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 20 / 73 Order of Transformations Note that matrix on the right is the first applied Mathematically, the following are equivalent p ’ = ABCp = A(B(Cp)) Note many references use column matrices to represent points. In terms of column matrices p ’ T = p T C T B T A T

21. C O M P U T E R G R A P H I C S Guoying Zhao 21 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 21 / 73 General Rotation About the Origin  x z y v A rotation by  about an arbitrary axis can be decomposed into the concatenation of rotations about the x, y, and z axes R(  ) = R z (  z ) R y (  y ) R x (  x )  x  y  z are called the Euler angles Note that rotations do not commute We can use rotations in another order but with different angles

22. C O M P U T E R G R A P H I C S Guoying Zhao 22 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 22 / 73 Rotation About a Fixed Point other than the Origin Move fixed point to origin Rotate Move fixed point back M = T(p f ) R(  ) T(-p f )

23. C O M P U T E R G R A P H I C S Guoying Zhao 23 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 23 / 73 Instancing In modeling, we often start with a simple object centered at the origin, oriented with the axis, and at a standard size We apply an instance transformation to its vertices to Scale Orient Locate

24. C O M P U T E R G R A P H I C S Guoying Zhao 24 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 24 / 73 Shear Helpful to add one more basic transformation Equivalent to pulling faces in opposite directions

25. C O M P U T E R G R A P H I C S Guoying Zhao 25 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 25 / 73 Shear Matrix Consider simple shear along x axis x’ = x + y cot  y’ = y z’ = z H(  ) = cot  x’- x)/y H -1 =H(-  )

26. C O M P U T E R G R A P H I C S Guoying Zhao 26 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 26 / 73 Composite Transformation in OpenGL glLoadIdentity(); glTranslatef(10.0f, 0.0f, 0.0f); glRotatef(45.0f, 0.0f, 0.0f, 1.0f); glBegin(GL_QUADS); …… glEnd();              1 z y x             1 z y x ?

27. C O M P U T E R G R A P H I C S Guoying Zhao 27 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 27 / 73 Composite Transformation Is the composite transformation commutative?

28. C O M P U T E R G R A P H I C S Guoying Zhao 28 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 28 / 73 Composite Transformation Move (10, 0, 0); then rotate 45 degree x y z Move (10,0,0)Rotate 45°

29. C O M P U T E R G R A P H I C S Guoying Zhao 29 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 29 / 73 Composite Transformation Rotate 45 degree, then move (10, 0, 0) x y z Rotate 45°Move (10,0,0)

30. C O M P U T E R G R A P H I C S Guoying Zhao 30 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 30 / 73 Composite Transformation Composite transformation is not commutative M1 != M2 x y z Rotate 45°Move (10,0,0) x y z Rotate 45°

31. C O M P U T E R G R A P H I C S Guoying Zhao 31 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 31 / 73 Global Transformation and Local Transformation Global transformation ( frame is fixed, global cs, graphics mode) Local transformation (local cs, spatial mode) x y z Move (10,0,0)Rotate 45° Move (10,0,0)Rotate 45°

32. C O M P U T E R G R A P H I C S Guoying Zhao 32 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 32 / 73 xy z Move (10,0,0)Rotate 45° Move (10,0,0)Rotate 45° Move (10,0,0) Global transformation Local transformation

33. C O M P U T E R G R A P H I C S Guoying Zhao 33 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 33 / 73 Global Transformation and Local Transformation Local transformation can be implemented by inversing the multiplying order of the global transformation

34. C O M P U T E R G R A P H I C S Guoying Zhao 34 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 34 / 73 Global Transformation and Local Transformation Global transformation –Every transform is done in original coordinate system. –Affine transformation is performed globally Local transformation –Every transform is done in the new local coordinate system –By inversing the order of matrix multiplication

35. C O M P U T E R G R A P H I C S Guoying Zhao 35 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 35 / 73 Global Transformation and Local Transformation When compute the composite transformation matrix: –Multiply the new matrix in left of the former matrix-- --- Global transformation –Multiply the new matrix in right of the former matrix----- Local transformation Move (10, 0, 0); then rotate 45 degree

36. C O M P U T E R G R A P H I C S Guoying Zhao 36 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 36 / 73 Composite Transformation in OpenGL OpenGL multiply the new matrix in right of the former matrix local transformation in OpenGL

37. C O M P U T E R G R A P H I C S Guoying Zhao 37 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 37 / 73 Composite Transformation in OpenGL glLoadIdentity(); glTranslatef(10.0f, 0.0f, 0.0f); glRotatef(45.0f, 0.0f, 0.0f, 1.0f); glBegin(GL_QUADS); …… glEnd();              1 z y x             1 z y x

38. C O M P U T E R G R A P H I C S Guoying Zhao 38 / 73 OpenGL Transformations

39. C O M P U T E R G R A P H I C S Guoying Zhao 39 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 39 / 73 Objectives Learn how to carry out transformations in OpenGL –Rotation –Translation –Scaling Introduce OpenGL matrix modes –Model-view –Projection

40. C O M P U T E R G R A P H I C S Guoying Zhao 40 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 40 / 73 OpenGL Matrices In OpenGL matrices are part of the state Multiple types –Model-View ( GL_MODELVIEW ) –Projection ( GL_PROJECTION ) –Texture ( GL_TEXTURE ) (ignore for now) –Color( GL_COLOR ) (ignore for now) Single set of functions for manipulation Select which to manipulated by –glMatrixMode(GL_MODELVIEW); –glMatrixMode(GL_PROJECTION);

41. C O M P U T E R G R A P H I C S Guoying Zhao 41 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 41 / 73 Current Transformation Matrix (CTM) Conceptually there is a 4 x 4 homogeneous coordinate matrix, the current transformation matrix (CTM) that is part of the state and is applied to all vertices that pass down the pipeline The CTM is defined in the user program and loaded into a transformation unit CTMvertices p p’=Cp C

42. C O M P U T E R G R A P H I C S Guoying Zhao 42 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 42 / 73 CTM operations The CTM can be altered either by loading a new CTM or by postmutiplication Load an identity matrix: C  I Load an arbitrary matrix: C  M Load a translation matrix: C  T Load a rotation matrix: C  R Load a scaling matrix: C  S Postmultiply by an arbitrary matrix: C  CM Postmultiply by a translation matrix: C  CT Postmultiply by a rotation matrix: C  C R Postmultiply by a scaling matrix: C  C S

43. C O M P U T E R G R A P H I C S Guoying Zhao 43 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 43 / 73 Rotation about a Fixed Point Start with identity matrix: C  I Move fixed point to origin: C  CT Rotate: C  CR Move fixed point back: C  CT -1 Result : C = TR T – 1 which is backwards. This result is a consequence of doing postmultiplications. Let ’ s try again.

44. C O M P U T E R G R A P H I C S Guoying Zhao 44 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 44 / 73 Reversing the Order We want C = T – 1 R T so we must do the operations in the following order C  I C  CT -1 C  CR C  CT Each operation corresponds to one function call in the program. Note that the last operation specified is the first executed in the program

45. C O M P U T E R G R A P H I C S Guoying Zhao 45 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 45 / 73 CTM in OpenGL OpenGL has a model-view and a projection matrix in the pipeline which are concatenated together to form the CTM Can manipulate each by first setting the correct matrix mode

46. C O M P U T E R G R A P H I C S Guoying Zhao 46 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 46 / 73 Rotation, Translation, Scaling glRotatef(theta, vx, vy, vz) glTranslatef(dx, dy, dz) glScalef( sx, sy, sz) glLoadIdentity() Load an identity matrix: Multiply on right: theta in degrees, ( vx, vy, vz ) define axis of rotation Each has a float (f) and double (d) format ( glScaled )

47. C O M P U T E R G R A P H I C S Guoying Zhao 47 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 47 / 73 Example Rotation about z axis by 30 degrees with a fixed point of (1.0, 2.0, 3.0) Remember that last matrix specified in the program is the first applied glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(1.0, 2.0, 3.0); glRotatef(30.0, 0.0, 0.0, 1.0); glTranslatef(-1.0, -2.0, -3.0);

48. C O M P U T E R G R A P H I C S Guoying Zhao 48 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 48 / 73 Arbitrary Matrices Can load and multiply by matrices defined in the application program The matrix m is a one dimension array of 16 elements which are the components of the desired 4 x 4 matrix stored by columns In glMultMatrixf, m multiplies the existing matrix on the right glLoadMatrixf(m) glMultMatrixf(m)

49. C O M P U T E R G R A P H I C S Guoying Zhao 49 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 49 / 73 Matrix Stacks In many situations we want to save transformation matrices for use later –Traversing hierarchical data structures –Avoiding state changes when executing display lists OpenGL maintains stacks for each type of matrix –Access present type (as set by glMatrixMode) by glPushMatrix() glPopMatrix()

50. C O M P U T E R G R A P H I C S Guoying Zhao 50 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 50 / 73 Reading Back Matrices Can also access matrices (and other parts of the state) by query functions For matrices, we use as glGetIntegerv glGetFloatv glGetBooleanv glGetDoublev glIsEnabled double m[16]; glGetFloatv(GL_MODELVIEW, m);

51. C O M P U T E R G R A P H I C S Guoying Zhao 51 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 51 / 73 Using the Model-view Matrix In OpenGL the model-view matrix is used to –Position the camera Can be done by rotations and translations but is often easier to use gluLookAt –Build models of objects The projection matrix is used to define the view volume and to select a camera lens

52. C O M P U T E R G R A P H I C S Guoying Zhao 52 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 52 / 73 Model-view and Projection Matrices Although both are manipulated by the same functions, we have to be careful because incremental changes are always made by postmultiplication –For example, rotating model-view and projection matrices by the same matrix are not equivalent operations. Postmultiplication of the model-view matrix is equivalent to premultiplication of the projection matrix

53. C O M P U T E R G R A P H I C S Guoying Zhao 53 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 53 / 73 Smooth Rotation From a practical standpoint, we are often want to use transformations to move and reorient an object smoothly –Problem: find a sequence of model-view matrices M 0,M 1, …..,M n so that when they are applied successively to one or more objects we see a smooth transition For orientating an object, we can use the fact that every rotation corresponds to part of a great circle on a sphere –Find the axis of rotation and angle –Virtual trackball

54. C O M P U T E R G R A P H I C S Guoying Zhao 54 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 54 / 73 Incremental Rotation Consider the two approaches –For a sequence of rotation matrices R 0,R 1, …..,R n, find the Euler angles for each and use R i = R iz R iy R ix Not very efficient –Use the final positions to determine the axis and angle of rotation, then increment only the angle Quaternions can be more efficient than either

55. C O M P U T E R G R A P H I C S Guoying Zhao 55 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 55 / 73 Quaternions Extension of imaginary numbers from two to three dimensions Requires one real and three imaginary components i, j, k Quaternions can express rotations on sphere smoothly and efficiently. Process: –Model-view matrix  quaternion –Carry out operations with quaternions –Quaternion  Model-view matrix q=q 0 +q 1 i+q 2 j+q 3 k

56. C O M P U T E R G R A P H I C S Guoying Zhao 56 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 56 / 73 Interfaces One of the major problems in interactive computer graphics is how to use two-dimensional devices such as a mouse to interface with three dimensional obejcts Example: how to form an instance matrix? Some alternatives –Virtual trackball –3D input devices such as the spaceball –Use areas of the screen Distance from center controls angle, position, scale depending on mouse button depressed

57. C O M P U T E R G R A P H I C S Guoying Zhao 57 / 73 Building Models

58. C O M P U T E R G R A P H I C S Guoying Zhao 58 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 58 / 73 Objectives Introduce simple data structures for building polygonal models –Vertex lists –Edge lists OpenGL vertex arrays

59. C O M P U T E R G R A P H I C S Guoying Zhao 59 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 59 / 73 Representing a Mesh Consider a mesh There are 8 nodes and 12 edges –5 interior polygons –6 interior (shared) edges Each vertex has a location v i = (x i y i z i ) v1v1 v2v2 v7v7 v6v6 v8v8 v5v5 v4v4 v3v3 e1e1 e8e8 e3e3 e2e2 e 11 e6e6 e7e7 e 10 e5e5 e4e4 e9e9 e 12

60. C O M P U T E R G R A P H I C S Guoying Zhao 60 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 60 / 73 Simple Representation Define each polygon by the geometric locations of its vertices Leads to OpenGL code such as Inefficient and unstructured –Consider moving a vertex to a new location –Must search for all occurrences glBegin(GL_POLYGON); glVertex3f(x1, x1, x1); glVertex3f(x6, x6, x6); glVertex3f(x7, x7, x7); glEnd();

61. C O M P U T E R G R A P H I C S Guoying Zhao 61 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 61 / 73 Inward and Outward Facing Polygons The order {v 1, v 6, v 7 } and {v 6, v 7, v 1 } are equivalent in that the same polygon will be rendered by OpenGL but the order {v 1, v 7, v 6 } is different The first two describe outwardly facing polygons Use the right-hand rule = counter-clockwise encirclement of outward-pointing normal OpenGL can treat inward and outward facing polygons differently

62. C O M P U T E R G R A P H I C S Guoying Zhao 62 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 62 / 73 Geometry vs Topology Generally it is a good idea to look for data structures that separate the geometry from the topology –Geometry: locations of the vertices –Topology: organization of the vertices and edges –Example: a polygon is an ordered list of vertices with an edge connecting successive pairs of vertices and the last to the first –Topology holds even if geometry changes

63. C O M P U T E R G R A P H I C S Guoying Zhao 63 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 63 / 73 Vertex Lists Put the geometry in an array Use pointers from the vertices into this array Introduce a polygon list x 1 y 1 z 1 x 2 y 2 z 2 x 3 y 3 z 3 x 4 y 4 z 4 x 5 y 5 z 5. x 6 y 6 z 6 x 7 y 7 z 7 x 8 y 8 z 8 P1 P2 P3 P4 P5 v1v7v6v1v7v6 v8v5v6v8v5v6 topology geometry

64. C O M P U T E R G R A P H I C S Guoying Zhao 64 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 64 / 73 Shared Edges Vertex lists will draw filled polygons correctly but if we draw the polygon by its edges, shared edges are drawn twice Can store mesh by edge list

65. C O M P U T E R G R A P H I C S Guoying Zhao 65 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 65 / 73 Edge List v1v1 v2v2 v7v7 v6v6 v8v8 v5v5 v3v3 e1e1 e8e8 e3e3 e2e2 e 11 e6e6 e7e7 e 10 e5e5 e4e4 e9e9 e 12 e1 e2 e3 e4 e5 e6 e7 e8 e9 x 1 y 1 z 1 x 2 y 2 z 2 x 3 y 3 z 3 x 4 y 4 z 4 x 5 y 5 z 5. x 6 y 6 z 6 x 7 y 7 z 7 x 8 y 8 z 8 v1 v6 Note polygons are not represented

66. C O M P U T E R G R A P H I C S Guoying Zhao 66 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 66 / 73 Modeling a Cube GLfloat vertices[][3] = {{-1.0,-1.0,-1.0},{1.0,-1.0,-1.0}, {1.0,1.0,-1.0}, {-1.0,1.0,-1.0}, {-1.0,-1.0,1.0}, {1.0,-1.0,1.0}, {1.0,1.0,1.0}, {-1.0,1.0,1.0}}; GLfloat colors[][3] = {{0.0,0.0,0.0},{1.0,0.0,0.0}, {1.0,1.0,0.0}, {0.0,1.0,0.0}, {0.0,0.0,1.0}, {1.0,0.0,1.0}, {1.0,1.0,1.0}, {0.0,1.0,1.0}}; Model a color cube for rotating cube program Define global arrays for vertices and colors

67. C O M P U T E R G R A P H I C S Guoying Zhao 67 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 67 / 73 Drawing a polygon from a list of indices Draw a quadrilateral from a list of indices into the array vertices and use color corresponding to first index void polygon(int a, int b, int c, int d) { glBegin(GL_POLYGON); glColor3fv(colors[a]); glVertex3fv(vertices[a]); glVertex3fv(vertices[b]); glVertex3fv(vertices[c]); glVertex3fv(vertices[d]); glEnd(); }

68. C O M P U T E R G R A P H I C S Guoying Zhao 68 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 68 / 73 Draw cube from faces void colorcube( ) { polygon(0,3,2,1); polygon(2,3,7,6); polygon(0,4,7,3); polygon(1,2,6,5); polygon(4,5,6,7); polygon(0,1,5,4); } 0 56 2 4 7 1 3 Note that vertices are ordered so that we obtain correct outward facing normals

69. C O M P U T E R G R A P H I C S Guoying Zhao 69 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 69 / 73 Efficiency Drawing a cube by its faces in the most straight forward way requires –6 glBegin, 6 glEnd –6 glColor –24 glVertex –More if we use texture and lighting

70. C O M P U T E R G R A P H I C S Guoying Zhao 70 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 70 / 73 Vertex Arrays OpenGL provides a facility called vertex arrays that allows us to store array data in the implementation Six types of arrays supported –Vertices –Colors –Color indices –Normals –Texture coordinates –Edge flags We will need only colors and vertices

71. C O M P U T E R G R A P H I C S Guoying Zhao 71 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 71 / 73 Initialization Using the same color and vertex data, first we enable glEnableClientState(GL_COLOR_ARRAY); glEnableClientState(GL_VERTEX_ARRAY); Identify location of arrays glVertexPointer(3, GL_FLOAT, 0, vertices); glColorPointer(3, GL_FLOAT, 0, colors); 3d arrays stored as floats data contiguous data array

72. C O M P U T E R G R A P H I C S Guoying Zhao 72 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 72 / 73 Mapping indices to faces Form an array of face indices Each successive four indices describe a face of the cube Draw through glDrawElements which replaces all glVertex and glColor calls in the display callback GLubyte cubeIndices[24] = {0,3,2,1,2,3,7,6 0,4,7,3,1,2,6,5,4,5,6,7,0,1,5,4};

73. C O M P U T E R G R A P H I C S Guoying Zhao 73 / 73 C O M P U T E R G R A P H I C S Guoying Zhao 73 / 73 Drawing the cube Method 1: Method 2: for(i=0; i<6; i++) glDrawElements(GL_POLYGON, 4, GL_UNSIGNED_BYTE, &cubeIndices[4*i]); format of index data start of index data what to draw number of indices glDrawElements(GL_QUADS, 24, GL_UNSIGNED_BYTE, cubeIndices); Draws cube with 1 function call!!