Display/Extrude a SVG ?

[qqdarren]

All the extrude examples I've found (e.g. http://doc.babylonjs.com/tutorials/Parametric_Shapes#extrusion ) require you to describe the shape with a series of 3d coords. I was hoping there might be a more user-friendly way, so I could draw something in Inkscape, save it as SVG, and import that? (Though, as far as I can see the shape to be extruded must be made of straight lines only, no curves or splines, so maybe that is a show-stopper?)

Aside: what I'm really looking for is the equivalent of Three.js's TextGeometry, so I can include a custom font, and turn it into 3D text. But being able to work from an SVG would get the job done, and would also be more flexible.

(Even just an offline script to convert SVG to Babylon code could be useful.)

[RaananW]

Hi!

 

Just a suggestion - if the SVG has a path, transform this path to something the PolygonMeshBuilder can understand and use it to create a mesh.

From experience - there is currently no way of extruding such a mesh (and if there is - PLEASE tell me ). There are external libraries that might be helpful, but they are not yet integrated in BJS.

[gryff]

Quote

Even just an offline script to convert SVG to Babylon code could be useful.

Hi qqdarren. Take a look at this video which shows you how to easily convert and extrude  an SVG file in Blender. The result is a series of "curves" which can be converted to a mesh by ALT + C.

Then export from Blender as you would any mesh(es).

Should be quite simple.

cheers, gryff

 

[jerome]

https://forum.goocreate.com/t/svg-to-mesh-script/239

they did it... but they use this external lib : https://github.com/mattdesl/svg-mesh-3d

If you use the same lib, you'll just a series of Vector3... just like what our extrusion function expects ;-)

 

I agree that BJS lacks the same Text3D that 3Js has. But 3Js Text 3D relies also on an external lib and uses pre-computed fonts only.

 

I would like to  dynamically parse (one day) any font (svg, true type, etc) in the browser context and then generate/extrude any Unicode character from this data source. Currently, I don't know how to access from javascript to the font definition that the browser knows.

[qqdarren]

Thanks Ranaan; I'd not looked at PolygonMeshBuilder before. Still going to be a bit low-level.

Thanks Gryff: that is the way I currently do it. But the Babylon exported file is huge compared to the the svg required to describe each glyph.

Thanks Jerome. The svg-mesh-3d lib looks like it almost does what I need. Regarding your last paragraph, if the font is svg, you could load and parse it just like any other text (xml) file. (A custom icon font I have is 35KB for the svg version, compared to 11KB for the TTF/EOT/WOFF versions, but the difference is less once the fonts are gzipped.) But how hard is it to convert d="M362.666 21.333h-170.667c-35.285 0-64 28.714-64 64v256c0 ..." into Babylon instructions, I wonder.

[gryff]

Quote

But the Babylon exported file is huge compared to the the svg required to describe each glyph.

Well qq there may be a few reasons for that.

When Blender uses curves it sets a default resolution of 12 - this can be reduced. See image below of two Bezier Circles. The unselected one has a preview resolution of 12, the selected one 3. So you can play with that value to reduce vertex count of your eventual mesh.

And/Or,

Once a curve has been converted to a mesh - go into Edit mode, select all the vertices then "Remove Doubles". You maybe surprised at the number of doubles - a quick test I did removed 50% of the vertices in many cases.

After removing doubles, do a "Limited Dissolve" (hit space bar and type "limited" into the box). You will find you can set an angle for the dissolve in the tool bar - bigger angle more verts removed.

cheers, gryff