If you like my projects

domingo, 15 de noviembre de 2015

the best pixel-art interpolation filter -- el mejor filtro para pixel-art

Unos meses atrás, mientras utilizaba el emulador de maquinas de videojuegos "maquinitas" o arcades, Final Burn Alpha. Por la sencilla razón que desde hace mas de un año, llevo usando una computadora, que a comparación de la que anteriormente usaba, es más avanzada. Además al ser laptop viene con un monitor LCD por defecto. No soy muy fan del look del LCD, preferiría el look borroso del CRT.

Entonces, me puse a ver opciones para mejora de imagen. Ningúno de los típicos filtros "para mejorar el pixelart" (como Eagle, SuperEagle, Scale2x, HQ2x, HBX, etc.) me convencía en lo más minimo, e iba de Pre-Scale a Interpolation/Bilinear, intercambiandolo segun mis gustos. La razón de esto es que la mayoría de los juegos de maquinitas o arcade, salieron en una epoca en donde las resoluciones mas comunes eran CGA, EGA, que utilizaban monitores CRT con frequencia de 15khz y resolucion de pantalla de hasta 240p o 480i (modo entrelazado, utilizado mayormente en las TV).

Para poder soportar ver los juegos a una escala mayor de la cual fueron originalmente creados, alargando la imagen o haciendole "zoom", de una resolución de 240p a 768p por ejemplo, es necesario utilizar alguna clase de filtro de interpolacion. Si no configuras el emulador y le dejas todos los ajustes por defecto, consigues una imagen muy borrosa (bilinear) o distorsionada (nearest-neighbor) con pixeles dobles. Y esto es debido a que no todos los juegos utilizaban pixeles cuadrados. Ya que utilizando un monitor CRT, que es una pantalla raster, los pixeles son transmitidos por un haz de luz que atraviesa toda la pantalla creando linea por linea. Y no tenían una resolución impuesta. Como 640x480 o 320x240.

Además no todos los juegos usaban la misma resolución y todos deben de verse ocupando todo el espacio de la pantalla, estiradas, sin ningúna clase de overscan visible. A comparación de los monitores de ahora que tienen aspect ratio de 16:9 o 16:10 e incluso si pensamos en un celular o una tablet 3:2, estos juegos se verían distorsionados, ya que 4:3 era el estandar de la epoca. Y ocurre que los monitores que no tienen frequencia de 15khz, no soportan resoluciones menores, y menos si no son estandar como 320x240, los CRT modernos (que ahora ya están extintas) tenían frecuencias de 25khz~31khz. Y con la tecnología LCD, ni con sus chips avanzados de video, que hasta eso, solo las pantallas de TV los incluyen, se pueden ver resoluciones menores con efectividad. Y de hecho algunos monitores ni si quiera las reproducen.

Para evitar esta clase de problemas, en los emuladores, se utiliza la interpolación para crear la información que no existe, y se pueda expandir la imagen en toda la pantalla, aunque si eres purista como yo, NUNCA querrías ver un juego que originalmente tenía un aspect ratio de 4:3, estirado completamente a 16:9. O como por ejemplo: Pac-Man; que utilizaba monitor vertical con un aspect ratio de 3:4, que básicamente era un monitor CRT girado 90º  o en modo vertical.

Super Mario World (SNES-SFC/NTSC/U) original size

Super Mario World (SNES-SFC/NTSC/U) cubic Catmull-Rom Spline interpolation resize (3x/4:3)


Los filtros más conocidos de interpolación son: 

Nearest Neighbor: funciona bien cuando se trata de juegos con resolucion de pantalla que usa pixeles cuadrados, pero si no, cada ciertas lineas tendran pixeles de doble grosor con pixeles de 1 solo. Es completamente ineficiente con pixeles cuadrados.

Pre-Scale: basicamente es un super sample a una resolucion mayor que la resolucion a la cual va a ser mostrada, y posteriormente se reduce a la resolucion final (imagen de 320x240 original > se aumenta a 1024x960 > se reduce a 640x480). Es eficiente con pixeles no-cuadrados, como por ejemplo los juegos de arcade CPS2 de Capcom y su resolución de 384x224. Es como un Nearest Neighbor optimizado. Pre-Scale , a diferencia de los demás filtros, solo se utiliza en aplicaciones en tiempo real, aunque es muy costoso en terminos del procesador y la memoria, ya que utiliza muchos recursos al manejar mucha información.

