OpenGL, primitives with opacity without visible overlap

Question

I'm trying to draw semi-transparent primitives (lines, circles) in OpenGL ES using Cocos2d but can't avoid the visible overlap regions. Does anyone know how to solve this?

Answer 1

This is a problem you usually come across pretty often, even in 3D.

I'm not too familiar with Cocos2D, but one way to solve this in generic OpenGL is to fill the framebuffer with your desired alpha channel, switch the blending mode to glBlendFunc(GL_ONE_MINUS_DST_ALPHA, GL_DST_ALPHA) and draw the rectangles. The idea behind this is that you draw a rectangle with the desired transparency which is taken from the framebuffer, but in the progress mask the area you've drawn to so that your subsequent rectangles will be masked there.

Another approach is to render the whole thing to a texture or assemble the shape using polygons that don't overlap.

I'm not sure whether Cocos2D supports any of these…

Answer 2

I do not know what capabilities Cocos2D specifically provides, but I can see two options,

One, do not overlap like that, but rather construct more complex geometry such that each pixel is only covered once,

Two, use stencil buffer to create a mask as you draw, and to reject any pixels that are already masked.