Smooth color mixing in OpenGL

I try to achieve the following blending when the texture at one vertex merges with another:

Image drawn in Paper iPad App by FiftyThree

Here I have:

enter image description here

I turned on blending and set the blending function as:

glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA); 

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

How to achieve the desired effect?

UPDATE:

What I think is happening is that the intersected area of ​​the two textures gets an alpha channel that needs to be modified (either an additive or some other user-defined function), while the texture is not drawn in the intersected area. The rest of the area has the rest of the texture. For instance:

enter image description here

I am not quite sure how to achieve this result.

+4
source share
2 answers

You do not need to mix for this (and it will not work the way you want).

I think that while you determine the texture coordinate in the screen space, it should be seamless between two separate circles.

To do this, instead of using the texture coordinate passing through the vertex shader, simply use the fragment position to select 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 do not have access to GLSL, you can do something instead of the stencil buffer. Just draw all the circles in the stencil buffer, use the merged area as a stencil mask, and then draw a full-screen square of your texture. Color will be easily put off when all circles are combined.

+1
source

You can achieve this effect with maximum blending for alpha. Or manual (mixing) with a 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:

enter image description here

+1
source

All Articles