Detail Without Triangles

Picture a piece of toast. From afar, the toast is a golden rectangular prism. But the surface is not perfectly flat or uniform in color. It's full of holes, which are fossils of the carbon dioxide bubbles generated by the yeast. To render convincing toast, you need to make these irregularities visible.

One way to add detail to a surface is to add more triangles. But this is costly. More and smaller triangles make the modeling process more clumsy, just as sand is harder to build with than bricks. Adding triangles also slows down rendering. The more triangles you have, the more matrix multiplications, clipping, and perspective divisions you have to compute. To achieve fast rendering, you want fewer triangles.

A cheaper way to get detail is to paste an image on the surface of a mesh. The image might even be photo of some real toast. Putting an image on a model to give the appearance of detail is called texturing. The detail is an illusion; no triangles are actually added. The pixels of the texture, which are called texels, provide the detail at a much lower cost than extra triangles.

This renderer uses just 112 vertices to render a piece of low-poly toast:

Toggle the texture to see the simple underlying geometry.

To get textures into your own graphical applications, you follow these broad steps:

  1. Read the image in from disk or the network.
  2. Upload the pixel data to the graphics card.
  3. Render a model in which each vertex has been mapped to some pixel in the image. These 2D texture coordinates are uploaded as vertex attributes, just like the positions and normals.
  4. In the fragment shader, use the fragment's texture coordinates to look up data in the texture and apply it to the fragment's color in some way.

Read on to learn more about each of these steps.