EECS487:InteractiveComputerGraphics

Lecture16:•  PhongIlluminationModel

•  Shading

PhongIlluminationModel

Alocalilluminationmodel•  onebounce:light→surface→viewer

LightingasinglepointAtthepoint:

n:surfacenormal(orientationofsurface) l:lightvector(surfacetolight)v:viewingvector(surfacetoeye)θ:lightangleofincidence

ϕ:viewingangle v

n

lθ ϕ

PhongIlluminationModelApproximatesurfacecolorassumofthreecomponents:•  anidealdiffusecomponent•  aglossy/blurredspecularcomponent•  anambientterm

+

=

=

+

sd diffuselightintensity

ss specularlightintensity

sa ambientlightintensity

Lightsources:

SurfaceReflectionCoefficients

ma ambientcolorreflection

md diffusecolorreflection

ms specularcolorreflection

mshi shininess(blurriness)

me emissivecolorintensity

ApproximateBRDFs:notphysicallybasedModifysurfacecolorbychangingreflectioncoefficientsbasedon:• materialtype• surfacefinish• texturemaps• whatlooksgood•  artisticlicense•  trialanderror•  personallibrary

DiffuseExample

Whereisthelight?Where’sthenormaldirectionatthebrightestpoint?

Idealdiffusesurfacereflectslightequallyinalldirections,accordingtoLambert'scosinelaw:•  amountoflightenergythatfallsonsurfaceandgetsreflectedisproportionaltotheincidenceangle,θ

•  perceivedbrightness(reflectance)isviewindependent

IdealDiffuseReflectance

θ

Durand

IdealDiffuseReflectance

Durand

Atthemicroscopiclevel,anidealdiffusesurfaceisaveryroughsurface• microfacetsareorientedinanywhichway•  examples:chalk,clay,surfaceofmoon

Curless

IdealDiffuseModelAmountoflightenergythatfallsonsurfaceisproportionaltoincidenceangle,θ:cd = sd � md cos θFornormalizednandl:cd = sd � md max((n•l), 0)• (n•l) < 0 � cos θ < 0 � θ > 90º,lightsourceisbehindsurface

• whymustnandlbenormalized?

RTR2

�

n

�

l

�

θu·v = u v cosθ ⇒ cosθ = u·v

u v

DiffuseReflectanceandViewingAngleLambert’sCosineLaw:amountoflightenergythatfallsonsurfaceandgetsreflectedisproportionaltoincidenceangle,θi•  cosθi =dotproductoflightvectorwithnormal(bothnormalized)

Shouldn’ttheamountofenergyreflectedalsobeproportionaltoviewingangle,θr?

•  no,whereaslargerθimeansenergyarrivingoverareadA cos θiisspreadacrossthelargerareadA,largerθrsimplymeanscollectingenergyfromthesameareadA,butchannellingitthroughthesmallerareadA cos θr

n

Surface2 Surface1

n

dA

dA cos θθ

π/2 − θ

Recall:sin(π/2–θ) = cosθ

TP3,FvD94

Accountsforhighlightseenonobjectswithsmooth,shinysurfaces,suchas:• metal•  polishedstone•  plastics•  apples•  skin

IdealSpecular/MirrorReflectance

Curless,Zhang

IdealSpecular/MirrorReflectance

Reflectiononlyatmirrorangle•  highlightintensitydependsonviewingdirection

Model:allmicrofacetsofmirrorsurfaceareorientedinthesamedirectionasthesurfaceitself•  examples:mirrors,highlypolishedmetals

Durand

PhongSpecularReflection

Simulatesahighlight

Reflectionangle=incidenceangle=θ

Mostintensespecularreflectionwhenv = r

Howtocomputer?r = −l + 2(n•l)n(inOpenGL,speculartermis0ifl • n = 0)

n

lr

-l

2(n ⋅ l)n (n ⋅ l)n

θ θ φv

rn

l

GlossyReflectorsRealmaterialstendtodeviatesignificantlyfromidealmirrorreflectors⇒highlightandreflectionsareblurry

Alsoknownas:“roughspecular”,“directionaldiffuse”,or“glossy”reflection

(therearenoidealdiffusesurfaceseither…)

Durand

GlossyReflectors

Durand

Simpleempiricalmodel:• weexpectmostofthereflectedlighttotravelinthedirectionoftheidealreflectionray•  butduetovariationsinmicrofacetorientations,someofthelightwillbereflectedjustslightlyofffromtheidealreflecteddirection•  asweangleawayfromthereflectedray,weexpecttoseelesslightreflected

