I want to do the following:

  1. Render multiple semi-transparent primitives to a texture using a framebuffer object.
  2. Composite the texture on top of the content of the main framebuffer (screen) by binding the texture from step 1 and drawing a quad.

Before rendering to the texture in 1), I clear it with black and an alpha of zero.
The problem I encounter is the following: The color of the semi-transparent primitives are affected by the black background of the rendering texture, which I don’t want. On the other hand, I want the color of the semi-transparent primitives drawn first to be blended with the color of the primitives that come later.

Anyone knows of a simple trick to do what I want?


p.s.: Currently, I’m thinking of 2 solutions:

  1. Use the stencil buffer to draw the semi-transparent primitives in 2 passes. First draw the part that overlaps what has been drawn before, then draw the part that overlaps the background and turn off blending.
  2. Write a shader that would do a similar trick.

Any other simpler way?

You should examine the resulting color and alpha values after rendering to the FBO. Then carefully think about your blend function.

Generally for 2D compositing, you are producing a premultiplied result, so you need to set up the blend function correctly.

What if you use a ClearColor of 1,1,1,0 instead of 0,0,0,0?

Otherwise, when I want non-premultiplied output, I divide the RGB values by the alpha in a shader.