Power-of-2-sized textures

What is power-of-2-sized texture?

Power of 2 are number of type 2^n, where 'n' is an integer number. You can find power of 2 numbers simply by multiplying the previous power of 2 number by 2.
Here is a little list of power of 2 numbers :
1 2 4 8 16 32 64 128 256 512 1024 2048... and so on...

A power-of-2-sized texture is a texture that both width and height are power of 2 number.
For example, 128x128 is a power-of-2-sized texture. 512x128 is a power-of-2-sized texture.



Why power-of-2-sized textures are better than non-power of 2 one?

Because OpenGL (and video cards) only handle power-of-2-sized textures (for performance issues). Quake3 engine and other games interpolate non-power-of-2 at runtime (when the game loads the level), and transforms them into the closest smaller valid power-of-2-sized textures. But it only supports it roughly, and there are three issue: first there is no reason to waste hard drive space and bandwidth for something that will always be used at a reduced size, second it slows down the loading of your level, and third (the worst) Q3 engine does not resize image with the same quality than Photoshop or The Gimp does, and create ugly blurry texture. Yes you read it! Sometime less is more...



Now the proof!

Let's take a look at what happens in-game with those 4 textures (modified from my map "The Alamo"):



From left to right : 256x512 (power-of-2-sized), 250x500, 130x260, and 256x512 (power-of-2-sized). Click image to see them full-sized.

And here is what you get in-game:
Left : 128x256, right 130x260. Click image to see more detail.

As you can see, the right texture is blurry, and especially if you look at the border.

Left : 250x500, right 256x512. Click image to see more detail.

This time it is more impressive ! You can see that only a few pixels can entirely change the feeling of the texture. Left we have a blurry texture, while the one on the right has sharper detail.

If you look at the first and the second in-game screenshots, you will see that even the 128x256 texture looks better than the 250x500 textures... And that's logical, cause the engine has resized (badly) the 250x500 textures to a 128x256 one, which is the closest power-of-2 size that is smaller than the original one.
And the filesize of the 128x256 textures is 19Ko, when the filsize of the 250x500 texture is 66Ko. Three time the size for something less desirable...
What a waste of quality and of hard-drive space ? (and bandwidth for server with auto-download enabled)

That's why it's bad to use non-power-of-2 sized texture.


So how to efficiently save your work? That's the next tutorial!