Dithering en WebGL: 4 efectos retro para tu web

Qué es el dithering y por qué vuelve a importar

Una matriz de Bayer de 4x4 y una paleta de apenas 8 colores bastan para convertir una escena 3D plana en una imagen con textura, sombras y carácter. Eso es el dithering: la técnica que usaban las consolas de los 90 para simular colores que su hardware no podía mostrar y que hoy vuelve como decisión estética en sitios web. Para un founder que compite por atención, entender cómo se construye ese efecto es entender por qué algunas webs se sienten memorables y otras no.

El dithering nació como una técnica de gráficos tempranos: introducir ruido de forma intencional sobre una imagen para engañar al cerebro y hacerle ver más colores o degradados más suaves de los que la máquina podía reproducir. Con paletas muy limitadas, era la única forma de que los diseñadores de videojuegos materializaran su visión.

Hoy ya no es un parche técnico sino una elección artística. Muchos artistas y estudios lo usan para dar a su trabajo una vibra retro reconocible, o para trabajar dentro de límites de color autoimpuestos. 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.

La clave está en el post-procesado. En lugar de modificar la geometría o los materiales, se aplica un shader sobre la escena ya renderizada, como un filtro de imagen sobre una foto. En el ecosistema de React Three Fiber esto se hace declarando una clase que extiende de Effect, definiendo el fragment shader, los uniforms necesarios y envolviendo todo con wrapEffect de @react-three/postprocessing para usarlo como componente JSX dentro de EffectComposer.

Cómo funciona el dithering ordenado con la matriz de Bayer

El primer experimento del artículo 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 mucho 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.

De 2 colores a paletas completas: cuantización de color

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.

Cómo emular una pantalla CRT en WebGL

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 una leve distorsión de las UV. Cada capa por separado es sutil; combinadas, construyen la sensación de estar mirando una pantalla vieja.

¿Qué significa esto para tu startup?

Si tu producto compite por atención, la estética dejó de ser un detalle cosmético. Un sitio con 3D bien resuelto comunica capacidad técnica antes de que el visitante lea una sola línea de copy. Pero el mensaje de fondo es más útil que eso: los efectos que se ven sofisticados están construidos con piezas simples y reutilizables.

Acciones concretas que puedes aplicar:

• Empieza por el post-procesado, no por la geometría. Si ya tienes una escena en React Three Fiber, un solo efecto de dithering o cuantización puede cambiar por completo su personalidad sin tocar el modelo 3D. Es la vía más rápida a una mejora visible.
• Define tu paleta antes de escribir el shader. La cuantización funciona mejor cuando decides de antemano cuántos colores quieres y cuáles son. Una paleta de 8 o 16 colores obliga a decisiones de diseño más claras y da coherencia a toda la interfaz.
• Mide el costo en rendimiento. Cada efecto adicional en el EffectComposer es una pasada extra sobre la escena. En móviles, donde ocurre buena parte del tráfico en LATAM y España, conviene probar el efecto en un dispositivo real antes de publicarlo.
• Usa los efectos como sistema, no como parche. Dithering, cuantización y pixelización son bloques que se combinan. Un mismo shader puede servir para la home, para una demo de producto y para material de marketing, con distintos parámetros.

El punto de fondo es que la diferenciación estética es una ventaja competitiva barata: no requiere más presupuesto de marketing, solo criterio técnico. Y el criterio se construye entendiendo las piezas, no copiando el resultado final.

Fuentes

• The Art of Dithering and Retro Shading for the Web (fuente original)