How to blur a transparent texture in a glsl shader?

Question

My setup:

Ping-ponging RGBA FBO's, and two shaders for blurring: a horizontal and a vertical one. Imagine I want to blur a red rectangle.

The blend function is as follows:

_gl.blendEquationSeparate(_gl.FUNC_ADD, _gl.FUNC_ADD);
_gl.blendFuncSeparate(_gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA, _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA);

In my blur shaders I add several fragments like this:

vec4 color = texture2D(u_image, v_tex_coord + vec2(x, y) * u_amount) * weight;

Problem:

Blurring works fine on opaque textures, but as it mixes in more and more transparency, the colors become black, as if everything is mixed with a black background. My clear color is 0,0,0,0, so that makes sense.

Question:

How do I get a blur effect that truly goes to transparent red, instead of a red mixed with more and more black as the alpha goes to zero?

I basically want the same as when you blur something on a complete transparent background in Photoshop. Do I need premultiplied FBO's or do I need to handle the mixing of fragments in the shader differently?

Unick Unick · Accepted Answer · 2015-05-07T10:52:41

To apply blur to transparent texture you need use alpha to correct. There is simplified formula for one pixel:

resultColor = (sum of pixels of input image) * 1 / K;

Commonly K is kernel size.

If you blur transparent texture you need accumulate alpha and use it as K.

resultAlpha = (sum of alpha pixels of input image);
resultColor = (sum of pixels of input image) * 1 / resultAlpha;
resultAlpha = resultAlpha * 1 / K;

For this formula if you blur 4 pixels and one of them is opacity and another is transparent, color of result pixel will be the same, but alpha will be 4 time smaller.

In my example all channels have value form 0 to 1.

How to blur a transparent texture in a glsl shader?

2 Answers