"Normal" Blend Mode with OpenGL Trouble

Question

I've been having a lot of trouble trying to get a OpenGL blend function to work as I'd expect it to with like what I'd expect (or from any sensible image editing program). As an example, I'll use these two images to blend (bit difficult to see on white backgrounds so the colors are labeled):

Images to be blended

This is what I expect to happen (and what happens in paint.net):

Expected Result

Obviously opengl's default blend function makes it look like this (very wrong):

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)

After a ton of testing, this is the closest I could get to creating a "good" blend function:

glBlendFuncSeparate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ONE_MINUS_SRC_ALPHA)

Looking back at the original expected result though, you'll notice that some of the colors are a bit dimmer than they should be (the middle left part). Specifically, they are premultiplied to half their color value (because of the .5 alpha), and I can't seem to make a function that does not do this (without causing odd blending issues with the barely visible red transparent part).

Does anyone know a solution to this issue? One that I had was to use premultiplied alpha in the sources (while I dont want to do this because it requires extra work to convert every color I use in my game to premultiplied or just write some stuff in each shader) and do it like that:

glBlendFuncSeparate(GL_ONE, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ONE_MINUS_SRC_ALPHA) (No premultiplication)

Obviously thats wrong too, but this is actually the only correct result I've gotten so far:

glBlendFuncSeparate(GL_ONE, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ONE_MINUS_SRC_ALPHA) (Premultiplied inputs)

Only problem is, how would I get rid of the premultiplication to display it on the screen? It would probably require an additional render cycle for each thing I blend and that seems way too complex for this issue, so I'm still looking for an answer (its interesting that I cant find anything on this, because OpenGL is so widely used that I'd image someone else ran into this problem).

Sources:

Online blend function testing - http://www.andersriggelsen.dk/glblendfunc.php
Bottom Layer Image - https://i.sstatic.net/XjLNW.png
Top Layer Image - https://i.sstatic.net/9CN6w.png

Answer 1

In your first example (glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)), you're telling it to blend colors based on the alpha of the image which gets drawn on top (the "Foreground" one). So when you're blending 50% between the foreground color (38,50,168) and the background color (38,50,168) in the bottom left corner of the image, you unsurprisingly get exactly the same color (38,50,168). Because that cross-blend is exactly what you told OpenGL to do.

Judging by your "expected" image, you don't want to do a cross-blend between the two colors -- you want to overlay the foreground color over the full-strength background color, not cross-blend between them.

To do that, you want to use glBlendFuncSeparate (since you're treating the background's color differently than its alpha), and specify that during the blending operation, the background alpha value should be treated as 100%.

To make it easier to view, here's the final RGB values being output:

And here's the final transparency values being output.

(That '100%' transparency area should actually be labelled as 99.7% transparent, and the bottom right '50%' area should be labelled as 49.7% transparent, both due to the red-tinted bit on the right side the first image. Also, sorry for listing numbers using "transparency" rather than opacity; possibly a little confusing.)

If there are specific problems, please point out the area of either the RGB or the alpha image which are producing incorrect values.

Answer 2

I had the exact same problem when I wanted to render a set of overlapping framebuffer objects like layers. The problem is Open GL blending functions is linear and it works when destination background is opaque. But actual blending equation for blending two transparent layers is not a linear equation and contains a division part.

out_color = {src_color * src_alpha + dest_color * dest_alpha * (1-src_alpha)} / out_alpha

I don't think it is possible to do this with current OpengGL implementations. So as a work around I had to user a pixel shader to manually calculate the output of each pixel.