Lighting and Shading

Hill – 8.2 (Upto 8.2.6), 8.3, 8.5 (Upto

8.5.3 excluding 8.5.2), 8.6
 Basic Terms
• Illumination: the transport of energy from light
sources to surfaces & points
– Local illumination
– Global illumination
• Lighting model or Illumination model: Express the
factors determining a surface’s color or luminous
intensity (outgoing or reflected light) at a particular
3D point
 Components of Illumination
• Two components of illumination:
1. Light sources
2. Surface properties
• Light source described by a luminance/intensity ‘I’
– Each color is described separately
– I = [Ir Ig Ib]
• Types of Light Sources:
1. Ambient Light
2. Diffuse Light
3. Spot Light
 Ambient Light
• No identifiable source or direction
• Product of multiple reflections of light from the many
surfaces present in the environment
• Computationally inexpensive
 Ambient Light
Categories:
1. Global ambient light
– Independent of light source
– Lights entire scene
– Example: reflection of sunlight from several surfaces
2. Local ambient light
– Contributed by additional light sources
– Can be different for each light and primary color
– Example: Reflection of fluorescent lamps from several
surfaces
 Diffuse Light
• Point Source
– Given by a point
– Light emitted equally in all directions
– Intensity decreases with square of distance
– Point source [x y z 1]T
– At point p, intensity received :
• Directional Source
– Given by a direction
– Simplifies some calculations
– Intensity dependents on angle between
surface normal and direction of light
– Distant source [x y z 0]T
Ambient Light vs Diffuse Light

Diffuse light

Ambient
Light
 Spot Light
• Spotlight is a point source that emits light in restricted
set of directions,
– Requires color, point, direction, falloff parameter
– usually direction boundary forms a cone shape.
– Here θ is Cutoff Cone. No light is seen at points lying
outside Cutoff angle.

• Intensity falls off directionally

 Spot Light
• Consider, a spot light aimed at direction d.
– β is the angle between aimed direction d and a line from
source to object P
– Source has cut off angle α and intensity I
– Intensity of spot light received at P is

Intensity at P = I cosε(β)
α d
β
P
 Types of Surface
Interaction between light and material can be classified as
• Specular surfaces – Ideal mirror
• Diffuse surfaces – Reflected light is ideally reflected
to all directions uniformly
• Translucent surfaces – Allow some lights to
penetrate the surface (e.g. refraction in glass, water)
 Reflection
Interaction between light and material can be classified as
• Specular reflection – Ideal mirror
• Diffuse reflection – Reflected light is ideally
reflected to all directions uniformly

* Usually both specular and diffuse reflection can take place at

each of type of surface (e.g. mentioned as specular surface,
diffuse surface or translucent surface), but their amounts
depends on the surface property.
 Ideal Diffuse Reflection
• Assumes surface reflects equally in all directions.
• An ideal diffuse surface is, at the microscopic level, a
very rough surface.
– Example: chalk, clay, some paints

Surface
 Ideal Diffuse Reflection
• Ideal diffuse reflectors reflect light according to
Lambert's cosine law.
• Lambert's law determines how much of the incoming
light energy is reflected. The reflected intensity is
independent of the viewing direction.
• But reflected light intensity depends on incident angle
of light.
 Ideal Diffuse Reflection
• Suppose light is incident on diffuse surface S.
• m = direction of Normal of the surface s
• v = viewer’s direction
• s = direction of incident light m θ

• θ = incident angle with normal

v
• Is = Intensity of Light Source
• Intensity of reflected light, Id
– Id= Is ρd (s.m/|s||m|) , where ρd is the diffuse
reflectance coefficient.
– If θ is negative, then Id= max(Is ρd (s.m/|s||m|) ,0)
cos(theta) -ve?
 Ideal Specular Reflection
• Reflection is only at mirror angle. An ideal mirror is a
purely specular reflector.
– View dependent reflection. That is, reflected light’s
intensity varies with viewer’s position.
– Intensity of refelcted light is stronger near mirror angle and
strongest at mirror angle.
– An Ideal specular reflection follows Snell’s Law.

Snell’s Laws:
– The incoming ray and reflected ray lie in a plane
with the surface normal
– The angle that the reflected ray forms with the
surface normal equals the angle formed by the
incoming ray and the surface normal
 Non-ideal Reflectors
