[SOLVED] Spine attachments visible outlines

Hello everyone!

We are experiencing the following problem with our spines: Attachments that should have transparency are getting black or white borders when they are placed in the scene. Since we are often using different eye and/or mouth shapes we are experiencing this problem quite frequently.

If you look closely you can see a line around the eye area.

Currently our workaround is to switch out the whole head or even the whole character is some cases.
This alpha issue seems to be affecting mainly iOS devices, where the lines appear to be more prominent. If basis compression is applied to the texture, the outline disappears, however it leads to a lesser quality of the spine itself, which is not necessaritly what we want either.

We have tried all differend kinds of export/import settings in spine and playcanvas but so far nothing has helped. We prepared a small sample scene where the problem can be seen.
A build of this project can be found here. (or scan the QR code below)
image

We are using Spine 3.8 in our current projects.

Thanks,
Christoph

2 Likes

I don’t see the issue here on PC, is it only on iOS? If so, which iOS version?

The screenshot was taken on an iPad Pro running iOS 15.1.

I’ll try to get it tested on iPhone and a different iOS version as well and will report back. In this case it seems to only appear on iOS.

It might be due to Safari premultipling the alpha channel on PNGs. See this thread for more details: https://github.com/playcanvas/engine/pull/3419

This can be worked around by compressing the texture with Basis or using a custom JS PNG loader on iOS only (which is slower than using the browser’s).

Here’s an example of using the PNG JS image loader in a project: https://playcanvas.com/project/870259/overview/added-upng

I’ve forked your project to use uPNG and confirms it fixes the issues: https://playcanvas.com/editor/scene/1342116

4 Likes

Thank you! Adding your uPNG example worked great! We’re going to apply it as a fix to our problem.

That’s great to hear

In case I wasn’t clear, compressing the image to Basis would also workaround the problem too!

1 Like

Yes, i am aware of that, however in some cases compressing the image to Basis lead to quite a noticable lower quality. We are going to try out uPNG the next time to see how it comares.