Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation...

52
Color and Graphics Displays Jian Huang CS594

Transcript of Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation...

Page 1: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Color and Graphics Displays

Jian Huang

CS594

Page 2: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Physics

• It’s all electromagnetic (EM) radiation – Different colors correspond to radiation of

different wavelengths – Intensity of each wavelength specified by

amplitude • Frequency = 2 pi/wavelength

• We perceive EM radiation with in the 400-700 nm range, the tiny piece of spectrum between infra-red and ultraviolet

Page 3: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Visible Light

Page 4: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Color and Wavelength

Most light we see is not just a single wavelength, but a combination of many wavelengths like below. This profile is often referred to as a spectrum, or spectral power distribution.

Page 5: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

3-Component Color

• The de facto representation of color on screen display is RGB. (additive color)

• Some printers use CMY(K), (subtractive color)

• Why?– The color spectrum can be represented by 3

basis functions?

Page 6: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

The Eye

Page 7: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Color is Human Sensation

• Cone and rod receptors in the retina

• Rod receptor is mostly for luminance perception

• 3 different types of cone receptors in the fovea of retina, responsible for color representation. Each type is sensitive to different wavelengths

Page 8: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Cone Receptors

• There are three types of cones, referred to as S, M, and L. They are roughly equivalent to blue, green, and red sensors, respectively.

• Their peak sensitivities are located at approximately 430nm, 560nm, and 610nm for the "average" observer.

Page 9: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Limitation of Knowledge

• We don’t know the precise light sensitivity on each person’s retina.

Page 10: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

So, what is the standard color?

• The basis of comparison is not math!!

• The basis of comparison is human color matching experiments

• 100% mathematically correct light object interaction need to be evaluated at more than 3 points in the spectrum

Page 11: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Main Color Spaces

• CIE XYZ, xyY

• RGB, CMYK

• HSV (Munsell, HSL, IHS)

• Lab, UVW, YUV, YCrCb, Luv,

Page 12: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Differences in Color Spaces

• What is the use? For display, editing, computation, compression, …?

• Several key (very often conflicting) features may be sought after:– Additive (RGB) or subtractive (CMYK)– Separation of luminance and chromaticity– Equal distance between colors are equally

perceivable

Page 13: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

CIE Standard

• CIE: International Commission on Illumination (Comission Internationale de l’Eclairage).

• Human perception based standard (1931), established with color matching experiment

• Standard observer: a composite of a group of 15 to 20 people

Page 14: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

CIE Experiment

Page 15: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

CIE Experiment Result

• Three pure light source: R = 700 nm, G = 546 nm, B = 436 nm.

Page 16: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

CIE Color Space

• 3 hypothetical light sources, X, Y, and Z, which yield positive matching curves

• Y: roughly corresponds to luminous efficiency characteristic of human eye

Page 17: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

CIE Color Space

Page 18: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

CIE xyY Space• Irregular 3D volume shape is

difficult to understand• Chromaticity diagram (the same

color of the varying intensity, Y, should all end up at the same point)

Page 19: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Color Gamut

• The range of color representation of a display device

Page 20: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

RGB (monitors)

• The de facto standard

Page 21: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

The RGB Cube

• RGB color space is perceptually non-linear

• RGB space is a subset of the colors human can perceive

• Con: what is ‘bloody red’ in RGB?

Page 22: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

CMY(K): printing

• Cyan, Magenta, Yellow (Black) – CMY(K)

• A subtractive color model

dye color absorbs reflects

cyan red blue and green

magenta green blue and red

yellow blue red and green

black all none

Page 23: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

RGB and CMY

• Converting between RGB and CMY

Page 24: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

RGB and CMY

Page 25: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

HSV• This color model is based on polar coordinates,

not Cartesian coordinates.• HSV is a non-linearly transformed (skewed)

version of RGB cube– Hue: quantity that distinguishes color family, say red

from yellow, green from blue– Saturation (Chroma): color intensity (strong to weak).

Intensity of distinctive hue, or degree of color sensation from that of white or grey

– Value (luminance): light color or dark color

Page 26: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

HSV Hexcone• Intuitive interface to color

Page 27: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Lab: photoshop

• Photoshop uses this model to get more control over color