• Simple Empirical Model:
– We expect most of the reflected light to travel in the
direction of the ideal ray.
– However, because of microscopic surface variations we
might expect some of the light to be reflected just slightly
offset from the ideal reflected ray.
– As we move farther and farther, in the angular sense, from
the reflected ray we expect to see less light reflected.
 Non-ideal Reflectors
• Phong model approximates the fall off of specular reflection.
• The cosine term is maximum when the surface is viewed from
the mirror direction and falls off to 0 when viewed at 90
degrees away from it.
• A scalar (shiny property, q in the figure below, which is the
exponent term, k in the specular reflection formula of slide 20)
more shiny surfaces have
controls the rate of this fall off
Specular reflectance more impact of specular
reflection, lower k

- angle angle
-900 00 900
 Phong Model
• Compute the combined impact of ambient light,
diffuse and specular reflection at a point on surface
• Also called Local Illumination model as its main
focus is on the direct impact of light coming from a
source.
• This model has no physical basis, yet it is one of the
most commonly used illumination models in
computer graphics.
 Phong Model
• Also models secondary effect of light.
• Consider a point light source p and viewpoint v. What
should be color of light reflected into viewer’s eye
from point Q of the surface?
– Consider diffuse component, specular component of the
incident light and ambient light present in the environment

N
P R
V
L θ θ
φ

Q
Mathematical Calculation of Phong Model
• First we consider, 2 extreme cases of light reflection.
– Diffuse Reflection :
Id α cosθ
= Ip kd cosθ [Using kd instead of previous ρd]
= Ip kd (L.N) L and N should be in same
direction

N
– Specular Reflection: P R

Is α (cosφ )k V
L θ θ
φ
= Ip ks (cosφ )k
= Ip ks (R.V)k Q
phi between R
and V

* Ip is the intensity of the light source

Mathematical Calculation of Phong Model
• We need to ircorporate the effect light present in environment.
Thus total refelcted light also includes ambient component.
– Ambient Component = Iaka
• Total reflected light intensity from Q,
I = Ambient Component + Diffuse Component +
Specular Component
= Iaka + Ip kd (L.N) + Ip ks (R.V)k

More specifically,
I = Iaka + Ip [kd max {(L.N),0} + ks max{(R.V)k ,0}]
k should be outside max()
 Additional Issues
• When there are n light sources in the scene, their effects are
cumulative: Intensity at Q, sum over multiple sources, if present
I = Iaka + ∑(i=1 to n) Ipi {kd (L.N) + ks (R.V)k }
• The intesnsity of red, green and blue component of reflected
light,
Ir = Iakar + Ip kdr (L.N) + Ip ks (R.V)k
Ig = Iakag + Ip kdg (L.N) + Ip ks (R.V)k
Ib = Iakab + Ip kdb (L.N) + Ip ks (R.V)k
– ks : coefficient for specular component which is same as
the color of light source, not affected by surface color.
 How to get vector R ?
• Find a formula to compute R, the reflection of vector
L with respect to normal vector?
R = 2 (L.N)N – L
(See Solved Problem 11.10 in Schaum(2nd edition))
If R is point to outwards,
then L is also point to
outwards
 Blinn and Torrence Variation
• Calculation of R is computaionally expensive. So in
phong model the term R.V is somtimes replaced by
N.H , where H is a unit vector that bisect the angle
between L and V.
• angle between N and H measures the falloff of intensity.
• Though calculation of N.H is is computaionally
inexpensive relative to R.V, but N.H is not always equal to
R.V. In that case calculation of specular component will be
approximate.
(See Solved Problem 11.11 in Schaum(2nd edition)))
If L is point to outwards, H is
normalized avg. of L and V.
 Effect of the Reflection Coefficients
• Diffuse Reflection Coefficient, kd
• Ambient Reflection Coefficient, ka
• Specular Reflection Coefficient, ks
• Specular Component Exponent Term, k

* To observe the effects of different components, vary

one component and keep the other two constant.
between kd, ks, k
 Diffuse Reflection Coefficient
k_d: spreads the light over the whole
surface.
• Id = max {Is kd cosθ, 0}
k_s: makes object more or less glossy
• Source intensity is 1.0 at incident point.

• Background intensity is 0.4

• Sphere reflecting diffuse light, for six reflection coefficients:
0, 0.2, 0.4, 0.6, 0.8, and 1. values of k_d
Angle θ between
surface normal and
incident light is > 90o

What is the ambient

k_a = k_s = 0 .
Since top-left component here?
spehere is black. What is the specular
component?
 Ambient Reflection Coefficient
