Download Session 14

Perception, Illusion and VR
HNRS 299, Spring 2008
Lecture 14
Introduction to Computer Graphics
1
What is a Graphics file?
moon.gif
GIF89a¶ˇÃˇˇôˇˇfˇˇ3ˇˇÊøß5뢑Zµ´T¨Yß6 ;≥ YØh7^
„Ÿ•Möù;r€ê π Ñ+˜`À≥t €Ω´w!PÅ|≈Bå[8∞cƒw€ée‹±/‚ƒç?Ã6≥C ߬=<
∞f™ú¡z.kyÊ^“°O”uJÿÙ^≥d%äîÕ r‰êäC~Àÿvo¥©U
moon.gif ?
2
Storage of Graphic Images
• Graphics are stored as 1's and 0's on the disk or in the
computer's random access memory (RAM).
• The numbers form a code that a web browser or graphics
application interprets to display the graphic on the monitor.
• Computer displays are composed of many dots, known as
picture elements (pixels).
• The numeric code in an image file specifies the color of
each pixel in the image.
3
Counting in Base 10
In the decimal number system (base 10), we use 10 digits 0 - 9.
We count until we run out of digits, and then add a new place with
value 10.
0 1 2 3 4 5 6 7 8 9 10
place value = 1 = 100 place value = 10 = 101
We continue to count, adding 1 to the 10's place every 10th number.
When we run out of digits for the 10's place, we add a new place
with value 102 (or 100).
... 98 99 100
place value = 100 = 102
4
Counting in Binary
With binary numbers, we have only 2 digits to work with (0 and
1), so we add places more frequently.
Each new place has a value that is a power of two.
Decimal
0
1
2
3
4
5
6
7
8
Binary
0
1
10
11
100
101
110
111
1000
Note: Each 1 or 0 is called
a binary digit or bit.
5
Base 10 vs. Base 2
In base 10, each place represents a power of 10:
4173 = 4 x 103 + 1 x 102 + 7 x 10 + 3 x 100
In base 2, each place represents a power of 2:
10110 = 1 x 24 + 0 x 23 + 1 x 22 + 1 x 2 + 0 x 20 = 22
Practice:
Convert 110110 from binary to decimal.
6
Resolution
•The number of pixels on the screen determines the resolution of
the image.
•More pixels per inch implies better resolution and better image
quality.
•Older PC's had resolutions of 800 pixels x 600 pixels. Older
Macs had resolutions of 640 pixels x 480 pixels.
•Newer PC's and Macs have much higher resolutions (e.g. 1152
x 768).
7
Resolution affects Image Size
•The more pixels there are per inch (ppi) the smaller each pixel is.
•Image sizes are specified in terms of pixels. So the same image
will appear smaller on a monitor with a higher resolution.
Increasing resolution decreases the image size.
8
Bit Depth
•The number of colors each pixel can assume contributes to
image quality.
•The bit depth of an image is the number of bits used to specify
color for that image. The bit depth determines how many colors
can be shown.
•Black and white monitors have 2 colors. Only one bit is needed
to specify color (bit depth = 1).
•A bit depth of n allows representation of 2n colors.
9
Changing Bit Depth
Some images don't need a large bit depth:
Bit depth 8
Bit depth 4
Bit depth 1
Smaller bit depths help to keep the file size (in kb or mb) small.
This makes it faster to download the image file.
10
Bit Depth and Image Quality
For more complex images, higher bit depth leads to better
resolution:
Bit depth = 32 (16.7 million colors)
11
Indexed Color
With indexed color, the computer stores a table of colors (256
colors for bit depth of 8). Each pixel is given a value between 0
and 255, which corresponds to one of the colors in the table.
12
RGB Uses Hexadecimal
Numbers
The RGB system uses hexadecimal (base 16) numbers.
To count in base 16, we use the letters A - F to stand for decimal equivalents
of 11 - 15.
Base 10
0
1
2
...
9
10
11
12
13
14
15
16
Base 16
0
1
2
...
9
A
B
C
D
E
F
10
Base 10
...
255
256
Base 16
...
FF
100
162 = 256
13
Converting from Binary to
Hexadecimal
Every 4 bits represents 1 hexadecimal digit.
To convert from binary to Hexadecimal, group the bits into sets of
four (from right to left) and find the corresponding hexadecimal digit
for each set of 4 bits.
1011 0011
B
3
1101 0110
?
?
14
RGB (Red, Green, Blue) Color
In the RGB color system, each pixel is given a specified amount
of red, green and blue (between 0 and 255).
The color value is written in Hexadecimal, using 2 digits for
each color:
#FF0000
#00FF00
#0000FF
#FFFFFF
#000000
Red
Green
Blue
?
?
#880066 Purple
15
Image File Compression
Images on the web are stored as separate files that must be
downloaded from the server to the client to be viewed.
If the image file size is large, it will take a long time to
download. Therefore, it is important to try to keep the file
size as small as possible without losing much image quality.
Ways to reduce file size:
1. Reduce the size of the image (in pixels)
2. Reduce the resolution of the image.
3. Reduce the bit depth of the image
4. Use image file compression (GIF or JPEG)
16
GIF files
•The Graphics Interchange Format (GIF) is excellent for
compressing images with large areas of uniform color.
•It is "lossless", meaning that the original image can be regenerated
with no loss of information.
•GIF supports transparency in images.
•GIF supports animations (animated GIF's)
•This format is limited to 256 colors.
17
JPEG compression
•The JPEG (Joint Photographic Experts Group) compression
method works well for complex images, such as photographs.
•JPEG supports millions of colors (up to a bit depth of 24).
•JPEG is "lossy", meaning that the original image cannot be
regenerated exactly from the original. Some information is lost in
the conversion to JPEG.
18
Computer Graphics in VR
In virtual reality applications, the graphics are often computed
as the program runs.
The color value for each pixel is stored in computer memory
(RAM)
Values for each pixel on the monitor are stored in the frame
buffer.
If we are using 24 bit color, each pixel needs 24 bits.
There are 8 bits in a byte, so each pixel needs 3 bytes.
If the screen is 600 x 800 resolution, how many pixels are there?
How many bytes are needed to store color values for the entire
screen?
19
Computing the Pixel Values
Computer graphics are computed in the following stages:
1) Build 3D models of objects in the world.
2) Specify Lighting and Material properties.
3) Transform the modeled objects to desired positions.
4) Project the 3D model onto the 2D image plane
5) Rasterize the image (convert it to pixels).
20