Render transparencies correctly with z-buffer

Question

I have a problem with transparencies and z-buffer. The transparency of one plane hide the other plane.

The butterflies are simple geometry basically two planes (4 triangles). I render 50 butterflies at ones because pass positions with a texture in vertex shader. The texture is a transparent png. The alphaTest don't work (try 0.5 and other values) to material that have the transparent set in true. Also try all kind blending without good results. And depthWrite = false is not helping, because then alpha is not but the problem is depth sorting makes a mess.

If I render one butterfly per call without shader then alpha test works fine. You can see error here

I am using three.js version 67. If someone can help me with that it would be much appreciated :)

Answer 1

In this case it looks like you can simply Discarding Fragments which are on the invisible part of the wing.