lOMoARcPSD|27283994

Chapter 3&4 - Thise

Distributed systems (Arba Minch University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Anteneh solomon ([email protected])
 lOMoARcPSD|27283994

Chapter 3 & 4

Rendering Process
with OpenGL
Computer Graphics
9-Nov-23 Mulugeta G. (BSc) STBC– CS 1

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

What is OpenGL?
OpenGL (Open Graphics Library)
- an Application Programming Interface (API) that
allows the programmer to create 2D and 3D
graphics images
- generate high-quality color images by rendering with
geometric and image primitives
- It forms many interactive applications
- It is independent of the hardware, operating, and
windowing systems in use
- The fact that it is windowing-system independent, makes it
portable
- a number of windowing toolkits have been developed for
use with OpenGL

Computer Graphics Mulugeta G. (BSc)

9-Nov-23 STBC– CS 2

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

What is OpenGL?
OpenGL is based on GL graphics package developed
by the graphics hardware manufacturer Silicon Graphics
- GL was a popular package but it was specific to
Silicon Graphics systems, i.e. code written using GL
would only run on Silicon Graphics hardware
- to overcome this limitation, OpenGL was developed
in the early 1992 as a free platform-independent
version of GL
OpenGL is the core library that contains the majority of
the functionality (around 130 graphics drawing and
operation functions), there are a number of associated
libraries that are also useful

Computer Graphics Mulugeta G. (BSc)

9-Nov-23 STBC– CS 3

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

What is OpenGL?
You should make sure that you have access to a
C++ development environment that supports
these two libraries (OpenGL & glut)
Turbo C++ does not support either of them
Two possibilities are:
 free Dev-C++ environment (www.bloodshed.net) has
OpenGL built-in and glut can be easily added on as
a separate package
 Microsoft Visual C++ also has OpenGL built-in but
not glut. The glut library is available as a free
download from
http://www.xmission.com/~nate/glut.html

Computer Graphics Mulugeta G. (BSc)

9-Nov-23 STBC– CS 4

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Related Graphics Libraries

glut (GL Utilities Toolkit): contains some extra
routines for drawing 3-D objects & other
primitives
- Using glut with OpenGL enables us to write windows-
system independent code
glu (OpenGL Utilities): contains some extra
routines for projections and rendering complex 3-
D objects
glui (OpenGL User Interface): contains some
extra routines for creating user-interfaces
- provides controls such as buttons, checkboxes, radio
buttons,.. to OpenGL applications

Computer Graphics Mulugeta G. (BSc)

9-Nov-23 STBC– CS 5

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Lack of Object Orientation

OpenGL is not object oriented so that
there are multiple functions for a
given logical function,
e.g. glVertex3f, glVertex2i,
glVertex3dv,…..
Underlying storage mode is the same
Easy to create overloaded functions in
C++ but issue is efficiency

Computer Graphics Mulugeta G. (BSc)

9-Nov-23 STBC– CS 6

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

GLUT Functions
Primitives
 Points
 Line Segments
 Polygons
Attributes
Transformations
 Viewing
 Modeling
Control
Input (GLUT)
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 7

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

GLUT Functions
Every routine provided by OpenGL or associated
libraries follows the same basic rule of syntax:
 prefix of the function name is either gl, glu, or glut depending
on which of these 3 libraries the routine is from
 main part of the function name indicates the purpose of the
function
 suffix of the function name indicates the number and type of
arguments expected by the function
- eg., suffix 3f  3 floating point arguments are expected
Some function arguments can be supplied as predefined
symbolic constants – are always in capital letters, and
have the same prefix convention as function names
- E.g., GL_RGB, GL_POLYGON and GLUT_SINGLE used by
OpenGL and its associated libraries

Computer Graphics Mulugeta G. (BSc)

9-Nov-23 STBC– CS 8

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

GLUT Functions

glVertex3fv( ... )

Number of Data Type Vector

components b - byte omit “v” for
2 - (x,y) ub - unsigned byte scalar form
3 - (x,y,z) s - short
4 - (x,y,z,w) us - unsigned short glVertex2f( x, y )
i - int
ui - unsigned int
f - float
d - double
Computer Graphics Mulugeta G. (BSc)
9-Nov-23 STBC– CS 9

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

GLUT Functions
OpenGL has a number of built-in data types to help
make it into a platform-independent package
Mostly, they have the same names as C++ data types
but with the prefix GL attached
E.g., GLshort, GLint, GLfloat& GLdouble – are built-in
OpenGL data types
Although you will find that your OpenGL code will still
work on your computer if you do not use these data types,
it will not be as portable to other platforms so it is
recommended that you do use them
#include <GL/glut.h>
- Include glut automatically includes other header files

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 10

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Getting Started with OpenGL

we need to know to be able to start writing
OpenGL programs is exactly which header files
to include depends upon which library(s) are
being used
For example:
 if we only using the core OpenGL library, then add:
#include <GL/gl.h>
 If we also want to use the GL Utilities library,:
#include <GL/glu.h>
 For the glui user-interface library we must add:
#include <GL/glui.h>
 If we want to use the glut library (and this makes
using OpenGL a lot easier) we do not need to include
the OpenGL or glu header files
#include <GL/glut.h>
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 11

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Getting Started with OpenGL

The following lines initialise the glut library:
 glutInit(&argc, argv); // we must call this function
before any others in our glut/OpenGL program
 glutInitDisplayMode(GLUT_RGB|GLUT_DOUBLE ); //
type of frame buffer we want to have, ask for a
double RGB frame buffer
 glutInitWindowSize(640, 480); // sets the size of the
display window in pixels
 glutInitWindowPosition(10, 10); // sets the position at
10, 10 of the top-left corner of the display window
measured in pixels
 glutCreateWindow( “GLUT Points Demo” ); //
creates the display window with the attributes
defined by the previous calls
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 12

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Event Loop

OpenGL is an event-driven package
- means that it always executes code in response to events
- code that is executed is known as a callback function, and it must
be defined by the programmer
- E.g., mouse clicks & keyboard presses - events
The most important event is the display event
- occurs whenever OpenGL decides that it needs to redraw
To specify a callback function we must first write a
programmer-defined function, and then specify that this
function should be associated with a particular event
 glutDisplayFunc(myDisplay);
To start the event loop we write:
 glutMainLoop();
Computer Graphics Mulugeta G. (BSc)
9-Nov-23 STBC– CS 13

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Initialisation Routines

OpenGL graphics package is a state system
- It maintains a list of state variables, or state parameters, which
will be used to define how primitives will be drawn
These state variables are specified separately, before
the primitives are drawn
 E.g., if we want to draw a red point, we first set drawing colour
state variable to red, and then we draw the point
so before we draw the points we assign values for three
state variables:
glClearColor(1.0, 1.0, 1.0, 0.0); // background color to
white and alpha value (opacity) of background color
glColor3f(0,0,0); // defines drawing color to be black
glPointSize(4.0); // sets the point size to 4 pixels

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 14

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Coordinate system

we may need to deal with a # of different coordinate
systems, and a good part of the work is the conversion of
coordinates
List of some of the coordinate systems you may
encounter:
 Modeling Coordinate System - all primitives start off in their
own private coordinate system
- Modelling – process of building our 3-D scene from a
number of basic primitives. Typically these primitives must be
transformed to get them in the correct position, scale and
orientation to construct our scene.
 World Coordinate System - is the base reference system for the
overall model, (generally in 3D), to which all other model
coordinates relate

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 15

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Coordinate system

 Hierarchical Coordinate Systems - Sometimes objects in a scene are
arranged in a hierarchy, so that the "position" of one object in the
hierarchy is relative to its parent in the hierarchy scheme, rather
than to the world coordinate system
- E.g., hand may be positioned relative to an arm, and arm relative to
torso
- When the arm moves, the hand moves with it, and when the torso moves,
all three objects move together
 Viewing Coordinate System - the viewpoint of the observer, and
changes as they change their view
 Screen Coordinate System - physical coordinates of the pixels on
the computer screen, based on current screen resolution
 Viewport Coordinate System - subset of the screen space where the
model window is to be displayed

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 16

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Coordinate system

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 17

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Coordinate system

functions that define how the 3-D
primitives will be projected onto the
2-D image plane
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0, 640.0, 0.0, 480.0);
// any point/primitives whose x coordinate lies
between 0 and 640 and whose y coordinate lies
between 0 and 480, will be seen by the virtual
camera and therefore drawn in the display
window
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 18

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Coordinate system

