Ch11 Color and Shading Models MCA (1)

Chapter 11
Color and Shading Models

(Based on Hearn and Baker and
Schaum Outline Series)
Viewing Models
Need for different models
1. Light and Color Models: Properties of light and
representation of colour schemes on the computer.
2. Illumination Models: Computation of color intensity
using Phong model.
3. Shading Models: To rendering the intensity at every point
of the surface.
sukhjeet@DCS.PbiUnivPta
Contents
1. Light and Color (Not in Syllabus)

2. Illumination Models
3. Texture Surface Patterns
4. Displaying Light Intensities
5. Interpolative shading models
Color Models
– There are many color models. These are related to
subjective description of colors. A model can be
• Additive: Start with no light, and add red green and blue light to
make white and complementary colours
• Subtractive: Start with white light, and subtract red green and blue
light to achieve complementary colours and black
– The choice of a particular model depends on the context in
which we want to describe colors. Example color models
are:
• RGB
• YIQ
• CMY and CMYK
• HSI
November 1, 2024 Computer Graphics 4
RGB Color Model
– Based on Tristimulus theory of vision our eyes perceive
color through the stimulation of three visual pigments in
the cones of retina.
– These visual pigments have peak sensitivity at wavelengths
of about 630 nm, 530 nm, and 450 nm
– It is an additive color model, as any color C is expressed as
c = rR+gG+bB
where r, g, and b values range from 0 to 1 and designate
the amount of primaries needed to match C

RGB Color Model
http://en.wikipedia.org/wiki/RGB
RGB Color Model
– Each RGB value is given a number from 0 – 255 starting

from Black, R = 0 , B = 0, G = 0 to White, R = 255 B =
255 B = 255
Thus 256 colors can be represented by one byte
– Total possible colors from RGB code are
255 x 255 x 255 = 16 581 375 colours
– True colour, but will require 3 bytes per pixel ( 24 bit
colour ).

B.Sc. (Hons) Multimedia Computing Media Technologies
CMY Color Model
– Three secondary colors: Cyan, Magenta, Yellow
– It is a subtractive color model
– Same as RGB except white is at the origin and black is at
the extent of the diagonal
– Instead of mixing colors to add, we put down colors that
subtract light
• Paint, ink, etc.
– Very important for hardcopy devices
• Already white so we can’t add to it!!

CMY Color Model

CMY Color Model
é C ù é1ù é R ù é R ù é1ù é C ù
ê M ú = ê1ú - êG ú and êG ú = ê1ú - ê M ú
ê ú êú ê ú ê ú êú ê ú
êë Y úû êë1úû êë B úû êë B úû êë1úû êë Y úû
White à minus Blue minus Green = Red

CMYK Color Model
– Cyan-Magenta-Yellow-Black, and pronounced as separate
letters. CMYK
– It is also based on the subtractive synthesis model
– CMYK is a color model in which all colors are described as
a mixture of these four process colors.
– CMYK are commonly used for inks.
– CMYK is the standard color model used in offset printing
for full-color documents. Because such printing uses inks
of these four basic colors, it is often called four-color
printing.

Contents
1. Light and Color (Not in Syllabus)

Illumination Models
– Calculate intensity of light at any given point. Surface
rendering algorithms use these models. If we don’t have
lighting effects nothing looks three dimensional as the
RGB values are not sufficient.
The Phong Model
– Developed in 1973 by Phong Bui Tuong – it is a widely
and highly effective method to mimic the reflection of light
from viewer’s eye.
– It is an empirical approach based on basic principles of

physics.
– It is a local illumination model that computes the direct

impact of the light coming from the present light source
whereas a global illumination model includes transparency
and refractions
The Phong Model
– The model computes the direct impact of
1. Diffuse reflection in the presence of ambient light

2. Diffuse reflection in the presence of single point light source
3. Specular reflections in the presence of single point light source
– Can be extended easily for multiple light sources
Example
Ambient Diffuse
Final
Specular Image
Example
Ambient Light
– Why objects not directly lit are typically still visible ?
• e.g., the ceiling in this room, undersides of desks
– They are lit up by reflections from other nearby objects.
– Typical examples are light from

• a cloudy day, moonlight, sunlight scattered by fog or haze
Ambient Light
Properties:
1. Independence of Surface position and orientation: all
surfaces are equally illuminated. However, the amount
reflected depends on surface properties.
2. Independent of direction of light: Has a source, but has
bounced around so much to make it is directionless.
3. Independent of Viewing angle Illumination caused by
Ambient light is also independent of Viewer position.
Ambient light has no spatial or directional characteristics
Ambient Light
4. The total reflected light from a surface is the sum of the

