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!

How to save your texture?

Exporting a texture

It's always a good idea to work on supersized image, but when the time come to export it as a texture, you have to choose the right size and the right format.



Resizing your image

Choosing the right size of your texture is one of the more important thing in texturing.

If you resize it too small, the texture will look blurry in-game at close range, and even at mid and long range if you shrink it too much. This will look bad, and not realistic.

If you resize it too big, then the texture will look fine everywhere, but it will use too much VRAM (video memory). In case your video card doesn't have enough memory, the texture will be stored in your RAM, hurting your game framerate badly (all textures that are outside the VRAM will be copied through the AGP/PCI port for every screen refresh). However, if your texture can't be seen at close-range, you will never have benefit of such a size, cause only mipmap of your texture will be used. A mipmap is a 2 time smaller texture, used everytime the texture displayed size (in texel) is far too smaller than the original size (in pixel), for performance issue (of course this depends on your actual screen size).
There is no need to have a texture that is always zoomed out in-game compared to its real size, for example, if you run the game at 1280x1024, and you have a 512x512 texture that never take one quarter of your screen, your texture (cycle) will take at best 256x256 pixel of your screen. So it is wise to reduce it to a 256x256 one.

When you have made up your mind, go to your favorite software, resize it and export it.
If you are using Photoshop or The GIMP, always use the bicubic algorithm! Last edition of Photoshop have the bicubic sharpen algorithm that do it very well.

Remember that your texture must be a power-of-2-sized one (look at this post for the why).

Note : Don't worry if resizing a texture to a power-of-2 one wastes the height/width ratio: you just have to set a different X and Y scale for that texture in Radiant ! As you can see in my previous blog post, my painting texture look thin, but in-game, it has a good ratio.

Now you have to choose the right file format.



The TGA format

You should use the TGA format only if you need alpha channels for that texture.

TGA is a non-destructive file format. You will have max quality using this, but in fact, JPEG (at 80% quality) looks the same, but takes 10 times less space most of time.
If you have semi-transparent textures or see-through textures, you must use TGA because of the alpha-channel requirements (too bad PNG-24 isn't handled by Q3).
If you are using Photoshop, save it as 32bits, enable alpha channel, and enable RLE compression (a rough non-destructive compression).



The JPEG format

If you are running Photoshop, don't save with Save As, use Save for Web instead, because filesizes are more optimized (especially for small files).
Disable the progressive checkbox, Q3 doesn't know how to handle progressive jpeg (this feature is only useful for web-browsers, allowing pictures to be displayed with multiple passes, with less blur at each pass).
Enable the optimize checkbox (reduces filesize).
Use a quality of 80%. Never drop quality under 80% because of the famous JPEG artifact! Nobody wants crappy textures! It's useless to use a quality over 80%, you wont see any change, but fileweight will increase drasticly.

How to refresh an old texture

In my map Alamo, I wanted an old western wallpaper, so I have looked at the standard Smokin' Guns textures set and picked this one:


(click it to see it full sized)

Run the game, get close and look at the wall... Damn... has a lot of noise and artifacts... Even at mid-range...
Because it's very difficult to find western wallpaper pictures over internet (never found one), I have decided to remake this one.

Because it is an old wallpaper, it was very simple. I don't need sharp detail... Just need the original color and contour...

First I have resized it to 512x512 (with bicubic algorithm of course!).
Then I have applied a gaussian blur of 2 pixels (photoshop : filter>blur>gaussian blur). This removes all JPEG artifacts, but cause a loss of detail... But I don't care: just want the color and basic shape !

Then I have applied an artistic filter, I don't remember which one, sorry , maybe sponge. Just test many of them (photoshop : filter>artistic>?), until it looks good. Because it is a wallpaper, it was logical that an artistic filter may look good. Now I have a nice texture with a painting feeling.

Finally, I have added a canvas effect texture (sorry, I run a french version of photoshop... something like : filter>textures>textures, then choose canvas or something you like).

After only five minute, I have made this texture:


(click it to see it full sized)


Nice! Isn't it?