Colors and Shading Languages - WebGL Game Development - page 75

The preceding code is the implementation of the Blinn-Phong illumination applied
at each vertex normal (Gouraud shading). Hence, the complete calculation is
done in the vertex shader. In the control code, we associate aVertexPosition
and aVertexNormal with vertex buffers. In the Blinn-Phong model, we pass light
properties, such as ambient, diffuse, specular, and direction, as uniforms from
the control code. Material properties such as ambient, diffuse, and specular are
also passed as uniforms. The eyeVector is the negative of the transformed vertex
position. Hence, we first calculate the transformed vertex position and store it in the
vertexPos4 variable. The important thing to note is that the transformation matrix is
the 4 x 4 matrix as it stores the translation as well as the rotations. Hence, we convert
the vertex position to vector 4. We only need xyz and we ignore the w element to
get the new vertex position which is then held in vertexPos . The eyeVector is the
negative unit vector of the vertex position. The unit vector is calculated using the
normalize() function. Hence, the eyeVector is equal to normalize(-vertexPos) .
Then, we calculate the transformed normal unit vector and store it in a variable
normal. Then, we calculate the Lambert term using the normal and light direction.
If the Lambert term is greater than 0, then we only calculate the Blinn term.
To calculate the Blinn term, we need to first calculate the unit half vector. The half
vector is the unit vector of the sum of the light vector and eye vector. The angle
between the half vector and the vertex normal is calculated by the dot product of the
two. Then, the Blinn term is calculated as specAngle to the power shininess. Finally,
the color is calculated using the following equation:
vColor = uAmbientColor * materialAmbientColor+ uDirectionalColor
*materialDiffuseColor * lambertTerm+uSpecularColor *
materialSpecularColor * specular;
Then, vColor is directly passed to the fragment shader.
The control code for the Gouraud shading for the Blinn-Phong reflection model is
as follows. In the following code snippet, we retrieve the ambient color from the
JSON file:
function loadModel(url){
...
ambientColor=data.materials[0].colorAmbient;
...
}