CS 551 / 645: Introductory Computer Graphics Color.
-
Upload
claud-aron-allison -
Category
Documents
-
view
221 -
download
0
Transcript of CS 551 / 645: Introductory Computer Graphics Color.
![Page 1: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/1.jpg)
CS 551 / 645: Introductory Computer Graphics
Color
![Page 2: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/2.jpg)
Administrivia
Changes to assignment 2 Today’s reading material: FvD, Chapter 13 Final Exam
– Monday, December 11th, 2000– 7:00 - 10:00 p.m.– MEC 339– Check your schedule for collisions ASAP!– You will collide if you are taking any of the following:
APMA 109, 111; ITAL 101, 102; LATI 103, 201, 202 SPAN 101, 102, 201, 202
![Page 3: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/3.jpg)
Assignment 2 For use on Windows box
– change .C extension to .cpp extension– remove unistd.h inclusion– remove GL.h and GLU.h inclusion. glut.h includes
these– No memory deallocation eats through memory. If you
care, add deallocation to the ESCAPE key handler. sgi-10 is screwed up. You can compile on another
SGI and run on sgi-10, though Don’t worry about the cat or horse Do zooming with up/down. Ignore left/right.
![Page 4: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/4.jpg)
Assignment 2
Euler angle rotations are bad– Rotate about x, followed by rotate about y,
followed by rotate about z– Example:
Rotate 180 degrees about x A rotation about y will turn in the opposite direction you
expect
You can leave the code the way it is now. We will fix it in future assignments
![Page 5: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/5.jpg)
Color
Next topic: Color
To understand how to make realistic images, we need a basic understanding of the physics and physiology of vision. Here we step away from the code and math for a bit to talk about basic principles.
![Page 6: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/6.jpg)
Basics Of Color
Elements of color:
![Page 7: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/7.jpg)
Basics of Color
Physics: – Illumination
Electromagnetic spectra
– Reflection Material properties Surface geometry and microgeometry (i.e., polished
versus matte versus brushed)
Perception– Physiology and neurophysiology– Perceptual psychology
![Page 8: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/8.jpg)
Physiology of Vision
The eye: The retina
– Rods– Cones
Color!
![Page 9: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/9.jpg)
Physiology of Vision
The center of the retina is a densely packed region called the fovea. – Cones much denser here than the periphery
![Page 10: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/10.jpg)
Physiology of Vision: Cones
Three types of cones:– L or R, most sensitive to red light (610 nm) – M or G, most sensitive to green light (560 nm)– S or B, most sensitive to blue light (430 nm)
– Color blindness results from missing cone type(s)
![Page 11: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/11.jpg)
Physiology of Vision: The Retina
Strangely, rods and cones are at the back of the retina, behind a mostly-transparent neural structure that collects their response.
![Page 12: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/12.jpg)
Perception: Metamers
A given perceptual sensation of color derives from the stimulus of all three cone types
Identical perceptions of color can thus be caused by very different spectra
![Page 13: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/13.jpg)
Perception: Other Gotchas
Color perception is also difficult because:– It varies from person to person– It is affected by adaptation (stare at a light bulb… don’t)– It is affected by surrounding color:
![Page 14: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/14.jpg)
Perception: Relative Intensity
We are not good at judging absolute intensity Let’s illuminate pixels with white light on
scale of 0 - 1.0 Intensity difference of neighboring colored
rectangles with intensities:– 0.10 -> 0.11– 0.50 -> 0.55
will look the same We perceive relative intensities, not absolute
![Page 15: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/15.jpg)
Representing Intensities
Remaining in the world of black and white… Use photometer to obtain min and max
brightness of monitor This is the dynamic range Intensity ranges from min, I0, to max, 1.0 How do we represent 256 shades of gray?
![Page 16: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/16.jpg)
Representing Intensities
Equal distribution between min and max fails– relative change near max is much smaller than near
I0
I0 = I0, I1 = rI0, I2 = rI1= r2I0,…, I255 = rI254 = r255I0
Ex: 4 intensities– 1/8, 1/4, 1/2, 1
![Page 17: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/17.jpg)
Dynamic Ranges
Dynamic Range Max Perceived Display (max / min illum) Intensities, r=1.01
CRT: 50-200 400-530 Photo (print) 100 465 Photo (slide) 1000 700 B/W printout 100 465 Color printout 50 400 Newspaper10 234
![Page 18: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/18.jpg)
Gamma Correction
But most display devices are inherently nonlinear: Intensity = k(voltage)
– I.e., brightness(voltage) != 2*brightness(voltage/2) is between 2.2 and 2.5 on most monitors
Common solution: gamma correction– Post-transformation on intensities to map them to
linear range on display device:– Can have separate for R, G, B
1
xy
![Page 19: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/19.jpg)
Gamma Correction
Some monitors perform the gamma correction in hardware (SGI’s)
Others do not (most PCs) Tough to generate images that look good on
both platforms (i.e. images from web pages)
![Page 20: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/20.jpg)
Halftoning
A technique used in newspaper printing Only two intensities are possible, blob of ink
and no blob of ink But, the size of the blob can be varied Also, the dither patterns of small dots can be
used
![Page 21: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/21.jpg)
Back to color
Color is defined many ways Computer scientists frequently use:
– Hue - The color we see (red, green, purple)– Saturation - How far is the color from gray (pink is
less saturated than red, sky blue is less saturated than royal blue)
– Brightness - How bright is the color
![Page 22: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/22.jpg)
How well do we see color?
What color do we see the best?– Yellow-green at 550 nm
What color do we see the worst?– Blue at 440 nm
Flashback: Colortables (colormaps) for color storage
Can perceive color differences of 10 nm at extremes (violet and red) and 2 nm between blue and yellow
![Page 23: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/23.jpg)
How well do we see color?
128 fully saturated hues can be distinguished Cannot perceive hue differences with less
saturated light. Sensitivity to changes in saturation for a fixed
hue and brightness ranges from 23 to 16 depending on hue.
![Page 24: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/24.jpg)
Color Spaces
Three types of cones suggests color is a 3D quantity. How to define 3D color space?
Idea: shine given wavelength () on a screen, and mix three other wavelengths (R,G,B) on same screen. Have user adjust intensity of RGB until colors are identical:
![Page 25: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/25.jpg)
CIE Color Space
The CIE (Commission Internationale d’Eclairage) came up with three hypothetical lights X, Y, and Z with these spectra:
Idea: any wavelength can be matched perceptually by positive combinations of X,Y,Z
Note that:X ~ R
Y ~ G
Z ~ B
![Page 26: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/26.jpg)
CIE Color Space
The gamut of all colors perceivable is thus a three-dimensional shape in X,Y,Z:
For simplicity, we often project to the 2D plane X+Y+Z=1X = X / (X+Y+Z)
Y = Y / (X+Y+Z)
Z = 1 - X - Y
![Page 27: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/27.jpg)
CIE Chromaticity Diagram (1931)
![Page 28: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/28.jpg)
Device Color Gamuts
Since X, Y, and Z are hypothetical light sources, no real device can produce the entire gamut of perceivable color
Example: CRT monitor
![Page 29: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/29.jpg)
Device Color Gamuts
The RGB color cube sits within CIE color space something like this:
![Page 30: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/30.jpg)
Device Color Gamuts
We can use the CIE chromaticity diagram to compare the gamuts of various devices:
Note, for example, that a color printercannot reproduceall shades availableon a color monitor
![Page 31: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/31.jpg)
Converting Color Spaces
Simple matrix operation:
The transformation C2 = M-12 M1 C1 yields
RGB on monitor 2 that is equivalent to a given RGB on monitor 1
B
G
R
ZZZ
YYY
XXX
B
G
R
BGR
BGR
BGR
'
'
'
![Page 32: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/32.jpg)
Converting Color Spaces Converting between color models can also be
expressed as such a matrix transform:
Note the relative unimportance of blue in computing the Y
YIQ is the color model used for color TV in America. Y is luminance, I & Q are color– Note: Y is the same as CIE’s Y
– Result: backwards compatibility with B/W TV!
B
G
R
Q
I
Y
31.052.021.0
32.028.060.0
11.059.030.0
![Page 33: CS 551 / 645: Introductory Computer Graphics Color.](https://reader030.fdocuments.net/reader030/viewer/2022032723/56649f585503460f94c7e191/html5/thumbnails/33.jpg)
HSV Color Space
A more intuitive color space– H = Hue– S = Saturation– V = Value (or brightness)