Using multiple textures

Up to this point, we've been doing all of our rendering using a single texture at a time. As you've seen this can be a useful tool. But there are times where we may want to have multiple textures that contribute to a fragment to create more complex effects. For these cases, we can use the WebGL's ability to access multiple textures in a single draw call, otherwise known as multitexturing.

We've already brushed up against multitexturing earlier in a chapter, 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 multitexturing. We use it to tell the WebGL state machine which texture we are going to be manipulating with, in subsequent texture functions. In this case, we passed gl.TEXTURE0, which means that any following texture calls (such as gl.bindTexture) will...