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.

1 comentario:

  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