OpenGL ES Texture Masking

Posts: 7
Joined: 2009.08
Post: #1
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

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.


PS. Sorry for my bad english... i'm from Romania
Quote this message in a reply
Posts: 1,234
Joined: 2002.10
Post: #2
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
Quote this message in a reply
Posts: 7
Joined: 2009.08
Post: #3
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!
Quote this message in a reply
Posts: 7
Joined: 2009.08
Post: #4
Your solution worked 100% and it's uber fast. A thousand thankyous... Attached result screenshot.
Quote this message in a reply
Posts: 2
Joined: 2012.04
Post: #5
Hello airfire?

Could you please upload your last code here..?

Thank you..
Quote this message in a reply
Posts: 1
Joined: 2012.11
Post: #6
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!
Quote this message in a reply
Posts: 1
Joined: 2014.03
Post: #7
That's powerful thks very much
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  OpenGL ES Texture Compression ajrs84 9 12,373 May 7, 2013 03:36 PM
Last Post: ajrs84
  OpenGL ES Texture Masking dalasjoe sin 0 5,497 Apr 13, 2012 12:17 AM
Last Post: dalasjoe sin
  Texture in OpenGL ES 2 looks pixelated vunterslaush 18 40,941 Aug 30, 2011 09:44 PM
Last Post: Frogblast
  Masking without a stencil buffer? Bachus 12 23,658 Sep 2, 2010 02:42 PM
Last Post: Skorche
  Lighting and changing texture colors in OpenGL agreendev 2 11,292 Aug 13, 2010 03:47 PM
Last Post: agreendev