O'Reilly logo

WebGL Beginner's Guide by Brandon Jones, Diego Cantor

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

Using texture coordinates

So now that we have our texture ready to go, we need to apply it to our mesh somehow. The most basic question that arises then is what part of the texture to show on which part of the mesh. We do this through another vertex attribute named texture coordinates.

Texture coordinates are two-element float vectors that describe a location on the texture that coincides with that vertex. You might think that it would be most natural to have this vector be an actual pixel location on the image, but instead, WebGL forces all the texture coordinates into a 0 to 1 range, where [0, 0] represents the top left-hand side corner of the texture and [1, 1] represents the bottom right-hand side corner, as is shown in the following image: ...

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