1. Bitte schaltet eure Ad Blocker aus. SLinfo kann nur betrieben werden, wenn es durch Werbung Einnahmen erzielt. Vielen Dank!!
    Information ausblenden
  2. Wir freuen uns, wenn du dich in unserem Forum anmeldest. Bitte beachte, dass die Freigabe per Hand durchgeführt wird (Schutz vor Spammer). Damit kann die Freigabe bis zu 24 Stunden dauern.
    Information ausblenden
  3. Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anbieten zu können und die Zugriffe auf unsere Website zu analysieren. Sie geben Einwilligung zu unseren Cookies, wenn Sie unsere Webseite weiterhin nutzen.
    Information ausblenden

Tutorial – Transparenz bei den Grafikformaten PNG und TGA (in Second Life)

Dieses Thema im Forum "Texturen & Bildbearbeitung" wurde erstellt von Kelith Resident, 25. August 2012.

  1. Kelith Resident

    Kelith Resident Aktiver Nutzer

    Beiträge:
    318
    Zustimmungen:
    2
    Punkte für Erfolge:
    0
    Tutorial – Transparenz bei den Grafikformaten PNG und TGA (in Second Life)

    Ich möchte hier Unterschiede bei der Verwendung der beiden Grafikformate PNG und TGA bei Nutzung von Transparenz aufzeigen. Das betrifft SL, aber natürlich auch andere Bereiche. Ich kann hier nicht eine detaillierte Beschreibung beider Formate geben und verweise z.B. auf die Seiten von Wikipedia.
    Portable Network Graphics
    Targa Image File

    Ich nutze den Viewer Firestorm, nur falls jemandem die im folgenden gezeigten Dialogfenster fremd vorkommen. Und ich stelle diese Informationen natürlich zur Diskussion, sie sind meiner Erfahrung nach korrekt, aber jeder kann sich irren.

    Kurze Einführung zur Speicherung von Grafiken (Texturen)
    Computergrafiken (Rastergrafiken) bestehen aus einzelnen Bildpunkten (Pixeln). Jeder Bildpunkt einer Grafikdatei besitzt eine Farbe. Und ich betone, weil das nachher zum Verständnis wichtig ist, jeder Bildpunkt hat Farbe, auch transparente Bildpunkte haben eine Farbe! Üblicherweise setzt sich die Farbe einer Computergrafik aus drei Grundfarben zusammen: Rot, Grün und Blau.
    Rastergrafik
    Farbtiefe (Computergrafik)

    Eine übliche Größe ist 8 Bit für jede Farbe (Farbkanal). Bei drei Grundfarben sind das also 3x8 Bit = 24 Bit. Dieses simple Grafikformat unterstützt keine Transparenz. Jeder Pixel ist komplett undurchsichtig. Um Transparenz darzustellen, benötigt man einen weiteren Kanal, den sogenannten Alphakanal (Alphamaske). Dieser hat in der Regel die gleiche Anzahl Bits wie ein Farbkanal. Hier also auch 8 Bit. Ein so erweitertes Grafikformat hat dann 4x8 Bit = 32 Bit.
    Alphakanal

    Der Alphakanal ist ein Graustufenkanal. Weiße Pixel stehen für komplett Undurchsichtig und schwarze Pixel für komplett transparent. Dunkelgraue Pixel stehen demnach für nicht ganz transparent und hellgraue Pixel für fast Undurchsichtig usw.

    In Bildbearbeitungsprogrammen werden transparente Hintergründe oft mit einem Schachbrettmuster dargestellt:
    [​IMG]

    Um das Bild zu speichern, werden diese beiden Teile benötigt:
    Das Farbbild (3 Farbkanäle, z.B. 3 x 8Bit):
    [​IMG]

    und der Alphakanal (steuert Transparenz, z.B. 1 x 8Bit):
    [​IMG]

    Ja, wie oben schon erwähnt, beim Farbbild haben alle Pixel eine Farbe, auch die transparenten Pixel. Der Alphakanal steuert die Transparenz, weiß ist undurchsichtig und schwarz ist voll transparent. Erst als Textur z.B. in einem 3D Programm wie einem Second Life Viewer eingesetzt, ist die Transparenz richtig zu sehen.

    So, warum ist beim Farbbild da oben der später im Viewer transparent dargestellte Bildbereich ausgerechnet weiß? Nun, das Bildbearbeitungsprogramm belegt das automatisch so. Mehr dazu in den folgenden Abschnitten.

    Kleiner Test mit Second Life
    Man erzeugt eine simple PNG-Grafik mit transparentem Hintergrund und lädt diese nach SL hoch. Das geht ja auch kostenlos als nur temporär verfügbare Grafik (bis man z.B. den Cache löscht).
    [​IMG]

    Im Vorschaubild vom Hochladen-Dialog sieht man, dass der Hintergrund der Grafik transparent ist. Nun hat man die Grafik im SL-Inventar, sie liegt also auf einem der SL-Server im SL-eigenen Format vor. (SL wandelt alle hoch geladenen Grafiken in ein bestimmtes Format, das Thema führt aber hier jetzt zu weit). Auch diese Grafik besitzt immer noch die Transparenz. Öffnet man die Grafik aus dem SL-Inventar, kann man in dem erscheinenden Fenster die Grafik als TGA speichern. Die TGA-Grafik landet dann wieder auf dem PC.
    [​IMG]

    Jetzt schauen wir uns die gespeicherte TGA-Grafik mal im Bildbearbeitungsprogramm an:
    [​IMG]

    Und Ups, da ist der transparente Hintergrund plötzlich weiß geworden. Im rechten Bereich sieht man die einzelnen Farbkanäle und den Alphakanal. Das zeigt, dass bei der Bildspeicherung jeder Pixel (auch ein transparenter) eine Farbe haben muss und notfalls zwangsweise eine Farbe bekommt. Das ist an sich ja auch egal, der Alphakanal regelt die Transparenz und blendet die weißen Bereiche wieder aus. Nun, der Alphakanal blendet die allermeisten der weißen Bereiche wieder aus. Und was das bedeutet, kommt jetzt.

    Grafikformat PNG
    Wenn man mit dem PNG Format arbeitet, wird man den Alphakanal normalerweise nie zu Gesicht bekommen. Den legt das Bildbearbeitungsprogramm beim Speichern der Grafik automatisch an. Und man sieht auch nicht die weißen (als transparent gedachten) Bildbereiche, die werden nämlich auch erst beim Speichern gebildet. Ist doch alles schön simpel. Warum darüber schreiben?

    Das hat mancher vielleicht schon erlebt, der mit Texturen arbeitet. Man legt z.B. einen simplen schwarzen Text (bei GIMP weißen Text nehmen) auf transparenten Hintergrund. Speichert das als PNG und lädt es nach SL hoch. Dort packt man die Textur auf ein Prim. Guckt man dann genauer hin, legt zur besseren Prüfung ein andersfarbiges Prim dahinter, sieht man evtl. farbige Ränder um die Textur (auch schon mal Halos genannt).

    Ich habe mal eine solch simple Grafik gemacht (Das Wort „Transparenz“ mit einer roten und blauen Linie darüber bzw. drunter) und auf einen Prim-Würfel gepackt. Ein etwas kleinerer Würfel mit dunkler Farbe steckt im Inneren. Das sieht von weitem so aus:
    [​IMG]

    Schauen wir mal von ganz nah:
    [​IMG]

    Im rechten Teil hat die rote Linie einen hellen Rand, ebenso ist am T ein heller Rand zu sehen. Im linken Teil ist dies nicht. Der rechte Teil mit den hellen Rändern hat eine PNG-Textur. Nach der oben beschriebenen Methode angelegt. Was ist passiert? Ganz einfach. Beim Speichern in PNG wird der transparente Teil der Grafik (hier also alles um Text und Linie herum) weiß gemacht, dazu dann der Alphakanal gespeichert. In Bildbearbeitungsprogrammen erhalten eingefügte Elemente wie Linien oder Text in aller Regel einen weichgezeichneten Rand. Dadurch sehen die Ränder, besonders bei schrägen Linien, nicht wie Treppchen aus. Wenn man wie hier Text auf transparenten Hintergrund legt, sind bei den weichgezeichneten Randpixeln auch halbtransparente Pixel dabei. Wird dann beim Speichern der Grafik alles Transparente weiß, werden auch die halbtransparenten Pixel weiß. Daher die hellen Ränder.

    Grafikformat TGA
    Der linke Teil hat nicht dieses Problem. Hier wurde bei der Textur das Format TGA benutzt. Aber Halt! Das Format selber ist nicht schlauer als PNG. Auch bei TGA würden die Ränder erscheinen, wenn man nicht noch etwas Zusatzarbeit in die Grafik investieren würde. Und diese Zusatzarbeit wird erst möglich, wenn man in TGA speichert. Bei TGA muss man den Alphakanal nämlich selber anlegen, bevor man speichert. Und so kann man nach Erzeugung des Alphakanals noch beliebige Änderungen an der Grafik vornehmen. Und speichert erst dann. Was sind das nun für Zusatzarbeiten? Ganz einfach. Nachdem man den Alphakanal erzeugt hat, malt man den kompletten Textbereich schwarz und macht die rote und blaue Linie dicker. Beispielsweise so:
    [​IMG]

    Man sieht als gestrichelte Linie den Alphakanal dargestellt. Der Bereich der Buchstaben ist komplett Schwarz, die obere Linie ist rundherum dick rot und die untere Linie dick blau. Selbst wenn also der Alphakanal halbtransparente Pixel darstellen soll, haben diese Pixel die Originalfarbe vom Text bzw. den Linien. Es gibt keine weißen Pixel im kritischen Bereich der Ränder.

    Man weitet also quasi die farbigen Bereiche etwas auf, damit in allen Bereichen, die der Alphakanal sichtbar lässt, eine korrekte Farbe zu sehen ist. Es gibt ein Photoshop Plug-In (auch für kompatible Bildbearbeitungsprogramme nutzbar, z.B. GIMP), welches diese Aufweitung der farbigen Bereiche auf Knopfdruck erledigt. Dieses Plug-In wird immer wieder mal zitiert, daher kennen das einige sicher. Es ist ein kostenlos erhältliches Plug-In von Flaming Pear namens Solidify.
    Flaming Pear:Download
    Im Downloadbereich nach unten scrollen, da finden sich dann die freien Plug-Ins als Archiv. Darin ist dann unter anderem auch Solidify in drei Varianten A,B,C. Der Unterschied ist kaum sichtbar, welche Variante man benutzt, ist nicht entscheidend.

    Solidify erzeugt dieses Bild. Ich habe zur Verdeutlichung wieder den Alphakanal angezeigt.
    [​IMG]

    Das mit Solidify erzeugte Bild kommt also quasi auf das selbe Ergebnis: Die Bereiche um die Ränder des Texts und der Linien sind in den gewünschten Farben. Solidify macht es im Prinzip sogar besser, weil es alle transparenten Pixel färbt. Und das auf Knopfdruck.

    Übrigens, so einen Alphakanal anzulegen, ist in den Bildbearbeitungsprogrammen in der Regel nur ein Knopfdruck, also kein Aufwand. Ich habe mir mittlerweile angewöhnt, alle Grafiken für SL nur noch in TGA zu erstellen.

    Noch was zu GIMP
    Ich habe gehört, dass das freie Bildbearbeitungsprogramm GIMP mit dem PNG-Format besser umgehen können soll. Beim Export einer Grafik nach PNG kann man eine Option wählen, die entweder Farbwerte aus transparenten Pixeln speichert, oder eben nicht. Ich zitiere mal die Original engl. Doku: „With this option is checked, the color values are saved even if the pixels are completely transparent.“ Volltransparente Pixel haben eine Farbe? Wie bitte soll das denn gehen? Wenn man in einem Bildbearbeitungsprogramm eine neue Grafik anlegt mit transparentem Hintergrund, welche Farbe haben die Pixel denn? Gar keine. Aber spätestens beim Speichern der Grafik muss man eine Farbe zuordnen. Bei GIMP ist das nach meiner Erfahrung standardmäßig Schwarz und bei PhotoShop Weiß. Wenn man einen weißen Text auf transparentem Hintergrund mit der genannten Einstellung (getestet Ein und Aus) per GIMP in eine PNG-Datei exportiert, sehe ich in SL dunkle Ränder. Also im Prinzip das gleiche Randfarben-Problem, nur mit einer anderen Füllfarbe. Ich habe das aber nicht weiter untersucht. Wenn jemand andere Erfahrungen mit GIMP in Bezug auf diese Farbränderthematik hat, können wir dies gerne hier diskutieren.

    So, ich hoffe, dieses kleine Tutorial war interessant. :) Ich habe noch ein Tutorial in Vorbereitung, welches sich auch mit Transparenz in SL befasst. Denn Transparenz ist nicht gleich Transparenz. Aber dazu ein andermal.
     
    Zuletzt bearbeitet: 25. August 2012
    Roya Congrejo gefällt das.
  2. Khufu Greymoon

    Khufu Greymoon Superstar

    Beiträge:
    1.449
    Zustimmungen:
    633
    Punkte für Erfolge:
    123
    kleiner Hinweis, bei Gimp kann man einstellen welche Farbe Transparent sein soll, standardmäßig is allerdings wie beschrieben schwarz eingestellt.

    ansonsten sehr gutes Tutorial :)
     
  3. Pinky

    Pinky Aktiver Nutzer

    Beiträge:
    186
    Zustimmungen:
    63
    Punkte für Erfolge:
    29
    Irgendwie komme ich mit diesem Tutorial nicht zurecht: das Plgin habe ich heruntergeladen und installiert. PS neu gestartet und meine PNG-Datei mit transparenten Hintergrund geöffnet. Filter angewendet .... sieht nicht so aus wie auf den Fotos. Was muss ich machen damit wie im Bild mein sichtbarer Bereich umrahmt wird? Wie erstelle ich diesen Alphakanal richtig? Auf meinen erstellten kann ich nicht malen. Es wird mir die Fehlermeldung: "Konnte den Protokoll-Pinsel nicht benutzen, weil es für das Protokollobjekt keinen entsprechenden Kanal gibt" Der Alpha-Kanal ist aktiviert und markiert. Mein Bild hat einen rosa Filter bekommen.
     

Diese Seite empfehlen

  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden