Rendering overlapping translucent objects without darkening overlap

Question

I'm not sure if there's a name for this, but essentially what I need to do is take two opaque sprites, draw them both at 50% opacity, and where they overlap, don't have it look darker.

The image on the left is how it's rendered originally. Then, I want to decrease the alpha of the rendering, and by default, I get the image in the middle, but I want to get the image on the right.

I'm using cocos2d on the iPhone and right now I'm rendering the sprites using an Atlas Sprite Manager, which doesn't have its own alpha, so I've tried decreasing the alpha by decreasing the alpha of each sprite individually and also decreasing the alpha of the source image, neither of which I really expected to work.

Is there some blending mode I can enable, or some (fast) way of rendering the fully-opaque image to a secondary buffer then decreasing the opacity of the buffer before blending it with the main buffer?

Answer 1

AFAIK there's no easy way round this. Alternatives I can think of are:-

1. Modify the geometry so the objects don't overlap (hardest to code, but highest performance).
2. Render the objects to a texture at full opacity, then render that alpha-blended.
3. Use a stencil buffer (if iPhone supports stencil buffers which I suspect it doesn't). Start with the stencil set to zeros, set it to write a 1 when you draw your translucent polys and set the condition to only draw the fragment if the buffer is 0.