Is it ok to use NPOT textures with OpenGL in this situation?

Question

I drew some icons to use on orthographic projection and instead of loading each icon file individually as a texture I thought of putting them all together in one single file. Now I have a file 72x36 which is not a power of two. This texture is divide in two icons, both with 36px wide.

I didn't remember about this restriction when designing the texture but I eventually noticed it when the texture didn't load because I have an if statement checking if the texture is a power of two, if it's not, than the texture is not loaded. I commented that code to see if the texture loaded anyway and it did. The texture was loaded and properly applied to the area I wanted.

To draw the first icon I do this:

glBindTexture(GL_TEXTURE_2D, gameTextures.hudKeys);
glBegin(GL_QUADS);
    glTexCoord2f(0, 0); glVertex2f(0, 36);
    glTexCoord2f(0.5, 0); glVertex2f(36, 36);
    glTexCoord2f(0.5, 1); glVertex2f(36, 0);
    glTexCoord2f(0, 1); glVertex2f(0, 0);
glEnd();

And for the second this:

glBindTexture(GL_TEXTURE_2D, gameTextures.hudKeys);
glBegin(GL_QUADS);
    glTexCoord2f(0.5, 0); glVertex2f(0, 36);
    glTexCoord2f(1, 0); glVertex2f(36, 36);
    glTexCoord2f(1, 1); glVertex2f(36, 0);
    glTexCoord2f(0.5, 1); glVertex2f(0, 0);
glEnd();

Which is easy to understand, I only use half of the texture depending on which icon I want.

I don't want my icons to be distorted or stretched, the icons were designed with 36x36 in mind. If I use a power of 2 texture, for instance 128x64 (that's the lowest possible to fit a 72x36 texture), how do I properly map the 36x36 texture area I want to the quad?

Or maybe I can keep doing using this NPOT texture or should I still really create a power of 2 texture? How to fix the problem above then?

Answer 1

Generally speaking you should use POT textures so you get the benefits of texture compression. For example, a PVR compressed texture at 128x64 @ 4bpp is going to be smaller in video memory than an uncompressed 72x36.

Calculating UVs is pretty simple. Just plug in pixel values over the size (in pixels) of the source image. So if you were to just expand the image you made to the next largest POT, the upper left bit of the second icon would be at ( 36/128, 0/64 ). And so on.

Answer 2

Combining images into a single texture is fine, but that texture really needs to be dimensions of P0T. You can avoid distortion by keeping up with the image size, its offset, and the texture size.

For example, say you have two small 12x12 images that you load and want to combine. You'd need 24x12 for both, but this isn't a power of two, so you'd find the next highest POT dimensions and get 32x16. Now keep up with the image sizes, and their offsets, and when rendering use these to find your texture coordinates.

I'll define some variables to walk through it:

tw, th = texture width (32) and texture height (16)
iw, ih = image width (12) and image height (12)
iox, ioy = image offset x (0 and 12) and y (0 and 0)

so to draw a given image, you'd calculate your top left as:

(tw / iox), (th / ioy)

and your bottom right as:

(tw / (iox + iw)), (th / (ioy + ih))

It helps to draw this out. The POT is very important, though!