search

EsotericSoftware / spine-runtimes

2D skeletal animation runtimes for Spine.
http://esotericsoftware.com/
Other
4.43k stars 2.92k forks source link

[ts] PMA with WEBP causes colored borders #2604

Closed furic closed 3 months ago

furic commented 3 months ago

Description

PMA is working with PNG, but not WEBP. It causes colored borders because the WEBP sprite becomes "Exported Straight, rendered PMA".

Scrrenshot

I was working on spine-pixi but found out it happens in spine-canvas and spine-player too, so I assume it happens to all spine-ts packages.

WEBP w/o PMA is working as expected.

Steps to Reproduce

  1. Using the spineboy as example, in any package
  2. Convert spineboy-pma.png to spineboy-pma.webp using an online converter
  3. Update spineboy-pma.atlas first line as: spineboy-pma.webp
  4. (Optional) I also tried exporting WEBP from Spine Editor, with Premultiply alpha option enabled, but it causes the same issue

Expected Behavior

WEBP should work with PMA, just like PNG

Actual Behavior

Colored borders if WEBP w/ PMA

Further Investigation

For curiosity, I removed pma: true from spineboy-pma.atlas, this causes black edges as expected, due to "Exported PMA, rendered Straight". This means the WEBP sprite PMA alpha is correct, it is just not getting read correctly.

exported PMA, rendered Straight

Environment: Spine-Runtime v4.2.58 Mac OS v14.6.1 Testing branch

davidetan commented 3 months ago

Thanks for the superdetailed issue :)

However that's to me sounds like a webp compression issue. If I try to export a 100% quality webp with a graphic software like photoshop, I have no problem at all.

Try to use Photopea for example. Drag the image and File>Export>WEBP (quality 100%).

furic commented 3 months ago

Hm... I just tried exporting from Photopea with 100% quality, it "almost fixed" the face but causes issues on other places like the boosters: Photopea Photopea

I also tried using GIMP, with losses export, it is almost good but still has small flaws: GIMP GIMP

I reckon WEBP export quality settings shouldn't have any influence on the alpha, just like PNG.

davidetan commented 3 months ago

I've just tried it too and I see no strange artifacts. This is the wepb pma spineboy texture: spineboy-pma.webp.zip

furic commented 3 months ago

I tried your Webp and it's working.

I don't have Photoshop installed, but I can spot the size difference and that gotta be something to do with how Webp is exported.

Original PNG: 245kb Your Photopea WEBP: 223kb My Photopea WEBP (100% quality): 195kb GIMP WEBP (lossless): 170kb

spineboy-pma.zip

davidetan commented 3 months ago

Actually mine is exported from Photopea, not Photoshop. If I reduce the quality I see artifacts too. Clearely, increasing the quality will reduce the compression effect of the webp.

I think we can close the issue since this is not a bug. Thanks for reporting this because can still be useful for other users in the future.

furic commented 3 months ago

Yup, using a diff tool like P4Merge, I can see that no alpha difference.

But with my WEBPs, it shows difference where the Spine boxes appears. diff