contributions from light sources and reflected light
5. Too expensive to calculate (in real time), so we use a hack

called an ambient light source and incorporate it by simply
setting a general brightness level for a scene.
We will denote this value as Ia
Diffuse Reflection
– Surfaces that are rough or grainy tend to reflect light in all
directions
– This scattered light is called diffuse reflection
Diffuse Reflection
– Diffuse reflectivity as Diffuse-reflection coefficient
• A parameter kd is set for each surface that determines the fraction
of incident light that is to be scattered as diffuse reflections from
that surface
– ka is assigned a value between 0.0 and 1.0

• 0.0: dull surface that absorbs almost all light
• 1.0: shiny surface that reflects almost all light
– ka can be built f( surface texture, colour)
Diffuse Reflection
– In the presence of Ambient Light
– For background lighting effects we can assume that every

surface is fully illuminated by the scene’s ambient light Ia
– Therefore the ambient contribution to the diffuse reflection

is given as:
I amb,diff = k a I a
Diffuse Reflection
– In the presence of Single Point Light Source
– When a surface is illuminated by a light source, the amount
of incident light depends on the orientation of the surface
relative to the light source direction
Diffuse Reflection
Ideal diffuse reflectors
– Surfaces reflect incident light with equal intensity in all
directions.
– At the microscopic level, is a very rough surface
• (real-world example: chalk)
– They reflect according to Lambert’s cosine law. These are
often called Lambertian surfaces.
– Reflected intensity is independent of the viewing direction,
but does depend on the surface orientation with regard to
the light source
Lambert’s Cosine Law
Ideal diffuse surfaces reflect according to Lambert’s
cosine law:
– The radiant energy reflected by a small portion of a
surface area DA from a light source in a given direction q is
proportional to the cosine of the angle between that
direction and the surface normal.
Diffuse Reflection
– The angle between the incoming light direction and a
surface normal is referred to as the angle of incidence given
as θ
Diffuse Reflection
– So the amount of incident light on a surface is given as:
I l ,incident = I l cos q
– Further, as the amount of light reflected by a surface
depends on its colour and texture. Hence we define a
diffuse reflectivity coefficient Kd= f(texture, colour) for a
given surface and model the diffuse reflections as:
I l ,diff = kd I l ,incident
= kd I l cosq
Diffuse Reflection
– Assuming we denote the normal for a surface as N
and the unit direction vector to the light source
as L then:
N × L = cos q
and
ìkd I l ( N × L) if N × L > 0
I l ,diff =í
î 0 if N × L £ 0
Diffuse Reflection
– Combining Ambient And Incident Diffuse Reflections
– To combine the diffuse reflections arising from ambient
and incident light most graphics packages use two separate
diffuse-reflection coefficients:
• ka for ambient light
• kd for incident light
– The total diffuse reflection equation for a single point
source can then be given as:
ìka I a + kd I l ( N × L) if N × L > 0
I diff =í
î ka I a if N × L £ 0
Example
– We need only consider angles from 0° to 90° (Why?)
– A Lambertian sphere seen at several different lighting
angles:
Specular Reflection
– Additionally to diffuse reflection some of the reflected light
is concentrated into a highlight or bright spot
– This is called specular reflection
Specular Reflection
– Shiny surfaces exhibit specular reflection
• Polished metal
• Glossy car finish
– These highlights appear as a function of the viewer’s

position, so specular reflection is viewer dependent
Specular Reflection
– The bright spot that we see on a shiny surface is the result
of near total of the incident light in a concentrated region
around the specular reflection angle
– Ideal specular reflection angle equals the angle of the
incident light
Unit normal Unit normal
to surface in direction
of ideal
Unit vector
specular
toward light
reflection
source
Unit vector
to viewer
The Phong Specular Reflection
Model
– The Phong model sets the intensity of specular reflection as
proportional to the angle between the viewing vector and
the specular reflection vector
Unit normal Unit normal

