Three.js: SVGLoader - issue with loading compound paths?

[mattscotty]

I'm having issues loading some SVG's that use compound paths.

This may be linked to https://github.com/mrdoob/three.js/issues/18079, but all the issues outlined in this problem have been resolved one way or another.

An example problematic SVG is as follows;

<svg enable-background="new 0 0 256 256" height="256" viewBox="0 0 256 256" width="256" xmlns="http://www.w3.org/2000/svg"><path d="m71.538 118.24c-.101-.326-.212-.647-.334-.979-6.349-17.458-25.725-26.496-43.185-20.137-17.458 6.349-26.489 25.728-20.134 43.193 4.972 13.666 17.923 22.17 31.695 22.17 3.82 0 7.702-.654 11.489-2.031 7.571-2.762 13.919-8.15 17.858-15.184l-8.399-4.707c-2.814 5.02-7.345 8.869-12.751 10.836-10.579 3.855-22.149-.205-28.183-9.149l53.426-19.448zm-55.625 15.104c-2.206-11.408 4.143-23.078 15.401-27.177 2.714-.987 5.48-1.449 8.208-1.449 8.614 0 16.773 4.661 21.063 12.37zm117.726 7.217 8.396 4.707c-3.935 7.031-10.281 12.422-17.85 15.186-3.761 1.363-7.662 2.045-11.542 2.045-4.853 0-9.69-1.057-14.221-3.174-8.159-3.803-14.348-10.563-17.417-19.008-6.364-17.465 2.67-36.844 20.133-43.195 7.733-2.815 16.22-2.708 23.875.311l-3.535 8.959c-5.462-2.158-11.521-2.231-17.042-.222-12.476 4.542-18.927 18.374-14.39 30.847 2.204 6.037 6.62 10.863 12.444 13.584 5.827 2.719 12.359 3.002 18.401.801 5.407-1.968 9.941-5.819 12.748-10.841zm80.66-16.117c-2.926 1.135-5.426 2.871-7.554 4.93.019-.47.034-.931.034-1.399 0-18.131-14.746-32.881-32.854-32.881-18.124 0-32.864 14.754-32.864 32.881 0 18.13 14.737 32.88 32.864 32.88 13.638 0 25.345-8.342 30.31-20.203 12.238-10.533 28.322-8.797 28.322-8.797s-26.795 4.138-35.129 25.346c17.819 9.861 34.057-1.553 36.946-10.917 2.879-9.36 10.749-15.599 15.302-15.591-6.77-4.245-20.935-11.814-35.377-6.249zm-40.374 27.022c-12.937 0-23.47-10.542-23.47-23.493 0-12.959 10.533-23.491 23.47-23.491 12.94 0 23.462 10.531 23.462 23.491 0 12.951-10.526 23.493-23.462 23.493zm33.494-33.361c-.421-1.843-.989-3.626-1.696-5.349.594-1.349 1.398-2.618 2.516-3.728 5.964-5.909 14.781-5.359 19.131-4.799-2.28 1.01-4.792 5.78-4.107 10.965.168 1.269-.039 2.771-.604 4.306-2.146.343-4.316.901-6.491 1.737-3.109 1.206-5.743 3.018-7.982 5.166.016-.482.035-.963.026-1.451-.012-.856-.062-1.704-.136-2.542 2.699-8.543 10.994-13.829 10.994-13.829s-7.711 2.48-11.651 9.524z" fill="#6d6e71"/></svg>

The SVG loads fine anywhere except when loaded in by the SVGLoader representation.

Here's a fiddle showing the issue;
https://jsfiddle.net/mattscotty/e0jz2fgd/

Three.js version

• [x ] r111

Windows 10, Chrome latest.

Thanks

[yomboprime]

The SVG file is just one path. Sorry to say, but this is a problem of the "shape engine" part and can't see myself solving it. FYI, several past issues were related to how subpaths are interpreted (CW/CCW, inside/outside and the like) 😕

[mrdoob]

@yomboprime maybe we can log a warning in the console for these cases?

[yomboprime]

@yomboprime maybe we can log a warning in the console for these cases?

It is not detectable. Unless I missed something, there is nothing special in the path which is not implemented in the loader. Just subpaths one into another (one after another in the file). So it is a bug or an inconsistency in how subpaths are interpreted together and triangulated.

[mattscotty]

Thanks for the response.
If it will help I can provide more examples, though you are correct in that there are no errors shown, just that the result is visibly incorrect.

[mattscotty]

@yomboprime here's a much simpler compound path in case you ever manage to come back to it.
Its essentially a square within a square.

<svg enable-background="new 0 0 64 64" height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="m57 57h-50v-50h50zm-12.9-37.4h-25v25h25z" fill="#666"/></svg>

Thanks

[yomboprime]

@yomboprime here's a much simpler compound path in case you ever manage to come back to it.
Its essentially a square within a square.

<svg enable-background="new 0 0 64 64" height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="m57 57h-50v-50h50zm-12.9-37.4h-25v25h25z" fill="#666"/></svg>

Thanks

Thanks for making a minimum bug reproduction, I will take a look at it.

[mattscotty]

No problem, if you need anything else let me know and I'll do my best to support.

[yomboprime]

Um, I'm sorry, but it doesn't show the bug. It appears to display Ok.

[mattscotty]

Weird, when I inserted it into my fiddle it didn't display anything.
I'll see if I can get the problem on another simple one.
Sorry for the confusion, I'll report back.

[mattscotty]

To avoid wasting your time & if it's easy enough for you, would you please point me to the test environment you're using so I can replicate it?

[yomboprime]

To avoid wasting your time & if it's easy enough for you, would you please point me to the test environment you're using so I can replicate it?

Oh, I'm just replacing the contents of tiger.svg and serving the examples with a simple node script. Later I will post the script if you need it, I'm outside now.

[mattscotty]

Ok thanks, please do so I can be sure I've got a consistent test

[yomboprime]

Ok thanks, please do so I can be sure I've got a consistent test

Here you have it

[mattscotty]

Ok I do have some more information on what I think the issue is.
From some trial and error in Adobe Illustrator, it looks like its an issue with reverse path direction not being taken into account correctly.

For example here's the original shape I sent, where the background and foreground are left as default;

<svg enable-background="new 0 0 64 64" height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="m57 57h-50v-50h50zm-12.9-37.4h-25v25h25z" fill="#666"/></svg>

Reverse Path Direction;
Background shape : Off
Foreground shape : On

Here's the same shape, but with the reverse path direction of the background and foreground shapes inverted, (broken);
<svg enable-background="new 0 0 64 64" height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="m57 7h-50v50h50zm-12.9 37.6h-25v-25h25z" fill="#666"/></svg>

Reverse Path Direction Enabled;
Background shape : On
Foreground shape : Off

From what I can tell its incorrectly cancelling itself out.

[yomboprime]

I will have to inspect Three.js code, will take me some time.

Thanks for the bug reduction.

[Mugen87]

Merging this into #16950.