Lecture 4
Pixels, Images and
Image Files
1
• Image files (in particular, the BMP file format)
•In
How
to save
your OpenGL
to a filethe following
this
Lecture,
you images
will learn
•concepts:
How to view image files within your OpenGL program
• How to manipulate pixel data from an image
2
1. Raster Image Files
• A raster image file is a file that stores the mapping of pixel
coordinates to color values. That is, the file saves the color at each
pixel coordinate of the image.
• The saved image files can then be used for various purposes such as
printing, editing, etc.
• Some commonly used image file types are: BMP, TIFF, GIF, and PEG
files.
3
• A raster file contains graphical information about the colors of the
pixels. It also contains information about the image itself, such as its
width and height, format, etc.
• Let us look into the details of a commonly used raster file format
called BMP.
4
The BMP File Format
• The BMP file format is the most common graphics format used on
the Windows platform. The motivation behind creating the BMP
format was to store raster image data in a format independent of the
color scheme used on any particular hardware system.
• The data in BMP files is stored sequentially in a binary format and is
sometimes compressed. Table (1) shows the basic format of the bmp
file which consists of either 3 or 4 parts.
5
Table (1): Parts of the BMP file
6
• The first part of the file is the header. The header contains
information about the type of image (BM, for BMP), its size, and the
position of the actual image data with respect to the start of the file.
• The second part of the BMP file is the image information section.
Information such as the image width and height, type of compression
and the number of colors is contained in the information header.
7
• The fields of most interest are the image width and height, the
number of bits per pixel (which should be 1, 4, 8 or 24), and the
compression type.
• Compressions are techniques applied to files to reduce their size.
Compression techniques are especially useful in the case of raster
image files, which tend to be huge.
8
• The compression types supported by BMP are listed below:
• 0: no compression
• 1: 8 bit run length encoding
• 2: 4 bit run length encoding
• 3: RGB bitmap with mask
9
• The pixel data is stored by rows, left to right within each row. The
rows are stored from bottom to top. The bits of each pixel are packed
into bytes, and each scan line is padded with zeros to be aligned with
a 32-bit boundary.
• Since the bitmap image format is so simple, reading bitmap files is
also very simple. The simplest data to read is 24-bit true color
images.
10
• In this case the image data follows immediately after the information
header. It consists of three bytes per pixel in BGR (yes, it's in reverse)
order.
• Each byte gives the intensity for that color component-0 for no color
and 255 for fully saturated
11
Computer Display Systems
• Logical operations are performed between two data bits (except for
the NOT operation, which is performed on one). Bits can be either 1
or 0 (sometimes referred to as TRUE and FALSE).
• The most basic logical operators that can be performed on these bits
are: AND, OR, XOR, and INVERTINOT. These operators are essential to
performing digital math operations.
12
• Since pixels are nothing more than a series of bits in a buffer, they
can be combined using bitwise logical operations (that is, we apply
the logical operations to each corresponding bit).
• The operations are applied between the incoming pixel values
(source) and those currently into the frame buffer (destination).
13
• The resultant pixel values are saved back in the frame buffer.
• For true color pixels, the operations are performed on the
corresponding bits of the two pixel values, yielding the final pixel
value.
14
• The following figure show the OR operator applied to two
monochrome (single bit) pixel values.
• The bits with value 1 are shown in a white color, and those with value
0 are shown in black.
15
 An AND operator uses the source as a mask to select pixels in the
destination and clears out the rest, as shown in Figure.
 Image compositing, where two images are combined in some
manner to create a third resultant image, make use of these two
operations heavily.
16
• XORing the source over the destination guarantees that the source
stands out.
• This technique is used very often in rubber-banding, where a line or a
rectangle is dragged around by the user on top of a background
image.
Rubber-banding: XOR of a
line with the background
image
17
• The neat thing about an XOR operation is that two XORs generates
the same values back again. That is,
• (A XOR B) XOR A = B.
• This operation is often used to erase a previously drawn image.
• If you have ever tried selecting a number of programs on the
Windows desktop, now you know that it's done are using the XOR
operator.
18
XORing twice
19
• we can use the XOR operation to first draw the smiley face and then
XOR once again to erase only the portion we drew into.
• This technique tends to be a much faster operation than redrawing
the entire background and is therefore used extensively in gaming.
20
• This approach works best for constant color images, since the colors
do get flipped on the first XOR.
• For multicolor images, the XOR operation may result in psychedelic
colors being produced. As a result, XOR should be used only when
the image colors are designed to work for it.
21
lmage Enhancements
 The real value of saving images on the computer is image processing
- what can be done to the image once it is resident on the computer.
 Effects like blending, compositing, and cleaning up pixel values are
used routinely in productions.
 The idea behind image processing is simple: manipulate the pixel
information of the given image using some mathematical functions
and save the result in a new image file.
 We discuss two techniques in this section, namely, compositing and
red-eye removal.
22
1-lmage Compositing
• Compositing is the most widely used operation in the postproduction of films, commercials, and even TV broadcasts.
• The basic operation in image compositing is to overlay one (usually
nonrectangular) image on top of the other.
23
• Various techniques are used for compositing images. One popular
technique is the blue screen process.
• First, the subject is photographed in front of an evenly lit, bright,
pure blue background. Then the compositing process, whether
photographic or electronic, replaces all the blue in the picture with
the background image, known as the background plate.
24
• In reality, any color can be used for the background, but blue has
been favored since it is the complementary color to flesh tone.
• The source and destination images can come from live action images
or be computer generated.
• Jurassic Park employed compositing extensively to composite CGgenerated dinosaurs in front of real live shots.
25
• The essential compositing algorithm is as shown below. It designates
Blue or the desired color as transparent. The source image is copied
on top of a defined destination image as follows:
26
• The only problem, of course, is that "transparent" color can't be used
in the source image.
27
• Another technique for compositing, being used more frequently now
makes use of a mask or stencil. This technique uses logical operations as
follows:
• Create a mask of the image. Many production houses create the mask as
part of the alpha channel of the image. The mask essentially identifies
the desired areas of the source image.
• AND the source with the mask (not always required).
• AND the background with NOT of mask
• OR the results to produce the final composite.
28
Image Composition using masks
29
Red-Eye Treatment
• Image enhancements are possible because we have access to the
actual pixel information of the image.
• we can target specific pixels based on some criteria and then change
their values. You may have used a very common feature in image
processing tools-red-eye removal.
• we load in a smiley face with red eyes. The eyes are made up of
pixels with a color value of (255,0,0). We will target pixels with this
color and change them to blue.
30
• To do this, we first determine the length of each row. Using the
length, we can point to any desired row in the pixmap as the pixelrow variable.
• Then we loop through the columns of pixel values in this row.
• If we determine the pixel value in any column has a red color, we
change it to blue.
31
32
• When you run this code, the display will show a blue-eyed smiley
face! You can save the result to a file to verify that we did indeed
perform red-eye removal.
• This is an oversimplification of the actual mechanics behind red eye
reduction, but you get the idea.
• Now when you use a processing tool to get rid of the reds, you will
know what kind of technology is working in the background.
33