to surface in direction
of ideal
Unit vector
specular
toward light
reflection
source
Unit vector
to viewer
Model
– The specular-reflection exponent, ns is determined by the
type of surface we want to display
• Shiny surfaces have a very large value (>100)
– Rough surfaces would have a value near 1
Model
– A perfect mirror reflects light only in the specular-
reflection direction
– Other objects exhibit specular reflections over a finite range
of viewing positions around vector R
Model
– The angle f can be varied between 0° and 90° so that cos f
varies from 1.0 to 0.0
– So, the specular reflection intensity is proportional to
cos ns f
Model
specular reflection coefficient ks
– For some materials the amount of specular reflection
depends heavily on the angle of the incident light.
– Fresnel’s Laws of Reflection describe in great detail how

specular reflections behave.
– However, we don’t need to worry about this and instead

approximate the specular effects with a constant specular
reflection coefficient ks
Model
– So the specular reflection intensity is given as:
I l ,spec = ks I l cos fns
– Remembering that V.R = cos f we can say:
ìk s I l (V × R) ns if V × R > 0 and N × L > 0

I l ,spec =í
î 0.0 if V × R < 0 or N × L £ 0
Direction of Ideal Reflection
L R+L = 2 (Cosq) N
2(N.L)N R = 2(N.L)N – L
N
L R
(N.L)N
cos(qi)N
qL qR
qL= qR
Direction of Ideal Reflection
– In stead of going for cumbersome computation we can
estimate the vector R as half way vector as used in Phong
Model. Moreover, the ideal specular reflection may not be
observed in all cases
L +V
H=
L +V
so that
ìk s I l (V × H ) ns if V × H > 0 and N × L > 0
I l , spec =í
î 0.0 if V × H < 0 or N × L £ 0
Example
Combining Diffuse & Specular
Reflections
– For a single light source we can combine the effects of
diffuse and specular reflections simply as follows:
I = I diff + I spec
= I ambdiff + I l ,diff + I l , spec
=k aI a + kd I l ( N × L) + k s I l (V × R) ns
N
Viewer R q q L
a
V
Reflections
– For Color Components
I r =k a ,r I a + k d ,r I l ( N × L) + k s I l (V × R) ns
I g =k a , g I a + k d , g I l ( N × L) + k s I l (V × R) ns
I b =k a ,bI a + k d ,b I l ( N × L) + k s I l (V × R) ns
kd = <0.7, 0.7, 0.3> for yellowish representation

ks is kept same as reflected color is same as
incident color
Reflections
– For multiple light sources we can place n number of light
sources in a scene
[ ]
n
Exam Question
I = I ambdiff + å I l ,diff + I l , spec
Common
l =1
[ ]
n
= k a I a + å I l i k d ( N × Li ) + k s (V × Ri )
ns
i =1
WIREFRAME MODEL WITH AMBIENT LIGHT
WITH DIFFUSE REFLECTION WITH SPECULAR REFLECTION
Try this Demo
• There’s a very nice Java
illumination model demo which
may help you understand the
effects of different kinds of
reflections available at:
http://www.siggraph.org/educatio
n/materials/HyperGraph/illumin/v
rml/pellucid.html
Try playing with the various

parameters and see if you can
predict what the sphere will look
like
Refraction Model
– Translucent surfaces allow some light to penetrate the
surface and emerge from another location on the light.
– Some light might be reflected at the surface.
– Water and glass are translucent surfaces.
– Translucent properties are set somewhat with the alpha

channel, the fourth component in the color settings.
Refraction Model
Refraction Model
– When light is incident upon a translucent surface, part of it
is reflected and part of it is refracted.
– The speed of light is different in different materials, hence
the path of light changes with the change in medium.
Refraction Model
– The direction of the refracted light is specified by the Angle
of refraction which is function of index of refraction of
each material and direction of incident light.
Ql = f(hi ,hr ,Qi)
Qi = Angle of incidence
Ql = Angle of refraction
hi : Index of refraction for material 1
hr : Index of refraction for material 2
Refraction Model
– For thin surfaces, can ignore change in direction
– Assume light travels straight through surface
T @ -L
N
hi = 1.0 for air
hr = 1.5 for crown glass Qi
hi L
hr
T
Qr
Qi
T
Refraction Model
For solid objects, apply Snell’s law:

hi Qi = Angle of incidence
sin Q r = sin Qi Qr = Angle of refraction
hr hi : Index of refraction for light material
hr : Index of refraction for surface material
h r sin Q r = hi sin Qi
N
Qi
hi L
hr
T
Qr
Refraction Model
• To avoid cumbersome computations , the refraction effect
is modeled by simply shifting the path the incident light by
the unit transmission vector T calculated as:
Qi = Angle of incidence
hi hi Qr = Angle of refraction
T = ( cos Qi - cos Q r ) N - L
hr hr hi : Index of refraction for light material
hr : Index of refraction for surface material
• T can be used to find the intersection of refracted light with

