9.4 - Ambient Lighting

This lesson discusses how to implement ambient lighting.

An Ambient Lighting Model

Ambient light is “background” light. It bounces everywhere in all directions and comes from no specific place. Ambient light illuminates every face of a model regardless of the face’s orientation to a light source. All faces get the same amount of ambient light.

Ambient light is modeled as a three component vector, where each value represents a percentage of color that is visible. For example, the ambient “color” (0.2, 0.2, 0.2) means that 20% of an object’s color is visible, while (0.5, 0.5, 0.5) means that 50% of an object’s color is visible. The component values are typically all the same, but you can bring out one color over others by using independent values. An ambient “color” of (0.5, 0.1, 0.1) would give the impression that a scene has a red light source somewhere in the background.

The Math for Ambient Light

The math for ambient light is trivial. An RGB value that represents the color of an object is multiplied by the ambient percentages to calculate a pixel’s final color.

A WebGL Demo Program for Ambient Light

Experiment with the following WebGL program by modifying the ambient light percentages. You can manipulate the percentages independently, or all at the same time.

Manipulate the percentages of ambient light.

The left canvas shows the relative location of the camera and an object.
The right canvas shows the scene from the camera's vantage point with ambient light used to color the faces.
Please use a browser that supports "canvas" Please use a browser that supports "canvas"
Manipulate the camera's location and center of view: Manipulate the ambient percentages:
eye (0.0, 0.0, 5.0) center (0.0, 0.0, 0.0) ambient percentages (0.2, 0.2, 0.2)
X: -5.0 +5.0 X: -5.0 +5.0 Red   : 0.0 1.0
Y: -5.0 +5.0 Y: -5.0 +5.0 Green: 0.0 1.0
Z: -5.0 +5.0 Z: -5.0 +5.0 Blue  : 0.0 1.0
Ambient percentage = 0.2
0.0 1.0

Open this webgl program in a new tab or window

As you experiment with the demonstration program, please make sure you observe the following characteristics of ambient light.

  • The relative position of an object, a light source, and/or a camera has no impact on ambient lighting.
  • Ambient lighting is a percentage of an object’s color that is visible from any direction. Ambient light can never make an object’s color “brighter”; it can only make an object’s color “darker”. The purpose of ambient lighting is not to make objects “darker,” but rather to make sure that a certain percentage of a face’s color is always visible, even if a face has no direct light from a light source.
  • Common practice is to use the same value for each component of the ambient percentages. This maintains the relative color of objects in a scene. But you can simulate a “background” light of any color to create special effects.
  • Ambient lighting is typically not used by itself. It is typically combined with diffuse and specular lighting and this will be demonstrated in the next lesson.

Ambient Lighting in Shader Programs

Please study the following shader programs. Then compare the programs to the comments below.

Vertex Shader

The vertex shader is very simple since it does not have to initialize “camera space” geometry values for the fragment shader.

// Vertex Shader
precision mediump int;
precision mediump float;

// Scene transformations
uniform mat4 u_PVM_transform; // Projection, view, model transform

// Light model
uniform vec3 u_Ambient_color;

// Original model data
attribute vec3 a_Vertex;
attribute vec3 a_Color;

// Data (to be interpolated) that is passed on to the fragment shader
varying vec4 v_Color;

void main() {

  // Pass the vertex's color to the fragment shader.
  v_Color = vec4(a_Color, 1.0);

  // Transform the location of the vertex for the rest of the graphics pipeline
  gl_Position = u_PVM_transform * vec4(a_Vertex, 1.0);
  • The uniform variable u_Ambient_color contains the percentages of color for the ambient lighting model.

Fragment Shader

The fragment shader sets a fragment’s color as a percentage of the object’s color. Note that when you multiple two vectors in the shader language it performs component-wise multiplication. That is, suppose a = <a0,a1,a2> and b = <b0,b1,b2>. Then a * b is equal to a 3-component vector <a0*b0, a1*b1, a2*b2>.

// Fragment shader program
precision mediump int;
precision mediump float;

// Light model
uniform vec3 u_Ambient_color;

// Data coming from the vertex shader
varying vec4 v_Color;

void main() {

  vec3 color;

  // Component-wise product; that is:
  // ambient_red * color_red, ambient_green * color_green, ambient_blue * color_blue
  color = u_Ambient_color * vec3(v_Color);

  // Ambient color does not affect the alpha value of the object's color.
  gl_FragColor = vec4(color, v_Color.a);
  • Note that ambient color does not affect the alpha component of the pixel’s color.

Type of Light Source

Ambient lighting is not based on the type of light sources in a scene. Therefore, the example WebGL program above would be the same for any scene with any type of light sources.


ambient lighting
Light that can’t be associated with any specific light source. It is light that has no associated location or direction.
Next Section - 9.5 - Combining Ambient, Diffuse, and Specular Lighting