Más allá de los píxeles: la ciencia de los sombreadores CRT en el navegador
Índice
Cuando abres un juego clásico de 8 o 16 bits en un monitor 4K moderno o en la pantalla OLED de alta densidad de un teléfono inteligente, hay algo que “no encaja”. Los colores se ven ásperos, los bordes son irregulares y los gráficos parecen más pixelados de lo que recordabas. No se trata solo de que la nostalgia te juegue una mala pasada: es una incompatibilidad fundamental del hardware.
En Recomendación 88, no solo queremos que los juegos funcionen; queremos que se vean tal y como los concibieron los artistas originales. Para lograrlo, hemos integrado GLSL (Lenguaje de sombreado de OpenGL) se introduce en nuestra “sala de máquinas” para simular la compleja física de un tubo de rayos catódicos (CRT). A continuación, te ofrecemos un desglose técnico de cómo utilizamos los cálculos de la GPU para salvar la brecha entre 1992 y 2026.
El problema de las pantallas LCD: la falacia del “píxel cuadrado”
Los juegos retro nunca fueron concebidos para verse como una cuadrícula perfecta de cuadrados nítidos. En un monitor CRT de la vieja escuela, los “píxeles” no eran cuadrados en absoluto; eran fósforos luminosos sobre los que incidía un haz de electrones. Esto generaba varios efectos visuales naturales:
- Líneas de exploración: Espacios oscuros entre las líneas, donde el haz de electrones volvía a atravesar la pantalla.
- Sangrado de color: Los fósforos rojo, verde y azul se superponen ligeramente, creando “nuevos” colores que no existen en el archivo digital.
- El resplandor: Las zonas de alto brillo se “extenderían” hacia las zonas oscuras circundantes.
Cuando se muestran esos mismos píxeles en una pantalla LCD moderna, cada uno de ellos se ve como un bloque estéril de contornos definidos. Esto hace que la obra parezca “inacabada”, ya que los artistas originales utilizaban el desenfoque natural del CRT para lograr “trucos de transparencia” y la mezcla de colores.
La solución: sombreadores GLSL en el lienzo HTML5
Para solucionar esto, nuestra sala de juegos moderna no se limita a “estirar” la imagen para llenar la pantalla. Hacemos pasar la salida de vídeo del juego por un proceso de posprocesamiento utilizando WebGL 2.0.
A Shader es un pequeño programa que se ejecuta directamente en tu tarjeta gráfica (GPU). En lugar de que la CPU calcule cada píxel uno por uno, la GPU calcula miles de píxeles al mismo tiempo utilizando geometría coordinada. En Rec0m88, utilizamos varias capas de sombreadores:
1. La superposición de líneas de exploración
Calculamos la coordenada vertical de cada píxel. Si la coordenada se encuentra en una línea “par”, aplicamos un ligero factor de oscurecimiento. Esto recrea los espacios horizontales que daban a los juegos retro su textura y profundidad. Sin embargo, una simple línea negra resulta demasiado brusca. Nuestros sombreadores utilizan Desenfoque gaussiano para que las líneas de exploración se vean naturales, y no como una jaula sobre la pantalla.
2. Simulación de rejilla de apertura y máscara de sombra
Los monitores “Trinitron” de gama alta utilizaban una rejilla de apertura, es decir, finos hilos verticales que separaban los fósforos. Nuestros sombreadores avanzados simulan este efecto aplicando una máscara de subpíxeles. Si amplías la imagen de un juego de Rec0m88 que utilice nuestro sombreador “Pro”, verás unas rayas verticales microscópicas de color rojo, verde y azul que imitan la estructura física de un monitor de arcade de gama alta.
3. Curvatura y redondeo de esquinas
El cristal de los televisores antiguos no era plano, sino que tenía forma de bombilla convexa. Nuestro motor puede aplicar una coordenada de urdimbre que curva sutilmente los bordes de la ventana del juego. Aunque esto parezca algo puramente estético, en realidad ayuda a “seguir con la vista” durante las partidas de ritmo rápido, ya que mantiene la atención centrada donde la acción es más intensa.
Equilibrio entre fidelidad y rendimiento
El mayor desafío a la hora de ejecutar shaders en un navegador es sobrecarga de rendimiento. Un sombreador complejo como “CRT-Geom” o “CRT-Royale” requiere una cantidad significativa de operaciones matemáticas de la GPU en cada fotograma. Si el sombreador tarda más de 2 o 3 milisegundos en ejecutarse, consume parte del “presupuesto de fotogramas” de 16,6 ms que necesitamos para el núcleo del emulador de WebAssembly.
Para resolver esto, Rec0m88 utiliza Sombreado adaptativo:
- Optimizado para dispositivos móviles: Si nuestro motor detecta un navegador móvil, cambia a una versión “ligera” del sombreador que utiliza una tabla de consulta (LUT) precalculada en lugar de cálculos físicos en tiempo real.
- Desktop Ultra: Para los usuarios con GPU dedicadas, habilitamos el sombreado multipaso, lo que permite el efecto bloom, la persistencia del fósforo (el “rastro” que dejan los objetos brillantes) e incluso los reflejos en el vidrio.
