Real-Time 3D Graphics with WebGL 2 - Second Edition

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:

1. 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));

2. 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 ...