INTRODUCTION

Graphics capabilities for both two-dimensional and three-dimensional applications are

now common, even on general-purpose computers and handheld devices.
With personal computers, we can use a variety of interactive input devices and graphics
software packages.
A wide-format scanner.
Plasma panels with touch screens
Desktop scanners:
A hand-held scanner that can be used to input either text or graphics images
The NotePad desktop tablet with stylus
A virtual reality scene, displayed on a two-dimensional video monitor, with input from a data glove and a spaceball

1
VIDEO DISPLAY DEVICES
 The primary output device in a graphics system is a video monitor.
 The operation of most video monitors is based on the standard cathode-ray-tube(CRT) design,
 but several other technologies exist and solid state monitors may eventually predominate.

2
REFRESH CATHODE-RAY
TUBES
 A beam of electrons (cathode rays), 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.
 Because the light emitted by the phosphor fades very rapidly, some method is needed for
maintaining the screen picture.
 One way to do this is to store the picture information as a charge distribution within the CRT

3
 However, 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, and the frequency at which a picture is redrawn
on the screen is referred to as the refresh rate.
 The primary components of an electron gun in a CRT are the heated metal cathode and a
control grid.

4
5
6
 Intensity of the electron beam is controlled by the voltage at the control grid, which is a metal
cylinder that fits over the cathode.
 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.

7
 Focusing 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 centerline of the cylinder are in an equilibrium position.
 Deflection of the electron beam can be controlled with either electric or magnetic fields.
 cathode-ray tubes are now commonly constructed with magnetic-deflection coils mounted on
the outside of the CRT envelope.

8
 Different kinds of phosphors are available for use in CRTs.
 Besides color, a major difference between phosphors is their persistence.
 Persistence is defined as the time that it takes the emitted light from the screen to decay to one-
tenth of its original intensity.
 Lower-persistence phosphors require higher refresh rates to maintain a picture on the screen
without flicker.
 A phosphor with low persistence can be useful for animation, while high-persistence
phosphors are better suited for displaying highly complex, static pictures.

9
 The maximum number of points that can be displayed without overlap on a CRT is referred to
as the resolution.
 Typical resolution on high-quality systems is 1280 by 1024, with higher resolutions available
on many systems.
 High-resolution systems are often referred to as high-definition systems.

10
RASTER-SCAN DISPLAYS
 common type of graphics monitor employing a CRT is the raster-scan
display.
 the electron beam is swept across the screen, one row at a time, from top to bottom.
 Each row is referred to as a scan line.
 As the electron beam moves across a scan line, the beam intensity is turned on and off (or set
to some intermediate value) to create a pattern of illuminated spots.
 Picture definition is stored in a memory area called the refresh buffer or frame buffer.
 where the term frame refers to the total screen area.

11
 Refresh buffer holds the set of color values for the screen points.
 Stored values are then retrieved from the refresh buffer and used to control the intensity of the
electron beam as it moves from spot to spot across the screen.
 Each screen spot that can be illuminated by the electron beam is referred to as a pixel or pel
(picture element).
 Raster systems are commonly characterized by their resolution, which is the number of pixel
positions that can be plotted.
 Another property of video monitors is aspect ration.
 Number of horizontal points to vertical points(vice versa).

12
 For a simple black-and-white system, each screen point is either on or off, so only one bit per
pixel is needed to control the intensity of screen positions.
 Up to 24 bits per pixel are included in high-quality systems , which can require several
megabytes of storage for the frame buffer,
 Depending on the resolution of 1024 by 1024 requires 3 megabytes of storage for the refresh
buffer.
 The number of bits per pixel in a frame buffer is sometimes referred to as either the depth of
the buffer area or the number of bit planes.

13
 Refresh rates are described in units of cycles per second, or Hertz(Hz), where a cycle
corresponds to one frame. (e.g 60 Hz)
 At the end of each scan line, the electron beam returns to the left side of the screen to begin
displaying the next scan line.
 The return to the left of the screen , after refreshing each scan line, is called the horizontal
retrace of the electron beam.
 And at the end of each frame , the electron beam returns to the
top left corner of the screen (vertical retrace) to begin the next frame.

14
15
RASTER-SCAN SYSTEMS
 Interactive raster-graphics systems typically employ several processing units.
 In addition to the CPU, a special-purpose processor, called the video controller or display
controller, is used to control the operation of the display device.

16
 The frame buffer can be anywhere in the system memory, and the video controller accesses
the frame buffer to refresh the screen.
Video Controller
 A fixed area of the system memory is reserved for the frame buffer, and the video controller is
