Have a Go: Moving Light

We mentioned before that we use matrices to move the camera around the scene. We can also use matrices to move lights. To do this, perform the following steps:

Open ch03_02_moving-light.html in your editor. The vertex shader is very similar to the previous diffuse model example. However, there is one extra line:

vec3 light = vec3(uModelViewMatrix * vec4(uLightDirection, 0.0));

Here, we are transforming the uLightDirection vector and assigning it to the light variable. Notice that the uLightDirection uniform is a vector with three components (vec3) and that the uModelViewMatrix is a 4x4 matrix. In order to complete the multiplication, we need to transform this uniform into a four-component vector (vec4). We achieve this with the following construct:

vec4(uLightDirection, 0.0);

The uModelViewMatrix matrix contains the Model-View transformation matrix. We will see how all this works in Chapter 4, Cameras. For now, suffice to say that this matrix allows us to update vertices’ positions, and in this example, the light's position as well.
Take another look at the vertex shader. In this example, we are rotating the sphere and the light. Every time the draw function is invoked, we rotate the modelViewMatrix matrix a little bit on the y-axis:

mat4.rotate(modelViewMatrix, modelViewMatrix, angle * Math.PI / 180, [0, 1, 0]);

If you examine the code more closely, you will notice that the modelViewMatrix matrix is mapped to the uModelViewMatrix uniform:

gl.uniformMatrix4fv(program.uModelViewMatrix, false, modelViewMatrix);

Run the example in your browser. You will see a sphere and a light source rotating on the y-axis:

Look for the initLights function and change the light orientation so that the light is pointing in the negative z-axis direction:

gl.uniform3f(program.uLightDirection, 0, -1, -1);

Save the file and run it again. What happened? Change the light direction uniform so that it points to [-1, 0, 0]. Save the file and run it again on your browser. What happened? You should see that changing these values manipulates the light's orientation.
Set the light back to the 45-degree angle by changing the uLightDirection uniform so that it returns to its initial value:

gl.uniform3f(program.uLightDirection, 0, -1, -1);

Go to draw and find the following line:

mat4.rotate(modelViewMatrix, modelViewMatrix, angle * Math.PI / 180, [0, 1, 0]);

Change it to this:

mat4.rotate(modelViewMatrix, modelViewMatrix, angle * Math.PI / 180, [1, 0, 0]);

Save the file and launch it again in your browser. What happens? You should notice that the light moves on a different axis.

What just happened?

As you can 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.