CHAPTER ONE

INTRODUCTION
(REVIEW)
 CRT Displays
• CRT = Cathode Ray Tube
Shadow Mask
Electron Guns

Red Input

Green
Input

Blue Input

Deflection
Yoke Red, Blue,
and Green
Phosphor Dots
 Types of Graphics Display Devices
CRT displays can work in one of two ways:
• Random scan devices:
– Vector displays
– CRT electron beam directed
only to areas of screen where
picture is to be displayed
– Picture displayed as a set of
‘primitives’ (lines, vectors)
– although some early video
games did use random scan
technology. These days random
scan is only really used by some
hard-copy plotters.
• Raster scan devices:
– Object converted into set of
dots, stored in a frame buffer
– CRT electron beam swept
across screen line-by-line
 Raster Scan: Terminology

• Raster: the rectangular

grid of dots
• Pixel: one dot or picture
element of the raster
 Scan line: one horizontal line of pixels
 Display resolution: the number of pixels in the x and y
directions of the raster
 Aspect ratio: ratio of y-resolution to x-resolution, or the
other way round.
 Frame Buffers
• Frame buffer stores the raster image
ready for display
• 2-D array with each (x,y) location
corresponding to a pixel in the image
 Bit-planes or depth of frame buffer is the number of bits
used for each pixel. E.g. typical frame buffer resolutions:
 640x480x8
 1280x1024x24
For colour displays we need to store a value for each
component of the colour (red, green and blue), so the
bit-planes will typically be a multiple of 3 (e.g. 8 bit-
planes each for red, green and blue makes a total of 24
bit-planes).
 Raster Scan Refresh
• Raster scan systems have a refresh rate:
• The number of times that the entire raster is refreshed each second is known as the refresh rate of the
device.
– Number of times the display is updated per second
– For movement to appear smooth the refresh rate must be utmost > 24 f/s (frames/second)
– Raster scan systems perform this continual update by ‘sweeping’ the electron beams across the raster scan-line by scan-
line, starting from the top and working towards the bottom.
– When the last scan-line is completed we start again from the top.
 Cont…
• Modern graphics displays have high refresh rates, typically in
the region of 60 f/s. However, early graphics systems tended
to have refresh rates of about 30 f/s. Consequently, some
flicker was noticeable.
• To overcome flicker, a technique known as interlaced
scanning was employed.
• Using interlaced scanning alternate scan-lines are updated in
each raster refresh. For example, in the first refresh only odd
numbered scan-lines may be refreshed, then on the next
refresh only even-numbered scan-lines, and so on
 Interlaced scanning

 Interlaced scanning refreshes

alternate scan-lines in each refresh

 E.g. common video formats:

 VGA: 640x480, 60 f/s non-interlaced
 PAL: 625x480, 25 f/s interlaced
 NTSC: 525x480, 30 f/s interlaced
 Progressive Vs Interlaced
scanning refresh

You can Read further from Wiki.

http://en.wikipedia.org/wiki/Interlace
 Introduction to OpenGL
• GL was originally developed by Silicon Graphics
• OpenGL is a hardware-independent version of GL
introduced in early 1990’s
– Now maintained by a consortium of graphics
companies/organisations
Although OpenGL is the core library that contains the
majority of the functionality, there are a number of
associated libraries that are also useful.
• Other related libraries:
– The glut (GL Utility Toolkit) library allows programmers to
write ‘windows-system independent’ OpenGL programs.
– it contains some extra routines for drawing 3-D objects and
other primitives.
 – The glu (OpenGL Utility) library adds extra routines for
setting up projection matrices, displaying complex objects,
etc.
– it contains some extra routines for projections and
rendering complex 3-D objects.

– The glui (OpenGL User Interface) library adds extra

routines for producing user interfaces
• Every routine provided by OpenGL or one of
the associated libraries listed above
 OpenGL – Basic Syntax
• All OpenGL functions are prefixed with gl:
– glBegin, glClear, glVertex2i, etc.
• All glu functions are prefixed with glu:
– gluOrtho2D, gluCylinder, etc.
• All glut functions are prefixed with glut:
– glutInit, glutCreateWindow, etc.
• Some function arguments can be pre-defined
symbolic constants:
– GL_RGB, GL_POLYGON, GLUT_SINGLE, etc.
• The main part of the function name indicates the
purpose of the function.
 OpenGL - Data Types
• OpenGL functions expect arguments of specific types
• To make it hardware independent, OpenGL uses its
own pre-defined data types, e.g.
– GLshort, GLint, GLfloat, GLdouble, etc.
• The suffix of OpenGL functions often indicates what
type of argument(s) are expected, e.g.
– glVertex2i – 2 GLint arguments
– glColor3f – 3 GLfloat arguments
 Using OpenGL in C++
• If we are using glut, we only need to
• #include 1 file to use OpenGL/glu/glut:
– #include <GL/glut.h>
– This will automatically perform the following:
• #include <GL/gl.h>
• #include <GL/glu.h>
• To use glui add the following line:
– #include <GL/glui.h>
 Using OpenGL in C++
• For example, if we are only using the core OpenGL library
#include <GL/gl.h>
• If we also want to use the GL Utilities library, we must add the
following line:
#include <GL/glu.h>
• to use open gl and glut, we only need to include 1 file
– #include <GL/glut.h>
– This will automatically perform the following:
• #include <GL/gl.h>
• #include <GL/glu.h>
• To use glui add the following line:
• #include <GL/glui.h>
15
 Using OpenGL with Dev-C++
• we use OpenGL together with the GL Utilities Toolkit (glut).
• make sure that the C++ development environment supports these
two libraries.
• Note that some environments does not support either of them.
Two possibilities are:
• The 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.

16
 Using OpenGL with Dev-C++
• File menu, New, Project …

• we should also link in the appropriate libraries when

compiling.

17
 Adding Libraries in Dev-C++

• Project menu, Project Options, Parameters

tab: -lglut32 -lglu32 -lopengl32

18
 Before displaying any graphics primitives we
always need to perform some basic initialisation
tasks, including creating a window for display.
The following lines initialise the glut library,
define a frame buffer and create a window for
display.
glutInit(&argc, argv)
glutInitWindowSize(640,480);
glutInitWindowPosition(10,10);
glutInitDisplayMode(GLUT_SINGLE |
GLUT_RGB);
glutCreateWindow(“GLUT Points demo”);
19
•glutInit(&argc, argv);
This line initialises the glut library. We must call this function
before any others in our glut/OpenGL programs.
•glutInitWindowSize(640,480);
This function call sets the size of the display window in pixels.
•glutInitWindowPosition(10,10);
This line sets the position of the top-left corner of the display
window, measured in pixels from the top-left corner of the
monitor screen.
•glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
This line defines the type of frame buffer we want to have. In
this case, we are asking for a single RGB (i.e. colour) frame
buffer.
•glutCreateWindow(“GLUT Points demo”);
Finally, this function call creates the display window with
the attributes defined by the previous calls. 20
 The OpenGL Event Loop
• OpenGL is an event-driven package. This means
that it always executes code in response to
events. The code that is executed is known as a
callback function, and it must be defined by the
programmer.
• It has a callback function-which is a code that is
executed when that event happens

21
 Cont…
• OpenGL will continually detect a number
of standard events in an event loop, and
execute the associated callback functions.
glutMainLoop();
• For example, mouse clicks and keyboard
presses are considered as OpenGL events.
The most important event is the display event
Therefore all OpenGL programs consist of a
number of parts:
• Perform any initialisation tasks such as
creating the display window.
• Define any required callback functions and
associate them with the appropriate
events.
• Start the event loop.

23
 OpenGL Initialisation Routines
• The first thing we need to understand is that
the OpenGL graphics package is a state system.
This means that 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.
• example, if we want to draw a blue point on our display
window, we first set the drawing colour state variable to
blue, and then we draw the point at the specified location
 Cont…
• before we actually draw any primitives, we need to set
the values of some state variables
• we draw the points we assign values for three state
variables. at the beginning of the myInit function):
• glClearColor (1.0, 1.0, 1.0, 0.0);
glColor3f(0, 0,0);
glPointSize(4.0);
•  In the first line we are defining the background colour
to have an RGB value of (1,1,1), which means white.
When we clear the screen later on it will be cleared to
white.
• The fourth argument to glClearColor is the alpha
value of the background colour. The alpha value
indicates the opacity of the colour (i.e. is it a semi-
transparent colour?): a value of 1 means that it is
completely opaque, or the transparency is zero.
• The second line listed above defines the current
drawing colour to be (0,0,0), or black. Any
subsequently drawn primitive will be drawn in this
colour.
• The final line sets the point size to four pixels. Any
subsequent point primitives drawn will be drawn with
this size.
 OpenGL Coordinate Systems

The last three lines of the myInit function are:

•glMatrixMode (GL_PROJECTION);
•glLoadIdentity();
•gluOrtho2D(0.0, 640.0, 0.0, 480.0);
 Example 1
• #include <GL/glut.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 ();
• gluOrtho2D(0.0, 640.0, 0.0, 480.0);
• }
•  
 Cont…
• /* GLUT display callback handler */
• void display(void)
• {
• glClear(GL_COLOR_BUFFER_BIT); // Clear Screen
• glBegin(GL_POINTS); // draw 3 points
• glVertex2i(100,50);
• glVertex2i(100,130);
• glVertex2i(150,130);
• glEnd();
• glFlush(); // send all output to the display
• }
GRAPHICS PRIMITIVES
(CHAPTER 2)
 What Are Graphics Primitives?
• All graphics packages construct pictures from basic
building blocks known as graphics primitives.
• The routines provided by graphics libraries to
describe the components of the scene
• Geometric primitives: routines to describe the
geometry (i.e. shape) of objects, e.g.
– Point drawing
– Line drawing
– Polygon drawing
• Non Geometric primitives: specify colour, position of
light…
 Geometric Graphics Primitives

• 2-D Primitives:
– Points
– Lines, polylines
– Circles
• 3-D Primitives
– Points
– Lines, polylines
– Spheres
– Polyhedra
Graphics Coordinate Systems
 OpenGL Point Drawing Primitives

• The most basic type of primitive is the point.

• we use the pair of functions glBegin … glEnd,
using the symbolic constant GL_POINTS to
specify how the vertices in between should be
interpreted.
• In addition, the function glPointSize can be
used to set the size of the points in pixels.
• The default point size is 1 pixel
 example
the following code draws three 2-D points with a
size of 2 pixels.
•glPointSize(2.0);
•glBegin(GL_POINTS);
• glVertex2f(100.0, 200.0);
• glVertex2f(150.0, 200.0);
• glVertex2f(150.0, 250.0);
•glEnd();
 Line Drawing Algorithms
• Lines are normally represented by the two end-points
of the line.
• Equation of a straight-line:
y = m.x +c
(m = slope or gradient, c = y-intercept)
• Given end points (x0,y0) and (xend,yend) we can calculate
m = (yend - y0)/(xend - x0)
c = y0 - m.x0
• For any given x-interval δx, we can find the
corresponding y-interval δy:
δy = m.δx δx = (1/m).δy
 Line Drawing: DDA Algorithm
• DDA=Digital Differential Analyser
• For lines with |m|≤1:
– Start with (x0,y0), successive pixel positions
calculated using δx=1, δy=m
• For lines with |m|>1:
– Start with (x0,y0), successive pixel positions
calculated using δx=(1/m), δy=1
• Successive line points calculated as
– xk+1=xk+δx yk+1=yk+δy
• Once we have computed values for δx and δy, the basic
DDA algorithm is:
• Start with (x0,y0)
• Find successive pixel positions by adding on (δx, δy) and
rounding to the nearest integer, i.e.
– xk+1 = xk + δx
– yk+1 = yk + δy
• For each position (xk,yk) computed, plot a line point at
(round(xk),round(yk)), where the round function will
round to the nearest integer.
 DDA Illustration

Desired Line
(xi+1, Round(yj+m))

(xi, yj)
(xi+1, yj+m)

(xi, Round(yj))

y2

y1

x1 x2
 Example 1
• Let us consider an example of applying the
DDA algorithm for drawing a straight-line
segment. Referring to see the below given, we
first compute a value for the gradient m:
Now, because |m| ≤ 1, we compute δx
and δy as follows:
 
δx = 1
δy = 0.6
 
•The DDA algorithm is simple and easy to
implement, but it does involve floating point
operations to calculate each new point.
•Floating point operations are time-consuming
when compared to integer operations. Since line-
drawing is a very common operation in computer
graphics, it would be nice if we could devise a
faster algorithm which uses integer operations
only
 Line Drawing-DDA Algorithm(class
work)
(X0,Y0)=(0,0) (Xend,Yend)=(5,3) Pixel (Xk,Yk)
M = 0.6 δx=1 δy=0.6
7
6 Yk
5
4
3
Xk
2
1
0
0 1 2 3 4 5 6 7
 Line Drawing: Bresenham’s Algorithm

• DDA Algorithm involves floating point

operations so can be slow
• Bresenham’s algorithm uses only integer
operations – much faster
 At each stage, we need to
decide which of A=(xk+1,yk)
or B=(xk+1,yk+1) to choose
Brensenham’s algorithm
 Line Drawing: Bresenham’s Algorithm

• Compute (dlower-dupper)
• If (dlower-dupper) is positive, then we choose A as the
next position in the line, otherwise choose B
 Decision variable:

 pk=2Δy.xk - 2Δx.yk + d
where d = 2Δy – 2cΔx - Δx
 pk has the same sign as
(dlower-dupeer), and can be
calculated using integer
operations only
 Example 3

•Consider the example of plotting the line shown in

Figure 2 using Bresenham’s algorithm:
•First, compute the following values:
– Δx = 5
– Δy = 3
– 2Δy = 6
– 2Δy - 2Δx = -4=po
•Plot (x0,y0) = (10,10)
 Line Drawing: Bresenham’s
Algorithm(class work)
Δx=5 Δy=3 P0=1
7 Find for successive pk? (X0,Y0) = (0,0)
6 (X1,Y1) = (1,1)
5
(X2,Y2) = (2,1)
4
(X3,Y3) = (3,2)
3
(X4,Y4) = (4,2)
2
1 (X5,Y5) = (5,3)

0
0 1 2 3 4 5 6 7
 OpenGL Line Functions

• We can draw straight-lines in OpenGL using

the same glBegin … glEnd functions that we
saw for point-drawing.
• This time we specify that vertices should be
interpreted as line end-points by using the
symbolic constant GL_LINES.
• For example, the following code
• glLineWidth(3.0);
• glBegin(GL_LINES);
• glVertex2f(100.0, 200.0);
• glVertex2f(150.0, 200.0);
• glVertex2f(150.0, 250.0);
• glVertex2f(200.0, 250.0);
• glEnd()
• will draw two separate line segments: one from (100,200) to (150,200)
and one from (150,250) to (200,250). The line will be drawn in the current
drawing colour and with a width defined by the argument of the function
glLineWidth.
• Two other symbolic constants allow us to draw
slightly different types of straight-line
primitive: 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};
• We can see that GL_LINES treats the vertices as pairs of end-
points. Lines are drawn separately and any extra vertices (i.e.
a start-point with no end-point) are ignored.

• GL_LINE_STRIP will create a connected polyline, in which each

vertex is joined to the one before it and after it.

• The first and last vertices are only joined to one other vertex.
Finally, GL_LINE_LOOP is the same as GL_LINE_STRIP except
that the last point is joined to the first one to create a loop.
 Circle Drawing Algorithms
• Equation of a circle: (Cartesian coordinate)
– (x - xc)2 + (y - yc)2 = r2
(xc,yc = centre of the circle)
• Alternatively (using polar coordinates r,Θ):
– x = xc + r.cos Θ
– y = yc + r.sin Θ
 Circle Drawing Algorithms

