CSPC 352: Computer Graphics
Chapter 6:
Lighting
and
Shading
Chapter 3 - 2
Interactive Computer Graphics
Overview







Local and global illumination
Phong reflectance model (local illumination)
Flat, Gouraud, and Phong
Shading on a polygonal mesh
Surface subdivisions
Shading in OpenGL
WebGL lighting demo
Chapter 3 - 3
Interactive Computer Graphics
Chapter 3 - 4
Interactive Computer Graphics
Need for shading



How do you make something look 3D?
Shading that is
appropriate for the
lighting is the primary
cue to 3D appearance
[What are some
other cues?]
Chapter 3 - 5
Interactive Computer Graphics
Illumination models

General approach:




model the world
simulate physics
Global illumination models (ray tracing,
radiosity) determine shading by bouncing
light around an entire environment (too slow
for interactive graphics, usually [1] [2])
Local illumination models consider only the
surface, light direction, and viewing direction
Chapter 3 - 6
Interactive Computer Graphics
Chapter 3 - 7
Interactive Computer Graphics
Local illumination

To make lighting fast, we will initially restrict
our attention to:


Light source, one surface, and viewer (ignore
inter-object reflections, shadows)
Ambient, diffuse, and specular reflection (ignore
transparency, refraction, reflection, …)
Chapter 3 - 8
Interactive Computer Graphics
Chapter 3 - 9
Interactive Computer Graphics
Light sources

In general, a light source is a rather
complicated thing. It can emit different
amounts of light for each





Location (x, y, z)
Direction (, f)
Wavelength (l)
Illumination function:
I(x, y, z, , f, l)
Examples: ambient,
point, area, spot,
distant, …
Chapter 3 - 10
Interactive Computer Graphics
Colored lights



Intensity of emitted light can also be a
function of wavelength
We usually model as I = [Ir, Ig, Ib]
components
Some experiments have been done with a
whole spectrum of color values, giving more
realistic results in some cases
Chapter 3 - 11
Interactive Computer Graphics
Ambient light


Intensity doesn’t vary with x, y, z, , f
I = [Iar, Iag, Iab]
Chapter 3 - 12
Interactive Computer Graphics
Point lights



Point lights have a location (so farther
objects receive less light) but are not
directional
I(p0) = [Ir(p0), Ib(p0), Ig(p0)]
How would you compute the illumination at
point p?


Illumination proportional to
inverse square of distance
I(p, p0) =
(1/d2) [Ir(p0), Ib(p0), Ig(p0)]
Chapter 3 - 13
Interactive Computer Graphics
Limitations of point lights



Usually result in artificially
high-contrast images
Can generate umbra
(full shadow) but not
penumbra (partial shadow)
Area lights generate softer
shadows, but are usually
used only in non-interactive graphics (e.g.
raytracing or radiosity)
Chapter 3 - 14
Interactive Computer Graphics
Distant (directional) lights

Light point lights, but




Without attenuation based on the distance
Without difference in direction (parallel rays)
Location of light source
becomes [x, y, z, 0]; no
attenuation
More efficient to compute
than point sources
Chapter 3 - 15
Interactive Computer Graphics
Spotlights



Directional, i.e. light is emitted
in a narrow range of angles, 
More realistic spotlights would
model a gradual fall-off of light
E.g. cose f
= (s • l)e if s is direction of
source, l direction to
source, both unit vectors
Chapter 3 - 16
Interactive Computer Graphics
Illumination and shading



How do these light sources affect brightness
of a surface point?
Most commonly used model for interactive
graphics: Phong Illumination Model
Involves terms:




Ambient
Diffuse
Specular
It is a (simplified) model of the physics of
reflection
Chapter 3 - 17
Interactive Computer Graphics
Vectors used by Phong model

The directions used by the phong model





n: surface outward normal
v: direction to viewer
l: direction to light source
r: reflection direction
Since these are
directions, they
are unit vectors.
Chapter 3 - 18
Interactive Computer Graphics
Ambient term of Phong model




An object has an ambient reflectivity
coefficient, ka
A light source gives off a certain amount of
ambient light, La
Total ambient illumination:
Ia = ka La
(For colored light, we repeat this
computation for R, G, and B ambient light
values and reflectivity coefficients)
Chapter 3 - 19
Interactive Computer Graphics
Chapter 3 - 20
Interactive Computer Graphics
Diffuse term

A perfectly diffuse reflector is so rough that it
scatters light equally in all directions
But note that when the
light comes in at an angle,
the same energy is spread
out over larger area

Such surfaces are called

Lambertian surfaces
(obeying Lambert’s Law)
Chapter 3 - 21
Diffuse shading





At noon, illum. is 1
As the angle  (u in
figure) decreases,
illumination goes to
zero
Illumination is
proportional to cos()
(Lambert’s law)
cos() = l • n
Id = kd l • n Ld
Interactive Computer Graphics
Chapter 3 - 22
Interactive Computer Graphics
Chapter 3 - 23
Interactive Computer Graphics
Specular Term





Specular term adds highlights
in the reflection direction
Note that the smoother and
shinier the object, the tigher and brighter the
highlight
Highlight power falls as viewer v moves
away from reflection dir, r. (cos f = v • r)
Modeled as cosa f, a is
shininess coefficient (1..200)
Is = ks Ls (r • v)a
Chapter 3 - 24
Interactive Computer Graphics
Chapter 3 - 25
Interactive Computer Graphics
Phong illumination model

Phong illumination model:
I = Ambient + Diffuse + Specular
= Ia + I d + I s
= ka La + kd Ld l • n + ks Ls (r • v)a

May add light attenuation term
1/(a+bd+cd2) ( ka La + kd l • n Ld) + ks Ls (r • v)a

Parameters needed:




Light: La, Ld, Ls for each light
Surface: ka, kd, ks, a
Repeat for each color component, light source
How hard to calculate?
Chapter 3 - 26
Interactive Computer Graphics
Polygon shading


How do you use the Phong Illumination
Model to render an object with shading?
Consider a polygonal sphere approximation


How do you find the normals to the faces?
Shade a face with a constant color?
glShadeModel(GL_FLAT);

Called flat shading or Constant shading

How much computation would this require


Per pixel?
Per vertex?
Chapter 3 - 27
Interactive Computer Graphics
Chapter 3 - 28
Interactive Computer Graphics
Flat shading drawbacks




The human visual system enhances edges
We see stripes
(known as Mach
Bands) along edges
Much like a
convolution!
How to avoid?
Chapter 3 - 29
Interactive Computer Graphics
Gouraud shading

Gouraud shading:



Define vertex normals as average
of surrounding faces
Compute lighting equation at
each vertex
Interpolate colors across polygon
glShadeModel(GL_SMOOTH);

Computation required



Per pixel?
Per vertex?
Very fast! Especially with reasonably large polygons
and hardware color interpolation
Example
Chapter 3 - 30
Interactive Computer Graphics
Bilinear interpolation


Rasterization is done a scan-line at a time
Bilinear interpolation: given a color at each
vertex, how do you render a scan-line with
smooth shading?


interpolate vertex colors along each edge of the
polygon to get colors for start
and end of scanline
interpolate colors along the
scanline
Chapter 3 - 31
Interactive Computer Graphics
Chapter 3 - 32
Interactive Computer Graphics
Gouraud drawbacks

Drawbacks of Gouraud
shading?





Polygon edges are still visible
Brightness is modelled as
a linear function, but that’s
not really accurate
Real highlights are small
and bright and drop off sharply
If polygons are too large, highlights get distorted
and dimmed (notice the funny shape)
How to avoid these artifacts?
Chapter 3 - 33
Interactive Computer Graphics
Phong shading



To eliminate artifacts,
interpolate normals
Results: better shading,
much nicer highlights
Computation required
per pixel?
Computationally much more expensive, but
modern graphics cards can do it
Example

Chapter 3 - 34
Interactive Computer Graphics
Chapter 3 - 35
Interactive Computer Graphics
Shading summary

Don’t confuse Phong Illumination Model and
Phong Shading


Gouraud shading: compute illumination
model at each vertex. Interpolate colors.
(Often done in hardware)
Phong shading: interpolate vertex normals.
Compute illumination model at each vertex
Chapter 3 - 36
Interactive Computer Graphics
Specifying lights in OpenGL


