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應用於所有粒子以及連接它們的邊，方法是鎖定（不更新）變換矩陣，直到渲染循環完成。