Ajustar un sombreador de brillo para que se vea mejor

Tengo un juego simple y sus temas son estas pequeñas líneas. Está dirigido a iOS y Android, por lo que tiene una ENORME gama de procesadores en los que podría ejecutarse, en este momento.

Estoy tratando de agregarles brillo en tiempo real por dos razones

1. Estoy tratando de ocultar el hecho de que no tengo el tiempo de procesamiento para procesar el suavizado en la mayoría de los dispositivos.
2. Se supone que el tema del juego es pura luz, por lo tanto, esa imagen debería verse como si esas cosas fueran pura luz.

He estado ajustando un sombreador de desenfoque gaussiano separable durante bastante tiempo y he llegado a un punto de frustración, simplemente no puedo lograr que se vea bien, tal vez el problema es que estoy tratando de ocultar inútilmente los bordes irregulares de la luz mientras tanto no hace que la luz se vea borrosa.

Mi mayor problema son todas las variables involucradas para que se vea mejor.

Soy muy nuevo en gráficos / renderizado y de ninguna manera soy un artista. Quizás lo más frustrante de prestarme es todas las variables que parecen estar involucradas. Con resplandor he visto tantos cambios posibles.

• A. Agregue el modo de fusión, el modo de fusión de pantalla o alguna otra mezcla
• B. Ponderación del desenfoque, y normal de manera diferente antes de la combinación
• C. El Sigma de la función de campana gaussiana (he estado usando esta calculadora confusa pero no parece dar los mismos valores que veo que otras personas tienen)
• D. Escalares en los valores "x" enviados a la función sigma
• E. Escala de muestra (haciendo que el radio de desenfoque sea más pequeño o más grande)
• F. Cambiar la resolución del búfer incandescente

¿Cómo se encuentran las constantes de "mejor apariencia" cuando se trabaja con tantas variables como esta?

También estoy teniendo problemas porque el tiempo entre mí haciendo un ajuste y viendo que es mucho tiempo es difícil ver los cambios, lo haría en el juguete de sombreado, sin embargo, no puedo cargar esta imagen o generar una similar.

En este momento estoy realmente atascado en la sigma del núcleo de la curva de campana gaussiana, especialmente porque estoy codificando los números en lugar de la fórmula porque necesito la velocidad del procesador. ¿Puedes sugerir una buena sigma para usar ?

Sigma y tamaño del núcleo del filtro gaussiano

Con respecto a cómo elegir la sigma y el tamaño del núcleo (píxeles) del gaussiano: configura la sigma según el ancho de desenfoque que desee (juzgándolo visualmente) y luego elija el tamaño del núcleo según la sigma. Es un juego de encontrar un tamaño de núcleo que captura suficiente curva de campana (matemáticamente infinita) para verse bien, sin ser demasiado costoso.

Como regla general, el tamaño del núcleo debe ser al menos 6 veces el sigma. Luego, el núcleo se extiende hasta 3 sigmas en cada dirección, lo que es suficiente para cubrir casi todo el peso de la curva de campana matemática. También es bueno redondear el tamaño del píxel al siguiente número impar para que el filtro sea simétrico. Entonces, por ejemplo, con sigma = 1.5 px, usaría un filtro de 9 píxeles; con sigma = 2.0 px, use un filtro de 13 píxeles, etc.

Alternativamente, si tiene limitaciones de rendimiento que controlan qué tan grande puede ser el tamaño del núcleo, entonces divídalo entre 6 para obtener la sigma máxima con la que pueda salirse con la suya. (Tenga en cuenta que sigma puede ser fraccional, ya que es solo una entrada a la ecuación de la curva de campana).

Por cierto, un truco para obtener un mejor rendimiento en grandes desenfoques gaussianos es reducir la imagen, realizar un desenfoque más pequeño y luego muestrear. Por ejemplo, para obtener un desenfoque efectivo de 13 píxeles, puede reducir la imagen en 2x (usando filtrado bilineal), luego realizar un desenfoque de 7 píxeles y luego aumentar la muestra (usando filtrado bilineal). Se verá casi tan bueno como el desenfoque de 13 píxeles, pero será considerablemente más rápido.

Crear un filtro de brillo atractivo

Un truco común con estos es utilizar múltiples gaussianos de diferente radio, sumados. Tiene un mejor efecto de brillo que cualquier gaussiano por sí solo. Por ejemplo, aquí hay una maqueta en Photoshop creada con tres capas combinadas aditivamente. Los tres gaussianos son de tamaño 3px, 5px y 11px (correspondiente a sigma = 0.5px, 0.83px, 1.83px respectivamente).

También puede agregar gaussianos aún más grandes para aumentar aún más el radio aparente del brillo. Así es como se implementa el efecto estándar "bloom" en los motores de juegos 3D.

Si el rendimiento es una preocupación, el gaussiano más pequeño puede ser reemplazado por una copia de la imagen original borrosa; el efecto resultante se verá más nítido, no tan suave, pero aún tendrá un brillo que lo rodea. Como se mencionó anteriormente, los gaussianos más grandes se pueden hacer disminuyendo, difuminando y muestreando; y el muestreo ascendente se puede realizar mediante filtrado bilineal por hardware, doblado en el paso que combina las capas.

Jaggies

Notarás que las jaggies todavía son visibles en algunas áreas de la imagen de arriba. Desafortunadamente, el desenfoque no es muy efectivo para ocultar las irregularidades a menos que el radio de desenfoque sea bastante grande. No hay una manera fácil de usar un proceso posterior para deshacerse de las irregularidades: la mejor manera de evitarlas es no renderizarlas en primer lugar. :)

Escuché que no puede usar MSAA por razones de rendimiento, pero puede ser otra opción. Dependiendo de cómo renderice los senderos luminosos, es posible que pueda aumentar ligeramente su tamaño y escribir un sombreador que aplique un degradado para atenuar el color dentro de un par de píxeles del borde. Eso debería ayudarlos a verse más suaves. Aquí hay un dibujo sombreado que muestra una caída de borde de 1px de ancho utilizada para suavizar una forma de procedimiento.