• An obvious algorithm is to successively

increment x and plot:
– y = yc ± √(r2 – (xc – x)2)
 But, we face the same
problem of ‘holes’ in the line
 Also, this is inefficient because of the
square root calculation
 Circle Drawing Algorithms
• A better algorithm is to successively increment
Θ and plot:
– x = xc + r.cos Θ
– y = yc + r.sin Θ

 Can improve efficiency by

increasing angular separation and
connecting points using straight
line segments
For example, suppose we want to draw a circle with
(xc,yc) = (5,5) and r = 10. We start with θ = 0o and
compute x and y as:
•x = 5 + 10 cos 0o = 15
•y = 5 + 10 sin 0o = 5
•Therefore we plot (15,5)
•Next, we increase θ to 5o:
•x = 5 + 10 cos 5o = 14.96
•y = 5 + 10 sin 5o = 5.87
Therefore we plot (15,6)
 Circle Drawing Algorithms
• Can further improve efficiency by taking advantage of
the symmetry of circles
(-b,a) (b,a)
 Only need to calculate
positions in the first octant
(-a,b) (a,b)
 7 more positions can then be
plotted using symmetry (-a,-b) (a,-b)

(-b,-a) (b,-a)

 But these algorithms still need square root or

trigonometric calculations …
 Midpoint Circle Algorithm

• As we only need to compute points in the first

octant, we can use a decision variable to decide
which of the two candidate points to choose at
each stage
• Define fcirc(x,y) = x2 + y2 –r2
– Points on circle satisfy fcirc(x,y) = 0
– Points inside circle satisfy fcirc(x,y) < 0
– Points outside circle satisfy fcirc(x,y) > 0
 Midpoint Circle Algorithm
 Now for each pair of
candidate locations,
compute fcirc(x,y) for the
midpoint between them:
 midk = (xk+1,yk - 0.5)
 fcirc(midk) = xk+12 + (yk - 0.5)2 –r2
 If midpoint is inside circle, choose A, otherwise
choose B
 A fast incremental computation avoids the
squares.
 Midpoint Circle Algorithm
R=4 (X0,Yo)=(0,0) Y=-X X=0

9 4

8 3

7 2
Y=X
6 1

5 0

4 0 1 2 3 4

3
2 Y=0

1
0

0 1 2 3 4 5 6 7 8 9 10 11 12 13
 Ellipse-Drawing Algorithms

• Some graphics packages may provide routines for drawing

ellipses, although as we will see ellipses cannot be drawn as
efficiently as circles.
• The equation for a 2-D ellipse in Cartesian coordinates is:
Now we can say the same for fellipse as we did for
the circle function:

•For points on ellipse fellipse= 0

•For points inside ellipse fellipse< 0
•For points outside ellipse fellipse> 0
 Fill-Area Primitives
• The term fill-area primitive refers to any enclosed
boundary that can be filled with a solid colour or
pattern
• An area of a picture that is filled with a solid colour
or pattern.
• Fill-area primitives are normally polygons
• Polygons are 2-D shapes whose boundary is formed
by any number of connected straight-line segments
– Defined by 3 or more (coplanar) vertices
– Vertices connected in sequence by edges
– No edge crossings, e.g.
 polygonal meshes
• 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.
 Convex and Concave Polygons
• Convex polygons have all interior
angles ≤ 180o, e.g.
• Concave polygons have at least one
interior angle > 180o, e.g.
• Many graphics packages (including
OpenGL) require all fill polygons to be
convex
 Cont…
Polygons may not be displayed properly if any of
the following conditions are met:
•The polygon has less than 3 vertices; or
•The polygon has collinear(Lying on the same
line) vertices; or
•The polygon has non-coplanar vertices; or
•The polygon has repeated vertices.
Polygons that meet one of these conditions are
often referred to as degenerate polygons.
 Cont…
• Degenerate polygons may not be displayed
properly by graphics packages, but many
packages (including OpenGL) will not check for
degenerate polygons as this takes extra
processing time which would slow down the
rendering process.
• Therefore it is up to the programmer to make
sure that no degenerate polygons are specified.
 Identifying Concave Polygons
