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

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

## 5 Answers

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:

• Would this separate them into two textures and be just as if I'd have a texture of the additive blend being drawn onto a background? – Aram Kocharyan Jan 27 '12 at 4:23
• @AramKocharyan I actually haven't tried it personally other than in Photoshop where the results seemed reasonable. But I think it should look like your first picture but with all the blacks replaced by your background color. In other words, the particles are added together resulting in the large highlight in the middle of the explosion, but not with the background. Then the resulting explosion is pasted on top of your background without adding which preserves the original look. – David Gouveia Jan 27 '12 at 4:29
• Thanks that makes sense, it's just like a normal blend in Photoshop vs an overlay, but it appears like an image of an overlay sitting over a background layer. I'll try it and let you know. – Aram Kocharyan Jan 27 '12 at 4:31
• @AramKocharyan I'll post the results I got in photoshop in a few minutes so you can compare. – David Gouveia Jan 27 '12 at 4:34
• Just throwing this out there -- this technique might raise performance concerns... – notlesh Jan 27 '12 at 5:25

Have a look at premultiplied alpha.

http://blogs.msdn.com/b/shawnhar/archive/2009/11/07/premultiplied-alpha-and-image-composition.aspx

• This is the only correct answer in this thread. It's unfortunate that it's so terse, but everybody should really read this. Premultiplied alpha is the way to combine additive and alpha blending, and it comes with many other benefits, too. – Jake McArthur Jun 9 '13 at 18:23

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.

• That might be my next option, I want to keep particles to a minimum though. Hopefully I can half both. – Aram Kocharyan Jan 27 '12 at 6:51
• That seems to be the best way: learnopengl.com/In-Practice/2D-Game/Particles Just change your blend function before rendering your particles and change it back to render the rest. – itmuckel Dec 14 '19 at 18:21

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.

• I agree that for total control over colour, this method works great. – Aram Kocharyan Jan 27 '12 at 14:11
• Just to note, I noticed that with this method the best way to fade out the fire was to make it reduce to zero size, since decreasing alpha causes it to fade into white. – Aram Kocharyan Feb 5 '12 at 8:01

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.

• Yes the texture is only a white coloured brush with alpha varying from the center. – Aram Kocharyan Jan 27 '12 at 15:38
• huh, if that's true then it's weird to me that your alpha transparency screenshot has those dark halos around the particles. – jhocking Jan 27 '12 at 16:19
• Yes, I'm not sure why they formed around the alpha blending. But for what I have now, it appears to be fine. – Aram Kocharyan Jan 28 '12 at 2:16
• – Aram Kocharyan Jan 28 '12 at 2:20
• That looks pretty good, you should put that in your question update. – jhocking Jan 28 '12 at 13:42