CS 354 Understanding Color

  • 865 views
Uploaded on

CS 354 Computer Graphics …

CS 354 Computer Graphics

University of Texas, Austin

February 21, 2012

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
865
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
57
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 9. Porter-Duff Composite Operators
  • 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
  • 15. Aliased Jagged artifacts
  • 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