Computer Graphics using OpenGL,
3rd Edition
F. S. Hill, Jr. and S. Kelley
Chapter 9.1 – 9.3
Tools for Raster Displays
S. M. Lea
University of North Carolina at Greensboro
© 2007, Prentice Hall
Raster Displays
• Images are composed of arrays of pixels
displayed on a raster device.
• Two main ways to create images:
– Scan and digitize an existing image.
– Compute a value for each pixel procedurally.
• The result may be stored as a pixmap, a
rectangular array of color values.
Scan Conversion (Rasterization)
• Determines individual pixel values.
• Rasterization in the GL graphics pipeline:
Scan Conversion (2)
• Graphics pipeline actually produces
fragments: a color, a depth, and a texture
coordinate pair for each vertex.
– A number of processing steps and tests are
performed on the fragments before they are
written to the screen.
• We can also perform operations on
images on the screen using the fragment
operations portion of the pipeline.
Manipulating Pixmaps
• Pixmaps may be stored in regular memory
or in the frame buffer (off-screen or onscreen).
• Rendering operations that draw into the
frame buffer change the particular pixmap
that is visible on the display.
Pixmap Operations: Copying
Pixmap Operations: Copying
• glReadPixels () reads a portion of the
frame buffer into memory.
• glCopyPixels() copies a region in one part
of the frame buffer into another region of
the frame buffer.
• glDrawPixels() draws a given pixmap into
the frame buffer.
• We can also copy a pixmap from memory
to memory.
Scaling Pixmaps
• glPixelZoom(float sx, float sy);
– Sets scale factors in x and y
– Any floating point values are allowed for sx
and sy, even negative ones. The default
values are 1.0.
– The scaling takes place about the current
raster position, pt.
• Scale factors are applied to the image
drawn from a pixmap, not to the pixmap.
Scaling Pixmaps (2)
• Roughly, the pixel in row r and column c of
the pixmap will be drawn as a rectangle of
width sx and height sy screen pixels, with
lower left corner at screen pixel (pt.x + sx *
r, pt.y + sy * c).
• More precisely, any screen pixels whose
centers lie in this rectangle are drawn in
the color of this pixmap pixel.
Example
• Six scaled versions of the mandrill (scale factors
sx = -1.5, -1.0, -0.5, 1.5, 1.0, 0.5.)
• To produce each image the new value of sx was
set, and glPixelZoom(sx, 1); glutPostRedisplay();
was executed.
Pixmap Operations (3)
• We may rotate a pixmap.
• We may compare two pixmaps – e.g., to
detect tumors
• We can describe regions within a pixmap
as circles, squares, and so on.
• We may fill the interior of a region with a
color.
Pixmap Data Types
• A pixmap has a certain number of rows
and columns, and each pixel in the array
has its color stored according to certain
rules.
– Bitmap: pixel = bit, 0 or 1 (black or white)
– Gray-scale bitmap: pixel = byte, representing
gray levels from 0 (black) through 255 (white)
– Pixel contains an index into a lookup table
(LUT); usually index is a byte
Pixmap Data Types (2)
– RGB pixmap contains 3 bytes, one each for
red, green, and blue
– RGBA pixmap contains 4 bytes, one each for
red, green, blue, and alpha (transparency)
• Code: start by defining a color:
struct RGB { public: unsigned char r, g, b; };
// Holds one color triple
Pixmap Data Types (3)
• OpenGL represents a pixmap as an array
pixel of pixel values stored row by row
from bottom to top and across each row
from left to right.
• RGBpixmap class uses this storage
mechanism as well (code in Fig. 9.3).
• Code uses GL functions to implement
class functions.
Pixmap Data Types (3)
• Default RGBpixmap constructor: make empty
pixmap.
• Constructor creates a pixmap with r rows and c
columns.
• setPixel() sets a specific pixel value.
• getPixel() reads a specific pixel value.
• draw() copies pixmap to frame buffer, placing
lower left corner at current raster position.
– set current raster position using glRasterPos2i (x, y);
Pixmap Data Types (4)
• read() copies from frame buffer to memory
– Lower left corner is at (x,y), and wid and ht
specify the size to be read.
• copy() does a read followed by a draw,
without creating an intermediate pixmap
– The region with lower left corner at (x,y), wid
by ht in size, is copied to the region whose
lower left corner is at the current raster
position.
Pixmap Data Types (5)
• readBMPFile() reads an image stored as a
(24-bit) BMP file into the pixmap,
allocating storage as necessary.
• writeBMPFile() creates a (24-bit) BMP file
that contains the pixmap.
– Code for both of these functions is given
online at the book’s companion website.
Pixmap Application
• Fig. 9.4 shows code for an application to
use pixmaps controlled by mouse and
keyboard.
– BMP files are copied into 2 pixmaps.
– One image is displayed at the initial raster
position; a left mouse click draws it again at
the current mouse position.
Pixmap Application (2)
– Pressing s toggles between the 2 images.
– Pressing r reads a 200 x 200 area of the
screen and replaces the first pixmap by these
values.
– Right mouse click clears screen.
• The SDL can use RGBpixmaps. See the
companion website for code.
Examples
• Writing and scaling BMP text to the
screen: 4 x 6, 6 x 8, 8 x 12, 12 x 16
Examples (2)
• Window scrolling: blank line replaces
bottom, moving all lines up one.
Examples (3)
• Redrawing screen after menu use:
Scaling Pixmaps
• Scale by s: output has s times as many
pixels in x and in y as input; if s is an
integer, scale with pixel replication to
enlarge. 6 x 8 to 12 x 16
Scaling Images (2)
• To reduce by, for example, 1/3: take every
third row and column of the pixmap.
• This method is usually not satisfactory.
– Instead, we should average the values of the
9 pixels in each non-overlapping 3 x 3 array,
and use that value for the pixel.
Rotating Images
• Pixmaps may rotated by any amount.
• Rotating through 90o, 180o, 270o is simple:
create a new pixmap and copy pixels from
the original to the appropriate spot in the
new pixmap.
Rotating Images
• Other rotations are difficult. Simplest
approach: pixel in transformed image is
set to color of pixel it was transformed
from in original.
• This usually leads to bad results. You
really should average overall pixels which
transform (in part) to this pixel.
Rotating Images (2)
Combining Pixmaps
• Pixmaps are usually combined pixel by
pixel (using corresponding pixels).
– Average 2 images: add the corresponding
pixels and divide result by 2 ([A+B]/2)
– Image differences: Subtract pixel in second
image from corresponding pixel in first ([AB]/2)
– Boolean image: pixel = 1 if first image brighter
than second, 0 else: A > B
Combining Pixmaps (2)
• Weighted average: (1 – f)*A + f*B for some
fraction f < 1.0.
– Allows "dissolving" one image into another as
f is varied from 0 to 1.
Read-Modify-Write
• When pixmap C is formed by combining
pixmaps A and B, it may be stored in a
new pixmap C or in one of the original
pixmaps.
– C = A operation B or A = A operation B
• OpenGL supplies an efficient operation for
this when A is the frame buffer.
Alpha Channel and Image Blending
• Blending allows you to draw a partially
transparent image over another image.
• We use the alpha value, the fourth
component in specifying colors.
– Alpha may have values in the range [0, 255].
– 0 represents total transparency and 255
represents total opacity.
– It is usually used as α/255, to give a value in
[0.0, 1.0].
Alpha Channel and Image Blending
(2)
• Code: struct RGBA { public: unsigned char
r, g, b, a; };
• To blend 2 images, let a be the alpha
value in A and use B = aA + (1- a)B
separately for each color (R, G, B).
Example
• Dragon has a = 255; mask has a = 128;
rest have a = 0.
Code for Blending
• RGBpixmap must be extended to
RGBApixmap.
• Then use B.draw(); A.blend();
Tools for Setting and Using the
Alpha Channel (2)
• glBlendFunc may have arguments other
than GL_SRC_ALPHA and
GL_ONE_MINUS_SRC_ALPHA.
– DST (destination) can replace SRC (source)
– GL_ZERO and GL_ONE may also be used
– using GL_DST_ALPHA and GL_ZERO
multiplies each color component of a source
pixel by the level of the corresponding
component in the destination.
Example: Cursor Viewing
Tools for Setting and Using the
Alpha Channel
• glColor4f (r, g, b, a); a ranges from 0.0
(total transparency) to 1.0 (total opacity)
– Fourth value (a) assigns an alpha value to all
subsequently defined vertices.
• Quadruples refl = [r, g, b, a] may be used
in glMaterialfv (GL_FRONT,
GL_DIFFUSE, refl) to make materials
partially transparent.
Logical Combinations of Pixmaps
• Logical operations on pixmaps are used to
combine pixmaps in various ways.
• glEnable(GL_COLOR_LOGIC_OP);
• glLogicOp (operator);
• Operator values are on the next slide.
OpenGL Logical Operators
Effects of Logical Operations
• Left to right
and top to
bottom:
• A; B;
• A or B;
• A xor B;
• A nand B;
• A and B.
Application: Rubberbanding Lines
and Rectangles
• Rubber-banding allows a user to draw a
line or rectangle with the mouse and be
able to see intermediate versions.
• The user may adjust the line or rectangle
to where it really should be.
• The line or (one) corner of the rectangle is
attached to a fixed point, called the pivot.
Application: Rubberbanding Lines
and Rectangles (2)
• The rubber-banded figures must be
continually erased and redrawn
• XOR drawing draws the line or rectangle
the first time it is invoked, but if you draw
again in XOR mode, the line is erased.
Application: Rubber-banding Lines
and Rectangles (3)
Application: Rubberbanding Lines
and Rectangles (4)
• Code
Application: Rubberbanding Lines
and Rectangles (5)
• Code (continued)
BitBlt Operation
• BitBlt (bit block-transfer) is a hardware
operation which combines the draw, read,
and copy operations.
– Simplest form: source rectangle of pixels
copied to destination rectangle of same size,
either in memory or on the screen, using
some combination operation between the
pixels if desired: D = D operation S.
– The destination is clipped to the BitBlt's
clipping rectangle.