Opengl C++: How do I make parts of a texture transparent?

Question

I'm making a GUI class in my Opengl project. Currently what I am doing is I create a plane and then I bind a bmp texture to it. Is there a way to make parts of it transparent?

Right now this is what shows up (the white/blue box in the bottom left): http://imgur.com/OpxsBHi

I want the image to just show the blue area.

This is my code if you would like to take a look:

// Struct of bitmap file.
struct BitMapFile
{
   int sizeX;
   int sizeY;
   unsigned char *data;
};

// Routine to read a bitmap file.
// Works only for uncompressed bmp files of 24-bit color.
BitMapFile *getBMPData(string filename)
{
   BitMapFile *bmp = new BitMapFile;
   unsigned int size, offset, headerSize;

   // Read input file name.
   ifstream infile(filename.c_str(), ios::binary);

   // Get the starting point of the image data.
   infile.seekg(10);
   infile.read((char *) &offset, 4); 

   // Get the header size of the bitmap.
   infile.read((char *) &headerSize,4);

   // Get width and height values in the bitmap header.
   infile.seekg(18);
   infile.read( (char *) &bmp->sizeX, 4);
   infile.read( (char *) &bmp->sizeY, 4);

   // Allocate buffer for the image.
   size = bmp->sizeX * bmp->sizeY * 24;
   bmp->data = new unsigned char[size];

   // Read bitmap data.
   infile.seekg(offset);
   infile.read((char *) bmp->data , size);

   // Reverse color from bgr to rgb.
   int temp;
   for (int i = 0; i < size; i += 3)
   { 
      temp = bmp->data[i];
      bmp->data[i] = bmp->data[i+2];
      bmp->data[i+2] = temp;
   }

   return bmp;
}

class GUI
{
public:
    GUI();
    GUI(float x, float y, float width, float height, string textureName);

    void LoadTexture(string textureName);

    void Draw();

    float GetCenterX() { return m_CenterX; }
    float GetCenterY() { return m_CenterY; }
    void SetCenterX(float value) { m_CenterX = value; }
    void SetCenterY(float value) { m_CenterY = value; }

private:
    float m_CenterX, m_CenterY, m_Width, m_Height, m_Depth;
    unsigned int m_Texture[1];
    unsigned char m_Colour[3];
    string m_TextureName;

};

GUI::GUI(float x, float y, float width, float height, string textureName)
{
    m_CenterX = x;
    m_CenterY = y;
    m_Width = width;
    m_Height = height;
    m_Depth = 0.0; 
    m_TextureName = textureName;
    LoadTexture(textureName);
}

void GUI::Draw()
{
    // Turn on OpenGL texturing.
   glEnable(GL_TEXTURE_2D);

     // Activate a texture.
   glBindTexture(GL_TEXTURE_2D, m_Texture[0]); 

    // Map the texture onto a square polygon.
   glBegin(GL_POLYGON);
   glTexCoord2f(0.0, 0.0); glVertex3f(m_CenterX - m_Width, m_CenterY - m_Height, -5.0001);
   glTexCoord2f(1.0, 0.0); glVertex3f(m_CenterX + m_Width, m_CenterY - m_Height, -5.0001);
   glTexCoord2f(1.0, 1.0); glVertex3f(m_CenterX + m_Width, m_CenterY + m_Height, -5.0001);
   glTexCoord2f(0.0, 1.0); glVertex3f(m_CenterX - m_Width, m_CenterY + m_Height, -5.0001);
   glEnd();

    glDisable(GL_TEXTURE_2D);
}

void GUI::LoadTexture(string textureName)           
{
    // Create texture index array.
    glGenTextures(1, m_Texture); 

   // Local storage for bmp image data.
   BitMapFile *image[1];

   // Load the texture.
   image[0] = getBMPData(textureName);

   // Bind image to texture index[0]. 
   glBindTexture(GL_TEXTURE_2D, m_Texture[0]); 
   glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
   glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

   //used to make the image look blocky
   glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);
   glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);

   glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, image[0]->sizeX, image[0]->sizeY, 0, 
                GL_RGB, GL_UNSIGNED_BYTE, image[0]->data);
}

void drawScene(void)
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glLoadIdentity();

    GUI(-3,-3,1,1,0.3,"lifebar.bmp").Draw();

    glutSwapBuffers();
}

void setup(void) 
{
    glClearColor(0.0, 0.0, 0.0, 0.0); 
    // Specify how texture values combine with current surface color values.
    glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE); 

    glEnable(GL_BLEND);
}

Answer 1

Yes. Quickly and simply, you need:

1) Alpha channel describing pixel transparency: Easiest way is to load RGBA image.

2) Enable alpha blending:

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

Choose blending function depending on your needs.

EDIT: Notice, that when using RGBA images, change both texture and image format correctly (GL_RGB -> GL_RGBA):

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, image[0]->sizeX, image[0]->sizeY, 0, 
            GL_RGBA, GL_UNSIGNED_BYTE, image[0]->data);

EDIT2: I have code to create 1x1 bitmap from color value. I use this to create dummy color and normal maps for objects that do not have that. For your testing purposes, create texture from buffer like this (this is D source, you should be able to convert it to C++ quite easily):

this(vec4 color) // Create texture from color value
{
    ubyte[] buffer = [
        cast(ubyte)(color.r*255),
        cast(ubyte)(color.g*255),
        cast(ubyte)(color.b*255),
        cast(ubyte)(color.a*255)
    ];
    this(1, 1, buffer.ptr, GL_RGBA); // Width, height, image buffer, image format
}

Using this texture, when everything works well, you should be able to create arbitrary sized rectangles on screen. Change alpha values to see that blending works.

EDIT3: The code above written with C++-like pseudocode:

BitMapFile *createSinglePixelBitmap()
{
    static unsigned char pixel[4] = { 255, 0, 0, 125 }; // Red pixel, alpha ~ 50%
    BitMapFile *bitmap = new BitMapFile;

    bitmap.sizeX = 1;
    bitmap.sizeY = 1;
    bitmap.data = pixel;

    return bitmap;
}