Lighting - The College of Engineering at the University of ...cs4600/lectures/Wk9_Lighting.pdf• Light that strikes an object is partially absorbed and partially scattered (reflected)

Utah School of Computing Fall 2015

Computer Graphics CS4600 1

Utah School of Computing

Lighting

CS 4600

Fall 2015

Objectives

• Learn to shade objects so their images appear three-dimensional

• Introduce the types of light-material interactions

• Build a simple reflection model---the Phong model--- that can be used with real time graphics hardware

E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012



Why we need shading

• Suppose we build a model of a sphere using many polygons and color it with vertex attributes.We get something like

• But we want


Shading• Why does the image of a real sphere look like

• Light-material interactions cause each point to have a different color or shade

• Need to consider – Light sources– Material properties– Location of viewer– Surface orientation




Scattering

Light strikes A Some scatteredSome absorbed

Some of scattered light strikes BSome scatteredSome absorbed

Some of this scatteredlight strikes A and so on


Rendering Equation

• The infinite scattering and absorption of light can be described by the rendering equation – Cannot be solved in general

– Ray tracing is a special case for perfectly reflecting surfaces

• Rendering equation is global and includes– Shadows

– Multiple scattering from object to object




Rendering Equation



where

is a particular wavelength of light

is time

is the location in space

is the direction of the outgoing light

is the negative direction of the incoming light

is the total spectral radiance of wavelength directed outward along direction at time , from a particular position

is emitted spectral radiance

is the unit hemisphere containing all possible values for

is an integral over

is the bidirectional reflectance distribution function, (BRDF) the proportion of light reflected from to at position , time

and at wavelength

is spectral radiance of wavelength coming inward toward from direction at time

is the weakening factor of inward irradiance due to incident angle, as the light flux is smeared across a surface whose area is larger than the projected area perpendicular to the ray



BRDF: Bidirectional Reflection Distribution Function


BRDF (Green) Composed of

Three Lobes (Blue)

Diffuse Component (Orange)

Global Effects

translucent surface

shadow

multiple reflection




Local vs Global Rendering

• Correct shading requires a global calculation involving all objects and light sources– Incompatible with pipeline model which shades

each polygon independently (local rendering)

• However, in computer graphics, especially real time graphics, we are happy if things “look right”– Exist many techniques for approximating global

effects


Light-Material Interaction• Light that strikes an object is partially absorbed

and partially scattered (reflected)• The amount reflected determines the color and

brightness of the object– A surface appears red under white light

because the red component of the light is reflected and the rest is absorbed

• The reflected light is scattered in a manner that depends on the smoothness and orientation of the surface




Light SourcesGeneral light sources are difficult to work

with because we must integrate light coming from all points on the source


Simple Light Sources

• Point source– Model with position and color

– Distant source = infinite distance away (parallel)

• Spotlight– Restrict light from ideal point source

• Ambient light– Same amount of light everywhere in scene

– Can model contribution of many sources and reflecting surfaces




CS4600

Shading Schemes

Flat Shading: same shade to entire polygon

CS4600

Mach Band Illusion



Surface Types• The smoother a surface, the more reflected

light is concentrated in the direction a perfect mirror would reflected the light

• A very rough surface scatters light in all directions

smooth surface rough surface


Phong Model• A simple model that can be computed rapidly• Has three components

– Diffuse– Specular– Ambient

• Uses four vectors

– To source– To viewer– Normal– Perfect reflector




Ideal Reflector• Normal is determined by local

orientation

• Angle of incidence = angle of relection

• The three vectors must be coplanar

r = 2 (l · n ) n - l


Why does this work?

Lambertian Surface

• Perfectly diffuse reflector

• Light scattered equally in all directions

• Amount of light reflected is proportional to the vertical component of incoming light– reflected light ~cos i

– cos i = l · n if vectors normalized

– There are also three coefficients, kr, kb, kg that show how much of each color component is reflected




Specular Surfaces• Most surfaces are neither ideal diffusers nor

perfectly specular (ideal reflectors)

• Smooth surfaces show specular highlights due to incoming light being reflected in directions concentrated close to the direction of a perfect reflection

specular

highlight


Modeling Specular Relections

• Phong proposed using a term that dropped off as the angle between the viewer and the ideal reflection increased

