1. COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming

2. Slide 2Faculty of Computer Science and Engineering - HCMUT OUTLINE  Introduction  OpenGL Libraries  Windows-based programming  A simple program  Structure of the program  Viewing  Viewport  Primitives  Draw Object  The Sierpinski Gasket  Hidden-Surface Removal  More Examples

3. Slide 3Faculty of Computer Science and Engineering - HCMUT Introduction  Programming Environment –Hardware: display, graphics card –Software: OS (Windows), programming language (MS VC++), graphics library (OpenGL, DirectX)  OpenGL –Platform-independent API –Easy to use –Close enough to the hardware to get excellent performance –Treat 2D and 3D in the same way

4. Slide 4Faculty of Computer Science and Engineering - HCMUT OpenGL Libraries  OpenGL core library –OpenGL32 on Windows –GL on most unix/linux systems (libGL.a)  OpenGL Utility Library (GLU) –Provides functionality in OpenGL core but avoids having to rewrite code  Links with window system –GLX for X window systems –WGL for Windows –AGL for Macintosh

5. Slide 5Faculty of Computer Science and Engineering - HCMUT OpenGL Libraries  OpenGL Utility Toolkit (GLUT) –Provides functionality common to all window systems Open a window Get input from mouse and keyboard Menus Event-driven –Code is portable but GLUT lacks the functionality of a good toolkit for a specific platform No slide bars

6. Slide 6Faculty of Computer Science and Engineering - HCMUT OpenGL Libraries

7. Slide 7Faculty of Computer Science and Engineering - HCMUT OpenGL Libraries

8. Slide 8Faculty of Computer Science and Engineering - HCMUT OpenGL Libraries

9. Slide 9Faculty of Computer Science and Engineering - HCMUT OpenGL Libraries

10. Slide 10Faculty of Computer Science and Engineering - HCMUT OpenGL Libraries

11. Slide 11Faculty of Computer Science and Engineering - HCMUT OpenGL Libraries  OpenGL Functions –Primitives Points Line Segments Polygons –Attributes –Transformations Modeling Viewing –Control (GLUT) –Input (GLUT) –Query

12. Slide 12Faculty of Computer Science and Engineering - HCMUT Windows-based programming  Event-driven programming  Event queue  Callback function  Register callback function glutDisplayFunc(myDisplay) glutReshapeFunc(myReshape) glutMouseFunc(myMouse) glutKeyboardFunc(myKeyboard)

13. Slide 13Faculty of Computer Science and Engineering - HCMUT A simple program  Generate a square on a solid background

14. Slide 14Faculty of Computer Science and Engineering - HCMUT A simple program #include void mydisplay(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); } int main(int argc, char** argv){ glutCreateWindow("simple"); glutDisplayFunc(mydisplay); glutMainLoop(); }

15. Slide 15Faculty of Computer Science and Engineering - HCMUT A simple program –Objects –Viewer –Light Source(s) –Materials

16. Slide 16Faculty of Computer Science and Engineering - HCMUT Structure of the program  Most OpenGL programs have a similar structure that consists of the following functions –main(): defines the callback functions opens one or more windows with the required properties enters event loop (last executable statement) –init(): sets the state variables Viewing Attributes –Callbacks Display function Input and window functions

17. Slide 17Faculty of Computer Science and Engineering - HCMUT Structure of the program

18. Slide 18Faculty of Computer Science and Engineering - HCMUT Structure of the program  glutInit allows application to get command line arguments and initializes system  gluInitDisplayMode requests properties for the window (the rendering context) –RGB color –Single buffering –Properties logically ORed together  glutWindowSize in pixels  glutWindowPosition from top-left corner of display  glutCreateWindow create window with title “simple”  glutDisplayFunc display callback  glutMainLoop enter infinite event loop

19. Slide 19Faculty of Computer Science and Engineering - HCMUT Structure of the program

20. Slide 20Faculty of Computer Science and Engineering - HCMUT Structure of the program –Objects –Viewer –Light Source(s) –Materials

