Introduction

to OpenGL
6.53

Computer Graphics
CPIT285
 PREFACE

o In computer games we do not design fancy objects for the user to watch, they
need to interact.
o The games need to receive user inputs, analyze them and make all changes
according to the orders given...
o This process involves math calculation and physics simulation…

6 March 2025 CPIT285 2

 PREFACE

o In order for the game to be seen, there must be images representing the objects
to be executed.
o These images need to be created and have a very quick appearance based on
the game's data (user inputs) to show the game as a video clip or animated
objects rather than a series of images displayed in a sequence.
o An experienced user may code algorithms to perform all physical logic, math
calculations, manage the memory…
o however, how the drawing process can be handled?

6 March 2025 CPIT285 3

 PREFACE

o Early ages of desktop computers, drawing was very simple and the CPU managed
the screen contents.
o E.g. drawing a line segment → CPU would run a loop to set the
color of each pixel that lies along the line.
o Drawing process could take up a lot of the CPU’s time.
o Graphics performance was very slow, compared to what
we expect today.

6 March 2025 CPIT285 4

 PREFACE
So what has changed?

o Computers are much faster in general, of course, but the big change is that in modern
computers, graphics processing is done by a specialized component called a GPU, or
Graphics Processing Unit.
o To draw graphical operation:
▪ CPU simply has to send commands, along with any necessary data, to the GPU,
▪ GPU is responsible for actually carrying out those commands.
▪ The set of commands that the GPU understands make up the API of the GPU.
o OpenGL is an example of a graphics API, and most GPUs support OpenGL in the sense
that they can understand OpenGL commands, or at least that OpenGL commands can
efficiently be translated into commands that the GPU can understand.

6 March 2025 CPIT285 5

 PREFACE
So what has changed?

o Back to the game, giving the CPU the role of drawings processes takes a long
time because it has several tasks to manage at the same time in order to run the
entire computer, thus the games will be very slow!
o To overcome this problem, Open Graphical Library (OpenGL) facilitates and
accelerates these processes by direct access to the computer Graphics Card

6 March 2025 CPIT285 6

 OpenGL

o The current version, in early 2018, is 4.6, and it is very different from the 1.0
version from 1992.
o In this course, we will begin our study of OpenGL with version 1.1. Most of the
concepts and many of the details from that version are still relevant and
functioning, and it offers an easier entry point for someone new to 3D graphics
programming.
▪ Furthermore, there is a specialized version called for “embedded systems”
such as mobile phones and tablets.
▪ And there is also , for use in Web browsers.

6 March 2025 CPIT285 7

 OpenGL
Who creates and maintain… ?

4.6

2018
2016
2017
6 March 2025 CPIT285 8
 OpenGL
Getting Started…

o To start taking advantage of the OpenGL API for game development or software
uses OpenGL, you need to install the appropriate graphics card driver which
enables usage of the functionality provided.
o To program using the OpenGL API, you need the driver and the development
package (depends on platform and programming language).
o In all three major desktop platforms (Linux, macOS, and Windows), OpenGL
more or less comes with the system. However, you will need to ensure that you
have downloaded and installed a recent driver for your graphics hardware.

6 March 2025 CPIT285 9

 OpenGL

Writing an OpenGL Application

o The first step is to pick your programming language.

o Bindings for OpenGL exist in various programming languages: C#, C++, Java,
Python…
o Some programming languages have multiple sets of OpenGL bindings, none of
them being official. All of them are ultimately based on the C/C++ bindings.
o If you are not using C/C++, you need to install a package or library for your
chosen language that includes the OpenGL bindings. Some come pre-installed,
but others have separate downloads.

6 March 2025 CPIT285 10

 OpenGL
OpenGL Libraries

OpenGL Library Functions

GL handling the basics and initial drawing processes
GLU advanced drawing, perspective drawing and
(Graphics Library Utilities) some 3D shapes.
GLUT managing windows, interactive functions to
(Graphics Library Utilities Toolkit) receive user inputs.

