Hi,

Got a minor issue here with rendering my 2D images. My image has transparency, but when rendering it isn't showing up. Unsure where i'm going wrong here or what to add to my code.
Any help would be greatly appreciated .

Image of the image i'm rendering, the middle section which is appearing black should be transparent:
[media]http://imageshack.us/photo/my-images/408/issue.png/[/media]

My Drawing code:


glBindTexture(GL_TEXTURE_2D, texture);

//Begin Drawing Quads
glBegin(GL_QUADS);

// Top-left vertex (corner)
glTexCoord2i(0, 0);
glVertex2i(x, y);

// Bottom-left vertex (corner)
glTexCoord2i(1, 0);
glVertex2i( x + imageWidth, y);

// Bottom-right vertex (corner)
glTexCoord2i(1, 1);
glVertex2i( x + imageWidth, y + imageHeight);

// Top-right vertex (corner)
glTexCoord2i(0, 1);
glVertex2i(x, y + imageHeight);

glEnd();
glLoadIdentity();


Have you enabled alpha blending?

Have you enabled alpha blending?

No, would that be:
glEnable(GL_ALPHA_TEST)?
glAlphafunc(?, ?)


I did try this earlier, but couldn't seem to get it working. Were would i place this is the code exactly? What happened last time when i tried this was that the rectangle didn't render at all.

You can probably start from this FAQ about trasparency, traslucency and blending.

Here's the new code i have, still no effect on the transparency. Still getting that black square. Perhaps my placement of the enabling/diable of GL_ALPHA_TEST is wrong? Or i need something else?


glBindTexture(GL_TEXTURE_2D, texture);

glEnable(GL_ALPHA_TEST);
glAlphaFunc(GL_GEQUAL, 0.5f);

glBegin(GL_QUADS);

// Top-left vertex (corner)
glTexCoord2i(0, 0);
glVertex2i(x, y);

// Bottom-left vertex (corner)
glTexCoord2i(1, 0);
glVertex2i( x + imageWidth, y);

// Bottom-right vertex (corner)
glTexCoord2i(1, 1);
glVertex2i( x + imageWidth, y + imageHeight);

// Top-right vertex (corner)
glTexCoord2i(0, 1);
glVertex2i(x, y + imageHeight);

glEnd();
glDisable(GL_ALPHA_TEST);
glLoadIdentity();


Right, got something to work with atleast;
Currently using:

glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);



I get a correct rendering of the square, only the outline is rendered. Great, but rendering then something else, that seconded image rendered becomes almost red, with the background clearing color. Which i don't want . Here's an image to see for yourself:
http://imageshack.us/photo/my-images/23/issueb.png/
However, using:


glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);



Doesn't render anything at all. :/.
Unsure were i should proceed from here..

For one thing, you aren't even setting up the color. You probably should call one of the glColor functions, such as glColor4ubv or glColor4fv. Set your alpha and
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); will work fine.

Just for clarity, this is the seconded image i'm rendering:
http://imageshack.us...836/towerz.png/.

Can you clarify what you mean by setting the color exactly? Won't the image have the color data in the texture? Perhaps i'm loading the image wrong?
I'm using a combination of SDL & OpenGl, and just really to make sure, i'll post up my image loading code. Just in-case :


SDL_Surface *LoadedImage = NULL;
SDL_Surface *OptimizedImage = NULL;
GLuint texture;
GLenum textureFormat = NULL;
GLint numberOfColors;

LoadedImage = IMG_Load(filename.c_str());
if (LoadedImage != NULL)
{
OptimizedImage = SDL_DisplayFormat(LoadedImage);
SDL_FreeSurface(LoadedImage);
}

if (loadingTileSheet)
{
numberOfTiles = (OptimizedImage->w / tileWidth) + 1;
}

//Get the Number Of Channels in our SDL_Surface
numberOfColors = OptimizedImage->format->BytesPerPixel;

if (numberOfColors == 4)
{
if (OptimizedImage->format->Rmask == 0x000000ff)
textureFormat = GL_RGBA;
else
textureFormat = GL_BGRA;
}
else if (numberOfColors == 3) //No Alpha Channel
{
if (OptimizedImage->format->Rmask == 0x000000ff)
textureFormat = GL_RGB;
else
textureFormat = GL_BGR;
}


glGenTextures(1, &texture);

glBindTexture(GL_TEXTURE_2D, texture);

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, numberOfColors, OptimizedImage->w, OptimizedImage->h, 0, textureFormat, GL_UNSIGNED_BYTE, OptimizedImage->pixels);

if (OptimizedImage)
{
//No need now for the SDL_SURFACE
SDL_FreeSurface(OptimizedImage);
}

return texture;


Tried a few more things, mainly concerning alpha testing:


glEnable(GL_ALPHA_TEST);
glAlphaFunc(GL_GEQUAL, 0);

With that on my rendering code, i don't get the black box surrounding my image, but what i do get is a half transparent image which isn't what i want.
To be specific, all i want is to get rid of the black box surrounding my image. Any pixels that are in images rendered that are transparent, i don't want them to be black but rather ignored.

Again, using the blending;


glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

That code for me renders nothing on-screen, only thing that seems to be working for me (With in regards to using blending functions) is:

glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);

But even that produces that same result as using the Alpha test, this "semi-transparent" image. *Screenshot below:
http://imageshack.us/photo/my-images/269/issuew.png/

Btw, you'll notice this new background. Just to make sure, i run this code on both just clearing the background a certain color i.e glClearColor & then with rendering this background image. Both tests gave me a semi-transparent image.

Hard to see in the screenshot, but the semi-transparent image is in the Green section of the background.

Honestly, bit clueless know to were i'm going wrong.

I knew that someone might have had a similar (almost near identical issue).
Seems that the alpha channel wasn't being brought over,
http://www.gamedev.net/topic/518062-solved-sdl-png-transparency-with-opengl/

. Thank god!.
But as for one quick final small issue. Just wondering now what i have to-do in-between renders for example:

-I render my background
-Then Render the seconded Image now with transparency on-top, currently what i'm getting is background image squeezed into the size of the seconded Image being rendered (also rotated, because the seconded image using rotation.)

Image of what i'm getting:
http://imageshack.us/photo/my-images/836/newissue.png/

What should i be doing in-between the calls?