Blending over white background

How can you blend an image (for example a black square image with an white circle in the middle - used as a particle texture) over a white background? What parameters should you use in glBlendFunc?
Of course, the black part should be transparent, but the white part should be totally solid. I tried some combinations for the source and destination parameters of glBlendFunc, but I could not find a suitable one.

Use alpha channel. Make your texture with alpha = 0 for the black and 1 for the rest (eventually a gradient from 0 to 1) and then GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA.

What about GL_ZERO, GL_ONE_MINUS_SRC_COLOR ? Or use the alpha channel, as suggested…


Use the alpha channel as suggested and, for your particular case, use the alpha test instead of blending.

From what I’ve read about alpha testing is that “you are restricted to completely transparent or completely opaque blending, there is no in between” (NeHe). So if I want some alpha values for the particles, I should use glBlendFunc with the parameters that dawn has mentioned (thanks for that). Am I right?

Yes, that is correct. I thought you only wanted completely solid particles except in places that are black. If you want something inbetween, then blending is what you need ( as the other posters mentioned ).

One more thing, the actual blending factors depend on what effect you want to achieve. Since you mentioned particles, you could use additive blending,

glBlendFunc( GL_ONE, GL_ONE );

or combine that with alpha for control over the transparency,

glBlendFunc( GL_SRC_ALPHA, GL_ONE );

The last one will compute, particle_alpha * particle_color and add that to your background.

The one proposed by Dawn requires sorting your particles ( it’s the blend func typically used for transparent glass ).

Thanks a lot for clearing all that up.

I know this is a little off the topic, but does anyone know how to create alpha channels with Adobe Photoshop or at least point me to a site which has a (round) particle texture with an alpha channel?
Thanks in advance.

Originally posted by Sektor:
I know this is a little off the topic, but does anyone know how to create alpha channels with Adobe Photoshop or at least point me to a site which has a (round) particle texture with an alpha channel?
Thanks in advance.

There are some textures you might like at:

Otherwise, I’d suggest just doing a Google search on “particle textures” or something like that.

Thanks for the link. The textures are very nice.

In the OpenGL Programming Guide, it says that after multiplying the scale and the destination factors with the RGB values and adding them, the resulting values are clamped to [0,1]. What does clamp mean? Is it that when the values are greater than 1 they will be 1, and when they are less than 0, they will be set to 0?
If this is the case, it means that if the background is white and I try to blend something in front of it using the destination parameter of glBlendFunc GL_ONE, no matter what the source parameter will be the resultant color will be white (because we have 1 * 1 + something ).
Is this correct? If so, blending with GL_SRC_ALPHA, GL_ONE won’t work on a white background.

Yes they will be clamped as you said, as PH said, he was describing ‘additive’ blending><td is often the case with colours & additive blending (you can get into the problem with lighting and other stuff to) that you saturate the colours to white. You could instead try using GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA as somebody else mentioned previously.


[This message has been edited by Mezz (edited 12-10-2002).]

Just curious, in your example of the Black quad with a white circle, what do you expect to see on a white background? (In the white circle I mean)

In Photoshop, go to the Channels tab, and then “Create new channel” and copy your image there – and then save it as TGA

For rgpc: I expect to see a red circle if I use glColor4f( 1.0f, 0.0f, 0.0f, 1.0f ) and so on.

I’ve got one more question. It may sound dumb, but here it goes. The alpha values from let’s say the source factors of glBlendFunc (if we use GL_SRC_ALPHA) are the alpha values taken from the texture’s alpha channel combined somehow with the alpha value used in the previous glColor4f? If so, how are they combined?
Thanks in advance.

Indeed, if you use GL_SRC_ALPHA, the alpha values will be from the texture. They will be modulated with the color that you specify.

Modulated = multiplied.

If I use glColor4f(1.0f,0.0f,0.0f,1.0f) and blending, the texture will be made red and then it will be blended (with the color values changed by glColor4f) or first the blending will take place and then the resulting pixels will be affected by glColor4f?

If you haven’t changed the texture environment mode ( using glTexEnv{i/f} ), then yes. The texture environment mode defaults to modulate, so the color used in the blending equation will be,

src.rgba = Color.rgba * Texture.rgba

src is what is multiplied by the source factor in glBlendFunc. So you get the following equation ( simply plug in the factors you need to customize ),

Result = srcFactor * Color.rgba * Texture.rgba + dstFactor * dstColor

dstColor is what is currently in the framebuffer. Result replaces that value.