Ir ~ ks I cos

shininess coef

absorption coef

incoming intensityreflected

intensity




The Shininess Coefficient

• Values of between 100 and 200 correspond to metals

• Values between 5 and 10 give surface that look like plastic

cos

90-90E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

CS4600

Shading Schemes

Gouraud Shading: smoothly blended

intensity across each polygon



CS4600

Shading Schemes

Phong Shading: interpolated

normals to

compute intensity

at each point

Bui Toung Phong Thesis

CS4600

sy

Scan Convert Polygon Py

x

aIb

I

1I

2I 3

I

pI



C4600

Compute by direction

evaluation of illumination

expression, whichever

formula is being used

Intensity Interpolation

:3

,2

,1

III

1I

2I

3I

Surface Normals

Normals define how a surface reflects light– Vertex Attribute

– Use unit normals for proper lighting• scaling affects a normal’s length



CS4600

Using Average Normals

N = true (geometric) normal

CS4600


1N

N 2N



CS4600


1N

N 2NN

1 21

2N N N

CS4600


1N

N 2NN



CS4600

What should corner normals be?

1 2 3 4

1 2 3 4N N N NN

N N N N

n

ii

n

ii

N

N

N

1

1

More generally,

Plane Normals

• Equation of plane: ax+by+cz+d = 0

• From Chapter 4 we know that plane is determined by three points p0, p2, p3 or normal n and p0

• Normal can be obtained by

n = (p2-p0) × (p1-p0)

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015



Normal for Triangle

p0

p1

p2

n

plane n ·(p - p0 ) = 0

n = (p2 - p0 ) ×(p1 - p0 )

normalize n n/ |n|

p

Note that right-hand rule determines outward face

Winding order maters

CCWAngel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Normal to Sphere• Implicit function f(x,y.z)=0

• Normal given by gradient

• Sphere f(p)=p·p-1

• n = [∂f/∂x, ∂f/∂y, ∂f/∂z]T=p




Parametric Form• For sphere

• Tangent plane determined by vectors

• Normal given by cross product

• Normal given by center-(x,y,z)

x=x(u,v)=cos u sin v

y=y(u,v)=cos u cos v

z= z(u,v)=sin u

∂p/∂u = [∂x/∂u, ∂y/∂u, ∂z/∂u]T

∂p/∂v = [∂x/∂v, ∂y/∂v, ∂z/∂v]T

n = ∂p/∂u × ∂p/∂v


General Case

• We can compute parametric normals for other simple cases– Quadrics

– Parametric polynomial surfaces• Bezier surface patches (Chapter 11)




Ambient Light

• Ambient light is the result of multiple interactions between (large) light sources and the objects in the environment

• Amount and color depend on both the color of the light(s) and the material properties of the object

• Add ka Ia to diffuse and specular terms

reflection coef intensity of ambient light


Distance Terms• The light from a point source that reaches a

surface is inversely proportional to the square of the distance between them

• We can add a factor of theform 1/(a + bd +cd2) tothe diffuse and specular terms• The constant and linear terms soften the

effect of the point source




Light Sources• In the Phong Model, we add the results from

each light source

• Each light source can have separate diffuse, specular, and ambient terms to allow for maximum flexibility even though this form does not have a physical justification OR just an illumination term

• Separate red, green and blue components

• Hence, either 3 or 9 coefficients for each point source– Idr, Idg, Idb, Isr, Isg, Isb, Iar, Iag, Iab or Ir, Ig, Ib


Material Properties• Material properties model the

surface BRDF with a constant approximation– Nine absorbtion coefficients

• Ambient– kar, kag, kab

• Diffuse– kdr, kdg, kdb,

• Specular– ksr, ksg, ksb,

– Shininess coefficient




Adding up the ComponentsFor each light source and each color

component, the Phong model can be written (without the distance terms) as

I = ka Ia + kd Id l · n + ks Is (v · r )

For each color componentwe add contributions fromall sources


CS4600

Relevant Light (unit) Vectors

Point light source direction

Surface Normal

Reflection direction

Viewpoint direction



CS4600

Flat (Cosine) Shading (diffuse)

• Compute constant shading function, over each polygon, based on simple cosine term

• Same normal and light vector across whole polygon

• Constant shading for polygon

CS4600

Flat (Cosine) Shading(diffuse)

Where,

, for unit N, L

intensity of point light source

diffuse reflection coefficient



CS4600

Gouraud Shading• Compute constant

shading function, for each vertex, based on simple cosine term

• different normal and light vector for each vertex

• Interpolated shading for polygon

CS4600

Intensity Interpolation (Gouraud)



CS4600

sy

Normal Interpolation (Phong)

CS4600

Normal Interpolation (Phong)

Normalizing makes this a unit vector




Gouraud vs Phong Interpolation

Vertex Shading

FragmentShading

FlatShading

CS4600

Phong Illumination Formula

Where,a denotes ambient termd denotes diffuse terms denotes specular termk denotes coefficientI denotes intensity



Effect of Exponent Parameter

1n

3n

2n

10n

As n increases, highlight is more concentrated, surface appears glossier

cos ( )n


Demo



Modified Phong Model

• The specular term in the Phong model is problematic because it requires the calculation of a new reflection vector and view vector for each vertex

• Blinn suggested an approximation using the halfway vector that is more efficient


The Halfway Vector

• h is normalized vector halfway between l and v

h = ( l + v )/ | l + v |




Using the halfway vector

• Replace (v · r )by (n · h )

• is chosen to match shininess

• Note that halfway angle is half of angle between r and v if vectors are coplanar

• Resulting model is known as the modified Phong or Phong-Blinn lighting model– Specified in OpenGL standard


Computing Reflection Direction

• Angle of incidence = angle of reflection

• Normal, light direction and reflection direction are coplaner

• Want all three to be unit length

r 2(l n)n l


h = ( l + v )/ | l + v |



CS4600

Relevant Light (unit) Vectors

Point light source direction

Surface Normal

Reflection direction

Viewpoint direction

Computation of Vectors

• l and v are specified by the application

• Can compute r from l and n

• Problem is determining n

• For simple surfaces can be determined but how we determine n differs depending on underlying representation of surface

• OpenGL leaves determination of normal to application– Exception for GLU quadrics and Bezier surfaces was

deprecated




Example

Only differences in

these teapots are

the parameters

in the modified

Phong model


WebGL lighting

• Need – Normals

– Material properties

– Lights

- State-based shading functions have been deprecated (glNormal, glMaterial, glLight)

- Compute in shaders




Normalization

• Cosine terms in lighting calculations can be computed using dot product

• Unit length vectors simplify calculation

• Usually we want to set the magnitudes to have unit length but

– Length can be affected by transformations

– Note that scaling does not preserve length• GLSL has a normalization function


Specifying a Point Light Source

• For each light source, we can set an RGBA for the diffuse, specular, and ambient components, and for the position or just RGBA and position

var diffuse0 = vec4(1.0, 0.0, 0.0, 1.0);

var ambient0 = vec4(1.0, 0.0, 0.0, 1.0);

var specular0 = vec4(1.0, 0.0, 0.0, 1.0);

Or

var light0 = vec4(1.0, 0.0, 0.0, 1.0);

var light0_pos = vec4(1.0, 2.0, 3,0, 1.0);Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015



Distance and Direction

• The source colors are specified in RGBA

• The position is given in homogeneous coordinates

– If w =1.0, we are specifying a finite location

– If w =0.0, we are specifying a parallel source with the given direction vector

• The coefficients in distance terms are usually quadratic (1/(a+b*d+c*d*d)) where d is the distance from the point being rendered to the light source


Spotlights• Derive from point source

– Direction

– Cutoff

– Attenuation Proportional to cos

Demo




Global Ambient Light

• Ambient light depends on color of light sources– A red light in a white room will cause a red

ambient term that disappears when the light is turned off

• A global ambient term that is often helpful for testing (non-black objects)


Moving Light Sources• Light sources are geometric objects whose

positions or directions are affected by the model-view matrix

• Depending on where we place the position (direction) setting function, we can– Move the light source(s) with the object(s)

– Fix the object(s) and move the light source(s)

– Fix the light source(s) and move the object(s)

– Move the light source(s) and object(s) independently

Demo




Light Properties

var lightPosition = vec4(1.0, 1.0, 1.0, 0.0 );

