THREE.js粒子出现在场景中的每个其他对象后面

Question

我已经在我的场景中放置了一个GPU粒子系统，从这个例子中复制过来：

https://threejs.org/examples/?q=particle#webgl_gpu_particle_system

我注意到，当天空盒存在时，粒子永远不会呈现出来。类似地，在移除天空盒的情况下，粒子仅出现在场景中的太空飞船和小行星的“后面”，而实际上一些粒子在位置上比太空船和小行星更靠近相机。 Screenshot

如何在3D空间中正常显示粒子，并进行适当的分层？

Answer 1

有两个问题。一个是粒子系统没有必要进行深度排序..所以你可能需要明确地控制渲染顺序......

stackoverflow.com/questions/15514274/...

第二个问题通常是透明（alpha混合）对象。

特别是阅读alpha混合，z缓冲，深度排序和alpha测试。

如果你只是使用加法混合，就像那个示例代码一样，那么你可能只对上面描述的渲染顺序很好。

粒子系统不能轻易排序的原因是因为它们很多，并且它们由GPU管理，所以对它们进行排序需要将数据从GPU拉回到CPU，排序（在javascript中） ），然后重新上传，这将使系统慢许多个数量级。

然而，你可以做的是使用z-buffering和alphaTest，但当它们碰巧以不幸的顺序渲染时，这会导致一些粒子周围出现轻微的α条纹晕......

由于粒子太小，这可能无关紧要，但如果你开始扩展系统以使用不同形状的较大粒子精灵，它可能会成为一个问题。