Three.js ParticleSystem闪烁着大量数据

Question

背景故事：我创建了一个基于Three.js的3D图形库。类似于sigma.js，但3D。它被称为图龙和来源可以找到here。我使用Three.js，并使用表示图中单个节点的单个粒子。

这是我必须处理的第一个任务：给定任意一组点（每个点都包含X，Y，Z坐标），确定最佳摄像机位置（X，Y，Z），可以查看所有点在图中。

我最初的解决方案（我们称之为解决方案1）包括计算所有点的边界球，然后将球体缩放为围绕点0,0,0的半径为5的球体。由于点将保证始终落在该区域，因此我可以为相机设置一个静态位置（假设FOV是静态的）并且数据始终可见。这很好，但它要么需要改变用户指定的点坐标，要么复制所有的点，这两点都不是很好。

我的新解决方案（我们称之为解决方案2）不涉及输入数据的坐标，而只是定位相机以匹配数据。我遇到了这个解决方案的问题。出于某种原因，当处理大量数据时，粒子在位于其他粒子的前面/后面时似乎闪烁。

以下是两种解决方案的示例。确保走动图表看效果：

• Solution 1
• Solution 2

你可以看到差异的代码here

让我知道，如果您有任何见解关于如何摆脱闪烁。谢谢！

Answer 1

事实证明，我的相机的near值太低，far的值太高，导致“z战斗”。通过缩小我的数据集中的这些值，问题就消失了。由于我的数据集是用户依赖的，我需要确定一个算法来动态生成这些值。

Answer 2

我注意到，在溶胶＃2中闪烁只发生在相机移动时。一种可能的原因是，当相机位置快速变化时，不同的变换会应用于不同的粒子。因此，如果摄像机在一个时间段内从X移动到X + DELTAX，则其中一组粒子将获得X的相机变换，而其他粒子将获得X + DELTAX的变换。

如果您将渲染与用户交互分开，则应该解决该问题，并假设这是问题。这意味着您应该将same transform应用于所有粒子以及连接它们的边，方法是锁定（不更新）变换矩阵，直到渲染循环完成。