SVGLoader: Improve round rect corners approximation

[nkrkv]

Hello!

The current approximation of SVG round rects with Bezier curves is too rough when corner radii are large enough and comparable to the dimensions. Here’s a simple Inkscape example where border-radius is almost ½ of the rect height:

round-rect.svg.zip

It renders in a browser like this:

And loads by THREE.js like this:

Note the curve “overruns”. I tried to follow the current algorithm on paper and it flaws in several ways:

• The 2 * rx and 2 * ry offsets is a mistake. They should not be doubled. That’s the reason for overrun
• The control points of Bezier curve are trivially placed in corners. There are better ways to arrange them to approximate an ellipse, i.e. to minimize the approximation error (referred in comment).

I’ve adjusted the implementation and the rect now looks like:

---

BTW, is there any reason why ShapePath does not provide methods like arc and ellipse? I see they can be trivially implemented as a proxy to Path like lineTo or bezierCurveTo. It would allow avoiding approximation so that the corners may be implemented as true ellipse arcs. I suspect though there’s a reason, some dependency which does not allow to do it easily. Could you clarify this point? If it just “no time to bother”, I could try to do it.

[mrdoob]

BTW, is there any reason why ShapePath does not provide methods like arc and ellipse? I see they can be trivially implemented as a proxy to Path like lineTo or bezierCurveTo. It would allow avoiding approximation so that the corners may be implemented as true ellipse arcs. I suspect though there’s a reason, some dependency which does not allow to do it easily. Could you clarify this point? If it just “no time to bother”, I could try to do it.

There's no reason no. Feel free to give it a go! 🙏

[mrdoob]

Thanks!

[mrdoob]

/fyi @yomboprime

[yomboprime]

BTW, is there any reason why ShapePath does not provide methods like arc and ellipse? I see they can be trivially implemented as a proxy to Path like lineTo or bezierCurveTo. It would allow avoiding approximation so that the corners may be implemented as true ellipse arcs. I suspect though there’s a reason, some dependency which does not allow to do it easily. Could you clarify this point? If it just “no time to bother”, I could try to do it.

There's no reason no. Feel free to give it a go! pray

Yes, I think that a simple approximation was implemented because it was at hand.