So far, we've added details to our scene with geometry, vertex colors, and lighting; but often that won't be enough to achieve the look that we want. Wouldn't it be great if we could "paint" additional details onto our scene without needing additional geometry? We can, through a technique called texture mapping. In this chapter, we'll examine how we can use textures to make our scene more detailed.
In this chapter, we'll learn the following:
- How to create a texture
- How to use a texture when rendering
- Filter and wrapping modes and how they affect the texture's use
- Multi-texturing
- Cube mapping
Let's get started!
Texture mapping is, at its most basic, a method for adding detail to the geometry being rendered by displaying an image on the surface. Consider the following image:
Using only the techniques that we've learned so far, this relatively simple scene would be very difficult to build and unnecessarily complex. The WebGL logo would have to be carefully constructed out of many little triangles with appropriate colors. Certainly such an approach is possible, but the additional geometry needed would make it quickly impractical for use in even a marginally complex scene.
Luckily for us, texture mapping makes the above scene incredibly simple. All that's required is an image of the WebGL logo in an appropriate file format, an additional vertex attribute on the mesh, and a few additions to our shader code.