GPUImageSoftLightBlendFilter - show black area at transparent area in an image iOS

Question

I have developed an iPhone application using GPUImage framework which includes extensive use of filters, blending images etc.

Everything is working fine except GPUImageSoftLightBlendFilter as it shows black area at transparent area in an image. Please reply if any one has faced a similar type of issue while implementing the same.

Please find attached screenshot for more information.

Answer 1

I believe this is due to a divide-by-zero error in the fragment shader. The current fragment shader code for this blend operation looks like this:

mediump vec4 base = texture2D(inputImageTexture, textureCoordinate);
mediump vec4 overlay = texture2D(inputImageTexture2, textureCoordinate2);

gl_FragColor = base * (overlay.a * (base / base.a) + (2.0 * overlay * (1.0 - (base / base.a)))) + overlay * (1.0 - base.a) + base * (1.0 - overlay.a);

As you can see, if the alpha channel of the base image (input 0) is zero, you'll get an error in the above. This leads to black output for those pixels.

One potential solution for this would be to replace the above shader code with the following:

 mediump vec4 base = texture2D(inputImageTexture, textureCoordinate);
 mediump vec4 overlay = texture2D(inputImageTexture2, textureCoordinate2);

 lowp float alphaDivisor = base.a + step(base.a, 0.0); // Protect against a divide-by-zero blacking out things in the output
 gl_FragColor = base * (overlay.a * (base / alphaDivisor) + (2.0 * overlay * (1.0 - (base / alphaDivisor)))) + overlay * (1.0 - base.a) + base * (1.0 - overlay.a);

Try to replace your GPUImageSoftLightBlendFilter's shader code from the first section with the second and see if that removes the black region. If that fixes this, I'll roll it into the main framework.

I believe this stems from the above filter attempting to correct for premultiplied alpha in input images, which I was going to look into removing.