Optimieren Sie einen Glow Shader, damit er besser aussieht

Ich habe ein einfaches Spiel und und Themen davon sind diese kleinen Linien. Es ist für iOS und Android gedacht und verfügt daher über eine RIESIGE Reihe von Prozessoren, auf denen es derzeit ausgeführt werden kann.

Ich versuche aus zwei Gründen, ihnen Echtzeit-Glanz zu verleihen

1. Ich versuche die Tatsache zu verbergen, dass ich auf den meisten Geräten nicht die Renderzeit habe, um Anti-Aliasing zu verarbeiten.
2. Das Thema des Spiels soll reines Licht sein, also sollte das Bild so aussehen, als wären diese Dinge reines Licht.

Ich habe eine ganze Weile einen trennbaren Gaußschen Unschärfeshader optimiert und bin zu einem Punkt der Frustration gekommen. Ich kann es einfach nicht richtig aussehen lassen. Vielleicht ist das Problem, dass ich versuche, die gezackten Kanten des Lichts vergeblich zu verbergen In der Zwischenzeit sieht das Licht nicht verschwommen aus.

Mein größtes Problem sind alle Variablen, die dazu beitragen, dass es optimal aussieht.

Ich bin sehr neu in Grafik / Rendering und in keiner Weise ein Künstler. Das vielleicht frustrierendste an mir ist, dass alle Variablen involviert sind. Mit Glühen habe ich so viele mögliche Veränderungen gesehen.

• A. Fügen Sie den Mischmodus, den Bildschirmmischmodus oder eine andere Zubereitung hinzu
• B. Gewichtung der Unschärfe und normal vor der Kombination
• C. Das Sigma der Gaußschen Glockenfunktion (Ich habe diesen verwirrenden Taschenrechner verwendet, aber er scheint nicht die gleichen Werte zu liefern, die andere Leute haben)
• D. Skalare für die an die Sigma-Funktion gesendeten "x" -Werte
• E. Probenskala (Verkleinerung oder Vergrößerung des Unschärferadius)
• F. Ändern der Auflösung des Glühpuffers

Wie findet man die "am besten aussehenden" Konstanten, wenn man mit so vielen Variablen wie diesen arbeitet?

Ich habe auch Probleme, weil die Zeit zwischen dem Vornehmen und dem Sehen sehr lang ist und es schwierig ist, Änderungen zu erkennen. Ich würde es in einem Shader-Spielzeug tun, aber ich kann dieses Bild nicht laden oder ein solches prozedural prozedural generieren.

Im Moment stecke ich wirklich im Sigma des Gaußschen Glockenkurven-Kernels fest, vor allem, weil ich eher die Zahlen als die Formel codiere, weil ich die Prozessorgeschwindigkeit brauche. Können Sie ein gutes Sigma vorschlagen ?

Sigma- und Kernelgröße des Gaußschen Filters

In Bezug auf die Auswahl des Sigmas und der Kernelgröße (Pixel) des Gaußschen: Sie legen das Sigma basierend auf der Breite der gewünschten Unschärfe fest (visuell beurteilen) und wählen dann die Kernelgröße basierend auf dem Sigma. Es ist ein Spiel, bei dem eine Kernelgröße gefunden wird, die genug von der (mathematisch unendlichen) Glockenkurve erfasst, um gut auszusehen, ohne zu teuer zu sein.

Als Faustregel sollte die Kernelgröße mindestens das 6-fache des Sigmas betragen. Dann erstreckt sich der Kernel bis zu 3 Sigmen in jede Richtung, was ausreicht, um fast das gesamte Gewicht der mathematischen Glockenkurve abzudecken . Es ist auch schön, die Pixelgröße auf die nächste ungerade Zahl aufzurunden, damit der Filter symmetrisch ist. Bei Sigma = 1,5 px würden Sie beispielsweise einen 9-Pixel-Filter verwenden. Verwenden Sie bei Sigma = 2,0 Pixel einen 13-Pixel-Filter usw.

Wenn Sie Leistungseinschränkungen haben, die steuern, wie groß ein Kernel sein kann, dividieren Sie alternativ durch 6, um das maximale Sigma zu erhalten, mit dem Sie durchkommen können. (Beachten Sie, dass Sigma gebrochen sein kann, da es nur eine Eingabe in die Glockenkurvengleichung ist.)

Übrigens besteht ein Trick, um bei großen Gaußschen Unschärfen eine bessere Leistung zu erzielen, darin, das Bild herunterzusampeln, eine kleinere Unschärfe auszuführen und dann ein Upsampling durchzuführen. Um beispielsweise eine effektive 13-Pixel-Unschärfe zu erzielen, können Sie das Bild um das Zweifache verkleinern (mithilfe der bilinearen Filterung), dann eine 7-Pixel-Unschärfe durchführen und dann ein Upsampling durchführen (mithilfe der bilinearen Filterung). Es sieht fast so gut aus wie die 13-Pixel-Unschärfe, ist aber erheblich schneller.

Erstellen eines gut aussehenden Glühfilters

Ein häufiger Trick bei diesen ist die Verwendung mehrerer Gaußscher mit unterschiedlichem Radius, die zusammenaddiert werden. Es macht einen besseren Glow-Effekt als jeder einzelne Gaußsche für sich. Hier ist beispielsweise ein Modell in Photoshop, das mit drei Ebenen erstellt wurde, die additiv miteinander gemischt wurden. Die drei Gaußschen haben die Größe 3px, 5px und 11px (entsprechend Sigma = 0,5px, 0,83px bzw. 1,83px).

Sie können auch noch größere Gaußsche Werte hinzufügen, um den scheinbaren Radius des Glühens weiter zu vergrößern. Auf diese Weise wird der Standard-Bloom-Effekt in 3D-Game-Engines implementiert.

Wenn die Leistung ein Problem darstellt, kann der kleinste Gaußsche Wert durch eine Kopie des unscharfen Originalbilds ersetzt werden. Der resultierende Effekt sieht schärfer aus, ist nicht so weich, leuchtet aber dennoch. Wie bereits erwähnt, können größere Gaußsche Werte durch Downsampling, Unschärfe und Upsampling ausgeführt werden. und das Upsampling kann unter Verwendung einer bilinearen Hardwarefilterung durchgeführt werden, die in den Durchgang gefaltet ist, der die Schichten miteinander mischt.

Jaggies

Sie werden feststellen, dass in einigen Bereichen des obigen Bildes noch Zacken sichtbar sind. Leider ist Unschärfe beim Verstecken von Zacken nicht sehr effektiv, es sei denn, der Unschärferadius ist ziemlich groß. Es gibt keine einfache Möglichkeit, einen Post-Process zu verwenden, um Zacken loszuwerden: Der beste Weg, sie zu vermeiden, besteht darin, sie nicht erst zu rendern. :) :)

Ich habe gehört, dass Sie MSAA aus Leistungsgründen nicht verwenden können, aber möglicherweise eine andere Option sind. Abhängig davon, wie Sie die Leuchtspuren rendern, können Sie möglicherweise ihre Größe geringfügig erhöhen und einen Shader schreiben, der einen Farbverlauf anwendet, um die Farbe innerhalb weniger Pixel vom Rand auszublenden. Das sollte ihnen helfen, glatter auszusehen. Hier ist ein Shadertoy , das einen 1px breiten Kantenabfall demonstriert, der zum Antialiasing einer prozeduralen Form verwendet wird.