Bi-Linear: Utiliza los 4 pixeles alrededor para crear pixeles nuevos. Tiene un aspecto muy borroso,, como si se le hubiera puesto blur a una imagen. Mucha gente dice que es el mejor, pero yo detesto que no respete los pixeles individuales (los pixeles claros pierden brillo al lado de pixeles oscuros), y que destruya el contraste. Bi-Linear se utiliza en conjunto con otros filtros para adaptarlos a distintas resoluciones o corrección de aspecto.

Bi-Cubic ó Cubic: (en realidad cubic convolution) Este filtro es el que más problemas da a la hora de reconocerlo, porque cubic se puede a referir a diversos tipos de filtros, como: Bell, Mitchell-Netravali, Sinc(3), incluso otros que son parecidos como: Hermite y Lanczos(2). Básicamente es una version mejorada de Bilinear, que toma 16 pixeles alredor del nuevo pixel para crear colores nuevos.
De entre todas las versiones la que más encuentro, que da mejores resultados es Cubic Catmull-Rom, que es matemáticamente parecida a Lanczos(2) jjj. hhh

Ventajas de Cubic Catmull-Rom: no perder el aspecto pixelado (esto es importante, más adelante, menciono porqué), tener mezcla de colores de manera uniforme (como si lo vieras en una pantalla de television), y preservar el contraste (tambien un punto importante de porque es el mejor), el halo que aparece cuando hay un contraste alto de colores (ringing), que incrementa la acutance (segun wikipedia).

Programas conocidos que usan Cubic Catmull-Rom son: Gimp que lo tiene como Cubic, Google Chrome lo utiliza como su filtro de interpolación por defecto para hacer zoom. Internet Explorer 9 lo utiliza tambien para zoom.

Para ver como se ve este filtro pudes bajar cualquiera de estos programas y verlo por ti mismo, aumentando el tamaño de la imagen o aumentando el zoom en Google Chrome o Internet Explorer (utilizando "CTRL" + "+" y "CTRL" + "-", utiliza: "CTRL" + "0" para regresar a la escala original).

Pero lo mejor que podrías hacer sería verlo en tiempo real utilizando el emulador Final Burn Alpha y algún rom (de algún arcade que tengas suelto por ahí). Lo configuras así: Video > Select blitter > Experimental (DirectX Graphics 9).

Luego, dentro de Video vas a: > Blitter options > Enable cubic filtering. Despues dentro de Blitter options > Cubic filter quality > Sharpened lightly (Catmull-Rom Spline). y de ahí cargas cualquier juego y lo puedes ver en acción (recomiendo ir a Audio > Plugin options > Use Low-pass filter, para ese efecto de maquinita)

Más al rato pondré algunas screenshots, y comparaciones.

Así se ve Street Fighter II' Champion Edition con Cubic Catmull-Rom:
Street Fighter II' Champion Edition Cubic Catmull-Rom Spline interpolation filter 3x(672p)/4:3
El contraste natural de los juegos retro nunca se había visto tan bien.

World Heroes Perfect, Neo Geo, SNK, Cubic Catmull-Rom Spline interpolation filter 3x (672p)/4:3
Se puede apreciar el brillo del color se preserva y el contraste natural. Ademas de que los pixeles blancos mantienen su tamaño y aspecto pese a estar rodeados de negro, con linear interpolation, pierden brillo .

The King of Fighter '97, Neo Geo, SNK Playmore, Cubic Catmull-Rom Spline interpolation filter 3x(672p) 4:3
Dithering, se preserva su aspecto y textura, y no se deforma como Eagle o SuperEagle, etc.

