The shaders in this chapter will implement Phong shading and the Phong reflection model. Remember that Phong shading interpolates vertex normals and creates a normal for every fragment. After that, the Phong reflection model describes the light that an object reflects as the addition of the ambient, diffuse, and specular interaction of the object with the light sources present in the scene.
To keep consistency with the Material Template Library (MTL) format, we will use the following convention for the uniforms that refer to material properties:
|
Material Uniform |
Description |
|---|---|
|
|
Ambient property |
|
|
Diffuse property |
|
|
Specular property |
|
|
Optical density. We will not use this feature but you will see it on the MTL file. |
|
|
Specular exponent. A high exponent results in a tight, concentrated highlight. Ns values normally range from 0 to 1000. |
|
|
Transparency (alpha channel) |
|
|
Determines the illumination model for the object being rendered. Unlike previous chapters where we had one model for all the objects, here we let the object to decide how it is going to reflect the light. According to the MTL file format specification illum can be: 0: Diffuse on and Ambient off (purely diffuse) 1: Diffuse on and Ambient on 2: Highlight on (Phong illumination model) There are other values that are defined in the MTL specification that we mention here for completeness but that our shaders will not implement. These values are: 3: Reflection on and Ray trace on 4: Transparency: Glass on, Reflection: Ray trace on 5: Reflection: Fresnel on and Ray trace on 6: Transparency: Refraction on, Reflection: Fresnel off and Ray trace on 7: Transparency: Refraction on, Reflection: Fresnel on and Ray trace on 8: Reflection on and Ray trace off 9: Transparency: Glass on, Reflection: Ray trace off 10: Casts shadows onto invisible surfaces |
The shaders that we will use support multiple lights using uniform arrays as we saw in Chapter 6, Colors, Depth Testing, and Alpha Blending. The number of lights is defined by a constant in both the Vertex and the Fragment shaders:
const int NUM_LIGHTS = 4;
We will use the following uniform arrays to work with lights:
|
Light Uniform Array |
Description |
|---|---|
|
|
Ambient property |
|
|
Diffuse property |
|
|
Specular property |
Note
Please refer to ch9_Car_Showroom.html to explore the source code for the shaders in this chapter.
Next, we are going to work on the three main functions that constitute the lifecycle of our WebGL application. These are the configure, load, and render functions.