GLFontRenderer
1.0.0
Este código permite renderizar texto de alto desempenho em seu próprio aplicativo OpenGL. A biblioteca de renderização de fontes foi projetada com facilidade de uso e desempenho em mente. Eu o escrevi em ~ 2010 e o atualizei de vez em quando. Os arquivos de fonte lidos por esta biblioteca seguem o formato desenvolvido para o gerador de fonte BM: http://angelcode.com/products/bmfont/. O arquivo de fonte é acompanhado por um arquivo de textura. A biblioteca suporta texturas RGBA padrão, bem como SDF de canal único, e até SDFs de vários canais.
Fique atento.
A biblioteca de fontes é dividida nos seguintes arquivos:
A chamada da função de cordão faz o seguinte: recebe string → String → Cria a lista de quads → traduz isso em uma matriz de buffer de vértice -> desenha todos os triângulos texturizados. Durante a análise, a string a ser desenhada é verificada quanto a caracteres que não são desenhados pela fonte atual, esses chars serão desenhados como pontos de interrogação. Para cada caractere na string, um quad é criado e adicionado à lista final, este quadra contém informações sobre a posição e o tamanho na tela (2D, ortogonal!) E a coordenada de textura para esse caractere na fonte de bitmap. A posição de um quad depende da posição inicial da string e da posição do caractere anterior. A relação específica entre o espaçamento de um caractere e a seguinte é chamada Kerning. O arquivo de configuração da fonte contém uma tabela com todas as informações de kerning para essa fonte específica. Por exemplo, poderia ser que, se um "A" seguir um "M", ele precisa ser um pixel separado, no entanto, quando um "O" segue um "M", é menos um pixel ou zero pixels. Essas informações são armazenadas internamente em uma matriz bidimensional para acesso rápido. Para tornar esse desenho rápido o suficiente, todas as informações sobre os personagens e relações de personagens (como Kerning), bem como as texturas são carregadas no início do programa. Os textos podem ser armazenados para que os buffers de vértice não precisem ser criados em cada iteração do loop de renderização.
A maneira mais fácil de verificar como a biblioteca funciona e como você pode usá -la em seu projeto, verificando a implementação de exemplo fornecida com este repositório. Caso você precise de mais informações, leia o restante deste capítulo.
Você precisará copiar os 10 arquivos mencionados no Overiew na pasta do projeto.
No seu código, crie um objeto global da biblioteca de fontes, antes de abrir um contexto de renderização, como assim:
// load openGL fonts
m_fontLibrary = new CFontLibrary(<PathToFontFolder>);
if (!m_fontLibrary-> ParseAllFontsInFolder ())
return; // no fonts found!Isso carregará todas as fontes armazenadas na pasta que você especificou como parâmetro de entrada. Depois que o contexto de renderização é criado, as texturas precisam ser carregadas, assim:
// init font library from the current rendering context!
theApp.m_fontLibrary-> InitGLFonts ();Isso pode ser feito em uma função init única desse contexto de renderização, por exemplo. Lembre -se de que você não pode compartilhar texturas entre dois ou mais contextos com essa biblioteca (eu não a implementei porque, no momento em que não havia uma maneira eficiente de fazê -lo, apenas alguns cartões da NVIDIA podiam e apenas o tipo de). Então você deve chamar isso para cada novo contexto de renderização. Uma vez feito isso, a biblioteca de fontes está pronta para uso, o que significa que você pode chamar o método destring () do objeto Fontlibrary.
(Nota: este capítulo precisa de uma revisão, é apenas aproximadamente correto, alguns parâmetros de função estão ausentes, mas principalmente auto -explicativos de qualquer maneira) o cabeçalho da chamada de sorteio diz:
void DrawString ( const std::string& textToDraw, int x, int y, float color[ 4 ], const std::string& font, float scale = 1 . 0f );Os parâmetros são descritos abaixo na tabela.
| Parâmetro | Descrição |
|---|---|
| const std :: string & textTodraw | A string para desenhar como std :: string, não é reconhecida caracteres são desenhados como '?'. Quais caracteres são válidos depende da fonte usada e podem ser definidos ao criar o font-bitmap. |
| int x | Posição x do início da string nas coordenadas da tela. 0 - Largura |
| int y | Posição Y do início da string nas coordenadas da tela. 0 - Altura |
| cor de flutuação [4] | Matriz de flutuação contendo as informações de cores que serão usadas para modular a textura. As informações de cores são valores de 0,0 a 1,0 (inclusive), na seguinte ordem padrão: {r, g, b, alfa} obviamente .. |
| const std :: string & font | Este parâmetro define o tipo de fonte a ser usado. Somente tipos de fonte podem ser usados na pasta e estavam lá no tempo de carregamento. Você pode passar no nome do arquivo dessa fonte, sem a extensão ou para obter mais legibilidade e segurança de código, use a definição do arquivo: fontlibrary.h. Nota: Se você deseja imprimir ousado ou itálico, precisará usar uma fonte que seja configurada para fazer isso. |
| Escala de flutuação | Para texturas RGBA, é altamente recomendável usar o padrão: 1.0F. Você pode aumentar ou diminuir, mas deve ficar claro que isso resultará em desfoque. No entanto, com o SDF e o MSDF, você poderá aumentar e diminuir ainda mais antes de ver artefatos. |
Observe que existem mais funções com recursos adicionais, como quebras automáticas de linha. Consulte o arquivo de cabeçalho da biblioteca de fontes. Observe também que a string a ser desenhada será cortada após 10922 caracteres. Se você precisar de mais caracteres por qualquer motivo estranho, basta usar chamadas de desenho adicionais e dividir a string em peças.
Este capítulo está preocupado em adicionar suas próprias fontes à biblioteca de fontes.
Observe que eu me concentro nas fontes não-SDF aqui. As etapas para as fontes SDF são bastante semelhantes, mas a BM-Font-Gen não é suficiente. Você ainda pode usar essa ferramenta, mas precisará executar uma etapa de pós -processamento com ferramentas como o ImageMagick. Tutorial abaixo.
São necessários apenas três etapas para integrar uma nova fonte: 1. Crie a font-config e o font-bitmap usando BM-Font-Generator 2. Copie os dois arquivos resultantes na sua pasta Fonta 3.
Na seção a seguir, o uso do gerador BM-font é descrito em detalhes, mas primeiro algumas notas. Cada arquivo de fonte que você produz contém apenas uma fonte de tamanho fixo, também já é definido pelo arquivo, seja ousado ou itálico, etc. As mesmas contagens para contorno, suavidade da fonte etc. Este assunto ficará mais claro com a seção a seguir.
Para produzir o Config da fonte e o bitmap de fonte real, eu uso o "Gerador de Fonte Bitmap" do AngelCode. Que pode ser obtido em seu site: http://angelcode.com/products/bmfont/ Após a instalação, abra o programa, ele deve parecer na figura a seguir.
Como primeira etapa, abra as fontes, clicando em opções → Configurações da fonte ou pressionando [F], que abrirá uma nova janela, como mostra a próxima figura.
Depois de fazer essas configurações, feche a janela Configurações da fonte e prossiga para a próxima etapa.
De volta à janela principal do programa, agora você pode selecionar os conjuntos de caracteres que deseja incluir. Você pode selecionar conjuntos completos ou selecionar apenas caracteres específicos de um conjunto. Como exemplo, veja a próxima figura.
Como uma regra básica, selecione apenas os caracteres que você provavelmente usará, isso economiza tempo de processamento e, acima de tudo, a memória, não apenas um personagem, mas muito mais (Kerning, tamanho do bitmap, tamanhos de matriz em nosso código etc.). Depois de selecionar todos os caracteres, sua fonte deve incluir, prossiga para a próxima seção.
Agora é hora de exportar a fonte como um bitmap e criar um arquivo de configuração para ele. Abra as opções de exportação que eu acertou [t] ou clicando em opções → opções de exportação. Uma nova janela deve aparecer, parecendo na figura a seguir.
Depois que essas configurações estiverem concluídas, feche a janela e prossiga para a próxima etapa.
Para garantir que sua textura não seja muito grande nem muito pequena, pressione [V] enquanto estiver na janela principal ou clique em Opções → Visualize. Se o título da janela disser qualquer coisa, exceto "visualizar 1/1", sua textura é muito pequena para todos os seus personagens e o programa produziria mais de um bitmap. Nesse caso, abra as opções de exportação e aumente o tamanho da textura. Nota: ele não precisa mais ser quadrado ou um poder de dois, isso foi apenas no OpenGL versão 1, o caso. No entanto, eu ainda o recomendaria para torná -lo como tal, pois algumas funções relacionadas à textura ainda podem ser otimizadas para ele. A biblioteca intencionalmente não lida com mais de uma "página" ou textura, pois isso significaria vincular/desbaste a textura durante uma chamada de cordão, que é lenta! Então, faça exatamente uma página. Se, por outro lado, você ver que os caracteres preenchem apenas uma parte do bitmap, reduza o tamanho da textura, se possível, mas isso não é tão importante quanto o contrário. Depois de ficar satisfeito com o uso do espaço de textura, prossiga para a próxima etapa.
Agora que todas as configurações são feitas, é hora de exportar a fonte. Clique nas opções → Salvar bitmap-font como ... O nome do arquivo que você especificar aqui afetará o nome da fonte na biblioteca de fontes; portanto, escolha -a sabiamente. Por motivos de conveniência e legibilidade, sugiro a seguinte convenção de nomenclatura:
< itálico? > <Bold> <_ delineado? Tamanho?>
Aqui estão alguns exemplos:
Pressione SAVE para concluir o processo. Tudo o que há para fazer agora é copiar os dois arquivos para essa fonte na pasta Fontes do seu software. Você pode converter o TGA em PNG com outra ferramenta, lembre -se de alterar a extensão do arquivo no arquivo FNT corretamente.
Este é um processo de 3 etapas.
Primeiro, use o gerador BMFont, conforme descrito acima. No entanto, use as seguintes configurações que podem diferir o que você usou antes.
Por fim, você precisa usar o ImageMagick (https://imagemagick.org/index.php) ou uma ferramenta semelhante para converter o arquivo de textura em um SDF. Depois de instalar o ImageMagick, execute o seguinte na linha de comando (o exemplo é para o Windows Power Shell, mas é muito semelhante para o Unix):
magick convert --% Arial400_0.tga -filter Jinc ( +clone -negate -morphology Distance Euclidean -level 50%,-50% ) -morphology Distance Euclidean -compose Plus -composite -level 45%,55% -resize 25% Arial400_0.png
Em seguida, precisamos editar o arquivo FNT. Adicione o seguinte ao cabeçalho FNT minha mão antes da definição de Chars:
fieldType=sdf
Isso dirá à fonte Lib para usar o shader SDF de canal único quando essa fonte for usada.
Para SDFs multicanal, você não pode usar o gerador de fonte BM; em vez disso, use: https://soimy.github.io/msdf-bmfont-xml/ com esta ferramenta, você precisa iniciar a partir de um arquivo TTF, mas você receberá o arquivo FNT usual mais um arquivo PNG. Depois de instalado, execute o seguinte na linha de comando:
msdf-bmfont -o multisdf.png cour.ttf
Observe que você também pode fornecer o tamanho da fonte e outros parâmetros através da linha de comando.
Isso é opcional: faça uma definição para cada nova fonte que você adiciona à Fontlibrary.h, isso deve facilitar a codificação!
// font type defines, string must match the filename without extension in your fonts folder!
# define GLFONT_COURIER42_MSDF " Courier42_msdf "
# define GLFONT_ARIAL20 " Arial20 "
# define GLFONT_DINNEXTLTPROMED_SDF " DINNextLTProMED_SDF ".. Adicione o seu próprio define aqui!
