three.js - Three.js透明点云没有正确融合点

Question

我正在尝试使用THREE.Points为数据可视化创建点云。我想让这些点透明，以便查看者可以了解这些点在特定区域中的密集程度。我正在使用球体几何和添加剂混合进行测试。

问题在于，显示为正方形的某些点与它们前面的点正确融合，而其他点则被它们前面的点隐藏。出于某种原因，混合在球体的下半部分似乎无法正常工作，这很奇怪，因为我没有使用任何灯光，而且它应该是对称的。我不确定为什么会发生这种情况或如何解决它。

链接到代码草图：https ://glitch.com/edit/#!/cloudy-chambray-leotard?path=main.js%3A22%3A0

直视球体：

从上往下看时，似乎也存在左右对称问题：

从球体底部向上看，我得到了想要的结果：

标签： three.jstransparencypoint-cloudsblending

Answer 1

WebGL 的透明度很棘手，因为透明对象写入深度图，并且渲染器假定第一个精灵后面的其他精灵是隐藏的，因此它会跳过绘制它们。在这种情况下，绘制顺序非常重要，每次旋转相机时从后向前排列精灵将是一场噩梦。

解决问题的最简单方法是设置depthWrite: false材质，这样每个精灵都不会写入深度图。然后不管他们在前面还是后面，他们都会被吸引。