Fast, dynamic 3D text in any TrueType font

Demos and projects
23

You’re talking about the playgrounds from the doc, right? :thinking:

25

Hi @pat_lvl17 @Blake
Are you guys still there?.
I just found a playground that uses DynamicTextures, which I am also using in my project. Please visit it at https://www.babylonjs-playground.com/#2GZZLD#2
Back to my question:
“This is a hack to make this work inside a playground”. How do I implement it in Visual Studio (my project using Babylonjs)
Thanks in advance!.

26

You’re asking about this block of code:

    // Don't do this
    // This is a hack to make this work inside a playground
    // Just add opentype.js and earcut.js to your project
    var s = document.createElement("script");
    s.src = "https://raw.githack.com/opentypejs/opentype.js/master/dist/opentype.min.js";
    document.head.appendChild(s);

I have to do that “hack” in the playground because we don’t have access to the HTML source of the playground itself. So just remove that block of code, download the files opentype.min.js and earcut.js and your font file, then add them to your html normally:

    <script src="opentype.min.js"></script>
    <script src="earcut.js"></script>

Also, please remember that we are all just hobbyists here, playing around with the BabylonJS engine in our spare time. There isn’t any dedicated customer support! :slight_smile: You should be aware of this if you’re using any of this in a professional project. It’s very likely that you’ll run into issues that just don’t have solutions (yet). If that is a deal breaker, then BabylonJS might not be right for your project.

3 Likes
27

I wonder if any other WebGL framework/library (List of WebGL frameworks - Wikipedia) has the same level of customer support as Babylon.js, not to mention huge and well maintained documentation.

If you need paid support you always can ask for this at Service offers and requests - Babylon.js

4 Likes
28

Oh wow, I stand corrected! I wasn’t even aware of the service offers forum. Great to know.

4 Likes
29

Hi, awesome work @pat_lvl17 ! I will definitely use this in my project :slight_smile:

I was also wondering, would it be possible to add an outline for the text mesh? What I mean is we could get an effect where the inside of the text is one color and the outside border is some other color. This way it would be easier to read in an environment where the background can be either dark or light :sunglasses:

30

Well, good news and bad news… BabylonJS has a feature to draw outlines. All you have to do is turn it on – but you need to turn it on for the parent mesh, not the instances (each letter being drawn is an instance). So I did it like this:

for (let g in font2.glyphs)
{
  if (font2.glyphs[g].mesh)
  {
    font2.glyphs[g].mesh.renderOutline = true;
    font2.glyphs[g].mesh.outlineWidth = 1;
    font2.glyphs[g].mesh.outlineColor = BABYLON.Color3.Yellow();
  }
}

And it does try to do something, but clearly it’s not quite right.

image
image836×264 60.1 KB

Anyone know why the outline would have that weird offset?

Edit:
Here’s the playground where I turned on the outline – https://playground.babylonjs.com/#IVGSG0#45

2 Likes
31

the outline renderer will unfortunately not work for this as it is basically moving each vertices in the direction of the normals. so on a flat mesh, it moves them all in the same direction giving the weird effect.

1 Like
32

Maybe this can be done with NodeMaterials somehow?

Also other thing that I’ve been thinking… How to change the text pivot point? I assume it is in the left most corner in the beginning. But there might be a use case to center it in the middle, for example when you want to rotate the text towards player :thinking:

33

You could move each “glyph” relative to the “rootNode.” But probably easier to just add a transform node as the parent of the text. That’s kind of the standard approach to changing the pivot point of a mesh.

1 Like
34

Yeah, installed the root TransformNode to this bad boy and moved the original text a bit when it was parented :slight_smile: Perfect centering

1 Like
35

Still thinking of the outline… Do you think it would be easy to have two kind of overlapping fonts, where the other one is slightly behind the other and slightly bigger? Would also need to adjust the spacing somehow that the glyphs are aligned exactly the same spot :grimacing:

36

Hi, I do outlining on 3D text in my project right now…but it is hard to achieve.

Basically you have to scale along the normal of edge point and create a more complicated model then that code does. I used that code as a base (thanks to whoever did it) but then added to it significantly.

joel
joel1051×384 16.4 KB

4 Likes
38

I hesitate to offer this as its not ready for public consumption, but you can play around with it at; http://mc.mindlessbrain.com/

Go to the ‘text’ model.

You can upload any TTF or OTF file you want, though not all of them work and there are lots of bits that don’t work or are…funky.

5 Likes
39

This looks really great !!!

40

Wow! This seems amazing! Great work guys!!

Just a quick check, have there been any further updates to this, or have Babylon integrated an alternative tool to create 3d text with Babylon code?

If otherwise I’m gonna give this a crack! Hope I can get it to work.

41

Hi @pat_lvl17 Your work looks really great !!!

But, I’m wondering how to set the font size of the text in your version? Nice work!

42

The generated text will have a “rootNode” object, and all the letters are children of that node. So you move/rotate/scale the rootNode to get the position and size that you want.

43

Thank Sir. But I wonder how we can get other fonts (Arial, Times New Roman)with this site: fonts.cdnfonts.com. I visited it and only saw the download option. Note that: I don’t want to use local fonts, I just want to use the cdnfonts URL like you in your work.

Thanks for your time.