Alpha blending / transperency of a texture bound to quad - java lwjgl slick

Question

I need someone to help me with this. I can't really figure out how the alpha channel or blending works. The Image is in .bmp format, it loads perfectly. But I want a specific color to be transparent, in paint that color is R255xG0xB255. I've been searching for similar topics, but everything I found or tried just seems to mess stuff up, like give me a full black screen or make everything have a magenta touch... Everything else works just fine with my code... Should I maybe switch to .png? could that solve the issue? does it have any pros or cons if I use png or bmp?

        // Initialization Code OpenGL
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glOrtho(0, HEIGHT, WIDTH, 0, 1, -1);
    glMatrixMode(GL_MODELVIEW);
    glEnable(GL_TEXTURE_2D);

    glClearColor(1.0f, 0.0f, 1.0f, 0.0f); 
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);


    while (!Display.isCloseRequested()) {
        // Render
        glClear(GL_COLOR_BUFFER_BIT);

        this.drawMapToScreen();
        this.drawCreatureToScreen();

        Display.update();
        Display.sync(60);
    }

    Display.destroy();
}

private void drawCreatureToScreen() {
    Texture tex3 = SpriteLoader.loadTexture("player");
    Color.magenta.bind();
    tex3.bind();
    glBegin(GL_QUADS);
    glTexCoord2f(0, 0);
    glVertex2i((HEIGHT-32)/2,(WIDTH-32)/2);
    glTexCoord2f(1, 0);     
    glVertex2i((HEIGHT-32)/2 +32,(WIDTH-32)/2);
    glTexCoord2f(1, 1);
    glVertex2i((HEIGHT-32)/2 +32,(WIDTH-32)/2 +32);
    glTexCoord2f(0, 1);
    glVertex2i((HEIGHT-32)/2,(WIDTH-32)/2 +32);
    glEnd();            

}

SDLeffler SDLeffler · Accepted Answer · 2014-03-19T01:03:18

What are looking to do is that when your color is 1.0f, 0.0f, 1.0f (in the eyes of OpenGL: full red, no green, full blue) have the alpha (transparency) channel be zero, so that the pixel is drawn completely transparent. Unfortunately, there is no way to do this in OpenGL, unless you use shaders, and believe me using shaders is far messier than the solution I propose: doing "pre-multiplied alpha" in your image editor. What this means: it doesn't depend on which format you use - .png or .bmp are both fine, and they both support an alpha channel. Alpha is transparency; in OpenGL, you'll be dealing with floats a lot, so I'll use floats here. Alpha is the fourth color channel; we have Red, Green, Blue, and then Alpha. Alpha controls transparency (as a float) by being multiplied by the other channels: if alpha is 0.0f, then that color is fully transparent, but if alpha is 1.0f, it is fully opaque. To sum up: In your editor, you must make sure that the area you want transparent is transparent in the editor. For alpha blending, which still must be enabled for any transparency whatsoever: the generally preferred blend mode is as follows:

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

Now, blending is a technique for making objects appear transparent, among other things. In your case, you'll want to use the blend function above: use glDisable(GL_BLEND) to disable blending from occurring after enabling it. The blend function above essentially mixes the preexisting colors and colors to be rendered in such a way that an object rendered overlapping another, after said other, makes it appear that the "top" and most recently rendered object is transparent relative to the "bottom" object.

TL;DR:

Make sure the area you want transparent is transparent in your image editor. OpenGL cannot make specific colors have alpha values of 0.0f unless you use a needlessly complex shader.
Use the blending setup glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); to enable blending. Make sure the top object is rendered after the bottom object.

Alpha blending / transperency of a texture bound to quad - java lwjgl slick

1 Answers