Smooth color blending in OpenGL

Question

I'm trying to achieve the following blending when the texture at one vertex merges with another:

Here's what I currently have:

I've enabled blending and am specifying the blending function as:

    glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);

I can see that the image drawn in the paper app is made up of a small circle that merges with the same texture before and after and has some blending effect on the color and the alpha.

How do I achieve the desired effect?

UPDATE:

What I think is happening is that the intersected region of the two textures is getting the alpha channel to be modified (either additive or some other custom function) while the texture is not being drawn in the intersected region. The rest of the region has the rest of the texture drawn. Like so:

I'm not entirely sure of how to achieve this result, though.

Answer 1

You shouldn't need blending for this (and it won't work the way you want).

I think as long as you define your texture coordinate in the screen space, it should be seamless between two separate circles.

To do this, instead of using a texture coordinate passed through the vertex shader, just use the position of the fragment to sample the texture, plus or minus some scaling:

float texcoord = gl_FragCoord / vec2(xresolution_in_pixels, yresolution_in_pixels);`
gl_FragColor = glTexture2D(papertexture, texcoord);

If you don't have access to GLSL, you could do something instead with the stencil buffer. Just draw all your circles into the stencil buffer, use the combined region as a stencil mask, and then draw a fullscreen quad of your texture. The color will be seamlessly deposited at the union of all the circles.

Answer 2

You can achieve this effect with max blending for alpha. Or manual (blending off) with shader (OpenGL ES 2.0):

#extension GL_EXT_shader_framebuffer_fetch : require
precision highp float;

uniform sampler2D texture;
uniform vec4      color;

varying vec2 texCoords;

void main() {
    float res_a =gl_LastFragData[0].a;
    float a = texture2D(texture, texCoords).a;
    res_a = max(a, res_a);
    gl_FragColor = vec4(color.rgb * res_a, res_a);
}

Result: