CHAPTER THREE

INTRODUCTION TO THE RENDERING

PROCESS WITH OPENGL
 OpenGL (Open Graphics Library)
Graphics rendering API
– It allows as to create high-quality color images
composed of geometric and image primitives
– window system independent
– operating system independent
 OpenGL as a Renderer
• Draw something
o Geometric primitives
• points, lines and polygons
o Image Primitives
• images and bitmaps
• change the state of how OpenGL draws
o colors, materials, light sources, etc.

3
 libraries in OpenGL program
• A number of libraries exist to allow you to simplify your
programming tasks,
1. Core OpenGL (GL): consists of hundreds of commands, which
begin with a prefix "gl"
o It is the Lowest level: vertex, matrix manipulation.
o The Core OpenGL models an object via a set of geometric
primitives such as point, line and polygon.
o e.g., glColor, glVertex, glTranslate, glRotate.
2. 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.
o Helper functions for shapes, transformations
o GLU commands start with a prefix "glu"
o e.g. gluLookAt, gluPerspective.
 Cont..
3. OpenGL Utilities Toolkit (GLUT): OpenGL is
designed to be independent of the windowing
system or operating system.
o GLUT is needed to interact with the Operating System (such
as creating a window, handling key and mouse inputs);
o it also provides more building .
o Highest level: Window and interface management
o GLUT commands start with a prefix of "glut"
o e.g. glutCreatewindow, glutMouseFunc, glutInitWindowSize
 OpenGL Implementations(header files)
• OpenGL is an API (think of as collection of .h
files):
#include <GL/gl.h>
#include <GL/glu.h>
#include <GL/glut.h>
• But glut.h includes gl.h, glu.h, and glx.h
automatically, so including all three files is
redundant.
• Libraries
– OpenGL defines numerous types for compatibility
– GLfloat, GLint, GLenum, etc.
 GLUT Callback Functions
Routine to call when something happens
– window resize or redraw
– user input
– animation
“Register” callbacks with GLUT
glutDisplayFunc( display );
• called when pixels in the window need to be refreshed.
glutIdleFunc( idle );
• a callback function called when nothing else is going on.
Very useful for animations.
glutKeyboardFunc( keyboard );
• called when a key is struck on the keyboard
7
 OPENGL COMMAND SYNTAX 1
• OpenGL commands use the prefix gl and initial capital
letters for each word making up the command name
– (recall glClearColor().

• Similarly, OpenGL defined constants begin with GL_,

use all capital letters, and use underscores to separate
words
– (like GL_COLOR_BUFFER_BIT).
OPENGL COMMAND SYNTAX 2
– `f' float
– `d' double float
– `s' signed short integer
– `i' signed integer
– `b' character
– `ub' unsigned character
– `us' unsigned short integer
– `ui' unsigned integer
 GEOMETRIC PRIMITIVES
• In OpenGL, an object is made up of geometric
primitives such as triangle, quad, line segment
and point.
• A primitive is made up of one or more vertices.
• OpenGL supports the following primitives:
Cont..
cont
POINT AND LINE PRIMITIVES
 Cont..

• OpenGL operates as a state machine, and

maintain a set of state variables (such as the
foreground color, background color, and many
more).
• In a state machine, once the value of a state
variable is set, the value persists until a new
value is given.
• For example, we set the "clearing"
(background) color to black once in initGL().
 Cont..

• In initGL(), set the "clearing" or background

color glClearColor(0.0f, 0.0f, 0.0f, 1.0f); //
black and opaque
• In display(), clear the color buffer (i.e., set
background) with the current "clearing" color
glClear(GL_COLOR_BUFFER_BIT);
 Cont..
• Another example:
If we use glColor function to set the current foreground
color to "red", then "red" will be used for all the
subsequent vertices, until we use another glColor
function to change the foreground color
• In a state machine, everything shall remain until you
explicitly change it!
• We use glColor function to set the foreground color,
and glClearColor function to set the background (or
clearing) color.
 Cont..

• Color is typically specified in float in the range

0.0f and 1.0f.
• Color can be specified using RGB (Red-Green-
Blue) or RGBA (Red-Green-Blue- Alpha)
components.
• The 'A' (or alpha) specifies the transparency (or
opacity) index, with value of 1 denotes opaque
(non-transparent and cannot see-thru) and value
of 0 denotes total transparent.
 Cont..

• In the above example, we set the background color via

glClearColor in initGL(), with R=0, G=0, B=0 (black) and
A=1 (opaque and cannot see through).
• In initGL(), set the "clearing" or background color
glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // Black and opague
//In display(),
• we set the vertex color via glColor3f for subsequent
vertices.
• For example, R=1, G=0, B=0 (red). // In display(),
• set the foreground color of the pixel glColor3f(1.0f, 0.0f,
0.0f); // Red
SYNTAX
 cont..
• A geometric primitive is defined by specifying
its vertices via glVertex function, enclosed
within a pair glBegin and glEnd.
void glBegin(GLenum shape)
void glVertex(type x, type y, type z, ...)
void glEnd()
 Cont..

• glBegin specifies the type of geometric object, such as

GL_POINTS, GL_LINES, GL_QUADS,
GL_TRIANGLES, and GL_POLYGON.
• For types that end with 'S', you can define multiple
objects of the same type in each glBegin/glEnd pair.
• For example, for GL_TRIANGLES, each set of three
glVertex's defines a triangle.
 Cont..

• The vertices are usually specified in float precision. It

is because integer is not suitable for trigonometric
operations (needed to carry out transformations such
as rotation).
• Precision of float is sufficient for carrying out
intermediate operations, and render the objects finally
into pixels on screen.
 Cont..
• In the above example:
glBegin(GL_QUADS);.... 4 quads with glVertex() ....
glEnd();

we define 3 color quads (GL_QUADS) with glVertex()

functions.
glColor3f(1.0f, 0.0f, 0.0f);
glVertex2f(-0.8f, 0.1f);
glVertex2f(-0.2f, 0.1f);
glVertex2f(-0.2f, 0.7f);
glVertex2f(-0.8f, 0.7f);
 Cont..
• We set the color to red (R=1, G=0, B=0).
• All subsequent vertices will have the color of
red. Take note that in OpenGL, color (and
many properties) is applied to vertices rather
than primitive shapes.
• The color of the a primitive shape is
interpolated from its vertices.
 Attributes of primitive
• An attribute is a data element that changes per
vertex.
• Attributes can be floating-point, integer, or
boolean data.
o Point Attributes
o Line Attributes
 CONT..
Point attributes
Attributes : color and size
• Color
glColor3f(0.0f,0.0f,0.0f);
• Size
glPointSize(4.0);
Line Attributes
• Line Width,
glLineWidth (width);
• Line Style,
glLineStipple (1, 0x00FF); Dashed Double Line
26
 COORDINATE SYSTEM
• Coordinate system is a way of assigning numbers
to points.
• In two dimensions, you need a pair of numbers to
specify a point.
• The coordinates are often referred to as x and y.
• Points and objects are real things, but coordinates
are just numbers that we assign to them so that we
can refer to them easily and work with them
mathematically.
 Cont..
• In three dimensions, you need three numbers
to specify a point. (That's essentially what it
means to be three dimensional.)
• The third coordinate is often called z.
• The z-axis is perpendicular to both the x-axis
and the y-axis.
• The following diagram shows the OpenGL 2D
Coordinate System.
Cont..
 Cont..

• Clipping Area: it refers to the area that can be seen

(i.e., captured by the camera), measured in OpenGL
coordinates.
• The function gluOrtho2D can be used to set the
clipping area of 2D orthographic view.
• Objects outside the clipping area will be clipped away
and cannot be seen.
 Cont..

• Viewport: it refers to the display area on the

window (screen), which is measured in pixels
in screen coordinates.
• The clipping area is mapped to the viewport.
We can use glViewport function to configure
the viewport.
THE SYNTHETIC CAMERA MODEL

• A synthetic camera in computer graphics, also

known as a virtual camera, is a digital construct
used to simulate the behavior and properties of
a physical camera within a virtual environment.
• It is an essential component in rendering
scenes to create realistic or stylized images or
animations.
 Cont..

• A flexible method for viewing that is completely

separate from modeling, this method is called the
synthetic camera
• The paradigm which looks at creating a computer
generated image as being similar to forming an image
using an optical system.
 Cont..
Various notions in the model :
oCenter of Projection
oProjector lines
oImage plane
oClipping window
Synthetic Camera Model

Imaging system
 Synthetic camera (contd…)
• In image formation using optical systems, the image is
flipped relative to the object.
• In synthetic camera model this is avoided by introducing a
plane in front of the lens which is called the image plane.
• The angle of view of the camera poses a restriction on the
part of the object which can be viewed.
• This limitation is moved to the front of the camera by
placing a Clipping Window in the projection plane.
36
End of Chapter 3

37