GLUI (Graphics Library User Interface) based on GLUT to create objects on the window
such as a button, a text box, and so on.
GLEW / GLX / AUX .......

6 March 2025 CPIT285 11

 OpenGL
Setting up Libraries

o If you are using C/C++,

then you must first set up Files of an
OpenGL
a build environment (e.g. library
MS Visual Studio) that can
link to OpenGL.

folders of the
OS System
programming
folder
language

6 March 2025 CPIT285 12

 OpenGL Basic Syntax

o Functions starts with a prefix that expresses the library from which it’s taken:
▪ e.g. the function glBindVertexArray is taken from the GL library.

o When a function consists of more than one word, each word begins with a
capital letter:
▪ glClearColor
▪ glUseProgram

o Constants start with the “GL”, followed by underscore ‘_’ to split words, and all
the letters in upper cases:
▪ GL_COLOR_BUFFER_BIT
▪ GL_TRIANGLES

6 March 2025 CPIT285 13

 BASIC SYNTAX
There are functions include number followed by letter, e.g. glColor3f()
▪the function needs 3 parameters
▪the parameters (data) type is f (float)
Parameters data types
Definition in OpenGL In C Data Type Sign
GLbyte signed char 8 bit integer b
GLshort short 16 bit integer s
GLint , GLsizei Long 32 bit integer i
GLfloat,GLclampf Float 32 bit floating point f
GLdouble , GLclamped double 64 bit floating point d
GLubyte , GLboolean unsigned char 8 bit unsigned ub
integer
GLushort unsigned 16 bit unsigned integer us
short
GLunit , GLenum , unsigned long 32 bit unsigned integer ui
GLbitfield

14
 OpenGL
Primitives
6.53
 OpenGL Primitives

o In OpenGL, an object is made up of

geometric primitives such as face

triangle, quad, line segment, and Vertices

point. Edges

o A primitive is made up of one or

more vertices. Triangle
(polygon made
o What OpenGL does not do is retain of 3 edges)

information about an "object“ as a

Quad (polygon
whole! made of 4 edges)

o All OpenGL sees is a set of

triangles/quads with which to
render them. ‫أمحد‬
6 March 2025 CPIT285 16
 OpenGL Primitives

o OpenGL supports the following

primitives
o All you need is to provide the
position values for every vertex:

gl_Position =

vec4 (position.x, position.y, position.z, 1.0)

6 March 2025 CPIT285 17

 OpenGL Primitives
OpenGL Constants Role
GL_POINTS individual points

GL_LINES pairs of vertices interpreted as individual line segments

GL_LINE_STRIP series of connected line segments

GL_LINE_LOOP same as above, with a segment added between last and first vertices

GL_TRIANGLES triples of vertices interpreted as triangles

GL_TRIANGLE_STRIP linked strip of triangles

GL_TRIANGLE_FAN linked fan of triangles

GL_QUADS quadruples of vertices interpreted as

These functions have been removed
four-sided polygons from core OpenGL 3.1 and above (they are
GL_QUAD_STRIP only deprecated in OpenGL 3.0). It is
linked strip of quadrilaterals
recommended that you not use this
GL_POLYGON functionality in your programs.
boundary of a simple, convex polygon

6 March 2025 CPIT285 18

 OpenGL Primitives
Point Function

o The point has two attributes: size and color

o The default values: size = 1px, color = white
o In OpenGL, unless you change, the coordinates values are set
by default -1 to +1 for every axis 0.5

▪ What if I provide a position value that exceeds the default values? (0,0,0)

GL.glPointSize(2) 0.5

fragColor = vec3 (1.0, 1.0, 0.0)

gl_Position = vec3 (0.5, 0.5, 0.0)

GL.glDrawArrays(GL_POINTS, 0, 1)

6 March 2025 CPIT285 19

 OpenGL Primitives
Line Functions

o Three constants to draw lines in different ways:

▪ 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 number of vertices, then the extra vertex is ignored.
▪ GL_LINE_STRIP
- The 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 drawing 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 drawing command is ignored. The line between the
first and last vertices happens after all of the previous lines in the sequence.

