Fast, dynamic 3D text in any TrueType font

I was looking for a way to do dynamic 3D text and found @TheLeftover’s excellent work on MeshWriter. After understanding how he built that class, I expanded on it and ended up with this.

It supports any TrueType font that opentype.js supports (in theory).

Hopefully the playground does a good job explaining how to use it:
https://playground.babylonjs.com/#IVGSG0#9

Basic usage:

  • Add the dependencies opentype.js and earcut.js to your project
  • Add the code to your project
  • Remove the hacked load of the dependencies – the section marked:
    // This is a hack to make this work inside a playground
  • Create a TextMeshFont object with your TrueType font (TTF) file
  • Create TextMesh objects with your text

Optional usage:

  • Update the text by calling TextMesh::updateText
  • Experiment with the constants at the top (MAX_BEZIER_STEPS and BEZIER_STEP_SIZE) if you want more/fewer triangles
  • If your font isn’t working, try using a two-sided material (disable backface culling) because some fonts have weird “winding orders” that cause all the triangles to be backwards

This is my first shot at creating something useful for BabylonJS so I expect issues. Feedback welcome!

Full credit to “riv,” the author of this post, for solving the hard parts.
(I moved this discussion from here: 3D text in Babylon to stop cluttering up the MeshWriter thread).

10 Likes

@pat_lvl17 that is so nice and big stuff
very well

1 Like

@pat_lvl17 it’s cool, very fast! I use MeshWriter in my game and I’m wondering how to set color and depth in your version? Nice work!

1 Like

Great milestone!

1 Like

For color, just assign whatever material you like. It’s just a regular mesh with some instances, and all instances share the same material as their parent. If you need different colors for different strings, you would have a few options:

  1. Create multiple different TextMeshFont objects and give each a different material (easiest but probably the slowest)
  2. Change vertex colors
  3. Use a custom shader that allows a different color per instance (most difficult but probably the fastest)

There’s no depth to the letters, they’re just flat shapes. You could probably add an “extrude” operation to make them 3D.

1 Like

Bravo!

@pat_lvl17 I will try, Thank you for details!

Looks awesome, thanks for sharing! Will definitely try it out!

I just realized one difficulty with materials… Each “glyph” (letter) is it’s own mesh. So you’d have to assign the material to each one:

Unless there’s some clever way to assign a material to the parent and have it apply to all child nodes.

I could add a parameter to the TextMeshFont constructor that specifies the material to be applied to every glyph.

Ok done:
https://playground.babylonjs.com/#IVGSG0#12

Now accepts a material parameter.

4 Likes

like this ?

@pat_lvl17 this is super, it would be great if you could also add thickness and visible from back side.

“Visible from back side” is easy, just set backFaceCulling to false in your material.

Giving it depth is a little harder, maybe I can figure out something clever with Babylon’s “extrude” methods.

I realized there’s no way to destroy the text once you’ve created it, so I added dispose() methods to both TextMesh and TextMeshFont:

https://playground.babylonjs.com/#IVGSG0#14

2 Likes