Course code: 10CS65 | Computer Graphics and Visualization

Unit-1 Introduction

Engineered for Tomorrow

Department: Computer Science and Engineering

Date : 15.12.2013
 INTRODUCTION
• Applications of computer graphics
• A graphics system
• Images
– Physical and synthetic
• Imaging systems
• The synthetic camera model
• The programmer’s interface
• Graphics architectures
• Programmable pipelines
• Performance characteristics
• Graphics Programming
– The Sierpinski gasket
– Programming two-dimensional applications.
• Computer Graphics
– What is it?
• Overview of what we will cover
– A Graphics Overview
– Graphics Theory
– A Graphics Software System: OpenGL
• Our approach will be top-down
– We want you to start writing application programs
that generate graphical output as quickly as
possible
 Computer Graphics
• Computer Graphics deals with all aspects of
creating images with a computer
– Hardware
• CPU’s
• GPU
– Software
• OpenGL
• DirectX
– Applications
 Computer Graphics
• Using a computer as a rendering tool for the
generation (from models) and manipulation of
images is called computer graphics
• More precisely: image synthesis
 Applications of computer graphics
The development of Computer Graphics has
been driven by the needs of the user community
and by the advances in hardware and software.

• Display of Information
• Design
• Simulation & Animation
• User Interfaces
1. Display of Information
2. Design
3.Simulations: GAMES!
4: User Interfaces
 Applications of computer graphics
• Computer-Aided Design for engineering and architectural systems etc. Objects
maybe displayed in a wireframe outline form. Multi-window environment is also
favored for producing various zooming scales and views. Animations are useful for
testing performance.
• Presentation Graphics : To produce illustrations which summarize various kinds of
data. Except 2D, 3D graphics are good tools for reporting more complex data.
• Computer Art: Painting packages are available. With cordless, pressure-sensitive
stylus, artists can produce electronic paintings which simulate different brush
strokes, brush widths, and colors. Photorealistic techniques, morphing and
animations are very useful in commercial art. For films, 24 frames per second are
required. For video monitor, 30 frames per second are required.
 Application of computer graphics
• Entertainment: Motion pictures, Music videos, and TV shows,
Computer games
• Education and Training: Training with computer-generated models
of specialized systems such as the training of ship captains and
aircraft pilots.
• Visualization: For analyzing scientific, engineering, medical and
business data or behavior. Converting data to visual form can help
to understand mass volume of data very efficiently.
• Image Processing: Image processing is to apply techniques to
modify or interpret existing pictures. It is widely used in medical
applications.
• Graphical User Interface: Multiple window, icons, menus allow a
computer setup to be utilized more efficiently.
 A graphics system
• A Graphics system has 5 main elements:
– Input Devices
– Processor
– Memory
– Frame Buffer
– Output Devices
 Pixels and the Frame Buffer
• A picture is produced as an array (raster) of picture elements (pixels).
• These pixels are collectively stored in the Frame Buffer.

• Properties of frame buffer:

– Resolution – number of pixels in the frame buffer
– Depth or Precision – number of bits used for each pixel
– E.g.: 1 bit deep frame buffer allows 2 colors
– 8 bit deep frame buffer allows 256 colors.
• A Frame buffer is implemented either with special types of memory chips
or it can be a part of system memory.
• In simple systems the CPU does both normal and graphical processing.
• Graphics processing - Take specifications of graphical primitives from
application program and assign values to the pixels in the frame buffer It is
also known as Rasterization or scan conversion.
A graphics system

Interactive Graphics System

 Output Devices
• Various parts of a CRT :
– Electron Gun – emits electron beam which strikes the phosphor
coating to emit light.
– Deflection Plates – controls the direction of beam. The output of the
computer is converted by digital-to-analog converters o voltages
across x & y deflection plates.
– Refresh Rate – In order to view a flicker free image, the image on the
screen has to be retraced by the beam at a high rate (modern systems
operate at 85Hz)

• 2 types of refresh:
– Noninterlaced display: Pixels are displayed row by row at the refresh
rate.
– Interlaced display: Odd rows and even rows are refreshed alternately.
The cathode-ray tube(CRT)
Shadow-Mask CRT
 Shadow-Mask CRT
