How to avoid overlapping transparency with OpenGL?

Question

I am working on a handwriting application on iOS. I found a sample GLPaint project from the iOS documentation that is implemented by OpenGL ES, and I did something on it.

I track the points of tangency and calculate the curves between the points and draw the images of the particles only a curve so that it looks like the finger has passed.

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, brushData); // burshData is from CGImage, it is // vertexBuffer is generated based on the calculated points, it just a sequence of point where need to draw image. glVertexPointer(2, GL_FLOAT, 0, vertexBuffer); glDrawArrays(GL_POINTS, 0, vertexCount); glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer); [context presentRenderbuffer:GL_RENDERBUFFER_OES]; 

I got a solid line that looks good. But now I want to make a translucent backlight instead of a solid line. Therefore, I replace the particle image with 50% transparency without changing the code.

50% transparency image result

Something is wrong with blend.

What I need

I draw three points using the image of a translucent particle, and the intersection area should maintain transparency by 50%.

What's the solution?

Answer 1

Perhaps in two years I will answer this question, but I hope that this will help someone who comes here to look for a solution to this problem, as it happened to me.

You will need to assign each cycle a different z value. No matter how big or small this difference, we need them to not be strictly equal.

First turn off the glColorMask(false,false,false,false) color buffer glColorMask(false,false,false,false) , and then draw the circles as usual. The z-buffer will be updated as desired, but circles will not be drawn yet.

Then you enable the entry in the color buffer ( glColorMask(true,true,true,true) ) and set the depthFunc parameter to LEQUAL ( glDepthFunc(GL_LEQUAL) ). Only the nearest pixels in the circle will pass the depth test (setting it to LEQUAL instead of EQUAL with some rare but possible floating point approximation errors). Turning on blending and drawing them again will result in the desired image without overlapping transparency.

Answer 2

You need to change the mix function. You can play around:

 glBlendFunc(GL_SRC_ALPHA,GL_ONE); 

Perhaps (GL_ONE, GL_ONE) , forgot how to handle your case, but the solution is in this function.

http://www.opengl.org/sdk/docs/man/xhtml/glBlendFunc.xml