Erste Hilfe: Weiße Ränder an Texturen mit Transparenz

  • Unter bestimmten Umständen erscheinen an Texturen, die per Alpha-Kanal eine Transparenz erhalten haben, weiße oder farbige Ränder an den Kanten zur Transparenz.

    1 Problembeschreibung

    Zu sehen ist hier eine Textur, der mit einem Alpha-Kanal eine Transparenz zugeordnet wurde (links die Textur, rechts der Alphakanal mit Transparenz = schwarz).

      


    Das Ergebnis sieht in LOTUS so aus:

       


    Es bilden sich weiße Ränder, besonders gut zu sehen am orangen Schriftzug.

    2 Ursache

    Die Ursache dafür liegt in der Skalierung der Textur. Jede Textur wird automatisch skaliert, für Perspektiven, Entfernungen, Bildschirmgrößen und so weiter. Um die Textur dafür perfekt zu vergrößern und zu verkleinern, wird zwischen zwei Pixeln interpoliert, also der Zwischenwert berechnet. An farbigen Rändern des nicht-transparenten Teils der Textur, wie hier dem "E" im Schriftzug, wird zwischen orange (vom Text) und weiß (dem Pixel links daneben) interpoliert, was hell-orange ergibt (siehe heller Rand um das "E"). Den weißen Hintergrund der Textur sieht man zwar nicht, weil er durch den Alphakanal transparent geschaltet wird, jedoch fällt er durch die Interpolation dann doch auf.

    3 Lösung

    Die Lösung ist, die Ränder in der Haupt-Textur (NICHT im Alpha-Kanal! ;) ) zu übermalen, also an den Stellen, die ohnehin transparent werden, in direkter Nachbarschaft zum sichtbaren Teil der Textur, weiterzumalen. Eben so, dass die Nachbar-Pixel im transparenten Teil der Textur noch ein Weilchen die Farbe behalten. So wird zwischen zwei gleichen Werten interpoliert und es entstehen keine sichtbaren Ränder.


    So sieht die Haupt-Textur nun aus:


    Und das ist das Ergebnis:

       


    Voilà - keine Ränder mehr zu sehen. :)