[OpenGL] Blending images with semi-transparency

Newbie & Debugging Questions
#1

Well, the idea i had is to make a Rectangle grow and shrink around the player, but the effect i wanted to produce needs a cool blending.
I have something working, but i cant get semi-transparent colors. I can get fully tranparent color but not images with that stainted glass effect.

Info: >Im using Slick2D
>I dont have any previous experience with OpenGL so… go easy on me please


aMap = new Image("res/aMap.png");// I do this up. Outside the main render function
{// The function itself
if(!applyLightThing){
 renderTilesAndObject();// Here i draw the image i want to blend
}else{
				   GL11.glEnable(GL11.GL_ALPHA_TEST);
			           GL11.glEnable(GL11.GL_BLEND_SRC); 
			           GL11.glBlendFunc( GL11.GL_SRC_ALPHA, GL11.GL_ONE_MINUS_SRC_ALPHA ); 
			           GL11.glAlphaFunc(GL11.GL_GREATER, 0.0f); 
			           aMap.drawCentered(center.x-xOffset+10,center.y-yOffset);//Here i draw the alpha-map
				   g.setDrawMode(Graphics.MODE_ALPHA_BLEND);
			           renderTilesAndObject();// Here i draw the image i want to blend
			           GL11.glDisable(GL11.GL_BLEND_SRC); 
			           GL11.glDisable(GL11.GL_ALPHA_TEST); 
			           g.setDrawMode(Graphics.MODE_NORMAL); 
}
}


The semi-transparent image


What the image looks like without the alpha map thing


What the image looks like with the alpha map thing


The alpha map itself

#2

What the hell is GL_BLEND_SRC? Don’t you mean GL_BLEND?

EDIT: Also, the alpha test isn’t what you want in this case. The alpha test is used to discard pixels completely that are below some threshold to avoid writing to the depth buffer.

#3

Could you explain more in-depth? Im really clueless =P
EDIT: I removed what you said, and gives the exact same result

#4

I’m not sure exactly what you’re trying to accomplish, but I can tell that you have some problems regardless of what you want to do. Please explain exactly what you’re expecting to get. Anyway, here goes.

glEnable(GL_ALPHA_TEST) is used to enable the alpha test. The alpha test completely discards pixels that do not pass the alpha test, which is set using glAlphaFunc(). glAlphaFunc(GL_GREATER, 0.0f) makes all pixels with alpha > 0.0 pass, which essentially is worthless as it changes absolutely nothing. You can remove line 6, 9 and 14 to simplify the code.

glEnable(GL_BLEND_SRC) is not a valid parameter to glEnable(). You’re getting an OpenGL error here that you’re not querying. You should take some time to set up a proper debug callback and create a debug context in OpenGL to catch these simple errors more easily.


//Do this when you create your Display:
Display.create(new PixelFormat(), new ContextAttribs().withDebug(true)); //The .withDebug(true) is the important part)
ARBDebugOutput.glDebugMessageCallbackARB(new ARBDebugOutputCallback());

If you add this code, you should see the following error each time you call glEnable(GL_BLEND_SRC):

The enum you’re looking for is simply GL_BLEND.

#5

The effect that im trying to do is an alpha map blend. As you can see, the tiles get darker. And the square/rectangle does so. But i want it with the transparency that has on the image “What the image looks like without the alpha map thing”

#6

So… Where the alpha map is black, you want the screen to be visible, and where the alpha map is white you want to get the black outline?

You can accomplish that by rendering everything as usual, then at the end overlaying the alpha map on top of it. The blending function you’re looking for is one that takes (1.0 - color of the alpha map) and multiplies it with color that already is on the screen. This can be accomplished with the following code:

glEnable(GL_BLEND);
glBlendFunc(GL_ZERO, GL_ONE_MINUS_SRC_COLOR);

PS: Pro-tip: Use [icode]import static org.lwjgl.opengl.GL11.*;[/icode] to avoid having to write “GL11.” before each OpenGL command and enum.

#7

Tweaked what you said, it stills dont respect the alpha value of the image itself

#8

Does the image really have a correct alpha value? If so, then what you want is not GL_ONE_MINUS_SRC_COLOR but GL_ONE_MINUS_SRC_ALPHA.

#9

As you can see on the pictures, the one that has the rectangles around (The alpha-map thing) Isnt tranparent at all
The idea is to create this effect, the object gets darker as far it gets until is totally black. But when the effect is applied, the transparency wont work, every pixel in the image, has a alpha value of 255 instead of something like 95.

What the effect looks like: