three.js transparent texture and shader material

Question

I'm using a circle texture to render particles:

The circle has transparent pixels. I'm using ShaderMaterial and BufferGeometry to provide custom size, color for each node. However I'm stuck with proper z-index rendering. In the image below:

The white particle is the nearest to the camera, the cyan (0x00ffff) is the second, and hibiscus color on the top right (0xC3206F looks pinkish) is the farthest.

As you can see the order is not correct. Ideally white circle should fully override cyan, and partially cover hibiscus. If I set depthTest: true for ShaderMaterial, the transparent regions of the texture become solid:

Here is the full source code: http://jsbin.com/mikimifipi/edit?js,output

I'm probably missing something with blending or messed up with the shaders. Can you please help?

Answer 1

1. The particles are rendered in the order specified by BufferGeometry.

2. If depthTest = true, the material is not becoming solid, as you claim -- the particles behind it (and rendered later) are simply not being rendered at all.

3. You can improve some artifacts by setting if ( tColor.a < 0.5 ) discard;.

4. You likely should not be premultiplying your fragment shader output RGB by alpha. That is not the correct thing to do when using the default alpha-blending in three.js. It is also is what is causing the ring to appear around the white disk.

three.js r.71