• Effect of adding ambient light to the diffuse light reflected by
a sphere diffuse source = 1 -> light emits equally in all direction
ambient source = 1 -> from env all direction
• Diffuse source intensity is 1.0
Now, k_d constant. Top-right
Diffuse reflection coefficient is 0.4 sphere in previous slide.
Ambient source intensity is 1.0
• Moving from left to right the ambient reflection coefficient
takes on values: 0.0, 0.1, 0.3, 0.5, and 0.7
– Too little ambient light makes shadows too deep and harsh
– Too much makes the picture look washed out and bland
 Specular Reflection Coefficient
• The ambient and diffuse reflection coefficients are 0.1 and 0.4
for all spheres.
• Id = Is ks (cos φ)k More shiny and more
highly concentrated along
the direction r
Exponent, k
3 6 9 25 200
More mirror like,
more focused
0.25 reflection with
reflection
coefficient, increasing
ks exponent
0.5

0.75
 Color
• Color is constructed by adding certain amounts of red,
green, and blue light
• Light sources have three “types” of color:

• Surface has two sets of reflection co-efficient

– Ambient reflection coefficient : kar , kag , kab
– Diffuse reflection coefficient : kdr , kdg , kdb
• Color of the specular component is often the same as that of the
light source – mirror like, so the specular reflection coefficient:
ksr , ksg , ksb = ks
e.g. Glossy red apple when illuminated by a yellow light is
yellow rather than red
Color of an Object
 Color of an Object
• By “color” of a surface we mean the color that is
reflected from it when the illuminated by white light
• The ambient and diffuse reflection coefficients are
based on the color of the surface itself.
• The specular reflection coefficient is based on the
color of the light source (and the roughness property
of the surface)
 Color of an Object
• Color of a sphere is 30% red, 45% green, and 25% blue
• Light source in environment:
White light (Intensity : Isr= Isg= Isb = Is)
• Sphere’s ambient and diffuse reflection coefficients:
kar = kdr= 0.30k k is some constant
kag= kdg= 0.45k
kab= kdb= 0.25k
here, k is some scaling value
• The individual ambient and diffuse components have
intensities
Iar= 0.30k Ia , Idr= 0.30k Is cosθ
Iag= 0.45k Ia , Idg= 0.45k Is cosθ
Iab= 0.25k Ia , Iab= 0.25k Is cosθ
• If the environment is uniformly lighted, θ = 00 for sphere!!
 Shading
• The process of assigning colors to pixels.

Shading

Flat Shading Smooth Shading

Gouraud Shading Phong Shading

 Shading Model
• Flat Shading
– Compute Phong lighting once for entire polygon
• Gouraud Shading
– Compute Phong lighting at the vertices and interpolate
lighting values across polygon
• Phong Shading
– Interpolate normals across polygon and perform Phong
lighting across polygon
 Flat Shading
• For each polygon
– Determines a single intensity value at a chosen point on
the polygon
– Uses that value to shade the entire polygon

• Assumptions Will be realistic if-

– Light source at infinity
– Viewer at infinity
– The polygon represents the actual surface being modeled
 Problems of Flat Shading
• Specular highlights tends to get lost
• If chosen point on polygon is at location of the light
soure, then color of the polygon will be significantly
distorted.

Flat Shading
 Smooth Shading
• Introduce vertex normals at each
vertex
– Used only for shading
– Think of as a better approximation of the real surface that
the polygons approximate
– Finds color value for each point in the polygon individually
• Two types
– Gouraud Shading
– Phong Shading (do not confuse with Phong Lighting Model)
 Gouraud Shading
• Most common approach
• Perform Phong lighting at the vertices
• Linearly interpolate the resulting colors over faces
– Along edges
– Along scanline
 Gouraud Shading
color3
ytop
y4 color4
Interpolate
color2 - along edges :
colorleft colorx
colorright color_left, color_right
ys - along scanline:
ybott color1 color_x

xleft xright
ys  ybott
colorleft  color1  color4  color1 
y4  ybott
y s  ybott
colorright  color1  color2  color1 
y 2  ybott
x  xleft

colorx  colorleft  colorright  colorleft x  xright
left
 Gouraud Shading
color3
ytop
y4 color4
color2
colorleft ' colorx '
ys colorright
colorleft
ybott color1

xleft xright
x  xleft

colorx  colorleft  colorright  colorleft x  xright
left

colorx '  colorx  Kx Calculate the surface normals

