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

Question

我使用圆形纹理渲染粒子：

圆圈有透明像素。我使用ShaderMaterial和BufferGeometry为每个节点提供自定义尺寸和颜色。但是我坚持使用正确的z-index渲染。在下图中：

白色粒子离相机最近，青色（0x00ffff）是第二个，右上角的芙蓉色（0xC3206F看起来是粉红色的）是最远的。

如您所见，订单不正确。理想情况下，白色圆圈应完全覆盖青色，并部分覆盖木槿。如果我为depthTest: true设置ShaderMaterial，则纹理的透明区域会变为实体：

以下是完整的源代码：http://jsbin.com/mikimifipi/edit?js,output

我可能会错过与着色器混合或搞砸的东西。你能帮忙吗？

Answer 1

1. 粒子按BufferGeometry指定的顺序呈现。

2. 如果depthTest = true，材料没有像你声称的那样变得坚固 - 它后面的粒子（以及稍后渲染）根本就不会被渲染。

3. 您可以通过设置if ( tColor.a < 0.5 ) discard;。

来改进一些工件

4. 您可能不应该通过alpha预先对片段着色器输出RGB进行预乘。在three.js中使用默认的alpha混合时，这不是正确的做法。这也是导致环出现在白盘周围的原因。

three.js r.71