Before we apply our texture to our surface, we need to figure out which part of the texture maps onto which part of the surface. We do this through another vertex attribute known as texture coordinates.
Texture coordinates are two-element float vectors that describe a location on the texture that coincides with that vertex. You may think that it would be most natural to have this vector be an actual pixel location on the image; instead, WebGL forces all of 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 shown in the following image:
This means that, in order 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.
This may seem strange at first; after all, it's easier to determine the pixel coordinates of a particular point than the percentage of an image's height and width of the point's location. That said, there is a benefit to the coordinate system that WebGL uses.
For example, we could build a WebGL application comprised of high resolution textures. Then, at some later point, we will receive feedback that the textures are taking too long to load or the application is causing devices to render slowly. As a result, we may decide to offer a lower resolution texture option for these situations.
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 normalized 0 to 1 coordinate range, the smaller textures can use the exact same coordinates as the larger ones and still display correctly.
Figuring out texture coordinates for your mesh is often a tricky part of creating 3D resources, especially with complex meshes.
A polygon mesh is a collection of vertices, edges, and faces that defines the shape of a polyhedral object in 3D computer graphics and solid modeling.
Fortunately, most 3D modeling tools come with excellent utilities for laying out textures and generating texture coordinates—this process is called unwrapping.
Just as vertex position components are commonly represented with (x, y, z), texture coordinates also have a common symbolic representation. Unfortunately, it's not consistent across all 3D software applications. OpenGL and WebGL refer to these coordinates as s and t for the x and y components, respectively. However, DirectX and many popular modeling packages refer to them as u and v. As a result, you'll often see people referring to texture coordinates as "UVs" and unwrapping as "UV Mapping."
To be consistent with WebGL's usage, we will use st for the remainder of this book.