本文首发于 NebulaGraph 公众号
前言图数据可视化是古代 Web 可视化技术中比拟常见的一种展现形式，NebulaGraph Explorer 作为基于 NebulaGraph 的可视化产品，在可视化图数据畛域，尤其是在图形渲染性能等畛域积攒了较丰盛的教训。本文将系统性分享 NebulaGraph Explorer 在 3D 图数据展现上的一些利用。以下演示皆可在 https://explorer.nebula-graph… 在线试用。二维力导图目前业界罕用的图数据展现都采纳 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 畛域的图布局映射图数据坐标到渲染中减少边的相干交互行为
_
原文链接：https://www.nebula-graph.com….
交换图数据库技术？退出 NebulaGraph 交换群请先填写下你的 NebulaGraph 名片，NebulaGraph 小助手会拉你进群~~
NebulaGraph 的开源地址：https://github.com/vesoft-inc… 感觉应用体验还不错的话，给咱们的 GitHub 点个 ❤️ 激励下开源路上的咱们呢~