Note the ff routines in the display function:
 glutWindowSize(640, 480); // sets the size of the
display window in pixels
 glClear // to clear the screen before drawing
 glBegin, glVertex2i, glEnd // this sequence of
commands draws a number of point primitives
 glBegin … glEnd pair of commands  used to draw many
different types of primitive in OpenGL, with the symbolic
constant argument to glBegin defining how the vertices in
between should be interpreted
 GL_POINTS means that each vertex should be considered
to be a point primitive
 glFlush // tells OpenGL to ‘flush’ the buffer, i.e. to
draw any primitives now to the frame buffer

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 19

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Sample Program
#include <GL/glut.h>
#include <stdlib.h>
void myInit(void) {
glClearColor(1.0, 1.0, 1.0, 0.0); // white background
glColor3f(0,0,0); // black foreground
glPointSize(4.0); // size of points to be drawn
// establish a coordinate system for the image
glMatrixMode(GL_PROJECTION);
glLoadIdentity(); /* GLUT callback Handlers */
gluOrtho2D(0.0, 640.0, 0.0, 480.0); void display()
} {
glClear(GL_COLOR_BUFFER_BIT); // Clear
Screen
glBegin(GL_POINTS); // draw 4 points
glVertex2f(200,200);
glVertex2f(200,330);
glVertex2f(300,200);
glVertex2f(300,330);
glEnd();
glFlush(); // send all output to the display
}
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 20

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Sample Program
int main(int argc, char *argv[])
{
glutInit(&argc, argv); // initialise the glut
library
glutInitWindowSize(640,480); // set size of the
window
glutInitWindowPosition(10,10); // position of
window
glutInitDisplayMode(GLUT_SINGLE |
GLUT_RGB);
glutCreateWindow("GLUT Points demo");
glutDisplayFunc(display); // set display
callback
myInit(); // perform other initialisation
glutMainLoop(); // enter the GL event loop
return EXIT_SUCCESS;
}
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 21

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Sample Program
Single or Double Buffering
 GLUT_SINGLE & GLUT_DOUBLE specify whether we want to use
