First Aid: White edges when using transparent textures

  • Under some circumstances textures with an alpha channel may have a white or coloured edge near the transparency edge.

    1 Problem description

    The two images below show a texture (left) and the alphachannel belonging to this texture (right, black parts are considered as transparent).

      


    This is the outcome in LOTUS:

       


    There are white edges, you'll see best at the orange writings.

    2 Reason

    The reason for this behaviour is the scaling of the texture in far distances, several resolutions or field of views and so on. To get a perfect scaling of the texture an interpolation process between several pixels will calculate a value between 0 and 1. At a coloured edge the orange pixel of the non-transparent part of the texture (like the "E" on our writing) will be interpolated with the white pixel nearby, which creates a light orange colour. You won't see the white background at all, but because of the interpolation you may notice it a little bit.

    3 Solution

    The solution is to colour the edge in the main texture (NOT in the alpha channel!). These parts are obviously transparent, but when interpolating LOTUS does calculate the exact value of the edge of the writing.


    So the main texture looks like this:


    The outcome is the following:

       


    So the white edges are no more. :)