objects behind transparent surface.
Refraction Model
– Further if
Index of refraction for S1 ≈ Index of refraction for S2
Þ Angle of refraction ≈ Angle of incidence
– the effect of transparence can be modeled by setting
transparency coefficient as the fraction transmitted as
follows
• KT = 1 for translucent object, KT = 0 for opaque
• 0 < KT < 1 for object that is semi-translucent
• 1 – KT is called the opacity factor
– Total surface intensity can be calculated as
I = (1– KT ) Irefl+ KT Itrans
Try this Demo
• There’s a very nice Java
illumination model demo which
may help you understand the
effects of different kinds of
reflections available at:
• http://www.siggraph.org/educatio
n/materials/HyperGraph/illumin/v
rml/pellucid.html
• Try playing with the various

like
Reflections
Reflection and Refraction
Refraction
Complex Scenes
Complex Scenes
Many Interesting Features
Contents
1. Light and Color

Texture Surface Patterns
– So far: we have displayed smooth surfaces.
– Most objects do not have smooth surfaces. Examples: the

earth, an orange, a vase, a painting, a carpet, grass, …
– Modeling and rendering an object is processed through

several stages:
• Wireframe model
• Smooth surface model
• Surface details added – either by drawing the details directly, or by
applying an image on the surface.
– Applying surface detail can be made through
• Pasting small objects
• Modeling surface details through polygons
• Texture mapping – applying a pattern – a texture – to determine the
color of a surface
• Bump mapping – distorting the shape of an object to create
variations
• Fractal generation
• Reflection or environmental mapping – modeling global reflections
looking like ray-tracing.
– Modeling surface detail through polygons
• When the surface detail presents important regularity.
• Example: squares on a checkerboard, tiles on the floor, floral

design on a carpet.
• Irregular surface could be modeled through small, randomly

oriented polygon facets.
• May modify the illumination, since the new surface illumination

will be predominant over the covered surface.
– Texture mapping consists of mapping
patterns onto the
geometric description of an object.
– Texture pattern are mapped

• either an array of color values
• or as a procedure that
modifies existing color
• or as an image from an image file
Contents
1. Light and Color

Displaying Light Intensities
– Values of intensity given by the illumination models have
to be converted to some allowable intensity levels for a
particular graphics system in use.
– So we will study
• Assignment of intensity level
• Displaying continuous tones
Assigning Intensity Levels
– Assuming that intensity value ranges from 0 to 1 in
normalized environment, the four non zero intensity levels
can be
• ⅛, ¼ , ½ and 1
– If we label them as I0, I1, I2, …. In then
I1 I 2 I
= == n = r
I 0 I1 I n -1
Þ Ik = r k I0
1n
æ1ö
Þ r = çç ÷÷
è I0 ø
or I k = (I 0 )
( n-k ) n
Assigning Intensity Levels
– Thus for a black and white monitor with
• 8 bits per pixel (n = 255)
• I0 = 0.01
• The ratio of successive intensities r = 1.0182
– The 256 intensities are

• 0.0100, 0.0102, 0.0104, 0.0106, 0.0107, 0.0109…………..0.09821,
1.000
– Intensity values will form G.P. and not A.P.
Displaying Continuous Tones
– The human eye can see more than the screens can offer…
– We may need available intensity levels as

• Resolution differ between I/O devices.
– 256/65535/TrueColor Systems.
• Local Color-Space.
– This can be done with quantization. Two such quantization

techniques are
• HALFTONING
• DITHERING
Half toning
– Halftoning - a technique, originally developed for the
printing industry, to reproduce continuous tone images
using printing techniques capable of black and white only
and not shades of gray (Gray Scale).
– A black and white photograph may have hundreds of
shades of gray.
Half toning
– In a black-and-white photograph, for example, a group of
large dots placed closely together appears black.
– A group of smaller dots with larger spaces between them
produces a , gray shade.
– A group of even smaller dots spaced widely apart appears
almost white.
Half toning
– A color photograph may have upwards of three million
colors in it, but most printing presses use only these four
process inks:
• Cyan
• Magenta
• Yellow
• Black
Half toning
– A screen frequency can be represented by a grid like the
one shown in figure.
– Each square in this grid is a halftone cell, capable of
holding one halftone dot.
– Example of Levels of gray:
Halftone Patterns
Halftone Patterns
– Halftone patterns are defined as the cluster of pixels to
represent intensity
• Trade spatial resolution for intensity resolution
– These are also called halftone approximations.
– The approximations or number of patterns depends on