along the scan line and the edge
colorleft '  colorleft  K ' y using incremental approach
 Problem of Gouraud Shading
– Often appears dull
– Lacks accurate specular component

C1

C3

C2 Can’t shade the spot light

 Phong Shading
Interpolate normal vectors of face vertices at each pixel, then
perform Phong lighting at each pixel.
m3 ys - y1
m4 m2 mleft = m1 + (m4-m1)
mleft
mx
mright Y4 - y1
ys - y1
ys mright = m1 + (m2-m1)
m1 Y2 - y1

x
x - xleft
mx= mleft + (mright - mleft)
x right - xleft
Calculate the surface normals along the scan line
and the edge using incremental approach
 Phong vs Gouraud Shading
• Phong shading is more smooth
• If a highlight does not fall on a vertex, Gouraud shading may
miss it completely, but Phong shading does not.

Phong shading
can capture But, Phong
specular shading is
reflection. (1,2, 3) 6-8 times
computatio
Gouraud shading nally
will be okay on expensive.
4th. (bottom-left)
 Texture
• Texture Types
– Bitmap textures: Using some image file
– Procedural textures: Changing pixel intensity in some
controlled fashion without using external image source

• Texture (s, t) produces a color or intensity value for

each value of s and t between 0 and 1
 Texture
• Bitmap textures: Using some image file having dimension
CxR presented as txtr[c][r]
– 0<=c<=C-1 and 0<=r<=R-1

• Example: C= 600 and R= 400

texture(0.261,0.783) evaluates to txtr[156][313]
texture(1,1) evaluates to txtr[600][400]
 Texture
• Procedural textures: Changing pixel intensity in some
controlled fashion without using external image source

• Not used frequently

(Bitmap textures that is image files are commonly used)
 Texture
Adding Texture to Flat Surface
• Texture P and Surface S has
– same shape
– Same number of vertices
• Attaching a Pi to each Vi

P2(0,1) P3(1,1) V2 V3

P4 (1,0) V1 V4
P1(0,0)
T(s,t)
 Texture
Adding Texture to Flat Surface
• Texture P and Surface S has same shape
0,1 1,1
Without
= distortion

0,0 1,0

glBegin(GL_QUADS);
glTexCoord2f(0.0, 0.0); glVertex3f(1.0, 2.0, 1.5); Mapping from P to S.
Reading (glTexCoord2f)
glTexCoord2f(0.0, 1.0); glVertex3f(1.0, 3.0, 1.5); and writing (glVertex3f)
glTexCoord2f(1.0, 1.0); glVertex3f(2.0, 3.0, 1.5); have equal change.
Look at first two
glTexCoord2f(1.0, 0.0); glVertex3f(2.0, 2.0, 1.5); coordinates of
glVertex3f
glEnd();
 Texture
Adding Texture to Flat Surface
• Texture P and Surface S has same shape
0,1 1,1
= Stretched

0,0 1,0

glBegin(GL_QUADS);
Stretching original
glTexCoord2f(0.0, 0.0); glVertex3f(1.0, 2.0, 1.5); texture.
Reading smaller
glTexCoord2f(0.0, 0.5); glVertex3f(1.0, 3.0, 1.5);
section, writing into
glTexCoord2f(0.5, 0.5); glVertex3f(2.0, 3.0, 1.5); larger section.

glTexCoord2f(0.5, 0.0); glVertex3f(2.0, 2.0, 1.5);

glEnd();
 Texture
Adding Texture to Flat Surface
• Texture P and Surface S has same shape
2.0
0,1 1,1 = Tile
1.5
0,0 1,0
How to repeat
glBegin(GL_QUADS); texture?

glTexCoord2f(0.0, 0.0); glVertex3f(1.0, 2.0, 1.5);

glTexCoord2f(0.0, 2.0); glVertex3f(1.0, 3.0, 1.5);
glTexCoord2f(2.0, 2.0); glVertex3f(2.0, 3.0, 1.5);
glTexCoord2f(2.0, 0.0); glVertex3f(2.0, 2.0, 1.5);
glEnd();
 Texture
Adding Texture to Flat Surface
• Texture P and Surface S has same shape

• Mapping is clearly affine affine = parallel remains

parallel
– Scaling
– Rotation
– Translation
 Creating Visual Effect Using Texture
1. Creating a glowing object
• I = texture(s, t)

