computer graphics

1. hgm 5
COMPUTER
GRAPHICS
PRACTICAL
WORKBOOK
Department of Computer Systems Engineering
Mehran University of Engineering & Technology,
Jamshoro
Name:________________________
Roll Number:___________________

2. COMPUTER GRAPHICS PRACTICAL WORKBOOK | 1
Contents
Contents......................................................................................................................................... 1
List of Figures ...............................................................................................................................2
List of Tables.................................................................................................................................3
Practical Session 1: To Become Familiar with OpenGL & Compiling First Program.........4
1.1 Introduction to OpenGL...............................................................................................4
1.2 OpenGL Libraries..........................................................................................................5
1.3 Understanding Header files, Libraries and DLLs.....................................................5
1.4 Software Organization ..................................................................................................6
1.5 OpenGL Syntax & Formatting ..................................................................................... 7
1.6 Program Structure.........................................................................................................8
1.7 Program Compilation....................................................................................................8
Exercise....................................................................................................................................13
Practical Session 2: Drawing Some Basic Primitive Objects Using OpenGL ....................15
Computer Graphics Practical Workbook - Performance Score Chart ................................ 17

3. COMPUTER GRAPHICS PRACTICAL WORKBOOK | 2
List of Figures
Figure 1.1: Dependence of different files...................................................................................6
Figure 1.2: API Hierarchy ...........................................................................................................6
Figure 1.3: Code blocks IDE........................................................................................................9
Figure 1.4: Steps for creation of GLUT Project ........................................................................9
Figure 1.5: Steps for creation of GLUT Project ......................................................................10
Figure 1.6: Steps for creation of GLUT Project ......................................................................10
Figure 1.7: Steps for creation of GLUT Project ...................................................................... 11
Figure 1.8: Steps for creation of GLUT Project...................................................................... 11
Figure 1.9: Template code execution.......................................................................................12

4. COMPUTER GRAPHICS PRACTICAL WORKBOOK | 3
List of Tables
Table 1.1: Command Suffixes and Argument Data Types....................................................8

5. Practical Session 1: To Become Familiar with OpenGL & Compiling First
Program
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 4
Practical Session 1: To Become Familiar
with OpenGL & Compiling First Program
Outline:
 Introduction to OpenGL
 OpenGL Libraries
 Understanding Header files, Libraries and DLLs
 Software organization
 OpenGL Syntax & Formatting
 Program Structure
 Getting Started: Program Compilation
Required Tools:
 Code Block
 OpenGL
1.1 Introduction to OpenGL
OpenGL is mainly considered an API (an Application Programming Interface) that
provides us with a large set of functions that we can use to manipulate graphics and
images. However, OpenGL by itself is not an API, but merely a specification. OpenGL
was originally developed in 1992 by Silicon Graphics, Inc, (SGI) as a multi-purpose,
platform independent graphics API. Since 1992 all of the development of OpenGL has
been headed by the OpenGL Architecture Review Board (ARB). This exclusive board is
composed of the major graphics vendors and industry leaders. Some of these are Intel,
IBM, NVIDIA, Microsoft, and Silicon Graphics.
The OpenGL specification specifies exactly what the result/output of each function
should be and how it should perform. It is then up to the developers implementing this
specification to come up with a solution of how this function should operate. Since the
OpenGL specification does not give us implementation details, the actual developed
versions of OpenGL are allowed to have different implementations, as long as their
results comply with the specification (and are thus the same to the user).
The people developing the actual OpenGL libraries are usually the graphics card
manufacturers. Each graphics card that you buy supports specific versions of OpenGL
which are the versions of OpenGL developed specifically for that card (series). When
using an Apple system the OpenGL library is maintained by Apple themselves and under
Linux there exists a combination of graphic suppliers' versions and hobbyists'
adaptations of these libraries. This also means that whenever OpenGL is showing weird
behavior that it shouldn't, this is most likely the fault of the graphics cards
manufacturers (or whoever developed/maintained the library).

