Time for action – using multitexturing

1. Open the file ch7_Multitexture.html with your choice of HTML editor.

2. At the top of the script block, add another texture variable:

   var texture2 = null;

3. At the bottom of the configure function, add the code to load the second texture. As mentioned earlier, we're using a class to make this process easier, so the new code is as follows:

   texture2 = new Texture();
   texture2.setImage('textures/light.png');

4. The texture we're using is a white radial gradient that simulates a spot light:

   

5. In the draw function, directly below the code that binds the first texture, add the following to expose the new texture to the shader:

   gl.activeTexture(gl.TEXTURE1);
   gl.bindTexture(gl.TEXTURE_2D, texture2.tex);
   gl.uniform1i(Program.uSampler1, 1);

6. Next, we need to add the new sampler uniform to the fragment shader:

   uniform sampler2D uSampler1;

7. Don't forget to add the corresponding string to the uniformList in the configure function.

8. Finally, we add the code to sample the new texture value...