Illumination and Shading

Illumination and Shading

• Illumination and shading are two
complementary aspects in graphics that add
realism to rendered scenes
• Illumination refers to use of lights in virtual
world
• Shading refers to effects that lights have on 3D
objects in the scene
• Many kinds of illumination models and shading
models are available in 3D graphics
 Illumination Model
• Describe the interaction between the light sources
and the surfaces
• Light sources(lighting model)
– Point lights
– Directional light
– Spotlights
• Surfaces(Phong reflection model)
– Ambient reflection
– Diffuse reflection
– Specular reflection
 Light Source Models
• Simple mathematical light source models:
– Point light
– Directional light
– Spot light
 Point Light Source
• Models Omni-Directional Point Source (E.g.,
Bulb)
• Light rays are emitted uniformly in all
directions
• Described by
– Intensity
– Position
– Attenuation factor
 Point Light Source
• As the light emitted from a light source travels
through space its intensity decreases. This is
called attenuation.
– Example: a traffic light will not be able to
illuminate an object 2km away.
• The decrease in the light source is inversely
proportional to the squared distance from the
object. 1/ d 2 l
– It decreases by
 Point Light Source
• Problem with 1 / d l2
– Too much intensity variation for objects that are close to
the light source
– Too little intensity variation for objects that are far away
• Solution: Use the following function instead
1
f atten (d l ) 
a0  a1d l  a2 d l2
• The constants can be adjusted to produce better
attenuation effects.
• For a light source that is at infinity, we do not need to
use attenuation.
– We can assume all the objects are equidistant from the
light source and receive same amount of light.
 Directional Light Source
• Models Point Light Source at
Infinity (E.g., Sun)
• Rays from a light source at
infinity travel in the same
direction
• Described by
– Intensity
– Direction
• Since the light vector doesn’t
change, directional lights are
the simplest to compute.
 Spotlights
• Models Point Light Source with Direction
• Described by
– Intensity
– Position
– Direction
– Angular limit
– Attenuation
 Spotlights
• The illumination is brightest along the axis of the
cone, decreases from the center to the edge of the
cone, and drops to zero outside the cone
• Objects outside the light cone will not be illuminated
 Spotlights
• The cosine of the angle
between the light
direction vector and
object direction is given
by: cos   V  V
obj light

• If cos  cos l then

the object is within the
light cone (assuming  isl
between 0 and 90
degrees)
 Reflectance Model
• Based on model proposed by Phong there are
three types of material-light interactions.
– Ambient reflection
– Diffuse reflection
– Specular reflection
 Ambient Light
• Reflected light from the environment and the nearby
objects cause other objects to illuminate
• Also called background light
• Constant color reflected from all points on the
surface.
• Tells us how bright the surface will look like when no
light source can directly reach the surface
• When used alone, does not produce very interesting
pictures
 Ambient Light
• We can use an ambient intensity parameter Ia that
describes the level of ambient light in a scene.
• Every object in the scene will be illuminated by this
amount independent of the surface orientation and
viewer location.
• But different surfaces may reflect different amount of
ambient light based on their absorbance/reflectance
properties.
– We can model this by a constant factor for each surface:

ka I a
Ambient Light

Ambient lighting only

 Diffuse Reflection
• The light that is reflected in all directions is called
diffuse reflection.
• The reflected light is independent of the viewing
position (equally bright from all viewing directions)
• But the light position with respect to the surface
orientation is important to determine the light
reflected from the surface.
 Diffuse Reflection
• Orientation of the surface determines the amount of
light incident on the surface

• Given the angle  between the surface normal and

the incident light direction, we can write the diffuse
reflection equation as: I k I
l , diff d l ,incident

 k d I l cos 
Combining Ambient and Diffuse

k a I a  k d I l (N  L), if N  L  0
I l ,diff 
 ka I a , if N  L  0

Psource  Psurface
L
Psource  Psurface
 Combining Ambient and Diffuse

Ambient lighting only With diffuse lighting

 Specular Reflection
• Models reflections on shiny surfaces (polished
metal, chrome, plastics, etc.)
• Light reflected from a certain spot on the
object is concentrated and appears as a lot
brighter compared to other spots.
• Specular reflection is dependent on the light
direction, surface orientation, and viewer
position.
 Specular Reflection
●
The specular reflection angle equals angle of incidence
●
The specular reflection is visible only at directions close to R
●
Shiny surfaces like mirrors have a narrow specular reflection
range (given as parameter ns, specular-reflection exponent.)

k s I l ( V  R ) n s , if V  R  0 and N  L  0
I l , spec 
 0.0, if V  R  0 and N  L  0
 Specular Reflection

Diffuse Reflection Diffuse and Specular

Reflection
 RGB Colour Considerations
