Module-1

Overview: Computer Graphics and OpenGL

1.1 Basics of Computer Graphics

Computer graphics is an art of drawing pictures, lines, charts, etc. using computers with the
help of programming. A computer graphics image is made up of a number of pixels.
Pixel is an acronym for Picture Element. It is the smallest addressable graphical unit
represented on the computer screen.

1.2 Applications of Computer Graphics

i) Graphs and Charts:

 An early application for computer graphics is the display of simple data graphs
usually plotted on a character printer. Data plotting is still one of the most common
graphical applications.
 Graphs and charts are commonly used to summarize functional, statistical,
mathematical, engineering, and economic data for research reports, managerial
summaries, and other types of publications.
 Typical examples of data plots are line graphs, bar charts, pie charts, surface charts
and graphs, contour plots, and other displays showing relationships between multiple
parameters in two dimensions, three dimensions, or higher-dimensional spaces.

ii) Computer-Aided Design:

 A major use of computer graphics is in design processes, particularly for engineering

and architectural systems.
 CAD (Computer-Aided Design) and CADD (Computer-Aided Drafting and Design)
methods are now routinely used in the automobile, aircraft, spacecraft, computer, and
home appliance industries.
 Circuits and networks for communications, water supply, and other utilities are
constructed with repeated placement of a few geometrical shapes.
 Computer animation is often used in CAD applications for quickly testing the
performance of a vehicle or system using wire-frame shapes.

iii) Virtual-Reality Environments:

 Animations in virtual reality environments are often used to train heavy equipment
operators or to analyze the effectiveness of various cabin configurations and control
placements.
 With virtual-reality systems, designers and others can move about and interact with
objects. Designs can be examined in various ways, such as by taking simulated
"walks" around the outside of buildings to better appreciate the overall effect of a
particular design.
  With a special glove, objects in a scene can be "grasped" and moved from one place
to another and turned over.

iv) Data Visualizations:

 Producing graphical representations for scientific, engineering, and medical data sets
and processes is another fairly new application of computer graphics, which is
generally referred to as scientific visualization. The term business visualization is
used in connection with datasets related to non-scientific areas such as commerce and
industry.
 There are many different kinds of datasets, and effective visualization schemes
depend on the characteristics of the data. A collection of data can contain scalar
values, vectors, or higher-order tensors.

v) Education and Training:

 Computer-generated models of physical, financial, political, social, economic, and

other systems are often used as educational aids.
 Models of physical processes, physiological functions, and equipment such as the
color-coded representation can help trainees to understand the operation of a system.
 For some training applications, special hardware systems are designed. Examples of
such specialized systems include simulators for practicing surgical procedures,
training aircraft pilots, and air traffic control personnel. Some simulators have no
video screens; for instance, a flight simulator with only a control panel for instrument
flying.

vi) Computer Art:

 The picture is usually painted electronically on a tablet using a stylus, which can
simulate different brush strokes, brush widths, and colors.
 Fine artists use a variety of computer technologies to produce images. To create
pictures, the artist uses a combination of 3D modeling packages, texture mapping,
drawing programs, and CAD software, etc.
 Commercial art also uses these "painting" techniques for generating logos and text,
graphics for TV designs, page layouts, and other advertising applications.
 A common graphics method employed in many television commercials is morphing,
where one object is transformed into another.

vii) Entertainment:

 Computer graphics methods are routinely used in television production, motion

pictures, and music videos.
 Sometimes graphics images are combined with live actors and scenes, and sometimes
the computer-generated images are completely animated.
 Some television programs also combine computer-generated figures with live actors.
Animation techniques are used to transform the actor's face into another shape,
creating scenes with cartoon characters or transforming people and animals.
viii) Image processing
 Image processing involves interpreting scans to enhance or modify existing pictures.
The methods used in image processing often overlap with those used in computer
graphics but serve different purposes. TV graphics and computer graphics are
fundamentally concerned with visual modification.
 Image processing methods are used to improve picture quality, analyze images, and
recognize visual patterns for robotic applications. They are frequently applied in
medical imaging, such as in simulation and surgical operations of image processing.
 Medical applications also extensively utilize image processing techniques for picture
enhancements in computed tomography (CT), positron emission tomography (PET),
and computed axial tomography (CAT).

