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

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

javascript three.js

Javascript three.js透明纹理和着色器材质,javascript,three.js,Javascript,Three.js,我正在使用圆形纹理渲染粒子：圆具有透明像素。我正在使用ShaderMaterial和BufferGeometry为每个节点提供自定义大小和颜色。但是，我仍然坚持正确的z索引渲染。在下图中：白色粒子离相机最近，青色（0x00ffff）次之，右上角的芙蓉色（0xC3206F看起来粉红色）最远如你所见，顺序不正确。理想情况下，白色圆圈应完全覆盖青色，部分覆盖芙蓉。如果我为ShaderMaterial设置depthTest:true，纹理的透明区域将变为实心：以下是完整的源代码：我可能在

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

圆具有透明像素。我正在使用

ShaderMaterial

和

BufferGeometry

为每个节点提供自定义大小和颜色。但是，我仍然坚持正确的z索引渲染。在下图中：

白色粒子离相机最近，青色（

0x00ffff

）次之，右上角的芙蓉色（

0xC3206F

看起来粉红色）最远

如你所见，顺序不正确。理想情况下，白色圆圈应完全覆盖青色，部分覆盖芙蓉。如果我为

ShaderMaterial

设置

depthTest:true

，纹理的透明区域将变为实心：

以下是完整的源代码：

我可能在混合方面遗漏了一些东西，或者在着色器方面搞砸了。你能帮忙吗

粒子将按照

缓冲几何体

指定的顺序渲染

如果

depthTest=true

，则材质不会像您所说的那样变为实体——其后面的粒子（以及稍后渲染的粒子）根本不会被渲染

您可以通过设置

if（tColor.a<0.5）discard来改进某些工件


您可能不应该将片段着色器输出RGB预乘为alpha。在three.js中使用默认alpha混合时，这不是正确的做法。这也是导致光环出现在白色圆盘周围的原因
three.js r.71
：）完成了！你的评论很有用谢谢！他们正是我需要的。