single or double buffering respectively
 In raster graphics systems, whatever is written to the frame
buffer is immediately transferred to the display
- repeated frequently (30 – 60 times a second)
 To do this a typical approach is to first erase the old contents by
setting all the pixels to some background color, i.e. black
- after, the new contents are drawn
Double buffering:
 two separate: front buffer and back buffer
 front buffer for displaying & back buffer for drawing
 swapping to update the image

Computer Graphics Mulugeta G. (BSc)

9-Nov-23 STBC– CS 22

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Sample Program
Depth buffer
 Is needed in 3-dimensional graphics for
hidden surface removal
 Use a special array called depth buffer.
 It is a 2-dimensional array that stores the
distance (or depth) of each pixel from the
viewer
- This makes it possible to determine which surfaces
are closest, thus visible, which are farther and thus
hidden.
 In OpenGL, we use GLUT_DEPTH for this
purpose

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 23

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

GLUT Callback Functions

Event-driven: Programs that use windows
- Input/Output
- Wait until an event happens and then execute
some pre-defined functions according to the
user’s input
Events – key press, mouse button press and
release, display, window resize, animation, etc.
Your OpenGL program will be in infinite loop
Callback function : Routine to call when an event
happens
- Window resize or redraw
- User input (mouse, keyboard)
- Animation (render many frames)
9-Nov-23 24
Computer Graphics Mulugeta G. (BSc) STBC– CS

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

GLUT Callback Functions

“Register” input callbacks functions
with GLUT
- glutDisplayFunc( display );
- glutIdleFunc( idle );
- glutKeyboardFunc( keyboard );
- glutMouseFunc( mouse );

Computer Graphics Mulugeta G. (BSc)

9-Nov-23 STBC– CS 25

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Events in OpenGL
Event Example OpenGL Callback Function
Keypress KeyDown KeyUp glutKeyboardFunc

Mouse leftButtonDown glutMouseFunc

