Ottimizzare uno shader bagliore per renderlo migliore

Ho un gioco semplice e i suoi argomenti sono queste piccole righe. È mirato per iOS e Android, quindi ha una gamma ENORME di processori su cui potrebbe funzionare in questo momento.

Sto cercando di aggiungere loro un bagliore in tempo reale per due motivi

1. Sto cercando di nascondere il fatto che non ho il tempo di rendering per elaborare l'antialiasing sulla maggior parte dei dispositivi.
2. Il soggetto del gioco dovrebbe essere pura luce, ergo quella foto dovrebbe apparire come quelle cose sono pura luce.

Ho messo a punto uno shader di sfocatura gaussiana separabile da un po 'e sono arrivato a un punto di frustrazione, non riesco proprio a farlo sembrare giusto, forse il problema è che sto cercando di nascondere inutilmente i bordi frastagliati della luce nel frattempo non rendere la luce sfocata.

Il mio problema più grande sono tutte le variabili coinvolte nel farlo apparire al meglio.

Sono molto nuovo di grafica / rendering e non sono in alcun modo un artista. Forse la cosa più frustrante nel prestare a me sono tutte le variabili che sembrano essere coinvolte. Con il bagliore ho visto tanti possibili cambiamenti.

• A. Aggiungi modalità fusione, modalità fusione schermo o qualche altro preparato
• B. Pesatura della sfocatura e normale in modo diverso prima della combinazione
• C. Il sigma della funzione campana gaussiana (ho usato questa calcolatrice confusa ma non sembra dare gli stessi valori che vedo in altre persone)
• D. Scalari sui valori "x" inviati alla funzione sigma
• E. Scala del campione (riducendo o diminuendo il raggio di sfocatura)
• F. Modifica della risoluzione del buffer di luminosità

Come si trovano le costanti "più belle" quando si lavora con così tante variabili come questa?

Ho anche dei problemi perché il tempo che intercorre tra me e la modifica è molto lungo che è difficile vedere i cambiamenti, lo farei in shader toy ma non riesco a caricare questa immagine o generarne proceduralmente una simile.

In questo momento sono davvero bloccato sul sigma del kernel gaussiano della curva della campana, soprattutto perché sto codificando i numeri piuttosto che la formula perché ho bisogno della velocità del processore. Puoi suggerire un buon sigma da usare ?

Sigma e dimensione del kernel del filtro gaussiano

Per quanto riguarda come scegliere il sigma e la dimensione del kernel (pixel) del gaussiano: imposti il ​​sigma in base all'ampiezza di una sfocatura che vuoi (giudicandola visivamente) e quindi scegli la dimensione del kernel in base al sigma. È un gioco per trovare una dimensione del kernel che catturi abbastanza della curva a campana (matematicamente infinita) per apparire bella, pur non essendo troppo costosa.

Come regola generale, la dimensione del kernel dovrebbe essere almeno 6 volte il sigma. Quindi il kernel si estende a 3 sigmi in ciascuna direzione, il che è sufficiente per coprire quasi tutto il peso della curva a campana matematica. È anche bello arrotondare le dimensioni dei pixel al prossimo numero dispari in modo che il filtro sia simmetrico. Quindi, ad esempio, con sigma = 1,5 px, useresti un filtro da 9 pixel; con sigma = 2,0 px, utilizzare un filtro da 13 pixel, ecc.

In alternativa, se si hanno limiti di prestazioni che controllano la dimensione del kernel che è possibile utilizzare, quindi dividere per 6 per ottenere il sigma massimo che si può ottenere. (Nota che sigma può essere frazionario, poiché è solo un input per l'equazione della curva della campana.)

A proposito, un trucco per ottenere prestazioni migliori su grandi sfocature gaussiane è di sottocampionare l'immagine, eseguire una sfocatura più piccola, quindi ricampionare. Ad esempio, per ottenere un'efficace sfocatura di 13 pixel, è possibile sottocampionare l'immagine di 2x (utilizzando il filtro bilineare), quindi eseguire una sfocatura di 7 pixel e quindi campionare (utilizzando il filtro bilineare). Apparirà quasi come la sfocatura di 13 pixel, ma sarà notevolmente più veloce.

Creazione di un filtro bagliore di bell'aspetto

Un trucco comune con questi è quello di utilizzare più gaussiani di diverso raggio, sommati. Fa un effetto bagliore migliore rispetto a qualsiasi singolo gaussiano da solo. Ad esempio, ecco un mockup in Photoshop creato con tre livelli combinati in modo additivo. I tre gaussiani hanno dimensioni 3px, 5px e 11px (corrispondenti rispettivamente a sigma = 0,5px, 0,83px, 1,83px).

Puoi anche aggiungere gaussiani ancora più grandi per aumentare ulteriormente il raggio apparente del bagliore. Ecco come viene implementato l'effetto "fioritura" standard nei motori di gioco 3D.

Se la performance è un problema, il più piccolo gaussiano può essere sostituito da una copia dell'immagine originale non sfocata; l'effetto risultante apparirà più nitido, non così morbido, ma avrà comunque un bagliore che lo circonda. Come accennato in precedenza, i gaussiani più grandi possono essere eseguiti mediante downsampling, offuscamento e upsampling; e il upsampling può essere fatto usando un filtro bilineare hardware, ripiegato nel passaggio che unisce gli strati.

jaggies

Noterai che le jaggie sono ancora visibili in alcune aree dell'immagine sopra. Sfortunatamente, la sfocatura non è molto efficace nel nascondere i jaggies a meno che il raggio di sfocatura non sia abbastanza grande. Non esiste un modo semplice per utilizzare un post-processo per sbarazzarsi di jaggies: il modo migliore per evitarli è di non renderli in primo luogo. :)

Ti sento che non puoi utilizzare MSAA per motivi di prestazioni, ma potrebbe essere un'altra opzione. A seconda della modalità di rendering delle tracce di luminosità, potresti essere in grado di aumentarne leggermente le dimensioni e scrivere uno shader che applica una sfumatura per sbiadire il colore all'interno di un paio di pixel del bordo. Ciò dovrebbe aiutarli a sembrare più fluidi. Ecco uno shadertoy che mostra un falloff del bordo largo 1px usato per antialiasare una forma procedurale.