Applying Textures - WebGL Game Development - page 151

Understanding cubemaps and
multi-texturing
So far, we have used only 2D textures in our model. However, at the beginning of
the chapter, we also mentioned another kind of texture called cubemaps. Cubemaps
are often used in games to approximate an environmental reflection on the surface
of a model. Let's say you have a shiny mirror in your game and you want to show
the reflection of the left wall, or when the mirror rotates, you want to show the
reflection of the right wall. The biggest application of cubemaps in gaming is skylight
illumination and skyboxes.

A cube texture map consists of six two-dimensional images that correspond to the
faces of a cube. The s , t , and p coordinates represent a direction vector emanating
from the center of the cube that points toward the texel to be sampled, as shown in
the following figure:

<> s, t, p

For cubemap sampling, first we need to select a face, and then use 2D coordinates to
sample a color value from the selected image. Which face to sample is determined by
the sign of the coordinate with the largest absolute value. The other two coordinates
are divided by the largest coordinate and remapped to the range 0 to 1 using
formulas. Well, we do not need to do any of the calculations or even need to know
the formulas. The GPU does all that for us. We only need to specify the 2D textures
of the six sides of the cubemap. We specify each face of the cubemap with positive-Z,
positve-Y, positive-X, negative-X, negative-Y, and negative-Z directions. The
texImage2D function is called as follows:

gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 0, gl.RGBA, gl.RGBA,
gl.UNSIGNED_BYTE, image);