El dithering en WebGL revive la estética de los 90 en webs y apps

El primer experimento es el dithering de ruido blanco: se toma la luminancia de cada píxel, se compara con un número aleatorio y se decide si el resultado es blanco o negro. Funciona, pero el resultado es caótico. La solución es el dithering ordenado, que cambia el ruido aleatorio por un mapa de umbrales definido con una matriz de Bayer. En lugar de comparar contra un valor aleatorio, cada píxel se compara contra el valor que le corresponde en la matriz. El patrón resultante es regular y más agradable a la vista.

El artículo muestra una implementación con una matriz de Bayer de 4x4: se obtiene la luminancia del píxel, se calcula su posición dentro de la matriz y se compara. Si la diferencia es positiva, el píxel es blanco; si no, negro. El tamaño de la matriz y los tonos de gris de la escena determinan el patrón final.

Existe una tercera vía, el dithering de ruido azul, que usa una textura de ruido en lugar de una matriz. El resultado queda a medio camino: menos repetitivo que el ordenado y menos caótico que el ruido blanco. El autor lo había usado antes en escenas de raymarching volumétrico para eliminar el banding o efecto de capas.

Hasta aquí, todos los ejemplos convierten la escena a blanco y negro. Eso es dithering basado en luminancia, y comprime la paleta a 2 bits: cada píxel es blanco o negro, y los matices intermedios aparecen por el patrón de dithering. Para recuperar color se usa la cuantización de color, con una fórmula que busca el color vecino más cercano según cuántos colores se quieran en la salida. Con una paleta de dos valores por canal se obtienen 2^3 = 8 colores; con cuatro valores por canal, 4^3 = 64 colores. Ese rango permite aproximar la estética de consolas y computadoras antiguas.

El artículo también recoge una variante de Alex Charlton en su texto «Dithering on the GPU»: en lugar de usar la fórmula, convierte cada píxel a HSL, busca sus dos vecinos más cercanos en tono dentro de una paleta arbitraria y usa la distancia entre ellos para decidir cuál aplicar. Es un proceso más artístico, pensado para paletas curadas a mano.

El siguiente salto es la pixelización: remapear las coordenadas UV y ajustarlas a una grilla para que la escena se vea como si tuviera menos resolución. Cuanto mayor el tamaño de píxel, más pixelada la imagen; pero si se exagera, el patrón de dithering desaparece porque ya no quedan píxeles suficientes para formarlo. El equilibrio entre ambos es lo que hace que el efecto funcione.

La parte más reconocible es la emulación del monitor CRT. Estos monitores tenían tres cañones de electrones —uno por canal de color— que excitaban fósforos en la pantalla, con una máscara de sombra que evitaba que los haces impactaran el fósforo equivocado. El artículo reproduce la Schiltzmaske, una rejilla de apertura donde cada columna está desplazada media celda, generando subceldas rojas, verdes y azules. A eso se suman detalles que hacen la diferencia: la curvatura de la pantalla (los CRT no eran planos), aberración cromática por el desalineado de los haces, algo de bloom, scanlines horizontales y un ligero parpadeo.

El autor del análisis, Maxime Heckel, lo aplica a proyectos de React Three Fiber y Three.js con un objetivo claro: que una escena 3D no se vea como un render genérico, sino con estilo propio. Para los desarrolladores que quieran implementarlo, el código completo y las explicaciones técnicas están disponibles en el artículo original.