WebGL Beginner's Guide

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