Hochiminh city University of Technology

Faculty of Computer Science and Engineering

COMPUTER GRAPHICS

CHAPTER 02:
Graphics Programming
 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

Faculty of Computer Science and Engineering - HCMUT Slide 2

 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

Faculty of Computer Science and Engineering - HCMUT Slide 3

 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

Faculty of Computer Science and Engineering - HCMUT Slide 4

 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

Faculty of Computer Science and Engineering - HCMUT Slide 5

 OpenGL Libraries

Faculty of Computer Science and Engineering - HCMUT Slide 6

 OpenGL Libraries

Faculty of Computer Science and Engineering - HCMUT Slide 7

 OpenGL Libraries

Faculty of Computer Science and Engineering - HCMUT Slide 8

 OpenGL Libraries

Faculty of Computer Science and Engineering - HCMUT Slide 9

 OpenGL Libraries

Faculty of Computer Science and Engineering - HCMUT Slide 10

 OpenGL Libraries
 OpenGL Functions
– Primitives
• Points
• Line Segments
• Polygons
– Attributes
– Transformations
• Modeling
• Viewing
– Control (GLUT)
– Input (GLUT)
– Query

Faculty of Computer Science and Engineering - HCMUT Slide 11

 Windows-based programming
 Event-driven programming
 Event queue
 Callback function
 Register callback function
• glutDisplayFunc(myDisplay)
• glutReshapeFunc(myReshape)
• glutMouseFunc(myMouse)
• glutKeyboardFunc(myKeyboard)

Faculty of Computer Science and Engineering - HCMUT Slide 12

 A simple program
 Generate a square on a solid background

Faculty of Computer Science and Engineering - HCMUT Slide 13

 A simple program
#include <GL/glut.h>
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();
}

Faculty of Computer Science and Engineering - HCMUT Slide 14

 A simple program
– Objects
– Viewer
– Light Source(s)
– Materials

Faculty of Computer Science and Engineering - HCMUT Slide 15

 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

Faculty of Computer Science and Engineering - HCMUT Slide 16

 Structure of the program

Faculty of Computer Science and Engineering - HCMUT Slide 17

 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

Faculty of Computer Science and Engineering - HCMUT Slide 18

 Structure of the program

Faculty of Computer Science and Engineering - HCMUT Slide 19

 Structure of the program
– Objects
– Viewer
– Light Source(s)
– Materials

Faculty of Computer Science and Engineering - HCMUT Slide 20

 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

Faculty of Computer Science and Engineering - HCMUT Slide 21

 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

Faculty of Computer Science and Engineering - HCMUT Slide 22

 Viewing
 In the default orthographic view, points are projected
forward along the z axis onto the plane z=0

z=0

z=0

Faculty of Computer Science and Engineering - HCMUT Slide 23

 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 1

-1
Faculty of Computer Science and Engineering - HCMUT Slide 24
 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 1

-1
Faculty of Computer Science and Engineering - HCMUT Slide 25
 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 1

-1
Faculty of Computer Science and Engineering - HCMUT Slide 26
 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)

Faculty of Computer Science and Engineering - HCMUT Slide 27

 Viewing

-2 4

-4

Faculty of Computer Science and Engineering - HCMUT Slide 28

 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();
Faculty of Computer Science and Engineering - HCMUT Slide 29
 Viewing
 How to get the picture of triangle and square?

Faculty of Computer Science and Engineering - HCMUT Slide 30

 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?

Faculty of Computer Science and Engineering - HCMUT Slide 31

 Viewport
 Do not have use the entire window for the image:
glViewport(x,y,w,h)
 Values in pixels (screen coordinates)

Faculty of Computer Science and Engineering - HCMUT Slide 32

 Viewport
 Size of the graphics window
– glutInitWindowSize(cx, cy);

glutInitWindowSize(640, 480);

Faculty of Computer Science and Engineering - HCMUT Slide 33

 Viewport
 glViewport(320, 240, 320, 240)

Faculty of Computer Science and Engineering - HCMUT Slide 34

 Viewport
 glViewport(320, 240, 240, 240)

Faculty of Computer Science and Engineering - HCMUT Slide 35

 Viewport
 How to draw picture in the second quadrant?

