So far, we've done all of our rendering by using a single texture. However, there are times when we may want to have multiple textures contribute to a fragment to create more complex effects. In such cases, we can use WebGL's ability to access multiple textures in a single draw call, commonly referred to as multi-texturing.

We briefly covered multi-texturing earlier, so let's go back and look at it again. When talking about exposing a texture to a shader as a sampler uniform, we used the following code:

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);

The first line, gl.activeTexture, is the key to utilizing multi-texturing. We use it to tell the WebGL state machine which texture we're going to use in subsequent texture functions. In this case, we passed gl.TEXTURE0, which means that any following texture calls...