SurfaceRoughness

Perfect Mirror Glossy Surface Less Shiny Surface Diffuse Surface

increasingroughness

specular diffuseSchlick Asvanglesawayfromr,specularreflectionfalls

off,simulating“glossy”reflection:

lessglossy/ moreglossy/blurrymorespecular

Phong“Glossy”ReflectionModel

TP3

v v

Phongspecularmodel:cs = ss � ms cos φ = ss � ms max((r • v), 0)

Phong“Glossy”ReflectionModel

φ

cos φ

v

rn

l

vr

RTR3

MaterialGlossinessToaccountfortheshininessofdifferentmaterial:cs = ss � ms max((r • v), 0)mshi

largermshigivestighterandshinierhighlight,withsuddendropoff,simulatingamoremirror-likesurface

angle

spec

ularin

tens

ity

mshi:

PhongSpecularReflection

larger mshi ,tighterhighlight�

largerm

s ,shinier�

TP3

Backtomicrofacets:• modelsurfacebyacollectionoftinymirrors

•  specularreflectancecomesfrommirrorsorientedhalfwaybetweenlandv, indirectionofh

Blinn-Phong(Blinn-Torrance)Model

Manocha

l n

ω ω

h

v

Modelspecularreflectionwith“halfway”vector(h)insteadofr• considerthemicrofacetthroughpointpthatreflectslightperfectlytotheviewer

• histhenormalofthisplane,itishalfwaybetweenlandv(bydefinition),hnormalized

• anglebetweenhandnisβ; v = rwhenh = n(βisnottheanglebetweenvandr)

• specularreflectionmodeledas:cs = ss � ms (n • h)4mshi = ss � ms (cos β)4mshi

Blinn-Phong

h =l + vl + v

�

l

�

l

�

h

�

p

v

�

n

�

l

�

r

�

p

v

h

β

IlluminationModelsArenderingprocesscanbemodeledasanintegralequationrepresentingthetransportoflightthroughtheenvironment�therenderingequation

Localillumination:anapprox.oftherenderingeqn.•  assumeslightisscatteredonlyonce:lightfromlightsourceisreflectedbyasurfaceandmodulatedonitswaytowardstheeye

Globalillumination:•  lightraystravelingfromlighttosurfacemaybe

•  blockedbyinterveningsurfaces(shadows)or•  bentorscatteredbyinterveningmaterial(refractionandatmosphericeffects)or

•  lightarrivingatasurfacemaycomeindirectlyviaanothersurface(reflectionandcolorbleed)

“Approximates”thecontributionofallindirectilluminationSurfaceuniformlylit•  areaswithnodirectilluminationarenotcompletelydark

•  independentof:•  lightdirection•  surfacenormal•  viewingangle

Spheresrenderedwithambientreflectiononly

PhongAmbientTerm

Phong ρa ρd ρs ρtotal

θ = 60º

θ = 25º

θ = 0º

PuttingItAllTogetherPhongIlluminationModel

ct = masa + (md (n ⋅ l)+ms (r ⋅v)mshi ) f (d)s

Durand

OpenGLLightSourcesglLightfv(lightname,param,value) •  parameters

• GL_AMBIENT • GL_DIFFUSE • GL_SPECULAR • GL_POSITION

• GL_SPOT_DIRECTION • GL_SPOT_CUTOFF • GL_SPOT_EXPONENT

• GL_CONSTANT_ATTENUATION • GL_LINEAR_ATTENUATION • GL_QUADRATIC_ATTENUATION

Turningonthelights:• glEnable(GL_LIGHTING) • glEnable(GL_LIGHT0)

OpenGLLightingandReflectance/* Initialize material property, light source, lighting model, and depth buffer. */ void init(void) { GLfloat mat_specular[] = { 1.0, 1.0, 1.0, 1.0 }; GLfloat mat_shininess[] = { 50.0 }; GLfloat light_position[] = { 1.0, 1.0, 1.0, 0.0 }; glClearColor(0.0, 0.0, 0.0, 0.0); glShadeModel(GL_SMOOTH); glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular); glMaterialfv(GL_FRONT, GL_SHININESS, mat_shininess); glLightfv(GL_LIGHT0, GL_POSITION, light_position); glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glEnable(GL_DEPTH_TEST); }

OpenGLMaterialPropertiesglMaterial(face,param,value) •  face• GL_FRONT • GL_BACK • GL_FRONT_AND_BACK