21. Slide 21Faculty of Computer Science and Engineering - HCMUT Viewing  OpenGL places a camera at the origin in object space pointing in the negative z direction  The default viewing volume is a box centered at the origin with a side of length 2

22. Slide 22Faculty of Computer Science and Engineering - HCMUT Viewing  Perspective projections: all projectors meet at the center of projection  Parallel projection: projectors are parallel, center of projection is replaced by a direction of projection

23. Slide 23Faculty of Computer Science and Engineering - HCMUT Viewing  In the default orthographic view, points are projected forward along the z axis onto the plane z=0 z=0

24. Slide 24Faculty of Computer Science and Engineering - HCMUT Viewing glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); 1 1

25. Slide 25Faculty of Computer Science and Engineering - HCMUT Viewing glBegin(GL_POLYGON); glVertex2f(1.0, 1.0); glVertex2f(1.0, 2.0); glVertex2f(2.0, 2.0); glVertex2f(2.0, 1.0); glEnd(); 1 1

26. Slide 26Faculty of Computer Science and Engineering - HCMUT Viewing glBegin(GL_POLYGON); glVertex2f(0.5, 0.5); glVertex2f(0.5, 1.5); glVertex2f(1.5, 1.5); glVertex2f(1.5, 0.5); glEnd(); 1 1

27. Slide 27Faculty of Computer Science and Engineering - HCMUT Viewing  glMatrixMode (GL_PROJECTION) glLoadIdentity(); glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);  glMatrixMode (GL_PROJECTION) glLoadIdentity(); glOrtho(-1.0, 1.0, -1.0, 1.0)  glOrtho(left, right, bottom, top, near, far)  gluOrtho2D(left, right,bottom,top)

28. Slide 28Faculty of Computer Science and Engineering - HCMUT Viewing 4-2 2 -4

29. Slide 29Faculty of Computer Science and Engineering - HCMUT Viewing glBegin(GL_POLYGON); glVertex2f(-2.0, 0.0); glVertex2f(-2.0, 2.0); glVertex2f(0.0, 2.0); glVertex2f(0.0, 0.0); glEnd(); glBegin(GL_POLYGON); glVertex2f( 0.0, -4.0); glVertex2f( 2.0, 0.0); glVertex2f( 4.0, -4.0); glEnd();

30. Slide 30Faculty of Computer Science and Engineering - HCMUT Viewing  How to get the picture of triangle and square?

31. Slide 31Faculty of Computer Science and Engineering - HCMUT Viewing  How to get the picture of triangle and square? – glMatrixMode (GL_PROJECTION); –glLoadIdentity(); –gluOrtho2D(-2.0, 4.0, -4.0, 2.0);  How to get the picture of the square?  How to get the picture of the triangle?

32. Slide 32Faculty of Computer Science and Engineering - HCMUT Viewport  Do not have use the entire window for the image: glViewport(x,y,w,h)  Values in pixels (screen coordinates)

33. Slide 33Faculty of Computer Science and Engineering - HCMUT Viewport  Size of the graphics window –glutInitWindowSize(cx, cy); glutInitWindowSize(640, 480);

34. Slide 34Faculty of Computer Science and Engineering - HCMUT Viewport  glViewport(320, 240, 320, 240)

35. Slide 35Faculty of Computer Science and Engineering - HCMUT Viewport  glViewport(320, 240, 240, 240)

36. Slide 36Faculty of Computer Science and Engineering - HCMUT Viewport  How to draw picture in the second quadrant?

37. Slide 37Faculty of Computer Science and Engineering - HCMUT Viewport  How to draw picture in the second quadrant? –glViewport(0, 240, 320, 240);  How to draw picture in the third quadrant?  How to draw picture in the fourth quadrant?  How to draw picture in all quadrant?

38. Slide 38Faculty of Computer Science and Engineering - HCMUT Viewport  How to draw picture in all quadrant?

