- Online Community Forums » Programming Questions » Alpha Blending with Vector Graphics

Credits go to Edgar Reynaldo, Elias, relpatseht, and Thomas Fjellstrom for helping out!
This thread is locked; no one can reply to it. rss feed Print
Alpha Blending with Vector Graphics
Erin Maus
Member #7,537
July 2006

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.

ItsyRealm, a quirky 2D/3D RPG where you fight, skill, and explore in a medieval world with horrors unimaginable.
they / she

Member #5,034
September 2004

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.

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.

Member #358
May 2000

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

"Either help out or stop whining" - Evert

Edgar Reynaldo
Major Reynaldo
May 2007

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.

Thomas Fjellstrom
Member #476
June 2000

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.

Thomas Fjellstrom - [website] - [email] - [Allegro Wiki] - [Allegro TODO]
"If you can't think of a better solution, don't try to make a better solution." -- weapon_S
"The less evidence we have for what we believe is certain, the more violently we defend beliefs against those who don't agree" --

Erin Maus
Member #7,537
July 2006

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.

ItsyRealm, a quirky 2D/3D RPG where you fight, skill, and explore in a medieval world with horrors unimaginable.
they / she

Gideon Weems
Member #3,925
October 2003

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.

Kris Asick
Member #1,424
July 2001

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. ;)

--- Kris Asick (Gemini)

Go to: