Extrude 2d PNG image to Mesh

If you have the font-set which has the twitter-icon you can use the MeshWriter to do the job! :slight_smile:

https://doc.babylonjs.com/communityExtensions/meshWriter

1 Like

Might be a good sign. As with every disease, things always get worse before you heal :rofl:

1 Like

I believe the input png is not limited to the twitter logo :stuck_out_tongue:

I believe this is ‘out-of-context’. I already dared to ask “why PNG”. I don’t think adding a fontSet to the requirement will match the conditions of the project (nice try anyway) :grin: :joy:

1 Like

I know about this rule BUT let me be superior to that thing… at least for the next couple of years!! :rabbit2:

F**K ME DEAD! :rofl:

2 Likes

Well, the good thing these days is that if you are dead :headstone:… you can still ‘revive’ on Instagram :joy:

1 Like

I can sense deception and this thing is already plotting something on us!

Wake up Neo…

2 Likes

Aren’t we spamming the topic here? We should return to the point eventually… I mean YOU, because I already shared all the useless input I’m capable of for this matter :sweat_smile: :grin:
Now I’m just waiting on you big brains :brain: to finally provide the SOL to the OP (and next, soak-it up) :grin: :face_with_hand_over_mouth:

:zipper_mouth_face:

1 Like

I had a look at the content of pixels_list and lines here :

var pixels_list = GetTextureOutline(data, true, true);
var lines = ExtractLinesFromPixelsList(pixels_list, false);

Problem is : it’s not a “contour” at all.
I extracted the lines to draw them 1 by 1 and here the result :
Screencast from 21-10-2024 14:14:06

Basically your vertice list is like so :


While it should be like this :

As you like, but keep in mind that “finding a contour from image pixels” is a very well known subject in computer vision, it has been reimplemented, optimised, etc, hundreds of times… Sometimes it’s good not to reinvent the wheel :wink:


Also, your source image is perfectly cropped inside the frame.
I would advice to reduce it a bit (for example like this one) because contour finding algorithm doesn’t like borders… Most likely in your source image it will provide 2 contours, one for hole on top of the bird, another for the hole under the bird. While the second version I just linked will give only 1 contour

1 Like

stamp picture on mesh… then remove the bottom.

Could be, but this will never be smooth unless starting from a ridiculously dense grid :grin:

the magic essence is named as INTERPOLATION :crazy_face:

I did this too and noticed the same. :wink:

I was going to write the same. :wink:

Then same on my mind.

Are we somehow connected or what? :smiley:

Do you guys recognize these images?



ScriptClub?

1 Like

Guys, let’s come back to @Giles_Thompson 's issue, it’s his first day here, let’s not have him thinking we are crazy on this forum :joy:


@Giles_Thompson , once you’ve extracted the contour, however you want to compute it (either external lib, or manually), you wanna use the BABYLON.MeshBuilder.ExtrudeShape like so :


That said, here there is still an artifact due to the fact that the original shape is highly non convex, plus, the default “cap” of the MeshBuilder.ExtrudeShape seems to be a “star” cap (triangles toward the barycenter, which works well for simple non convex shapes like the star but won’t be ok for the twitter bird.
@Evgeni_Popov maybe it would be nice to be able to define a custom fonction for the cap method :grin: (closed contour vertices → triangulated mesh)

Thanks @Tricotou and @Evgeni_Popov Point taken, I’ll refactor the code to use a library for contouring purposes. With regards to the borders, I’d eventually like to accept any arbitrary , user supplied PNGs and have them be converted to meshes. I suppose I could always add an extra border to the image, before the contouring process where the border is of insufficient size.

Is there any way to configure the MeshBuilder.ExtrudeShape, such that the artefacts are less pronounced? other than that its a much better extrusion.

Absolutely ! :slight_smile:

potrace