• Here, just behind the phosphorus coated face of the CRT, there is a metal plate.
• The shadow-mask is pierced with small round holes in a triangular pattern.
• The shadow-mask tube uses three guns, grouped in a triangle or delta responsible
for red, green and blue components of the light output of the CRT.
• The deflection system of the CRT operates on all three electron beams
simultaneously, bringing all three to the same point of focus on the shadow-mask.
Where
• The three beams encounter holes in the mask, they pass through and strike the
phosphor.
• The phosphor in tube is laid down very carefully in groups of three spots- one red,
one green and one blue- under each hole in the mask, that each spot is stuck only
by electrons from the appropriate gun.
• The effect of the mask is thus to “shadow” the spots of red phosphor from all but
the red beam, and likewise for the green and blue phosphor spots.
• can therefore control the light output in each of the three component colors by
modulating the beam current of the corresponding gun.
 Images: Physical and Synthetic
Computer graphics generates pictures with the aim of:
– to create realistic images
– to create images very close to “traditional” imaging methods

• The Usual Approach:

– Construct Raster Images
• Simple 2D Entities
– Points
– Lines
– Polygons

• Define objects based upon 2D representation.

• Because such functionality is supported by most present

computer graphics systems, we are going to learn to create
images here, rather than expand a limited model.
 Objects and Viewers
• Image-Formation Process (the Two Entities):
– The Object
– The Viewer

• The object exists in space independent of any image-

formation process, and of any viewer.
Graphic – A Projection Model

Projection, shading, lighting models

Output

Image
3D Object
Synthetic
Camera
 What Now!
• Both the object and the viewer exist in a 3D world.
However, the image they define is 2D

• Image-Formation
– The Object + the Viewer’s Specifications
• An Image

• Future
– Chapter 2
• OpenGL
– Build Simple Objects.
– Chapter 9
• Interactive Objects
– Objects Relations w/ Each Other
 Objects, Viewers & Camera
Camera system
– object and viewer exist in E3
– image is formed
• in the Human Visual system
(HSV) – on the retina
• In the film plane if a camera
is used
– Object(s) & Viewer(s) in E3
– Pictures in E2

Transformation from E3 to E2
projection
 Light and Images
• Much information was missing from the
preceding picture:
– We have yet to mention light!
• If there were no light sources the objects would be
dark, and there would be nothing visible in our image.
– We have not mentioned how color enters the
picture.
– Or, what are the effects of different kinds of
surfaces have on the objects.
 Lights & Images
Light Sources:
– light sources
• position
• monochromatic / color
– if not used scene would be
very dark and flat
– shadows and reflections - very
important for realistic
perception
– geometric optics used for light
modeling
 Imitating real life
• Taking a more physical approach, we can start with the
following arrangement:

• The details of the interaction between light and the

surfaces of the object determine how much light enters
the camera.
 Light properties
Light is a form of electromagnetic radiation:
Visible spectrum 350 – 780 nm
 Trace a Ray!
Ray tracing
– building an imaging model by
following light from a source
– a ray is a semi-infinite line that
emanates from a point and
“travels” to infinity in a
particular direction
– portion of these infinite rays
contributes to the image on the
film plane of the camera
surfaces:
– diffusing
– reflecting
– refracting
 Ray Tracing
• Ray tracing is an image formation technique that is
based on these ideas and that can form the basis for
producing computer generated images.
A different approach must be used:
• for each pixel intensity must be
computed
• all contributions must be taken into
account
• a ray is “followed” in the opposite
direction, when intersect a surface it
is split into two rays
• contribution from light sources and
reflection from other resources are
counted
 The Pinhole Camera
• Looks like this:

• A Pinhole camera is a box

– with a small hole in the center on one side,
– and the film on the opposite side
– And you could take pictures with it in the old days
 Pinhole Camera

Box with a small hole

• film plane z = - d
y
yp  
z
d
x
xp  
z
d
 Pinhole Camera
point (xp,yp,-d) –
h
projection of the   2 arctan
point (x,y,z) 2d
angle of view or field
of the camera –
angle 
ideal camera –
infinite depth of
field
 The Human Visual System
• Our extremely complex visual system has all
the components of a physical imaging system,
such as a camera or a microscope.
 Human Visual System - HVS

• rods and cones (tyčinky a čípky) excited by electromagnetic

energy in the range 350-780 nm
• sizes of rods and cones determines the resolution of HVS – our
visual acuity
• the sensors in the human eye do not react uniformly to the light
energy at different wavelengths
 Human Visual System - HVS

Courtesy of http://www.webvision.med.utah.edu/into.html
 Human Visual System
• different HVS response for single
frequency light – red/green/blue
• relative brightness response at
different frequencies
• this curve is known as
Commision Internationale de
L’Eclairage (CIE) standard
observer curve
• the curve matches the sensitivity
of the monochromatic sensors used
in black&white films and video
camera
• most sensitive to GREEN colors
 Human Visual System
• three different cones in HVS
• blue, green & yellow – often
reported as red for compatibility
with camera & film
 Synthetic Camera Model
computer-generated image based
on an optical system –
Synthetic Camera Model
viewer behind the camera can
move the back of the camera –
change of the distance d
i.e. additional flexibility
objects and viewer specifications Imaging system
are independent – different
functions within a graphics
library
 Synthetic Camera Model
• The objects specification is independent of the viewer
specifications.
• In a graphics library we would expect separate functions for
specifying objects and the viewer.
• We can compute the image using simple trigonometric calculations
a – situation with a camera
b – mathematical model – image plane moved in front of the camera
center of projection – center of the lens
projection plane – film plane
 Synthetic Camera Model
Not all objects can be seen
limit due to viewing angle
Solution:
Clipping rectangle or clipping
window placed inn front of
the camera
ad b shows the case when the
clipping rectangle is shifted
aside – only part of the the
scene is projected
 Some Adjustments
• Symmetry in projections
– Move the image plane in front of the lens
 Constraints
• Clipping
– We must also consider the limited size of the
image.
 The Programmer’s Interface

• Numerous ways for user

interaction with a graphics
system using input devices
- pads, mouse, keyboards
etc.
• different orientation of
coordinate systems
canvas versus OpenGL etc.
 Application Programmer’s Interfaces

• What is an API?
• Why do you want one?

• API functionality should match the conceptual model

• Synthetic Camera Model used for APIs like OpenGL, PHIGS,
Direct 3D, Java3D, VRML etc.
 Pen Plotter Model
Two basic functions for drawing:
• moveto(x , y) – pen up
• lineto(x , y) – pen down

moveto (0,0);
lineto(1,0);lineto(1,1);lineto(0,1);lineto(0,0); Typical example of “sequential
access”
{ draws a rectangle }
moveto(0,1);
lineto(0.5,1.866); lineto(1.5,1.866);
lineto(1.5,0.866);
lineto(1,0);moveto(0,0);
lineto(1.5,1.866);
{ draws a cube using oblique projection }
 Three-Dimensional APIs
-Synthetic Camera Model
• If we are to follow the synthetic camera
model, we need functions in the API to
specify:
– Objects
– The Viewer
– Light Sources
– Material Properties
 Objects
• Objects are defined by points or vertices, line segments, polygons etc. to
represent complex objects
• API primitives are displayed rapidly on the hardware
• usual API primitives:
– points
– line segments
– polygons
– text
• The following code fragment defines a triangle in OpenGL

– glBegin(GL_POLYGON);
– glVertex3f(0.0,0.0,0.0);
– glVertex3f(0.0,1.0,0.0);
– glVertex3f(0.0,0.0,1.0);
– glEND();
 The Viewer
Camera specification in APIs:
• position – usually center of lens
• orientation – camera coordinate
system in center of lens
camera can rotate around those
three axis
• focal length of lens determines
the size of the image on the film
actually viewing angle
• film plane - camera has a height
and a width
 Application Programmer’s Interface

Two coordinate systems are used:

• world coordinates, where the object is defined
• camera coordinates, where the image is to be produced
Transformation for conversion between coordinate systems or
gluLookAt(cam_x, cam_y,cam_z, look_at_x, look_at_y, look_at_z,…)
glPerspective( field_of_view)
Lights – location, strength, color, directionality
Material – properties are attributes of objects
Observed visual properties of objects are given by material and light
properties
 Lights