• Grid Size: Number of pixels included in the region
• Level: Number of intensities/colors/levels supported in the system
Halftone Patterns
– Possible halftone patterns using 2X2 pixel grids with bi-
level system
Halftone Patterns
– Intensity levels 0 through 12 obtained with halftone
approximations using 2X2 pixel grids with four-level
system
Halftone Patterns
– Intensity levels 0 through 9 obtained with halftone
approximations using 3X3 pixel grids with Bi-Level
system
Halftone Patterns
– We can see there may be multiple patterns for single
intensity level
– Consider 5 levels using 2X2 pixel grids with bi-level
system
Five levels
(0) (1) (2) (3) (4)
Options for Level 1

(0) (1) (2) (3)
Options for Level 2

(0) (1) (2) (3) (4)
Halftone Patterns
– Type of Halftone patterns
• Symmetric vs. Asymmetric
– Asymmetric are more preferred as they produce
randomness and avoid streaks.
Symmetric patterns Asymmetric patterns

Not Preferred Preferred
Halftone Patterns
Halftone Patterns
– We can design a 3x3 matrix for producing 10 levels from 0
to 9 as follows:
é8 3 7 ù
ê5 1 2ú
ê ú
êë4 9 6úû
– To display a particular intensity level k we turn on all
pixels whose value is <= k
– A pattern generation matrix is designed for kxk grid using
bi Level system that can produce n can be designed as
stored for ready to use.
Half toning
– Halftone approximations has to be constructed to minimize
contouring and other undesirable visual effects. Hence
asymmetric patterns are preferred over symmetric ones.
– The use of NxN grid with L – level system increases the
total number of intensities to be displayed from L to (N2 x
(L-1)+1), but it also reduces the resolution by a factor of
1/N in each direction.
• Trade off spatial for intensity resolution; works well for newspaper
– As the grid sizes increases the grid patterns becomes
apparent.
Original
Half Toning
Dithering
– In the world of computer graphics Dithering refers to the
process of applying patterns to areas of color in order to
simulate a wider color range.
– The dithering process is used for displaying an image on a

device that doesn't have as many colors.
Dithering
– For our discussion let’s assumed that the range of colors (or
intensity levels for gray-scale pictures) of the output device
is fixed - No quantization problem (choosing between
optimal output colors).
– We'll restrict ourselves to gray-scale images. The same can
be extended to handle color images with RGB composition.
Dithering
– Dithering distribute errors among pixels
• Exploit spatial integration in our eye
• Display greater range of perceptible intensities
– Uniform quantization discards all errors
• i.e. all “rounding” errors
Dithering
– Techniques for dithering
• Thresholding.
• Ordered dither
• Random dither; Robert’s algorithm
Dithering – Thresholding
– The simplest and probably the worst for common images.
– There is only one parameter: the threshold.
– Process each point of the input image:
• If ( Intensity > Threshold ) a white point is outputted
• Else a black point is outputted
– Thus if we want to quantize a gray-level image to a binary
color map then:
• Map the upper half of the gray-level scale to white, and the lower
half to black
• a simple threshold operation, preformed independently at each
pixel.
Original image. Simple threshold. n = 0.5
8-bit Gray 1-bit B/W

Errors are low spatial frequencies.
Dithering – Ordered Dither
– Main Component is a dithering matrix
– A matrix of n by n produce (n*n)+1 intensity levels
– The matrix elements are similar to the threshold used in the
previous technique
– Once we have a dithering matrix we can process each point
of the input image: (n is the size of the matrix)
• Get an input pixel (x,y)
• Access the matrix element we'll use :
– ((x mod n),(y mod n))) element of the matrix
• Threshold (x,y) with the matrix element
– For given Dither Patterns the dither matrix is
é8 3 7 ù
ê5 1 2ú
ê ú
êë4 9 6úû
Bayer Ordered Dither Patterns
For all x pixels The dithering matrix (3x3)
For all y pixels
v = Intensity(x,y) 8 3 7
5 1 2
i = x mod 3
4 9 6
j = y mod 3
if v >= M[i,j] then
Set_Pixel(x,y, BLACK)
else
Set_Pixel(x,y, WHITE)
Image
8 7 5 1 6 2 4 5 3 2 Dithering
6 8 3 7 2 2 5 4 3 2 mask
9 4 8 3 7 4 5 2 6 4
8 3 7
3 8 9 7 7 2 2 1 3 2
5 1 2
6 9 2 9 7 4 3 2 2 4
4 9 6
9 4 8 8 8 4 4 8 4 4
Thresholding (5) Ordered Dither
1 1 1 0 1 0 0 1 0 0 0 1 0 0 1 0 0 1 0 0
1 1 0 1 0 0 1 0 0 0 1 1 1 1 1 0 0 1 1 0
1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0
0 1 1 1 1 0 0 0 0 0 0 1 1 0 1 0 0 0 0 0
1 1 0 1 1 0 0 0 0 0 1 1 0 1 1 1 0 1 0 0
1 0 1 1 1 0 0 1 0 0 1 0 1 1 0 0 0 0 0 0
Original image. 4x4 Ordered Dither

Dithering – Random Dither
– Randomize quantization errors
• Errors appear as noise
– Modify the image pixels as

• P(x, y) = trunc(I(x, y) + noise(x,y) + 0.5)
– as compare to
• P(x, y) = trunc(I(x, y) + 0.5) in thresholding.
Original image. Random Dither

Original image. Simple threshold. n = 0.5

Errors are low spatial frequencies.
Original image. 4x4 Ordered Dither

Original image. Random Dither

Contents
1. Light and Color

Interpolative Shading Models
– Keep in mind:
• It’s a fairly expensive calculation
– Several possible answers, each with different implications
for the visual quality of the result
– Shading models dictate how often the color computation is

performed.
SHADING METHODS
POLYGON RENDERING METHODS
CONSTANT SHADING INTERPOLATION SHADING

NO SHADING Used for polyhedron-mesh
Is used for objects defined as
All pixel objects approximation of curved surfaces
polyhedral.
are same
GOURAUD SHADING PHONG SHADING

Interpolate intensity Interpolate surface normal
NO SHADING
Effects of
different
shading
techniques
OBJECT MODEL
Effects of
different
shading
techniques
Interpolative Shading Models
– We will start to look at shading or rendering methods
commonly used in computer graphics
1. Constant surface shading/rendering

2. Gouraud surface shading/rendering
3. Phong surface shading/rendering
Constant Shading
– Also known as flat shading or fast shading it is an
extension to Constant intensity shading.
– The entire object is divided into number of polygons
surfaces called facets.
– Determine the orientation of each facet and does one color
computation for each polygon or facet.
– It is simple, fast (?) and produce better results than no
shading.
Constant Shading
Just add lots and lots of polygons – that makes it SLOW!
Original Faceted Shaded

Constant Shading
– Still it is not realistic as
• For point sources, the direction to light varies across the facet
• For specular reflectance, direction to eye varies across the facet
– We have to determine the orientation of each facet we have
to find the normal for each facet. This approximation
effect the result.
Constant Shading
– It is very useful for quickly displaying the general
appearance of surfaces
– It is more applicable when
• the object must be polyhedron and not an approximation of an
object with a curved surface.
• All light sources illuminating the object are sufficiently far from the
surface so that N.L and the attenuation functions are constant over
the surface.
• The viewing position is sufficiently far from the surface so that V.R
is constant over the surface.
Gouraud Shading
– Gouraud surface shading was developed in the 1970s by
Henri Gouraud while working at the University of Utah
along with Ivan Sutherland and David Evans and is also
called intensity-interpolation surface rendering
– This is the most common approach
• Intensity levels are calculated at each vertex
• Linearly interpolate the resulting colors over faces
– Along edges
– Along scanlines
Gouraud Shading
– To render a polygon, Gouraud surface rendering proceeds
as follows:
1. Determine the average unit normal vector at each vertex of the
polygon
2. Apply an illumination model at each polygon vertex to obtain the
light intensity at that position
3. Linearly interpolate the vertex intensities over the projected area
of the polygon
Gouraud Shading
Step 1: Determine the average unit normal vector at each vertex of the
polygon
The average unit normal vector at v is given as:
N1 + N 2 + N3 + N 4
Nv = N1
N1 + N 2 + N3 + N 4
Nv
or more generally: v
n N4 N2
åN i
Nv = i =1
n
åN
i =1
i N3
Gouraud Shading
Step 2: Apply an illumination model at each polygon vertex
– You have to apply the illumination model to take of
• ambient light I2
• Diffuse reflection N1
• Specular reflection
• Transparency (Refraction) I1 Nv
I
v
I = I diff + I spec N4 N2
= I ambdiff + I l ,diff + I l , spec

=k aI a + kd I l ( N v × L) + k s I l (V × Rv ) ns N3
I4
I3
Gouraud Shading
Step 3: Linearly interpolate the vertex intensities over the projected area of the
polygon along edges and along scan lines
y y4 - y2 y1 - y4
3
I4 = I1 + I2
y1 - y2 y1 - y2
1 y5 - y 2 y3 - y5
I5 = I3 + I2
Scan-line y3 - y 2 y3 - y 2
4 p 5
x5 - x p x p - x4
Ip = I4 + I5
x5 - x4 x5 - x4
2
x
Gouraud Shading
Given the intensities of pixels A, B and C = 200, 150
and 50 respectively, Compute the intensity at point P.
Gouraud Shading
Given the intensities of pixels A, B and C = 200, 150
and 50, respectively, compute the intensity at point P.
Gouraud Shading
Original Gouraud Shaded

Gouraud Shading
– It can be combined with hidden surface algorithms to fill in
visible surfaces/polygons along each scan line.
– It removes the intensity discontinuities associated with the
faceted or flat shading.
– Gouraud is more efficient using an iterative approach
Gouraud Shading
– Objects shaded with Gouraud shading often appears dull,
chalky
– Lacks accurate specular component
• If included, will be averaged over entire polygon
C1
C3
C2 Can’t shade that effect!
Gouraud Shading
– Gouraud shading can introduce anomalies known as Mach
bands i. e. Artifact at discontinuities in intensity or intensity
slope
C1
C4
C3
C2
Discontinuity in rate
sukhjeet@DCS.PbiUnivPta of color change
occurs here
Mach Bands
A psychological phenomenon
whereby we see bright bands
where two blocks of solid colour
meet
A good demo is available to
experiment with this at:
http://www.nbb.cornell.edu/neur
obio/land/OldStudentProjects/cs4
90-96to97/anson/
MachBandingApplet/
Try playing with the various

like
Phong Shading
– A more accurate interpolation based approach for rendering
a polygon was developed by Phong Bui Tuong
– Basically the Phong surface rendering model interpolates
normal vectors instead of intensity values and then
compute the actual intensity value using Phong Lighting
Model.
– Often also called normal or vector – interpolation surface
rendering
Phong Shading
– To render a polygon, Phong surface rendering proceeds as
follows:
1. Determine the average unit normal vector at each vertex of the
polygon
2. Linearly interpolate the vertex normals over the projected area of
the polygon
3. Apply an illumination model at positions along scan lines to
calculate pixel intensities using the interpolated normal vectors
Phong Shading
Step 1: Determine the average unit normal vector at each vertex of the
polygon
The average unit normal vector at v is given as:
N1 + N 2 + N3 + N 4
Nv = N1
N1 + N 2 + N3 + N 4
Nv
or more generally: v
n N4 N2
åN i
Nv = i =1
n
åN
i =1
i N3
Phong Shading
Step 2: Linearly interpolate the vertex Normal over the projected area of the
polygon along edges and along scan lines
N3
y4 - y2 y1 - y4
N1 N4 = N1 + N2
y1 - y2 y1 - y2
y5 - y 2 y3 - y5
N5 = N3 + N2
N4 y3 - y 2 y3 - y 2
Np
Scan line
p N5 x p - x5 x4 - x p
Np = N4 + N5
x4 - x5 x4 - x5
N2
Phong Shading
Step 3: Apply an illumination model at each pixel p
– You have to apply the illumination model to take of
• ambient light
• Diffuse reflection
• Specular reflection
• Transparency (Refraction)
I p =k aI a + kd I l ( N p × L) + ks I l (V × Rp ) ns
Phong Shading
– Phong shading accept the same input as Gouraud shading

and produce very smooth-looking results.
– Remove the effect of Mach Bands.
– More realistic as the phenomena of specular reflection is

maintained.
Phong Shading
– Phong shading is considerably more expensive.
– Phong shading is much slower than Gouraud shading as the

lighting model is revaluated so many times
– However, there are fast Phong surface rendering

approaches that can be implemented iteratively.
– Typically Phong shading is implemented as part of a visible

surface detection technique.
Phong Shading Examples
Phong Shading Examples
Fast Phong Shading
– Fast Phong shading is Gary Bishop’s approximation of the

Phong shading model
– Requires lighting calculations at vertices and edge