6 March 2025 CPIT285 20

 OpenGL Primitives
Line Functions

o Line attributes: y

▪ thickness (default = 1px)

▪ color (default = white) +1

▪ type (default = solid)

-1 (0,0) +1 x

-1

6 March 2025 CPIT285 21

 OpenGL Primitives
Polygon and Quad Functions

o A polygon is a closed filled area with three or more vertices.

▪ The shape depends on the number of vertices
▪ It can be a triangle, quad, pentagon, hexagon…

o A quad is a shape with four edges

▪ GL_QUADS
- connect every group of 4 vertices together
- what if the number of vertices is 6?

▪ GL_QUAD_STRIP
- The latest 2 vertices for a quad represent the first 2 vertices for the followed quad…

6 March 2025 CPIT285 22

 OpenGL Primitives
Polygon and Quad Functions

o The following primitives have been removed from modern OpenGL (3.1 and above):

o In order for a quad to be rendered correctly in OpenGL, all vertices of the quad must lie
in the same plane. The same is true for polygon primitives.
o Since OpenGL doesn't check whether these conditions are satisfied, the use of quads
and polygons is error-prone.

6 March 2025 CPIT285 23

 OpenGL Primitives
Triangle Functions

o Three OpenGL constants to draw triangles in different ways:

▪ GL_TRIANGLES
- Using this function with a number of vertices not divisible by 3 will ignore the incomplete primitive at the end.
- Vertices 0, 1, and 2 forms 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.
- The face direction of the strip is determined by the winding of the first triangle.
- A vertex stream of n length will generate n-2 triangles.

▪ GL_TRIANGLE_FAN
- The first vertex is held fixed.
- From there on, every group of 2 adjacent vertices forms a triangle with the first.
- A vertex stream of n length will generate n-2 triangles.

6 March 2025 CPIT285 24

 OpenGL Primitives
Is Circle Considered Primitive?

o OpenGL does not have a circle primitive.

o we can approximate a circle by drawing a polygon with
a large number of sides.
o To draw an outline of the polygon, we can use a
GL_LINE_LOOP primitive or GL_TRIANGLE_FAN.
o Keep in mind the circle mathematical concepts (radius,
sin, cos, midpoint, PI, etc.)

Try this demo

6 March 2025 CPIT285 25

 OpenGL Primitives
Is Circle Considered Primitive?

o The demo uses lines/triangles to

approximate a circle.
o With a larger number of sides, you get a
better approximation.
o The first two sliders control the size of
the oval.
o The third controls the number of sides.
o Note how the number of sides that you
need to get a good approximation
depends on the size of the oval.

6 March 2025 CPIT285 26

  PROGRAM STRUCTURE

#include <whateverYouNeed.h>

main() {
InitializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f (1.0, 1.0, 1.0);

glBegin(GL_POLYGON);
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
}

27
  PROGRAM STRUCTURE
#include <whateverYouNeed.h> The structure starts with
header files. Any function
main() { used in the code needs to
InitializeAWindowPlease(); include its library header
glClearColor (0.0, 0.0, 0.0, 0.0); file.
glClear (GL_COLOR_BUFFER_BIT);
glColor3f (1.0, 1.0, 1.0); In this example, we used
functions from GL, thus we
glBegin(GL_POLYGON); need to include:
glVertex3f (0.25, 0.25, 0.0); #include <GL/gl.h>
glVertex3f (0.75, 0.25, 0.0); Also functions such as
glVertex3f (0.75, 0.75, 0.0); “InitializeAWindowPlease()”
glVertex3f (0.25, 0.75, 0.0); from GLUT, Therefore GLUT
glEnd(); header file is needed:
glFlush(); #include <GL/glut.h>
}
28
  PROGRAM STRUCTURE
#include <whateverYouNeed.h>

main() {
In this example, the
InitializeAWindowPlease();
functions used in the main
glClearColor (0.0, 0.0, 0.0, 0.0);
routine. This is not a
glClear (GL_COLOR_BUFFER_BIT);
professional way to code in
glColor3f (1.0, 1.0, 1.0);
OpenGL. Later, it will be
learned how to use call
glBegin(GL_POLYGON);
back functions.
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
}
29
  PROGRAM STRUCTURE
