Three.js: Png texture with alpha uses renderer bg instead of material behind it

[Malgalad]

Hi!
The problem is almost fully described in the title: when I use textures with transparency, edges of them render like there's no other mesh behind them, even if there is. Here are some examples, I marked in yellow problematic places:
http://ipic.su/img/img3/fs/art1.1330265314.png
http://ipic.su/img/img3/fs/art2.1330265475.png

[mrdoob]

Have you tried with transparent: true?

[alteredq]

Try alphaTest: 0.5 material parameter

[Malgalad]

Hm-m, I use my own shaders because I need to color parts of the objects defined by the mask map. I've added alphaTest, and I thought transparent is smth passed 'by default'... However, even if I apply MeshBasicMaterial with alphaTest: 0.5 and transparent: true, it makes no difference.
But, yesterday I finally added FXAA, and it somehow hides such artifacts, so it's not th 'first importance issue' now.

[Malgalad]

Oh, my friend found the solution. I'd like you to modify alphaTest like that:

#ifdef ALPHATEST
    if ( gl_FragColor.a < ALPHATEST ) 
        discard;
    else
        gl_FragColor.a = 1.0;
#endif

[mrdoob]

@alteredq Does the suggestion make sense to you? I can implement if it does.

[alteredq]

I don't know, I guess it would help with some use cases but mess with others?

Trouble is that this would completely throw away the original alpha for pixels which pass the alpha test.

I think simply setting alphaTest to 1 should achieve similar effect.

[Malgalad]

Well, it does not. Because with alphaTest = 1 we lose smoothness of opaque-non opaque gradient on the edges of texture. I don't push you to add this to code, but if anyone will suffer from these problem in the future, you have the solution.

[grahamwallis]

I know this is an old thread but I just wanted to add a comment for anyone else coming to this.
I spent the whole day trying to solve a problem with semi-transparent objects that (due to requirements of my application) can be added to the scene in arbitrary orders and overlap and viewed from different angles. My problem was the transparent portions of my textures were preventing more distant objects from showing through as those more distant objects were yet to be rendered - i.e. I was picking up background (or other objects) in the depth buffer. Thanks to this thread and to the suggestion from @Malgalad I think it is now working properly. The solution for me was to modify my fragmentShader by adding a line to test the final (computed) gl_FragColor and discard the fragment if its alpha is less than threshold (0.5).