39. Slide 39Faculty of Computer Science and Engineering - HCMUT Viewport  glViewport(320, 240, 320, 240); glBegin() //draw square ……………… glEnd() glBegin() //draw triangle ……………… glEnd()  glViewport(0, 240, 320, 240); ………………………………….  glViewport(0, 0, 320, 240); ………………………………….  glViewport(320, 0, 320, 240); ………………………………….

40. Slide 40Faculty of Computer Science and Engineering - HCMUT Primitives –Objects –Viewer –Light Source(s) –Materials  Polyline  Text  Filled region  Raster image

41. Slide 41Faculty of Computer Science and Engineering - HCMUT Primitives  Polyline –A polyline is a connected sequence of straight lines –A polyline can be used to approximated a smooth curve –Functions: Draw Point: drawDot(x1, y1) Draw Line: drawLine(x1, y1, x2, y2) Draw Polyline: drawPolyline(poly)

42. Slide 42Faculty of Computer Science and Engineering - HCMUT Primitives  Polyline –Polygon: polyline if the first and the last points are connected by an edge –Polygon type: simple, convex

43. Slide 43Faculty of Computer Science and Engineering - HCMUT Primitives  Polyline –Attributes: Color, thickness, type (solid, dash), join points

44. Slide 44Faculty of Computer Science and Engineering - HCMUT Primitives  Text: –Display mode: text mode, graphics mode –Attributes: Font, color, size, orientation, space

45. Slide 45Faculty of Computer Science and Engineering - HCMUT Primitives  Filled region –Filled region is a shape filled with some color or pattern. The boundary is often a polygon

46. Slide 46Faculty of Computer Science and Engineering - HCMUT Primitives  Use filled region to shade the different faces of a three- dimensional object

47. Slide 47Faculty of Computer Science and Engineering - HCMUT Primitives  Raster Image –Raster image is made up of many pixels. –Stored as an array of numerical values  How are raster images created? –Hand-designed, Computed Images, Scanned Images  Raster image can be processed

48. Slide 48Faculty of Computer Science and Engineering - HCMUT Draw Object glBegin(parameter) glVertex2f(…) //or glVertex3f(…) glVertex2f(…) ……………… glEnd()  Parameter –GL_POINTS, GL_LINES, GL_TRIANGLES, v.v

49. Slide 49Faculty of Computer Science and Engineering - HCMUT Draw Object glBegin(GL_POINTS); glVertex2f(-0.5, 1.0); glVertex2f( 0.5, 1.0); glVertex2f(-0.5, 0.0); glVertex2f( 0.5, 0.0); glVertex2f(-0.5, -1.0); glVertex2f( 0.5, -1.0); glEnd();

50. Slide 50Faculty of Computer Science and Engineering - HCMUT Draw Object glBegin(GL_LINES); glVertex2f(-0.5, 1.0); glVertex2f( 0.5, 1.0); glVertex2f(-0.5, 0.0); glVertex2f( 0.5, 0.0); glVertex2f(-0.5, -1.0); glVertex2f( 0.5, -1.0); glEnd();

51. Slide 51Faculty of Computer Science and Engineering - HCMUT Draw Object glBegin(GL_LINE_STRIP); glVertex2f(-0.5, 1.0); glVertex2f( 0.5, 1.0); glVertex2f(-0.5, 0.0); glVertex2f( 0.5, 0.0); glVertex2f(-0.5, -1.0); glVertex2f( 0.5, -1.0); glEnd();

52. Slide 52Faculty of Computer Science and Engineering - HCMUT Draw Object glBegin(GL_LINE_LOOP); glVertex2f(-0.5, 1.0); glVertex2f( 0.5, 1.0); glVertex2f(-0.5, 0.0); glVertex2f( 0.5, 0.0); glVertex2f(-0.5, -1.0); glVertex2f( 0.5, -1.0); glEnd();

53. Slide 53Faculty of Computer Science and Engineering - HCMUT Draw Object glBegin(GL_TRIANGLES); glVertex2f(-0.5, 1.0); glVertex2f( 0.5, 1.0); glVertex2f(-0.5, 0.0); glVertex2f( 0.5, 0.0); glVertex2f(-0.5, -1.0); glVertex2f( 0.5, -1.0); glEnd();

