COMPUTER GRAPHICS

UNIT 1
Introduction to Computer Graphics and
OpenGL
(Part-2)
 Objectives
• OpenGL Architecture
• Primitives & Attributes
• GLUT Basics
• Interaction, Events & Callbacks
• Simple modeling and Rendering
• Indexed & RGB Color Models
• Frame buffer Double Buffering

Madhulika (18010), Assistant Professor, LPU.

 What is OpenGL?
• An application programming interface (API)
• Graphics system(considered as black box as we
are not concerned about how things are
happening.
• A (low-level) Graphics rendering API
• Generate high-quality color images composed of
geometric and image primitives

Madhulika(18010), Assistant Professor,

LPU.
 What Is OpenGL?
• OpenGL is a software interface to graphics hardware. This
interface consists of about 150 distinct commands that we
use to specify the objects and operations needed to
produce interactive three-dimensional applications.

• OpenGL is designed as a streamlined, hardware-

independent interface to be implemented on many
different hardware platforms.

• With OpenGL, we can build up any desired model from a

small set of geometric primitives - points, lines, and
polygons.

Madhulika(18010), Assistant Professor,

LPU.
 OpenGL as a State Machine
• OpenGL is a state machine. We can put it into various states
(or modes) that then remain in effect until we change them.
For example, We can set the current color to white, red, or
any other color, and thereafter every object is drawn with
that color until we set the current color to something else. 

Madhulika(18010), Assistant Professor,

LPU.
OpenGL Architecture

Madhulika(18010), Assistant Professor,

LPU.
 OpenGL Hierarchy
Several levels of abstraction are provided
•GL
• Lowest level: vertex, matrix manipulation
• Eg:- glVertex3f(point.x, point.y, point.z)
•GLU
• Helper functions for shapes, transformations
• Eg:- gluPerspective( fovy, aspect, near, far )
•GLUT
• Highest level: Window and interface management
• Eg:- glutInitWindowSize()

Madhulika(18010), Assistant Professor,

LPU.
• #include <GL/gl.h>

• #include <GL/glu.h>

• #include <GL/glut.h>

• It is case sensitive so need to be very careful while

writing code like GL in capitals we need to write and we
are to include all 3 header files.

Madhulika(18010), Assistant Professor,

LPU.
1. Primitive functions –it includes main functions like line
drawing,polygon,triangle etc.

2. Attribute functions – like it is ………….. (dotted line so all these are

attributes of it) and - - - (any particular type)

3. Transformations – scaling

4. viewing functions

5. projections

Madhulika(18010), Assistant Professor,

LPU.
 Code Example
void Display()
{
  glClear(GL_COLOR_BUFFER_BIT);
  glColor3f(1.0, 1.0, 0.0);
  glBegin(GL_POLYGON);
    glVertex2f(-0.5, -0.5);
    glVertex2f(-0.5,  0.5);
    glVertex2f(0.5, 0.5);
    glVertex2f(0.5, -0.5);
  glEnd();
  glFlush();
}
….

Madhulika(18010), Assistant Professor,

LPU.
 Specifying Geometric primitives

• Primitives are specified using

glBegin(primType);
// define your primitives here
…
glEnd();

• primType
GL_POINTS, GL_LINES, GL_TRIANGLES,
GL_QUADS, …

Madhulika(18010), Assistant Professor,

LPU.
Primitive Types

Madhulika(18010), Assistant Professor,

LPU.
 Sample Example

Void DrawQuad(GLfloat color[])

{
glColor3f(0,0,1);
glBegin(GL_QUADS);
glVertex2f(0,0);
glVertex2f(1.0, 0,0);
glVertex2f(1.0, 1.0);
glVertex2f(0.0, 1.0);
glEnd();
}

Madhulika(18010), Assistant Professor,

LPU.
 GLUT Basics
• With GLUT, your application structures its event
handling to use callback functions.

• For example, first you open a window and register

callback routines for specific events.

• Then, you create a main loop without an exit.

• In that loop, if an event occurs, its registered callback

functions are executed.

• Upon completion of the callback functions, flow of

control is returned to the main loop.
Madhulika(18010), Assistant Professor,
LPU.
 GLUT Basics
Program Structure
1. Configure and open window (GLUT)
2. Initialize OpenGL (Optional)
3. Register input callback functions (GLUT)
– Render
– Resize
– Input: keyboard, mouse, etc
4. Enter event processing loop (GLUT)

Madhulika(18010), Assistant Professor,

LPU.
 Sample Program
#include <GL/glut.h>
#include <GL/gl.h>

void main(int argc, char** argv) //(argc for count and ** argv is a
pointer type character array)