• For an RGB colour description each intensity
specification is a three element vector
• So, for each light source:
I l  I lR , I lG , I lB 
• Similarly all parameters are given as vectors:
k a  k aR , k aG , k aB  k d  k dR , k dG , k dB 

k s  k sR , k sG , k sB 
 RGB Colour Considerations
• Each component of the surface colour is then
calculated with a separate expression
• For example:
I lR,diff  k dR I lR ( N  L)
I lG,diff  k dG I lG ( N  L)
I lB,diff  k dB I lB ( N  L)
Lighting in OpenGL
 Create/Enable lights
• To use lighting in OpenGL, first you must enable
lighting, through a call to glEnable(GL _LIGHTING).
• OpenGL allows the user to create at least 8 light
sources, named GL LIGHT0 through GL LIGHT7.
• The properties of each light source is set by the
command glLight*(name, property, propertyValue)
• This command takes three arguments,
– the name of the light,
– the property of the light to set, and
– the value of this property.
 Create/Enable lights
• Let us consider a light source 0, whose
position is (2.0, 4.0, 5.0, 1.0) in homogenous
coordinate, and has
– Red ambient intensity : (0.9, 0.0, 0.0)
– White diffuse and specular intensities, given as the
RGB triple (1.0, 1.0,1.0).
 Create/Enable lights
GLfloat ambIntensity[] = {0.9, 0.0, 0.0, 1.0};
GLfloat diffIntensity[] = {1.0, 1.0, 1.0, 1.0};
GLfloat speIntensity[] = {1.0, 1.0, 1.0, 1.0};
GLfloat position[] = {2.0, 4.0, 5.0, 1.0};

glEnable(GL_LIGHTING); // enable lighting

glEnable(GL_LIGHT0); // enable light 0

// set up light 0 properties

glLightfv(GL_LIGHT0, GL_AMBIENT, ambIntensity);
glLightfv(GL_LIGHT0, GL_DIFFUSE, diffIntensity);
glLightfv(GL_LIGHT0, GL_SPECULAR, speIntensity);
glLightfv(GL_LIGHT0, GL_POSITION, position);
Defining Surface Materials (Colors)
• When lighting is in effect,
– colors of the object is specified by setting the material
properties of the objects to be rendered.
– OpenGL computes the color based on the lights and
these properties.
• Surface properties are assigned to vertices.
– In smooth shading, this vertex information (for colors
and normals) are interpolated across the entire face.
– In flat shading the information for the first vertex
determines the color of the entire face.
Defining Surface Materials (Colors)
• Surface material properties are specified by glMaterialf*()
– glMaterialf*(face, parameterName, parameterValue);

• The first argument indicates which face we are coloring

– (GL_FRONT, GL_BACK, or GL_FRONT_ AND _BACK).
• The second argument indicates the parameter name
– (GL_EMISSION, GL_AMBIENT, GL _DIFFUSE, GL_ SPECULAR, GL_
SHININESS).
• The last parameter is the value (either scalar or vector)
Defining Surface Materials (Colors)-Example

GLfloat mat_ambient[] = { 0.7, 0.7, 0.7, 1.0 };

GLfloat mat_diffuse[] = { 0.1, 0.5, 0.8, 1.0 };
GLfloat mat_specular[] = { 1.0, 1.0, 1.0, 1.0 };
GLfloat low_shininess[] = { 5.0 };
GLfloat mat_emission[] = {0.3, 0.2, 0.2, 0.0};
Defining Surface Materials (Colors)-Example

/* draw sphere with diffuse and specular reflection;

low shininess; no ambient and emission
*/
glMaterialfv(GL_FRONT, GL_DIFFUSE, mat_diffuse);
glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular);
glMaterialfv(GL_FRONT, GL_SHININESS, low_shininess);
glutSolidSphere(1.0, 16, 16);
Defining Surface Materials (Colors)-Example

/* draw sphere with diffuse and specular reflection

and low shininess
*/

glMaterialfv(GL_FRONT, GL_DIFFUSE, mat_diffuse);

glMaterialfv(GL_FRONT, GL_SPECULAR,
mat_specular);
glMaterialfv(GL_FRONT, GL_SHININESS,
low_shininess);
glutSolidSphere(1.0, 16, 16);
 GL_CULL_FACE and GL_NORMALIZE
• GL_CULL_FACE:
– Enabling this option allows you to specify which face
(back or front) that you would like to have culled.
– To specify the face use the command
– glCullFace(GL_FRONT) or glCullFace(GL_BACK)
• GL _NORMALIZE:
– Enabling this option causes all normal vectors to be
normalized to unit length automatically.
– To enable this option: glEnable(GL_NORMALIZE);
 Computing Surface Normals
