three.js透明纹理和着色器材质

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