Syllabus Videos Homework Quizzes Notes Labs Scores Blank

Lecture Notes
Dr. Tong Yu, Sept. 2013
All the materials presented here are adopted from the textbook and the listed references.
 1. Introduction 2. Line Drawing 3. Drawing Objects 4. More Drawing Tools 5. Vertex Array and Vertex Buffer Object 6. Normal Vectors and Polygonal Models of Surfaces 7. Viewing I -- Affine Transformations
 8. Viewing II -- Projections 9. Color 10. Lighting 11. Blending, antialiasing, fog .. 12. Display Lists, Bitmaps and Images 13. Texture Mapping 13. OpenGL Shading Language ( GLSL ) Videos

Drawing Objects
1. World Windows and Viewports
2. Screen System
measured in pixels:
x : 0 --> screenWidth - 1
y : 0 --> screenHeight - 1
e.g. 800 x 600 screen, x : 0 - 799, y : 0 - 599
upper left corner is ( 0, 0 )
These are screen coordinates, screen window
In practice, we may not want to think in terms of pixels. It is more natural to think in terms of x varying from say, -1.0 to 1.0, and y varying from -50.0 to 200.0.
These are world coordinates, the space in which the objects are described.

3. World Window
the rectangular window in world coordinates, specifying which part of the world to be drawn.

4. Viewport
a rectangular space defined in the screen window
• a mapping between the world window and the viewport is established
• objects in world window are displayed in viewport
• the viewport can be displayed in anywhere of the screen window

5. For 2D drawing,
• gluOrtho2D() -- set world window
• glViewport() -- set view ports
Restrict OpenGL to drawing in only part of the window (divides the window)
Default viewport is entire window

Prototypes:
void gluOrtho2D( GLdouble left, GLdouble right, GLdouble bottom, GLdouble top );
void glViewport( GLint x, GLint y, GLint width, GLint height );

Example:
```	glMatrixMode ( GL_PROJECTION );
gluOrtho2D( 0.0, 2.0, 0.0, 1.0 );	//set world window
glViewport( 40, 60, 300, 200 );		//set viewport
```
 (0.0, 1.0) (2.0, 1.0) (0.0, 0.0) (2.0, 0.0) world window

 (40, 260) (340, 260) (40, 60) (340, 60) viewport

• glutInitWindowSize() -- set screen window size
e.g. glutInitWindowSize( 300, 400 );

• glutInitWindowPosition() -- set screen window position
e.g. glutInitWindowPosition (200,100);
 (200, 100) 300 400

6. OpenGL Drawing Primitives Coordinates are world coordinates

7. Example:
```  glBegin ( GL_POLYGON );
glVertex2f(0.0, 0.0);
glVertex2f(0.0, 3.0);
glVertex2f(4.0, 3.0);
glVertex2f(6.0, 3.0);
glVertex2f(4.0, 3.0);
glEnd();
```
8. Primitives:

Value Meaning
GL_POINTS       Individual points
GL_LINES       independent line segments, each joining two vertices
GL_LINE_STRIP       series of connected line segments
GL_LINE_LOOP       series of connected line segments with a segment added between last and first vertices
GL_TRIANGLES       triangles, each specified by 3 vertices
GL_TRIANGLE_STRIP       linked strip of triangles, a vertex may be shared by 2 or more triangles
GL_TRIANGLE_FAN       linked fan of triagnles, all have a common vertex
GL_QUADS       four-sided polygons, each joining four vertices
GL_POLYGON       simple bounded convex polygon

