iDevGames Forums
Alpha woes - Printable Version

+- iDevGames Forums (
+-- Forum: Development Zone (/forum-3.html)
+--- Forum: Graphics & Audio Programming (/forum-9.html)
+--- Thread: Alpha woes (/thread-8639.html)

Alpha woes - esunder - Feb 13, 2011 07:04 PM

Hello all,

I am trying to get some alpha/glow effects to work within OpenGL/iPhone. I have two images to discuss the issue that I am having.

This first image shows two shapes that I have created within photoshop. The blue shape has an FX -> Outer Glow applied. The red shape plain.

This second image shows the issue that I am having. I have exported both of the shapes, blue with its glow, and red, to their own PNG files. I then created a new canvas within photoshop and gave it a black background. Next, I drag the pngs onto the canvas. This time, when I orient them such that the blue glow overlaps the red, it looks terrible and there is a black halo that appears on the edges of the glow.

This same "black halo" effect occurs when the PNGs are loaded up within OpenGL on the iPhone. I have done a lot of research about iPhone and PNG alpha and have found out that Apple actually converts PNGs into a non-standard format. I have taken the steps of using a different texture loading library (stb_image) and setting the appropriate flags in my XCode project so that the PNGs are not processed. This seems to have no effect, and because the issue happens when I drop the PNGs back into photoshop (mentioned in part 2), I am beginning to suspect that this is not related to OpenGL anymore.

Any help would be greatly appreciated.


RE: Alpha woes - SethWillits - Feb 14, 2011 12:55 PM

I don't see a "black halo" around the edges of the glow, I just see the inner blue glow becoming solid. Clearly this has nothing to do with OpenGL if you're having this problem in Photoshop itself. I suspect it's simply related to how the effect is being flattened before saving. I've never had a problem like this before.

RE: Alpha woes - monteboyd - Feb 14, 2011 03:00 PM

Could it be that when your glow has a colour mode like Screen applied? A colour mode like that will not have any affect when displayed over a transparent background.

RE: Alpha woes - Skorche - Feb 14, 2011 03:23 PM

When photoshop flattens layers (or layer effects) with a blending mode other than "normal" it just ends up attempting to convert it to plain alpha which doesn't actually work.

You are going to have to save the glow as a separate image and apply it using a different blending mode when you draw it.

RE: Alpha woes - esunder - Feb 14, 2011 06:33 PM

The "black halo" I guess it not as noticeable in the photoshop image. It is much worse in OpenGL. I will give Skorche's suggestion a try; after I posted this, I continued to play around with blend mode in photoshop and I think his suggestion is the correct path. I will update this thread with my solution.

Thank you all for your inputs, they are greatly appreciated.

RE: Alpha woes - reubert - Feb 15, 2011 03:06 AM

If you want to achieve the effect in the first image in OpenGL, you will need some form of additive blending. The blue glow in that image is adding to the red shape, creating a lighter color (almost certainly due to the default 'Screen' blend mode for outer glows in Photoshop).

This might help:

RE: Alpha woes - esunder - Feb 15, 2011 08:15 PM

Ok, I have yet to get this working. I have found the link from reubert through my own searching, and I believe I have this set up properly. Let me describe my scenario again with my understanding of what is going on:

The red and blue (with glow) images are regular PNGs exported from photoshop and then imported into my XCode project. (Note: creating a new photopshop canvas and dragging and dropping the exported pngs onto it, I can create two new layers, set the blue layer to be on top, set the layer blend mode to Screen and everything looks "good". We saw this above in the "good" looking image.)

Back to Xcode: Because they are PNGs, Xcode is going to "optimize" them. Performing the pre-multiply of alpha onto the color and swapping the B and R components. Ok fine.

To the phone:
I am using a library stb_image.c to load these PNGs on the phone. This library supports reversing the B/R swap and unmultiplying by alpha. I have chosen _yes_ to the unswap and _no_ to the alpha (see below). It is my understanding from reubert's link that my texture data must be in pre-multiplied alpha state. So my texture byte data should be R*A,G*A,B*A,A

The "quads" that I am rendering my sprites on are vertex buffers that contain no color data. It is my understanding that the color will default to 1,1,1,1 (opaque white). This seems fine. Adding the white color data to the VBO makes no difference.

Here is a snippet of load time:
unsigned char *data = 0;


int n;
data = stbi_load(_filename.c_str(), &info.size.x, &info.size.y, &n, 0);
    return m_textures.end();

info.filename = _filename;
info.loaded = true;
glGenTextures(1, &info.handle);
glBindTexture(GL_TEXTURE_2D, info.handle);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, info.size.x, info.size.y, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);

At render time, I am using:


// This just maps an enum to the GL vars that we need.
// For the red texture I am using (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)
// For blue with glow I am using  (GL_ONE, GL_ONE_MINUS_SRC_ALPHA);    
// Set the correct texture handle
glBindTexture(GL_TEXTURE_2D, _texture->second.handle);

// Render the current Quad/Sprite

// Disable blend mode and texture 2d

// Move on to next sprite

RE: Alpha woes - esunder - Feb 15, 2011 08:32 PM

Apparently I have everything set up properly. Just needed to use GL_ONE, GL_ONE and not GL_ONE, GL_ONE_MINUS_SRC_ALPHA like the link suggests....

EDIT: It is now working. Smile