Färben Sprites von Graustufen zu Farbe

Um ein Graustufen-Sprite zu tonen, kann ein einfacher Fragment-Shader verwendet werden, der die Farbe des Texels der Textur mit einer Tönungsfarbe multipliziert. Dies führt dazu, dass eine konstante Farbe in der Helligkeit durch die Graustufentextur variiert wird Alle folgenden Shader betrachten Premultiplied Alpha .

Vertex-Shader shader / tone.vert

Fragment-Shader shader / ton.frag

Fügen Sie ein Klassenelement für das Shader-Programmobjekt hinzu:

Erstellen Sie ein Shader-Programm, fügen Sie es dem Sprite hinzu und richten Sie die Uniformen während der Initialisierung ein:

Erstellen Sie Graustufen aus Sprite und tönen Sie die Graustufen

Wenn Sie zuerst eine Graustufe aus einem RGB-Sprite erstellen müssen und eine zweite, um das Sprite einzufärben, müssen Sie den Fragment-Shader etwas anpassen.

Eine Graustufenfarbe wird normalerweise mit der Formel gray = 0.2126 * red + 0.7152 * green + 0.0722 * blue erstellt (Im Internet gibt es verschiedene Luminanzformeln und Erklärungen: Luma (Video) , Sieben Graustufen-Konvertierungsalgorithmen .) Abhängig von der Entfernung interpolieren Sie zwischen der Originalfarbe und der Schwarz-Weiß-Farbe.

Gradiententext-Mapping

Um die Zuordnung von der Graustufe zur Farbe vorzunehmen, kann auch eine Farbverlaufstextur verwendet werden. Sehen Sie sich den folgenden Fragment-Shader an:

Um diesen Shader zu verwenden, muss ein 2D-Textrueme hinzugefügt werden:

Die Textur und die Uniform müssen folgendermaßen aussehen:

Eine weitere Verbesserung wäre, den Gradient der Farbe automatisch anzupassen

Sollte es einen harten Übergang zwischen dem undurchsichtigen Teil der Textur und dem transparenten Teil der Textur geben, dann muss der Teil der Shader, der die Fragmentfarbe setzt, wie folgt angepasst werden:

Erzeugen einer Farbverlaufstextur

Um eine Gradient-Textur durch eine Reihe von Farben zu erzeugen, empfehle ich Newton-Polynom . Der folgende Algorithmus behandelt eine beliebige Anzahl von Farben, die über den Gradienten verteilt werden müssen. Jede Farbe muss einem Grauwert zugeordnet werden, und die Grauwerte müssen in aufsteigender Reihenfolge eingestellt werden. Der Algorithmus muss mit mindestens 2 Farben eingerichtet werden.

Das heißt zum Beispiel, wenn die Farben c0 , c1 und c2 , was den Grauwerten g0 , g1 und g2 entspricht, der Algorithmus sein muss so initialisiert:

C ++ - Code:

Beachten Sie, dass in diesem Fall natürlich der Shader ohne die automatische Anpassung verwendet werden muss, da die Anpassung den nichtlinearen Gradienten linearisieren würde.
Dies ist eine einfache Zuordnung von einer Graustufenfarbe zu einer RGB-Farbe. Die linke Seite der Mapping-Tabelle (die Graustufenwerte) ist konstant, während die rechte Seite der Tabelle (die RGB-Werte) an die Textur angepasst werden muss, die aus der Graustufentextur neu erstellt werden muss. Der Vorteil besteht darin, dass alle Graustufenwerte zugeordnet werden können, da eine Gradient-Mapping-Textur generiert wird.
Während die Farben der Mapping-Tabelle genau mit der Quelltextur übereinstimmen, werden die Farben dazwischen interpoliert.

Beachten Sie, dass die Texturfilterparameter auf GL_NEAREST für die Gradiententextur eingestellt werden müssen, um ein genaues Ergebnis zu erhalten. In cocos2d-x kann dies durch Texture2D::setAliasTexParameters erledigt werden.

Vereinfachter Interpolationsalgorithmus

Da ein Farbkanal in ein Byte codiert ist ( unsigned byte ), kann der Interpolationsalgorithmus ohne merklichen Qualitätsverlust vereinfacht werden, insbesondere wenn einige Farben mehr als nur 3 sind Der folgende Algorithmus führt eine lineare Interpolation der Farben zwischen den Basispunkten durch. Vom Anfang bis zum ersten Punkt gibt es eine lineare Interpolation von der RGB-Farbe (0, 0, 0) zur ersten Farbe. Am Ende wird (über den letzten Basispunkt hinaus) die letzte RGB-Farbe beibehalten, um helle weiße Störimpulse zu vermeiden.