We have seen an example of a simple scene illuminated using Goraud interpolation and a Lambertian reflection model. We have also seen the immediate effects of changing uniform values for the Lambertian lighting model.

We have mentioned before that we use matrices to move the camera around the scene. Well, we can also use matrices to move lights!

What can you conclude? As you see, the vector that is passed as the third argument to mat4.rotate determines the axis of the rotation. The first component corresponds to the x-axis, the second to the y-axis and the third to the z-axis.

In contrast with the Lambertian reflection model, the Phong reflection model considers three properties: the ambient, diffuse, and specular. Following the same analogy that we used in the previous section:

Final Vertex Color = Ia + Id + Is

where:

Ia = Light Ambient Property * Material Ambient Property
Id = Light Diffuse Property * Material Diffuse Property * Lambert coefficient
Is = Light Specular Property * Material Specular Property * specular coefficient

Please notice that:

Based on our knowledge of the Phong reflection model, let's see how to calculate the specular coefficient in ESSL:

float specular = pow(max(dot(R, E), 0.0), f );

where:

E is the view vector or camera vector.

R is the reflected light vector.

f is the specular exponential factor or shininess.

R is calculated as:

R = reflect(L, N)

where N is the vertex normal considered and L the light direction that we have been using to calculate the Lambert coefficient.

Let's take a look at the ESSL implementation for the vertex and fragment shaders.

Vertex shader:

attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat4 uNMatrix;
uniform float uShininess;
uniform vec3 uLightDirection;
uniform vec4 uLightAmbient;
uniform vec4 uLightDiffuse;
uniform vec4 uLightSpecular;
uniform vec4 uMaterialAmbient;
uniform vec4 uMaterialDiffuse;
uniform vec4 uMaterialSpecular;
varying vec4 vFinalColor;
void main(void) {
vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
vec3 N = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
vec3 L = normalize(uLightDirection);
float lambertTerm = clamp(dot(N,-L),0.0,1.0);
vec4 Ia = uLightAmbient * uMaterialAmbient;
vec4 Id = vec4(0.0,0.0,0.0,1.0);
vec4 Is = vec4(0.0,0.0,0.0,1.0);
Id = uLightDiffuse* uMaterialDiffuse * lambertTerm;
vec3 eyeVec = -vec3(vertex.xyz);
vec3 E = normalize(eyeVec);
vec3 R = reflect(L, N);
float specular = pow(max(dot(R, E), 0.0), uShininess );
Is = uLightSpecular * uMaterialSpecular * specular;
vFinalColor = Ia + Id + Is;
vFinalColor.a = 1.0;
gl_Position = uPMatrix * vertex;
}

We can obtain negative dot products for the Lambert term when the geometry of our objects is concave or when the object is in the way between the light source and our point of view, in either case the negative of the light-direction vector and the normals will form an obtuse angle producing a negative dot product, as shown in the following figure:

For that reason we are using the ESSL built-in clamp function to restrict the dot product to the positive range. In the case of obtaining a negative dot product, the clamp function will set the lambert term to zero and the respective diffuse contribution will be discarded, generating the correct result.

Given that we are still using Goraud interpolation, the fragment shader is exactly as before:

#ifdef GL_ES
precision highp float;
#endif
varying vec4 vFinalColor;
void main(void)
{
gl_FragColor = vFinalColor;
}

In the following section, we will explore the scene and see what it looks like when we have negative Lambert coefficients that have been clamped to the [0,1] range.