Transprency problem!

I draw four pictures in the same region(0,0,100,100) with different depth(Z) value on my screen. ie,

Picture A: depth value -30
Picture B: depth value -20
Picture C: depth value -10
Picture D: depth value 0

so picture A is on the bottom and picture D is on the top(picture B, C and D have alpha elements).

I enable the blend function as follow:

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

now i found a surprising thing: for the picture D is on the top, of cource i can see it, picture A is on the bottom, i can see it too(i think this is because i enabled the blend function and picture B, C and D are transparent), but i cannt see picture B and C(they are in the middle, between picture A and D). I dont know why, maybe this is because picture B and C have alpha elements?

Can anybody help me? Thanks a lot!

The depth buffer holds only one depth per pixel.
It works well for totally invisible or completely opaque stuff, but not very well with blending.

Render first opaque geometry, then for all blended stuff, render back to front, so that no depth test can prevent drawing pictures.

An advanced technique to handle this better is called “depth peeling”.

Hi ZbuffeR,

Thanks for your reply!

“render back to front, so that no depth test can prevent drawing pictures.”

If i render picture D first, would picture A, B and C be drawn or not? I think they would not be drawn for that depth test will fail, but i am not sure. I’ll try tomorrow, Thanks!

If D is opaque, then you will not be able to see what is behind. What is the problem ?

Hi ZbuffeR,

After changing the render order, it’s ok now. but i found another problem. when i rotate a 240240 picture, sometimes its sideline appears(some discontinuous white line) and other time doesnt appear. I try to replace the picture with a 256256 picture, it works fine. Both pictures are png format and their sidelines are transparent.

I dont know what causes this problem. Any suggestion would be aprreciated!