• Light sources can be defined by their location, strength, color,
and directionality.
• API’s provide a set of functions to specify these parameters
for each source.
• Material properties are characteristics, or attributes, of the
objects
– Such properties are usually defined through a series of
function calls at the time that each object is defined.
 Materials
• Material properties are characteristics, or
attributes, of the objects
– Such properties are usually defined through a
series of function calls at the time that each object
is defined.
 Sequence of Images
• In Chapter 2 , we begin our detailed discussion
of the OpenGL API
• Color Plates 1 through 8 show what is possible
with available hardware and a good API, but
also they are not difficult to generate.
 Modeling - Rendering Paradigm

In many applications the modeling is separated from production

of an image – rendering (CAD systems, animations etc.)
In this case the modeling SW/HW might be different from the
renderer
the connection between both parts can be simple or highly
complex using distributed environments
 Graphics Architectures
• On one side of the API is the application
program. On the other is some combination
of hardware and software that implements
the functionality of the API
• Researchers have taken various approaches to
developing architectures to support graphics
APIs
 Early Systems
• General Purpose Computers (CPU)
– Single Processing Unit
• In the early days of computer graphics, computers were so
slow that refreshing even simple images, containing a few
hundred line segments, would burden an expensive computer
• Early graphics systems – CRT had just basic capability to
generate line segments connecting two points
– vector based with refreshing – length of line segments limited
light pen often used for manipulation
– systems with memory CRT – the whole picture redrawn if changed
 Display Processors
• The earliest attempts to build
a special purpose graphics
system were concerned
primarily with relieving the
task of refreshing the display
• Display processors
– standard architecture with
capabilities to display
primitives
– composition made at the host
– memory – display list –
contains primitives to be
displayed.
 Pipeline Architecture
• The major advances in graphics architectures parallel
closely the advances in workstations.
• For computer graphics applications, the most important
use of custom VLSI circuits has been in creating pipeline
architectures
• A simple arithmetic pipeline is shown: a + b * c
- when addition of (b * c) and a is performing new b * c is
computed in parallel – pipelining enabled significant speed
up
- similar approach can be used for processing of geometric
primitives as well
 Pipeline
• If we think in terms of processing the geometry of our objects to obtain an
image, we can use the following block diagram:

There are 4 major steps in the geometric pipeline:

• Vertex processing – like scaling, rotations, translation, mirroring, sheering
etc.
• clipping – removal of those parts that are out of the viewing field
• Fragment processing
• rasterization
homogeneous coordinates and matrix operations geometric transformations
are used
 Transformations
• Many of the steps in the imaging process can be viewed as
transformations between representations of objects in
different coordinate systems
• for example: from the system in which the object was defined
to the system of the camera.
• We can represent each change of coordinate systems by a
matrix
• We can represent successive changes by multiplying (or
concatenating) the individual matrices into a single matrix.
• Will all be discussed in chapter 4!
 Clipping
• Why do we Clip?

• Efficient clipping algorithms are developed in

Chapter 7
 Projection
• In general three-dimensional objects are kept
in three dimensions as long as possible, as
they pass through the pipeline.
• Eventually though, they must be projected
into two-dimensional objects.
• There are various projections that we can
implement.
• We shall see in Chapter 5 that we can
implement this step using 4 x 4 matrices, and,
thus, also fit it into the pipeline.
 Rasterization
• Finally, our projected objects must be
represented as pixels in the frame buffer. E.g
we have to squash our 3D object into a 2D
pixel representation.
• We discuss this scan-conversion or
rasterization process in Chapter 7
 Performance Characteristics
• There are two fundamentally different types
of processing.
– Front end -- geometric processing, based on the
processing of vertices
• ideally suited for pipelining, and usually involves
floating-point calculations.
– Back end -- involves direct manipulation of bits in
the frame buffer.
• Ideally suited for parallel bit processors.
 Graphics programming

• OpenGL API will be used for development