{
glutInit(&argc, argv); // to initialize graphics
glutInitDisplayMode(GLUT_RGB|GLUT_SINGLE);
glutInitWindowSize(500,500);
glutInitWindowPosition(0,0);
glutCreateWindow(“Simple”);
init();
glutDisplayFunc(display);
glutKeyboardFunc(key);
glutMainLoop();
Madhulika(18010), Assistant Professor,
} LPU.
 Sample Program
#include <GL/glut.h>
#include <GL/gl.h>

Void main(int argc, char** argv)

{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGB|GLUT_SINGLE);
glutInitWindowSize(500,500); Specify the display
glutCreateWindow(“Simple”); Mode – RGB or color
glutInitWindowPosition(0,0); Index, single or
init(); double Buffer
glutDisplayFunc(display);
glutKeyboardFunc(key);
glutMainLoop();
} Madhulika(18010), Assistant Professor,
LPU.
 Sample Program
#include <GL/glut.h>
#include <GL/gl.h>

Void main(int argc, char** argv)

{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGB|GLUT_SINGLE);
glutInitWindowSize(500,500); Create a window
glutCreateWindow(“Simple”); Named “simple”
glutInitWindowPosition(0,0); with resolution
500 x 500
init();
glutDisplayFunc(display);
glutKeyboardFunc(key);
glutMainLoop();
} Madhulika(18010), Assistant Professor,
LPU.
 Sample Program
#include <GL/glut.h>
#include <GL/gl.h>

Void main(int argc, char** argv)

{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGB|GLUT_SINGLE);
glutInitWindowSize(500,500);
glutCreateWindow(“Simple”);
glutInitWindowPosition(0,0); Your OpenGL initialization
init(); code (Optional)
glutDisplayFunc(display);
glutKeyboardFunc(key);
glutMainLoop();
} Madhulika(18010), Assistant Professor,
LPU.
 Sample Program
#include <GL/glut.h>
#include <GL/gl.h>

Void main(int argc, char** argv)

{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGB|GLUT_SINGLE);
glutInitWindowSize(500,500);
glutCreateWindow(“Simple”);
init();
glutDisplayFunc(display); Register your call back
glutKeyboardFunc(key); functions
glutMainLoop();
}
Madhulika(18010), Assistant Professor,
LPU.
 Callback functions
• To receive events, you need to write a callback function
and then connect your function to the event manager.
• GLUT supports a number of callbacks to respond to events.
• Most of window-based programs are event-
driven
– which means do nothing until an event happens, and then
execute some pre-defined functions

• Events – key press, mouse button press and release,

window resize, etc.

Madhulika(18010), Assistant Professor,

LPU.
 glutDisplayFunc(void (*func)(void) )
Void main(int argc, char** argv)
{
…
glutDisplayFunc(display);
…
}
void display() – the function
you provide. It contains all
the OpenGL drawing function
calls and will be called
when pixels in the window
need to be refreshed.
Madhulika(18010), Assistant Professor,
LPU.
 Event Queue
GLUT
Keyboard
Event queue ….

MainLoop() Mouse

Window

Mouse_callback() Keypress_callback() window_callback()

