Jump to content

Import SVG Paths -- suggestion


Recommended Posts

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.




Link to comment
Share on other sites

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:


Good luck with your project

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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.

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