Strange smudges on some borders in Unity

fieromus

Hello there, so we are encountering a strange issue with some characters' portraits.

Here's the one with the most visible issue, as you can see around the mouth there's a line and that's basically on the edge between colored and transparent pixels.

During our tests we tried exporting with different scales, the next screenshots are with export scale 1 (and the texture is 4096x2048)
I'll try to keep things sorted.

First of all we are using Unity 2023.2.20f1 in URP and Spine 4.2

In Unity with Premultiply Alpha

The next one uses a previous version of the model that was export with scale 1 (and the texture is 2048x1024)

it can be seen that the issue is a little bit more visible.

At first we thought it could be some problem with premultiply alpha VS straight alpha, so we checked everything in Unity but it seems things are properly set.

I'll attach more screenshots.

1) color is set to gamma

2) texture is not using sRGB (nor Mipmaps), we also tried to remove the Bilinear Filter Mode (it did not have any effect on this)

3) we are using the standard material(s) (it happens both with SkeletonAnimation and SkeletonGraphic) and the Straight Alpha Texture is disabled

4) the atlas is showing pma:true

5) the packages are installed via UPM

What we see in Spine

We tried to see if the issue could be on the Spine side, but to no avail.

1) the source graphics when in straight alpha does not have any strange smudge (here's a gif our animator took)

(if it's rendered too quickly you can see it here )

2) here's a screen on how it appears on Spine, the smudges are definitely not there

3) here's the export settings

We thought to try to enable Bleed (as it was mentioned somewhere else to try) but it seems we can only select either Premultiply alpha OR Bleed.

In Unity With Straight Alpha

We also tried to export with straight alpha (and see everything in order to use the straight alpha texture), and compare the results but it seems just worse.

this was exported with the straight alpha option (as can be seen in the atlas.txt)

Do you have any pointers on what could be the cause?

Let me know if you need some more info / if I missed something,

Misaki

fieromus Sorry that Spinebot's answer was not helpful. From the screenshots you showed us, the setup looks correct, so could you please send us the actual skeleton data files via email to us for further investigation?: contact@esotericsoftware.com
The skeleton data to be sent can be minimal. For example, since the problem is only around the mouth, you can leave only the head parts and delete everything else.
Please include the URL of this forum thread in the email so we know the context. Then we can take a look at what's wrong.

Spinebot

The issue you're encountering with strange smudges on the borders in Unity is likely related to the handling of premultiplied alpha (PMA) and straight alpha textures. Here are some steps and considerations to help resolve the problem:

Premultiplied Alpha Settings:
- Ensure that all textures exported from Spine with premultiplied alpha have the "Alpha is Transparency" option disabled in Unity. This setting can cause visual artifacts if enabled with PMA textures.
- Reference: Weird artifacts on my latest rig in Unity
Texture Import Settings:
- Verify that the texture import settings in Unity match the export settings from Spine. For PMA textures, ensure that "sRGB (Color Texture)" is enabled and "Alpha is Transparency" is disabled.
- Reference: Seams showing on character
Material Settings:
- Check the material settings in Unity. For PMA textures, ensure that the material is set up correctly to handle PMA. If using the Spine/Skeleton shader, make sure it is configured for PMA.
- Reference: Black lines
Bleed Option:
- When exporting from Spine, using the "Bleed" option can help prevent artifacts at the edges of transparent areas. However, this option is typically used with straight alpha workflows. If using PMA, ensure that the export settings and Unity import settings are consistent.
- Reference: Mipmap issue and General Unity Downscaling Question
Color Space:
- Ensure that the color space in Unity is set to Gamma if you are using PMA textures. Linear color space can cause issues with PMA textures.
- Reference: Seams showing on character
Testing with Straight Alpha:
- If switching to straight alpha, ensure that the texture import settings in Unity are adjusted accordingly. Enable "Alpha is Transparency" and ensure the material is set to handle straight alpha textures.
- Reference: Unity LWRP -- Alpha Black Problem

Here is a summary of the steps to follow:

Disable "Alpha is Transparency" for PMA textures in Unity.
Ensure texture import settings match the export settings from Spine.
Verify material settings are correct for PMA.
Consider using the "Bleed" option if switching to straight alpha.
Ensure the color space in Unity is set to Gamma for PMA textures.

If the issue persists, please provide additional screenshots of your Unity import settings, material settings, and any console warnings or errors.

fieromus

Nice recap post Spinebot, but just to be clear with anyone that could read this: we already did all of that (as can be seen in the screenshots).

More so, the "sRGB (Color Texture)" is no longer recommended with PMA setup based on the official troubleshooting video on youtube

Misaki

fieromus Thanks for sending the skeleton data files! I can see some borders around the mouth in SkeletonViewer, so it seems this is not a Unity only problem:

We will investigate further, so please wait a while for a detailed response.

fieromus

Misaki thank you very much for your help.

It's strange that we missed it in Spine, but it's a bit encouraging, because it's a bit less weird to have the issue on both sides than having it only on Unity.

At this point I'm so much curious about what is causing it.

Misaki

fieromus Oh, the text in the window title bar may have been confusing, but the screenshot I attached is a screenshot of Skeleton Viewer, which is used to preview files exported from Spine. Skeleton Viewer uses the spine-libgdx runtime, which is the reference Spine runtime upon which all others are based. So if you find a problem here, it means that it is not a problem limited to a specific runtime.

If we find out more about what caused this, we will let you know here.

fieromus

Misaki Hi again, thank you for the support so far, we were wondering if there were any updates on this matter?
We have a demo coming up soon and we were wondering if you found any fix or hint that could lead us in the right direction to implement the fixed models in time.
No pressure of course, it's just so that we also know how to proceed on our end.
Thank you in advance regardless

Misaki

fieromus Sorry to keep you waiting! I shared this with Nate, but he's been busy with other improvements for a while now, this issue hasn't been investigated in detail yet. We would appreciate it if you could wait until we are able to take the time.

Nate

In Skeleton Viewer, without linear you can see the black in the upper left:
Loading Image

I duplicated the closed animation and hid images/surprised/mouth/surprised_inner_mouth: the black in the upper left disappeared. That means we can be sure the problem is the upper lip doesn't cover the inner mouth, and that it isn't a problem with PMA or bleed. Also since it happens with nearest neighbor (linear disabled) it's not a filtering artifact problem.

The inner mouth (cyan outline here) has transparent parts slightly outside the upper lip (white outline), but non-transparent pixels are fully covered by the lip (in the Spine editor):
Loading Image

I modified the atlas so all non-transparent pixels are fully pink:
Loading Image

Now you can more easily see where the inner mouth shows through:
Loading Image

Why does it not look like that in the editor?
Loading Image

Packing has 0.4 scale, so there are a lot fewer pixels to work with, especially when an image is deformed a lot. Here it is with a pink inner mouth and all other images deleted:
Loading Image

The same but with the upper lip blacked out:
Loading Image

At the original resolution, the non-transparent pixels in the upper lip image follow the mesh hull contour. At the 0.4x resolution that pixel edge can't follow the hull as tightly. When you deform the images, the upper lip pixel edge doesn't cover the pixels of the inner mouth.

I think this result is reasonable. Special attention is needed when downscaling your skeleton images for edges like this that are used to hide something below.