Visual Artifacts when creating LineSegments from geometry with holes about three.js HOT 4 CLOSED

Check out the following screenshot:

It shows the wireframe of the shape with focus on the left hole. The interesting part is the top side of the quad where you can see the narrow triangle that goes to the right (it's actually the first triangle definition in ShapesGeometry). EdgesGeometry can't properly process the bottom edge of this triangle.

If you translate the second hole slightly upwards, the glitch goes away because the triangulation ends up differently and EdgesGeometry produces your intended output. https://jsfiddle.net/xprqv1ns/

The triangulation isn't wrong, imo. It's just not the expected input for rendering border edges with EdgesGeometry. For now, I would just state that EdgesGeometry can't properly handle shape definitions with holes.

from three.js.

You might want to consider to detect the outline with a post processing pass like sobel. The edges would look like so:

You could use a custom shader to blend the result over your beauty pass.

from three.js.

Thanks for the analysis @Mugen87. I understand the triangulation issue now. Since the meshes I am working with are generated, simply translating holes will probably not solve my issue reliably. EdgesGeometry does not seem to be the right tool for my use case here.

You are right, in this case it would probably be better to use post processing for the outlines. Thanks for the suggestion.

If this is not a bug from your perspective, feel free to close this issue.

from three.js.

I don't think we can update the implementation in a reasonable way such that these use cases are supported. Let's consider this issue as a limitation of EdgesGeometry.

from three.js.