O'Reilly logo

WebGL Game Development by Sumeet Arora

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required