Técnica de renderização de texto sem textura

• Renderização de texto sem textura

  • Tradicionalmente, para renderizar texto, é preciso renderizar todos os glifos da fonte em um atlas, vinculá-lo como textura e depois desenhar triângulos na tela para renderizar cada glifo individualmente.
  • É apresentado um método simples para exibir rapidamente mensagens de depuração.
  • É explicada uma técnica que permite desenhar todo o texto com uma única draw call.

• Fonte: pixels sem textura

  • Para eliminar a textura de atlas da fonte, é necessário armazenar dentro do fragment shader algo semelhante a um atlas de fonte.
  • É possível armazenar bitmaps usando constantes inteiras, o que permite renderizar glifos.
  • Inteiros de 8 bits podem ser usados como bitmap para desenhar na tela no fragment shader em GLSL.

• Uma única draw call

  • É possível evitar comandos de desenho repetitivos usando uma instanced draw call.
  • Para cada instância, são usados dados que incluem o deslocamento de posição e o texto a ser exibido.
  • A mensagem é dividida em 4 caracteres, convertida para uint32_t e armazenada na estrutura word_data.

• Vertex shader

  • O vertex shader gera três saídas.
  • Em gl_Position, ele posiciona os vértices do triângulo na tela.
  • A palavra a ser exibida é passada ao fragment shader.
  • Coordenadas de textura são geradas para calcular as coordenadas uv.

• Fragment shader

  • O fragment shader precisa de três informações para renderizar o texto.
  • Ele renderiza os glifos mapeando as coordenadas uv para o bit correto do bitmap do glifo.
  • Se o bit estiver definido, renderiza com a cor de primeiro plano; caso contrário, com a cor de fundo.

• Implementação completa e código-fonte

  • A implementação dessa técnica pode ser encontrada no código-fonte do módulo le_print_debug_print_text.
  • Esse módulo facilita a exibição de mensagens de depuração na tela.

[GN⁺]

Comentários do Hacker News

• No ShaderToy, escrever código com aritmética simples é algo divertido e fácil. Há muitos exemplos de hacks de texto diferentes
  • Ex.: Matrix com menos de 300 caracteres, efeito de display CRT verde etc.
• Esse método é criativo, mas o resultado não é bonito. Dá para adicionar mais bits para obter resultados melhores, mas a forma eficiente é armazenar como textura usando pixels em preto e branco
• A forma comum de desenhar texto em engines modernas de renderização 3D é usar texto SDF. Isso gera um atlas de campos de distância com sinal usando um atlas de texturas tradicional
• Nunca tentei diretamente um algoritmo de renderização de texto, mas já implementei vários tipos. Como eu precisava de independência de resolução e antialiasing, esse método não ajudou
• Esse método é conceitualmente parecido com o do Will Dobbie, mas mais simples. Ele armazena os dados dos pixels em um array
• Também existe a opção de renderizar o texto como malha. O TextMeshPro usa campos de distância com sinal para lidar com escala arbitrária
• Seria interessante comparar a performance com a abordagem tradicional por textura. Em tarefas simples em GPUs modernas, a resposta sobre desempenho provavelmente seria "sim"
• O vídeo do Sebastian Lague aborda várias técnicas diferentes de renderização de fontes
• Já usei uma técnica parecida, incorporando os dados da fonte no código-fonte do fragment shader. Usei snprintf para escrever diretamente em um buffer da GPU
• Esse método é parecido com desenhar pequenos sprites 8x8 no BBC Basic. Traz lembranças de 35 anos atrás
• A GPU é eficiente para renderizar a partir de texturas, mas relativamente lenta para manipulação de bits. Economiza memória, mas fica a dúvida se isso realmente é mais rápido do que usar um atlas
• Há uma pergunta sobre se fazer upload de pequenas texturas para a GPU impacta muito a performance. Fica a curiosidade se seria possível renderizar uma string em uma textura em 2D e mostrar essa textura em dois triângulos