Applying Textures - WebGL Game Development - page 122

Texture wrapping
As seen in the previous example in the Applying a texture to the square section, let's
first take a quick look at the texture mapping coordinates.

var textureCoordinates = [
1.0, 1.0,
0.0, 1.0,
1.0, 0.0,
0.0, 0.0
];

The texture coordinates lie in the range 0.0 to 1.0. However, imagine if we use values
like -1 to 2.0 or 1.5 to 2.0. Now, these values lie outside the previous range. Which
texel from the texture should WebGL pick? Let's think for a second and evaluate
our options. If the s value goes outside the range, we could say that if s > 1.0 , then
s = 1.0 and if s < 0.0 , then s = 0 . Here, we are clamping, which means that we are
always picking the border values if the value goes outside the range. Or, if we say
the texture is cylindrical and s = 1.2 , then the integer value is dropped and we get the
value 0.2. So, texture wrapping describes which texel to pick if the values lie outside
the range [0.0, 1.0]. The wrapping mode is specified separately for both s and t values.

The following table lists the different wrapping modes that we can use in the
texParameteri API call:

Wrapping mode Description

CLAMP_TO_EDGE If the sorted values exceed the range 0 to 1, then the

border values will be taken.

REPEAT This is the default texture wrapping mode. It gives

a tiled look to the texture, just like a brick wall. The
integer of the s or t value is ignored, for example: (0.5,
1.6) becomes (0.5, 0.6).

MIRRORED_REPEAT In this mode, if the integer part of the real number

( s or t ) is even, the integer part is ignored. If the integer
part is odd, then the integer part is ignored and the
fraction is subtracted from 1, for example: (2.4, 3.2)
becomes (0.4, 0.8) and (3.2, 2.4) becomes (0.8, 0.6).