dmw0099

Hello, we discovered an interesting problem with the spine-threejs runtime. Bones that are negative-scaled (e.g. a "flipped" bone with an x-scale of -1), render out of order in spine-threejs.

This is because spine-threejs uses a 2-pass system to render double-sided, transparent triangles. These triangles are rendered first as back-face triangles, and then again as front-face triangles. This is bad for Spine's use-case, because it means triangles with the opposite winding render in a separate batch, and will render "always on top" or "always in back", depending on the winding.

For the time being, I don't think there's a good way to fix this. I've asked our art team to avoid using negative scalings on bones for now. There is an open Issue / PR (https://github.com/mrdoob/three.js/issues/24711) on the three.js repository to provide an option to disable 2-pass rendering. If that gets taken, then the spine-threejs runtime can use it to fix this at the code level.
dmw0099
  • Posts: 2

Mario

Ouch, that's indeed not great. We could try to detect if the bone a slot and its attachments are attached to has negative scale and revert the vertices order in the renderer. That'd incure a bit of overhead though, and there might be edge cases where the detection fails.
User avatar
Mario

Mario
  • Posts: 3277


Return to Bugs