1

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

the error

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

gman
  • 100,619
  • 31
  • 269
  • 393
mcanet
  • 59
  • 8

1 Answers1

0

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

JAre
  • 4,666
  • 3
  • 27
  • 45
  • I try but does not help your suggestion. Well I did in two ways in single butterfly rendering works fine transparency with alphaTest in material. But I am trying to make it work in a more efficient way of rendering that sends in one model 50 butterfly geometry. it means only one model is add to scene. Thanks for suggestion. – mcanet May 24 '14 at 17:15
  • @mcanet It's not a problem. You can also send the array of positions that you will update on camera transformation or to animate them. – JAre May 24 '14 at 17:18
  • Yes I am sending a texture that contain the 50 butterflies position that in vertex shader place all vertex in place. But transparency is not do it right because alphaTest does not work like expected. – mcanet May 24 '14 at 17:21
  • @mcanet geometry in your buffer will render in constant order so engine cant fix it for you. But you can depth-sort butterfly positions(indexes of data in texture) on the CPU then it will work. Or you can just use `discard` in GLSL http://www.opengl.org/sdk/docs/tutorials/ClockworkCoders/discard.php – JAre May 24 '14 at 18:10
  • Thanks so much!! It work using discard.`vec4 tcolor = texture2D(texture1, vUv); if (tcolor == vec4(0.0,0.0,0.0,0.0)) discard;` The only thing in the border have a little the color from background, it is not working the `texture.magFilter = THREE.NearestFilter; texture.minFilter = THREE.NearestFilter;` . Any idea what can happen? Screenshoot here:https://www.flickr.com/photos/mcanet/14260053745/ – mcanet May 24 '14 at 19:08
  • @mcanet probably some texture clipping issue try changing texture clip/repeat it looks like border lines caused by texture filtering. It cant get pixel data on the border so you can fix it by repeating texture so top pixel data will be extended with bottom and so on. Also you can inverse your discarding algorithm – JAre May 24 '14 at 19:51
  • This answer is basically the same issue http://stackoverflow.com/questions/23281898/native-webgl-particle-system-opacity-issue/23305649#23305649 – gman May 25 '14 at 05:29