How can I achieve a good fire effect with alpha blending and particles?

Question

Using the following setting for the OpenGL particle effect:

SRC: GL_SRC_ALPHA
DST: GL_ONE

Creates an additive blend, which looks spectacular on a black background but terrible on brighter colours, as it begines to fade to white.

I then used alpha blending:

SRC: GL_SRC_ALPHA
DST: GL_ONE_MINUS_SRC_ALPHA

This allows other backgrounds to be used without affecting the color of the particles, but the particles themselves look dull compared to the additive blend. How can I achieve a good fire effect with alpha blending and particles?

Additive:

Alpha:

UPDATE:

Following David's advice below, I created a separate texture and then used additive blend on the particle effect before drawing onto the texture. The problem with that is that drawing on an alpha=0 texture resulted in just the coloured parts of the particle appearing in front of my world map, since normally you have a black background instead. The trick was to use two textures. I created a black texture and then drew the particles on it. Then I removed the alpha layer of the particles from this texture, effectively removing all the surrounding solid black and fading out the partially visible particles, while leaving the underlying black as you'd expect when making additive blend particles on a black background. In short, a gruelling process, but I got there eventually:

Here's the thread where I posted my process: http://www.cocos2d-iphone.org/forum/topic/28707?replies=8#post-141528

Video: http://www.youtube.com/watch?v=JptGbEO3b5E

Answer 1

I admit I'm not aware of any ideal solution to this problem, so I'll describe a workaround that you may or may not be comfortable with:

1. Render all of the particles using additive blending to a separate texture (or render target) with its background cleared to transparent.
2. Render that texture (or render target) on top of your scene using alpha blending.

I tried it in Photoshop and here's what I got - It's not perfect, but at least it preserves the original colors better:

Here's the original texture without doing additive blending on the particles:

Answer 2

Have a look at premultiplied alpha.

Link

Answer 3

Have you tried using both? Layer on some particles with alpha blending, which should get your colors the way you want, then come back with some additive blending to get the nice highlight that you're looking for.

Answer 4

As David Gouveia pointed out, there's no satisfying replacement for additive blending on bright backgrounds. The best effect I found (that doesn't require something like rendering to a backbuffer) is to use the following GL blendmode:

SRC: GL_ONE
DST: GL_ONE_MINUS_SRC_ALPHA

It's not as nice as additive blending, but way better than GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA. If you tweak the start and end alpha and color values a bit, you might get results that are really close to additive blending.

In the image above there's GL_SRC_ALPHA, GL_ONE on the left, in the middle there's GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA and on the right you can see the blend mode I would propose for this setup.

Answer 5

Well first off, the particle images you're using appear to have a black background, resulting in the dark fringes in that second image. Don't do that; that is, don't draw the shape of the particle on the color channels. Instead, the image should be solidly colored and only define the shape in the alpha channel.

Doing that will improve the look of alpha transparency considerably. Then you can further improve the look of the overall effect by having the particles change color over their lifetime. Like, the base image is very bright, giving you that central bright yellow area. Then tint the particles reddish orange and increase the tint over time. That way the particles will darken as they move out from the center.