Introduction to Computer Graphics - Cguopengl3e - Notes

8/3/2019 Introduction to Computer Graphics - Cguopengl3e - Notes

1/19

Chapter 1

Introduction to Computer Graphics[Francis S. Hill, Jr., Stephen M. Kelley. 2006. Computer Graphics Using OpenGL, 3rd Ed.

Prentice Hall. ISBN: 0131496700.]

GOALS OF THE CHAPTER

To provide an overview of the computer graphics field. To describe the important input and output graphics devices.

Preview

Section 1.1 introduces the area of computer graphics, and Section 1.2 gives a number ofexamples of how computer graphics are used today. Section 1.3 looks at the primitive ingredientsthat make a computer generated picture. In particular, Section 1.3.4 introduces the notion of a

raster image that is used throughout the book. In Section 1.4 we describe a number of graphicsdisplay devices that are in common use today, and Section 1.5 surveys various input devices thatare used in interactive graphics applications.

1.1 What is Computer Graphics?

Computer graphics are pictures that are generated by a computer.

FIGURE 1.1 A ray-traced image including reflections and shadows. (Courtesy of SvenMaerivoet)

Hardware tools used for computer graphics include- video monitors:- graphics cards: ATI, NVIDIA- input devices: keyboard, mouse, data glove, trackball, and so on.

Software tools used for computer graphics include- operating system: Windows, Unix (Linux), Mac OS- programming languages: C/C++, Java, Visual Basic, C#, and so on.- graphics libraries/API: OpenGL, DirectX, and so on.

Computer graphics often means the whole field of study that involves hardware and softwaretools and the pictures they produce.

The graphics special interest groups are

1


2/19

- SIGGRAPH: http://www.siggraph.org.- The ACM Transactions on Graphics [TOG] http://tog.acm.org/(ACM: The Association for Computing Machinery)- The IEEE Computer Graphics and Applicationshttp://www.computer.org/portal/web/cga/home IEEE Xplore

(IEEE: The Institute of Electrical and Electronics Engineers)

1.2 Where Computer-Generated Pictures Are Used

Some applications of computer graphics are

1.2.1 Art, Entertainment, and Publishing

Computer Games

FIGURE 1.2 A screen shot from a 3D computer-based game. (Courtesy of High Moon Studios,Inc.)

FIGURE 1.4 A screen shot of Wolfenstein 3D. (Courtesy of iD Software)

Movie Production, Animation, and Special Effects Browsing on the World Wide Web

2
http://www.siggraph.org/http://tog.acm.org/http://tog.acm.org/http://www.computer.org/portal/web/cga/homehttp://ieeexplore.ieee.org/xpl/RecentIssue.jsp?punumber=38http://ieeexplore.ieee.org/xpl/RecentIssue.jsp?punumber=38http://ieeexplore.ieee.org/xpl/RecentIssue.jsp?punumber=38http://www.computer.org/portal/web/cga/homehttp://tog.acm.org/http://www.siggraph.org/


3/19

FIGURE 1.5 Screenshot of a page from the World Wide Web. (Courtesy of Intangible Inc.)

Slide, Book, and Magazine Design

FIGURE 1.6 Example slide for an educational presentation.

Paint systems: MS Paint, Adobe Photoshop, zBrush, and so on.

FIGURE 1.7 Screenshot of a paint system. (Courtesy of zBrush)

1.2.2 Computer Graphics and Image Processing

The main task in computer graphics is to create pictures and images, synthesizing them basedon some description or model, in a computer. The main task in image processing is to improve or alter images that were created elsewhere,perhaps digitized from photographs or captured by a video recorder.

3


4/19

FIGURE 1.8 Enhancing a scanned image: a) origin, b) enhanced.

1.2.3 Monitoring a Process

Highly complex systems like factories, power plants, and air traffic control systems must becarefully monitored; often there must be a human in the loop to watch out for impending trouble.

A status display must give the operator up-to-the moment information to be interpreted instantly.Measurements are made of the system every second or as needed, and the data are transmitted tothe monitoring station, converted to graphical information, and presented to the operator.

1.2.4 Displaying Simulations

The classic simulation example is a flight simulator.

FIGURE 1.9 Simulation of the control panel of an actual airplane. (Courtesy of hegyi)

