Glitches with SVG loader

Hello im trying to create a 3D sankey chart.
For that im generating one with D3.js and then use the SVGLoader to parse that and add it into the ThreeJS scene as it’s explained in this example three.js examples from the Documentation.

Now the problem that is happening for me is that the subpaths seem to have some weird glitches/lines that occur. This depends on the screen size for some reason. So when the scene is first rendered with a smaller browser window it does not happen. The glitches also look different depending on the size of the browser window.
I attached some images below to better explain what i mean:

Does anyone know a solution for this or an approach that i could try to fix this?

Do you mind sharing the SVG file in this topic?

Sure here it is

It seems the issue is related to a certain path in the SVG file that defines the second large stroke. With a certain stroke-width, the loader starts to show the mentioned artifacts. This a reduced test file demonstrating the issue:

<?xml version="1.0"?>
<svg viewBox="0 0 600 792" width="600" height="792">
  <path stroke="#64C36E" fill="none" id="link_2_21_ok" d="M30,463.61904761904765C150,463.61904761904765,150,571.0476190476189,270,571.0476190476189" stroke-width="290" stroke-opacity="0.6"/>

Reducing the stroke size makes the artifacts go away. Interestingly, if you disable double side rendering, you will see that the artifacts are actually triangles rendered on the back side of the mesh as well. That is definitely not right.

Would you be willing to report this issue at the GitHub repository?

Here is a live example demonstrating the issue: SVGLoader: Stroke Glitch - JSFiddle - Code Playground

Since I’m not sure how easy the issue is to fix, consider to use a workaround by making the strokes opaque and use different colors per shape if necessary.

I see, thank you. Unfortunately i can’t use that workaround because the color is supposed to represent some data thats why im limited to two colors.
For now i reduced the scale and that seems to help make the artifacts atleast a little less noticeable.
Either way I’ll report that issue in the github repo as you suggested.

Thanks for the help again!

1 Like

In the meanwhile, I have reported the issue at GitHub:

1 Like