Fix: renderOrder of <Svg> meshes

[cyango]

Why

component was showing a weird z-fighting on camera orbit

What

Fixed the render order of the meshes.

Discussion here: https://discord.com/channels/740090768164651008/741751532592038022/1227336884255064195

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
drei	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 27, 2024 2:53pm

[cyango]

After testing on more use cases, this seems to not be a good solution. Using renderOrder like that makes wierd behaviour of SVG showing on top of everything in the camera planes. Also not sure how to fix this.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[CodyJasonBennett]

Why remove transparent? It does affect grouping during sorting, but is that any relevant here?

[cyango]

From my experiments this was the only way i found to avoid the render order issues.

[CodyJasonBennett]

I'll investigate merging the geometries here. Definitely an issue with sorting, not z-fighting exactly.

[RodrigoHamuy]

I think the reason this PR doesn't work with transparent is because the renderOrder should be applied based on all the meshes, not in the subgroups.

The introduction of the required renderOrder happened in this PR: mrdoob/three.js#26110

Here is a working example with transparent enabled: sandbox

If we update renderOrder in a similar way to this sandbox, then it should be aligned again with the threejs example.

+    let renderOrder = 0

    return (
      <object3D ref={ref} {...props}>
        <object3D scale={[1, -1, 1]}>
          {svg.paths.map((path, p) => (
            <Fragment key={p}>
              {!skipFill &&
                path.userData?.style.fill !== undefined &&
                path.userData.style.fill !== 'none' &&
                SVGLoader.createShapes(path).map((shape, s) => (
-                  <mesh key={s} {...fillMeshProps} renderOrder={s}>
+                  <mesh key={s} {...fillMeshProps} renderOrder={renderOrder++}>
                    <shapeGeometry args={[shape]} />
                    <meshBasicMaterial
                      color={path.userData!.style.fill}
                      opacity={path.userData!.style.fillOpacity}
                      side={DoubleSide}
                      depthWrite={false}
                      {...fillMaterial}
                    />
                  </mesh>
                ))}
              {!skipStrokes &&
                path.userData?.style.stroke !== undefined &&
                path.userData.style.stroke !== 'none' &&
                path.subPaths.map((_subPath, s) => (
-                  <mesh key={s} geometry={strokeGeometries[p]![s]} {...strokeMeshProps} renderOrder={s}>
+                  <mesh key={s} geometry={strokeGeometries[p]![s]} {...strokeMeshProps} renderOrder={renderOrder++}>

[RodrigoHamuy]

@CodyJasonBennett, just because this hasn't been addressed yet, I did this in another PR, hope that's all right: #2061