6. Practical Session 1: To Become Familiar with OpenGL & Compiling First
Program
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 5
Since most implementations are built by graphics card manufacturers. Whenever there
is a bug in the implementation this is usually solved by updating your video card drivers;
those drivers include the newest versions of OpenGL that your card supports. This is
one of the reasons why it's always advised to occasionally update your graphic drivers.
1.2 OpenGL Libraries
OpenGL (Open Graphics Library) is a cross-platform, hardware-accelerated, language-
independent, industrial standard API for producing 3D (including 2D) graphics.
Modern computers have dedicated GPU (Graphics Processing Unit) with its own
memory to speed up graphics rendering. OpenGL is the software interface to graphics
hardware. In other words, OpenGL graphic rendering commands issued by your
applications could be directed to the graphic hardware and accelerated.
We use 3 sets of libraries in our OpenGL programs:
Core OpenGL (GL): consists of hundreds of commands, which begin with a prefix "gl"
(e.g., glColor, glVertex, glTranslate, glRotate). The Core OpenGL models an object via a
set of geometric primitives such as point, line and polygon.
OpenGL Utility Library (GLU): built on-top of the core OpenGL to provide
important utilities (such as setting camera view and projection) and more building
models (such as qradric surfaces and polygon tessellation). GLU commands start with a
prefix "glu" (e.g., gluLookAt, gluPerspective).
OpenGL Utilities Toolkit (GLUT): OpenGL is designed to be independent of the
windowing system or operating system. GLUT is needed to interact with the Operating
System (such as creating a window, handling key and mouse inputs); it also provides
more building models (such as sphere and torus). GLUT commands start with a prefix
of "glut" (e.g., glutCreatewindow, glutMouseFunc). GLUT is platform independent,
which is built on top of platform-specific OpenGL extension such as GLX for X Window
System, WGL for Microsoft Window, and AGL, CGL or Cocoa for Mac OS.
1.3 Understanding Header files, Libraries and DLLs
Header files
The files that tell the compiler how to call some functionality (without knowing how the
functionality actually works) are called header files. They contain the function
prototypes. They also contain Data types and constants used with the libraries. We
use #include touse these header files in programs. These files end with .h extension.
Header files contains only the description of available functions provided in DLL, there
is no implementation of any function in header file instead its provided in DLL.
Libraries
These files relate the header file to DLL. It is a binary file which tells compiler where
inside DLL function implementation can be found.

7. Practical Session 1: To Become Familiar with OpenGL & Compiling First
Program
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 6
DLLs
A DLL file, short for Dynamic Link Library, is a type of file that contains instructions
that other programs can call upon to do certain things. This way, multiple programs can
share the abilities programmed into a single file, and even do so simultaneously. DLL is
basically compiled set of functions. DLL comes with header files and library files.
Figure 1.1: Dependence of different files
1.4 Software Organization
Figure 1.2 demonstrates the relationship between OpenGL GLU and windowing APIs.
Figure 1.2: API Hierarchy
As mentioned, OpenGL is window and operating system independent. To integrate it
into various window systems, additional libraries are used to modify a native window
into an OpenGL capable window. Every window system has its own unique library and
functions to do this. Some examples are:
• GLX for the XWindows system, common on Unix platforms

8. Practical Session 1: To Become Familiar with OpenGL & Compiling First
Program
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 7
• AGL for the Apple Macintosh
• WGL for Microsoft Windows system components.
GLU supports quadrics, NURBS, complex polygons, matrix utilities, and more
1.5 OpenGL Syntax & Formatting
OpenGL commands use the prefix gl and initial capital letters for each word making up
the command name for example glClearColor(). Similarly, OpenGL defined constants
begin with GL_, use all capital letters, and use underscores to separate words (like
GL_COLOR_BUFFER_BIT).
Extra letters in some commands indicate the number and type of variables for example,
the 3f in glColor3f() and glVertex3f()). It's true that the Color part of the command
name glColor3f() is enough to define the command as one that sets the current color.
However, more than one such command has been defined so that you can use different
types of arguments. In particular, the 3 part of the suffix indicates that three arguments
are given; another version of the Color command takes four arguments. The f part of the
suffix indicates that the arguments are floating-point numbers. Having different formats
allows OpenGL to accept the user's data in his or her own data format.
Some OpenGL commands accept as many as 8 different data types for their arguments.
The letters used as suffixes to specify these data types for ISO C implementations of
OpenGL are shown in Table 1-1, along with the corresponding OpenGL type definitions.
The particular implementation of OpenGL that you're using might not follow this
scheme exactly; an implementation in C++ or Ada, for example, wouldn't need to.
Suffix Data Type Typical Corresponding C-
Language Type
OpenGL Type
Definition
b 8-bit integer signed char GLbyte
s 16-bit integer short GLshort
i 32-bit integer int or long GLint, GLsizei
f 32-bit floating-
point
float GLfloat, GLclampf
d 64-bit floating-
point
double GLdouble, GLclampd
ub 8-bit unsigned
integer
unsigned char GLubyte, GLboolean

9. Practical Session 1: To Become Familiar with OpenGL & Compiling First
Program
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 8
us 16-bit unsigned
integer
unsigned short GLushort
ui 32-bit unsigned
integer
unsigned int or unsigned long GLuint, GLenum,
GLbitfield
Table 1.1: Command Suffixes and Argument Data Types
Thus, the two commands
glVertex2i(1, 3);
glVertex2f(1.0, 3.0);
are equivalent, except that the first specifies the vertex's coordinates as 32-bit integers,
and the second specifies them as single-precision floating-point numbers.
Moreover for glVertex2i(1, 3); gl specifies the function belong to GL library,
Vertex specifies function name for vector versions of the command you use to specify
vertices, 2 specifies dimensions, i specifies the arguments are integers and finally the
arguments are specified.
1.6 Program Structure
For all OpenGL applications, the following structure is followed
1 Add necessary include statements
2 main():
Register the callback functions that you’ll need. Callbacks are routines you write that
GLUT calls when a certain sequence of events occurs, like the window needing to be
refreshed, or the user moving the mouse. The most important callback function is the
one to render your scene. Consists of statements that Opens one or more windows with
the required properties and also enters event loop (last executable statement).
3 init(): sets the state variables
We then call the init() routine, which contains our one-time initialization. Here we
initialize any OpenGL state and other program variables that we might need to use
during our program that remain constant throughout the program’s execution.
4 Callbacks
Display, Input and window functions are included in callbacks
5 Processing Loop
Enter the main event processing loop. This is where your application receives events,
and schedules when callback functions are called.
1.7 Program Compilation
1 Start Code::Blocks

