Puzzled about alpha blending in Canvas

[Froyok]

I'm using Tiled to build my maps.
I have layers, each with their own tiles from my tileset and I transcribe that into meshes that I draw later in my game (so each layer is a unique mesh). The list order from Tiled is then my draw order in Love.

Now my issue is that I have a layer which contains tiles with transparent pixels (so not fully opaque or fully transparent, but in-between). Those are shadows and I'm not getting the same result as inside Tiled. I'm wondering if this could be a pre-multiplied alpha issue (or some alike) but I'm not sure.

Here is a comparison:

Y0614_234010.jpg (517.57 KiB) Viewed 1962 times

(Left is ingame, right is Tiled.)

As you can see the contrast of the shadows is not the same. Given how I authored the image, Tiled is the expected result (shadow are black squares with an alpha just being a linear gradient).
My layers are drawn in a Canvas, so I tried to play with the love.graphics.setBlendMode but no luck. I'm also have gammacorrect = true, but playing with that didn't help either.

Does anybody have an idea of what else I could try ?

[EDIT] Bonus, additional visuals. This is what the middle tile looks like against a checkered background:

Y0615_004650.png (1.1 KiB) Viewed 1946 times

If I remove the alpha via my shader, you can see the shadow is pure black:

Y0615_004906.jpg (110.93 KiB) Viewed 1946 times

[Froyok]

Ha well, I'm an idiot.

Issue is not on rendering side but on content side.
Tiled uses my PNG source image while in-game I use the DDS version, which wasn't in sync.

[pgimeno]

I was going to post this but I see you found the issue:

You initialize the canvas with RGBA=0,0,0,0 (that's the default). Then draw to the canvas using love.graphics.setBlendMode("alpha", "alphamultiply") and then draw the canvas to the screen with love.graphics.setBlendMode("alpha", "premultiply"). Does that not work for you?

[Froyok]

So it's not just a pure content problem. I have looked a bit more into it, I think it's a combination of several issues.

On my side, I was also doing pre-multiplied alpha in my original image, so I fixed that. Tiled is also blending images in sRGB space, while I use instead Linear sRGB. So you don't get the right colors in the end when you combine all of that.

Here is an obvious example when blending (via alpha) a pure green and red color:

Y0615_111751.jpg (464.12 KiB) Viewed 1901 times

(Linear sRGB blending in my game on the left, sRGB blending in Tiled on the right)

I was going to post this but I see you found the issue:

You initialize the canvas with RGBA=0,0,0,0 (that's the default). Then draw to the canvas using love.graphics.setBlendMode("alpha", "alphamultiply") and then draw the canvas to the screen with love.graphics.setBlendMode("alpha", "premultiply"). Does that not work for you?

Yeah I already clear my Canvas before drawing to it, however I don't have a transparent background (in the end the final pixel value is fully opaque). So my issue wasn't about how I draw the Canvas back to screen but how transparent pixel a draw within the Canvas itself.

[pgimeno]

So it's not just a pure content problem. I have looked a bit more into it, I think it's a combination of several issues.

On my side, I was also doing pre-multiplied alpha in my original image, so I fixed that. Tiled is also blending images in sRGB space, while I use instead Linear sRGB. So you don't get the right colors in the end when you combine all of that.

[...]

Yeah I already clear my Canvas before drawing to it, however I don't have a transparent background (in the end the final pixel value is fully opaque). So my issue wasn't about how I draw the Canvas back to screen but how transparent pixel a draw within the Canvas itself.

If you draw premultiplied stuff to the canvas, you need to use the premultiplied alpha mode, of course.

If you're saying that the canvas ends up being fully opaque, then the premultiplied mode is not going to have any effect, of course.

Could you post an example of what you're doing that exhibits the problem? I'm not clear on what's your setup. I don't think you need more assets than the red-green gradient.

This works for me:

[Froyok]

There is no problem on Love side, it's an issue in Tiled (which I thought was right initially).
My shadow are too dark because of the sRGB blending (so I opened a github issue for them).

Here is a more simple example of the issue:

Y0615_143036.png (985 Bytes) Viewed 1837 times

This image shows three states:
- Bottom half is my original color
- Top half is the background color with a pure black at 50% over it (linear interpolation).
- Top left corner is sRGB blending
- Top right corner is Linear sRGB blending.

So that's why my shadow appear differently between Tiled and my game.
Now I won't change for sRGB blending since this wrong for several reasons (example), so I will compensate in another way.