Alpha woes

Nibbie
Posts: 4
Joined: 2011.02
Post: #1
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.
http://imgur.com/6FbpXl&pDfmH

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.
http://imgur.com/6FbpX&pDfmHl

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.

Cheers
Quote this message in a reply
⌘-R in Chief
Posts: 1,237
Joined: 2002.05
Post: #2
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.
Quote this message in a reply
Member
Posts: 345
Joined: 2002.04
Post: #3
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.
Quote this message in a reply
Sage
Posts: 1,482
Joined: 2002.09
Post: #4
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.

Scott Lembcke - Howling Moon Software
Author of Chipmunk Physics - A fast and simple rigid body physics library in C.
Quote this message in a reply
Nibbie
Posts: 4
Joined: 2011.02
Post: #5
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.
Quote this message in a reply
Member
Posts: 320
Joined: 2003.06
Post: #6
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:
http://stackoverflow.com/questions/32539...-opengl-es

Chopper, iSight Screensavers, DuckDuckDuck: http://majicjungle.com
Quote this message in a reply
Nibbie
Posts: 4
Joined: 2011.02
Post: #7
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:
Code:
unsigned char *data = 0;

stbi_convert_iphone_png_to_rgb(1);
stbi_set_unpremultiply_on_load(0);

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

    
info.filename = _filename;
info.loaded = true;
    
glGenTextures(1, &info.handle);
glBindTexture(GL_TEXTURE_2D, info.handle);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    
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:

Code:
glEnable(GL_TEXTURE_2D);
glEnable(GL_BLEND);

// 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);    
glBlendFunc(m_blendMap[_texture->second.blendMode].source,
                  m_blendMap[_texture->second.blendMode].dest);
    
// 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
Thoughts?
Quote this message in a reply
Nibbie
Posts: 4
Joined: 2011.02
Post: #8
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
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Alpha Channel Woes GraySupreme 5 4,088 Jul 26, 2005 01:24 PM
Last Post: NYGhost
  png without alpha fine, png with alpha, nothing dave05 6 6,501 Jun 11, 2005 10:31 AM
Last Post: dave05