Computer graphics has the ability to display objects as if they already physically exist, when inactuality they are only models inside a computer.

1.2.5 Computer-Aided Design: CAD

A wireframe drawing is the shape of an object that is rendered by connected lines. Example:Figure 1.14c. Computer-aided Architectural Design (CAAD)

4


5/19

FIGURE 1.10 A floor plan of a hospital. (Courtesy of Carling Animal Hospital & emaARCHITECTURE Inc. Ottawa Ont.)

1.2.6 Scientific Analysis and Volume Visualization

FIGURE 1.11 Display of complex scientific data.

Volume Visualization: Graphics is used to display huge amounts of data (e.g., weatherpatterns).

FIGURE 1.12 View of the human brain using volume visualization. (Courtesy of Dr. RichardRubin, UMASS-Amherst)

5


6/19

FIGURE 1.13 Display by Mathematica of a) a complex mathematical surface, and b) a

mathematically defined solid object.

1.3 Elements of Pictures Created in Computer Graphics

Output primitives are- points- lines- polylines, polygons- text- filled regions- raster images

The attributes of a graphic primitive are the characteristics that affect how it appears, such asdrawing color, point size, line thickness, line pattern (e.g., solid, dash, dotted).

1.3.1 Polylines

FIGURE 1.14 a) A polyline drawing of a dinosaur, b) a plot of a mathematical function, c) awireframe rendering of a 3D object.

6


7/19

A polyline is a sequence of connected line segments.

FIGURE 1.15 A curved line made up of straight line segments.

Pictures made up of polylines are sometimes called line drawings.

FIGURE 1.16 An example of polyline.

If the first and last points of a polyline are connected by an edge, the polyline is called apolygon. If, in addition, no two edges cross, the polygon is called simple.

FIGURE 1.17 Examples of polygons.

Attributes of Lines and Polylines: Important attributes of a polyline are the drawing color,

thickness, and pattern (solid, dashed, dotted).

FIGURE 1.18 Polyline with different attributes.

7


8/19

1.3.2 Text

FIGURE 1.20 Some examples of text drawn graphically.

Two display modes in graphics devices are text mode and graphics mode.

Text Attributes: important attributes of text are typeface (font), color, size, spacing, andorientation.

FIGURE 1.21 Some examples of fonts.

FIGURE 1.22 A character shape defined by a) a polyline and by b) a pattern of dots.

1.3.3 Filled Regions

The filled region (sometimes called fill area) primitive is a shape filled with some color orpattern. The boundary of a filled region is often a polygon.

8


9/19

FIGURE 1.23 Examples of filled polygons.

Figure 1.24 shows the use of filled regions to shade the different faces of a 3D object(shading).

FIGURE 1.24 Filling polygonal faces of 3D objects to suggest proper shading.

1.3.4 Raster Images

[Rafael C. Gonzalez, Richard E. Woods. 2007. Digital Image Processing. 3rd Ed. Prentice Hall.

ISBN: 013168728X.]

A raster imageIis stored in a 2-dimensional array (matrix) sizedHW. The element located atrow i and column j is called pixels (short for picture elements) and denoted as pij orI[i][j],where 0 iHand 0 jW.-

FIGURE 1.25 a) A raster image of chess piece, b) a magnification of the image. (Courtesy ofAndrew Slater)

9
http://www.imageprocessingplace.com/DIP-3E/dip3e_main_page.htmhttp://www.imageprocessingplace.com/DIP-3E/dip3e_main_page.htm


10/19

FIGURE 1.26 A simple figure represented as a bitmap (or pixel map).

Three principal ways of creating a raster image are:

1. Hand-designed images

2. Computed images3. Scanned images

FIGURE 1.27 a) A collection of lines and text, b) magnification of part a, having jaggies, c)individual pixels visible in an extreme close up.

FIGURE 1.28 A scanned image.

10


11/19

FIGURE 1.29 Three successive blow-ups of the kitten image: a) three times enlargement, b) sixtimes enlargement, and c) twelve times enlargement.

FIGURE 1.30 Examples of image enhancement.

FIGURE 1.31 a) The embossed image, b) geometrically distorted image.

1.3.5 Representation of Gray Shades and Color for Raster Images[Rafael C. Gonzalez, Richard E. Woods. 2007. Digital Image Processing. 3rd Ed. Prentice Hall.ISBN: 013168728X.]

Pixel depth is the number of bits needed to represent gray levels/values of an image. Since ann-bit quantity has 2n possible values, there can be 2n gray levels in an image with pixel depth n.The most common values ofn:

11
http://www.imageprocessingplace.com/DIP-3E/dip3e_main_page.htmhttp://www.imageprocessingplace.com/DIP-3E/dip3e_main_page.htm


12/19

1 bit/pixel produces 2 gray levels (pij {0, 1}): binary image 8 bits/pixel produce 256 gray levels (0 pij 255): grayscale image

FIGURE 1.32 a) A bilevel image of a cursor, and b) its bitmap.

Grayscale Raster Images

Monochrome Lena Grayscale Lena Color Baboon

Effect of Pixel Depth: Grayscale Quantization

FIGURE 1.34 The image of Figure 1.28 reduced to a) 6 bits/pixel, and b) 3 bits/pixel.

12


13/19

FIGURE 1.35 The image of Figure 1.28 reduced to a) 2 bits/pixels and b) 1 bit/pixel.

Color Raster Images

Each pixel in a color image has a color value, a numerical value that somehow represents a

color. There are a number of ways to associate numbers and colors, but one of the most commonis to describe a color as a combination of amounts of red, green, and blue light. Each pixel valueis a 3-tuple, such as (R, G, B) = (23, 14, 51), that prescribes the intensities of the red, green, andblue light components in that order, where 0 R, G, B 255. Color depth is the number of bits used to represent the color of each pixel. The colors red,green, and blue are called primaries. Each value in the (red, green, blue) 3-tuple has a certainnumber of bits, and the color depth is the sum of these values. A color depth of three allows onebit for each component. For instance, the pixel value (0, 1, 1) means that the red component isoff, but both green and blue are on. In most displays the contributions from each component areadded together, so (0, 1, 1) would represent the addition of green and blue light, which is perceived as cyan. Since each component can be on or off, there are eight possible colors, as

tabulated in Figure 1.36. As expected, equal amounts of red, green, and blue, (1, 1, 1), producewhite.

FIGURE 1.36 A common correspondence between color value and perceived color.

A color depth of three rarely offers enough precision for specifying the value of eachcomponent, so larger color depths are used. Because a byte is such a natural quantity tomanipulate on a computer, many images have a color depth of twenty-four, or 8 bits per primary.

13


14/19

Each pixel then can have 224 or over 2 billion colors. Such images are known as true colorimages and have as good color reproduction as the eye can perceive.

1.4 Graphics Display Devices

1.4.1 Line Drawing Displays

Video displays that produce line drawings are called vector, random-scan, or calligraphicdisplays.

1.4.2 Raster Displays

Most displays used today for computer graphics are raster displays. The most familiar is thevideo monitor connected to a personal computer or workstation (see Figure 1.38).

FIGURE 1.38 a) A video monitor on a PC, b) flat screen displaying x-rays.

Raster devices have a display surface on which the image is presented. The surface isorganized as a certain #, say 480, of rows and a certain #, say 640, of columns. Such displayshave a built-in coordinate system, as shown in Figure 1.39, that associates a given pixel in animage with a given physical position on the display surface. The horizontal coordinate sxincreases from left to right, and the vertical coordinate sy increases from top to bottom. Thisupside-down coordinate system is common in raster devices.

FIGURE 1.39 The built-in coordinate system for the surface of a raster display.

14


15/19

A planar point in a screen coordinate system (abscissa, ordinate) = (x,y) is the point (x,H-y)in a window coordinate system, whereHis the screen height. Raster displays are always connected one way or another to a frame buffer, a region ofmemory sufficiently large to hold all of the pixel values for the display (i.e., to hold the bitmap).

The frame buffer may be physical memory on-board the display, or it may reside in the hostcomputer. Alternatively, a graphics card installed in a personal computer might house thememory required for the frame buffer. Figure 1.40 suggests how an image is created and displayed. The graphics program is stored insystem memory and is executed instruction by instruction by the central processing unit (CPU).The program computes an appropriate value for each pixel and loads it into the frame buffer.

FIGURE 1.40 Block diagram of a computer with raster display.

