Let's cover an example showcasing the preceding concepts in action:

1. Open the ch03_05_wall.html file in your browser. You will see something similar to the following screenshot:

2. Open the ch03_05_wall.html file in a code editor.
3. Go to the vertex shader. Make sure that you identify the attributes, uniforms, and varyings that are declared there.
4. Go to the fragment shader. Notice that there are no attributes here, because attributes are exclusive to the vertex shader.

5. Go to the init function. Verify that we are calling initProgram and initLights there.
6. Go to initProgram. Make sure that you understand how the program is built and how we obtain references to attributes and uniforms.
7. Go to initLights. Update the values of the uniforms, as shown here:

function initLights() {
  gl.uniform3fv(program.uLightDirection, [0, 0, -1]);
  gl.uniform4fv(program.uLightAmbient, [0.01, 0.01, 0.01, 1]);
  gl.uniform4fv(program.uLightDiffuse, [0.5, 0.5, 0.5, 1]);
  gl.uniform4f(program.uMaterialDiffuse, 0.1, 0.5, 0.8, 1);
}

8. Notice that one of the updates consists of changing from uniform4f to uniform4fv for the uMaterialDiffuse uniform. 
9. Save the file.
10. Open it again (or reload it) in your browser. What happened?
11. Let's do something a bit more interesting. We are going to create a key listener so that every time we hit a key, the light orientation changes.
12. Right after the initLights function, write the following code:

function processKey(ev) {
  const lightDirection = gl.getUniform(program, program.uLightDirection);
  const incrementValue = 10;

  switch (ev.keyCode) {
    // left arrow
    case 37: {
      azimuth -= incrementValue;
      break;
    }
    // up arrow
    case 38: {
      elevation += incrementValue;
      break;
    }
    // right arrow
    case 39: {
      azimuth += incrementValue;
      break;
    }
    // down arrow
    case 40: {
      elevation -= incrementValue;
      break;
    }
  }

  azimuth %= 360;
  elevation %= 360;

  const theta = elevation * Math.PI / 180;
  const phi = azimuth * Math.PI / 180;

  // Spherical to cartesian coordinate transformation
  lightDirection[0] = Math.cos(theta) * Math.sin(phi);
  lightDirection[1] = Math.sin(theta);
  lightDirection[2] = Math.cos(theta) * -Math.cos(phi);

  gl.uniform3fv(program.uLightDirection, lightDirection);
}

13. This function processes the arrow keys and changes the light direction accordingly. There’s a bit of trigonometry (Math.cos, Math.sin) involved, but we are simply converting the angles (azimuth and elevation) into Cartesian coordinates.
14. Please note that we get the current light direction by using the following function:

const lightDirection = gl.getUniform(program, program.uLightDirection);

15. After processing the key strokes, we can save the updated light direction with the following code:

gl.uniform3fv(program.uLightDirection, lightDirection);

16. Save the work and reload the web page:

17. Use the arrow keys to change the light direction.
18. If you have any problems during the development of this exercise or just want to verify the final result, please check the ch03_06_wall_final.html file, which contains the completed exercise.

What just happened?

In this exercise, we created a keyboard listener that allows us to update the light's orientation so that we can move it around the wall and see how it reacts to surface normals. We also saw how the vertex shader and fragment shader input variables are declared and used. We learned how to build a program by reviewing the initProgram function. We also learned about initializing uniforms in the initLights function. Finally, we studied the getUniform function to retrieve the current value of a uniform. Although we haven't covered the examples entirely, this exercise was intended to familiarize you with vertex and fragment shaders so that you can implement various light-shading and reflection models.