Ich suche nach einem Artikel oder Tutorial, das erklärt, wie man primitive Formen (hauptsächlich einfache Linien) mit einem (Neon-) Glow-Effekt auf sie in der grafischen Ausgabe eines Computerprogramms zeichnen kann. Ich möchte keine raffinierten Sachen machen, wie zum Beispiel in modernen Pirson Shootern oder ähnlichen. Ich bin eher auf der Suche nach einer einfachen Lösung, wie die Zeilen in diesem Bild: Ссылка - aber natürlich gezeichnet von einem Computerprogramm in meinem Fall.
Die ganze Sache sollte auf einem modernen Smartphone laufen, also ist die Hardware ein bisschen begrenzt.
Ich weiß ein bisschen über OpenGL, aber nicht zu viel, also bin ich leider ein wenig verloren. Habe einige Google-Recherchen ("glow effect algoritm" und ähnliches) gemacht, aber entweder hochkomplexe Sachen für 3D-Spiele oder Tutorials für Photoshop & amp; co.
Was ich also wirklich brauchen würde, ist ein ausführlicher Artikel zu diesem Thema, aber nicht auf einer sehr fortgeschrittenen Ebene. Ich hoffe, das ist sogar möglich ... Ich habe gerade mit OpenGL angefangen, habe in der Vergangenheit ein paar kleinere Grafikprogramme gemacht, aber ich bin jetzt ein langjähriger Programmierer, also würde ich technische Arbeiten im Allgemeinen verstehen.
Kennt jemand von euch einen solchen Artikel / Papier / Tutorial / irgendetwas?
Vielen Dank im Voraus für alle guten Ratschläge! Prost!
Matthias
Es ist ein Bündel von Linien mit unterschiedlicher Helligkeit / Transparenz. Wenn Sie einen Glüheffekt für eine 1px-Linie in einer Größe von 20 Pixeln haben möchten, dann ziehen Sie 41 Linien mit einer Breite von 1 px. Die mittlere Linie ist mit Ihrer Grundfarbe, andere Linien erhalten Farben, die graduell von Grundfarbe zu 100% Transparenz (wie in Ihrem Beispiel) oder dunkelste Farbvariante (wenn Sie schwarzen Hintergrund haben, keine Transparenz) gehen. Das ist es. :)
Dies ist nichts, was ich jemals getan habe, aber wenn ich auf dein Beispiel schaue, wäre der grundlegende Ansatz, den ich verwenden würde, um es zu versuchen und neu zu erstellen, ...
Beginnen Sie mit einem Algorithmus zum Zeichnen einer gefüllten Form, die groß genug ist, um die ursprüngliche Form und das Glühen aufzunehmen. Zum Beispiel wird ein Rechteck zu einem etwas größeren Rechteck, aber mit abgerundeten Ecken. Eine unendlich breite Linie wird zu einer verdickten Linie mit halbkreisförmigen Kappen. Subtrahiere die ursprüngliche Form (und fülle die Pixel dafür normalerweise).
Für jedes Pixel im Glühen hängt die Farbe von der kürzesten Entfernung zu einem beliebigen Teil der ursprünglichen Form ab. Dies reduziert sich normalerweise auf die Entfernung zum nächsten Punkt auf einer Linie (z. B. einer Kante eines Rechtecks).
Die Entfernung wird unter Verwendung eines Farbsättigungswertes oder eines ähnlichen Farbschemas in einen Farbwert übersetzt, sowie durch Reduzieren von Alpha (Erhöhen der Transparenz). Für Neon-Leuchten möchten Sie wahrscheinlich einen konstanten Farbton, eine abnehmende Helligkeit, möglicherweise eine höhere Sättigung und ein abnehmendes Alpha.
Übersetzt den HSV- / beliebigen Farbwert für die Ausgabe in RGB. Siehe diese Frage .
BEARBEITEN - Ich hätte wahrscheinlich HSL statt HSV sagen sollen - in HSL, wenn L seinen maximalen Wert hat, ist die resultierende Farbe immer weiß. Für HSV gilt das nur dann, wenn die Sättigung ebenfalls bei Null liegt. Siehe Ссылка
Der wahre Trick ist, dass ich heutzutage sogar auf einem Telefon vermute, dass Sie wahrscheinlich Hardware (Shader) dafür verwenden sollten - tut mir leid, ich weiß nicht, wie das geht.
Der "Maleralgorithmus", der sich aus den allmählich kleineren Formen, die andere hier beschrieben haben, überlagert, ist ebenfalls möglich, aber (1) möglicherweise langsamer, je nach Implementierungsproblemen, und (2) müssen Sie möglicherweise in einen Offscreen-Puffer zeichnen , mit etwas spezieller Handhabung für den Alphakanal, blit dann zurück zum Bildschirm, um die Transparenz richtig zu behandeln - wenn Sie Transparenz benötigen, das heißt.
BEARBEITEN - Dumm ich. Ein alternativer Ansatz besteht darin, eine Unschärfe auf Ihre ursprüngliche Form anzuwenden (in Graustufen), aber anstatt die unscharfen Pixel direkt auszugeben, wenden Sie die Farbtransformation auf jeden unscharfen Pixelwert an.
Eine Unschärfe ist im Grunde ein gewichteter gleitender Durchschnitt. Technisch gesehen ist ein Finite-Impulse-Response-Filter mit einer Faltung implementiert, aber die Mathematik dafür ist etwas umständlich. Wenn Sie nur eine Unschärfe von ungefähr der richtigen Größe wünschen, zeichnen Sie einen Graustufenkreis von Pixeln als Ihr "Gewicht" -Bild.
Die Unschärfe ersetzt in diesem Fall im Grunde die Berechnung der Entfernung von der Form.
Teilen Sie Ihre Linie in kleine, nicht überlappende Blöcke auf. Verwenden Sie ein beliebiges grafisches Grundelement, um einen gekippten rechteckigen Farbverlauf zu zeichnen: Der Mittelpunkt liegt bei 100% und der äußere Rand bei 0%.
Zeichnen Sie es noch nicht auf das Bild; Sie möchten es mit dem Bild verschmelzen lassen. Durch die Verwendung von regulärer Transparenz wird es nur wie eine zufällige Pfeife oder ein Pfahl oder so aussehen (es sei denn, Sie zeichnen eine weiße Linie, und Ihr Hintergrund ist dunkel).
Hier sind zwei Optionen für den Mischmodus:
[blended pixel value] = (1-[overlay's pixel value]) / [bottom pixel value]
[blended pixel value] = max([overlay's pixel value]+[bottom pixel value], 1)
Zeichnen Sie dann die Linie über dem Leuchten.