# solved Misbehavior of polygons with holes

## Recommended Posts

Can anyone explain what I am seeing here?   https://www.babylonjs-playground.com/#PTTMVI#68

The polygon seems fine.  The hole seems fine.  When put together, a mystery occurs.  I have been reversing and converting arrays until I am basically blind but I cannot shake this phenomenon.

##### Share on other sites

I think it is probably to do with the tail of the g and the construction of the new triangles when the hole is dealt with, ie as the circular hole is considered vertex by vertex  to find other vertices to connect to they reach across the gap. It may be the triangulation algorithm used cannot cope with such a polygon.

An alternative is to use CSG https://www.babylonjs-playground.com/#PTTMVI#69

##### Share on other sites

Well sir, thank you.  Especially for the bit about demonstrating the answer.

I am learning at a hell of a rate.  Today, CSG.  Closing this.

##### Share on other sites

What you're trying to do... is pretty cool, TL!   Take a handful of aspirin with you... into CSG land

And what-the-heck, the topic is solved, so ya might-as-well show/tell us your progress, here, occasionally, right?

3D fonts are the coolest fonts of all, and I would love to read the daily news, laying on my lawn chair on a virtual beach... with the words scrolling across the sky... in big fancy chrome 3D fonts.

So, what you are doing... has a big future.  It's worth "fontificating".  (ar ar ar)    Show us your g-mesh (ooh, that's sounds dirty)... after your exploration of CSG, if you please.  thx!

##### Share on other sites

Wingnut, you crack me up!!

I am definitely thinking of flaming letter across the sky.  Although flames might take a while.

I already created a repository https://github.com/briantbutton/BabylonType, which is empty, except for good intentions.  When progress is made, I will shoot a flare.

We might be a little font- & glyph-impoverished for a while since automating importation is its own project.  Each letter takes several minutes to get into Babylon-ready format.  I will eventually automate importation if this gets popular.  Image below shows the current approach, not CSG.

##### Share on other sites

Using the recommended CSG approach, the letters are clean and purty.

Perfect!

##### Share on other sites

Uh.  So I am going to say this is unsolved again.  The work-around of using CSG led to other weird problems as I pushed it further.  The age of that module, the inconsistency between github version and the version embedded in my BABYLON and the fact that it uses "legacy" constructors made me uncomfortable about basing a new module on it.  I would prefer to take another path, if possible.  (I can describe the problems more if that turns out to be important.)

So I went back to the original phenomenon.    https://www.babylonjs-playground.com/#PTTMVI#68     Eyeballing it, it looks like there is one rogue triangle, right?  Maybe two.  So I wrote a little routine to take a look for it.  (BTW, I made good use of the CSG code to turn vertices and whatnot into polygons.  If at all possible, I would like to make it through this life without actually understanding vertices and indices.)  My sifting code found an outlying polygon at number 493 in the 'g' in the playground.  See below.

Is there a way to solve the original problem?  Alternatively, can someone give me instructions on how to excise that poly?  Wisdom or contrary points-of-view encouraged.

##### Share on other sites

I should probably mention that I also tried to use MeshBuilder.CreatePolygon.  In that case, I could see nothing at all.  http://playground.babylonjs.com/#4G18GY#35

I tried the usual stuff of reversing the vectors and so on.

##### Share on other sites

Have you seen this

##### Share on other sites

Yes.  Thank you.

I need a utility that will generate a controllable (rotate/move/color/alpha) mesh from an arbitrary text string on the fly.  I viewed that post and visited the demo page.  It doesn't meet that description and seems to use other software modules.

It seems like a good utility would only be about 200 lines of code, not including the font file.

If I am willing to sacrifice rotation and movement, I can use the work-around with CSG.  That will work for the immediate future - for me - but won't make for a good utility.

##### Share on other sites

OK.  I take it back.  I can use meshes created by CSG to go into an SPS.  This means I can assemble multiple glyphs into one mesh, rotate them or move them.

Given the other things I was experiencing, it seemed doubtful that would work.  But it does!

I will leave this open for a few more hours, in case someone would like to comment.  Then I will close it again.  Thank you for your support and indulgence.

##### Share on other sites

No worry!

Regarding CSG, we embedded the code from http://evanw.github.io/csg.js as the original repo seems dead since 2012

##### Share on other sites

Actually, without CSG, I would be very stuck.  So JohnK, thank you for suggesting it and showing the way.     ?

I think I have figured out how to handle all of the corner cases and get where I want.  As a gesture of appreciation, I will publish a utility which will take:
~ a short string
~ letter height
~ optional: font-name / level-of-detail
And will return with an SPS in the form of the text.  Orientation, position and material may be managed by manipulating the SPS's mesh as per normal.

##### Share on other sites

After some more experimentation I still think CSG is the way to go.

TL;DR

The reason for the experimentation was your comment

On 5/10/2018 at 11:49 PM, The Leftover said:

it looks like there is one rogue triangle, right?  Maybe two.

and me thinking that perhaps if the 'hole' was rotated the 'rogue' triangle could end up disguised inside the body of the g.

The Experiment

Write code that rotates the 'hole' data one position at a time. This gave https://www.babylonjs-playground.com/#PTTMVI#74 which looking at each 'g' you can still see rogue or rogue triangles in them all. So a bit of a failure. However on the way to writing this I made several errors in the logic of my code and had produced some 'g's with apparently the rogues hidden away  https://www.babylonjs-playground.com/#PTTMVI#73 . 'g's numbered 49, 50, 51 look promising ( so do 40 and 41 but they are not) so use the unlogical code ( it swaps pairs of positions one after the other for each k for no reason other than a mistake in my thinking) to produce just one 'g' for a closer look https://www.babylonjs-playground.com/#PTTMVI#75 and its not too bad.

However the effort involved in drawing each letter this way and looking to find the best one is too time consuming and you have a solution with CSG that works so don't fix it.

How good it is to be retired and have time on my hands ?

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

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.