圖數據 3D 可視化在 Explorer 中的應用
本文首發於 NebulaGraph 公眾號
前言圖數據可視化是現代 Web 可視化技術中比較常見的一種展示方式，NebulaGraph Explorer 作為基於 NebulaGraph 的可視化產品，在可視化圖數據領域，尤其是在圖形渲染性能等領域積累了較豐富的經驗。本文將系統性分享 NebulaGraph Explorer 在 3D 圖數據展示上的一些應用。以下演示皆可在 //explorer.nebula-graph.com.cn/explorer 在線試用。二維力導圖目前業界常用的圖數據展示都採用 2D 力導圖的邏輯，如下圖所示：
這種二維化的可視化模式，在圖形語義上對物理世界數據進行了降維，通過點、邊形狀來描述實體和關係，符合人腦的習慣性直覺，簡化了圖數據的理解成本。D3-force，G6 等所採用的就是這樣一種布局模式，也是大部分圖類場景的基礎演算法。其布局的力導演算法則是大部分基於經典的 Fruchterman 布局演算法，模擬彈簧的胡克定律和物體的萬有引力，製造相互牽引和排斥的力演算法，再通過模擬冷卻收斂，最終得到減少交叉、步長等距、點分離獨立 的二維圖布局。這也是可視化的基本訴求，即能夠無遮擋地清晰查看各類繁雜的數據。然而，2D 場景並不一定適用所有場景，主要有以下原因：空間資訊展示部分數據具有原生的空間坐標資訊，且這部分資訊也不可降維，如分子結構、經緯度的球坐標展示、具有層級高度的數據等。這類數據通過 3D 展示會更符合人的習慣和直覺。大數據量布局展示在較大的數據集情況下，由於 2D 沒有深度，導致所有的數據需要被平鋪在畫布上，可以想像一個西瓜的所有西瓜籽平鋪的情況，佔地面積要遠遠大於西瓜本身。因此這種情況需要將數據本身資訊可視化還原，就需要 3D 可視化技術來實現了。
圖數據 3D 可視化圖數據的 3D 可視化在邏輯上和 2D 比較像，我們一般依然是採用 2D 的 Fruchterman 力導圖邏輯，也依然需要盡量避免交叉遮擋，但維度升了一維，邏輯複雜的也上升不少。因此我們重新自研了 3D 力導向演算法來獲得更好的效果和性能。可以看到下圖同樣的複雜網路關係中，3D 顯示則會有較為明確的關係展示。提供不同角度的圖結構
對於高密度的點邊，可以像 3D 遊戲一樣，將視角轉移，切換，觀察到不同角度的圖數據結構
相同的數據也可以有完全不同的可視化效果。提供鳥瞰視角
在 3D 鳥瞰情況下，可以將點再空間方向散射開，同樣數據量下，畫布能清晰的標識出節點團簇，也可以輕鬆的識別出超級節點。通過螢幕內的整體顏色分布，能大致看出來整個可視化圖中的節點 Tag 佔比。身臨其境的體驗感
用戶可以再整個空間內搜索節點，直接定位到對應節點上，查看相關連的其餘節點數據。高性能可視化目前我們的 3D 可視化可以支援 10w 點，10w 邊同時渲染。渲染數量是由渲染性能，布局計算性能，記憶體佔用，網路速率，NebulaGraph 性能等各方面因素綜合決定的，上限主要由硬體和外部條件限制(網速，客戶度機器配置，NebulaGraph機器性能)決定，下限則是由圖形渲染及布局演算法決定。我們為了提高下限，自研了圖形渲染和布局演算法部分，得到了較好的效果。海量數據渲染WebGL 是 web 端直接利用 GPU 進行渲染的方式。我們為了提高每一幀的圖形渲染能力，在 3D 模式下採用 WebGL 來進行渲染。並且支援高低性能模式：
分別通過原生 shader 和 Mesh 繪製，用戶可以根據自己電腦終端的硬體情況選擇對應的渲染模式。其中高性能模式下，我們通過自研優化的 shader，利用 GPU 並行計算的能力，將一些渲染效果放到著色器中計算，極大的提高了渲染速率，讓渲染性能不再成為瓶頸。這也基本上達到了目前瀏覽器的極限。快速演算法布局在圖布局演算法方面，我們用八叉樹優化了力導過程的算力消耗，並且針對使用 LinLog 模型對超級點進行了受力優化，由於演算法性能消耗比較大，我們使用 Golang 對八叉樹演算法和力導演算法進行了重寫，最終可以支援在 20w 圖元的情況下，預熱完成後穩定在 1s 以下完成一次運算。
另外為了圖布局計算不影響前台頁面渲染，我們利用多個 worker 進程，將不同的 CPU 任務分布下去，這樣木桶的各個短板不會影響渲染和交互的長板，用戶在布局的時候依然可以靈活的操作。利用上述的一些手段，我們將 3D 可視化的性能幾乎提升到瀏覽器極限，對於一些不大的圖空間數據，完全可以一次性載入分析。後續方向由於 3D 模式的開發複雜度較 2D 提升較多，因此目前僅用於一種特殊的圖數據展示方式。在未來，我們會綜合實際的業務場景，進行更多的體驗優化。時序及 GIS 領域的圖布局映射圖數據坐標到渲染中增加邊的相關交互行為
原文鏈接：//www.nebula-graph.com.cn/posts/dag-controller
交流圖資料庫技術？加入 NebulaGraph 交流群請先填寫下你的 NebulaGraph 名片，NebulaGraph 小助手會拉你進群~~
