Generate polygon depend on png file

hey i was looking for any tutorial or something that can help me to start achieving generation of polygon depends on a png image
example for what am looking for :

Thank you


1 Like

@hopepdm This library is unrelated to what the OP is looking for.

I’m not aware of a library that can generate a polygon from the non-transparent parts of a PNG image.

1 Like

I did similar for an animation app i’m working on in order to create puppets out of drawings, similar as After Effects does. Ideally that would be multiple layers unlike in this test but at 0:09 you see the mesh

I’m not aware of a existing library for the full task, i’ve did it with multiple steps such as first tracing the outline per-pixel with alpha threshold creating a pixel-to-pixel contour, which in the next step will be reduced with an angle threshold, i’m also flagging pixels in order to detect multiple “isles” as well as holes which i was missing in After Effects. The outline then gets expanded with the contour normals depending on settings as the contour reduction needs to be compensated to cover the entire texture (similar as in AE) also merging intersections as in many concave cases it will make the contour start overlap, this countour then gets triangulated which in this older test was earcut.js which would look exactly as the image you showed, i’m using delaunay now to get a propper inner tessellation for less distortions.


Hi Thank you all for support
can you please give me some references about algorithms you used to achieve that
i really appreciate that.
Thank you

I just implemented it as described above for my specific needs. It also might depend on what you need the mesh for, i’ve seen some simply using a raster grid with only quads where alpha is present, it’s rather rough but depending on what you need it for it might be enough too. It would be enough for some image deformation but rather not for using as a collision shape for a physics engine.

I don’t think there is a current solution for what you’re looking for.
I think your best bet would be converting to an SVG and then go from there.

Also, possibly, use your png’s alpha as a descriptive element that can help illustrate what you need extruded.

(If there IS such a technique… )

1 Like

Could you please tell me how did you implement texture to your custom mesh any instruction or some guides will help me