var lightAmbient = vec4(0.2, 0.2, 0.2, 1.0 );

var lightDiffuse = vec4( 1.0, 1.0, 1.0, 1.0 );

var lightSpecular = vec4( 1.0, 1.0, 1.0, 1.0 );


Material Properties

• Material properties should match the terms in the light model

• Reflectivities

• w component gives opacity

var materialAmbient = vec4( 1.0, 0.0, 1.0, 1.0 );

var materialDiffuse = vec4( 1.0, 0.8, 0.0, 1.0);

var materialSpecular = vec4( 1.0, 0.8, 0.0, 1.0 );

var materialShininess = 100.0;




Using MV.js for Productsvar ambientProduct = mult(lightAmbient, materialAmbient);

var diffuseProduct = mult(lightDiffuse, materialDiffuse);

var specularProduct = mult(lightSpecular, materialSpecular);

gl.uniform4fv(gl.getUniformLocation(program, "ambientProduct"), flatten(ambientProduct));

gl.uniform4fv(gl.getUniformLocation(program, "diffuseProduct"), flatten(diffuseProduct) );

gl.uniform4fv(gl.getUniformLocation(program, "specularProduct"), flatten(specularProduct) );

gl.uniform4fv(gl.getUniformLocation(program, "lightPosition"), flatten(lightPosition) );

gl.uniform1f(gl.getUniformLocation(program, "shininess"), materialShininess);


Front and Back Faces

• Every face has a front and back

• For many objects, we never see the back face so we don’t care how or if it’s rendered

• If it matters, we can handle in shader

back faces not visible back faces visible




Emissive Term

• We can simulate a light source in WebGL by giving a material an emissive component

• This component is unaffected by any sources (non-lit)


Transparency

• Material properties are specified as RGBA values

• The A value can be used to make the surface translucent

• The default is that all surfaces are opaque

• Later we will enable blending and use this feature

• However with the HTML5 canvas, A<1 will mute colors




Normal Matrix

In the book:

From world space to eye space:

v’ = Mv move the camera location to origin, looking down –Z axis

v n = vT n = v’ n’ Angle between v & n must be the same in eye-space


Normal Matrix

In the book:



v n = vT n = v’ n’ = (Mv)T(Nn)




Normal Matrix

In the book:



v n = vT n = v’ n’ = (Mv)T(Nn) = vTMTNn

So: MTN = I

Thus: N = (MT)-1


Normal Matrix


Another way to think about it:vertexEyeSpace = gl_ModelViewMatrix * gl_Vertex;

Shouldn’t this also work:normalEyeSpace = vec3(gl_ModelViewMatrix * vec4(gl_Normal,0.0));

after scale:



Normal Matrix


Another way to think about it:vertexEyeSpace = gl_ModelViewMatrix * gl_Vertex;

Shouldn’t this also work:normalEyeSpace = vec3(gl_ModelViewMatrix * vec4(gl_Normal,0.0));

after non-uniform scale:

Normal Matrix



Modelview was applied to all vertices and all normals.

This is clearly wrong!

Say: T = P2 – P1

MT = M(P2 – P1 )

MT = MP2 – MP1

T’ = P’2 – P’1

Hence: M preserves tangents but not normals



Normal Matrix



Say: N = Q2 – Q1

But a vector defined by: Q’2 – Q’1 may not be normal to T

Normal Matrix


Consider G as the proper matrix for the normal

We know: T N = 0

We also know that N’ T’ = 0

T can be multiplied by the upper 3x3 of the modelview

(call it M)

N’ T’ = (GN) (MT) = 0

(GN) (MT) = (GN)T * (MT)

(GN)T * (MT) = NTGTMT

NTT = T N = 0

If GTM = I then N’ T’ = T N = 0

So: GTM = I ⇒G M‐1 T



Normal Matrix


GTM = I ⇒ G = (M-1)T

When does: M-1 = MT ?

When: M-1 = MT Then G = M

CS4600

Lighting Models

To

FromSomewhere Everywhere

Somewhere Specular Lambertian

Everywhere Cautics Ambient

Documents

Lighting - The College of Engineering at the University of ...cs4600/lectures/Wk9_Lighting.pdf• Light that strikes an object is partially absorbed and partially scattered (reflected)