ix) Graphical User Interface (GUI)

 A graphical user interface (GUI) is a common method for application software to
provide a graphical interface.
 A major component of a graphical user interface (GUI) is a window manager that
allows multiple rectangular display areas called windows to interface with the screen.
Each screen display area can contain graphical and non-graphical information and can
be used to activate a display window.
 Using an interactive pointing device, such as a mouse, a display window can be
activated on some systems by positioning the screen cursor within the window display
area and pressing the left mouse button.

1.3 VIDEO DISPLAY DEVICES

1.3.1REFRESH CATHODE RAY TUBES
The primary output device in a graphics system is a video monitor.
✓ Historically, the operation of most video monitors was based on the standard cathoderay
tube (CRT) design, but several other technologies exist.
✓ In recent years, flat-panel displays have become significantly more popular due to their
reduced power consumption and thinner designs.
 Fig 1.3.1.1:-Refresh Cathode Ray Tubes

✓A beam of electrons, emitted by an electron gun, passes through focusing and deflection
systems that direct the beam toward specified positions on the phosphor-coated screen.
✓ The phosphor then emits a small spot of light at each position contacted by the electron
beam and the light emitted by the phosphor fades very rapidly.
✓ One way to maintain the screen picture is to store the picture information as a charge
distribution within the CRT in order to keep the phosphors activated.
✓ The most common method now employed for maintaining phosphor glow is to redraw
the picture repeatedly by quickly directing the electron beam back over the same screen
points. This type of display is called a refresh CRT.
✓ The frequency at which a picture is redrawn on the screen is referred to as the refresh rate.

OPERATION OF AN ELECTRON GUN WITH AN ACCELERATING

ANODE

Fig 1.3.1.2:-Operation Of An Electron Gun With An Accelerating Anode

✓ The primary components of an electron gun in a CRT are the heated metal cathode and a

control grid.
✓ The heat is supplied to the cathode by directing a current through a coil of wire, called the
filament, inside the cylindrical cathode structure.
✓ This causes electrons to be “boiled off” the hot cathode surface.
✓ Inside the CRT envelope, the free, negatively charged electrons are then accelerated
toward the phosphor coating by a high positive voltage.
✓ Intensity of the electron beam is controlled by the voltage at the control grid.
✓ Since the amount of light emitted by the phosphor coating depends on the number of
electrons striking the screen, the brightness of a display point is controlled by varying the
voltage on the control grid.
✓ The focusing system in a CRT forces the electron beam to converge to a small cross
section as it strikes the phosphor and it is accomplished with either electric or magnetic
fields.
✓ With electrostatic focusing, the electron beam is passed through a positively charged
metal cylinder so that electrons along the center line of the cylinder are in equilibrium
position.
✓ Deflection of the electron beam can be controlled with either electric or magnetic fields.
✓ Cathode-ray tubes are commonly constructed with two pairs of magnetic-deflection coils
✓ One pair is mounted on the top and bottom of the CRT neck, and the other pair is
mounted on opposite sides of the neck.
✓ The magnetic field produced by each pair of coils results in a traverse deflection force
that is perpendicular to both the direction of the magnetic field and the direction of travel
of the electron beam.
✓ Horizontal and vertical deflections are accomplished with these pair of coils

ELECTROSTATIC DEFLECTION OF THE ELECTRON BEAM IN A

CART

Fig 1.3.2.3:-Electrostatic Deflection Of The Electron Beam In A Cart

✓ What we see on the screen is the combined effect of all the electrons light emissions: a

glowing spot that quickly fades after all the excited phosphor electrons have returned to
their ground energy level.
✓ The frequency of the light emitted by the phosphor is proportional to the energy
difference between the excited quantum state and the ground state.
✓ Lower persistence phosphors required higher refresh rates to maintain a picture on the
screen without flicker.
✓ The maximum number of points that can be displayed without overlap on a CRT is
referred to as a resolution.
✓ Resolution of a CRT is dependent on the type of phosphor, the intensity to be displayed,
and the focusing and deflection systems.
✓ High-resolution systems are often referred to as high-definition systems.

1.3.2 Raster-Scan Displays and Random Scan Displays