given direct access to the frame-buffer memory.
 Frame-buffer locations, and the corresponding screen positions, are referenced in Cartesian
coordinates.
 In an application programs, we use the commands within a graphics software package to set
coordinate positions for displayed objects relative to the origin of the cartesian reference
frame.

17
COMMONLY USED ORGANIZATION
FOR RASTER SYSTEMS

18
BASIC VIDEO-CONTROLLER REFRESH
OPERATIONS
 Initially, the x register is set to 0 and y
register is set to the value for the top scan
line.
 X increment by one until it reaches end of
scan line and y decrement by one at the
end of each scan line.
 After cycling through all pixels along the
bottom scan line,
 the video controller resets the registers to
the first pixel position on the top scan line
and the refresh process starts over.

19
RASTER-SCAN DISPLAY PROCESSOR

 display processor, sometimes referred to as a graphics controller or a display coprocessor.

 The purpose of the display processor is to free the CPU from the graphics chores.
 A major task of the display processor is digitizing a picture definition given in an application
program into a set of pixel values for storage in the frame buffer.
 This digitization process is called scan conversion.

20
 Graphics commands specifying straight lines and other geometric objects are scan converted
into a set of discrete points, corresponding to screen pixel positions.
 Scan converting a straight-line segment, for example, means that we have to locate the pixel
positions closest to the line path and store the color for each position in the frame buffer.
 Characters can be defined with rectangular pixel grids.

21
22
RANDOM-SCAN DISPLAYS
 In random scan systems CRT electron beams 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.
 Random-scan monitors are also referred to as vector displays(or stroke-writing displays or
calligraphic displays).
 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.

23
 To display a specified picture, the system cycles through the set of commands in the display
file, drawing each component line in turn.
 When a small set of lines to be displayed, each refresh cycle is delayed to avoid very high
refresh rates, which could burn out the phosphor.
 Random-scan systems were designed for line-drawing applications, such as architectural and
engineering layouts.
 Since picture definition is stored as a set of line-drawing instructions rather than as a set of
intensity values for all screen points, vector displays generally have higher resolutions than
raster systems.

24
RANDOM SCAN DISPLAY

25
FLAT-PANEL DISPLAYS
 The term flat-panel display refers to a class of video devices that have reduced volume,
weight, and power requirements compared to a CRT.
 A significant feature of flat-panel displays is that they are thinner than CRTs, and we can hang
them on walls or wear them on our wrists.
 We can separate flat-panel displays into two categories: emissive displays and non emissive
displays.
 The emissive displays (or emitters) are devices that convert electrical energy into light.
 Plasma panels, thin-film electroluminescent displays, and light-emitting diodes are examples
of emissive displays.

26
 Nonemissive displays (or nonemitters) use optical effects to convert sunlight or light from
some other source into graphics patterns.
 The most important example of a nonemissive flat-panel display is a
liquid-crystal device.
 Plasma panels, also called gas-discharge displays, are 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 conducting ribbons is built into the other glass panel.

27
 Firing voltages applied to an intersecting pair of horizontal and vertical conductors cause the gas at the
intersection of the two conductors to break down into a 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 (at the intersections of the conductors) 60 times per second.

28
GPU(GRAPHICS PROCESSING
UNIT)
 Modern day computer has dedicated graphics processing Unit(GPU) to produce images for the
display, with its own graphics memory(or Video RAM or VRAM)
 A pixel has two properties: a color and a position. Color is expressed in RGB(Red-Green-
Blue) components- typically 8 bits per component or 24 bits per pixel(or true color).
 The number of color-bits per pixel is called the depth(or precision) of the display.
 The number of rows by columns of the rectangular grid is called the resolution of the display,
 which can range from 640x480 (VGA), 800x600 (SVGA), 1024x768 (XGA) to 1920x1080
(FHD), or even higher.

29
DOUBLE BUFFERING AND
VSYNC
 tearing a condition in which the screen shows parts of the old frame and parts of the new
frame.
 Tearing could be resolved by using so-called double buffering.
 Instead of using a single frame buffer, modern GPU uses two of them: a front buffer and a
back buffer.
 The display reads from the front buffer, while we can write the next frame to the back buffer.
 When we finish, we signal to GPU to swap the front and back buffer( know as buffer swap or
page flip)

30
 Double buffering alone does not solve the entire problem, as he buffer swap might occur at
inappropriate time, for example, while the display is in the middle of displaying the old frame.
 Swapping of frames at inappropriate time can be resolved via the so called vertical
