Hacking mesh Simplification in ExtrudeShape and ExtrudeCustom


I have been working on a roadmap visualization, but am experiencing the following situation where points that trigger a large bend cause the mesh to lose its shape. Its not a bug per say, I can see why its doing that to more smoothly transition into the next set of points after the bend. But, that is not really what I want.


I traced out in a red line the “ideal” result for me. A nice consistently thick mesh. What I get now is the white line, which is anything but consistent in its thickness across all points.

I made a little playground:

I am wondering if there is a good technique to trick or override that simplification and give me the result I want. I commented out a “hack” in the PG that works, by introducing extra points that overshoot the last move by .5 the line width to hide the simplification, but it still feels sloppy. I would love to do this without having to add extra points because calculating that overshoot gets messy outside a strait 90 degree turn where everything is lined up on an axis.

I am not married to extrudeShape if a better option exists. Ribbon did not do it for me, but maybe I was just not using it right. I also liked extrudeShape as you can texture it with normal materials and techniques - unlike say a lineSystem option.

I previously hacked in another fix by making each line segment, “Over” or “Out”, its own extrude mesh. Since this means no “bend” as the meshes just sit on top of each other it forces them to keep their form. But I am revisiting this issue as it feels sloppy and I rather it be a single line to make the connections easier to animate as in the future the line will “draw” out of one end and move toward the other.

I am open to all suggestions.

It might be odd to say but your road doesn’t seem to have a volume, so…Why not just use lines 2D?

I considered it as it would make sense on the surface. But, the problem with Line2D is there is no way to update the line’s path, which is sort of critical for my application. It is really is unfortunate as otherwise it would be perfect.

The underlying Path3D tries to approximate a differentiable curve, which is not what you’re trying to create, hence the disconnect. I can think of ways you could do this with Ribbon to avoid some of the overlapping mesh that ExtrudeShape creates, but it’s not so pretty, either. If you add the option, adjustFrame: true, it will clean up some, but not all of the mesh weirdness created when your path backs out of the corners. https://playground.babylonjs.com/#MR8LEL#1504

I take it back, the Ribbon version is fine: https://playground.babylonjs.com/#MR8LEL#1506