54. Slide 54Faculty of Computer Science and Engineering - HCMUT Draw Object  glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);  glColor3f(1.0, 0.0, 0.0);  glLineWidth(3.0);

55. Slide 55Faculty of Computer Science and Engineering - HCMUT Draw Object  glPolygonMode(GL_FRONT_AND_BACK, GL_POINT);  glColor3f(1.0, 1.0, 0.0);  glPointSize(5);

56. Slide 56Faculty of Computer Science and Engineering - HCMUT Draw Object  glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);  glColor3f(0.0, 1.0, 0.0);  glClearColor(1.0, 1.0, 1.0, 1.0);

57. Slide 57Faculty of Computer Science and Engineering - HCMUT Draw Object

58. Slide 58Faculty of Computer Science and Engineering - HCMUT Draw Object glPolygonMode(GL_FRONT_AND_BACK, GL_FILL); glColor3f(0.0, 1.0, 0.0); glClearColor(1.0, 1.0, 1.0, 1.0); glBegin(GL_TRIANGLES); …………………….. glEnd(); glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); glColor3f(1.0, 0.0, 0.0); glLineWidth(3); glBegin(GL_TRIANGLES); …………………….. glEnd();

59. Slide 59Faculty of Computer Science and Engineering - HCMUT Draw Object glBegin(GL_TRIANGLES); glVertex2f(-0.5, 1.0); glVertex2f( 0.5, 1.0); glVertex2f(-0.5, 0.0); glVertex2f( 0.5, 1.0); glVertex2f( 0.5, 0.0); glVertex2f(-0.5, -1.0); glVertex2f(-0.5, 0.0); glVertex2f( 0.5, 0.0); glVertex2f(-0.5, -1.0); glVertex2f( 0.5, -1.0); glEnd();

60. Slide 60Faculty of Computer Science and Engineering - HCMUT Draw Object glBegin(GL_TRIANGLE_STRIP); glVertex2f(-0.5, 1.0); glVertex2f( 0.5, 1.0); glVertex2f(-0.5, 0.0); glVertex2f( 0.5, 0.0); glVertex2f(-0.5, -1.0); glVertex2f( 0.5, -1.0); glEnd();

61. Slide 61Faculty of Computer Science and Engineering - HCMUT Draw Object GL_QUADS GL_QUAD_STRIP GL_TRIANGLE_FAN

62. Slide 62Faculty of Computer Science and Engineering - HCMUT Draw Object void drawPoint(GLint x, GLint y) { glBegin(GL_POINTS); glVertex2i(x, y); glEnd(); } void drawLine(GLint x1, GLint y1, GLint x2, GLint y2){ glBegin(GL_LINES); glVertex2i(x1, y1); glVertex2i(x2, y2); glEnd(); }

63. Slide 63Faculty of Computer Science and Engineering - HCMUT Draw Object class GLintPointArray { const int MAX_NUM = 100; public: int num ; GLintPoint pt[MAX_NUM] ; }; void drawPolyLine(GLintPointArray poly,int closed) { glBegin(closed ? GL_LINE_LOOP : GL_LINE_STRIP); for(int i=0;i<poly.num;i++) glVertex2i(poly.pt[i].x, poly.pt[i].y); glEnd(); glFlush(); }

64. Slide 64Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket

65. Slide 65Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket 1.Pick an initial point (x, y, z) at random inside the triangle 2.Select one of the three vertices at random 3.Find the location halfway between the initial point and the randomly selected vertex 4.Display this new point by putting some sort of marker, such as a small circle at the corresponding location on the display 5.Replace the point at (x, y, z) with this new point 6.Return to step 2

66. Slide 66Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket main() { Initialize_the_system(); for(some_number_of_points) { pt = generate_a_point(); Display_the_point(pt); }

67. Slide 67Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket void myinit() { glClearColor(1.0, 1.0, 1.0, 1.0); /* white background */ glColor3f(1.0, 0.0, 0.0); /* draw in red */ glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, 50.0, 0.0, 50.0); glMatrixMode(GL_MODELVIEW); }

