CS 354 Understanding Color
Download as PPT, PDF•8 likes•1,662 views
This document summarizes a lecture on understanding color. It discusses color representation, compositing, Porter-Duff blend modes, hardware blending, additional blend modes, color perception, tristimulus values, color spaces like RGB, CMYK and HSL, gamma correction, and the relevance of color theory to graphics. It also announces an in-class quiz, upcoming assignment and lecture topics.
![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](https://image.slidesharecdn.com/10color-120222001810-phpapp02/85/CS-354-Understanding-Color-14-320.jpg)
CS 354 Understanding Color
- 1. CS 354 Understanding Color Mark Kilgard University of Texas February 21, 2012
- 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
- 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
- 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
- 5. Daily Quiz 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 . 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 product of 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 On a sheet of paper Write your EID, name, and date Write #1, #2, #3, followed by its answer
- 6. Compositing Blending operates on pixels Compositing operates on images Composite image A & image B
- 7. Intra-pixel Regions for Compositing A ∩ B A ∩ ~B ~A ∩ B ~A ∩ ~B Source: SVG Compositing Specification
- 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
- 10. Porter & Duff Modes Porter & Duff blend modes 1 1 0 0 1 1 0 1 1 0 1 0 Y 0 0 0 Clear 1 0 0 Xor 0 1 Bc Dst-atop 1 1 Ac Src-atop 1 0 0 Dst-out 0 0 0 Src-out 0 0 Bc Dst-In 0 1 Ac Src-In 1 1 Bc Dst-Over 1 1 Ac Src-Over 1 1 Bc Dst 0 1 Ac Src Z X f(Ac,Bc) Operation
- 11. Porter & Duff Modes Expanded Uncorrelated blend mode expansion of Porter & Duff blend modes 1 0 1 1 0 0 0 1 1 1 0 0 Z 1 1 0 0 1 1 0 1 1 0 1 0 Y 0 0 0 Clear Aca×(1-Ba)+(1-Aa)×Bca 0 0 Xor (1-Ba)×Aca+Aa×Bca 1 Bc Dst-atop Aca×Ba+(1-Aa)×Bca 1 Ac Src-atop (1-Aa)×Bca 0 0 Dst-out (1-Ba)×Aca 0 0 Src-out Bca×Aa 0 Bc Dst-In Aca×Ba 1 Ac Src-In Bca+(1-Ba)×Aca 1 Bc Dst-Over Aca+(1-Aa)×Bca 1 Ac Src-Over Bca 1 Bc Dst Aca 1 Ac Src Blend mode X f(Ac,Bc) Operation
- 12. Porter & Duff for glBlendFunc GL_ONE_MINS_DST_ALPHA GL_ONE_MINUS_DST_ALPHA GL_DST_ALPHA GL_ZERO GL_ONE_MINUS_DST_ALPHA GL_ZERO GL_DST_ALPHA GL_ONE_MINUS_DST_ALPHA GL_ONE GL_ZERO GL_ONE GL_ZERO srcFactor Aca×(1-Ba)+(1-Aa)×Bca (1-Ba)×Aca+Aa×Bca Aca×Ba+(1-Aa)×Bca (1-Aa)×Bca (1-Ba)×Aca Bca×Aa Aca×Ba Bca+(1-Ba)×Aca Aca+(1-Aa)×Bca Bca Aca 0 Blend mode GL_ONE_MINUS_SRC_ALPHA GL_DST_ALPHA GL_ONE_MINUS_SRC_ALPHA GL_ONE_MINUS_SRC_ALPHA GL_ZERO GL_SRC_ALPHA GL_ZERO GL_ONE GL_ONE_MINUS_SRC_ALPHA GL_ONE GL_ZERO GL_ZERO dstFactor Clear Xor Dst-atop Src-atop Dst-out Src-out Dst-In Src-In Dst-Over Src-Over Dst Src Operation
- 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
- 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
- 16. Multi-sample 8x Smoother appearance
- 17. Multi-sample Coverage Positions 4x jittered 1x (aliased) 8x jittered 4x orthogonal
- 18. Requesting Multisampling in GLUT glutInitDisplayMode (mask | GLUT_MULTISAMPLE ) Or glutInitDisplayString (“rgb double depth samples=4”); Aliased 8x multisampling
- 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
- 20. Adding Light Energy Combining different wavelengths can produce sensation of color Red + Green + Blue = White
- 21. Subtractive Color Inks and dyes work by inhibiting coloration Rather than emissive color like displays CYM(K) Cyan Yellow Magenta (Black)
- 22. Trichromatic Biological Basis Human retina has three types of cones for sensing color
- 23. Color Blindness Color isn’t perceived the same by everyone Top : 25, 45, 8 Bottom : 6, 56
- 24. Tristimulus Values The human visual center has three cones with different wavelength sensitivity curves S 1 ( ), S 2 ( ), and S 3 ( ) For a color C( ), the cones output the tristimulus values C( ) T 1 , T 2 , T 3 cones optic nerve
- 25. Implications of Three 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
- 26. Limitations on Color 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
- 27. Tristimulus Coordinates For any set of primaries, define Note
- 28. Maxwell Triangle Looks at just chromaticity Project onto 2D: chromaticity space 1 1 T 1 + T 2 +T 3 =1 1 color solid t 1 t 2 1 1 t 1 + t 2 =1 possible colors
- 29. NTSC RGB Maxwell Triangle 1 1 r g r+g+b=1 r+g=1
- 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
- 31. XYZ Color Space Reference system in which all visible pure spectral colors can be produced Theoretical systems as there are no corresponding physical primaries Standard reference system Established experimentally in 1930s
- 32. Real Color Spaces Most correspond to real primaries N ational T elevision S ystems C ommittee (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
- 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
- 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
- 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
- 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
- 37. Non-linear Color Display Issues Problem : PC display devices have non-linear (sRGB) display gamut Color shading, filtering, and blending with linear math looks bad Conventional rendering (uncorrected color) Gamma correct (sRGB rendered) Softer and more natural Unnaturally deep facial shadows NVIDIA’s Adriana GeForce 8 Launch Demo
- 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
- 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 of Windows desktop & icons but 3D lighting too dark Wash-ed out desktop appearance if color response was linear but 3D lighting is reasonable Gamma 1.0 Gamma 2.2 linear color response
- 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?...
- 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
- 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