View Full Version : Texturing Pixel Bleeding, UV Spacing & Texture Padding

2010-11-04, 03:16
In this sort of tutorial I will attempt to explain what "Pixel Bleeding" is and also show you how you can avoid it.

What is Pixel Bleeding?

Pixel Bleeding is to put it as simple as possible, pixel colours on a 2D texture image bleeding into each other due to compression or the size of the texture being decreased, like in a MipMap (which BF2 and many other games use MipMaps so its quite important) (http://en.wikipedia.org/wiki/Mipmap).

https://media.realitymod.com/tutorials/pixel_bleeding/before_bleed.png https://media.realitymod.com/tutorials/pixel_bleeding/after_bleed.png

Pixel Bleeding itself can not really be avoided. It can be cut down slightly by using a better image format (if available, which in BF2's case the answer most of the time is no) or it can be cut down by using a better image compression tool, like for DDS images, instead of using the Photoshop DDS plugin, use the NVIDIA Texture Tools 2 (http://developer.nvidia.com/object/texture_tools.html) which will give you a better compression result and will result in less pixel bleeding, but in most cases the difference is marginal.

However saving the texture in a better format or with a better compression tool on its own will not get rid of pixel bleeding, it will only reduce it. The best way to avoid Pixel Bleeding on your models/textures is to simply spacing out your UVs far enough so any bleeding that dose occur on the texture dose not show up on the model.

To demonstrate pixel bleeding I've crated this very simple box with a pyramid on top :)
https://media.realitymod.com/tutorials/pixel_bleeding/pb_01_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_01.jpg)

Here are some basic UVs I've quickly done with no spacing between the UVs:
https://media.realitymod.com/tutorials/pixel_bleeding/pb_02_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_02.jpg)

Now I've made this texture up quickly which gives each face of the UV its own, unique colour that also matches the UVs and then compressed the texture as a .jpg, which is like a .dds but you can see the compression effects better.

Looking at the texture from here you will hardly be able to see any problems with it but when its applied to our model, you can see the pixel bleeding very clearly:
https://media.realitymod.com/tutorials/pixel_bleeding/pb_03_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_03.jpg) https://media.realitymod.com/tutorials/pixel_bleeding/pb_04_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_04.jpg)
https://media.realitymod.com/tutorials/pixel_bleeding/pb_05_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_05.jpg) https://media.realitymod.com/tutorials/pixel_bleeding/pb_06_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_06.jpg)

As you can see, each face is meant to have its own colour but for some reason on the edges of the faces a different colour is "bleeding" into the colour that is meant to be there.
Now if we take a look at our UVs a sec and we can see that the face that has green on the edge, is right next to a green part on the texture map.
https://media.realitymod.com/tutorials/pixel_bleeding/pb_07_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_07.jpg)

If we zoom into the UV map a little more we can see that the green bit is "bleeding" over the edge of the UV its meant to be on and as such, is on the wrong part of our UV map and on the wrong face.
https://media.realitymod.com/tutorials/pixel_bleeding/pb_08_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_08.jpg)

This here is the basic definition of Pixel Bleeding and what you want to try and avoid.....

Also as mentioned above, when a texture is made smaller, like in a mipmap, pixel bleeding becomes much worse so to demonstrate, I've resized the same texture above from a 256x256 texture to a 64x64 texture:

And as we can see, the bleeding is much worse now, as well as the other compression effects.
https://media.realitymod.com/tutorials/pixel_bleeding/pb_10_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_10.jpg) https://media.realitymod.com/tutorials/pixel_bleeding/pb_11_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_11.jpg)
https://media.realitymod.com/tutorials/pixel_bleeding/pb_12_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_12.jpg) https://media.realitymod.com/tutorials/pixel_bleeding/pb_13_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_13.jpg)

How to Avoid Pixel Bleeding

To Avoid Pixel Bleeding you just need to space out your UVs. So here is the same object as above, but this time, with its UVs spread out from each other like so:
NOTE: the more you can spread out your UVs the better. Also try to keep your UVs evenly spaced apart as possible, with setting yourself a general minimum distance between each UV that you shouldn't go under. The distance your UVs need to be apart really depends on your end texture size, with a smaller texture needing a bigger distance and a larger texture needing a smaller distance but really, you want to have a space of no less than 3 pixels when it translates to your final texture image. Also keep in mind your texture size may be down sized for performance reasons so you may not be able to have that huge 2048x2048 texture you where hoping for your pistol.
https://media.realitymod.com/tutorials/pixel_bleeding/pb_14_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_14.jpg)

And here is the texture I've made for it, note that the texture colours for each face go outside the UVs:
https://media.realitymod.com/tutorials/pixel_bleeding/UV2.jpg https://media.realitymod.com/tutorials/pixel_bleeding/pb_15_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_15.jpg)

Now if we look at our model with that texture on it, we can see that there is no sign of pixel bleeding on the edges of the UVs (although you can see a few artifacts from the compression on the pyramid and other places).
https://media.realitymod.com/tutorials/pixel_bleeding/pb_16_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_16.jpg) https://media.realitymod.com/tutorials/pixel_bleeding/pb_17_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_17.jpg) https://media.realitymod.com/tutorials/pixel_bleeding/pb_18_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_18.jpg)

Which if we zoom into the UV with texture, we can see that pixel bleeding is still there on the texture, just that its now outside of our UVs :D
https://media.realitymod.com/tutorials/pixel_bleeding/pb_19_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_19.jpg)

Even when using a 64x64 px texture, pixel bleeding is still not a huge issue, although you can now slightly see it on the edges (as well as the artifacts have gotten much worse :p)
https://media.realitymod.com/tutorials/pixel_bleeding/pb_21_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_21.jpg) https://media.realitymod.com/tutorials/pixel_bleeding/pb_20_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_20.jpg) https://media.realitymod.com/tutorials/pixel_bleeding/pb_22_tn.jpg (https://media.realitymod.com/tutorials/pixel_bleeding/pb_22.jpg)

Other Things to Note

Even thou in this tutorial I say you must keep all your UVs spread out, this dose not mean you should not stitch up UVs, but this means you should only stitch up UVs that are of the same colour and want to share the basic same texture. So the corner of a wooden or metal box meet, you want to stitch up the both sides on that corner as they will be sharing the same texture, with the metal box also most likley sharing a scratch right down the corner on the stitch itself. But where you have two totally different materials on two faces, like for example, a glass window port hole on a tank surrounded by metal, you don't want to really stitch up the window to the metal as then you would have the colour of the metal bleed into the glass, and you don't want that so be smart when your stitching up or spacing out your UVs ;)

I hope you have learnt something from this tutorial and any questions don't be afraid to ask.

Cheers! :D

2010-11-04, 07:48
Interesting and well organised as always Rhino.

2010-11-04, 09:22
very interesting =)

2011-07-18, 02:02
Thanks for this! Loving the big words.