A scan controller takes care of the actual display process. It runs autonomously (rather thanunder program control) and does the same thing pixel after pixel. It causes the frame buffer tosend each pixel through a converter to the appropriate physical locations on the display surface.The converter takes a pixel value such as 01001011 and converts it to the corresponding color-value quantity that produces a spot of color on the display.

The Scanning Process

Figure 1.41 provides more detail on the scanning process.

FIGURE 1.41 Scanning out an image from the frame buffer to the display surface.

Video Monitors

15


16/19

Many video monitors are based on a CRT (cathode-ray tube).

FIGURE 1.42 Operation of a color video monitor display system.

DACs (digital-to-analog converters) convert logical values like 01 into actual voltages. Thecorrespondence between digital input values and output voltages is shown in Figure 1.43, where

Max is the largest voltage level the DAC can produce.

Input Voltage/Brightness00 0 * Max01 0.333 * Max10 0.666 * Max11 1 * Max

FIGURE 1.43 Input-output characteristic of a 2-bit DAC.

Scanning proceeds row by row through the frame buffer, and each row provides pixel valuesfor one scanline across the face of the CRT. The order of scanning is usually left to right along ascanline and from top to bottom by scanline (called raster scan order). This convention has givenrise to the habit of numbering scanlines downward with 0 at the top, resulting in upside-downcoordinate systems.

1.4.3 Video Cards/3D Accelerators

16


17/19

FIGURE 1.44 A video card from ATI Technologies. (A color version is available in Plate 5).(Courtesy of ATI)

Graphics card or3D graphics accelerator. This hardware has special circuitry designed torespond very rapidly to requests for data transfer from the CPU to the display. Graphics cards aremore expensive than older display adapters; todays accelerators contain large amounts of on-board memory.

Whenever an image is being formed, the geometric data that define the scene must passthrough a large number of processing steps: OpenGL simply specifies the nature of these stepsand the order in which they must occur. These steps are referred to as the graphics pipeline,which we discuss at various points throughout the book.

1.4.4 Other Raster Display Devices

Other video monitors are flat panel display, liquid crystal display (LCD), plasma paneldisplay, and so on.

17


18/19

FIGURE 1.45 Flat panel displays.

1.5 Graphics Input Primitives and Devices

1.5.1 Types of Logical Input Graphics Primitives

The important logical input primitives are:

String The string device is the most familiar, producing a string of characters and thusmodeling the action of a keyboard. When an application requests a string, the program pauseswhile the user types it in, followed by a termination character. The program then resumes withthe string stored in memory.ValuatorA valuator produces a real value between 0.0 and 1.0, which can be used to fix thelength of a line, the speed of an action, or perhaps the size of a picture.LocatorA basic requirement in interactive graphics is to enable the user to point to a position onthe display. The locator input device performs this function, because it produces a coordinatepair (x,y). The user manipulates an input device (usually a mouse) in order to position a visible

cursor to some spot and then triggers the choice. This returns to the application the values ofxandy, along with the trigger value.

a) b)

FIGURE 1.48 a) A POS system, b) close-up of touch screen in the POS system. (Courtesy ofAction Systems)

18


19/19

PickThe pick input device is used to identify a portion of a picture for further processing. Somegraphics packages allow a picture to be defined in terms of segments, which are groups ofrelated graphics primitives. The touch screen (shown in Figure 1.48b) of the POS systemdefines segments and gives the user identifying names to expedite the ordering process.

1.5.2 Types of Physical Input Devices

Common input devices are keyboard, mouse with left, right, and middle buttons.

FIGURE 1.49 A graphics tablet. (Courtesy of Wacom Inc.)

a) b) c)

FIGURE 1.50 a) A joystick, b) a trackball, c) data glove (Courtesy of 5DT)

1.6 Chapter Summary

The most widely used of drawing device is the raster video. The major output primitives are points, line segments, polylines, regions, text, and rasterimages. The attributes of output primitives are point size, line thickness, line pattern (solid, dashed, anddotted). Input devices (input primitives) used for interactive computer graphics are keyboard, mouse,joystick, data glove, and so on.

19

Introduction to Computer Graphics - Cguopengl3e - Notes

Documents

Transcript of Introduction to Computer Graphics - Cguopengl3e - Notes