三个.js 粒子出现在场景中所有其他对象的后面答案

【问题标题】：THREE.js particles are appearing behind every other object in the scene三个.js 粒子出现在场景中所有其他对象的后面
【发布时间】：2018-08-19 21:00:13
【问题描述】：

我已将一个 GPU 粒子系统放入我的场景中，复制自此示例：

我注意到，在天空盒存在的情况下，粒子将永远不会呈现可见。同样，在移除天空盒后，粒子仅出现在场景中的宇宙飞船和小行星“后面”，而实际上一些粒子在位置上比宇宙飞船和小行星更靠近相机。 Screenshot

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

【问题讨论】：

看来粒子系统是一个Object3D，所以不能随便改变整个系统的渲染顺序。一些粒子应该在其他对象的后面，而一些粒子应该在其他对象的前面。如果普通的 Object3D 可以在其他对象的后面和前面都有顶点，为什么粒子系统不能？

标签： three.js

【解决方案1】：

有两个问题。一是粒子系统不一定是深度排序的。所以您可能需要明确控制渲染顺序...

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

详细了解 alpha 混合、z 缓冲、深度排序和 alpha 测试。

如果您只是使用加法混合（如该示例代码所示），那么您可能只需使用上述渲染顺序即可。

粒子系统不能轻易排序的原因是因为它们太多了，而且它们是由 GPU 管理的，所以对它们进行排序需要将数据从 GPU 拉回 CPU，排序（在 javascript )，然后重新上传，这会使系统速度慢几个数量级。

不过，您可以使用 z-buffering 和 alphaTest，但这会在某些粒子碰巧以不幸的顺序渲染时导致它们周围出现轻微的 alpha 边缘光晕...

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

【讨论】：

感谢您的洞察力。半条命 2（源引擎）之类的游戏是否使用 CPU 来模拟粒子？例如，在《半条命 2》中有非常逼真的火花效果在世界各地反弹。对于几百到几千个粒子的系统，只使用 CPU sprites 是否现实？
是的。对于小型系统，或需要与环境动态交互的系统，在 cpu 上运行它们就可以了。实际上，您实际上可以在 cpu 上更新相当数量的内容，但您只需要进行测试以监控什么他们产生的影响并决定是否值得。如果您希望在 GPU 粒子系统中进行一些有限的世界交互，有时您可以在启动系统时进行预碰撞，并找到系统附近最近的 3 个平面表面，然后将这些平面上传到您的粒子系统进行交互在 GPU 上。