leftButtonUp
Motion With mouse press glutMotionFunc
Without glutPassiveMotionFunc
Window Moving Resizing glutReshapeFunc
System Idle Timer glutIdleFunc
glutTimerFunc
Software What to draw glutDisplayFunc
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 26

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Rendering Callback
Callback function where all our drawing is done
Every GLUT program must have a display callback
glutDisplayFunc( display ); /* this part is in main */
void display( void )
{
glClear( GL_COLOR_BUFFER_BIT );
glBegin( GL_TRIANGLE );
glVertex3fv( v[0] );
glVertex3fv( v[1] );
glVertex3fv( v[2] );
glEnd();
glFlush();
}

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 27

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Idle Callback
Use for animation and continuous update
- Can use glutTimerFunc or timed callbacks
for animations

glutIdleFunc( idle );
void idle( void )
{
/* change something */
t +=dt;
glutPostRedisplay();
}
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 28

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Mouse Callback
Position in the screen window is usually measured
in pixels with the origin at the top-left corner
OpenGL uses a world coordinate system with
origin at the bottom-left
- Must invert y coordinate returned by callback by
height of window
- y’ = h - y

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 29

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Mouse Callback
glutMouseFunc(myMouse);
void myMouse(GLint button, GLint state, GLint x, GLint y)
- button specifies which mouse button was pressed :
GLUT_LEFT_BUTTON,
GLUT_RIGHT_BUTTON, or
GLUT_MIDDLE_BUTTON
- state of that button
GLUT_UP, GLUT_DOWN
- position in window
x and y: screen coordinates of mouse position
(origin at top-left corner) when the event occurred

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 30

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Mouse Callback
Captures mouse press and release events
glutMouseFunc( my_mouse);
void my_mouse( int button, int state, int x, int
y)
{
If (button == GLUT_LEFT_BUTTON &&
state == GLUT_DOWN)
{
…
}
}
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 31

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Menu
GLUT provides pop-up menu features
- that we can use with the mouse to create
sophisticated interactive applications
We must link the menu to a particular
mouse button (left, right or middle)
Finally, we must define a callback function
corresponding to each menu entry
function calls to set up the menu and to link
it to the mouse button should be placed in
main func

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 32

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Menu
int main(){
glutCreateMenu(menu);
glutAddMenuEntry(“Square", 1);
glutAddMenuEntry(“Triangle", 2);
glutAttachMenu(GLUT_RIGHT_BUTTON);
…..
}
void menu(GLint option)
{
if (option == 1)
//statement
else
//statements
}
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 33

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Menu
GLUT also supports hierarchical menus
- Submenu to pop up
sub_menu = glutCreateMenu(polygon);
glutAddMenuEntry(“Square", 2);
glutAddMenuEntry(“Triangle", 3);
glutCreateMenu(menu);
glutAddMenuEntry("Quit",1);
glutAddSubMenu(“Polygon", sub_menu);
glutAttachMenu(GLUT_RIGHT_BUTTON);

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 34

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Keyboard Event
Link a keyboard key with a routine that’s invoked when
key is pressed
key is the ASCII value of the key that was pressed
GLUT_KEY_LEFT, GLUT_KEY_RIGHT … (Arrow keys)
x and y: screen coordinates of cursor position (origin at
top-left corner) when a key is pressed
glutKeyboardFunc( keyboard );
void keyboard( unsigned GLchar key, GLint x, GLint y )
{
switch( key ) {
case ‘q’ : case ‘Q’ :
exit( EXIT_SUCCESS );
break;
}
}
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 35

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Reshape Functions
Indicates what action should be taken when the
window is resized
glutReshapeFunc(myReshape);
myReshape(int, int)  “reshape” event
- automatically passed arguments that report
the new width and height of the reshape
window
- This function manages any changes needed in
the view setup to accommodate the reshape
window
- Parameter: width & height of the window
after it has been changed
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 36

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Output
Primitives and
Attributes

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 37

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Output Primitives
Graphics primitives: All graphics packages construct
pictures from basic building blocks
Output Primitives: Basic geometric structures (points,
straight line segment, circles and other conic sections,
quadric surfaces, spline curve and surfaces, polygon
color areas, and character strings)
Geometric primitives: primitives or routines to describe
the geometry (i.e. shape) of objects (components of the
scene), e.g. Point drawing, Line drawing, Polygon
drawing,…
- can be 2-D (points, lines, quadrilaterals, & general polygons)
and more complex 3-D primitives (spheres and polyhedral
(made from mesh of 2-D polygons))
All of these primitives are specified using sequence of vertices

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 38

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Attributes
Attribute – any parameter that affects the way
a primitive will be displayed
e.g.: Colour, type, line thickness, fill style, etc.
OpenGL maintain a list of current state variables
that are used to modify the appearance of each
primitive as it is displayed
state variables represent attributes of the
primitives
All OpenGL state variables have default values
Remain in effect until new values specified
Some state variables can be changed within
glBegin() … glEnd() pairs

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 39

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Attributes
Output Primitive Attributes
Point Size Color

Line Thickness (1pt, 2pt …)

Type (Dashed, Dotted, Solid)
Color
Text Font (Arial, Courier, Times Roman…)
Size (12pt, 16pt ..)
Spacing
Orientation (Slant angle)
Style (Bold, Underlined, Double lined)
Color
Filled Region Fill Pattern
Fill Type (Solid Fill, Gradient Fill)
Fill Color
Images Color Depth (Number of bits/pixel)

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 40

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Point Functions

Point - most basic type of primitive
use the pair of functions glBegin … glEnd, using
the symbolic constant GL_POINTS
Point attributes:
- Point size: glPointSize(size)
 Points are drawn as squares with a side length equal to the
point size, default point size is 1 pixel
- Point colour: glColor*
glVertex*
 * specifies # of arguments, and type of arguments
 glVertex3f: 3 Glfloat arguments
 If we specify 2-D point, OpenGL will actually create
3-D point with z=0

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 41

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Point Functions

OpenGL routines for drawing points:
glColor3f(1.0, 0.0, 0.0);
glBegin(GL_POINTS);
glVertex2i(50, 100);
glPointSize(2.0);
glColor3f(0.0, 1.0, 0.0);
glVertex2i(75, 150);
glPointSize(3.0);
glColor3f(0.0, 0.0, 1.0);
glVertex2i(100,200);
glEnd();
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 42

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Point Functions

The following code fragment draws three 2-D
points with a size of 2 pixels which illustrates an
example of how the sequences of vertices are
passed to OpenGL
glPointSize(2.0);
glBegin(GL_POINTS);
glVertex2i(50, 100);
glVertex2i(75, 150);
glVertex2i(100,200);
glEnd();
 If we specify a 2-D point, OpenGL will
actually create a 3-D point with z=0
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 43

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Line Drawing Primitives

3 kinds of line primitives, based on different
interpretations of a vertex stream
- GL_LINES: Vertices 0 and 1 are considered a line.
Vertices 2 and 3 are considered a line. And so on. If
the user specifies a non-even (odd) number of vertices,
then the extra vertex is ignored
- GL_LINE_STRIP: adjacent vertices are considered
lines. Thus, if you pass n vertices, you will get n-1 lines.
If the user only specifies 1 vertex, the rendering
command is ignored.
- GL_LINE_LOOP: As line strips, except that the first
and last vertices are also used as a line. Thus, you get
n lines for n input vertices. If the user only specifies 1
vertex, the rendering command is ignored.

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 44

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Line Drawing Primitives

GL_LINES
 Unconnected line segments

GL_LINE_STRIP
 Connected line segments
(a polyline)

GL_LINE_LOOP
 Connected line segments, and last
point connected to first point
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 45

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Line Drawing Primitives

3 kinds of line primitives, based on different
interpretations of a vertex stream
- GL_LINES: Vertices 0 and 1 are considered a line.
Vertices 2 and 3 are considered a line. And so on. If
the user specifies a non-even (odd) number of vertices,
then the extra vertex is ignored
- GL_LINE_STRIP: adjacent vertices are considered
lines. Thus, if you pass n vertices, you will get n-1 lines.
If the user only specifies 1 vertex, the rendering
command is ignored.
- GL_LINE_LOOP: As line strips, except that the first
and last vertices are also used as a line. Thus, you get
n lines for n input vertices. If the user only specifies 1
vertex, the rendering command is ignored.

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 46

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Line Attributes

Line Style
Line Width
Line Color
Pen & Brush options
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 47

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Line Functions

draw using glBegin … glEnd functions
we specify that vertices should be interpreted as line
end-points by using the symbolic constant GL_LINES
E.g.,
glLineWidth(3.0);
glBegin(GL_LINES);
glVertex2f(100.0, 200.0); two separate line segments:
glVertex2f(150.0, 200.0);  (100,200) to (150,200)
glVertex2f(150.0, 250.0); and
glVertex2f(200.0, 250.0);  (150,250) to (200,250)
glEnd()
line will be drawn in the current drawing colour and with
a width defined

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 48

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Line Functions

GL_LINE_STRIP and GL_LINE_LOOP
Glint p1[] = {200,100}; Glint p2[] = {50,0}
Glint p3[] = {100,200}; Glint p4[] = {150,0}; Glint p5[] =
{0,100};
glBegin(GL_LINE_STRIP);
glVertex2i(p1);
glVertex2i(p2);
glVertex2i(p3);
glVertex2i(p4);
glVertex2i(p5);
glEnd();
glBegin(GL_LINE_LOOP);
glVertex2i(p1);
glVertex2i(p2);
glVertex2i(p3);
glVertex2i(p4);
glVertex2i(p5);
glEnd();
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 49

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Line Functions

Line style – is specified using a pixel mask
 Stippled lines – to make stippled (dotted or dashed) lines
 Firstly, must enable line stipple using:
glEnable(GL_LINE_STIPPLE);
Next, use glLineStipple function to define line style, takes
2 arguments: a
glLineStipple(GLint repeatFactor, GLushort pattern);
 repeatFactor, specifies how many times each bit in the pixel
mask should be repeated, and
 pattern, which is a 16-bit pixel mask, with the low-order bit
used first – series of 0’s and 1’s
E.g., pixel mask is the hexadecimal number 00FF, which is
- 8 zeros followed by 8 ones
- repeat factor is 1 so each one or zero in the pixel mask
corresponds to a single pixel in the line

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 50

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Line Functions

glEnable(GL_LINE_STIPPLE);
glLineWidth(3.0);
glLineStipple(1, 0x00FF);
glBegin(GL_LINE_STRIP);
glVertex2i(100,100);
glVertex2i(150,100);
glVertex2i(150,200);
glVertex2i(250,250);
glEnd();
glDisable(GL_LINE_STIPPLE);
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 51

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Line Functions

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 52

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Triangle Drawing Primitives

triangle - a primitive formed by 3 vertices
It is 2D shape with the smallest number of vertices
3 kinds of triangle primitives, based again on different
interpretations of the vertex stream:
- GL_TRIANGLES: vertices 0, 1, and 2 form a triangle. Vertices 3,
4, and 5 form a triangle. And so on.
- GL_TRIANGLE_STRIP: Every group of 3 adjacent vertices forms
a triangle. A vertex stream of n length will generate n-2
triangles
- GL_TRIANGLE_FAN: first vertex is always held fixed. From
there on, every group of 2 adjacent vertices form a triangle
with the first
- So with a vertex stream, you get a list of triangles like (0,
1, 2) (0, 2, 3), (0, 3, 4), etc.
- A vertex stream of n length will generate n-2 triangles.

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 53

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Fill-Area Primitives
Refers to any enclosed boundary that can
be filled with a solid color or pattern
How do we fill shapes?

Solid Pattern Texture

Fill Fill Fill
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 54

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Fill-Area Primitives
Fill-area primitives are normally polygons, as they can
be filled more efficiently by graphics packages
Fill-Area algorithms are used to fill the interior of a
polygonal shape
If the polygon is to be filled we can specify a fill style
Options for filling a defined region include
- choice between a solid color or a pattern fill and
- choices for particular colors and patterns
Polygons are 2-D shapes whose boundary is formed by
any number of connected straight-line segments
- defined by 3 or more coplanar vertices (points positioned on the
same plane)
- Each pair of adjacent vertices is connected in sequence by
edges

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 55

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Fill-Area Primitives
polygons should have no edge crossings: known
as simple polygons or standard polygons
Edge crossings, e.g.
Polygons are the most common form of graphics
primitive because they form the basis of
polygonal meshes, which is the most common
representation for 3-D graphics objects.
Polygonal meshes approximate curved surfaces
by forming a mesh of simple polygons.

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 56

Downloaded by Anteneh solomon ([email protected])

OpenGL Polygon Fill-Area
lOMoARcPSD|27283994

Functions
To fill polygons with a fill-area pattern:
- Define the pattern
- Enable polygon-fill feature of OpenGL
- Draw polygons
A number of different ways:
 glRect*
 6 different symbolic constants
For all:
 Polygons must be convex (all interior angles ≤
180o)
 Must specify vertices in anti-clockwise order
when viewing the polygon from “outside”
 Default fill-style is solid color, determined by
current color settings
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 57

Downloaded by Anteneh solomon ([email protected])

OpenGL Polygon Fill-Area
lOMoARcPSD|27283994

Functions
glRect*
 OpenGL provides special routine that takes 2-D
points only
glRect* (x1, y1, x2, y2)
 (x1,y1) & (x2,y2) define opposite corners of the rectangle
 when we call the glRect* routine, OpenGL will construct a
polygon with vertices defined in the following order:
(x1,y1), (x2,y1), (x2,y2), (x1,y2).
e.g: glRecti(200,100,50,250);
We can draw rectangles with
other functions, but glRect*can
be more efficient

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 58

Downloaded by Anteneh solomon ([email protected])

OpenGL Polygon Fill-Area
lOMoARcPSD|27283994

Functions
All other fill-area functions use the
functions
glBegin… glEnd:
 GL_POLYGON
 GL_TRIANGLES
 GL_TRIANGLE_STRIP
 GL_TRAINGLE_FAN
 GL_QUADS
 GL_QUAD_STRIP

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 59

Downloaded by Anteneh solomon ([email protected])

OpenGL Polygon Fill-Area
lOMoARcPSD|27283994

Functions
GL_POLYGON:
 Displays a single convex polygon
 Vertices of the polygon are specified in anti-
clockwise direction
 E.g.
glBegin(GL_POLYGON);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
glVertex2iv(p6);
glEnd();
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 60

Downloaded by Anteneh solomon ([email protected])

OpenGL Polygon Fill-Area
lOMoARcPSD|27283994

Functions
GL_TRIANGLES:
 Vertex list treated as groups of 3 triangle vertices
 Vertices must be specified in anti-clockwise order
 E.g.
glBegin(GL_TRIANGLES);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p6);
glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
glEnd();

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 61

Downloaded by Anteneh solomon ([email protected])

OpenGL Polygon Fill-Area
lOMoARcPSD|27283994

Functions
GL_TRIANGLE_STRIP:
 Displays set of connected triangles
 First triangle vertices must be anti-clockwise
 E.g.
glBegin(GL_TRIANGLE_STRIP);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p6);
glVertex2iv(p3);
glVertex2iv(p5);
glVertex2iv(p4);
glEnd();

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 62

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Polygon Fill-Area Functions

GL_TRIANGLE_FAN:
 First vertex is the ‘source’ of the fan
 Subsequent pairs of vertices form triangles with first
one
 E.g.
glBegin(GL_TRIANGLE_FAN);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
glVertex2iv(p6);
glEnd();

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 63

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Polygon Fill-Area Functions

GL_QUADS:
 Vertex list treated as groups of 4
quadrilateral vertices
 Vertices must be specified in anti-clockwise
order, glBegin(GL_QUADS);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
glVertex2iv(p6);
glVertex2iv(p7);
glVertex2iv(p8);
glEnd();
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 64

Downloaded by Anteneh solomon ([email protected])

OpenGL Polygon Fill-Area
lOMoARcPSD|27283994

Functions
GL_QUAD_STRIP:
 One quadrilateral drawn for each pair of
vertices after first two
glBegin(GL_QUAD_STRIP);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
glVertex2iv(p6);
glVertex2iv(p7);
glVertex2iv(p8);
glEnd();
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 65

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Character Primitives
Many pictures require text
attributes: Font size, Color and Orientation
Attributes can be set both for entire character
strings (text) and for individual characters
Most graphics packages have some support for
displaying character primitives
Type Faces (fonts) can be divided into two:
 Serif – has small lines or accents at the ends of the
main character stroke. And so makes readable.
 Sans-Serif – does not have accents.
Arial is a sans-serif font
Verdana is a sans-serif
font
Times Roman is a serif font
Garamond is a serif font
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 66

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Character Primitives
Another category of fonts
 Monospace font: always take up the same width on the display,
regardless of which character is being drawn
 Proportional fonts: width used on the display will be
proportional to the actual width of the character
Two ways of representing characters:
 Bitmap (Raster)
 Binary pattern defined on rectangular grid
 bitmap is a mapping from some domain
(e.g., a range of integers) to bits
 Each character represented (stored) as a 2-D array
- Each element corresponds to a pixel in a rectangular
“character cell”
- Simplest: each element is a bit (1=pixel on, 0=pixel
off)

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 67

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Character Primitives
Two ways of representing characters:
 Bitmap (Raster)

00111000
01101100
11000110
11000110
11111110
11000110
11000110
00000000
9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 68

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Character Primitives
 Stroke(outline)
 Defined using line/curve primitives
 Each character represented (stored) as a series
of line segments
 Takes longer time draw than bitmap fonts
 change the font, colour, and also line width and
line style
 width of these lines can be changed using
glLineWidth
 style using
glLineStipple

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 69

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Character Primitives

glut library supports display of
character primitives
All characters displayed at current raster position:
 glRasterPos2i(x, y);
Bitmap characters are drawn using
 glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMA
N_10, ‘a’);
 glutBitmapCharacter(GLUT_BITMAP_9_BY_15, ‘a’);
To change colour of the character use
glColor* routine
Stroke characters, e.g.
 glutStrokeCharacter(GLUT_STROKE_ROMAN, ‘a’);

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 70

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Color Attributes
Colors are represented by colors code which are positive
integers
Color information is stored in frame buffer or in separate
table and use pixel values as index to the color table.
Two ways to store colour values in a frame buffer:
- Direct storage
colour (RGB) values of each pixel are stored directly in the
frame buffer
Each pixel in the frame buffer must have 3 (RGB) or 4
(RGBA) values stored.
Frame buffer take up a lot of memory.
E.g., for a screen resolution of 1366x768, total storage
required will be 1366x768x24 bits = 2.4MB(8 bits for each
of red, green & blue components of colours stored are used)

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 71

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Color Attributes
Two ways to store colour values in a frame
buffer:
- Look-up/indirect table
Store an index for each pixel in the frame buffer.
actual colours are stored in a separate look-up
table, and the index looks up a colour in this table
Reduce the amount of storage
Have a limited # of different colours in scene (# of
rows in the look-up table)
 For example, if each colour uses 8 bits (=24
bits in all), and the look-up table has 256 rows
the total range of colours

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 72

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Color Attributes
Two ways to store colour values in a frame
buffer:
- Look-up/indirect table

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 73

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Color Modes

2 ways to specify colours in OpenGL:
- RGB:
 Uses standard RGB colors (24-bit color, consisting
of 8 bits of red, green and blue) and is the
default
 3 numbers represent the amount of red, green and
blue in the colour
- RGBA:
 Optional fourth value is the alpha coefficient
 Specifies degree of transparency of the primitive
 Useful for controlling colour blending for
overlapping primitives
 If no alpha value is defined it is assumed to be
equal to 1, which is completely opaque.
 (1 = fully opaque, 0 = fully transparent)

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 74

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Color Modes

glutInitDisplayMode, e.g.
- glutInitDisplayMode(GLUT_SINGLE|GLUT_R
GB)

glColor*, e.g.
- glColor3f(1.0,1.0,1.0);  white foreground

glClearColor, e.g.
- glClearColor(0,0,0,0)  black background

WHITE

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 75

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

OpenGL Color Modes

Some color types

glColor3f(0.0, 0.0, 0.0); black

glColor3f(1.0, 0.0, 0.0); red
glColor3f(0.0, 1.0, 0.0); green
glColor3f(1.0, 1.0, 0.0); yellow
glColor3f(0.0, 0.0, 1.0); blue
glColor3f(1.0, 0.0, 1.0); magenta
glColor3f(0.0, 1.0, 1.0); cyan
glColor3f(1.0, 1.0, 1.0); white

9-Nov-23 Computer Graphics Mulugeta G. (BSc) STBC– CS 76

Downloaded by Anteneh solomon ([email protected])

 lOMoARcPSD|27283994

Computer Graphics Mulugeta G. (BSc)

9-Nov-23 STBC– CS 77

Downloaded by Anteneh solomon ([email protected])