Alpha masking with glsl

beginners
#1

Hello forum,

All you have hopefully gone through the fbo alpha masking example that comes along with the OF. i am finding it hard to understand and some explanation from your end will be of great help.

Initially the following image are loaded

1.backgroundImage = A.jpg (zebra image)
2.foregroundImage = B.jpg (colored zig-zag image)
3.brushImage = brush.png (checkered image)

then fbo and maskFbo both are cleared to the black with alpha component 255.

Now analyze 2 scenarios here.

  1. When the mouse is not pressed

  2. When the mouse is pressed and dragged.

  3. Mouse is not pressed - backgroundImage will go through the shader along with the contents of the maskFbo. Since the mouse is not pressed , maskFbo will only contain the alpha component in its attached texture. Eventually the output color will be the backgroundImage (zebra image) rendered to the fbo. fbo and shader will be detached. Then the foregroundImage(colored zig-zag image) will be rendered to the default frame buffer. At last the contents of the fbo attached texture(zebra image) will be rendered to the default screen. Does it not mean that the zebra image will be drawn on top of the colored zig-zag image. But it is happening the reverse. I must be missing something in my analysis.

Some thoughts and explanations ?

I hope that the second scenario will be easy to understand once i get some explanation here.

Thanks

#2

Hey @sajjad,

What version of OF are you referring to? I couldn’t deduce it from your reasoning.

If you refer to the alphaMaskingShaderExample in OF 0.7.4 or 0.8.1, then it actually works in the opposite way :

  • The foreground is the FBO containing the masked zebra image ( A.jpg or srcImg )
  • The background is the coloured zig-zag image ( B.jpg or dstImg )

If we define foreground and background in the order they are drawn to screen,

So basically in the update function, things happen in this order:

  1. Draw the brush at the current mouse position onto the maskFbo if the mouse is down.
  2. Draw the zebra image after being passed through the mask shader onto the fbo.

So if the maskFbo is cleared, the fbo will only contain transparent pixels and only the background image is visible (coloured zig-zag).

Hope it helps!

Cheers!

#3

This is what i am talking about

https://github.com/openframeworks/openFrameworks/tree/master/tutorials/shader/08_displacementMap

And there is nothing inside the update() function.

Please check the above link and let me know if it is outdated.