• Normals by Cross Product:
– Given three (non collinear) points on a polygonal
surface, P0, P1, and P2,
– we can compute a normal vector by forming two
vectors and taking their cross product.
• u = P1 − P0 v = P2 − P0
• n = normalize(u X v):
– This will be directed to the side from which the
points appear in counterclockwise order.
Surface Rendering Methods
 Surface Rendering: Shading
• Determine a Color for Each Filled Pixel
• How to Choose a Color for Each Filled Pixel
– Each illumination calculation for a ray from the
eyepoint through the view plane provides a
radiance sample
 Shading Methods
• Ray Casting
– Polygon Shading

• Ray Tracing

• Radiosity
 Ray Casting
• Simplest Shading Approach
– Perform independent lighting calculation for every
pixel

I  I E  K A I AL  i ( K D N  Li I i  K S V  R i  I i )
n
 Polygon Shading
• Can Take Advantage of Spatial Coherence
– Illumination calculations for pixels covered by
same primitive are related to each other

I  I E  K A I AL  i ( K D N  Li I i  K S V  R i  I i )
n
 Polygon Shading Algorithms
• Flat Shading

• Gouraud Shading

• Phong Shading
 Flat Shading
• Illuminated only by directional light sources
– Diffuse or viewed from infinitely far away
 Flat Shading
• One Illumination Calculation per Polygon
– Assign all pixels inside each polygon the same
color
 Flat Shading
• Objects Look Like They are Composed of
Polygons
– Not so good for ones with smooth surfaces
 Gouraud Shading
• Smooth Surface
– Represented by polygonal mesh with a normal at
each vertex
 Gouraud Shading
• One Lighting Calculation per Vertex
– Assign pixels inside polygon by interpolating colors
computed at vertices N1
Viewer V1 L1 Light

N2
N3

Polygon
 Gouraud Shading
• Bilinearly Interpolate Colors at Vertices Down
and Across Scan Lines
A  I1 1   I 2 B  I1 1   I 3

I1

I  1   A  B
I2
I3
 Gouraud Shading
• Produces Smoothly Shaded Polygonal Mesh
– Piecewise linear approximation
– Need fine mesh to capture subtle lighting effects

Flat Shading Gouraud Shading

 Phong Shading
• What if Polygonal Mesh is too Coarse to
Capture Illumination Effects in Polygon
N1
Interiors?
Viewer V1 L1 Light

N2 N3

Polygon
 Phong Shading
• One Lighting Calculation per Pixel
– Approximate surface normals for points inside polygons by
bilinear interpolation of normals from vertices
N1
Viewer Light
N
V L
N2
N3

Polygon
 Phong Shading
• Bilinearly Interpolate Normals at Vertices
Down and Across Scan Lines
A  N1 1   N 2 N1 B  N1 1   N 3

α β
γ
N2
N3

N  1   A  B
 Phong Shading
Flat

Gouraud Phong
Texture Mapping
 What is texture mapping?
• Application of textures to surfaces of 3d
objects to produce photo-realistic images.

No texture mapping With texture mapping

Examples of texture mapped scenes
Examples of texture mapped scenes
 What is a texture?
• A texture image is a rectangular array of pixel data

• Usually a 2D array, but can be 1D or 3D

• A "texture pixel" is called a "texel"

• Can contain color, luminance and/or alpha

information
 What information does a texture
contain?
• A one component texture contains
Luminance, Intensity, or Alpha data.
• Examples: Wood, grass, sand
 What information does a texture
contain?
• A two component texture contains Luminance
and Alpha (transparency) data.
• Examples: Trees, clouds
 What information does a texture
contain?
• A three component texture contains Red,
Green, and Blue values.
• Examples: Fabrics, bricks
 What information does a texture
contain?
• A four component texture contains Red,
Green, Blue, and Alpha values.
• Examples: Objects
 Loading texture data
• OpenGL has no built-in mechanism for loading textures.
– OpenGL does not provide functions to read an image
file into a texture array in memory. You have to fill the
components of the texture array by yourself.
• However, there are texture loaders (free source code) that
you can use to read PNG, RGB, BMP, etc. image files into a
texture array in an OpenGL program.
– BMP loader
• http://users.ox.ac.uk/~orie1330/bmploader.html
– glpng library:
• http://www.fifi.org/doc/libglpng-dev/glpng.html
 Texture Mapping Process
• Applying texture images to polygons.
• The basic texture mapping steps are:
• Specify the texture.
– glTexImage
– gluScaleImage
• Indicate how the texture is to be applied
to each pixel.
– glTexEnv
– glTexParameter
• Enable texture mapping.
– glEnable
• Draw the scene, providing geometric and
texture coordinates.
– glTexCoord
 Specifying a Texture

• glTexImage2D(GL_TEXTURE_2D, level,
internalFormat, width, height, border, format,
type, image);
– level: specifies level resolution (if 0 it is the highest)
– internalFormat/format: specifies format of the data
eg. GL_RGB
– type: type of each element such as: GL_UNSIGNED_BYTE
– Width and height must be a power of 2.
 What if the texture is the wrong size?
• glTexImage2D() requires a texture whose pixel
dimensions are powers of two
• If necessary, use the OpenGL utility routine
gluScaleImage() to scale the image
• Pass the scaled image to glTexImage2D()
 Scaling texture images

• GLint gluScaleImage( GLenum format, GLsizei

widthin, GLsizei heightin, GLenum typein, const
void *datain, GLsizei widthout, GLsizei
heightout, GLenum typeout, void *dataout )
– format specifies the format of the pixel data
• GL_RGB, GL_RGBA, etc.
– typein/typeout specifies the type
• GL_UNSIGNED_INT, GL_INT, GL_FLOAT, etc.
 Texture coordinates
• Texture coordinates are part of the data that is
associated with each vertex.
• A 2D texture is treated as a 1x1 square whose
texture coordinates go from 0.0 to 1.0 in each
dimension.
• Texture coordinates are usually specified with
(s, t)
• Texture coordinates are assigned to each
vertex of a polygon.
• Texture coordinates are interpolated as a
polygon is filled.
• Texture filters control how the interpolation is
performed
 Assigning texture coordinates to 3D
object vertices
• void glTexCoord2f (s, t)

glBegin( GL_QUADS );
glTexCoord2fv( t0 );
glVertex3fv( v0 );
glTexCoord2fv( t1 );
glVertex3fv( v1 );
glTexCoord2fv( t2 );
glVertex3fv( v2 );
glTexCoord2fv( t3 );
glVertex3fv( v3 );
glEnd();
 Which Texel Goes With Which Pixel?

• One texel rarely corresponds to one pixel on

the final screen image
Texture information Texture information
must be magnified must be minified

OpenGL provides several filters to magnify or minify a texture to make a

trade-off between speed and image quality
 Magnification/Minification Filters
• void glTexParameterf(GL_TEXTURE_2D,
GL_TEXTURE_MAG_FILTER, param )
– param specifies the option
• GL_NEAREST to choose the texel nearest to the texture
coordinate computed for the pixel.
• GL_LINEAR to use the weighted average of the four
texels nearest to the texture coordinate computed for
the pixel.
 Multiple Textures
• Most of the time you will want to apply different
textures to different objects on the scene.
• OpenGL provide you texture objects to
manipulate different textures you have.
• A set of textures and their related states can be
treated as a single texture object.
• You bind a name with a texture object when you
create it, then define the image data and
parameters of the texture
 Multiple Textures
• As you render your scene, bind the name of each
desired texture object to the appropriate texture
target.
– The texture names become aliases for the textures
currently bound to them
• Since binding (reusing) a texture takes less time
than defining (and reloading) one, this is a more
efficient way to switch from one texture to another.
– So, if you are using more than one texture, always set
up the textures as texture objects!
 Using Texture Objects
• void glGenTextures(GLsize n, GLuint
*texnames)
– Generate texture names
• void glBindTexture(GL_TEXTURE_2D, GLuint
texname)
– Create a new texture object and assign it a name
(first time)
– Call with texname = 0 to stop using texture
objects (unbind)
• void glDeleteTextures ( sizei n, uint *textures )
 Example
static GLuint texnames[2];
glGenTextures(2, texnames); /* generate unused
texture names */
/* bind, then define, each texture */
glBindTexture(GL_TEXTURE_2D, texnames[0]);
glTexParameteri(GL_TEXTURE_2D,
GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, 4, 64, 64, 0,
GL_RGBA, GL_UNSIGNED_BYTE, redtex);
 Example
glBindTexture(GL_TEXTURE_2D, texnames[1]);
glTexParameteri(GL_TEXTURE_2D,
GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, 4, 64, 64,
0, GL_RGBA, GL_UNSIGNED_BYTE, greentex);
...
glBindTexture(GL_TEXTURE_2D, texnames[1]);
drawTexturesPolygon(); /* uses greentex */
glBindTexture(GL_TEXTURE_2D, texnames[0]);
drawTexturesPolygon(); /* uses redtex */
 Enabling Texture Mapping
• glEnable (GL_TEXTURE_2D)
 Advanced Topics
• Applying textures to curved surfaces smoothly
• Multiple levels of detail: mipmaps

• Changing the texture environment: Specifying how the

texture colors interact with the original polygon colors.
 Changing Texture Environment
• glTexEnvf(GL_TEXTURE_ENV,
GL_TEXTURE_ENV_MODE, GL_MODULATE);

• Tells OpenGL to apply lighting and coloring

effects to the texture.
Texture Mapping Example

The geometric model

Texture Mapping Example
The texture
Texture Mapping Example

Texture mapped object