midpoints
Fast Phong Quadratic Exponentiation

Shading = interpolation + Texture Map
Fast Phong Shading
– It approximates the intensity calculations using a Taylor-
series expansion and triangular surface patches.
– Every face has vectors A, B, C computed from the three

vertex equations
N k = Axk + Byk + C k = 1,2,3

where ( xk , yk ) represents a vertex position
– This makes sense because Phong shading interpolates
normal vectors from vertex normals
Fast Phong Shading
– Replace N in intensity computations with Ax+By+C for
each x,y value
– Thus omitting reflectivity and attenuation parameters, we

can write the calculations for light-source diffuse reflection
for a surface point (x, y) as
Fast Phong Shading
L.N
I diff =
LN
L.( Ax + By + C )
=
L Ax + By + C
( L. A) x + ( L.B ) y + ( L.C )
=
L Ax + By + C
ax + by + c
=
(dx 2 + exy + fy 2 + gx + hy + i )
L. A L. B
a= ,b = , and so on
L L
Fast Phong Shading
– We can express the denominator in the final equation as
Taylor series expansion and retain sum up to second degree
in x and y.
ax + by + c
I diff =
(dx 2 + exy + fy 2 + gx + hy + i )
= T5 x 2 + T4 xy + T3 y 2 + T2 x + T1 y + T0
where Tk is a function of parameters a, b, c, and so on
Fast Phong Shading
– It reduces the Phong shading calculations
– But it still takes approximately double time to render a

surface than with Gouraud and in some cases takes 6-7
times longer than Gouraud!
No Surface Rendering
Flat Surface Rendering
Gouraud Surface Rendering
Phong Surface Rendering
Comparison
Instructional sessions are OVER !
Prepare Well for Exam!

Ch11 Color and Shading Models MCA (1)

Uploaded by

Copyright:

Available Formats

Ch11 Color and Shading Models MCA (1)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ch11 Color and Shading Models MCA (1)

Uploaded by

Copyright:

Available Formats

Chapter 11

Color and Shading Models

1. Light and Color (Not in Syllabus)

November 1, 2024 Computer Graphics 5

– Each RGB value is given a number from 0 – 255 starting

November 1, 2024 Computer Graphics 7

November 1, 2024 Computer Graphics 9

November 1, 2024 Computer Graphics 10

White à minus Blue minus Green = Red

November 1, 2024 Computer Graphics 11

November 1, 2024 Computer Graphics 12

1. Light and Color (Not in Syllabus)

– It is an empirical approach based on basic principles of

– It is a local illumination model that computes the direct

1. Diffuse reflection in the presence of ambient light

– Can be extended easily for multiple light sources

– They are lit up by reflections from other nearby objects.

– Typical examples are light from

Ambient light has no spatial or directional characteristics

4. The total reflected light from a surface is the sum of the

5. Too expensive to calculate (in real time), so we use a hack

We will denote this value as Ia

– ka is assigned a value between 0.0 and 1.0

– ka can be built f( surface texture, colour)

– For background lighting effects we can assume that every

– Therefore the ambient contribution to the diffuse reflection

– These highlights appear as a function of the viewer’s

Unit normal Unit normal

– Fresnel’s Laws of Reflection describe in great detail how

– However, we don’t need to worry about this and instead

I l ,spec = ks I l cos fns

– Remembering that V.R = cos f we can say:

ìk s I l (V × R) ns if V × R > 0 and N × L > 0

kd = <0.7, 0.7, 0.3> for yellowish representation

WITH DIFFUSE REFLECTION WITH SPECULAR REFLECTION

Try playing with the various

– Some light might be reflected at the surface.

– Water and glass are translucent surfaces.

– Translucent properties are set somewhat with the alpha

Ql = f(hi ,hr ,Qi)

For solid objects, apply Snell’s law:

• T can be used to find the intersection of refracted light with

• Try playing with the various

1. Light and Color

– Most objects do not have smooth surfaces. Examples: the

– Modeling and rendering an object is processed through

• When the surface detail presents important regularity.

• Example: squares on a checkerboard, tiles on the floor, floral

• Irregular surface could be modeled through small, randomly

• May modify the illumination, since the new surface illumination

– Texture pattern are mapped

1. Light and Color

– The 256 intensities are

– Intensity values will form G.P. and not A.P.

– We may need available intensity levels as

– This can be done with quantization. Two such quantization

– Example of Levels of gray:

– The approximations or number of patterns depends on

Options for Level 1

Options for Level 2