Z-buffer issue with BufferGeometry in ParticleSystem

Question

In my application I'm having troubles with the z-buffer. I have a ParticleSystem in which the dots have a texture to look like spheres. But there are two problems which I can't solve at the same time....

Either the spheres were sorted right in z-buffer but aren't transparent or they are transparent but not right sorted!

Please have a look at my JSfiddle. (based on this example from mrdoob)

In the original example all looks well. But as you can see in my fiddle, the texture is not transparent, so hiding parts of the particles behind it. I only changed from Geometry to BufferGeometry, because in my application I have to use this to avoid perfomance issues. You can switch between these two by changing my comments in the fiddle. And by switching between Geometry and BufferGeometry you can see that the z-buffer is breaking.

Somewhere in the internet I found this "solution":

depthWrite : false

which I added to the material. Then the particles look great but the z-buffer is not correct. This is driving me crazy... anyway I found out that my type of Geometry is the problem.

So why is mrdoob's example not working with BufferGeometry? What can I do to get right sorted AND transparent particles in my system?

Answer 1

You are confused. The texture is transparent, and remains so when switching to BufferGeometry.

What is happening, is that with BufferGeometry, the particles are not rendered in sorted order -- they are rendered in the order you specify in the buffer.

If you want to use BufferGeometry, you can set

material.alphaTest = 0.5.

Then, in your case, things should look fine.

three.js r.60