• API will be sufficient to allow you to program
many interesting two- and three-dimensional
problems and to familiarize you with the basic
graphics concepts.
• execute without modification on a three-
dimensional system.
• functionality sufficient for writing sophisticated
2D programs without users interaction
• example of a simple 3D application
 Sierpinski Gasket
Three vertices are given (x1, y1), (x2, y2),
(x3, y3)
1. pick up a random point inside the
triangle
2. select one of the three vertices at
random
3. find the point halfway between
initial point and the randomly
selected vertex
4. display this new point by putting
some sort of marker, such as a small
circle, at its location
5. replace the initial point with this
new point Typical example of
“random access”
6. return to step 2
 Sierpinski Gasket
Possible form of your program might be:

main ( )
{
initialize_the_system ();
for (some_number_of_points )
{
pt = generate_a_point();
display_the_point(pt);
}
cleanup()
}
Final program in OpenGL will almost that
simple, but slightly different
 GL specifications

• Multiple forms for functions

• Vertex functions – general forms
• glVertex[nt|ntv] where:
– n signifies number of dimensions (2,3,4)
– t denotes data type t {i,f,d,b,s,ub,us,ui}
• i – integer (32 bits), f – float (32 bits), d – double (64 bits)
• b – signed char (8), s – short (16), u – unsigned &{b,s,i}
– v indicates that variables are specified through the
pointer to an array
 GL specifications

OpenGL types
• GLfloat, GLint – instead of float, int (integer)
data types used in C or Pascal
Examples:
#define GLfloat float simple change of data types

glVertex2i(GLint xi,GLint iy)

position specification in 2D
glVertex3f(GLfloat x, GLfloat y, GLfloat z)
position specification in 3D
 GL specifications

To store 3D vertex using an array

GLfloat vertex[3]
can be used as
glVertex3fv(vertex)

using vertices variety of objects is defined.

The can be “grouped” together using
glBegin(argument); .............. glEnd( );
argument – specifies geometric type that is specified by vertices
 GL specifications

glBegin(GL_LINES);
glVertex2f(x1,y1); glVertex2f(x2,y2);
glEnd( ); /* specifies a line segment */

glBegin(GL_POINTS);
glVertex2f(x1,y1); glVertex2f(x2,y2);
glEnd( ); /* specifies two points */

Others possible arguments will be specified latter

Consider a drawing area 500x500, lower left hand corner (0,0)

and Sierpinski gasket to be drawn
 Sierpinski Gasket & GL specifications

typedef GLfloat point2 [2]; /* defines a point as two dimensional array */

void display(void);
{ /* an arbitrary triangle */
point2 vertices[3]= { {0.0,0.0}, {250.500}, {500.0,0.0}};
static point2 p = {75.0, 50.0}; /* set to any initial point */
int j,k; int rand( ); {* standard random number generator */
for (k=0;k<5000;k++)
{ j = rand ( )%3; /* pick a random vertex from 0, 1, 2 */
p[0] = (p[0]+ vertices[ j ][0])/2; p[1] = (p[1]+ vertices[ j ][1])/2;
/* display the new point */
glBegin(GL_POINTS); glVertex2fv(p); glEnd();
}
glFlush(); /* points are to be displayed as soon as possible */
}
 Sierpinski Gasket & GL specifications

It is necessary:
• to write the CORE program
• to specify
– color of drawing
– where on the scene the picture will appear
– how large image will be
– how to create an area of the screen for our
image – window
– how much of our infinite pad will appear on the Image generated by
screen
the program
– how long the image will remain on the screen
Those are important issues! – will be solved
latter
 Coordinate System

User works in: Advanced mapping:

• physical coordinates • normalized coordinate system
device (DC)/raster (NDC) introduction
coordinates - canvas style - • WCNDC & NDC WCi
integer values
• world coordinates (WC)
with transformation
definition to device
coordinates – float values
• Window-Viewport
transformation
Image generated by
the program
 Summary
• In this chapter we have set the stage for our
top-down development of computer graphics.
– Computer graphics is a method of image
formation that should be related to classical
methods -- in particular to cameras
– Our next step is to explore the application side of
Computer Graphics programming. E.g Let’s start
programming using the OpenGL API!