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

Aus LOTUS Wiki DE
Version vom 3. Juli 2021, 18:46 Uhr von imported>DrBlackError (Die Seite wurde neu angelegt: „Category:Unvollständige Seiten Category:Lexikon Category:Erste Hilfe Unter bestimmten Umständen erscheinen an Texturen, die per Alpha-Kanal eine…“)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche

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.

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).

--Fehlendes Bild--

Das Ergebnis sieht in LOTUS so aus:

--Fehlendes Bild--

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

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.

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:

--Fehlendes Bild--

Und das ist das Ergebnis:

--Fehlendes Bild--

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