synchronization(or Vsync) at the end of the raster scan.
 When we signal to the GPU to do a buffer swap, the GPU will wait till the next VSynx to
perform the actual swap, after the entire current frame is displayed.
 The most important point is: When the VSync buffer-swap is enabled, you cannot refresh the
display faster than the refresh rate of the display!!!

31
3D GRAPHICS RENDERING
PIPELINE
 A pipeline, in computing terminology, refers to a series of processing stages in which the
output from one stage is fed as the input of the next stage.
 With massive parallelism, pipeline can greatly improve the overall throughput.
 In computer graphics, rendering is the process of producing image on the display from model
description.
 The 3D Graphics Rendering Pipeline accepts description of 3D objects in terms of vertices of
primitives(such as triangle, point, line and quad), and produces the color-value for the pixels
on the display.

32
STAGES OF 3D GRAPHICS
RENDERING

33
STAGES of 3D rendering pipeline consists of the following main stages:

I. Vertex processing: process individual fragments

II. Rasterization convert each primitive(connected vertices) into a set of fragments. A
fragment can be treated as a pixel in 3D spaces which is aligned with the pixel grid, with
attributes such as position, color, normal and texture
III. Fragment processing : process individual fragments
IV. Output merging combine the fragments of all primitives( in 3D space) into 2D color -pixel
for the display.

34
PRIMITIVES
 The inputs to the graphics rendering pipeline are geometric primitives( such as triangle, point,
line or quad) which is formed by one or more vertices.
 OpenGL supports three classes of geometric primitives: points, line segments and closed
polygons.
 Each vertex is associated with its attributes such as the position , color, normal and texture.
 OpenGL provides 10 primitives.
 Sphere 3D box and pyramid are not primitives. They are typically assembled using primitive
triangle or quad.

35
10 PRIMITIVES

36
VERTICES
Recall that a primitive is made up of one or more vertices. A vertex, in computer graphics, has
these attributes:
I. Position in 3D space V=(x, y, z): typically expressed in floating point numbers.
II. Color: expressed in RGB (Red-Green-Blue) or RGBA (Red-Green-Blue-Alpha)
components. The component values are typically normalized to the range of 0.0 and 1.0 (or
8-bit unsigned integer between 0 and 255). Alpha is used to specify the transparency, with
alpha of 0 for totally transparent and alpha of 1 for opaque.

37
III. Vertex-Normal N=(nx, ny, nz): We are familiar with the concept of surface normal,
where the normal vector is perpendicular to the surface.
 In computer graphics, however, we need to attach a normal vector to each vertex, known
as vertex-normal.
 Normals are used to differentiate the front- and back-face, and for other processing such as
lighting.
 Right-hand rule (or counter-clockwise) is used in OpenGL. The normal is pointing outwards,
indicating the outer surface (or front-face).
IV. Texture T=(s, t): In computer graphics, we often wrap a 2D image to an object to make
it seen realistic. A vertex could have a 2D texture coordinates (s, t), which provides a
reference point to a 2D texture image.

38
39
PIXEL VS. FRAGMENT
 Pixels refers to the dots on the display, which are aligned in a 2-dimensional grid of a certain
rows and columns corresponding to the display's resolution.
 A pixel is 2-dimensional, with a (x, y) position and a RGB color value .
 The purpose of the Graphics Rendering Pipeline is to produce the color-value for all the pixels
for displaying on the screen, given the input primitives.

40
 In order to produce the grid-aligned pixels for the display, the rasterizer of the graphics
rendering pipeline, as its name implied, takes each input primitive and perform raster-
scan to produce a set of grid-aligned fragments enclosed within the primitive.
 A fragment is 3-dimensional, with a (x, y, z) position. The (x, y) are aligned with the 2D
pixel-grid.
 The z-value (not grid-aligned) denotes its depth. The z-values are needed to capture the
relative depth of various primitives,
 so that the occluded objects can be discarded (or the alpha channel of transparent objects
processed) in the output-merging stage.

41
Z-BUFFER AND HIDDEN-SURFACE REMOVAL

 z-buffer (or depth-buffer) can be used to remove hidden surfaces (surfaces blocked by other

surfaces and cannot be seen from the camera).
 The z-buffer of the screen is initialized to 1 (farthest) and color-buffer initialized to the
background color. For each fragment (of each primitive) processed, its z-value is checked
against the buffer value.
 If its z-value is smaller than the z-buffer, its color and z-value are copied into the buffer.
 Otherwise, this fragment is occluded by another object and discarded. The fragments can be
processed in any order, in this algorithm.

42
End of chapter 2

43