Jump to content

3D text generation


Recommended Posts



It would be nice to generate 3D text from a simple string.


This feature exists in threejs and I looked at how they did : they rely on TypefaceJS.

This is their choice, but I don't suscribe to it because :

#1 - it's an external dependency

#2 - typeface approach is to pre-compute a SVG full font policy from a truetype font with a perl script, then transform these SVG characters into some json representation. These json sets are then used by threejs to be extruded and make 3D texts.

So there are only 3 policies available. If you need more, you have to run the perl script on the wanted truetype font, and export, and ... .


Not KISS enough imho :P


My idea is another approach :

The string (any UTF-8 string !) would be used to generate a dynamicTexture, so with any CSS-style and any browser supported font wanted :)

The only thing that would be fixed would be text and background colors : white for the text and black (or transparent, I don't know what is the best) for the background.

Why ?

Because the same algo that generates heightMaps would be then used to extrude the black & white text from a plane mesh textured with this dynamicTexture. It could at last be CSG intersected or other pertinent way to remove the fat plane and just keep the 3D text.


Not sure I'm very clear :(


I wish I can do a draft in the playground, but I just can't understand in github how the createGroundFromHeightMap() "reads" the heightmap image file to set the heights (I don't want to load a heightmap text file, so I need to tell createGroundFromHeightMap()  to use the dynamicTexture instead).

Maybe would the algo to be lightly modified to avoid continous deformation and propose only flat/up (black/white) deformations.


So has anyone an idea to pass createGroundFromHeightMap() a texture instead of a file URL ?

Link to comment
Share on other sites

you could get the data from the canvas context and use it to generate vertex data ( modified from createGroundFromHeightMap)  :

var mesh = new BABYLON.Mesh("mesh", scene);var context = texture.getContext();var buffer = context.getImageData(0, 0, heightMapWidth, heightMapHeight).data;var vertexData = BABYLON.VertexData.CreateGroundFromHeightMap(width, height, subdivisions, minHeight, maxHeight, buffer, heightMapWidth, heightMapHeight);vertexData.applyToMesh(mesh, false);
Link to comment
Share on other sites

Raanan, you are my idol !!! :P


first quick and dirty attempt to check the concept : http://www.babylonjs-playground.com/#V0WW9


So, it could be improved by :

- cutting off the flat plane (don't know how)

- adjust the deformation algo so the heights would be truly vertical or to have smoothest cliffs (don't know how to explain)

Link to comment
Share on other sites

the cool thing we've got with this approach is that we can generate everything the browser can display













Various symbols



Obviously it depends on if your system has got the right utf-8 table to display each character code ;)

Link to comment
Share on other sites

Well, it's not SVG, so the text quality is function of the initial font size upon initial canvas size and heightmap function number of subdivisions


we aren't limited to 3 font policies only, there's no external dependency, no external process (perl script) needed before and everything is done live under the bjs hood in 7 LOC only


maybe, could it be improved ? I don't know how :(


Say, it's for now just a lazy way to have 3D text in BJS :lol:

Link to comment
Share on other sites

If you link the height map image variable to the image that gets painted by the dynamic texture drawtext it would mean real time 3D typing or text that is imported from a database being displayed in 3D. 

*edit oh I just saw this is what you had done. I should look at the examples before typing :P

Link to comment
Share on other sites

Every pixel that is not white but next to a white one is a vertex...  those vertices form the polygon and then you do the triangulation with holes to get letters as a mesh? Hmm, might not be as easy as I imagine it... I guess I know too little about those things to help you here :(

Link to comment
Share on other sites

Now is just as good a time as any to let you know.  I have been doing things in the text as mesh department. 


I am building a module in the 'DIALOG' namespace, that I intended to make public.  The lowest level class is going to be DIALOG.Letter (Mesh subclass).  Letters would be members of DIALOG.Label (AbstractMesh subclass).  Constructor would be:

constructor(lettersAsText: string, scene: BABYLON.Scene, public letters : Array<Letter>){}

From there higher level controls like (DIALOG.Button) & containers like (DIALOG.Panel, or DIALOG.Menu) could be built on top.  Plan on keeping layout options for containers small, but everything should be supporting a DIALOG.LayoutRequestable interface.


I am powering the creation of actual DIALOG.Letters with a fontGen.blend & Tower of Babel 2.0, which generates an inline "mesh factory".  You request a mesh, and you get back either an original or a clone of the original.  There are also overrides of dispose(), which removes the reference to the original in the library when the geometry is no longer in use.


Think that it the module could be loaded with 2 stock fonts, 2d (no backface culling), and 3d.  With the fontgen.blend, you can also make your own with any typeface, or depth, italics, special characters, etc.  Think for the repository should stick with the stock "Blender" typeface.  Seem to remember from my days long ago at Xerox that you cannot copyright typefaces.  You can, however copyright programs, which is how this IP is protected, they are computer programs.


The fontgen.blend is done.  TOB 2.0 is done.  Also the breakout of a POV module from MORPH is close.  With POV you can make the containers fly through the scene.  DIALOG is just a shell.  Once the other stuff is in Extensions, Dialog will be fleshed out.  If anyone wishes to help, PM me.  Nothing today.  Lots to do, including digging out from a foot of snow. 


Here is an old snap of fontgen.blend:


Link to comment
Share on other sites

  • 4 weeks later...



Yesterday reading some old post in the forum, I just discovered the displacementMap existed in BJS.. waaaooww ! :)


I felt as well happy this kind of feature was present as well sad there is no real way to know everything what BJS could provide :(

Maybe is it better to consider that randomly discovering new features is a kind of  everyday good surprise :D


So I decided to reactivate this useless experimental post. I wanted to check if we could extrude 2D text from a dynamic texture with displacementMap instead of createGroungFromHeightMap as formerly ( http://www.babylonjs-playground.com/#V0WW9 )




doesn't work ...

Any idea ?

Link to comment
Share on other sites

Especially for you :-)




You chose a plane, which doesn't have a lot of "positions" to play with. A grond with a few subdivisions works better. You also didn't make the mesh updatable (which is required here, as the updateVerticesData function is being used)

There was also an extra parameter in the applyDisplacementMapFromBuffer function  :)


Now all you need is to make it look pretty....

Link to comment
Share on other sites


thank you RaananW


I was totally wrong about the choice of the mesh type indeed !


I just set the same value as for the former test with CreateGroundFromEtc... : http://www.babylonjs-playground.com/#V0WW9#10

Seems the same quality

It was just to check if the mapDisplacement algo had a better "polygonization" process :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...