Faculty of Computer Science and Engineering - HCMUT Slide 36

 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?

Faculty of Computer Science and Engineering - HCMUT Slide 37

 Viewport
 How to draw picture in all quadrant?

Faculty of Computer Science and Engineering - HCMUT Slide 38

 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);
………………………………….

Faculty of Computer Science and Engineering - HCMUT Slide 39

 Primitives
– Objects
– Viewer
– Light Source(s)
– Materials
 Polyline
 Text
 Filled region
 Raster image

Faculty of Computer Science and Engineering - HCMUT Slide 40

 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)

Faculty of Computer Science and Engineering - HCMUT Slide 41

 Primitives
 Polyline
– Polygon: polyline if the first and the last points are
connected by an edge
– Polygon type: simple, convex

Faculty of Computer Science and Engineering - HCMUT Slide 42

 Primitives
 Polyline
– Attributes: Color, thickness, type (solid, dash), join
points

Faculty of Computer Science and Engineering - HCMUT Slide 43

 Primitives
 Text:
– Display mode: text mode, graphics mode
– Attributes: Font, color, size, orientation, space

Faculty of Computer Science and Engineering - HCMUT Slide 44

 Primitives
 Filled region
– Filled region is a shape filled with some color or
pattern. The boundary is often a polygon

Faculty of Computer Science and Engineering - HCMUT Slide 45

 Primitives
 Use filled region to shade the different faces of a three-
dimensional object

Faculty of Computer Science and Engineering - HCMUT Slide 46

 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
Faculty of Computer Science and Engineering - HCMUT Slide 47
 Draw Object
glBegin(parameter)
glVertex2f(…) //or glVertex3f(…)
glVertex2f(…)
………………
glEnd()
 Parameter
– GL_POINTS, GL_LINES, GL_TRIANGLES, v.v

Faculty of Computer Science and Engineering - HCMUT Slide 48

 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();

Faculty of Computer Science and Engineering - HCMUT Slide 49

 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();

Faculty of Computer Science and Engineering - HCMUT Slide 50

 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();

Faculty of Computer Science and Engineering - HCMUT Slide 51

 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();

Faculty of Computer Science and Engineering - HCMUT Slide 52

 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();

Faculty of Computer Science and Engineering - HCMUT Slide 53

 Draw Object
 glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
 glColor3f(1.0, 0.0, 0.0);
 glLineWidth(3.0);

Faculty of Computer Science and Engineering - HCMUT Slide 54

 Draw Object
 glPolygonMode(GL_FRONT_AND_BACK, GL_POINT);
 glColor3f(1.0, 1.0, 0.0);
 glPointSize(5);

Faculty of Computer Science and Engineering - HCMUT Slide 55

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

Faculty of Computer Science and Engineering - HCMUT Slide 56

 Draw Object

Faculty of Computer Science and Engineering - HCMUT Slide 57

 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();
Faculty of Computer Science and Engineering - HCMUT Slide 58
 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, 0.0);
glVertex2f(-0.5, -1.0);
glVertex2f(-0.5, 0.0);
glVertex2f( 0.5, 0.0);
glVertex2f( 0.5, 0.0);
glVertex2f(-0.5, -1.0);
glVertex2f( 0.5, -1.0);
glEnd();

Faculty of Computer Science and Engineering - HCMUT Slide 59

 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();

Faculty of Computer Science and Engineering - HCMUT Slide 60

 Draw Object
GL_QUADS
GL_QUAD_STRIP
GL_TRIANGLE_FAN

Faculty of Computer Science and Engineering - HCMUT Slide 61

 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();
}

Faculty of Computer Science and Engineering - HCMUT Slide 62

 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<[Link];i++)
glVertex2i([Link][i].x, [Link][i].y);
glEnd();
glFlush();
}

Faculty of Computer Science and Engineering - HCMUT Slide 63

 The Sierpinski Gasket

Faculty of Computer Science and Engineering - HCMUT Slide 64

 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

Faculty of Computer Science and Engineering - HCMUT Slide 65

 The Sierpinski Gasket
main()
{
Initialize_the_system();

for(some_number_of_points)
{
pt = generate_a_point();
Display_the_point(pt);
}
}

