3D Text in Babylonjs using Vectorize-text

[vinhpt]

I have just build 3D Text meshes in Babylonjs with the help of Vectorize-text.

Please visit website http://grid.vn/3dtext to play and see the source code.

...

but the 3D Text meshes still not correct at the holes, some one can help please??? 

[JohnK]

It is to do with the the order (clockwise or counter-clockwise) the points making the holes are put into the array. Currently the way they are ordered (probably the same way as the outer edges) means that the normals polygonBuilder creates are pointed towards the inside of the letters rather than away from them.

Simplest way to correct is to reverse the hole array

for (var j = 1; j < letter.length; j++) {
  var hole = [];
  for (var k = 0; k < letter[j].length; k++) {
      hole[k] = new BABYLON.Vector2(scale * letter[j][k][1], scale * letter[j][k][0]);
  }
  hole.reverse(); // ADD THIS HERE
  polyBuilder.addHole(hole);
}

A depth option would be good.

[jerome]

I like this  really good job !

Too bad this relies on an external library. I wish we could one day use directly the data from the font design (I mean the character paths in TrueType, google fonts, etc, what are mainly Bezier curves) from JS and generate the meshes with those data. 

[jerome]

would you make a feature that would allow to export/download the generated meshes ?

[vinhpt]

Thanks JohnK!

I added your magic line of code

hole.reverse(); // ADD THIS HERE

and it work like a charm.

I also add the thickness option. Thanks again!

Hi jerome!

It seem hard work to  use directly the data from the font design file because javascript not render the text it self but the host OS do this (not for sure). But I know the good source to dig is Cairo.

The download button has added so please play the result with Babylonjs Sandbox. Thanks for your download feature suggestion!

 

[GameMonetize]

This should definitely be an official extension

 

Do you mind adding your code in this repo?

https://github.com/BabylonJS/Extensions

[vinhpt]

Hi Deltakosh!

I am so glad to hearing that 3d text can be a official extension.  But I a newbie so do not know how to make this as extension have you got any guild lines?

By the way It is funny but true that Browerify not bundle .js files as the library (I mean other js code can call function from bundled) . So I will find out the way.

Thanks.

[brianzinn]

Wow!  It even does characters like "★  ☆".  Looks really great

[vinhpt]

Thanks brianzinn!

Behind the curtain Vectorize-library generate the vector polygons (with holes) from the  image data of a canvas, I have just build the 3D polygon from BABYLON.PolygonMeshBuilder. So in fact it can generate polygons from any black & white (or color with some tricks) canvas content.