GLFontRenderer
1.0.0
Ce code vous permet de rendre un texte haute performance dans votre propre application OpenGL. La bibliothèque de rendu de police a été conçue avec facilité d'utilisation et rendu les performances. Je l'ai écrit en ~ 2010 et je l'ai mis à jour de temps en temps. Les fichiers de police lus par cette bibliothèque suivent le format développé pour le générateur de police BM: http://angelcode.com/products/bmfont/. Le fichier de police est accompagné d'un fichier de texture. La bibliothèque prend en charge les textures RGBA standard, ainsi que les SDF à canal unique, et même les SDF multi-canaux.
Restez à l'écoute.
La bibliothèque de polices est divisée en fichiers suivants:
L'appel de la fonction de dessin fait ce qui suit: reçoit la chaîne → Parses String → Crée la liste des quads → traduit cela en un tableau de tampon de sommet -> dessine tous les triangles texturés. Pendant l'analyse, la chaîne à dessiner est vérifiée pour les caractères qui ne sont pas dessinables par la police actuelle, ces caractères seront dessinés en tant que points d'interrogation. Pour chaque caractère de la chaîne, un quad est créé et ajouté à la liste de quad finale, ce quad contient des informations sur la position et la taille de l'écran (2D, orthogonal!) Et la coordonnée de texture pour ce caractère dans la police bitmap. La position d'un quad dépend de la position de départ de la chaîne et de la position du caractère précédent. La relation spécifique entre l'espacement d'un personnage et de la suivante est appelée leilage. Le fichier de configuration de police contient une table avec toutes les informations deacter pour cette police spécifique. Par exemple, cela pourrait être que si un «A» suit un «M», il doit être un pixel séparé, mais lorsqu'un «O» suit un «M», il est moins un pixel ou zéro pixels. Ces informations sont stockées en interne dans un tableau bidimensionnel pour un accès rapide. Pour rendre ce dessin suffisamment rapidement, toutes les informations sur les personnages et les relations de personnages (comme la création), ainsi que les textures sont chargées sur le démarrage du programme. Les textes peuvent être stockés pour que les tampons de sommet ne doivent pas être créés sur chaque itération de boucle de rendu.
Le moyen le plus simple de vérifier le fonctionnement de la bibliothèque et comment vous pouvez l'utiliser dans votre projet est de consulter l'exemple de l'implémentation fournie avec ce référentiel. Dans le cas où vous avez besoin de plus d'informations, veuillez lire le reste de ce chapitre.
Vous devrez copier les 10 fichiers mentionnés dans l'onde dans le dossier de votre projet.
Dans votre code, créez un objet global de bibliothèque de polices, avant d'ouvrir un contexte de rendu, comme ainsi:
// load openGL fonts
m_fontLibrary = new CFontLibrary(<PathToFontFolder>);
if (!m_fontLibrary-> ParseAllFontsInFolder ())
return; // no fonts found!Cela chargera toutes les polices stockées dans le dossier que vous avez spécifié en tant que paramètre d'entrée. Une fois le contexte de rendu créé, les textures doivent être chargées, comme ainsi:
// init font library from the current rendering context!
theApp.m_fontLibrary-> InitGLFonts ();Cela peut être fait dans une fonction d'initiation unique de ce contexte de rendu par exemple. Gardez à l'esprit que vous ne pouvez pas partager des textures entre deux ou plusieurs contextes avec cette bibliothèque (je ne l'ai pas implémenté car à l'époque il n'y avait pas de moyen efficace de le faire, seules certaines cartes Nvidia ne pouvaient et seulement en quelque sorte). Vous devez donc appeler cela pour chaque nouveau contexte de rendu. Une fois cela fait, la bibliothèque de polices est prête à l'emploi, ce qui signifie que vous pouvez appeler la méthode DrawString () à partir de l'objet FontLibrary.
(Remarque: ce chapitre a besoin d'une refonte, c'est seulement à peu près correct, certains paramètres de fonction sont manquants, mais surtout explicatifs de toute façon) L'en-tête de l'appel de tirage se lit comme suit:
void DrawString ( const std::string& textToDraw, int x, int y, float color[ 4 ], const std::string& font, float scale = 1 . 0f );Les paramètres sont décrits ci-dessous dans le tableau.
| Paramètre | Description |
|---|---|
| const std :: string & textToDraw | La chaîne à dessiner comme std :: string, pas les caractères reconnus sont dessinés comme '?'. Quels caractères sont valides dépend de la police utilisée et peuvent être définis lors de la création de la police-bitmap. |
| int x | Position x du début de la chaîne dans les coordonnées d'écran. 0 - Largeur |
| int y | Position y du début de la chaîne dans les coordonnées d'écran. 0 - hauteur |
| Couleur flottante [4] | tableau flottant contenant les informations de couleur qui seront utilisées pour moduler la texture. Les informations sur les couleurs sont des valeurs de 0,0 à 1,0 (inclusives), dans l'ordre standard suivant: {r, g, b, alpha} évidemment .. |
| const std :: String & Font | Ce paramètre définit le type de police à utiliser. Seuls les types de polices peuvent être utilisés dans le dossier et étaient là au temps de chargement. Vous pouvez transmettre le nom de fichier de cette police, sans l'extension ou pour plus de lisibilité au code et de sécurité, utilisez le fichier de définir: FontLibrary.h. Remarque: Si vous souhaitez imprimer audacieux ou en italique, vous devez utiliser une police qui est configurée pour le faire. |
| échelle flottante | Pour les textures RGBA, il est fortement recommandé d'utiliser la valeur par défaut: 1.0f. Vous pouvez évoluer vers le haut ou vers le bas, mais il devrait être clair que cela entraînera un flou. Cependant, avec SDF et MSDF, vous devriez pouvoir évoluer de haut en bas avant de voir des artefacts. |
Notez qu'il existe plus de fonctions avec des fonctionnalités supplémentaires, telles que les ruptures de ligne automatique. Voir le fichier d'en-tête de la bibliothèque de polices. Notez également que la chaîne à dessiner sera coupée après 10922 caractères. Si vous avez besoin de plus de caractère pour une raison étrange, utilisez simplement des appels de dessin supplémentaires et divisez la chaîne en parties.
Ce chapitre concerne l'ajout de vos propres polices à la bibliothèque de polices.
Notez que je me concentre sur les polices non-SDF ici. Les étapes des polices SDF sont assez similaires, mais BM-Font-Gen ne suffit pas. Vous pouvez toujours utiliser cet outil, mais vous devrez effectuer une étape de post-traitement avec des outils comme ImageMagick. Tutoriel ci-dessous.
Seules trois étapes sont nécessaires pour intégrer une nouvelle police: 1. Créez le Font-Config et la Font-Bitmap à l'aide de BM-Font-Generator 2. Copiez les deux fichiers résultants dans votre dossier Fonts 3. (Facultatif) Ajoutez la chaîne de police comme définie sur FontLibrary.h afin que vous puissiez l'utiliser plus facilement dans votre application dans votre application
Dans la section suivante, l'utilisation du générateur BM-FONT est décrite en détail, mais d'abord quelques notes. Chaque fichier de police que vous produisez ne contient qu'une police d'une taille fixe, il est également déjà défini par le fichier, qu'il soit audacieux ou en italique, etc. Même comptes pour le contour, la douceur de la police, etc. Cette affaire deviendra plus claire avec la section suivante.
Pour produire le Font-Config ainsi que le bitmap de police réel, j'utilise le «générateur de polices bitmap» d'AngelCode. Qui peut être obtenu à partir de leur site Web: http://angelcode.com/products/bmfont/ Après l'installation, ouvrez le programme, il devrait ressembler dans la figure suivante.
En première étape, ouvrez les réglages de polices, en cliquant sur les options → Paramètres de police ou en appuyant sur [F], qui ouvrira une nouvelle fenêtre, comme le montre la figure suivante.
Après avoir effectué ces configurations, fermez la fenêtre des paramètres de police et passez à l'étape suivante.
De retour dans la fenêtre principale du programme, vous pouvez désormais sélectionner les jeux de caractères que vous souhaitez inclure. Vous pouvez sélectionner des ensembles complets ou sélectionner uniquement des caractères spécifiques d'un ensemble. À titre d'exemple, voir la figure suivante.
En tant que règle de base, sélectionnez uniquement les caractères que vous êtes susceptible d'utiliser, cela permet de gagner du temps de traitement et surtout de la mémoire, pas seulement un seul caractère, mais beaucoup plus (kerning, taille bitmap, tailles de tableau dans notre code, etc.). Après avoir sélectionné tous les caractères, votre police doit inclure, passez à la section suivante.
Il est maintenant temps d'exporter la police en tant que bitmap et un fichier de configuration pour lui. Ouvrez les options d'exportation que je frappe soit [t], soit en cliquant sur Options → Options d'exportation. Une nouvelle fenêtre devrait apparaître, ressemblant à la figure suivante.
Une fois ces paramètres terminés, fermez la fenêtre et passez à l'étape suivante.
Pour vous assurer que votre texture n'est ni trop grande ni trop petite, appuyez sur [V] dans la fenêtre principale ou cliquez sur Options → Visualiser. Si le titre de la fenêtre dit autre chose que «prévisualiser 1/1», votre texture est trop petite pour tous vos personnages et que le programme produirait plus d'un bitmap. Dans ce cas, ouvrez les options d'exportation et augmentez la taille de votre texture. Remarque: il n'a plus besoin d'être au carré ou une puissance de deux, ce n'était que dans OpenGL Version 1, le cas. Cependant, je le recommanderais toujours pour le faire en tant que tel, car certaines fonctions liées à la texture peuvent être encore optimisées pour cela. La Fontlibrary ne gère pas intentionnellement plus d'une «page» ou de la texture, car cela signifierait lier / dénigrer la texture lors d'un appel de cordon, ce qui est lent! Alors faites-en exactement une page. Si, d'un autre côté, vous voyez que les caractères ne remplissent qu'une partie du bitmap, réduisez la taille de la texture, si possible, mais ce n'est pas aussi important que l'inverse. Une fois que vous êtes satisfait de l'utilisation de l'espace de texture, passez à l'étape suivante.
Maintenant que tous les paramètres sont fabriqués, il est temps d'exporter la police. Cliquez sur les options → Enregistrer le Bitmap-Font as ... Le nom de fichier que vous spécifiez ici affectera le nom de la police de la bibliothèque de polices, alors choisissez-le judicieusement. Pour des raisons de commodité et de lisibilité, je suggère la convention de dénomination suivante:
< italique? > <bold> <_ Taille?>
Voici quelques exemples:
Appuyez sur Save pour terminer le processus. Tout ce qu'il y a à faire maintenant, c'est de copier les deux fichiers pour cette police dans le dossier des polices de votre logiciel. Vous pouvez convertir le TGA en PNG avec un autre outil, n'oubliez pas de modifier correctement l'extension de fichier dans le fichier FNT.
Il s'agit d'un processus en 3 étapes.
Tout d'abord, utilisez le générateur BMFONT comme décrit ci-dessus. Cependant, utilisez ensuite les paramètres suivants qui peuvent différer pour former ce que vous avez utilisé auparavant.
Enfin, vous devez utiliser ImageMagick (https://imagemagick.org/index.php) ou un outil similaire pour convertir le fichier de texture en un SDF. Une fois que vous avez installé ImageMagick, exécutez ce qui suit à partir de la ligne de commande (l'exemple est pour Windows Power Shell, mais est très similaire pour 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
Ensuite, nous devons modifier le fichier FNT. Ajoutez ce qui suit à l'en-tête FNT ma main avant la définition de Chars:
fieldType=sdf
Cela indiquera à la FONT LIB d'utiliser le shader SDF à canal unique lorsque cette police est utilisée.
Pour les SDF multi-canaux, vous ne pouvez pas utiliser le générateur de police BM, utilisez plutôt: https://soimy.github.io/msdf-bmfont-xml/ avec cet outil, vous devez commencer à partir d'un fichier TTF, mais vous recevrez le fichier FNT plus habituel plus un fichier PNG. Une fois installé, exécutez ce qui suit à partir de la ligne de commande:
msdf-bmfont -o multisdf.png cour.ttf
Notez que vous pouvez également fournir la taille de la police et d'autres paramètres via la ligne de commandement.
Ceci est facultatif: faites une définition pour chaque nouvelle police que vous ajoutez à la FontLibrary.h, cela devrait cependant faciliter le codage!
// 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 ".. Ajoutez votre propre définition ici!
