CS 354Understanding Color

Mark KilgardUniversity of TexasFebruary 21, 2012

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

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

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

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

CS 354 6

Compositing

Blending operates on pixels Compositing operates on images

Composite image A & image B

CS 354 7

Intra-pixel Regions for Compositing

A ∩ B

A ∩ ~B

~A ∩ B

~A ∩ ~B Source: SVG Compositing Specification

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

CS 354 9

Porter-DuffComposite Operators

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

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

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

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

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

CS 354 15

Aliased

Jaggedartifacts

CS 354 16

Multi-sample8x

Smootherappearance

CS 354 17

Multi-sample Coverage Positions

4x jittered1x(aliased)

8x jittered

4x orthogonal

CS 354 18

Requesting Multisampling in GLUT

glutInitDisplayMode(mask | GLUT_MULTISAMPLE) Or glutInitDisplayString(“rgb double depth samples=4”);

Aliased 8xmultisampling

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

CS 354 20

Adding Light Energy Combining different wavelengths can

produce sensation of color Red + Green + Blue = White

CS 354 21

Subtractive Color

Inks and dyes work by inhibiting coloration Rather than emissive color like displays

CYM(K) Cyan Yellow Magenta (Black)

CS 354 22

Trichromatic Biological Basis

Human retina has three types of cones for sensing color

CS 354 23

Color Blindness

Color isn’t perceived the same by everyone

Top: 25, 45, 8 Bottom: 6, 56

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

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

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

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

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

CS 354 29

NTSC RGB Maxwell Triangle

1

1

r

g

r+g+b=1

r+g=1

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

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

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

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

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

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

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

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

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

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

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?...

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

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