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