i)Raster-Scan Displays
❖ The electron beam is swept across the screen one row at a time from top to bottom.

❖ As it moves across each row, the beam intensity is turned on and off to create a pattern of
illuminated spots.

❖ This scanning process is called refreshing. Each complete scanning of a screen is

normally called a frame.

❖ The refreshing rate, called the frame rate, is normally 60 to 80 frames per second, or
described as 60 Hz to 80 Hz.

❖ Picture definition is stored in a memory area called the frame buffer.

❖ This frame buffer stores the intensity values for all the screen points. Each screen point is
called a pixel (picture element).

❖ Property of raster scan is Aspect ratio, which defined as number of pixel columns divided
by number of scan lines that can be displayed by the system.
 Fig 1.3.2.1 :-A Raster-Scan System Displays An Object As A Set Of Discrete Points Across
Each Scan Line.
case1: In case of black and white systems
✓ On black and white systems, the frame buffer storing the values of the pixels is called a
bitmap.
✓ Each entry in the bitmap is a 1-bit data which determine the on (1) and off (0) of the
intensity of the pixel.
Case 2: In case of color systems
❖ On color systems, the frame buffer storing the values of the pixels is called a pixmap
(Though now a days many graphics libraries name it as bitmap too
❖ Each entry in the pixmap occupies a number of bits to represent the color of the pixel. For
a true color display, the number of bits for each entry is 24 (8 bits per red/green/blue channel,
each channel 28=256 levels of intensity value, ie. 256 voltage settings for each of the
red/green/blue electron guns).
ii). Random-Scan Displays
✓ When operated as a random-scan display unit, a CRT has the electron beam directed only
to those parts of the screen where a picture is to be displayed.
✓ Pictures are generated as line drawings, with the electron beam tracing out the component
lines one after the other.
✓ For this reason, random-scan monitors are also referred to as vector displays (or stroke
writing displays or calligraphic displays).
✓ The component lines of a picture can be drawn and refreshed by a random-scan system in

any specified order

Fig 1.3.2.2:-A random-scan system draws the component lines of an object in any specified
order.
✓ A pen plotter operates in a similar way and is an example of a random-scan, hard-copy
device.
✓ Refresh rate on a random-scan system depends on the number of lines to be displayed on
that system.
✓ Picture definition is now stored as a set of line-drawing commands in an area of memory
referred to as the display list, refresh display file, vector file, or display program
✓ To display a specified picture, the system cycles through the set of commands in the
display file, drawing each component line in turn.
✓ After all line-drawing commands have been processed, the system cycles back to the first
line command in the list.
✓ Random-scan displays are designed to draw all the component lines of a picture 30 to 60
times each second, with up to 100,000 “short” lines in the display list.

1.3.3 Color CRT Monitors

❖ A CRT monitor displays color pictures by using a combination of phosphors that emit
different-colored light.
❖ It produces range of colors by combining the light emitted by different phosphors.
❖ There are two basic techniques for color display:
1. Beam-penetration technique
2. Shadow-mask technique
1) Beam-penetration technique:
✓ This technique is used with random scan monitors.

✓ In this technique inside of CRT coated with two phosphor layers usually red and green.

✓ The outer layer of red and inner layer of green phosphor.

✓ The color depends on how far the electron beam penetrates into the phosphor layer.

✓ A beam of fast electron penetrates more and excites inner green layer while slow eletron excites
outer red layer.

✓ At intermediate beam speed we can produce combination of red and green lights which emit
additional two colors orange and yellow.

✓ The beam acceleration voltage controls the speed of the electrons and hence color of pixel.
Disadvantages:
 It is a low cost technique to produce color in random scan monitors. ➢ It can display only
four colors.
 Quality of picture is not good compared to other techniques.

2)Shadow-mask technique
✓ It produces wide range of colors as compared to beam-penetration technique.
✓ This technique is generally used in raster scan displays. Including color TV.
✓ In this technique CRT has three phosphor color dots at each pixel position.
One dot for red, one for green and one for blue light. This is commonly known as Dot
triangle.
✓ Here in CRT there are three electron guns present, one for each color dot. And a
shadow mask grid just behind the phosphor coated screen.
✓ The shadow mask grid consists of series of holes aligned with the phosphor dot
pattern.
✓ Three electron beams are deflected and focused as a group onto the shadow mask
and when they pass through a hole they excite a dot triangle.
✓ In dot triangle three phosphor dots are arranged so that each electron beam can
activate only its corresponding color dot when it passes through the shadow mask.
✓ A dot triangle when activated appears as a small dot on the screen which has color
of combination of three small dots in the dot triangle.
 ✓ By changing the intensity of the three electron beams we can obtain different
