Sign in to follow this  
dan369

2D Drawing with transparency

Recommended Posts

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:
[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();
[/code]

Share this post


Link to post
Share on other sites
[quote name='apatriarca' timestamp='1318302696' post='4871311']
Have you enabled alpha blending?
[/quote]

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.

Share this post


Link to post
Share on other sites
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?
[code]

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();
[/code]

Share this post


Link to post
Share on other sites
Right, got something to work with atleast;
Currently using:
[code]
glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);

[/code]

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:
[url]http://imageshack.us/photo/my-images/23/issueb.png/[/url]
However, using:

[code]
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

[/code]

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
[quote name='V-man' timestamp='1318346976' post='4871467']
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.

[/quote]

Just for clarity, this is the seconded image i'm rendering:
[url="http://imageshack.us/photo/my-images/836/towerz.png/"]http://imageshack.us...836/towerz.png/[/url].

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 [img]http://public.gamedev.net/public/style_emoticons/default/rolleyes.gif[/img]:
[code]

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;
[/code]

Share this post


Link to post
Share on other sites
Tried a few more things, mainly concerning alpha testing:
[code]

glEnable(GL_ALPHA_TEST);
glAlphaFunc(GL_GEQUAL, 0);
[/code]
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;
[code]

glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
[/code]
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:
[code]
glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
[/code]
But even that produces that same result as using the Alpha test, this "semi-transparent" image. *Screenshot below:
[url]http://imageshack.us/photo/my-images/269/issuew.png/[/url]

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.

Share this post


Link to post
Share on other sites
I knew that someone might have had a similar (almost near identical issue).
Seems that the alpha channel wasn't being brought over,
[url="http://www.gamedev.net/topic/518062-solved-sdl-png-transparency-with-opengl/"]http://www.gamedev.net/topic/518062-solved-sdl-png-transparency-with-opengl/[/url]

:). 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:
[url]http://imageshack.us/photo/my-images/836/newissue.png/[/url]

What should i be doing in-between the calls?

Share this post


Link to post
Share on other sites
You should have read the [url="http://www.opengl.org/resources/faq/technical/"]openGL FAQ[/url] linked earlier. Everything is written there clearly. About the difference between alpha testing and blending, and about textures and colors, [b]texture binding[/b], openGL states etc.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this