SVGLoader: render path incorrectly

[pigking12345]

Description

I want to render some icons from https://fonts.google.com/noto/specimen/Noto+Emoji. Instead of using font loader, I used other tools to generate SVG from the font and render it in three.js with SVGLoader.

However some of the icons are rendered incorrectly. Especially when there are holes in the icons.

For example, I would expect the icon is like:

But in three.js:

The generated svg is below:
<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="2000" viewBox="0 0 2000 2000"><g transform="scale(0.12060007040760723 -0.12060007040760723) translate(0 1679.84)"><path d="M1300 340q-216 0-404.5-80.5-188.5-80.5-331.5-223.5-143-143-223.5-331.5-80.5-188.5-80.5-404.5 0-216 80.5-404.5 80.5-188.5 223.5-331.5 143-143 331.5-223.5 188.5-80.5 404.5-80.5 215 0 403.5 80.5 188.5 80.5 331.5 223.5 143 143 224 331.5 81 188.5 81 404.5 0 216-81 404.5-81 188.5-224 331.5-143 143-331.5 223.5-188.5 80.5-403.5 80.5m-440-359l25-94 49 6 5-41-44-5 17-65 46 6 5-41-41-5 24-92-40-5-24 92-41-6 24-91-41-5-24 91-49-5-5 42 43 5-16 65-47-6-4 40 40 5-24 95 40 4 24-94 42 5-25 95 41 4m-5-140l-42-4 17-65 41 5-16 64m285 202l6-51q39-2 62.5-27.5 23.5-25.5 23.5-62.5 0-23-12-40-12-17-41-33l-30-17q-20-11-27.5-21.5-7.5-10.5-7.5-25.5 0-34 37-34 43 0 79 26l18-41q-13-9-29-16-16-7-36-11l4-37-27-4-5 37q-42 0-65 23-23 23-23 63 0 44 53 76l33 20q32 19 32 41 0 40-46 40-45 0-88-35l-6 50q33 22 72 26l-6 50 29 4m231-5q36 0 36-36 0-37-36-37-36 0-36 37 0 36 36 36m618 212l-1490-156 64-622 1490 156-64 622m-586-324l38-225-67-8-18 227 47 6m-445-526q-52 0-89-44.5-37-44.5-37-105.5 0-62 37.5-106.5 37.5-44.5 88.5-44.5 53 0 89.5 44.5 36.5 44.5 36.5 106.5 0 61-36.5 105.5-36.5 44.5-89.5 44.5m738 706q25 0 58-10l5-35q-33 10-64 10-55 0-87-33.5-32-33.5-32-92.5 0-77 33.5-132 33.5-55 91.5-55 47 0 76 33.5 29 33.5 29 85.5 0 46-11.5 78-11.5 32-28.5 32-22 0-17-30l20-124q-13-8-32.5-14-19.5-6-33.5-6-41 0-63.5 35.5-22.5 35.5-22.5 87.5 0 74 54 74 26 0 45-33l7 2q3 43 44 43 41 0 60-47 19-47 19-93 0-70-40-114-40-44-107-44-52 0-89 32.5-37 32.5-56 83-19 50.5-19 105.5 0 77 43 119 43 42 118 42m-17-130q-20 0-20-35 0-26 11-60 11-34 33-34 12 0 20 5l-9 50q-7 41-14.5 57.5-7.5 16.5-20.5 16.5m-560-830q-129-11-217.5-46.5-88.5-35.5-150.5-100.5l55-52q55 55 128 81.5 73 26.5 191 37.5l-6 80m181 1114q199 0 373-74.5 174-74.5 306-206.5 132-132 206.5-306 74.5-174 74.5-373 0-199-74.5-373-74.5-174-206.5-306-132-132-306-206.5-174-74.5-373-74.5-199 0-373 74.5-174 74.5-306 206.5-132 132-206.5 306-74.5 174-74.5 373 0 199 74.5 373 74.5 174 206.5 306 132 132 306 206.5 174 74.5 373 74.5m342-860q-52 0-89-44.5-37-44.5-37-105.5 0-62 37.5-106.5 37.5-44.5 88.5-44.5 53 0 89.5 44.5 36.5 44.5 36.5 106.5 0 61-36.5 105.5-36.5 44.5-89.5 44.5m-160-254l-7-80q119-11 192-38 73-27 127-83l55 54q-62 65-150 100.5-88 35.5-217 46.5" /></g></svg>

I've tested the svg itself with other tools. The svg is fine.

After some debugging, I found that the missing holes are actually there but they are treated as a normal path instead of a hole.

Reproduction steps

Code

// code goes here

  const svgLoader = new SVGLoader()
  const data = svgLoader.parse(svg)
  const paths = data.paths

  for (let i = 0; i < paths.length; i++) {
    const path = paths[i]

    const material = new THREE.MeshStandardMaterial({
      color: new THREE.Color(path.color.r * 255, path.color.g * 255, path.color.b * 255),
      roughness: 0.7,
      bumpScale: 0.002,
      metalness: 0.2,
    })

    const shapes = SVGLoader.createShapes(path)

    for (let j = 0; j < shapes.length; j++) {
      const shape = shapes[j]
      const geometry = new THREE.ExtrudeGeometry(shape, {
        depth: height,
        steps: 1,
        bevelEnabled: false,
      })
      const mesh = new THREE.Mesh(geometry, material)
      meshes.push(mesh)
    }
  }

Live example

• jsfiddle-latest-release
• jsfiddle-dev

Screenshots

No response

Version

155

Device

No response

Browser

No response

OS

No response

[pigking12345]

Live examples are not provided yet. I will add soon.

I am actually trying to fix it by myself. But it seems that the current algorithm is not the winding algorithm. It is be helpful if any information about the current algorithm can be provided.

[Mugen87]

I can reproduce the issue with the three.js editor.

But it seems that the current algorithm is not the winding algorithm. It is be helpful if any information about the current algorithm can be provided.

The current implementation for generating shapes was added via: #21380

/cc @Ttommeke

[pigking12345]

Thx @Mugen87. @Ttommeke I figured out the issue is caused by the wrong 'stack'. The algorithm used the x position to order other paths. For the wrong case, the rectangle has a smaller x than the circle. Therefore, the rectangle is treated as the bottom of the stack, which causes the mistake.

I am wondering if there is any document I can refer to for the current algorithm.

[Ttommeke]

Hi, There is not really a document on how it works. But i've tried to explain it here: here
It is quite some time ago when i wrote this code, so i might have some issues recalling some of the implementation details. But indeed to know if a path is a hole of another path the algorithm is as follows:

1. Draw a horizontal line through the middle of the path
2. If the line crosses other objects first (in the X direction thus) flag it as a path.
3. Figure out in what orientation the path is oriented and if it is a hole in other paths or a stand alone path.

[uma-neko]

Essentially it looks like intersecting paths problems.

Due to ShapeGeometry, necessary to combine solid paths and hole paths so that they do not intersect.

A problematic case exists with the current algorithm that combines on the basis of distance on the x-axis.

This following algorithm may partially solve the problem.

1. Pick up all paths surrounding target paths.
2. Check direction of rotation of their paths is clockwise or counter-clockwise.
3. If the number of paths with the same orientation as target paths is greater than or equal to the number of paths with different orientations, then target paths is solid otherwise it is hole.
4. If hole then choose a combination of solid paths and hole paths in order of outer.
   Assume that early drawn paths are outer than late drawn.

https://jsfiddle.net/x2evg94o/
left: current algorithm
right: makeshift patched algorithm

It is not complete and has not been tested.