colors in the shadow mask CRT.

Fig1.3.3.1:-Operation of a delta-delta, shadow-mask CRT. Three electron guns,

aligned with the triangular color-dot patterns on the screen, are directed to each dot
triangle by a shadow mask.

1.3.4 Flat Panel Display

➔ The term flat panel display refers to a class of video device that have reduced
volume, weight & power requirement compared to a CRT.
➔ As flat panel display is thinner than CRTs, we can hang them on walls or wear on
our wrists.
➔ Since we can even write on some flat panel displays they will soon be available as
pocket notepads.
➔ We can separate flat panel display in two categories:
1. Emissive displays: - the emissive display or emitters are devices that
convert electrical energy into light. For Ex. Plasma panel, thin film electroluminescent
displays and light emitting diodes.
2. Non emissive displays: - non emissive display or nonemitters use optical
effects to convert sunlight or light from some other source into graphics patterns. For
Ex. LCD (Liquid Crystal Display).
a) Plasma Panels displays
 This is also called gas discharge displays.
 It is constructed by filling the region between two glass plates with a mixture of gases that
usually includes neon.
  A series of vertical conducting ribbons is placed on one glass panel and a set of horizontal
ribbon is built into the other glass pane
 Firing voltage is applied to a pair of horizontal and vertical conductors cause the gas at the
intersection of the two conductors to break down into glowing plasma of electrons and ions.

 Picture definition is stored in a refresh buffer and the firing voltages are applied to refresh
the pixel positions, 60 times per second.

fig
1.3.4.1:-Basic design of a plasma-panel display device.
 Alternating current methods are used to provide faster application of firing voltages and
thus brighter displays.
 Separation between pixels is provided by the electric field of conductor.
 One disadvantage of plasma panels is they were strictly monochromatic device that means
shows only one color other than black like black and white.

b. Thin Film Electroluminescent Displays

 It is similar to plasma panel display but region between the glass plates is filled with
phosphors such as doped with magnesium instead of gas.
 When sufficient voltage is applied the phosphors becomes a conductor in area of
intersection of the two electrodes.
 Electrical energy is then absorbed by the manganese atoms which then release the energy
as a spot of light similar to the glowing plasma effect in plasma panel.
 It requires more power than plasma panel.

Fig1.3.4.2:-Basic design of a thin-film electroluminescent display device.

c. Light Emitting Diode (LED)

 In this display a matrix of multi-color light emitting diode is arranged to form the pixel
position in the display and the picture definition is stored in refresh buffer.
 Similar to scan line refreshing of CRT information is read from the refresh buffer and
converted to voltage levels that are applied to the diodes to produce the light pattern on the
display.
d)Liquid Crystal Display (LCD)
 This non emissive device produce picture by passing polarized light from the surrounding
or from an internal light source through liquid crystal material that can be aligned to either
block or transmit the light.
 The liquid crystal refreshes to fact that these compounds have crystalline arrangement of
molecules then also flows like liquid.
 It consists of two glass plates each with light polarizer at right angles to each other
sandwich the liquid crystal material between the plates.
 Rows of horizontal transparent conductors are built into one glass plate, and column of
vertical conductors are put into the other plates.
 The intersection of two conductors defines a pixel position.
  In the ON state polarized light passing through material is twisted so that it will pass
through the opposite polarizer.
 In the OFF state it will reflect back towards source.

Fig1.3.4.3:-The light-twisting, shutter effect used in the design of most LCD devices.

1.3.5Three- Dimensional Viewing Devices

 Graphics monitors for the display of three-dimensional scenes have been devised using a
technique that reflects a CRT image from a vibrating, flexible mirror As the varifocal mirror
vibrates, it changes focal length.
 These vibrations are synchronized with the display of an object on a CRT so that each point
