Hi all,
I’m brand new to this forum and to OpenGL ES. I’m writing an application that needs to allow the user to draw on a background image and, when they’re done, put their drawing (excluding the background image) into a new image with a transparent background. I’ve tried several different approaches unsuccessfully so I’m finally breaking down and asking for some help 
Of all the approaches I’ve tried, the most workable seems to be to use two FBOs each with their own color renderbuffer – one for on-screen drawing and one for off-screen. I render the background image to the first FBO but not to the second. I then render all user drawing (done using point sprites and a pen texture) to both FBOs. The first FBO I display on-screen since it includes the background image and the second I keep off-screen and use to extract the user drawing sans background when I need to.
The problem I’m having is that the drawing rendered to the second FBO has a solid background I can’t seem to get rid of. What can I do to create an image with the user’s drawing on a transparent background from it? I’ve tried removing the solid color through other means, but the point sprite blending makes the edges of the lines look like a mess.
I realize this approach may be completely wrong, so feel free to bash it if there’s something I could be doing better.
The other problem I’m facing is how to get rid of the thin black border that all my point sprites seem to have. The texture being used for the point sprite is a 16x16 image of a circle on a transparent background. I saw one person solved this by turning off depth checking but I don’t have that on to begin with. It’s odd because the transparency of the 16x16 image is being preserved (I see a circle and not a square) but the circle has a thin black border.
Any help that anyone could provide would be most appreciated. I’ve been pulling my hair out for a few days trying to get this working. I can provide code examples if that would be helpful at all.
->Dan
Have you trid to do a glClear in the 2nd FBO with a colour alpha of 0 before drawing? I don’t know if this could help.
For the second problem, I’d say that your sprite has non-zero alpha near the border of the circle but outside of it. Try to edit it with an editor that lets you see the alpha channel, like Gimp.
Thanks for the response, Yomboprime.
Yes, I’ve tried glClear with both glClearColor(0.0,0.0,0.0,0.0) and glClearColor(1.0,1.0,1.0,0.0). The former gives me a solid black background and the latter gives me a solid white one.
I’ve also checked the brush image in Photoshop and the alpha channel looks correct. Here’s a link to the image:
http://www.farbish.com/downloads/brush.png
and here’s an example of what the point sprite drawing with it looks like:
http://www.farbish.com/downloads/gl_test.png
Any other thoughts?
Ok, so I figured out the issue with transparency… it seems that the alpha values were correct coming out of OpenGL but were getting dropped in the code that created the image. So, one problem solved.
However, the border around the point sprites is still an issue 
your sprites have a black background, right ?
then use premultiplied alpha for blending :
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA)
http://home.comcast.net/~tom_forsyth/blog.wiki.html#[[Premultiplied%20alpha]]
Thanks for the link, ZbuffeR. My sprites are on a transparent background.
I did try changing my blend function as the article you referenced suggested and it seemed to correct the problem for most colors. Orange and gray still have some glitches but I’ll take what I can get I did have to leave the brushes on a transparent background, though – putting them on a black one resulted in seeing the black background in the point sprite.
Thanks again for your help!
Apparently I have not been clear enough about the “black background” thing.
Think about RGBA being channels. At each texel, you have a value for each : R, G, B, A.
What are the 4 values for the transparent background ?
- for classic (wrong) blending, only A should be at 0, the 3 other almost do not matter, but shows ugly borders right before the transparent parts.
- for premultiplied-alpha (correct) blending, all 4 channels must be at exactly 0.
And of course for all the fully opaque parts, alpha should be at exactly 255 (or 1.0f for normalized values).
If you need transluscent parts, you have to be careful about the premultiplied thing on RGB channels, otherwise it will put a “glowing in the dark” effect to these parts.
EDIT: seeing the channels of brush.png, it does look like you need more than on/off transparency, so think about premultiplying your color channels.
I found the Gimp page is quite clear and concise about this :
http://www.gimp.org/docs/plug-in/appendix-alpha.html
Thanks, ZbuffeR. That’s was very helpful!
