3D text generation

[jerome]

Hi,

 

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

 

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 ?

[RaananW]

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);

[jerome]

thank you a lot !!!

[jerome]

Raanan, you are my idol !!!

 

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)

[RaananW]

Finally! someone's idol! I'll go tell my wife :-)

 

This is so awesome, what you did! Such a great Idea. I'm glad I could help with it

[jerome]

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

Deutsch

http://www.babylonjs-playground.com/#V0WW9#1

 

Kanji

http://www.babylonjs-playground.com/#V0WW9#2

 

Greek

http://www.babylonjs-playground.com/#V0WW9#3

 

Arabic

http://www.babylonjs-playground.com/#V0WW9#4

 

Various symbols

http://www.babylonjs-playground.com/#V0WW9#5

 

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

[jerome]

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

but...

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

[spritefire]

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

[iiceman]

Would it be possible to use the triangulation (http://www.html5gamedevs.com/topic/11477-create-a-new-mesh-with-a-polygon-points-list-triangulation/) to build the text based on the pixels in the canvas and then extrude it?

[jerome]

Maybe yes

but I thought that triangulation just computed triangles (faces) inside a given polygon

 

How to do that ? no idea

[iiceman]

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

[JCPalmer]

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:

[jerome]

Hi,

 

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

 

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 )

 

http://www.babylonjs-playground.com/#V0WW9#8

 

doesn't work ...

Any idea ?

[RaananW]

Especially for you :-)

 

http://www.babylonjs-playground.com/#V0WW9#9

 

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

[jerome]

Waaaowww

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

[jerome]

actually this were just test

it looks like it's not the best approach to extrude text with a good quality

 

I'll check how to first transform characters into 2D polygons (new algo) and then only extrude cleanly these polygons

[joshcamas]

Interesting!

 

What if you basically made jerome's example a mesh that was a huge grid... each grid square being a pixel? And then after doing that you can cut off the excess squares on the bottom?