Ajuster un shader de lueur pour le rendre plus beau

J'ai un jeu simple et les sujets sont ces petites lignes. Il est ciblé pour iOS et Android, il dispose donc d'une vaste gamme de processeurs sur lesquels il pourrait fonctionner en ce moment.

J'essaie de leur ajouter une lueur en temps réel pour deux raisons

1. J'essaie de cacher le fait que je n'ai pas le temps de rendu pour traiter l'anticrénelage sur la plupart des appareils.
2. Le sujet du jeu est censé être de la lumière pure, ergo, cette image devrait ressembler à de la lumière pure.

Je modifie un shader de flou gaussien séparable depuis un certain temps et je suis arrivé à un point de frustration, je n'arrive tout simplement pas à ce qu'il semble bien, peut-être que le problème est que j'essaie de cacher vainement les bords irréguliers de la lumière en attendant ne pas rendre la lumière floue.

Mon plus gros problème est toutes les variables impliquées pour lui donner le meilleur aspect.

Je suis très nouveau en graphisme / rendu et je ne suis en aucun cas un artiste. La chose la plus frustrante à propos du rendu pour moi est peut-être toutes les variables qui semblent être impliquées. Avec éclat, j'ai vu tant de changements possibles.

• A. Ajouter un mode de fusion, un mode de fusion d'écran ou une autre concoction
• B. pondération du flou, et normal différemment avant la combinaison
• C. Le Sigma de la fonction de cloche gaussienne (J'utilise cette calculatrice déroutante mais elle ne semble pas donner les mêmes valeurs que celles que d'autres personnes ont)
• D. Scalaires sur les valeurs "x" envoyées à la fonction sigma
• E. Échelle d'échantillonnage (rendant le rayon de flou plus petit ou plus grand)
• F. Modification de la résolution du tampon lumineux

Comment trouve-t-on les constantes «les plus belles» lorsque l'on travaille avec autant de variables comme celle-ci?

J'ai aussi des problèmes parce que le temps entre moi pour faire un tweak et le voir est long que c'est difficile de voir les changements, je le ferais dans un jouet shader mais je ne peux pas charger cette image ou en générer procéduralement une comme elle.

En ce moment, je suis vraiment coincé sur le sigma du noyau gaussien de la courbe en cloche, surtout parce que je code les chiffres plutôt que la formule parce que j'ai besoin de la vitesse du processeur. Pouvez-vous suggérer un bon sigma à utiliser ?

Sigma et taille du noyau du filtre gaussien

En ce qui concerne la façon de choisir le sigma et la taille du noyau (pixels) du gaussien: vous définissez le sigma en fonction de la largeur du flou que vous souhaitez (à en juger visuellement), puis choisissez la taille du noyau en fonction du sigma. C'est un jeu de recherche d'une taille de noyau qui capture suffisamment de la courbe en cloche (infiniment mathématique) pour bien paraître, tout en n'étant pas trop cher.

En règle générale, la taille du noyau doit être au moins 6 fois la sigma. Ensuite, le noyau s'étend jusqu'à 3 sigmas dans chaque direction, ce qui suffit pour couvrir presque tout le poids de la courbe en cloche mathématique. Il est également agréable d'arrondir la taille des pixels au nombre impair suivant afin que le filtre soit symétrique. Ainsi, par exemple, avec sigma = 1,5 px, vous utiliseriez un filtre à 9 pixels; avec sigma = 2,0 px, utilisez un filtre de 13 pixels, etc.

Alternativement, si vous avez des limitations de performances qui contrôlent la taille d'une taille de noyau que vous pouvez utiliser, divisez-la par 6 pour obtenir le sigma maximum avec lequel vous pouvez vous en sortir. (Notez que sigma peut être fractionnaire, car il s'agit simplement d'une entrée dans l'équation de la courbe en cloche.)

Soit dit en passant, une astuce pour obtenir de meilleures performances sur les grands flous gaussiens consiste à sous-échantillonner l'image, à effectuer un flou plus petit, puis à suréchantillonner. Par exemple, pour obtenir un flou de 13 pixels efficace, vous pouvez sous-échantillonner l'image de 2x (en utilisant le filtrage bilinéaire), puis effectuer un flou de 7 pixels, puis suréchantillonner (en utilisant le filtrage bilinéaire). Il sera presque aussi bon que le flou de 13 pixels, mais sera considérablement plus rapide.

Création d'un beau filtre lumineux

Une astuce courante avec ceux-ci consiste à utiliser plusieurs gaussiens de rayon différent, additionnés. Il fait un meilleur effet de lueur que n'importe quel gaussien en lui-même. Par exemple, voici une maquette dans Photoshop créée avec trois couches mélangées additivement. Les trois gaussiens sont de taille 3px, 5px et 11px (correspondant à sigma = 0,5px, 0,83px, 1,83px respectivement).

Vous pouvez également ajouter des gaussiens encore plus grands pour augmenter encore le rayon apparent de la lueur. C'est ainsi que l'effet "bloom" standard est implémenté dans les moteurs de jeux 3D.

Si les performances sont un problème, la plus petite gaussienne peut être remplacée par une copie de l'image originale non floue; l'effet résultant sera plus net, pas si doux, mais aura toujours une lueur qui l'entourera. Comme mentionné précédemment, les gaussiens plus grands peuvent être effectués par sous-échantillonnage, flou et suréchantillonnage; et le suréchantillonnage peut être effectué en utilisant un filtrage bilinéaire matériel, plié dans la passe qui mélange les couches ensemble.

Jaggies

Vous remarquerez que des jaggies sont toujours visibles dans certaines zones de l'image ci-dessus. Malheureusement, le flou n'est pas très efficace pour masquer les jaggies, sauf si le rayon de flou est assez grand. Il n'y a pas de moyen facile d'utiliser un post-processus pour se débarrasser des jaggies: la meilleure façon de les éviter n'est pas de les rendre en premier lieu. :)

Je vous entends dire que vous ne pouvez pas utiliser MSAA pour des raisons de performances, mais peut être une autre option. Selon la façon dont vous effectuez le rendu des traînées lumineuses, vous pouvez peut-être augmenter légèrement leur taille et écrire un ombrage qui applique un dégradé pour atténuer la couleur à quelques pixels du bord. Cela devrait les aider à paraître plus lisses. Voici un shadertoy qui montre une atténuation des bords de 1px de large utilisée pour l'anticrénelage d'une forme procédurale.