on the object is reflected from the mirror into a spatial position corresponding to the distance
of that point from a specified viewing location.
 This allows us to walk around an object or scene and view it from different sides.
 Fig1.3.5:-Operation of a three-dimensional display system using a vibrating mirror that
changes focal length to match the depths of points in a scene.

1.4 Raster-Scan Systems

Raster-graphics systems are essential for creating and displaying images on screens. These
systems involve multiple processing units working together. The central processing unit
(CPU) gets help from a special processor called the video controller or display controller,
which manages the display device and keeps the screen updated by accessing the frame
buffer.
1.4.1 Video Controller

Fig 1.4.1.1

Fig 1.4.1.2

In a typical raster system, a portion of the system memory is set aside for the frame buffer.
The video controller can access this memory directly. Screen positions and frame-buffer
locations are organized using Cartesian coordinates. Application programs use graphics
software to set the positions of displayed objects based on this coordinate system.
The origin of the coordinate system is usually at the lower-left corner of the screen, but it can
be placed anywhere that's convenient. The screen surface represents the first quadrant of a
two-dimensional system: positive x values go from left to right, and positive y values go from
bottom to top. Pixel positions are given integer x values (from 0 to the maximum width) and
y values (from 0 to the maximum height).

Refresh Operations
To keep the screen image stable, the video controller constantly refreshes the display. It starts
at the top-left corner of the screen, setting the x register to 0 and the y register to the top scan
line value. It retrieves the pixel value from the frame buffer and sets the CRT beam's
intensity. Then, it moves one pixel to the right (incrementing the x register) and repeats the
process across the top scan line.
After finishing the top line, the x register resets to 0, and the y register moves down to the
next scan line. This process continues for each scan line until the bottom of the screen. Then,
the video controller resets to the top and starts over. To keep up with the necessary refresh
rate of at least 60 frames per second, the video controller can handle multiple pixel values at
once, speeding up the process.

Advanced Video Controller Functions

Video controllers are capable of more than just refreshing the screen; they can also manage
multiple frame buffers, allowing one to refresh while another loads new pixel values. This
capability is particularly useful for animations, as different frames can load without
interrupting the refresh cycle. Additionally, video controllers can perform pixel
transformations, resizing or moving screen areas during the refresh. They often use lookup
tables to quickly change screen intensity values based on frame buffer data. Furthermore,
some systems have the ability to mix the frame-buffer image with an input from a camera or
another source.

Fig 1.4.1.3

1.4.2 Raster-Scan Display Processor

A raster system might also include a separate display processor (or graphics controller) to
handle graphics tasks, freeing up the CPU. The display processor digitizes picture definitions
from application programs into pixel values stored in the frame buffer, a process known as
scan conversion.
 Fig 1.4.2.1

Scan Conversion
Scan conversion translates geometric shapes, like lines, into pixel positions in the frame
buffer. For example, to convert a line, the system finds the closest pixel positions along the
line's path and stores the color for each position in the frame buffer. Characters can be
defined using rectangular grids or outlines, which are then converted into pixels in the frame
buffer.

Additional Display Processor Functions

Display processors can generate line styles, creating dashed, dotted, or solid lines. They can
display color areas by filling regions with color and apply transformations to objects in a
scene. Additionally, display processors can interface with input devices, such as a mouse, to
facilitate interactive input.

Memory Optimization Techniques

To save memory, frame buffers can be organized using linked lists and color information
encoded efficiently. One method, run-length encoding, stores each scan line as pairs of
numbers: one for color and one for the number of adjacent pixels in that color. This works
well for images with long runs of a single color. Another method, cell encoding, uses
rectangular areas.
These methods can be tricky when recording color changes and may increase storage needs
with shorter runs. Although memory costs have dropped, making frame buffer size less of an
issue, encoding is still useful for storing and transmitting digital images.
Understanding these components and processes reveals the complexity and efficiency of
modern raster-graphics systems. They are crucial for delivering the smooth, vibrant visuals
we see on screens today.
 Fig 1.4.2.2 Fig 1.4.2.3

1.5 Coordinate Reference Frames:

 World-Coordinate System: This is a two-dimensional (2D) or three-dimensional
