# OpenGL Blending GUI Textures

I'm currently creating a menu for my project and I'm trying to get the textures to blend so I'm only left with the actual Image on the texture and not the background. The problem is the whole texture is somewhat transparent, it's not just removing the background.

My RGBA texture looks like

And the black background needs to be removed from the image.

I was using GL_SRC_ALPHA, GL_ONE_MINUS_SRC, ALPHA for my blend function but it wasn't blending anything. I changed to GL_ONE, GL_ONE and now I'm at where I am now.

You can see the text is there but its also transparent, but the background has been removed which is good.

This is how i'm drawing my button. The world behind it is drawn after (i've tried switching order didnt change anything) and it's drawn using VBO's whereas the Buttons are drawn in immediate mode.

glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE);[/left]
// get button pos
Point3<float> pos = button->getPos();
// get button dimensions
int width = button->getWidth();
int height = button->getHeight();
// bind button texture and draw quad
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, button->getState() ? button->getDownTex()-
>getTextureID() : button->getUpTex()->getTextureID());
glTexCoord2i(0, 1); glVertex3f(pos.x, pos.y, 0.0f);
glTexCoord2i(1, 1); glVertex3f(pos.x + width, pos.y, 0.0f);
glTexCoord2i(1, 0); glVertex3f(pos.x + width, pos.y + height, 0.0f);
glTexCoord2i(0, 0); glVertex3f(pos.x, pos.y + height, 0.0f);
glEnd();


I'm using sdl to load the texture

SDL_Surface* image = IMG_Load(textureName);
data.m_w = image->w;
data.m_h = image->h;
data.m_bitsPerPixel = image->format->BitsPerPixel;
data.m_alpha = image->format->alpha;
int colourMode = image->format->BytesPerPixel;
if (colourMode == 4)
internalFormat = GL_RGBA;
if (colourMode == 3)
internalFormat = GL_RGB;
if (colourMode == 1)
internalFormat = GL_LUMINANCE;
if (SDL_BYTEORDER == SDL_LIL_ENDIAN)
{
if (colourMode == 4)
format = GL_BGRA;
else
format = GL_BGR;
}
else
{
if (colourMode == 4)
format = GL_RGBA;
else
format = GL_RGB;
}
GLuint texture = -1; // create texture handle
glGenTextures(1, &texture);    // gen texture
bindTexture(GL_TEXTURE_2D, texture);
glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
glTexImage2D(GL_TEXTURE_2D, 0, internalFormat, image->w, image->h, 0, format,
GL_UNSIGNED_BYTE, image->pixels); // normal texture

• Your background shouldn't be black, but it should be transparent (i.e. make use of the A in your RGBA). – mrbinary May 23 '12 at 13:48

Take a look at this chart:

You're currently using GL_ONE with GL_ONE.

It looks like what you want is for the text to multiply with the background, so you get a blend where the green outline of the text modifies the color of the background. If you look at the chart, you can see that that is:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);


Coincidentally, this is the most common use for glBlendFunc (that I've seen).

• Wow thanks for that great chart. Also it is GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA that is correct. But the textures had incorrect alpha masks from the start which was the problem.gamedev.net/topic/625284-opengl-blending-help/… – James May 24 '12 at 10:02
• I'll admit: I need the chart myself from time to time. ;) – knight666 May 24 '12 at 10:15