Real-Time 3D Graphics with WebGL 2 - Second Edition

Using Texture Coordinates

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