Texture Atlas in OpenGL ES 2.0

Question

I am working on a simple project with OpenGL ES 2.0. It's gone fairly well, but I seem to have hit a spot that is seemingly poorly documented for us beginners. That being, I am trying to utilize a texture atlas. I have searched around a bit, but I can't seem to find any full code examples. Most search results lead to people giving the very basic idea of what they are and how to use them, but never a full example that I can really study.

At the moment I am just trying to load in a set of four or five images from one image atlas and apply them to a single triangle strip. I can section out a specific part of the image as I want, I just can't find any examples on applying more pieces of that image to the same triangle strip.

I don't necessarily need a full tutorial on this (I wouldn't mind one!), but if somebody could point me to some example code that does something similar I'd be quite happy. Thank you very much in advance!

Answer 1

A texture atlas is no different that any other image you load and render using OpenGL, the trick is to adjust the texture coordinates of each vertex of your polygon(s) to include a smaller triangle/rectangle inside that image.

In OpenGL the coordinates of an image start at (0,0) - the lower left corner and end at (1,1) - the top right corner. If you want to map only a region of the image to your polygon assign the texture coordinates by using a normalized size (0.0 - 1.0). ie the middle point of the image would be at coordinates (0.5, 0.5).

To display a triangle strip that renders a rectangle using only the half of the image, your texture coordinates will have to be similar to this:

• (0.0, 0.0) vertex at lower left corner of rectangle
• (0.0, 1.0) vertex at top left corner
• (0.5, 0.0) vertex at lower right corner
• (0.5, 1.0) vertex at top right corner