gl.glEnable(GL.GL_TEXTURE_2D);
gl.glTexEnvf(GL.GL_TEXTURE_ENV, GL.GL_TEXTURE_ENV_MODE,
GL.GL_REPLACE);
gl.glBindTexture(GL.GL_TEXTURE_2D, texName);
glBegin(GL_QUADS);
glTexCoord2f(0.0, 0.0); glVertex3f(1.0, 2.0, 1.5); OpenGL code isn't
glTexCoord2f(0.0, 1.0); glVertex3f(1.0, 3.0, 1.5); required for theory
glTexCoord2f(1.0, 1.0); glVertex3f(2.0, 3.0, 1.5);
glTexCoord2f(1.0, 0.0); glVertex3f(2.0, 2.0, 1.5);
glEnd();
 Creating Visual Effect Using Texture
2. Modulating the reflection coefficient

• Object is the color of

– Reflected diffuse light component
– Reflected ambient light component

gl.glEnable(GL.GL_TEXTURE_2D);
glTexEnvf(GL_TEXTURE_ENV,GL_TEXTURE_ENV_MODE, GL_MODULATE);
gl.glBindTexture(GL.GL_TEXTURE_2D, texName);
glBegin(GL_QUADS);
glTexCoord2f(0.0, 0.0); glVertex3f(1.0, 2.0, 1.5);
glTexCoord2f(0.0, 1.0); glVertex3f(1.0, 3.0, 1.5);
glTexCoord2f(1.0, 1.0); glVertex3f(2.0, 3.0, 1.5);
glTexCoord2f(1.0, 0.0); glVertex3f(2.0, 2.0, 1.5);
glEnd();
 Creating Visual Effect Using Texture
3. Simulating Roughness by Bump Mapping
– Technique to give surface wrinkled or dimpled appearance
without having to model each individual dimple
Computationally expensive
if calculated on each point.
We can approximate using
ideas from texture.

– Independent of the viewing angle and object orientation

 Creating Visual Effect Using Texture
3. Simulating Roughness by Bump Mapping
We will slightly
modulate roughness
of the surface

• Scalar function texture(s, t) perturb the normal vector at each

spot in a controlled fashion. It causes perturbations in the
amount of diffuse and specular lights.
 Creating Visual Effect Using Texture
3. Simulating Roughness by Bump Mapping

• Surface is represented parametrically by the function P(u, v)

• Surface has unit normal vector m(u, v)
• 3D point at (u*, v*) corresponds to the texture at (u*, v*)
• New normals can be found by:
textureu and texturev are
partial derivatives of the
texture function wrt u and v
 shadow = where light
Shadows can't reach
 Adding Shadows of Objects
1. Shadows as Texture
2. Shadows Using a Shadow Buffer
 Shadows as Texture
• Paint shadows as a texture
• Works for flat surfaces illuminated by point light
source

• Problem: compute shape of shadow

 Shadows as Texture
* Union of projections of individual faces = projection
of entire object

1. First, draw plane using specular-diffuse-ambient

components
2. Then, draw shadow projections (face by face) using
only ambient component
 Shadows Using a Shadow Buffer
Shadow Buffer: An auxiliary second depth buffer
• Any points in the scene that are “hidden” from the
light source must be in shadow.
• If no object lies between a point and the light source
the point is not in shadow.
 Shadows Using a Shadow Buffer
• Contains a “depth picture” of the scene from the
point of view of the light source
• Each of its index (i, j) records the distance from the
source to the closest object in the associated
direction.
 Shadows Using a Shadow Buffer
Step 1: Loading Shadow Buffer:
• Initialize each index value d[i][j] to 1.0
• Position a camera at light source
• Rasterize each face in scene updating pseudo-depth
• Shadow buffer tracks smallest pseudo-depth so far
 Shadows Using a Shadow Buffer
Step 1: Loading Shadow Buffer:
• Shadow buffer calculation is independent of eye position
• In animations, shadow buffer loaded once
• If eye moves, no need for recalculation
• If objects move, recalculation required
 Shadows Using a Shadow Buffer
Step 2: Rendering Scene:
• Render scene using camera as usual
• While rendering a pixel [c][r], find:
– pseudo-depth D from light source to P
– Index location [i][j] in shadow buffer, to be tested
– Value d[i][j] stored in shadow buffer
 Shadows Using a Shadow Buffer
Step 2: Rendering Scene:
• If d[i][j] < D (other object on this path closer to light)
– point P is in shadow
– set lighting using only ambient
• Otherwise, not in shadow
Thank you 