{ { {
…. …. ….
{ { {

Madhulika(18010), Assistant Professor,

LPU.
 And many more …

• glutKeyboardFunc() – register the callback that will be

called when a key is pressed
• glutMouseFunc() – register the callback that will be
called when a mouse button is pressed
• glutMotionFunc() – register the callback that will be
called when the mouse is in motion while a buton is
pressed
• glutIdleFunc() – register the callback that will be called
when nothing is going on (no event)
Madhulika(18010), Assistant Professor,
LPU.
 glutMainLoop()
#include <GL/glut.h>
#include <GL/gl.h>

Void main(int argc, char** argv)

{
int mode = GLUT_RGB|GLUT_SINGLE;
glutInitDisplayMode(mode);
glutInitWindowSize(500,500);
glutCreateWindow(“Simple”);
init();
glutDisplayFunc(display);
glutReshapeFunc(resize);
glutKeyboardFunc(key);
glutMainLoop(); The program goes into a infinite
} loop
Madhulika(18010), Assistant waiting for events
Professor,
LPU.
 Projections
• glMatrixMode(GL_PROJECTION);
• glLoadIdentity();
• Orthogonal:
1. glOrtho(left, right, bottom, top, near, far);
2. gluOrtho2D(left, right, bottom, top);
• Perspective:
1. gluPerspective(fovy, aspect, zNear, zFar );
2. (glFrustum)

Madhulika(18010), Assistant Professor,

LPU.
 Translation/Rotation/Scale
• glMatrixMode(GL_MODELVIEW);
• glLoadIdentity();
• glTranslatef(x, y, z);
• glRotatef(angle, x, y, z);
• glScalef(x, y, z);

Madhulika(18010), Assistant Professor,

LPU.
 Camera Position
void gluLookAt(eyeX, eyeY, eyeZ, centerX, centerY,
centerZ, upX, upY, upZ );

Shading

glShadeModel(GL_SMOOTH);
glShadeModel(GL_FLAT);

Madhulika(18010), Assistant Professor,

LPU.
 Modeling and Rendering
• Complex three-dimensional graphic objects
can be modeled, viewed, and displayed
using...

• polyhedral -- represents objects as planar

polyhedra
• solid -- represents objects as solid primitives

Madhulika(18010), Assistant Professor,

LPU.
Modeling
•...allows information to be added to produce a better
visual effect with finer detail
•...allows information to be removed to produce a
simpler and more efficient picture
•...allows objects created to be manipulated
•...provides rotation about an axis
•...provides translation, keeping a constant orientation
•...provides scaling to change an object's size

Madhulika(18010), Assistant Professor,

LPU.
Viewing
•...allows objects created to be prepared for
display on a two-dimensional surface
•...transforms primitive and complex objects
using parallel or perspective projections

Parallel Projection
Madhulika(18010), Assistant Professor,
LPU.
Rendering
•...transforms primitive and complex graphic objects into
pictures on the drawing surface
•...for 3D pictures it is the process of creating a 2D image
on the drawing surface
•...includes culling back-facing polygons
•...scan converts (or rasterizes) objects into device-
dependent units (usually called pixels)
•...uses the appropriate light sources, atmosphere effects,
shading, anti-aliasing, and color models

Madhulika(18010), Assistant Professor,

LPU.
 RGB Color Model

The number of distinct colors that can be displayed at a

single pixel depends on the number of bitplanes and the
capacity of the hardware to interpret those bitplanes.

Madhulika(18010), Assistant Professor,

LPU.
 Indexed Color Model
• With color-index mode, OpenGL uses a color
map (or lookup table), which is similar to using
a palette to mix paints to prepare for a paint-
by-number scene.
• A painter's palette provides spaces to mix
paints together; similarly, a computer's color
map provides indices where the primary red,
green, and blue values can be mixed.

Madhulika(18010), Assistant Professor,

LPU.
• A painter filling in a paint-by-number scene chooses a
color from the color palette and fills the corresponding
numbered regions with that color.
• A computer stores the color index in the bitplanes for
each pixel.
• Then those bitplane values reference the color map,
and the screen is painted with the corresponding red,
green, and blue values from the color map.
Madhulika(18010), Assistant Professor,
LPU.
• In color-index mode, the number of simultaneously
available colors is limited by the size of the color map
and the number of bitplanes available.
• The size of the color map is always a power of 2, and
typical sizes range from 256 (28) to 4096 (212),
where the exponent is the number of bitplanes being
used.

Madhulika(18010), Assistant Professor,

LPU.
• With RGBA mode, each pixel's color is independent
of other pixels. However, in color-index mode, each
pixel with the same index stored in its bitplanes
shares the same color-map location.
• If the contents of an entry in the color map change,
then all pixels of that color index change their color.
• Color-index mode can be useful for various tricks,
such as color-map animation and drawing in layers.

Madhulika(18010), Assistant Professor,

LPU.
 Frame buffer Double Buffering
The front and back buffers represent a double-buffered frame buffer.
The front buffer is, more or less, what you see on the screen. The
back buffer is the image that is typically rendered to.
When the user wants the rendered image to become visible, they call
a platform-specific buffer swapping command. This effectively
transfers the back buffer data into the front buffer.

GL_FRONT
GL_BACK
By default, mode is GL_FRONT for single-buffered contexts and
GL_BACK for double-buffered contexts.

Madhulika(18010), Assistant Professor,

LPU.
Thanks…

Madhulika(18010), Assistant Professor,

LPU.