• A number of techniques:
– Compute and check all interior angles:if one is
greater than 180o then the polygon is concave;
otherwise it is convex.
– Check for intersection of infinitely extended edge
with other edges:If any intersections exist for any
edge, the polygon is concave; otherwise it is
convex.
– Compute cross product of adjacent edge vectors
• If all the same sign, it is convex; if not it is concave
• The last technique used the cross-product of
vectors.
• The result of the cross-product of two vectors
is a vector perpendicular to both vectors,
whose magnitude is the product of the two
vector magnitudes multiplied by the sin of the
angle between them:
•  
 right-hand rule
•  The direction of the cross-product is determined by
the right-hand rule:
• For V1xV2, with your right-hand grasp an axis that is
perpendicular to V1 and V2, so that the fingers curl
from V1 to V2 forming an angle <180o. The direction
of the cross-product is the direction of your right
thumb.
 Splitting Concave Polygons
• Because most graphics packages insist on
polygons being convex, once we have identified
concave polygons we need to split them up to
create a number of convex polygons.
• Vector technique:
– Compute cross-product of adjacent edge vectors
– If one cross-product has a different sign for the z-
coordinate, extend the first edge until it intersects a
different edge
– Form a new vertex at the intersection point
 Inside-Outside Tests

• To fill a polygon, we need a way of determining

whether a point is inside or outside the polygon
boundary
 Odd-even rule:
 Draw a line from point P to any
distant point outside the polygon
 If the number of line crossings is
odd, P is an interior point
 If the number of line crossings is
even, P is an exterior point
 Inside-Outside Tests

• Nonzero winding number rule: exterior

– Each edge is considered to be a vector …

 Nonzero winding rule:

 Draw a line from point P to any
distant point outside the polygon
 At each edge crossing, add 1 to
winding number if edge goes
right-to-left; subtract 1 if it goes
from left-to-right
interior
 If winding number is nonzero, it
is interior, otherwise it is exterior
 Representing Polygons

• Many 3-D objects are stored as polygonal meshes

• A common technique is to use tables of data. These tables can be of
two different types:
• Typically stored using tables:
– Geometric tables – store geometry (shape) of object
– Attribute tables – store appearance of facets of object
• A sample geometric table:
 Front and Back Polygon Faces
• Front face: side of polygon that faces object
exterior
• Back face: side of polygon that faces object
interior
• It is a common task in graphics to identify the
position of a given point relative to a polygon’s
front/back faces …
 Relative Positions of Points
• The equation of the plane of a polygon is:
– Ax + By + Cz + D = 0
(where x,y,z are points in 3d space and the coefficients
A, B, C, D x, y, and z components of the surface
normal)
• For a given point (x,y,z):
If Ax + By + Cz + D = 0, the point is on the plane.
– If Ax + By + Cz + D < 0 the point is behind the plane
– If Ax + By + Cz + D > 0 the point is in front of the plane
 Normal Vectors
• Polygon front-faces are usually identified using normal
vectors.
• A normal vector of a polygon is perpendicular to the
polygon plane, and points away from the front face

 Normal vectors are

used by most
graphics
applications to
identify front/back
faces
 Computing Normal Vectors
• Can compute normal vectors by taking cross-product
of adjacent edge vectors, e.g.

 E1 = (1,0,0) E2 = (0,1,0)
 Cross-product = u|E1||E2|Sin θ
(0 ≤ θ ≤ π)
 Direction of u determined
using right-hand rule
 Normal vector = (0,0,1)
 OpenGL Fill-Area Routines
• OpenGL provides a variety of routines to draw fill-
area polygons.
• In all cases these polygons must be convex.
• In all, there are seven different ways to draw
polygons in OpenGL:
• glRect*
• Six different symbolic constants for use with glBegin
… glEnd
• We will now consider each of these techniques in
turn.
• glRect*
Some OpenGL Fill-Area Routines
• End of today class