Blend mode formulas?

[dreadkillz]

The different blend modes is making me rip my hair out. Say:

This gives me a green blend from multiply. I think the formula is sourceRGB * destinationRGB / 255

Code: Select all

function love.draw()
	-- green blend
    love.graphics.setBlendMode("alpha") --Default blend mode
    love.graphics.setColor(255, 255,0)
    love.graphics.rectangle("fill", 50, 50, 50, 50)
	
    love.graphics.setBlendMode("multiplicative")   
    love.graphics.setColor(0, 255, 255)
    love.graphics.rectangle("fill", 75, 75, 50, 50)
end

But if I set the alpha of the second rectangle to 0, the blended color is now yellow like the first rectangle:

Code: Select all

function love.draw()
	-- green blend
    love.graphics.setBlendMode("alpha") --Default blend mode
    love.graphics.setColor(255, 255,0)
    love.graphics.rectangle("fill", 50, 50, 50, 50)
	
    love.graphics.setBlendMode("multiplicative")   
    love.graphics.setColor(0, 255, 255,0)
    love.graphics.rectangle("fill", 75, 75, 50, 50)
end

How does the alpha in setColor come into play here? Also, what are the formula's for each of the blend mode? I found various documentations for photoshop and gimp blend modes, but I'm not sure if some of the stuff I saw applies to LOVE.

EDIT: Well I found the formula for premultiplied and alpha blend mode: viewtopic.php?f=4&t=2136&start=40#p33507. What about the rest?

[Boolsheet]

LÖVE currently uses OpenGL and exposes some of the blend equations and functions of it.

Here's a list where the numbers are in the interval [0,1]; dst is the existing color in the buffer; src is the global color, texture color, or both of them mixed together (depending on the color mode); and res is the resulting color.

additive:

Code: Select all

res.r = dst.r + (src.r * src.a)
res.g = dst.g + (src.g * src.a)
res.b = dst.b + (src.b * src.a)
res.a = dst.a + (src.a * src.a)

alpha:

Code: Select all

res.r = dst.r * (1 - src.a) + src.r * src.a
res.g = dst.g * (1 - src.a) + src.g * src.a
res.b = dst.b * (1 - src.a) + src.b * src.a
res.a = dst.a * (1 - src.a) + src.a * src.a

0.9.0 changes it to this:

Code: Select all

res.r = dst.r * (1 - src.a) + src.r * src.a
res.g = dst.g * (1 - src.a) + src.g * src.a
res.b = dst.b * (1 - src.a) + src.b * src.a
res.a = dst.a * (1 - src.a) + src.a

subtractive:

Code: Select all

res.r = dst.r - src.r * src.a
res.g = dst.g - src.g * src.a
res.b = dst.b - src.b * src.a
res.a = dst.a - src.a * src.a

multiplicative (up to and including 0.8.0):

Code: Select all

res.r = dst.r * (1 - src.a) + src.r * dst.r
res.g = dst.g * (1 - src.a) + src.g * dst.g
res.b = dst.b * (1 - src.a) + src.b * dst.b
res.a = dst.a * (1 - src.a) + src.a * dst.a

0.9.0 changes it to this:

Code: Select all

res.r = src.r * dst.r
res.g = src.g * dst.g
res.b = src.b * dst.b
res.a = src.a * dst.a

premultiplied:

Code: Select all

res.r = dst.r * (1 - src.a) + src.r
res.g = dst.g * (1 - src.a) + src.g
res.b = dst.b * (1 - src.a) + src.b
res.a = dst.a * (1 - src.a) + src.a

OpenGL clamps to [0,1] (by default) in case you're wondering if subtractive could have had negative values.

[dreadkillz]

Wow, perfect! It's all so clear now! Will definitely be useful for any future searchers on this topic. Thank you.