CS 354 Understanding Color
-
Upload
mark-kilgard -
Category
Technology
-
view
1.215 -
download
2
description
Transcript of CS 354 Understanding Color
![Page 1: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/1.jpg)
CS 354Understanding Color
Mark KilgardUniversity of TexasFebruary 21, 2012
![Page 2: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/2.jpg)
CS 354 2
Today’s material In-class quiz Lecture topics
Understanding color Assignment
Project 1 is due at midnight today Reading
Chapter 7, pages 366-388 (on Texturing) Homework #3
Look for on the web site today http://www.cs.utexas.edu/~mjk/teaching/cs354_s12/hw3.pdf Due Tuesday, February 28
![Page 3: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/3.jpg)
CS 354 3
My Office Hours
Tuesday, before class Painter (PAI) 5.35 8:45 a.m. to 9:15
Thursday, after class ACE 6.302 11:00 a.m. to 12:00
![Page 4: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/4.jpg)
CS 354 4
Last time, this time
Last lecture, we discussed Project 1
which is due today This lecture
Finish off compositing Color representation
The lecture meant for last Thursday
![Page 5: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/5.jpg)
CS 354 5
Daily Quiz
1. When programming in GLUT…
Rather than drawing within a GLUT input callback, programs should call glutPostRedisplay instead and let the display callback do the rendering. TRUE or FALSE.
On a sheet of paper• Write your EID, name, and date• Write #1, #2, #3, followed by its answer
2. Multiple choice: To compute the per-facet normal of a triangle with vertex positions P0, P1, and P2, I should do which of the following:
a) compute a cross productof the difference vectors P1-P0 and P2-P0
b) average all the per-vertex normals surrounding the triangle with positions P0, P1, and P2
c) Read the facet normals from the Wavefront .obj file
![Page 6: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/6.jpg)
CS 354 6
Compositing
Blending operates on pixels Compositing operates on images
Composite image A & image B
![Page 7: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/7.jpg)
CS 354 7
Intra-pixel Regions for Compositing
A ∩ B
A ∩ ~B
~A ∩ B
~A ∩ ~B Source: SVG Compositing Specification
![Page 8: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/8.jpg)
CS 354 8
Compositing Digital Images
Classic 1984 SIGGRAPH paper introduces compositing operators Porter and Duff
Porter-Duff Composite Operators Rca = f(Ac,Bc)×Aa×Ba + Y×Ac×Aa×(1-Ba) + Z×Bc×(1-Aa)×Ba Ra = X×Aa×Ba + Y×Aa×(1-Ba) + Z×(1-Aa)×Ba
![Page 9: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/9.jpg)
CS 354 9
Porter-DuffComposite Operators
![Page 10: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/10.jpg)
CS 354 10
Porter & Duff ModesOperation f(Ac,Bc) X Y ZClear 0 0 0 0Src Ac 1 1 0Dst Bc 1 0 1
Src-Over Ac 1 1 1Dst-Over Bc 1 1 1Src-In Ac 1 0 0Dst-In Bc 0 1 0Src-out 0 0 1 0Dst-out 0 0 0 1Src-atop Ac 1 0 1Dst-atop Bc 1 1 0Xor 0 0 1 1
Porter & Duff blend modes
![Page 11: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/11.jpg)
CS 354 11
Porter & Duff Modes ExpandedOperation f(Ac,Bc) X Y Z Blend modeClear 0 0 0 0 0Src Ac 1 1 0 AcaDst Bc 1 0 1 BcaSrc-Over Ac 1 1 1 Aca+(1-Aa)×BcaDst-Over Bc 1 1 1 Bca+(1-Ba)×AcaSrc-In Ac 1 0 0 Aca×BaDst-In Bc 0 1 0 Bca×AaSrc-out 0 0 1 0 (1-Ba)×AcaDst-out 0 0 0 1 (1-Aa)×BcaSrc-atop Ac 1 0 1 Aca×Ba+(1-Aa)×BcaDst-atop Bc 1 1 0 (1-Ba)×Aca+Aa×BcaXor 0 0 1 1 Aca×(1-Ba)+(1-Aa)×Bca
Uncorrelated blend mode expansion of Porter & Duff blend modes
![Page 12: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/12.jpg)
CS 354 12
Porter & Duff for glBlendFuncOperation Blend mode srcFactor dstFactorClear 0 GL_ZERO GL_ZERO
Src Aca GL_ONE GL_ZERO
Dst Bca GL_ZERO GL_ONE
Src-Over Aca+(1-Aa)×Bca GL_ONE GL_ONE_MINUS_SRC_ALPHA
Dst-Over Bca+(1-Ba)×Aca GL_ONE_MINUS_DST_ALPHA
GL_ONE
Src-In Aca×Ba GL_DST_ALPHA GL_ZERO
Dst-In Bca×Aa GL_ZERO GL_SRC_ALPHA
Src-out (1-Ba)×Aca GL_ONE_MINUS_DST_ALPHA
GL_ZERO
Dst-out (1-Aa)×Bca GL_ZERO GL_ONE_MINUS_SRC_ALPHA
Src-atop Aca×Ba+(1-Aa)×Bca GL_DST_ALPHA GL_ONE_MINUS_SRC_ALPHA
Dst-atop (1-Ba)×Aca+Aa×Bca GL_ONE_MINUS_DST_ALPHA
GL_DST_ALPHA
Xor Aca×(1-Ba)+(1-Aa)×Bca GL_ONE_MINS_DST_ALPHA GL_ONE_MINUS_SRC_ALPHA
![Page 13: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/13.jpg)
CS 354 13
Hardware Blending supports all Porter-Duff Blend Modes
Using prior slide’s table Your OpenGL (or Direct3D) program can implement any of
Porter-Duff blend modes Examples
Src-Over glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA)
Dst-In glBlendFuc(GL_ZERO, GL_SRC_ALPHA)
Dst-Atop glBlendFunc(GL_ONE_MINUS_DST_ALPHA, GL_DST_ALPHA)
Conclusion: GPU hardware “blend functions” can configure all the sound Porter-Duff compositing algebra blend modes Compositing algebra theory “maps” well to GPU functionality Assumption: using pre-multiplied alpha colors
![Page 14: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/14.jpg)
CS 354 14
Additional Blend Modes
Additional blend modes Since Porter-Duff’s composite operators,
Adobe introduced further artistic blend modes Part of Photoshop, Illustrator, PDF, Flash, and
other standards Part of the vocabulary of digital artists now
Examples ColorDodge, HardLight, Darken, etc.
Define with alternate f(Ac,Bc) function f should compute “weight” in [0,1] range
![Page 15: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/15.jpg)
CS 354 15
Aliased
Jaggedartifacts
![Page 16: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/16.jpg)
CS 354 16
Multi-sample8x
Smootherappearance
![Page 17: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/17.jpg)
CS 354 17
Multi-sample Coverage Positions
4x jittered1x(aliased)
8x jittered
4x orthogonal
![Page 18: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/18.jpg)
CS 354 18
Requesting Multisampling in GLUT
glutInitDisplayMode(mask | GLUT_MULTISAMPLE) Or glutInitDisplayString(“rgb double depth samples=4”);
Aliased 8xmultisampling
![Page 19: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/19.jpg)
CS 354 19
Color Perception
Physics of light Light = electromagnetic radiation Continuous range of frequencies
Color is something perceived Human visual system = trichromatic
Visible light is perceived as 3-dimensional In mathematical sense, rather than spatial sense
Intensity of perceived as luminance or brightness
![Page 20: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/20.jpg)
CS 354 20
Adding Light Energy Combining different wavelengths can
produce sensation of color Red + Green + Blue = White
![Page 21: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/21.jpg)
CS 354 21
Subtractive Color
Inks and dyes work by inhibiting coloration Rather than emissive color like displays
CYM(K) Cyan Yellow Magenta (Black)
![Page 22: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/22.jpg)
CS 354 22
Trichromatic Biological Basis
Human retina has three types of cones for sensing color
![Page 23: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/23.jpg)
CS 354 23
Color Blindness
Color isn’t perceived the same by everyone
Top: 25, 45, 8 Bottom: 6, 56
![Page 24: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/24.jpg)
CS 354 24
Tristimulus Values
The human visual center has three cones with different wavelength sensitivity curves S1(), S2(), and S3()
For a color C(), the cones output the tristimulus values
dCST )()(11
dCST )()(22
dCST )()(33
C()
T1, T2, T3cones
optic nerve
![Page 25: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/25.jpg)
CS 354 25
Implications ofThree Color Theory
Metamerism Different spectral power distributions
But with the same tristimulus values Get perceived as same color
Thus a display (CRT, LCD, film) must only produce the correct tristimulus values to match a color
Is this possible? Not always Different primaries (different sensitivity
curves) in different systems
![Page 26: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/26.jpg)
CS 354 26
Limitations onColor Reproduction
The sensitivity curves of the human are not the same as those of physical devices Human: curves centered in blue, green, and
green-yellow CRT: RGB Print media: CMY or CMYK
Implies some possible colors cannot be faithfully reproduced by display devices Such colors are outside the device’s gamut
![Page 27: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/27.jpg)
CS 354 27
Tristimulus Coordinates
TTTTt
321
11
TTTTt
321
22
For any set of primaries, define
TTTTt
321
33
1ttt 321 0,,1 ttt 321
Note
![Page 28: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/28.jpg)
CS 354 28
Maxwell Triangle
Project onto 2D: chromaticity space
1
1T1 + T2+T3 =1
1
color solid
t1
t2
1
1
t1 +
t2 =1
possible colors
Looks at just chromaticity
![Page 29: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/29.jpg)
CS 354 29
NTSC RGB Maxwell Triangle
1
1
r
g
r+g+b=1
r+g=1
![Page 30: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/30.jpg)
CS 354 30
Producing Other Colors
However colors producible on one system (its color gamut) is not necessarily producible on any other
If we could produce all the pure spectral colors in the 350-750 nm range, we can produce all others by adding spectral colors With real systems (CRT, film), we cannot produce
the pure spectral colors We can project the color solid of each system
into chromaticity space (of some system) to see how close we can get
![Page 31: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/31.jpg)
CS 354 31
XYZ Color Space
Reference system in which all visible pure spectral colors can be produced
Theoretical systems asthere are no correspondingphysical primaries
Standard referencesystem Established experimentally
in 1930s
![Page 32: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/32.jpg)
CS 354 32
Real Color Spaces
Most correspond to real primaries National Television Systems Committee
(NTSC) RGB matches phosphors in CRTs LCDs mimic the CRT color space
Film both additive (RGB) and subtractive (CMY) for positive and negative film
Print industry CMYK (K = black) K used to produce sharp crisp blacks Example: ink jet printers
![Page 33: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/33.jpg)
CS 354 33
Color Gamuts
spectral colors printer colors
CRT colors
350 nm
750 nm
600 nm
producible color on CRT but not on printer
producible color on both CRT and printer
unproducible color
![Page 34: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/34.jpg)
CS 354 34
YIQ Color Space for TV
NTSC Transmission Colors Standard definition
Here Y is the luminance Arose from need to separate brightness from
chromatic information in TV broadcasting
Note luminance shows high green sensitivity
BGR
0.3110.523-0.2120.321-0.275-0.596
0.1140.5870.299
QIY
![Page 35: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/35.jpg)
CS 354 35
Intuitive Color Spaces
HSL – Hue, Saturation, Lightness Intuitive for artists
doing color selection Whereas RGB is very
unintuitive
Hue 3D space for HSL HSV – Hue, Saturation,Value color picker
![Page 36: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/36.jpg)
CS 354 36
Gamma Correction
Intensity vs. CRT voltage is nonlinear I = cV
Can use a lookup table to correct Human brightness response is logarithmic
Equal steps in gray levels are not perceived equally
Can use lookup table to correct CRTs cannot produce a full black
Limits contrast ratio
![Page 37: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/37.jpg)
CS 354 37
Non-linear ColorDisplay Issues
Problem: PC display devices have non-linear (sRGB) display gamut Color shading, filtering, and blending with linear math looks bad
Conventional
rendering(uncorrect
ed color)
Gamma correct(sRGB rendered)
Softer andmore natural
Unnaturallydeep facial
shadows
NVIDIA’s Adriana GeForce 8 Launch Demo
![Page 38: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/38.jpg)
CS 354 38
What is sRGB? A standard color space
Intended for monitors, printers,and the Internet
Created cooperatively by HP and Microsoft; now web standard
Essentially standardized and specified de-facto color behavior
Non-linear, roughly gamma of 2.2 Intuitively “encodes more dark values”
OpenGL and GPUs have first-class rendering support for sRGB sRGB texture formats, with proper filtering sRGB blending, with proper conversions
sRGB chromaticity
![Page 39: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/39.jpg)
CS 354 39
So why sRGB? Standard Windows Display is Not Gamma Corrected
25+ years of PC graphics, icons, and images depend on not gamma correcting displays sRGB textures and color buffers compensates for this
“Expected” appearance ofWindows desktop & icons
but 3D lighting too dark
Wash-ed out desktop appearance ifcolor response was linear
but 3D lighting is reasonable
Gamma 1.0
Gamma2.2
linearcolor
response
![Page 40: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/40.jpg)
CS 354 40
Relevance to Graphics
Color theory is a big topic Physics, biology, psychology, and color
display/reproduction device technology converge
It’s a bigger deal than you think Pantone is an entire business devoted to color
matching What’s key for graphics practitioners?...
![Page 41: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/41.jpg)
CS 354 41
Key Color Observations Representing color as RGB triples basically
works Human perception underlies accurate color
reproduction and rendering The eye adjusts to large and dynamic ranges of
brightness Display devices don’t have this range; reality does
Practical devices reproduce only a subset of visible colors—and have limited dynamic range
Multiple color spaces in practice Each adapted to its purpose
![Page 42: CS 354 Understanding Color](https://reader033.fdocuments.in/reader033/viewer/2022052206/53fcaf308d7f72384b8b4830/html5/thumbnails/42.jpg)
CS 354 42
Next Lecture Texture mapping
How can we add surface detail from images? As usual, expect a short quiz on today’s lecture
Assignments Project 1 is due at midnight today Reading
Chapter 7, pages 366-388 (on Texturing) Homework #3
Look for on the web site today http://www.cs.utexas.edu/~mjk/teaching/cs354_s12/hw3.pdf Due Tuesday, February 28