OpenGL supports those four light types
Point, directional lights
GLfloat light0_pos[] = {1.0, 2.0, 3.0, 1.0};
GLfloat light0_pos[] = {1.0, 2.0, 3.0, 0.0};

Diffuse, Ambient, Specular coefficients
GLfloat diffuse0[] = {1, 0, 0, 1};
GLfloat ambient0[] = {1, 0, 0, 1};
GLfloat spedular0[] = {1, 1, 1, 1};
glEnable(GL_LIGHTING)
Chapter 3 - 37
Interactive Computer Graphics
Chapter 3 - 38
Interactive Computer Graphics
Enabling lights

Can enable at least 8 lights:
glEnable(GL_LIGHT0);
glLightfv(GL_LIGHT0,
glLightfv(GL_LIGHT0,
glLightfv(GL_LIGHT0,
glLightfv(GL_LIGHT0,

GL_POSITION, light0_pos);
GL_AMBIENT, ambient0);
GL_DIFFUSE, diffuse0);
GL_SPECULA, specular0);
Spotlights: set more light parameters as
above



GL_SPOT_DIRECTION
GL_SPOT_EXPONENT
GL_SPOT_CUTOFF
Chapter 3 - 39
Interactive Computer Graphics
Specifying Materials

Material properties are part of the drawing
state, specified by glMaterialfv
GLfloat ambient[] = {0.2, 0.2, 0.2, 1.0};
GLfloat diffuse[] = {1.0, 0.8, 0.0, 1.0};
GLfloat specular[] = {1.0, 1.0, 1.0, 1.0};
glMaterialfv(GL_FRONT, GL_AMBIENT, ambient);
glMaterialfv(GL_FRONT, GL_DIFFUSE, diffuse);
glMaterialfv(GL_FRONT, GL_SPECULAR, specular);
glMaterialf(GL_FRONT, GL_SHININESS, 100.0);
GLfloat emission[]={0.0, 0.3, 0.3, 1.0};
glMaterialfv(GL_FRONT, GL_EMISSION, emission);

Use GL_FRONT_AND_BACK for two-sided faces
Chapter 3 - 40
Interactive Computer Graphics
Chapter 3 - 41
Interactive Computer Graphics
OpenGL Gouraud Shading

OpenGL needs to know vertex normals as
well as locations
glNormal3fv(n);
glVertex3fv(p);

How to compute vertex normals?



Cross product for face normals
Average normals of surrounding faces
How to find neighboring faces?
Chapter 3 - 42
Interactive Computer Graphics
Virtual Trackball shading

Flat shading


Gouraud shading




Compute a normal for each face
Compute a normal for each vertex as average of
adjacent faces
[Defect: you may not want to smooth-shade
across every edge: how should it really be done?]
Phong shading?
What would you have to do to handle
material properties, surface colors, etc?
Chapter 3 - 43
Interactive Computer Graphics
Surface subdivision

In real modelers…



one can usually define smooth curved surfaces
Eg spheres, quadrics, NURBS, smoothed polygons
Modeler renders with smoothness setting


Recursively split polygons into smaller pieces,
with new vertices on the smooth surface
Splitting a triangle can be done by




Bisecting angles
Computing the centrum
Bisecting sides
Of course, smoother surfaces take longer to draw
Chapter 3 - 44
Interactive Computer Graphics
What’s missing?


Now that the rendering pipeline is all
software, we can add additional effects
What’s missing?
Chapter 3 - 45
Interactive Computer Graphics
Fresnel Effect


Surface reflectance depends on viewing angle
Fresnel shaders: allow reflection, specularity, other
attributes to depend on viewing angle
Chapter 3 - 46
Interactive Computer Graphics
How would you do this?

Refraction: 1 2 3
Chapter 3 - 47
Interactive Computer Graphics
Chapter 3 - 48
Interactive Computer Graphics
Chapter summary





Phong illumination model has ambient,
diffuse, and specular terms
It can be used for Flat, Gouraud, and Phong
shading
OpenGL supports eight ambient, point,
distant, and spot lights
You must specify light and material
properties with many OpenGL function calls
Curved surfaces are modeled with polygon
subdivisions