68. Slide 68Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket void display( void ){ GLfloat vertices[3][2]={{0.0,0.0},{25.0,50.0},{50.0,0.0}}; /* A triangle */ int j, k; int rand(); /* standard random number generator */ GLfloat p[2] ={7.5,5.0}; /* An arbitrary initial point inside traingle */ glClear(GL_COLOR_BUFFER_BIT); /*clear the window */ glBegin(GL_POINTS); for( k=0; k<5000; k++) { j = rand()%3; /* pick a vertex at random */ p[0] = (p[0]+vertices[j][0])/2.0; p[1] = (p[1]+vertices[j][1])/2.0; glVertex2fv(p); } glEnd(); glFlush(); /* clear buffers */ }

69. Slide 69Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket  Start with a triangle  Connect bisectors of sides and remove central triangle  Repeat

70. Slide 70Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket  Five subdivisions

71. Slide 71Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket GLfloat v[3][2]={{-1.0, -0.58}, {1.0, -0.58}, {0.0, 1.15}}; int n; void triangle( GLfloat *a, GLfloat *b, GLfloat *c) /* display one triangle */ { glVertex2fv(a); glVertex2fv(b); glVertex2fv(c); }

72. Slide 72Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket void divide_triangle(GLfloat *a, GLfloat *b, GLfloat *c, int m) { point2 v0, v1, v2; int j; if(m>0){ for(j=0; j<2; j++) v0[j]=(a[j]+b[j])/2; for(j=0; j<2; j++) v1[j]=(a[j]+c[j])/2; for(j=0; j<2; j++) v2[j]=(b[j]+c[j])/2; divide_triangle(a, v0, v1, m-1); divide_triangle(c, v1, v2, m-1); divide_triangle(b, v2, v0, m-1); } else(triangle(a,b,c)); }

73. Slide 73Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket void display() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES); divide_triangle(v[0], v[1], v[2], n); glEnd(); glFlush(); } void myinit() { glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-2.0, 2.0, -2.0, 2.0); glMatrixMode(GL_MODELVIEW); glClearColor (1.0, 1.0, 1.0,1.0) glColor3f(0.0,0.0,0.0); }

74. Slide 74Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket int main(int argc, char **argv) { n=4; glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB); glutInitWindowSize(500, 500); glutCreateWindow(“2D Gasket"); glutDisplayFunc(display); myinit(); glutMainLoop(); }

75. Slide 75Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket  We can easily make the program three-dimensional by using –GLfloat v[4][3] –glVertex3f –glOrtho  But that would not be very interesting  Instead, we can start with a tetrahedron

76. Slide 76Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket  We can subdivide each of the four faces  Appears as if we remove a solid tetrahedron from the center leaving four smaller tetrahedra

77. Slide 77Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket void triangle( GLfloat *a, GLfloat *b, GLfloat *c){ glVertex3fv(a); glVertex3fv(b); glVertex3fv(c); } void tetra(GLfloat *a, GLfloat *b, GLfloat *c, GLfloat *d){ glColor3fv(colors[0]); triangle(b, d, c); glColor3fv(colors[1]); triangle(a, b, c); glColor3fv(colors[2]); triangle(a, c, d); glColor3fv(colors[3]); triangle(a, d, b); }

78. Slide 78Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket void divide_tetra(GLfloat *a, GLfloat *b, GLfloat *c, GLfloat *d, int m){ GLfloat mid[6][3]; int j; if(m>0) { for(j=0; j<3; j++) mid[0][j]=(a[j]+b[j])/2; ……………………………………………. divide_tetra(a, mid[0], mid[1], mid[2], m-1); ……………………………………………. } else(tetra(a,b,c,d)); /* draw tetrahedron at end of recursion */ }

79. Slide 79Faculty of Computer Science and Engineering - HCMUT The Sierpinski Gasket  Because the triangles are drawn in the order they are defined in the program, the front triangles are not always rendered in front of triangles behind them

80. Slide 80Faculty of Computer Science and Engineering - HCMUT Hidden-Surface Removal  We want to see only those surfaces in front of other surfaces  OpenGL uses a hidden-surface method called the z- buffer algorithm that saves depth information as objects are rendered so that only the front objects appear in the image

81. Slide 81Faculty of Computer Science and Engineering - HCMUT Hidden-Surface Removal  The algorithm uses an extra buffer, the z-buffer, to store depth information as geometry travels down the pipeline  It must be –Requested in main() glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH) –Enabled glEnable(GL_DEPTH_TEST) –Cleared in the display callback glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)

