- Open the file
ch7_Texture_Wrapping.htmlusing your HTML5 Internet browser.
- The cube shown has texture coordinates that range from -1 to 2, which forces the texture wrapping mode to be used for everything but the center tile of the texture.
- Experiment with the controls along the bottom to see the effect that the different wrap modes have on the texture.
Let's look at each of the wrap modes and discuss how they work.
This wrap mode rounds any texture coordinates greater than 1 down to 1 and lower than 0 up to 0, "clamping" the values to the 0-1 range. Visually, this has the effect of repeating the border pixels of the texture indefinitely once the coordinates go out of the 0-1 range. Note that this is the only wrapping mode that is compatible with NPOT textures.
This is the default wrap mode, and the one that you'll probably use most often. In mathematical terms this wrap mode simply ignores the integer part of the texture coordinate. This creates the visual effect of the texture repeating as you go outside the 0-1 range. This can be a useful effect for displaying surfaces that have a natural repeating pattern to them, such as a tile floor or brick wall.
The algorithm for this mode is a little more complicated. If the coordinate's integer portion is even, the texture coordinates will be the same as with REPEAT. If the integer portion of the coordinate is odd, however, the resulting coordinate is 1 minus the fractional portion of the coordinate. This results in a texture that "flip-flops" as it repeats, with every other repetition being a mirror image.
As was mentioned earlier, these modes can be mixed and matched if needed. For example, consider the following code snippet:
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
It would produce the following effect on the texture from the sample:
