And here’s a fully working version, with dynamic text.
https://playground.babylonjs.com/#IVGSG0#2
It runs at 60 fps, even updating the text on every frame (which is probably overkill for most real-world apps).
Each letter that gets drawn is an instance. I create these instances as they are needed… For example, if you create the text "Hello, World" and then change it to "Hello again, World", only the "again" part has to be created, while the rest is just reused. But I never delete the unused letter instances if you later remove the “again,” for example.
If you want to actually use this, I would recommend:
- Add opentype.js and earcut.js to your project the normal way and remove the hard-coded loader I used.
- Add the font you want to use as a local dependency, e.g.
"fonts/myGameFont.ttf", and remove the CDN hack I used just to get it to work in a playground. - Maybe delete unused letter instances after some amount of time, if you change the text a lot and have hundreds of instances sitting around unused.
Anyway, I hope someone finds it useful. I’ll be cleaning up the code and adding it to my project!
Edit: Moved this to its own topic – Fast, dynamic 3D text in any TrueType font