#include <whateverYouNeed.h>

main() {
InitializeAWindowPlease(); Defining background color.
glClearColor (0.0, 0.0, 0.0, 0.0); We have four parameters
glClear (GL_COLOR_BUFFER_BIT); here
glColor3f (1.0, 1.0, 1.0); (red, green, blue, alpha),
the color is black.
glBegin(GL_POLYGON); The Alpha parameter works
glVertex3f (0.25, 0.25, 0.0); like transparency. It takes
glVertex3f (0.75, 0.25, 0.0); values 0.0 - 1.0
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
}
30
  PROGRAM STRUCTURE
#include <whateverYouNeed.h>
Perform the color clearing,
main() { and whenever this function
InitializeAWindowPlease(); is called, the window is
glClearColor (0.0, 0.0, 0.0, 0.0); cleared with the specified
glClear (GL_COLOR_BUFFER_BIT); color.
glColor3f (1.0, 1.0, 1.0);
Defining the color for the
glBegin(GL_POLYGON); object/ rectangle = white
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (0.75, 0.25, 0.0);
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
}
31
  PROGRAM STRUCTURE
#include <whateverYouNeed.h>

main() {
InitializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
In between glEnd() /
glColor3f (1.0, 1.0, 1.0);
glBegin() functions of
drawing a rectangle is used
glBegin(GL_POLYGON);
specifying 4 vertices
glVertex3f (0.25, 0.25, 0.0);
The constant
glVertex3f (0.75, 0.25, 0.0);
“GL_POLYGON” is used for
glVertex3f (0.75, 0.75, 0.0);
this purpose.
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
}
32
 PROGRAM STRUCTURE
#include <whateverYouNeed.h>

main() {
InitializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f (1.0, 1.0, 1.0);
“glVertex” is a function to
glBegin(GL_POLYGON);
specify a vertex. It takes 3
glVertex3f (0.25, 0.25, 0.0);
parameters which define
glVertex3f (0.75, 0.25, 0.0);
x,y,z coordinates.
glVertex3f (0.75, 0.75, 0.0);
glVertex3f (0.25, 0.75, 0.0);
glEnd();
glFlush();
}
33
  PROGRAM STRUCTURE
#include <whateverYouNeed.h>

main() {
InitializeAWindowPlease();
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f (1.0, 1.0, 1.0);

glBegin(GL_POLYGON);
glVertex3f (0.25, 0.25, 0.0);
All the previous orders are
glVertex3f (0.75, 0.25, 0.0);
placed in a buffer. “glFlush”
glVertex3f (0.75, 0.75, 0.0);
role is to show at once on
glVertex3f (0.25, 0.75, 0.0);
the window.
glEnd();
glFlush();
}
34
HEADER FILES

As the previous example demonstrates, the structure has to begin with declaring
header files.
Any function needs to be used it must declare its library header file:
▪#include <GL/gl.h>
▪#include <GL/glu.h>
▪#include <GL/glut.h> *
There are also header files required for C ++
▪#include <stdio.h>
▪#include <stdlib.h>
▪#include <math.h>

* glut.h includes gl.h & glu.h, so no need to declare them.

35
CLEAR COLOR FUNCTION
Drawing on a computer screen is different from drawing on paper in that the paper starts
out white.
On a computer, the memory holding the picture is usually filled with the last picture you
drew, so you need to clear it to some background color before you start to draw the new
scene.

glClearColor (1.0, 1.0, 1.0,

0.0);

glClear (GL_COLOR_BUFFER_BIT);

36
  MANAGING DISPLAY-WINDOW

The first step to start draw in OpenGL is to create a display-window. Display-window is

similar to a paper in hand drawing.
GLUT has Functions to create and manage a display-window, thus we need to set up GLUT
on the computer similar to the processes explained earlier.

37
  MANAGING DISPLAY-WINDOW
The following functions from GLUT will be used repeatedly in our applications:

Function Role

glutInit (&argc, argv); initializing GLUT

glutCreateWindow (“An Example”); Titling the window

glutDisplayFunc (LineSegment); Call the drawing routine

glutMainLoop ( ); Demonstrate the window

glutInitWindowPosition (50, 100); Positioning the window on the monitor
display. Starting point is the top leftmost.
glutInitWindowSize (400, 300); sizing the window (in pixels)

glutInitDisplayMode (GLUT_SINGLE|GLUT_RGB); Set the initial display mode (buffer, color

scheme…)

38
 MANAGING DISPLAY-WINDOW
glutInitWindowSize (400, 300);
(0,0)
glutCreateWindow (“An
monitor 100 Example”);
coordinates
An Example
50

glutDisplayFunc
(LineSegment);
glutMainLoop ( );

300
Window coordinates
(0,0)

400

glutInitWindowPosition (50, 100);

39
  DISPLAY CALLBACK FUNCTION

Callback function is common to use.

It is included in the main routine to call other functions.

OpenGL instructions are organized in procedural groups to be called and displayed.

glutDisplayFunc(functions to be called)

40
  DISPLAY CALLBACK FUNCTION
In the previous example, drawing a white rectangle on a black background
▪ Drawing instructions were put directly in the main() routine
▪ Applications that we will code is not only a simple drawing
▪ Think about complex drawing (e.g. lots of objects in a game), how instructions will be
organized in one block?
That’s why display callback function is used

glutDisplayFunc(functions to be called)

41
 #include <glut.h>
void init(void)
{
glClearColor(1.0, 1.0, 1.0, 0.0); // set the background to white

glMatrixMode(GL_PROJECTION);// set projection parameters

glLoadIdentity();
gluOrtho2D(0.0,300.0,0.0,300.0);
}
void lineSegment(void)
{
glClear( GL_COLOR_BUFFER_BIT );// Clear display window
glColor3f(1.0f, 0.0f, 0.0f); // set the drawing color to red
glBegin(GL_LINES);// start drawing in 'line' mode
glVertex2i( 0, 0);// specify the lines geometry
glVertex2i( 200, 200);
glEnd();
glFlush();// send any buffered output to the OpenGL rendering process
}

void main(int argc, char **argv)

{
glutInit(&argc, argv);// Initialize GLUT
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB );
glutInitWindowPosition(100,200);
glutInitWindowSize(320,320); The main routine
glutCreateWindow("An Example"); contains the display-
Call

init(); // Execute initialization procedure window and callback

functions.
glutDisplayFunc(lineSegment);
// ………to call other routines……. glutDisplayFunc(……);
glutMainLoop();// Display everything and wait glutDisplayFunc(……);
} ....
42
 DISPLAY-WINDOW RESHAPE FUNCTION

When the window is viewed, a user may need to change the window's position or
resize it.
There should be a way to re-format the graphics according to the new position and
sizing of the window.

-glutReshapeFunc (reshape) is responsible for reshaping the window

To be placed in the main() routine

43
  COORDINATE REPRESENTATIONS
Coordinate systems describe the location of points in a space.
The five coordinates' stages:
▪modeling/local/object coordinates
▪world coordinates
▪camera/view coordinates
▪normalized/clip coordinates
▪device/screen coordinates

Remember: in 3D graphics the camera is virtual. It does not actually move;

objects that move in a specific coordinates path, giving the viewer a scene of
moving camera.

44
 COORDINATE REPRESENTATIONS

(0,0,0
)

45
  COORDINATE REPRESENTATIONS
modeling/local/object coordinates
▪the place where the object begins in. The origin of the object is at (0,0,0), the
initial position.
world coordinates
▪moving an object from its initial position to a new position to organize with
other objects.

46
  COORDINATE REPRESENTATIONS
camera/view coordinates
▪the result of transforming world-space coordinates to coordinates that are in front of the
user's view.
normalized/clip coordinates
▪specifying a range and any coordinate that falls outside this range is clipped.

47
THANK YOU