How can I load a .png image with transparency in it, using SDL, OpenGL and C++?

Question

I am trying to load and display a .png image that has transparency in it. The whole image is not transparent, it's just a picture of a bag I have cropped in Photoshop, with transparency around it. I need to load it to my program that uses SDL and OpenGL on C++, but when I try it, instead of it displaying correctly, the space around the bag in the image is "fuzzy" (I can only put it that way). What I'm saying is, the transparency does not work.

This is my code so far:

The init() method:

SDL_Surface *surface;
GLenum texture_format;
GLint  nOfColors;

if ( (surface = IMG_Load("bag.png")) ) { 

    // Check that the image's width is a power of 2
    if ( (surface->w & (surface->w - 1)) != 0 ) {
        printf("warning: bag.png's width is not a power of 2\n");
    }

    // Also check if the height is a power of 2
    if ( (surface->h & (surface->h - 1)) != 0 ) {
        printf("warning: bag.png's height is not a power of 2\n");
    }

        // get the number of channels in the SDL surface
        nOfColors = surface->format->BytesPerPixel;
        if (nOfColors == 4)     // contains an alpha channel
        {
                if (surface->format->Rmask == 0x000000ff)
                        texture_format = GL_RGBA;
                //else
                        //texture_format = GL_BGRA;
        } else if (nOfColors == 3)     // no alpha channel
        {
                if (surface->format->Rmask == 0x000000ff)
                        texture_format = GL_RGB;
                //else
                        //texture_format = GL_BGR;
        } else {
                printf("warning: the image is not truecolor..  this will probably break\n");
                // this error should not go unhandled
        }

    // Have OpenGL generate a texture object handle for us
    glGenTextures( 1, &texture );

    // Bind the texture object
    glBindTexture( GL_TEXTURE_2D, texture );

    // Set the texture's stretching properties
        glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
        glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );

    // Edit the texture object's image data using the information SDL_Surface gives us
    glTexImage2D( GL_TEXTURE_2D, 0, nOfColors, surface->w, surface->h, 0,
                      texture_format, GL_UNSIGNED_BYTE, surface->pixels );
} 
else {
    printf("SDL could not load bag.png: %s\n", SDL_GetError());
    SDL_Quit();
    //return 1;
}    

// Free the SDL_Surface only if it was successfully created
if ( surface ) { 
    SDL_FreeSurface( surface );
}

The drawScene() method:

float xMin, xMax, yMin, yMax;

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glMatrixMode(GL_MODELVIEW);
glLoadIdentity();

glTranslatef(0.0f, 0.0f, -6.0f);

glEnable(GL_TEXTURE_2D);

glBindTexture(GL_TEXTURE_2D, texture); 
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); // Use nice (linear) scaling 
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); // Use nice (linear) scaling

glBegin (GL_QUADS);
glNormal3f(0.0f, 0.0f, 1.0f);
if (texturesOn) glTexCoord2f(0.0f, 1.0f);
glVertex3f(4.3f, -3.5f, 0.0f); //bottom left

if (texturesOn) glTexCoord2f(1.0f, 1.0f);
glVertex3f(5.3f, -3.5f, 0.0f); //bottom right

if (texturesOn) glTexCoord2f(1.0f, 0.0f);
glVertex3f(5.3f, -4.5f, 0.0f); //top right

if (texturesOn) glTexCoord2f(0.0f, 0.0f);
glVertex3f(4.3f, -4.5f, 0.0f); //top left
glEnd();

glDisable(GL_TEXTURE_2D);

glutSwapBuffers();

Answer 1

You need to enable blending for transparency to work:

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

Also, you should check that the loaded PNG file contains an alpha channel.