•  parameters• GL_AMBIENT • GL_DIFFUSE • GL_AMBIENT_AND_DIFFUSE • GL_SPECULAR • GL_SHININESS • GL_EMISSION

SeeRedbookChapter5fortechniquestominimizeperformancecostsassociatedwithchangingmaterialproperties

ChoosingtheParameters

ExperimentwithdifferentparametersettingsAfewsuggestions:• ma + md + ms < 1• useasmallma(~0.1)• trymshi ∈ [0, 100]

material md ms mshi

metal small,colorofmetal large,colorofmetal large

plasticmedium,colorofobject

medium,coloroflight(orwhite)

medium

planet varying 0 0

Curless

TP3

Fornon-metals,e.g.,plastics,highlightcoloriscoloroflight(plasticshasatransparent/whitecoating)

Formetals,e.g.,brass,highlightdependsonsurfacecolor

plastic metal clay

HighlightColor

Apodaca&Gritz

EmissiveTerm

Material’semissiveparameterme• assumednotlightingotherobjects

ct = me +masa + (md (n ⋅ l)+ms (v ⋅r)mshi ) f (d)s

Funkhouser

Surface

AttenuationModelWhereastheambienttermsimulatesindirectlighting,attenuationmodelandfogsimulatescatteringeffect

Intensityattenuation:lightfallsoffthefurtherawayonegetsfromthesource• distinguishesoverlappingsurfaceshavingthesamereflectionparameters

• radiantenergydispersesas1/d2

•  disthedistancefromthelightsourcetosurface•  reasonfortheinversesquarefalloff?

• attenuationfunctionf (d) = 1/(a0+a1d+a2d2)

•  userdefinedconstantsa0 ,a1 ,a2•  sincewe’renotmodelingatmosphericscattering,

1/d2oftenappearstooharsh•  instead,weusef (d) = 1/(a0+a1d)ornoattenuation

Lightingwithattenuation:c’ = f (d )c

d 1

d 2

GlobalAmbientandMultipleLights

Globalambientlightsource:cg = sg � ma•  sgsetwith:glLightModel*(GL_LIGHT_MODEL_AMBIENT,ambient_light)

Multiplelights:

!

ct = cg +me + ca(k ) +

k=1

n

∑ f (d (k ) )(cd(k ) + cs

(k ) ),

k:!light!number,!not!exponentiation

Akenine-Möller02

FogSimpleatmosphericeffect•  alittlebetterrealism

•  helptoconveydistances•  2formsofdepthcueing(ignoringscattering)•  light-to-objectdistanceconveyedbylightattenuation•  object-to-vieweratmosphericscatteringsimulatedbyfog

Fogcoloroffog:cfcolorofsurface:csfogeffect:

cp = f cs + (1 − f ) cf , f ∈ [0,1]Howtocomputef?

•  linear:

•  exponential:

•  exponential-squared:

canalsobeafunctionofheightofftheground

fp =zend − zpzend − zstart

fp = e−d f zp

fp = e−(d f zp )

2

RTR3

!

fp:!fog!factor!at!point!p

zend − zstart : the!foggy!ranged f : fog!density

radial-orrange-based,notsimplyz-based

FoginOpenGL

glEnable(GL_FOG);

glHint(GL_FOG_HINT,GL_[NICEST|FASTEST]);

// per fragment or per vertex

glFog*(GL_FOG_MODE, GL_[LINEAR|EXP|EXP2]); glFog*(GL_FOG_[START|END|DENSITY], param);

glFog*(GL_FOG_COLOR, param);

Tospecifyafogdepthforagivenvertex:

glFog*(GL_FOG_COORD_SRC, GL_FOG_COORD);

glFogCoord*(z);

glVertex(…);

LightingandShadingLighting:computinginteractionbetweenlightandsurfacesofdifferentmaterials,andinteractionwiththegeometryofobjectstodeterminetheluminousintensityreflectedfromaspecified3Dpoint

Shading:performingthelightingcomputationsonpolygonalobjectsandcoloringthepixels

flatshading Gouraudshading Phongshading

RTR3

FlatShadingEntirepolygondisplayedwiththesameintensity• calculateintensityfromthereflectionmodel• usethesurfacenormal(fortriangles)• computeanaveragenormal(for>3vertexpolygons)

Isavalidshadingmodelwhen:• objectistrulyplanar(notanapproximationofacurvedsurface)

• allklightsourcesarefarenoughawaythatn • l(k)

isconstantoverthepolygonsurface• viewingpositionisfarenoughawaythat

n • h isconstantoverthepolygonsurface

In1865,Machdiscoveredthathumaneyesperceiveasurfacewithflatshadingofdifferenthuesashavinga“fluted”aspectduetotheabruptchangeinshadesofcolor(discontinuityinthefirstderivativeoftheshadingfunction)

perceivedsignal

MachBands

measuredsignal

Riesenfeld06

ProblemwithFlatShading:MachBandIllusion

LateralInhibition

MachBandIllusionisduetolateralinhibitionofthehumanvisualsystem:

• neighboringreceptorsareconnected• whenonefires,itinhibitsitsneighborsfromfiring

Effect:•  eyesensitivetodifferencefromsurroundingarea

•  goodforedgeandmotiondetection

Riesenfeld06

GouraudShading

Matchintensityacrosspolygonedges

Linearinterpolationofcoloracrosspolygonsurface

Gouraudshadingalgorithm:• determineaveragenormalateachvertex(averagedoverthenormalsofallpolygonsthatsharethevertex)

• computecolorateachvertexusingtheaveragenormal• linearlyinterpolatecoloracrossasinglepolygonsurface(GL_SMOOTHdoesonlythelaststep!GL_FLATcolorspolygonwiththecolorofthelastvertex)

navg =ni

i=1

n

∑

nii=1

n

∑

n = all polygons that

share the vertex

GouraudShadingExample

1.  Computeaveragenormalateachvertex(1, 2, 3)2. Computecolorsc1,c2,c33.  Computecolorsc4,c5

4. Computecolorcp

Orusebarycentriccoordinates!Steps2-4werecheapenoughtobeimplementedinhardwareevenforfixedpipelineGPU

c4 =

y4 - y2y1 - y2

c1 +y1 - y4y1 - y2

c2

c p =

x5 - xp

x5 - x4c4 +

xp - x4x5 - x4

c5

1

2

3

4 5

p scanline

whenthere’sanabruptchangeintheorientationoftwopolygonsandthere’sdiscontinuityinthe1stderivativeoftheshadingfunctioneffectcanbeamelioratedwithincreasedpolygoncountorPhongshading…

MachBandnotEliminated

Highlightsdependonpolygonalshape

Doesnotcapturehighlightinthemiddleofpolygon•  c1 = 0because(n•h) < 0•  c2 = 0because(n•l) < 0•  anyinterpolationofc1andc2willbe0

Showsupinanimationasflashinghighlightsbetweenframesasorientationofpolygonschange

Limitation:WrongHighlights

c1 = 0 c2 = 0areaofdesired

highlight

Limitation:WrongHighlightsWhydoesGouraudgiveinaccuratesimulationofhighlights?•  coloratvertexmaynotbe(highlight)colorinsidethepolygon

Whatwouldgivethemostaccuratesimulationofhighlights?•  computenormalofactualsurface(notpolygon-approximatedsurface)ateachpixelandcoloraccordingly�veryexpensive!

Phongshading:interpolatenormalofverticesacrosspolygonsurfaceandcoloreachpixelaccordingtointerpolatednormals

PhongShadingAlgorithm:• determineaveragenormalateachvertex• linearlyinterpolateper-pixelnormalacrosssurface

• computecolorforeachpixelusingthevalueoftheapproximatedper-pixelnormal

Phongilluminationmodel≠�Phongspecularreflection≠Phongshading

n = y - y2y1 - y2

n1 +y1 - yy1 - y2

n2�

n1�

n3

�

n2 nscanline

c1 = 0 c2 = 0areaofdesired

highlight

OpenGLLightingandReflectance/* Initialize material property, light source, lighting model, and depth buffer. */ void init(void) { GLfloat mat_specular[] = { 1.0, 1.0, 1.0, 1.0 }; GLfloat mat_shininess[] = { 50.0 }; GLfloat light_position[] = { 1.0, 1.0, 1.0, 0.0 }; glClearColor(0.0, 0.0, 0.0, 0.0); glShadeModel(GL_SMOOTH); // or GL_FLAT

// interpolate color of vertices, but does not// average normals at the vertices

glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular); glMaterialfv(GL_FRONT, GL_SHININESS, mat_shininess); glLightfv(GL_LIGHT0, GL_POSITION, light_position); glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glEnable(GL_DEPTH_TEST); }

WhereinthePipeline?

Framebuffer

VertexProcessing

PrimitiveProcessing

Rasterization

FragmentProcessing

Display

Application vertex colors computed

vertex colors interpolated across polygon (Gouraud shading)

per-pixel Phong shading (expensive)