• It’s named CIE Lab model (refined from the original CIE model

• Liminance: L

• Chrominance: a – ranges from green to red and b ranges from blue to yellow

Page 28: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Luv and UVW • A color model for which, a unit change in luminance and

chrominance are uniformly perceptibleU = 13 W* (u - uo ); V = 13 W* (v - vo); W = 25 ( 100 Y ) 1/3 - 17

where Y , u and v can be calculated from :X = O.607 Rn + 0.174 Gn + 0.200BnY = 0.299 Rn + 0.587 Gn + 0.114BnZ = 0.066 Gn + 1.116 Bnx = X / ( X + Y + Z )y = Y / ( X + Y + Z )z = Z / ( X + Y + Z )u = 4x / ( -2x + 12y + 3 )v = 6y / ( -2x + 12y + 3 )

• Luv is derived from UVW and Lab, with all components guaranteed to be positive

Page 29: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Yuv and YCrCb: digital video• Initially, for PAL analog video, it is now also used in CCIR

601 standard for digital video • Y (luminance) is the CIE Y primary.

Y = 0.299R + 0.587G + 0.114B • Chrominance is defined as the difference between a color and

a reference white at the same luminance. It can be represented by U and V -- the color differences. U = B – Y; V = R - Y

• YCrCb is a scaled and shifted version of YUV and used in JPEG and MPEG (all components are positive)

Cb = (B - Y) / 1.772 + 0.5; Cr = (R - Y) / 1.402 + 0.5

Page 30: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Examples (RGB, HSV, Luv)

 

Page 31: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Color Matching on Monitors

• Use CIE XYZ space as the standard

• Use a simple linear conversion

• Color matching on printer is more difficult, approximation is needed (CMYK)

Page 32: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Gamut Mapping

• Negative RGB: add white (maintains hue, de-saturate)

• >1 RGB, scale down (in what space?)

• Not a trivial question (sometimes known as tone mapping)

Page 33: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Tone mapping

• Real scene: large range of luminance (from 10 -6 to 10 6 cd/m2 )

• Limitation of the display 1-100 cd/m2

• cd : candela, unit for measuring intensity of flux of light

Page 34: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Gamma Correction

• The phosphor dots are not a linear system (voltage vs. intensity)

Page 35: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Gamma correction

• Without gamma correction, how will (0,255,127) look like?

• Normally gamma is within 1.7 and 2.8

• Who is responsible for Gamma correction?

• SGI does it for you

• PC/Mac etc, you should do it yourself

Page 36: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

No gamma correction

Page 37: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Gamma corrected to 1.7

Page 38: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Residual Gamma or System Gamma

• Systems such as SGI monitor has a gamma of 2.4, but they only gamma correct for 1.7.

• The residue gamma is 2.4/1.7 = 1.4, why?• Depends on how you see it? Bright screen,

dark room causes changes in your eye transfer function too.

• What about web pages? Which screen do you intend for?

Page 39: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

CRT Display

• Cathode Ray Tubes (CRTs)• Most common display device• Evacuated glass bottle• Electrons attracted to focusing anode

cylinder • Vertical and Horizontal deflection plates• Beam strikes phosphor coating on front of

tube

Page 40: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Vector Display

• Oscilloscopes were some of the 1st computer displays, used by both analog and digital computers

• Computation results used to drive the vertical and horizontal axis (x,y), intensity could also be controlled (z)

• Used mostly for line drawings, called vector, calligraphic display

• Display list had to be constantly updated

Page 41: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Raster Display

• TV boom made it cheap

• Entire screen painted 30 times/ sec

• Screen is traversed 60 times/ sec

• Even/ Odd lines on alternate scans, ‘interlace’.

Page 42: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Color CRT

• Requires precision geometry

• Patterned phosphors on CRT face

• Aligned metal shadow mask

• Three electron guns• Less bright than

monochrome CRTs

Page 43: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Pro/Con for Raster CRT Display• Advantages

– Allows solids to be displayed

– Leverages low- cost CRT H/W

– Whole Screen is

constantly updated

•Disadvantages

•Requires screen- sized memory array (frame buffer)

•Discrete spatial sampling (pixels)

•Moire patterns: when shadow- mask and dot- pitch frequencies mismatch

•Convergence (varying angles of approach distance of e-beam across CRT face)

•Limit on practical size (< 40 inches)

•Spurious X- ray radiation

•Occupies a large volume

Page 44: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

LCD Displays

• Liquid Crystal Display

• Organic molecules that remain in crystalline structure without external force, but re-aligns themselves like liquid under external force

• So LCDs realigns themselves to EM field and changes their own polarizations

Page 45: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Passive LCD

• LCD slowly transit between states. • In scanned displays, with a large number of pixels,

the percentage of the time that LCDs are excited is very small.

• Crystals spend most of their time in intermediate states, being neither "On" or "Off".

• These displays are not very sharp and are prone to ghosting.

Page 46: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Active Matrix LCD

• E field is retained by a capacitor so that the crystal remains in a constant state.

• Transistor switches are used to transfer charge into the capacitors during scanning.

• The capacitors can hold the charge for significantly longer than the refresh period

• Crisp display with no shadows.

• More expensive to produce.

Page 47: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Plasma Display

• Basically fluorescent tubes• High- voltage discharge excites gas mixture (He,

Xe), upon relaxation UV light is emitted, UV light excites phosphors

•Large view angle

•Large format display

•Less efficient than CRT, more power

•Large pixels: 1mm (0.2 mm for CRT)

•Phosphors depletion

Page 48: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Raster Displays

• Display synchronized with CRT sweep• Special memory for screen update• Pixels are the discrete elements displayed• Generally, updates are visible

Page 49: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Double Buffer

• Adds a second frame buffer• Swaps during vertical blanking• Updates are invisible• Costly

Page 50: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

Memory Rasterizer

• Maintains a copy of the screen (or some part of it) in memory

• Relies on a fast copy• Updates are nearly invisible

Page 51: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

True Color and Indexed Color FB

Page 52: Color and Graphics Displays Jian Huang CS594. Physics It’s all electromagnetic (EM) radiation –Different colors correspond to radiation of different wavelengths.

High Color FB

• Popular PC/( SVGA) standard (popular with Gamers)

• Each pixel can be one of 2^ 15 colors• Can exhibit worse quantization (banding) effects

than indexed- color