82. Slide 82Faculty of Computer Science and Engineering - HCMUT More Examples  void hardwirededHouse() { glBegin(GL_LINE_LOOP);//vẽ khung ngôi nhà glVertex2i(40, 40); glVertex2i(40, 90); glVertex2i(70, 120); glVertex2i(100, 90); glVertex2i(100, 40); glEnd(); glBegin(GL_LINE_STRIP);//vẽ ống khói glVertex2i(50, 100); glVertex2i(50, 120); glVertex2i(60, 120); glVertex2i(60, 110); glEnd();... // vẽ cửa ra vào... // vẽ cửa sổ } 12040 120 40

83. Slide 83Faculty of Computer Science and Engineering - HCMUT More Examples  void parameterizedHouse(GLintPoint peak,GLint width,GLint height) // tọa độ của nóc nhà là peak, // chiều cao, chiều rộng của ngôi nhà là height và width { glBegin(GL_LINE_LOOP); glVertex2i(peak.x, peak.y); glVertex2i(peak.x + width/2,peak.y – 3*height/8); glVertex2i(peak.x + width/2,peak.y – height); glVertex2i(peak.x - width/2,peak.y – height); glVertex2i(peak.x - width/2,peak.y – 3*height/8); glEnd(); vẽ ống khói vẽ cửa ra vào vẽ cửa sổ }

84. Slide 84Faculty of Computer Science and Engineering - HCMUT More Examples

85. Slide 85Faculty of Computer Science and Engineering - HCMUT More Examples  Spherical coordinate system –x = r*sin(theta)*cos(phi); –z = r*cos(theta)*cos(phi); –y = r*sin(phi);

86. Slide 86Faculty of Computer Science and Engineering - HCMUT More Examples

87. Slide 87Faculty of Computer Science and Engineering - HCMUT More Examples

88. Slide 88Faculty of Computer Science and Engineering - HCMUT More Examples for(float phi = -80; phi<=80; phi+=20){ phir = c*phi; phir20 = c*(phi+20); glBegin(GL_QUAD_STRIP); for(float theta = -180; theta<=180; theta+=20){ thetar = c*theta; x = sin(thetar)*cos(phir); z = cos(thetar)*cos(phir); y = sin(phir); glVertex3d(x, y, z); x = sin(thetar)*cos(phir20);z = cos(thetar)*cos(phir20); y = sin(phir20); glVertex3d(x, y, z); } glEnd(); }

89. Slide 89Faculty of Computer Science and Engineering - HCMUT More Examples glBegin(GL_TRIANGLE_FAN); glVertex3d(0, 1, 0); c80 = c*80; y = sin(c80); for(float theta = 180; theta>=-180; theta-=20) { thetar = c*theta; x = sin(thetar)*cos(c80); z = cos(thetar)*cos(c80); glVertex3d(x, y, z); } glEnd();

90. Slide 90Faculty of Computer Science and Engineering - HCMUT More Examples

91. Slide 91Faculty of Computer Science and Engineering - HCMUT More Examples

92. Slide 92Faculty of Computer Science and Engineering - HCMUT More Examples

93. Slide 93Faculty of Computer Science and Engineering - HCMUT More Examples

94. Slide 94Faculty of Computer Science and Engineering - HCMUT More Examples

95. Slide 95Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes  Polygonal meshes are simply collections of polygons, or “faces,” that together form the “skin” of an object. They have become a standard way of representing a broad class of solid shapes in graphics.  Easy to represent (by a sequence of vertices) and transform, have simple properties (a single normal vector, sequence of vertices) and transform, have simple properties (a single normal vector, a well-defined inside and outside, etc.), and are easy to draw (using a polygon-fill routine or by mapping texture onto the polygon).

96. Slide 96Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes glPolygonMode(GL_FRONT_A ND_BACK, GL_LINE); glBegin(GL_POLYGON); glVertex3f(-1, 1, 1); glVertex3f( 1, 1, 1); glVertex3f( 1, 1, -1); glVertex3f( -1, 1, -1); glEnd(); ……………………………….

97. Slide 97Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes glPolygonMode(GL_FRONT_A ND_BACK, GL_FILL); glColor3f(0, 0, 1); glBegin(GL_POLYGON); glVertex3f(-1, 1, 1); glVertex3f( 1, 1, 1); glVertex3f( 1, 1, -1); glVertex3f( -1, 1, -1); glEnd(); ……………………………….

98. Slide 98Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes

99. Slide 99Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes  Data Structure  class Mesh { Face faceArr[]; }; class Face { Point3 vertexArr[]; Vector3 normArr[]; }

100. Slide 100Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes  Defining a Polygonal Mesh - A more efficient approach uses three separate lists : a vertex list, a normal list, and a face list - The three lists work together : The vertex list contains locational or geometric information, the normal list contains orientation information, and the face list contains connectivity or topological information.

101. Slide 101Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes

102. Slide 102Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes class VertexID{ public: int vertIndex; //index of this vertex in the vertex list int normIndex; // index of this vertex's normal }; class Face{ public: int nVerts; // number of vertice in this face VertexID* vert; // the list of vertex and normal index Face() { nVerts = 0; vert = NULL; } ~Face() { delete[] vert; nVerts = 0; } };

103. Slide 103Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes class Mesh { private: int numVerts; // number of vertices in the mesh Point3* pt; // array of 3D vertices int numNormals; // number of normal vectors for the mesh Vector3* norm; // array of normals int numFaces; // number of faces in the mesh Face* face; // array of face data //... others to be added later public: Mesh(); ~Mesh(); //... others };

104. Slide 104Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes void Mesh::DrawWireframe(){ glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); for (int f = 0; f < numFaces; f++) { glBegin(GL_POLYGON); for (int v = 0; v < face[f].nVerts; v++){ intiv = face[f].vert[v].vertIndex; glVertex3f(pt[iv].x, pt[iv].y, pt[iv].z); } glEnd(); }

105. Slide 105Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes

106. Slide 106Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes void Mesh::CreateTetrahedron() { numVerts=4; pt = new Point3[numVerts]; pt[0].set(0, 0, 0); pt[1].set(1, 0, 0); pt[2].set(0, 1, 0); pt[3].set(0, 0, 1);

107. Slide 107Faculty of Computer Science and Engineering - HCMUT Modeling Shapes with Polygonal Meshes numFaces= 4; face = new Face[numFaces]; face[0].nVerts = 3; face[0].vert = new VertexID[face[0].nVerts]; face[0].vert[0].vertIndex = 1; face[0].vert[1].vertIndex = 2; face[0].vert[2].vertIndex = 3; face[0].vert[0].normIndex = 0; face[0].vert[1].normIndex = 0; face[0].vert[2].normIndex = 0;

108. Slide 108Faculty of Computer Science and Engineering - HCMUT Further Reading  “Interactive Computer Graphics: A Topdown Approach Using OpenGL”, Edward Angel –Chapter 2: Graphics Programming  “Đồ họa máy tính trong không gian hai chiều”, Trần Giang Sơn –Chương 2: Bước đầu tạo hình ảnh  “Đồ họa máy tính trong không gian ba chiều”, Trần Giang Sơn –Chương 1: Mô hình hóa đối tượng ba chiều bằng lưới đa giác