iDevGames Forums

Full Version: OpenGL ES Texture Masking
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
What's the best choice when trying to mask a texture
like ColorSplash or other apps like iSteam, etc?

I started learning OPENGL ES like... 4 days ago (I'm a total
rookie) and tried the following approach:

1) I created a colored texture2D, a grayscale version of the first
texture and a third texture2D called mask

2) I also created a texture2D for the brush... which is grayscale and
it's opaque (brush = black = 0,0,0,1 and surroundings = white =
1,1,1,1). My intention was to create an antialiased brush with smooth
edges but i'm fine with a normal one right now

3) I searched for masking techniques on the internet and found this
tutorial ZeusCMD - Design and Development Tutorials : OpenGL ES Programming Tutorials - Masking
about masking. The tutorial tells me to use blending to achieve
masking... first draw colored, then mask with
glBlendFunc(GL_DST_COLOR, GL_ZERO) and then grayscale with
glBlendFunc(GL_ONE, GL_ONE) ... and this gives me something close to
what i want... but not exactly what i want. The result is masked but
it's somehow overbright-ed

4) For drawing to the mask texture i used an extra frame buffer object (FBO)

I'm not really happy with the resulting image (overbright-ed picture)
nor with the speed achieved with this method. I think the normal way
was to draw directly to the grayscale (overlay) texture2D affecting
only it's alpha channel in the places where the brush hits. Is there a
fast way to achieve this? I have searched a lot and never got an
answer that's clear and understandable. Then, in the main draw loop I
could only draw the colored texture and then blend the grayscale ontop
with glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA).

I just want to learn to use OPENGL ES and it's driving me nuts because i can't get it to work properly. An advice, a link to a tutorial would be much appreciated.


Robert

PS. Sorry for my bad english... i'm from Romania
Here's a better way to do it:

init time:
1) create the "normal" rgb texture-- the initial image.
2) create a "degenerate" version of the same texture-- i.e. a greyscale version (or blurred, or whatever you want the effect to be.) Make sure this texture has an alpha channel, initially "all clear".
3) create the "brush" alpha texture-- i.e. an antialiased circle, or other brush shape.

draw time:
1) bind the degenerate texture to an FBO.
2) draw the brush to the alpha channel of the degenerate texture. In fixed function ES1, this is drawing a textured quad to the FBO. The TexEnv settings determine what happens to the RGB and A values. The default of MODULATE will use the current vertex color (default white) and modulate the current vertex alpha with the brush texture alpha. That's fine-- you could use the vertex alpha to fade out the brush, if you want. But, you must mask off RGB so that only the alpha channel is updated in the FBO. Use glColorMask(0,0,0,1) to do that. Accumulate the brush values in the alpha channel with a blend function like ONE, ONE.
3) now that the degenerate texture has something in the alpha channel, you want to use it. Back in the default system framebuffer, turn blending off, and draw one multitextured quad, using the normal texture on unit 0, and the degenerate texture on unit 1. Set up both unit's TexEnvs so that the two images are interpolated by the alpha channel of unit 1. That's REPLACE on unit 0, and INTERPOLATE on unit 1. Read the spec for details on TexEnv combiners.

This way, you only drew one small quad to the FBO, and one fullscreen quad to the view.

See the GLImageProcessing sample code for examples of:
1) setting up FBOs
2) setting up TexEnv in various ways (i.e. create greyscale on the GPU)
3) multitexturing and blending
Thank you so much arekkusu. I will try to apply your method and I'll return here with the result. I really appreciate your time spent writing that long reply. Thank you again!
Your solution worked 100% and it's uber fast. A thousand thankyous... Attached result screenshot. http://twitpic.com/cwp5h
Hello airfire?

Could you please upload your last code here..?

Thank you..
Hello airfire!
I have same your problem and i started learning OPENGL ES 4 days ago. i can not implement this solution.
Could you please upload your last code for me?

Thank you!
That's powerful thks very much
Reference URL's