9. Sample Makefile

 ```#sample Makefile for using OpenGL in Linux PROG = draw CFLAGS = -w -s -O2 -ansi -DSHM XLIBS = -lX11 -lXext -lXmu -lXext -lXmu -lXt -lXi -lSM -lICE LIBS = -lglut -lGLU -lGL INCLS = -I/usr/X11R/include -I/share/mesa/include LIBDIR = -L/usr/X11/lib -L/usr/X11R6/lib #source codes SRCS = draw_main.cpp draw.cpp #substitute .cpp by .o to obtain object filenames OBJS = \$(SRCS:.cpp=.o) #\$< evaluates to the target's dependencies, #\$@ evaluates to the target \$(PROG): \$(OBJS) g++ -o \$@ \$(OBJS) \$(LIBDIR) \$(LIBS) \$(XLIBS) \$(OBJS): g++ -c \$*.cpp \$(INCLS) clean: rm \$(OBJS) \$(PROG) ```

10. Displaying Points, Lines and Polygons
11. Point Details
void glPointSize( GLfloat size );
set the width in pixels for rendered point; size > 0.0, default is 1.0
• Antialiasing disabled ( default )
fractional widths are rounded to integer widths
if size = 2, the dot is 2 pixels by 2 pixels
• Antialiasing enabled
a circular group of pixels is drawn
glEnable ( GL_POINT_SMOOTH );

12. Line Details
• Wide Lines
void glLineWidth( GLfloat width ); set the width in pixels for rendered line; width > 0.0, default is 1.0
• Antialiasing disabled ( default )
fractional widths are rounded to integer widths ( pixels )
• Antialiasing enabled
fractional line widths are possible

• Stippled Lines
dotted or dashed lines
void glLineStipple ( GLint factor, GLushort pattern );
• sets the current stippling pattern for lines
• pattern is 16-bit number that sets the pattern, 1 => drawing; 0 => no drawing
• facotr ( 1 to 256 ), for repeating pattern
• Example: glLineStipple(1, 0x3F07 );
glEnable( GL_LINE_STIPPLE );

0x3F07 = 0011 1111 0000 0111 ( binary )
a line would be drawn with 3 pixels on, 5 off, 6 on, 2 off

glLineStipple(2, 0x3F07 );
a line would be drawn with 6 pixels on, 10 off, 12 on, 4 off
PatternFactor
Stippled Line
0x00FF1

0x00FF2

 ```/* * lines.c * This program demonstrates geometric primitives and * their attributes. */ #include #include #define drawOneLine(x1,y1,x2,y2) glBegin(GL_LINES); \ glVertex2f ((x1),(y1)); glVertex2f ((x2),(y2)); glEnd(); void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0); glShadeModel (GL_FLAT); gluOrtho2D (0.0, 500.0, 0.0, 500.0 ); } void display(void) { int i; glClear (GL_COLOR_BUFFER_BIT); /* select white for all lines */ glColor3f (1.0, 1.0, 1.0); /* in 1st row, 3 lines, each with a different stipple */ glEnable (GL_LINE_STIPPLE); glLineStipple (1, 0x0101); /* dotted */ drawOneLine (50.0, 125.0, 150.0, 125.0); glLineStipple (1, 0x00FF); /* dashed */ drawOneLine (150.0, 125.0, 250.0, 125.0); glLineStipple (1, 0x1C47); /* dash/dot/dash */ drawOneLine (250.0, 125.0, 350.0, 125.0); /* in 2nd row, 3 wide lines, each with different stipple */ glLineWidth (5.0); glLineStipple (1, 0x0101); /* dotted */ drawOneLine (50.0, 100.0, 150.0, 100.0); glLineStipple (1, 0x00FF); /* dashed */ drawOneLine (150.0, 100.0, 250.0, 100.0); glLineStipple (1, 0x1C47); /* dash/dot/dash */ drawOneLine (250.0, 100.0, 350.0, 100.0); glLineWidth (1.0); /* in 3rd row, 6 lines, with dash/dot/dash stipple */ /* as part of a single connected line strip */ glLineStipple (1, 0x1C47); /* dash/dot/dash */ glBegin (GL_LINE_STRIP); for (i = 0; i < 7; i++) glVertex2f (50.0 + ((GLfloat) i * 50.0), 75.0); glEnd (); /* in 4th row, 6 independent lines with same stipple */ for (i = 0; i < 6; i++) { drawOneLine (50.0 + ((GLfloat) i * 50.0), 50.0, 50.0 + ((GLfloat)(i+1) * 50.0), 50.0); } /* in 5th row, 1 line, with dash/dot/dash stipple */ /* and a stipple repeat factor of 5 */ glLineStipple (5, 0x1C47); /* dash/dot/dash */ drawOneLine (50.0, 25.0, 350.0, 25.0); glDisable (GL_LINE_STIPPLE); glFlush (); } void reshape (int w, int h) { glViewport (0, 0, (GLsizei) w, (GLsizei) h); glMatrixMode (GL_PROJECTION); glLoadIdentity (); gluOrtho2D (0.0, (GLdouble) w, 0.0, (GLdouble) h); } void keyboard(unsigned char key, int x, int y) { switch (key) { case 27: exit(0); break; } } int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize (500, 500); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init (); glutDisplayFunc(display); glutReshapeFunc(reshape); glutKeyboardFunc(keyboard); glutMainLoop(); return 0; } ```

13. Polygon Details
a polygon is a plane figure specified by a set of 3 or more vertices ( coordinate positions )
simple ( standard ) polygons -- polygons whose edges do not cross
back face -- the side of a polygon that faces into the object interior
front face -- the visible, outward side

Each polygon in a scene is contained within a plane of infinite extent

A x + B y + C z + D = 0 where ( x, y, z ) is any point on the plane
if A x + B y + C z + D < 0 , the point ( x, y, z ) is behind the plane if A x + B y + C z + D > 0 , the point ( x, y, z ) is before the plane

• Typically drawn by filling in all pixels enclosed within the boundary ( default ) glPolygonMode( GL_FRONT, GL_FILL );
glPolygonMode( GL_BACK, GL_FILL );

• Can also draw them as outlined polygons glPolygonMode( GL_FRONT, GL_LINE );
• Or simply drawn as points glPolygonMode( GL_FRONT, GL_POINT );
• A filled polygon might be solidly filled or stippled with a certain pattern

• By convention polygons whose vertices appear in counterclockwise order on screen are called front-facing but users can also make clockwise order as front-facing glFrontFace( GL_CCW );     //counterclockwise
glFrontFace( GL_CW );     //clockwise
Orientation of vertices is also known as winding.

• Culling -- discarding ( ignore ) invisible polygons during rendering
e.g. back faces of an enclosed opaque polygon
enableb by glEnable( GL_CULL_FACE );
glCullFace ( GL_FRONT );
glCullFace ( GL_BACK );
glCullFace ( GL_FRONT_AND_BACK );

Class Exercise:  ``` glEnable( GL_CULL_FACE ); glCullFace ( GL_BACK ); glColor3f( 1.0, 0.0, 0.0 ); //red glFrontFace ( GL_CCW ); glPolygonMode( GL_FRONT, GL_FILL ); glBegin( GL_POLYGON ); //draw solid polygon glVertex2i( 0, 0 ); glVertex2i( 0, 100 ); glVertex2i( 100, 100 ); glVertex2i( 100, 0 ); glEnd(); ```
 What do you expect to see on the display, assuming everything has been initialized properly?

• Area  n-1 A = ½ xi yi+1 - xi+1 yi i=0
where i + 1 is taken mod n.
for GL_CCW, if A > 0,     => front-facing, otherwise back-facing
for GL_CW, if A < 0,     => front-facing, otherwise back-facing

• Stippling Polygons glEnable ( GL_POLYGON_STIPPLE ); setting pattern by void glPolygonStipple( const Glubyte *mask );
mask is a 32 x 32 pattern of bits
aligned with the window, thus rotate the polygon won't rotate the stipple pattern

• Examples
Drawing polygons with different modes
 ``` int x0, y0; glColor3f( 1.0, 0.0, 0.0 ); //red glPolygonMode( GL_FRONT, GL_FILL ); glBegin( GL_POLYGON ); //draw solid polygon glVertex2i( 10, 10 ); glVertex2i( 100, 10 ); glVertex2i( 150, 50 ); glVertex2i( 100, 100 ); glVertex2i( 50, 80 ); glVertex2i( 10, 10 ); glEnd(); x0 = 160; glColor3f( 0.0, 1.0, 0.0 ); //green glPolygonMode( GL_FRONT, GL_LINE ); glBegin( GL_POLYGON ); //draw polygon glVertex2i( x0+10, 10 ); glVertex2i( x0+100, 10 ); glVertex2i( x0+150, 50 ); glVertex2i( x0+100, 100 ); glVertex2i( x0+50, 80 ); glVertex2i( x0+10, 10 ); glEnd(); x0 = 80; y0 = 120; glColor3f( 0.0, 0.0, 1.0 ); //blue glPolygonMode( GL_FRONT, GL_POINT ); glBegin( GL_POLYGON ); //draw polygon points glVertex2i( x0+10, y0+10 ); glVertex2i( x0+100, y0+10 ); glVertex2i( x0+150, y0+50 ); glVertex2i( x0+100, y0+100 ); glVertex2i( x0+50, y0+80 ); glVertex2i( x0+10, y0+10 ); glEnd(); ```

Stippled Polygons
 ``` GLubyte fly[] = { 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0x80, 0x01, 0xC0, 0x06, 0xC0, 0x03, 0x60, 0x04, 0x60, 0x06, 0x20, 0x04, 0x30, 0x0C, 0x20, 0x04, 0x18, 0x18, 0x20, 0x04, 0x0C, 0x30, 0x20, 0x04, 0x06, 0x60, 0x20, 0x44, 0x03, 0xC0, 0x22, 0x44, 0x01, 0x80, 0x22, 0x44, 0x01, 0x80, 0x22, 0x44, 0x01, 0x80, 0x22, 0x44, 0x01, 0x80, 0x22, 0x44, 0x01, 0x80, 0x22, 0x44, 0x01, 0x80, 0x22, 0x66, 0x01, 0x80, 0x66, 0x33, 0x01, 0x80, 0xCC, 0x19, 0x81, 0x81, 0x98, 0x0C, 0xC1, 0x83, 0x30, 0x07, 0xe1, 0x87, 0xe0, 0x03, 0x3f, 0xfc, 0xc0, 0x03, 0x31, 0x8c, 0xc0, 0x03, 0x33, 0xcc, 0xc0, 0x06, 0x64, 0x26, 0x60, 0x0c, 0xcc, 0x33, 0x30, 0x18, 0xcc, 0x33, 0x18, 0x10, 0xc4, 0x23, 0x08, 0x10, 0x63, 0xC6, 0x08, 0x10, 0x30, 0x0c, 0x08, 0x10, 0x18, 0x18, 0x08, 0x10, 0x00, 0x00, 0x08}; GLubyte simple_pattern[] = { 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 }; glColor3f( 1.0f, 0.0f, 0.0f ); //red glRectf (25.0, 25.0, 125.0, 125.0); //regular rectangle glEnable (GL_POLYGON_STIPPLE); //stippled rectangles glColor3f( 0.0f, 1.0f, 0.0f ); //green glPolygonStipple (fly); glRectf (125.0, 25.0, 225.0, 125.0); glPolygonStipple ( simple_pattern ); glColor3f( 0.0f, 0.0f, 1.0f ); //blue glRectf (225.0, 25.0, 325.0, 125.0); glDisable (GL_POLYGON_STIPPLE); ```
```   void glBitmap(	GLsizei  	width,
GLsizei  	height,
GLfloat  	xorig,
GLfloat  	yorig,
GLfloat  	xmove,
GLfloat  	ymove,
const GLubyte *  	bitmap);
```