I'm trying to determine how to render vector graphics with translucency. Not sure how to explain it without pictures, but the idea is that if I have a group of objects, they should blend like this:

That's three objects blended together as one group at 50% alpha. They don't blend with each other; it's as if they are rendered to an intermediate buffer with 100% alpha and then that buffer is rendered with 50% alpha to the screen.

Now, generally, a naive approach would be to enable alpha blending and render the objects at 50% alpha:

That doesn't work, obviously. Because alpha blending is not commutative, the paths blend with each prior one (blue blends with the green that blends with the red). That kind of thing.

My idea is to use a 'stencil routed A-buffer' (for reference) but that seems rather complex for this problem. I want to keep support to OpenGL 3 hardware so using OpenGL 4 features are out.

Any ideas? I'm pretty tired so I probably forgot something, but I hope I conveyed my problem.

So, you want to have some sort of object id concept where objects with the same id are invisible to each other? How many object ids do you have? If you only have 2 (ie: you can see the background through translucent objects, but not other objects) you'd want to render the background, then render your translucent objects front to back instead of back to front.

If you have more than 2, the problem gets more complex. I'd recommend rendering each object group to a separate buffer front to back with no blending, then render each of these buffers with blending enabled back to front.

[edit]
On second thought, you don't need extra buffers. Just sort your various groups back to front and within a group, draw front to back.

For your specific case, you could also use the depth buffer instead of stencil (and draw front to back within a group).

Why not just use an intermediate buffer where you draw each at 100% alpha in order then draw that bitmap onto your backbuffer at 50% alpha or w/e.

You'll have to track groups, but rectangle overlap or alpha hit detection should suffice for that.

Yeah, the way I plan on solving similar issues, is by more or less having "Groups". a top level item will have its translucency set. not the individual items. It also allows that level to be cached. if nothing changes, no need to redraw any of it.

I really want to develop a game where all the graphics are resolution independent. The 'draw to a render target, then draw the render target to the back buffer' will be really slow when using more than a handful of shapes... Either you'd have to have 100 buffers for 100 groups, or 1 buffer and clear it every time.

As far as I can tell, Elias/relpatseht's method seems to meet my requirements. I'll go with that for now.

Drawing front-to-back... It's so stupidly simple. Beautiful.

Aaron's always doing cool stuff with vector graphics. Everyone, keep an eye on him.

Ohhhhhhhhh... I get what you're saying here... You want the object as a whole to be alpha blended with what's behind it, but you don't want the individual vector-shapes that make up that object to blend with each other.

What you need to do is simple enough and shouldn't cause a huge performance hit, though it is annoying:

1. Create a buffer to draw full vector objects into. Make sure it's large enough to handle your largest vector objects. (Be weary about going over 4096x4096 though as this might break your game on older systems and will consume HUGE amounts of video memory.)

2. Clear the buffer and draw all your vectors into it which make up a single object.

3. Draw the buffer to the display using whatever blending methods you wish.

When clearing the buffer for each object you intend to draw, the fastest way to pull it off is by drawing a flat rectangle which is just a pixel or two bigger than the edges, rather than using actual clear functions.

Performance should be decent.