solved Import SVG Paths -- suggestion

[The Leftover]

Like mightier folk before me, I have been trying to figure out how to put text into the 3-D Babylon world.  Not unlike the thread at bottom.

It would be best it was dynamic, not a fixed pre-setup, yeah?  One can do this in SVG with a little help from OpenType.js . . . and Text-To-SVG, which uses it.

If you look at a couple of glyphs (https://opentype.js.org/glyph-inspector.html) you may quickly conclude that one could put them in a BABYLON Path2, then into a polygon and we are off and running.  Yay!  One small wrinkle:
The OpenType output makes extensive use of quadratic curves.  (http://blogs.sitepointstatic.com/examples/tech/svg-curves/quadratic-curve.html)  No such thing in a Path2; just an arc.  When the OpenType is translated into SVG (using text-to-svg), the path looks a little like this:      "M1.66 19.58L1.66 19.58L1.66 2.99L1.66 2.99Q1.66 1.80 2.50 0.99L2.50 0.99L2.50 0.99Q3.35 0.18 4.54 0.18L4.54 0.18L4.54 0.18Q5.72 0.18 6.53 0.99L6.53 0.99L6.53 0.99Q7.34 1.80 7.34 2.99L7.34 2.99L7.34 18.90L7.34 18.90Q7.34 20.16 8.44 21.02L8.44 21.02L8.44 21.02Q9.54 21.89 10.76 21.89L10.76 21.89L10.76 21.89Q12.02 21.89 13.00 21.04L13.00 21.04L13.00 21.04Q13.97 20.20 14.00 19.01L14.00 19.01L14.00 2.99L14.00 2.99Q14.00 1.80 14.83 0.99L14.83 0.99L14.83 0.99Q15.66 0.18 16.85 0.18L16.85 0.18L16.85 0.18Q18.04 0.18 18.86 0.99L18.86 0.99L18.86 0.99Q19.69 1.80 19.69 2.99L19.69 2.99L19.69 19.58L19.69 19.58Q19.69 23.00 17.01 25.27L17.01 25.27L17.01 25.27Q14.33 27.54 10.76 27.54L10.76 27.54L10.76 27.54Q7.16 27.54 4.41 25.25L4.41 25.25L4.41 25.25Q1.66 22.97 1.66 19.58Z"

That's a letter.  (Not sure which letter; that doesn't matter.)  I could write a wee utility to turn this path into a BABYLON polygon except for those quadratic curves in the path.  If there was a Path2.addCurveTo method, then there would be no technical barrier.

At this point, I have stalled out a little.  I would be pleased to write an add-on for BABYLON but I am trying to decide what definition would be most useful.  I think emulating Text-To-SVG functionality might be the way to go.

 

This was brought to you by the Letter G.

  

 

[Gijs]

You could use Curve3 instead of Path2, and turn the curve into a Path2 later if you need that. Then instead of addLine, you make a new Curve3 that is the line, and use yourCurve.continue(the new curve) to get the added curve. To get the quadratic curve, you can use:

https://doc.babylonjs.com/how_to/how_to_use_curve3#quadratic-bezier-curve

Good luck with your project

[Gijs]

Or you could make an addCurveTo method using a Curve3, like this (not tested):

BABYLON.Path2.prototype.addCurveTo = function(redX, redY, blueX, blueY){
    let points = this.getPoints();
    let lastPoint = points[points.length - 1];
    let origin = new BABYLON.Vector3(lastPoint.x, lastPoint.y, 0);
    let control = new BABYLON.Vector3(redX, redY, 0);
    let destination = new BABYLON.Vector3(blueX, blueY, 0);
    let nb_of_points = 10;
    let curve = BABYLON.Curve3.CreateQuadraticBezier(origin, control, destination, nb_of_points);
    let curvePoints = curve.getPoints();
    for(let i=1; i<curvePoints.length; i++){
        this.addLineTo(curvePoints[i].x, curvePoints[i].y);
    }
}

 

[The Leftover]

Gijs, thank you.  Right on point and told me something I didn't know.  I appreciate it.

I had started with PolygonMeshBuilder long ago.  My plan was that the text be a polygon mesh.  It takes a Path2 but I don't know about a Curve3.

I just saw your last post.  Wow!  It would be the way to go.  Let me try to get my head around that.  I will return.

[The Leftover]

As far as I can tell, it worked flawlessly first time.

https://www.babylonjs-playground.com/#PTTMVI#63

I am closing this.

Next up is to create a "font package" that will generate polygon meshes from letters.