!

"#$%&'()*
+,-"%,.-(#./(0"#/,.-

Instructor
LE Thanh Sach, Ph.D
 !"#$%&$

LE Thanh Sach, Ph.D.

Office:
Department of Computer Science,
Faculty of Computer Science and Engineering,
HoChiMinh City University of Technology.
Office Address:
268 LyThuongKiet Str., Dist. 10, HoChiMinh City,
Vietnam.
E-mail: [email protected]
E-home: http://cse.hcmut.edu.vn/~ltsach/
Tel: (+84) 83-864-7256 (Ext: 5839)
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 2
 !"#$%&'()*+($,

The slides in this PPT file are composed

using the materials supplied by
@Prof. Edward Angel: He is currently from ARTS
Lab, University of New Mexico. He also the author
of the book “Interactive Computer Graphics: A
Top-down Approach Using OpenGL”

@Prof. Donald Hearn and Prof. M. Pauline

Baker, from Indiana University and Purdue
University

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 3

 !"#$%&'

vShading I
vShading II
vShading in OpenGL

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 4

!"#$%&'()
 !"#$%&'($)

vLearn to shade objects so their images

appear three-dimensional
vIntroduce the types of light-material
interactions
vBuild a simple reflection model---the
Phong model--- that can be used with real
time graphics hardware

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 6

 !"#$%&$'&&($)"*(+',

vSuppose we build a model of a sphere using

many polygons and color it with glColor.
We get something like

vBut we want

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 7

 !"#$%&'

vWhy does the image of a real sphere look like

vLight-material interactions cause each point to

have a different color or shade
vNeed to consider
@Light sources
@Material properties
@Location of viewer
@Surface orientation
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 8
 !"#$$%&'()*

vLight strikes A
@Some scattered
@Some absorbed
vSome of scattered light strikes B
@Some scattered
@Some absorbed
vSome of this scattered
light strikes A
and so on
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 9
 !"#$"%&#'()*+,-&.#

vThe 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
vRendering equation is global and includes
@Shadows
@Multiple scattering from object to object

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 10

 !"#$%"&'(()*+,
shadow

multiple reflection
translucent surface

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 11

 !"#$%&'(&)%"*$%&+,-.,/0-1

vCorrect shading requires a global

calculation involving all objects and light
sources
@Incompatible with pipeline model which
shades each polygon independently (local
rendering)
vHowever, in computer graphics, especially
real time graphics, we are happy if things
“look right”
@Exist many techniques for approximating
global effects
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 12
 !"#$%&'(&)%"*$%&+,-.,/0-1

vLook right:
Bui Tuong Phong (Phong Model):

“We do not expect to be able to display the

object exactly as it would appear in reality,
with texture, overcast shadows, etc. We hope
only to display an image that approximates
the real object closely enough to provide a
certain degree of realism.”

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 13

 !"#$%&'(%)*"(+,-.%)*(/%"0.
vLight that strikes an object is partially
absorbed and partially scattered (reflected)
vThe 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
vThe reflected light is scattered in a manner
that depends on the smoothness and
orientation of the surface
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 14
 !"#$%&'()*+,-

General light sources are difficult to work

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

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 15

 !"#$%&'(")*+'!,-./&0

vPoint source
@Model with position and color
@Distant source = infinite distance away
(parallel)
vSpotlight
@Restrict light from ideal point source
vAmbient light
@Same amount of light everywhere in scene
@Can model contribution of many sources and
reflecting surfaces
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 16
 !"#$%&'()*+',

vThe smoother a surface, the more reflected light is

concentrated in the direction a perfect mirror would
reflected the light
vA very rough surface scatters light in all directions

smooth surface
rough surface
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 17
 !"#$%&'#()*

vA simple model that can be computed rapidly

vHas three components
@Diffuse
@Specular
@Ambient
vUses four vectors
@To source
@To viewer
@Normal
@Perfect reflector

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 18

 !"#$%&'#(%#)*+,

vNormal is determined by local orientation

vAngle of incidence = angle of reflection
vThe three vectors must be coplanar

r = 2 (l · n ) n - l

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 19

 !"#$%&'(")*+,&-".%

vPerfectly diffuse reflector

vLight scattered equally in all directions
vAmount of light reflected is proportional to
the vertical component of incoming light
@reflected light ~ cos qi
@cos qi = l · n :if vectors normalized
@There are also three coefficients, kr, kb, kg
that show how much of each color
component is reflected
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 20
 !"#$%&'()!%(*'$#+

vMost surfaces are neither ideal diffusers nor perfectly

specular (ideal reflectors)
vSmooth surfaces show specular highlights due to incoming
light being reflected in directions concentrated close to the
direction of a perfect reflection

