Mein Versuch: Ich mache eine Textur (kann eine einzelne Farbe oder eine andere sein) und strecke diese Textur dann von einem minimalen 0bis zu einem maximalen maxWert. Das funktioniert, macht mich aber aus mehreren Gründen ziemlich unzufrieden, darunter:
- Wenn ich im Verlauf des Balkens abgerundete Ecken haben möchte, werden die Kanten gequetscht oder gedehnt.
Meine Frage: Was ist die beste Vorgehensweise, um ein Fortschrittsbalkenergebnis zu erzielen?
Gedanken: Gibt es eine Möglichkeit, openGL daran zu hindern, ab einem bestimmten xWert einer Textur etwas zu zeichnen ? Auf diese Weise konnte ich die Textur so zeichnen, wie sie erscheinen sollte, aber den Wert von angeben x.
Ich habe diesen potenziell nützlichen Link gefunden.
Aktualisieren
Ich habe den Eindruck, dass die Verwendung des Schablonenpuffers der richtige Weg sein könnte. Mit dem Schablonenpuffer können Sie einen beliebigen Bereich definieren, durch den andere gerenderte Geometrien abgeschnitten werden können. Anscheinend gibt es viele andere Verwendungszwecke für den Schablonenpuffer, z. B. Reflexionen.
Mögliche Lösung
Mit dem Schablonenpuffer in Kombination mit meinem eigenen Shader habe ich letztendlich das erreicht, was ich wollte, da OpenGL ES 2.0 glAplhaTestund verwandte Funktionen nicht unterstützt . Hier ist ein Bild des Ergebnisses:
Die zum Schablonenpuffer gezeichnete Textur war ein längliches Rechteck mit abgerundeten Ecken. Die in den Bildpuffer gezeichnete Textur war nur ein gestrecktes rotes Rechteck, das, wie Sie sehen können, am Schabloneninhalt abgeschnitten ist. Sie müssen Ihren eigenen Shader schreiben, um mit dem Alpha-Kanal fertig zu werden, da OpenGL ES 2.0 die glAplhaTestund verwandte Funktionen nicht unterstützt .
Hinweis - Vielleicht ist dies nicht das beste Bildbeispiel. Tatsächlich können Sie mit der vorgestellten Lösung die linken und rechten Kappen schrittweise anzeigen, was ich im obigen Bild leider nicht demonstriert habe.
quelle
Antworten:
Keine Notwendigkeit, zusätzliche Einheiten einzubeziehen, KISS
Rendern Sie einfach den Fortschrittsbalken aus drei Teilen - der linken Kappe, der rechten Kappe und dem Körper. Schema:
Linke und rechte Kappe sind normalerweise immer gleich - Halbkreise mit Transparenz. Die Körpertextur muss ohne erkennbare Auswirkungen dehnbar sein.
Linke und rechte Kappen werden normalerweise unabhängig davon gerendert, und der erforderliche Prozentsatz wird mit der Körperbreite angezeigt. So könnte zB 0% ein leerer Balken sein, 1% sind Kappen mit einem Körper von 0 Breite.
Weitere Informationen zum Strecken ohne Verzerrungen in beiden Achsen: Google für "Neun-Patch-Button".
quelle
Es gibt einige Möglichkeiten, dies zu tun.
Dies ist die von poirot beschriebene Lösung:
Sie können stattdessen drei Instanzen von Geometrie verwenden. ein Halbkreis für jedes Ende und ein dazwischen gesticktes Rechteck. Beachten Sie, dass hierfür kein benutzerdefinierter Shader oder keine Schablone erforderlich ist. (Diese Lösung scheint die gleiche zu sein, wie sie in den Kommentaren von wondra vorgeschlagen wurde.) Diese Lösung ist aus mehreren Gründen mein Favorit.
Ein Hinweis zum Schablonenpuffer, der mehrfach abgetastet werden kann und ein Anti-Aliasing für einen vollständigen Frame ohne Anwendungseingriff ergibt. Alpha-Tests (Shader oder nicht) sind jedoch eine Fragmentoperation, die nicht mehrfach abgetastet wird. Wenn Sie die beiden Schablonenpuffer kombinieren, werden niemals wirklich mehrere Stichproben erstellt. Alle Proben werden gleich behandelt, daher kein Anti-Aliasing.
quelle
Am Ende habe ich nur die Tatsache genutzt, dass Sie mit OpenGL einen beliebigen Teil einer Textur Ihren Scheitelpunkten zuordnen können. Angenommen, Sie haben eine Textur mit drei Herzen in einer Reihe, etwa 300 und 80, und möchten nur zwei Drittel auf dem Bildschirm anzeigen. Dann würden Sie Ihren Scheitelpunkten eine Textur (0, 0, 200, 80) zuordnen, aber stellen Sie sicher, dass auch Ihre Scheitelpunkte entsprechend reduziert werden. Spart das Herumspielen mit dem Schablonenpuffer und ist viel schneller und eleganter. Scheint offensichtlich, aber als ich dachte, dass jedes Sprite eine separate Textur verwenden muss, konnte ich es nicht sehen!
quelle