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:

This means that to map a vertex to the center of any texture, you would give it a texture coordinate of [0.5, 0.5]. This coordinate system holds true even for rectangular textures.

At first this may seem strange. After all, it's easier to determine what the pixel coordinates of a particular point are than what percentage of an image's height and width that point is at, but there is a benefit to the coordinate system that WebGL uses.

Let's say you create a WebGL application with some very high resolution textures. At some point after releasing your application, you get feedback from users saying that the textures are taking too long to load, or that the large textures are causing their device to render slowly. As a result, you decide to offer a lower resolution texture option for these users.

If your texture coordinates were defined in terms of pixels, you would now have to modify every mesh used by your application to ensure that the texture coordinates match up to the new, smaller textures correctly. However, when using WebGL's 0 to 1 coordinate range, the smaller textures can use the exact same coordinates as the larger ones and still display correctly!

Figuring out what the texture coordinates for your mesh should be, especially if the mesh is complex, can be one of the trickier parts of creating 3D resources, but fortunately most 3D modeling tools come with excellent utilities for laying out texture coordinates. This process is called Unwrapping.