[SOLVED] How not to get additive alpha

[Bigfoot71]

Hello everyone !

I would like to know how not to have the alpha values ​​that add up, here is an image of what I would like.

First the default situation, and second what I would like:


So I tried several ways but I can't find a way without having to use a canvas (i.e. draw in a canvas then apply the alpha to the canvas display).
I for example use blendmodes but it's never what I expect, for example with lg.setBlendMode("replace") I got this:


We can see that the alpha has not been added but there is no more transparency, so maybe I'm doing it wrong.

Here is my code for the last example image:

Code: Select all

local win_w, win_h = love.graphics.getDimensions()

local x1, y = win_w/2, win_h/2
local x2, x3 = x1-100, x1+100

function love.draw()

    love.graphics.setColor(.5,.5,.5,1)
    love.graphics.rectangle("fill", 0,0,x1,win_h)

love.graphics.setBlendMode("replace")

    love.graphics.setColor(1,1,0, .5)
    love.graphics.circle("fill", x1, y, 100)
    love.graphics.circle("fill", x2, y, 100)
    love.graphics.circle("fill", x3, y, 100)

love.graphics.setBlendMode("alpha")

end

[BrotSagtMist]

Youre trying to mix two different blending types, that cant work.
Canvas is the _sane_ solution here, is there a reason you want to avoid them?

FYI: A possible way is to turn all circles into one polygon, the overhead of creating such polygon isnt worth the effort tho.

[darkfrei]

Reminds me a shadows merging problem (and solution):

Shadows merging
One of the problems I had when implementing the gates was, that when the shadows overlap, they make ugly "double shadow" areas. This is best visible on the picture of the tank. The turret needs to be drawn separately, as it can rotate independently, the resulting shadow shows the overlap of those two objects.

So I had to make a method, where the shadows of some objects can be drawn separately into one picture as 100% black shapes. Once the shadows are merged in the picture, they are drawn on the screen with 50% transparency and tadaaaa ... all the overlaps are gone.

Read here:
https://www.factorio.com/blog/post/fff-56

[Bigfoot71]

is there a reason you want to avoid them?

The three reasons are:

• The fact that it existed may be a simpler and less expensive solution.

• The fact that if two colors are superimposed in the canvas, once the transparency is applied we will only see the color on top, so I would like the colors to add up but not the transparency (sorry for not having it good enough precise).

• And lastly, because I use a camera system (which doesn't make it any easier even if it's far from being insurmountable) and it also requires me to change a lot of other things in the way of display the objects in my scene, this last point remains a bit of a question of laziness on my part

Reminds me a shadows merging problem (and solution)

Is it basically the same principle as displaying in a canvas at 100% opacity and then applying transparency?
Or would Love2d have a way to generate textures as efficiently as pure SDL? (if i'm not too confused)

In any case, we come back to the problem of my second point that I have just stated, unless there is a solution.

Edit:

lg.setBlendMode("add", "premultiplied") seemed to give the correct result but no matter the given alpha value the result is the same, so I have a doubt about. (if "alpha == 1" still a transparency). After several checks it looks like but is not what I described.

[BrotSagtMist]

Thing is once you applied a circle to the screen it is not possible for the next circle to distinguish between the ground texture and the last circle, it will therefore have no other choice but to alter these pixels.
Well you could use the last draw as a stencil but that is basically canvas wit extra steps.

[slime]

It should work to use the 'lighten' blend mode while drawing the shapes to a canvas, and then use (premultiplied) alpha blending when drawing/compositing the canvas to the screen.

The lighten blend mode doesn't support non premultiplied alpha, so you might have to multiply rgb with alpha in a shader when doing that.

[Bigfoot71]

It should work to use the 'lighten' blend mode while drawing the shapes to a canvas, and then use (premultiplied) alpha blending when drawing/compositing the canvas to the screen.

Thanks a lot ! I just got exactly the result I was looking for with the 'lighten' mode without canvas or shader !

There is just the default opacity on black, but in my case it's not a problem.
In case it bothers, applying the complete solution (of Slime) would be useful.

Demonstration

With a single color, we see that the transparency does not add up and that the background is visible:


And with several colors, they "add" together, except the alpha and we always see the background:


And to say that I was going for another type of rendering for the colors using the 'darken' mode while the solution was just above in the wiki

Thank you very much again !


The code of the last image to reproduce the effect:

Code: Select all

local win_w, win_h = love.graphics.getDimensions()

local x1, y = win_w/2, win_h/2
local x2, x3 = x1-100, x1+100

function love.draw()

    love.graphics.setBlendMode("alpha", "premultiplied")

    love.graphics.setColor(.5,.5,.5, 1)
    love.graphics.rectangle("fill", 0,0,x1,win_h)

    love.graphics.setBlendMode("lighten", "premultiplied")

    love.graphics.setColor(0,1,0, .5)
    love.graphics.circle("fill", x1, y, 100)

    love.graphics.setColor(1,0,0, .5)
    love.graphics.circle("fill", x2, y, 100)

    love.graphics.setColor(0,0,1, .5)
    love.graphics.circle("fill", x3, y, 100)

end