SDF fonts: cuando el rendering de texto necesita más que pixeles
¿Te has preguntado alguna vez por qué algunos juegos tienen texto que se ve nítido sin importar cuánto hagas zoom, mientras que otros se pixelan inmediatamente? La respuesta probablemente sea SDF fonts, una técnica que lleva años siendo el secreto mejor guardado del rendering de texto en tiempo real.
¿Qué diablos es SDF?
SDF significa Signed Distance Field, y es exactamente lo que suena: en lugar de almacenar pixeles, almacenas la distancia a la forma más cercana. Para cada punto en una textura, guardas qué tan lejos estás del borde de la letra. Positivo si estás adentro, negativo si estás afuera.
Pero aquí viene lo interesante: con esta información de distancia, puedes renderizar texto a cualquier escala usando un simple shader. Sin re-rasterizar, sin perder calidad, sin cargar múltiples versiones de la fuente.
La explicación detallada (y por qué importa)
El autor de Red Blob Games —Amit Patel— acaba de publicar una guía definitiva sobre SDF fonts después de un año completo refinando su comprensión del tema. Y vaya que valió la pena la espera.
El post no es solo "aquí está cómo usar msdfgen". Patel documenta todo el proceso de intentar escribir LA guía de SDF fonts, incluyendo cuatro rediseños completos del contenido. Comenzó queriendo cubrir múltiples librerías (msdfgen, stb_truetype, tiny-sdf), luego se dio cuenta de que el scope era demasiado amplio.
El resultado final se enfoca en los conceptos fundamentales: cómo funcionan los distance fields, qué efectos visuales permiten (outlines, shadows, glow), y cómo implementarlos en shaders. Incluye diagramas hechos a mano en SVG que explican desde glyph bounds hasta algoritmos de layout.
Los edge cases que nadie te cuenta
Lo que hace valiosa esta guía son los detalles prácticos que normalmente descubres después de horas debuggeando. Como el hecho de que los atlas de tamaño variable causan problemas de allocación en stack, o que los derivatives...
Foto de Compagnons en Unsplash
