Técnica de renderizado de texto sin texturas

• Renderizado de texto sin texturas

  • Tradicionalmente, para renderizar texto hay que renderizar todos los glifos de una fuente en un atlas, enlazarlo como textura y luego dibujar triángulos en pantalla para renderizar los glifos uno por uno.
  • Se presenta un método simple para mostrar rápidamente mensajes de depuración.
  • Se explica una técnica que permite dibujar todo el texto con una sola draw call.

• Fuente: píxeles sin textura

  • Para eliminar la textura del atlas de fuentes, es necesario almacenar dentro del fragment shader algo similar a un atlas de fuentes.
  • Se pueden usar constantes enteras para almacenar bitmaps, con lo que es posible renderizar glifos.
  • Es posible usar enteros de 8 bits como bitmap para dibujarlos en pantalla desde un fragment shader de GLSL.

• Una sola draw call

  • Se pueden usar draw calls instanciadas para evitar comandos de dibujo repetitivos.
  • Para cada instancia se usan datos que incluyen el desplazamiento de posición y el texto que se va a mostrar.
  • Los mensajes se dividen en bloques de 4 caracteres, se convierten a uint32_t y se almacenan en la estructura word_data.

• Vertex shader

  • El vertex shader genera tres salidas.
  • Coloca los vértices del triángulo en pantalla mediante gl_Position.
  • Pasa al fragment shader la palabra que se va a mostrar.
  • Genera coordenadas de textura para calcular las coordenadas uv.

• Fragment shader

  • El fragment shader necesita tres tipos de información para renderizar el texto.
  • Renderiza el glifo mapeando las coordenadas uv al bit correcto del bitmap del glifo.
  • Si el bit está activado, renderiza con el color de primer plano; si no, con el color de fondo.

• Implementación completa y código fuente

  • La implementación de esta técnica puede encontrarse en el código fuente del módulo le_print_debug_print_text.
  • Este módulo permite mostrar fácilmente mensajes de depuración en pantalla.

[GN⁺]

Opiniones en Hacker News

• En ShaderToy, escribir código con aritmética simple es una tarea divertida y fácil. Hay muchos ejemplos de hacks de texto
  • Ej.: Matrix en menos de 300 caracteres, efecto de pantalla CRT verde, etc.
• Este método es creativo, pero el resultado no es particularmente bonito. Se pueden agregar más bits para mejorar el resultado, pero una forma eficiente es guardar píxeles en blanco y negro como textura
• La forma habitual de dibujar texto en motores modernos de renderizado 3D es usar texto SDF. Esto genera un atlas de campos de distancia con signo usando un atlas de texturas tradicional
• No he intentado directamente un algoritmo de renderizado de texto, pero sí he implementado varios. Como necesitaba independencia de resolución y anti-aliasing, este método no me resultó útil
• Este método es conceptualmente similar al de Will Dobbie, pero más simple. Consiste en guardar los datos de píxeles en un arreglo
• También existe la opción de renderizar el texto como malla. TextMeshPro usa campos de distancia con signo para manejar escalas arbitrarias
• Sería interesante compararlo en rendimiento con el método tradicional basado en texturas. En tareas simples de una GPU moderna, probablemente la respuesta de rendimiento sea "sí"
• El video de Sebastian Lague cubre varias técnicas de renderizado de fuentes
• He usado una técnica similar que incluía los datos de la fuente dentro del código fuente del fragment shader. Usaba snprintf para escribir directamente en el búfer de la GPU
• Este método se parece a dibujar pequeños sprites de 8x8 en BBC Basic. Me trae recuerdos de hace 35 años
• Las GPU son eficientes renderizando desde texturas, pero relativamente lentas para manipular bits. Ahorra memoria, pero queda la duda de si realmente es más rápido que usar un atlas
• Existe la pregunta de si subir una textura pequeña a la GPU afecta mucho el rendimiento. También surge la duda de si es posible renderizar una cadena en una textura 2D y mostrar esa textura sobre dos triángulos