10. Practical Session 1: To Become Familiar with OpenGL & Compiling First
Program
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 9
Figure 1.3: Code blocks IDE
2 Select “Create GLUT Project”.
Figure 1.4: Steps for creation of GLUT Project

11. Practical Session 1: To Become Familiar with OpenGL & Compiling First
Program
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 10
3 Create GLUT Project
Figure 1.5: Steps for creation of GLUT Project
4 GLUT project creation (project name, storage location setting)
Figure 1.6: Steps for creation of GLUT Project

12. Practical Session 1: To Become Familiar with OpenGL & Compiling First
Program
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 11
Figure 1.7: Steps for creation of GLUT Project
Figure 1.8: Steps for creation of GLUT Project
5 Run main.cpp

13. Practical Session 1: To Become Familiar with OpenGL & Compiling First
Program
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 12
Figure 1.9: Template code execution
Example 1.1
#include <GL/glut.h>
#include <Gl/glu.h>
#include <GL/glut.h>
void display();
void init(){
glClearColor(1.0,1.0,0.0,1.0);//specifies intensity of
color for each RGB arg
}
int main(int argc,char**argv)// command line args to initialize
glut
{
glutInit(&argc,argv);// initialize the glut lib
glutInitDisplayMode(GLUT_RGB);// initialize display mode
with arg as constants; flags
glutInitWindowPosition(200,100);// specifies the position
of window in terms of coordinates
glutInitWindowSize(500,500);//specifies window size

14. Practical Session 1: To Become Familiar with OpenGL & Compiling First
Program
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 13
glutCreateWindow("Window1");// creates window and closes if
no execution loop is used
glutDisplayFunc(display);// takes function pointer as arg
init();
glutMainLoop();// handles interaction of program; needs
display callback
}
void display()//function definition
{
glClear(GL_COLOR_BUFFER_BIT);//clears frame buffer
glLoadIdentity();//resets the transformation of current
matrix; resets rotations transformations(reset coordinate sys)
//Draw stuff and save it in frame
glFlush();//displays frame buffer on screen
}
Output:
Exercise
Question 1:
Enlist the different tools that can be used for eye catching computer graphics
implementations.
Question 2:
Compare and contrast Header files, Libraries and DLLs.

15. Practical Session 1: To Become Familiar with OpenGL & Compiling First
Program
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 14
Question 3:
Write a code to create default OpenGL window. Title of the window should be your
roll number.
Question 4:
Write a code to create Green colored window. Title of the window should be your roll
number.

16. Practical Session 2: Drawing Some Basic Primitive Objects Using OpenGL
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 15
Practical Session 2: Drawing Some Basic
Primitive Objects Using OpenGL
Let’s discuss another example for creation of window using GLUT
Example 1.2
#include <GL/gl.h>
#include <GL/glut.h>
void display(void)
{
/* clear all pixels */
glClear (GL_COLOR_BUFFER_BIT);
/* draw white polygon (rectangle) with corners at
* (0.25, 0.25, 0.0) and (0.75, 0.75, 0.0)
*/
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 ();
}
void init (void)
{
/* select clearing (background) color */
glClearColor (0.0, 0.0, 0.0, 0.0);
/* initialize viewing values */
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0.0, 1.0, 0.0, 1.0, -1.0, 1.0);
}
/*
* Declare initial window size, position, and display mode
* (single buffer and RGBA). Open window with "hello"
* in its title bar. Call initialization routines.
* Register callback function to display graphics.
* Enter main loop and process events.
*/
int main(int argc, char** argv)

17. Practical Session 2: Drawing Some Basic Primitive Objects Using OpenGL
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 16
{
glutInit(&argc, argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize (250, 250);
glutInitWindowPosition (100, 100);
glutCreateWindow ("hello");
init ();
glutDisplayFunc(display);
glutMainLoop();
return 0; /* ISO C requires main to return int. */
}
Output

18. Computer Graphics Practical Workbook - Performance Score Chart
COMPUTER GRAPHICS PRACTICAL WORKBOOK | 17
Computer Graphics Practical Workbook -
Performance Score Chart
This is to certify that the student named_________________________________
having Roll Number ________________ has successfully carried out all necessary
practical activities as prescribed by the University for the Year _______________.
S# Title of Practical Score Date of Submission Remarks
1 Practical 1
2 Practical 2
3 Practical 3
4 Practical 4
5 Practical 5
6 Practical 6
7 Practical 7
8 Practical 8
9 Practical 9
10 Practical 10
11 Practical 11
12 Practical 12
13 Practical 13