2 comentarios:

  1. Desde mi punto Chaleeman, los pixeles no se deben difuminar con ningún filtro del estilo “bilineal” y bajo ningún concepto.
    La mejor solución para ver pixel art como dios manda (osea como el autor lo pensó, pixel por pixel) es usar un monitor con la mayor resolución posible (si es 4k mejor) guardando la relación de aspecto, y sin filtro alguno ( el equivalente a nearest neighbor) esto es por que luego de la resolución original todas las otras suelen deformar los pixeles pero cuando mas grande sea la resolución la formula matemática hace que los errores sean mínimos y los pixeles siempre tienden a verse cuadrados. Por darte un ejemplo en una imagen de 320x240 llevada a 4k guardando la relación aspecto y con el “filtro” “nearest-neighbor” todos los pixeles tendrán 9x9 (o casi todos con un margen imperceptible), la misma imagen llevada a 800x600 tendrás pixeles que ocuparan 2 pixeles y otros 3. Si hablamos de video juegos ya sean 2d (con sprites) o 3d la resolución del monitor siempre importa y aunque sea un gasto enorme un monitor 4k es la mejor compra para el gamer y un gasto que proporcionara una mejora visual notoria.

    ResponderEliminar
    Respuestas
    1. se que ya pasó tiempo pero responderé...

      No estoy de acuerdo. Cuando se trata de emulación de consolas viejas, que no utilizaban pixeles cuadrados y PAR distinto a 4:3, a diferencia del standard de VGA que tiene una resolucion de 320x240 (640x580) y un PAR de 4:3. Hay que utilizar interpolacion para escalar las imagenes para mostrarse en 4:3. Ya que de otro modo, la imagen se va a ver incorrecta. El aspect ratio es importante. Asi que no concuerdo.

      El no utilizar una correción de aspecto por ejemplo el SNES de 256x224 (y sus derivadas a 1:1, 512x448 y 768x672) la imagen se ve estrecha, en el CPS2 cuya imagen es de 384x224 la imagen se ve ancha, DooM (de MS-DOS con resolucion de 320x200) tambien la imagen ancha.

      "El autor creo los graficos pensando en pixeles cuadrados es como dios manda". (Parafraseado) Es completamente desinformación. Así no se esta representado de ninguna manera, la visión original del creador. La interpolación se utiliza para mejorar la presentación que ofrecen los emuladores, de manera estandar. La cual, en mi opinion, es muy pobre. Ya que la mayoría de los juegos emulados, fueron hechos para visualizarse con un hardware especifico, que no es ni más ni menos que los televisiones de grado comercial o de uso doméstico (nunca fueron delibereadamente hechos para que los jugaran en un monitor CRT de PC, o incluso TV's o monitores LCD o monitores PVM). La mayoría de los juegos fueron hechos tomando en cuenta las tv's de la epoca, las cuales tenían pixeles rectangulares y un aspect ratio de 4:3. En realidad la tecnica de manipular pixeles era exclusiva de la epoca y de la tecnología de ese entonces. Era la forma más barata de crear imagenes en movimiento adecuado a las capacidades de la epoca (procesadores de 8-bit, 16-bit y sus sucesores de 32-bit). Además de que muchos programadores tomaban ventaja de la compresion del video que el video compuesto/composite (cable RCA) les ofrecía. Por ejemplo, las transparencias en los juegos de Genesis. Y no solo la compresión suavizaba los pixeles entre unos y otros, sino que además ofrecía una gamma de color distinta al visualizarse en una tv común, Además de que los monitores aplicaban correción gamma a la imagen. Por lo que si utilizabas una consola con cable RF o composite esa era lo que el autor estaba apuntando. Aunque no fuera su visión original, su obra era una adaptación a la tecnología de la epoca.

      Compara estos dos videos, de los cuales uno tiene compresión:
      Este: https://www.youtube.com/watch?v=5gl1vWsdyBU
      Y este video: https://www.youtube.com/watch?v=G_gEtc4rAqU

      Todo el cambio radical del color y la definición es por la compresion del composite. Pero esta era la presentación real que tenian los consumidores. Aparte, la mayoría de la compresión que se aprecia, no se aprecia tanto en una TV CRT (tengo una a mi lado).

      Por ejemplo como se ve el Super Mario Bros. 3.
      https://www.youtube.com/watch?v=bL02ZdvuobA

      TL:DR 80's 90's y 2000's las televisiones eran 4:3 asi que el DAR de 4:3 >>>> Pixeles cuadrados. Y la compresión RF o Composite era estandar.

      Arcades por otro lado, es la imagen pura sin ningún tipo de compresión. Pero definitivamente no utilizaban pixeles cuadrados. En cambio una emulación de LCD se ve horrenda a resolucion nativa.

      Ahora, hablando de juegos modernos. Como existen infinidad de resoluciones, tanto de celulares, como de laptops, pcs, etc. Lo correcto en mi opinion es usar una resolución estandar y escalar conforme las especificaciones del objetivo. Y pienso que (Bi)Cubic CatMull-Rom Spline Interpolation es la mejor en representación de imagen. Como los ejemplos que di en mi post. El color no se ensucia, por ejemplo los blancos no se vuelven grises, y no pierde brillo, como cuando se usa (Bi)Linear filter.

      PD. para terminar encontré hace unos días un video de los días del Genesis, y en ellos se pueden apreciar sus monitores y tvs 4:3.
      Parte 1: https://www.youtube.com/watch?v=lCnaw07LaS0
      Parte 2: https://www.youtube.com/watch?v=-M8RIc6Ek0Q

      Eliminar