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

 Like 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, q
 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 [r = 2 (l • n) n – l]
 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 Interactive Computer Graphics

Diffuse shading
 At noon, illum. is 1
 As the angle q (u in
figure) decreases,
illumination goes to
zero
 Illumination is
proportional to cos(q)
(Lambert’s law)
 cos(q) = l • n
 Id = kd l • n Ld
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 + Id + Is
= 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 sharpening
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 expensive, but

modern graphics cards can do it
Example Example 2
Chapter 3 - 34 Interactive Computer Graphics
Chapter 3 - 35 Interactive Computer Graphics

Gouraud shader
 See demo
Chapter 3 - 36 Interactive Computer Graphics

Phong shader
 See demo
Chapter 3 - 37 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 - 38 Interactive Computer Graphics

Virtual Trackball shading

 Flat shading
 Compute a normal for each face
 Gouraud shading
 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 - 39 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 - 40 Interactive Computer Graphics

What’s missing?
 Now that the rendering pipeline is all
software, we can add additional effects
 What’s missing?
Chapter 3 - 41 Interactive Computer Graphics

Fresnel Effect
 Surface reflectance depends on viewing angle
 Fresnel shaders: allow reflection, specularity, other
attributes to depend on viewing angle
 Example
Chapter 3 - 42 Interactive Computer Graphics

How would you do this?

 Refraction: 1 2 3 [more shading info]

Chapter 3 - 43 Interactive Computer Graphics
Chapter 3 - 44 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