(3D) reference frame used to define the location of objects in a virtual scene. Imagine
a grid laid over the scene, with each point on the grid having a unique X, Y, and (for
3D) Z coordinate.
 Geometric Specifications: Objects in the scene are described by their positions
within this world-coordinate system. A line segment is defined by its two endpoints,
while a polygon is defined by a set of vertices (corner points).
 Scene Description: This data includes the object's coordinates, color information, and
bounding box (minimum and maximum X, Y, and Z values). This essentially captures
the shape, location, and color of each object.
 Viewing Routines: These are software programs that take the scene description and
determine which objects are visible from a particular viewpoint. They essentially
translate the 3D scene information into a 2D representation suitable for the display.
 Scan-Conversion: This process converts the scene information into data that can be
displayed on the screen. It determines the color values for each pixel (picture element)
on the monitor based on the visible objects and their properties.

1.5.1 Screen Coordinates

Locations on a video monitor are represented by integer screen coordinates, which
correspond to pixel positions in the frame buffer. These coordinates are typically referenced
from the top-left corner, with the y value indicating the scan line number and the x value
indicating the column number along a scan line. Hardware processes, such as screen
refreshing, address pixels starting from (0,0) at the top-left to (Xmax, Ymax) at the bottom-
right. However, software commands can define different reference frames, such as setting the
origin at the lower-left corner or using non-integer Cartesian coordinates. These software-
defined coordinates are then converted to integer pixel positions by the viewing routines.

Fig 1.5.1: Pixel positions referenced with respect to the lower-left corner of a screen area.
Scan-line algorithms for graphics primitives use coordinate descriptions to determine pixel
locations for display. For instance, given the endpoints of a line segment, the algorithm
calculates pixel positions along the line path. Each integer screen position references the
center of a pixel area. Once identified, pixel positions are assigned appropriate color values in
the frame buffer using a low-level procedure like `setPixel(x, y)`, which stores the current
color at (x, y). To retrieve a pixel's color, the `getPixel(x, y, color)` function is used, where
`color` receives the RGB bit codes for the pixel at (x, y). For three-dimensional scenes,
screen coordinates include depth information, but for two-dimensional scenes, all depth
values are 0.

1.5.2 Absolute and Relative Coordinate Specifications:

The coordinate references we've discussed so far are absolute, meaning they represent actual
positions within the coordinate system. However, some graphics packages also allow for
relative coordinates, which specify a position as an offset from the last referenced position
(the current position). This method is useful in applications like pen plotters, drawing
systems, and publishing. For example, if the current position is (3, 8), a relative coordinate of
(2, -1) would move to the absolute position (5, 7). A function is used to set this current
position before specifying coordinates. This approach simplifies drawing connected shapes
by only needing to specify relative offsets once a starting position is set. Unless stated
otherwise, we will assume all coordinates are absolute.

1.6 Specifying A Two-Dimensional World-Coordinate Reference

Frame in OpenGL :
The gluOrtho2D command is a function we can use to set up any two dimensional Cartesian
reference frame. The arguments for this function are the four values defining the x and y
coordinate limits for the picture we want to display. Since the gluOrtho2D function specifies
an orthogonal projection, we need also to be sure that the coordinate values are placed in the
OpenGL projection matrix. In addition, we could assign the identity matrix as the projection
matrix before defining the world-coordinate range. This would ensure that the coordinate
values were not accumulated with any values we may have previously set for the projection
matrix. Thus, for our initial two-dimensional examples, we can define the coordinate frame
for the screen display window with the following statements:
glMatrixMode (GL_PROJECTION);
glLoadIdentity ( );
gluOrtho2D (xmin, xmax, ymin, ymax);
The display window will then be referenced by coordinates (xmin, ymin) at the lower-left
corner and by coordinates (xmax, ymax) at the upper-right corner, as shown in Figure.
After setting up the coordinate reference with `gluOrtho2D`, we can draw graphics primitives
using these coordinates. If a primitive's extents fall within the coordinate range of the display
window, it will be fully displayed. Otherwise, only the parts within the display-window limits
will show. When describing a picture's geometry, all positions for OpenGL primitives must be
given in absolute coordinates relative to the reference frame defined by `gluOrtho2D`.

Fig 1.6 : World-

coordinate limits for a display window, as specified in the glOrtho2D function.