specular
highlight

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 21

 !"#$%&'()*+$,-%./)0$%$,1&"'2

vPhong proposed using a term that dropped

off as the angle between the viewer and the
ideal reflection increased
Ir ~ ks I cosaf

shininess coef f
reflected
intensity
incoming intensity
absorption coef
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 22
 !"#$%"&'&'#(($)*#++&,&#'-

vValues of a between 100 and 200 correspond to

metals
vValues between 5 and 10 give surface that look
like plastic
cosa f

-90 f 90
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 23
 !"#$%&'())

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 24

 !"#$%&'($)

vContinue discussion of shading

vIntroduce modified Phong model
vConsider computation of required vectors

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 25

 !"#$%&'()$*+'

vAmbient light is the result of multiple

interactions between (large) light sources and
the objects in the environment
vAmount and color depend on both the color
of the light(s) and the material properties of
the object
vAdd ka Ia to diffuse and specular terms

reflection coef intensity of ambient light

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 26
 !"#$%&'()*(+,#

vThe light from a point source that reaches a

surface is inversely proportional to the
square of the distance between them
vWe can add a factor of the
form 1/(ad + bd +cd2) to
the diffuse and specular
terms
vThe constant and linear terms soften the
effect of the point source
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 27
 !"#$%&'()*+,-
vIn the Phong Model, we add the results from
each light source
vEach light source has separate diffuse,
specular, and ambient terms to allow for
maximum flexibility even though this form
does not have a physical justification
vSeparate red, green and blue components
vHence, 9 coefficients for each point source
@Idr, Idg, Idb, Isr, Isg, Isb, Iar, Iag, Iab
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 28
 !"#$%&"'()%*+$%#&$,

vMaterial properties match light source

properties
@Nine absorbtion coefficients
ükdr-(kdg-(kdb-(ksr-(ksg-(ksb-(kar-(kag-(kab
@Shininess coefficient a

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 29

 !""#$%&'(&)*+&,-.(-$+$)/

For each light source and each color

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

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

For each color component

we add contributions from
all sources
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 30
 !"#$%&'(%")($%&*#+,-
Compute light at a point by:
! ! ! !
é Ir ù é k r r
I
d d max(l .n , 0) + k r r
I
s s (max( r .v , 0))a
+ k r r
a Ia
ù
ê ú ê g g !! !! a
ú
I = ê I g ú = ê kd I d max(l.n, 0) + k s I s (max(r.v, 0)) + ka I a ú
g g g g

ê !! !! b b ú
êë I b úû a
êë kd I d max(l.n, 0) + k s I s (max(r.v, 0)) + ka I a úû
b b b b

Where:

é kdr k s
r
k ù
r
a
ê g g gú - are materials’ properties
ê kd k s k ú
a
- In Opengl: specified by glMaterialfv(.)
ê kdb k b
k úû
b
ë s a

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 31

 !"#$%&'(%")($%&*#+,-
Compute light at a point by:
! ! ! !
é Ir ù é k r r
I
d d max(l .n , 0) + k r r
I
s s (max( r .v , 0))a
+ k r r
a Ia
ù
ê ú ê g g !! !! a
ú
I = ê I g ú = ê kd I d max(l.n, 0) + k s I s (max(r.v, 0)) + ka I a ú
g g g g

ê !! !! b b ú
êë I b úû a
êë kd I d max(l.n, 0) + k s I s (max(r.v, 0)) + ka I a úû
b b b b

Where:

é I dr I s
r
I ù
r
a
ê g g gú - are light intensities
êId I s I ú
a
- In Opengl: specified by glLightfv(.)
ê I db I b
I úû
b
ë s a

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 32

 !"#$%$&#'()"*+'!"#&,

vThe specular term in the Phong model is

problematic because it requires the
calculation of a new reflection vector and
view vector for each vertex
vBlinn suggested an approximation using the
halfway vector that is more efficient
vhalfway angle is half of angle between n and h if
vectors are coplanar

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 33

 !"#$%&'()&*$+#,-./

vh is normalized vector halfway between l

and v h = ( l + v )/ | l + v |
2y = f
y : halfway angle

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 34

 !"#$%&'()&(*+,-*.&/)0'12

vReplace (v · r )a by (n · h )b
v b is chosen to match shininess
v Resulting model is known as the modified
Phong or Blinn lighting model
@Specified in OpenGL standard

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 35

 !"#$%&'()$$*+)%",)$%*-#./(
Compute light at a point by:
! ! ! !
é Ir ù é k r r
I
d d max(l .n , 0) + k r r
I
s s (max( h .n , 0))a
+ k r r
a Ia
ù
ê ú ê g g !! !! a
ú
I = ê I g ú = ê kd I d max(l.n, 0) + k s I s (max(h.n, 0)) + ka I a ú
g g g g

ê !! !! b b ú
êë I b úû a
êë kd I d max(l.n, 0) + k s I s (max(h.n, 0)) + ka I a úû
b b b b

Where:
! !
! l +v
h= ! ! is half vector
|l +v|
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 36
 !"#$%&'

Only differences in
these teapots are
the parameters
in the modified
Phong model

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 37

 !"#$%&'&(")*"+*,-.&"/0

v l and v are specified by the application

vCan computer r from l and n
vProblem is determining n
vFor simple surfaces it is can be determined but
how we determine n differs depending on
underlying representation of surface
vOpenGL leaves determination of normal to
application
@Exception for GLU quadrics and Bezier surfaces
(Chapter 11)
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 38
 !"#$%&'()*#"+

vEquation of plane: ax+by+cz+d = 0

vFrom Chapter 4 we know that plane is
determined by three points p0, p2, p3 or
normal n and p0
vNormal can be obtained by
n = (p2-p0) × (p1-p0)

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 39

 !"#$%&'("')*+,#,

vImplicit function f(x,y.z)=0

vNormal given by gradient
vSphere f(p)=p·p-1
v n = [∂f/∂x, ∂f/∂y, ∂f/∂z]T=p

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 40

 !"#"$%&#'()*+#$

vFor sphere
x=x(u,v)=cos u sin v
y=y(u,v)=cos u cos v
z= z(u,v)=sin u
v Tangent plane determined by vectors
∂p/∂u = [∂x/∂u, ∂y/∂u, ∂z/∂u]T
∂p/∂v = [∂x/∂v, ∂y/∂v, ∂z/∂v]T

vNormal given by cross product

n = ∂p/∂u × ∂p/∂v
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 41
 !"#"$%&'(%)"

vWe can compute parametric normals for

other simple cases
@Quadrics
@Parameteric polynomial surfaces
ü*"+,"$')-$.%/"'0%1/2")

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 42

 !"#$%&'(%&()*+&,-

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 43

 !"#$%&'($)

vIntroduce the OpenGL shading functions

vDiscuss polygonal shading
@Flat
@Smooth
@Gouraud

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 44

 !"#$%&'(&)$#(*+&%,-.'(/

1. Enable shading and select model

2. Specify normals
3. Specify material properties
4. Specify lights

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 45

 !"#$%&'

vIn OpenGL the normal vector is part of the state

vSet by glNormal*()
@glNormal3f(x, y, z);
@glNormal3fv(p);

vUsually we want to set the normal to have unit

length so cosine calculations are correct
@Length can be affected by transformations
@Note that scaling does not preserved length
@glEnable(GL_NORMALIZE) allows for
autonormalization at a performance penalty
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 46
 !"#$%&'("#')#*%+,&-
n
plane n ·(p - p0 ) = 0 p2

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

normalize n ¬ n/ |n| p0 p
1

Note that right-hand rule determines outward face

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 47

 !"#$%&"'()*#+&"'

vShading calculations are enabled by

@glEnable(GL_LIGHTING)
@Once lighting is enabled, glColor() ignored
vMust enable each light source individually
@glEnable(GL_LIGHTi) i=0,1…..
vCan choose light model parameters
@glLightModeli(parameter, GL_TRUE)
üGL_LIGHT_MODEL_LOCAL_VIEWER +,(",-(./0(
/&12%&34&"'(+&/-#"-(5&0607(#//.12-&,"(&"(8#%8.%#-&,"
üGL_LIGHT_MODEL_TWO_SIDED /*#+0/($,-*(/&+0/(,3(
2,%4',"/(&"+020"+0"-%4

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 48

 !"#$%$%&'(')*$%+',$&-+'.*/01"

vFor each light source, we can set an RGBA for the

diffuse, specular, and ambient components, and for
the position
GL float diffuse0[]={1.0, 0.0, 0.0, 1.0};
GL float ambient0[]={1.0, 0.0, 0.0, 1.0};
GL float specular0[]={1.0, 0.0, 0.0, 1.0};
Glfloat light0_pos[]={1.0, 2.0, 3,0, 1.0};

glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0);
glLightv(GL_LIGHT0, GL_POSITION, light0_pos);
glLightv(GL_LIGHT0, GL_AMBIENT, ambient0);
glLightv(GL_LIGHT0, GL_DIFFUSE, diffuse0);
glLightv(GL_LIGHT0, GL_SPECULAR, specular0);

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 49

 !"#$%&'()%&*)!"+('$",&

vThe source colors are specified in RGBA

vThe 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
vThe coefficients in the distance terms are by
default a=1.0 (constant terms), b=c=0.0 (linear and
quadratic terms). Change by
a= 0.80;
glLightf(GL_LIGHT0, GLCONSTANT_ATTENUATION, a);
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 50
 !"#$%&'($)

vUse glLightv to set

@Direction GL_SPOT_DIRECTION
@Cutoff GL_SPOT_CUTOFF
@Attenuation GL_SPOT_EXPONENT
ü*+#"#+$&#,-%.$#./#)af

-q f q

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 51

 !"#$%"&'($)*+,&-)./,

vAmbient 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
vOpenGL also allows a global ambient term
that is often helpful for testing
@glLightModelfv(GL_LIGHT_MODEL_AMBIENT,
global_ambient)

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 52

 !"#$%&'($&)*'+",-./0
vLight sources are geometric objects whose
positions or directions are affected by the model-
view matrix
vDepending 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
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 53
 !"#$%&"'()%*+$%#&$,

vMaterial properties are also part of the OpenGL

state and match the terms in the modified Phong
model
vSet by glMaterialv()
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};
GLfloat shine = 100.0
glMaterialf(GL_FRONT, GL_AMBIENT, ambient);
glMaterialf(GL_FRONT, GL_DIFFUSE, diffuse);
glMaterialf(GL_FRONT, GL_SPECULAR, specular);
glMaterialf(GL_FRONT, GL_SHININESS, shine);

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 54

 !"#$%&'$(&)'*+&!'*,-

vThe default is shade only front faces which works

correctly for convex objects
vIf we set two sided lighting, OpenGL will shade
both sides of a surface
vEach side can have its own properties which are
set by using GL_FRONT, GL_BACK, or
GL_FRONT_AND_BACK in glMaterialf

back faces not visible back faces visible

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 55
 !"#$$#%&'(&)"

vWe can simulate a light source in OpenGL

by giving a material an emissive component
vThis component is unaffected by any
sources or transformations
GLfloat emission[] = 0.0, 0.3, 0.3, 1.0);
glMaterialf(GL_FRONT, GL_EMISSION, emission);

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 56

 !"#$%&#"'$()

vMaterial properties are specified as RGBA

values
vThe A value can be used to make the
surface translucent
vThe default is that all surfaces are opaque
regardless of A
vLater we will enable blending and use this
feature
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 57
 !""#$#%&$'

vBecause material properties are part of the state, if we

change materials for many surfaces, we can affect
performance
vWe can make the code cleaner by defining a material
structure and setting all materials during initialization
typedef struct materialStruct {
GLfloat ambient[4];
GLfloat diffuse[4];
GLfloat specular[4];
GLfloat shineness;
} MaterialStruct;
vWe can then select a material by a pointer

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 58

 !"#$%"&'#()*'+,&%

vShading calculations are done for each

vertex
@Vertex colors become vertex shades
vBy default, vertex shades are interpolated
across the polygon
@glShadeModel(GL_SMOOTH);
vIf we use glShadeModel(GL_FLAT); the
color at the first vertex will determine the
shade of the whole polygon
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 59
 !"#$%"&'(")*+#,

vPolygons have a single normal

@Shades at the vertices as computed by the
Phong model can be almost same
@Identical for a distant viewer (default) or if
there is no specular component
vConsider model of sphere
vWant different normals at
each vertex even though
this concept is not quite
correct mathematically
Computer Graphics: Chapter 05 – Lighting and Shading Slide: 60
 !"##$%&!%'()*+

vWe can set a new normal

at each vertex
vEasy for sphere model
@If centered at origin n = p
vNow smooth shading
works
vNote silhouette edge

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 61

 !"#$%&$'()*+

vThe previous example is not general

because we knew the normal at each vertex
analytically
vFor polygonal models, Gouraud proposed
we use the average of the normals around a
mesh vertex
n = (n1+n2+n3+n4)/ |n1+n2+n3+n4|

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 62

 !"#$%#&'%(&')*"(+',*%&-(+

vGouraud Shading
@Find average normal at each vertex (vertex
normals)
@Apply modified Phong model at each vertex
@Interpolate vertex shades across each polygon
vPhong shading
@Find vertex normals
@Interpolate vertex normals across edges
@Interpolate edge normals across polygon
@Apply modified Phong model at each fragment

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 63

 !"#$%&'(")

vIf the polygon mesh approximates surfaces with a high

curvatures, Phong shading may look smooth while Gouraud
shading may show edges
vPhong shading requires much more work than Gouraud
shading
@Until recently not available in real time systems
@Now can be done using fragment shaders (see
Chapter 9)
vBoth need data structures to represent meshes so we can
obtain vertex normals

Computer Graphics: Chapter 05 – Lighting and Shading Slide: 64