Faculty of Computer Science and Engineering - HCMUT Slide 66

 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);
}

Faculty of Computer Science and Engineering - HCMUT Slide 67

 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 */
}

Faculty of Computer Science and Engineering - HCMUT Slide 68

 The Sierpinski Gasket
 Start with a triangle

 Connect bisectors of sides and remove central triangle

 Repeat

Faculty of Computer Science and Engineering - HCMUT Slide 69

 The Sierpinski Gasket
 Five subdivisions

Faculty of Computer Science and Engineering - HCMUT Slide 70

 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);
}

Faculty of Computer Science and Engineering - HCMUT Slide 71

 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));
}

Faculty of Computer Science and Engineering - HCMUT Slide 72

 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);
}

Faculty of Computer Science and Engineering - HCMUT Slide 73

 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();
}

Faculty of Computer Science and Engineering - HCMUT Slide 74

 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

Faculty of Computer Science and Engineering - HCMUT Slide 75

 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

Faculty of Computer Science and Engineering - HCMUT Slide 76

 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);
}

Faculty of Computer Science and Engineering - HCMUT Slide 77

 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 */
}

Faculty of Computer Science and Engineering - HCMUT Slide 78

 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

Faculty of Computer Science and Engineering - HCMUT Slide 79

 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

Faculty of Computer Science and Engineering - HCMUT Slide 80

 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)

Faculty of Computer Science and Engineering - HCMUT Slide 81

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

Faculty of Computer Science and Engineering - HCMUT Slide 82

 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ổ
}

Faculty of Computer Science and Engineering - HCMUT Slide 83

 More Examples

Faculty of Computer Science and Engineering - HCMUT Slide 84

 More Examples
 Spherical coordinate system
– x = r*sin(theta)*cos(phi);
– z = r*cos(theta)*cos(phi);
– y = r*sin(phi);

Faculty of Computer Science and Engineering - HCMUT Slide 85

 More Examples

Faculty of Computer Science and Engineering - HCMUT Slide 86

 More Examples

Faculty of Computer Science and Engineering - HCMUT Slide 87

 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();
}

Faculty of Computer Science and Engineering - HCMUT Slide 88

 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();
Faculty of Computer Science and Engineering - HCMUT Slide 89
 More Examples

Faculty of Computer Science and Engineering - HCMUT Slide 90

 More Examples

Faculty of Computer Science and Engineering - HCMUT Slide 91

 More Examples

Faculty of Computer Science and Engineering - HCMUT Slide 92

 More Examples

Faculty of Computer Science and Engineering - HCMUT Slide 93

 More Examples

Faculty of Computer Science and Engineering - HCMUT Slide 94

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

Faculty of Computer Science and Engineering - HCMUT Slide 95

 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();
……………………………….

Faculty of Computer Science and Engineering - HCMUT Slide 96

 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();
……………………………….

Faculty of Computer Science and Engineering - HCMUT Slide 97

 Modeling Shapes with Polygonal Meshes

Faculty of Computer Science and Engineering - HCMUT Slide 98

 Modeling Shapes with Polygonal Meshes
 Data Structure
 class Mesh {
Face faceArr[];
};
class Face {
Point3 vertexArr[];
Vector3 normArr[];
}

Faculty of Computer Science and Engineering - HCMUT Slide 99

 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.

Faculty of Computer Science and Engineering - HCMUT Slide 100

 Modeling Shapes with Polygonal Meshes

Faculty of Computer Science and Engineering - HCMUT Slide 101

 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; }
};

Faculty of Computer Science and Engineering - HCMUT Slide 102

 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
};

Faculty of Computer Science and Engineering - HCMUT Slide 103

 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++){
int iv = face[f].vert[v].vertIndex;
glVertex3f(pt[iv].x, pt[iv].y, pt[iv].z);
}
glEnd();
}
}

Faculty of Computer Science and Engineering - HCMUT Slide 104

 Modeling Shapes with Polygonal Meshes

Faculty of Computer Science and Engineering - HCMUT Slide 105

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

Faculty of Computer Science and Engineering - HCMUT Slide 106

 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;

Faculty of Computer Science and Engineering - HCMUT Slide 107

 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

Faculty of Computer Science and Engineering - HCMUT Slide 108