Fast, dynamic 3D text in any TrueType font

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

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!.

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

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

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

4 Likes

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:

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.

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

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

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:

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

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

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:

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.

4 Likes

Wow, that looks really nice - much better than the modifications I came up - the font, extrusion, and lighting/coloring are all wonderful.:astonished: :heart_eyes:

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.

4 Likes

This looks really great !!!