怎么做3D可视化?NebulaGraph Explorer 的图数据库可视化实践告诉你答案
前言
图数据可视化是现代 Web 可视化技术中比较常见的一种展示方式,NebulaGraph Explorer 作为基于 NebulaGraph 的可视化产品,在可视化图数据领域积累了许多经验,尤其是在图形渲染性能等领域。本文将系统性分享下 NebulaGraph Explorer 在 3D 图数据展示上的一些应用。以下演示皆可以在 https://explorer.nebula-graph.com.cn/explorer 在线试用。
二维力导图
目前业界常用的图数据展示都采用 2D 力导图的逻辑,如下图所示:
这种二维化的可视化模式,在图形语义上对物理世界数据进行了降维,通过点、边形状来描述实体和关系,符合人脑的习惯性直觉,简化了图数据的理解成本。D3-force,G6 等所采用的就是这样一种布局模式,也是大部分图类场景的基础算法。
其布局的力导算法则是大部分基于经典的 Fruchterman 布局算法,模拟弹簧的胡克定律和物体的万有引力,制造相互牵引和排斥的力算法,再通过模拟冷却收敛,最终得到减少交叉、步长等距、点分离独立的二维图布局。这也是可视化的基本诉求,即能够无遮挡地清晰查看各类繁杂的数据。
然而,2D 场景并不一定适用所有场景,主要有以下原因:
空间信息展示
部分数据具有原生的空间坐标信息,且这部分信息也不可降维,如分子结构、经纬度的球坐标展示、具有层级高度的数据等。这类数据通过 3D 展示会更符合人的习惯和直觉。
大数据量布局展示
在较大的数据集情况下,由于 2D 没有深度,导致所有的数据需要被平铺在画布上,可以想象一个西瓜的所有西瓜籽平铺的情况,占地面积要远远大于西瓜本身。因此这种情况需要将数据本身信息可视化还原,就需要 3D 可视化技术来实现了。
图数据 3D 可视化
图数据的 3D 可视化在逻辑上和 2D 比较像,我们一般依然是采用 2D 的 Fruchterman 力导图逻辑,也依然需要尽量避免交叉遮挡,但维度升了一维,逻辑复杂度也上升不少。因此我们重新自研了 3D 力导向算法来获得更好的效果和性能。可以看到下图同样的复杂网络关系中,3D 显示则会有较为明确的关系展示。
提供不同角度的图结构
对于高密度的点边,可以像 3D 游戏一样,将视角转移、切换,观察到不同角度的图数据结构。
相同的数据也可以有完全不同的可视化效果。
提供鸟瞰视角
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YdWKzflA-1672383241171)(null)]
在 3D 鸟瞰情况下,可以将点在空间方向散射开,同样数据量下,画布能清晰的标识出节点团簇,也可以轻松的识别出超级节点。
通过屏幕内的整体颜色分布,能大致看出来整个可视化图中的节点 Tag 占比。
身临其境的体验感
用户可以在整个空间内搜索节点,直接定位到对应节点上,查看相关联的其余节点数据。上图为视频生成的 gif 图,画面切换会略有卡顿,如果你直接使用 NebulaGraph Explorer 进行探索的话会更流畅。
高性能可视化
目前我们的 3D 可视化可以支持 10w 点,10w 边同时渲染。渲染数量是由渲染性能、布局计算性能、内存占用、网络速率、NebulaGraph 性能等各方面因素综合决定的,上限主要由硬件和外部条件限制(网速,客户端机器配置,NebulaGraph 机器性能)决定,下限则是由图形渲染及布局算法决定。为了进一步提高下限,我们自研了图形渲染和布局算法部分,得到了较好的效果。
海量数据渲染
WebGL 是 web 端直接利用 GPU 进行渲染的方式。我们为了提高每一帧的图形渲染能力,在 3D 模式下采用 WebGL 来进行渲染。并且支持高低性能模式:
分别通过原生 Shader 和 Mesh 绘制,用户可以根据自己电脑终端的硬件情况选择对应的渲染模式。
其中高性能模式下,我们通过自研优化的 Shader,利用 GPU 并行计算的能力,将一些渲染效果放到着色器中计算,极大地提高了渲染速率,让渲染性能不再成为瓶颈。这也基本上达到了目前浏览器的极限。
快速算法布局
在图布局算法方面,我们用八叉树优化了力导过程的算力消耗,并且针对使用 LinLog 模型对超级点进行了受力优化。由于算法性能消耗比较大,我们使用 Golang 对八叉树算法和力导算法进行了重写,最终可以支持在 20w 图元的情况下,预热完成后稳定在 1s 以下完成一次运算。
另外为了图布局计算不影响前台页面渲染,我们利用多个 worker 进程,将不同的 CPU 任务分布下去,这样木桶的各个短板不会影响渲染和交互的长板,用户在布局的时候依然可以灵活的操作。
利用上述的一些手段,我们将 3D 可视化的性能几乎提升到浏览器极限,而对于一些不大的图空间数据,完全可以一次性载入分析。
后续方向
由于 3D 模式的开发复杂度较 2D 提升较多,因此目前仅用于一种特殊的图数据展示方式,在未来,会综合实际的业务场景,进行更多的体验优化。
时序及 GIS 领域的图布局
映射图数据坐标到渲染中
增加边的相关交互行为
谢谢你读完本文 (///▽///)
想来近距离体验 NebulaGraph Explorer 的酷炫流畅吗?现在可以用用 NebulaGraph Cloud 来搭建自己的图数据系统哟,云上 NebulaGraph 搭载免费的图探索工具 Explorer 点击拖拽搞定线上业务吧~ NebulaGraph 阿里云计算巢现 30 天免费使用中,点击链接来用用图数据库吧~
想看源码的小伙伴可以前往 GitHub 阅读、使用、(з)-☆ star 它 -> GitHub;和其他的 NebulaGraph 用户一起交流图数据库技术和应用技能,留下「你的名片」一起玩耍呢~
怎么做3D可视化?NebulaGraph Explorer 的图数据库可视化实践告诉你答案相关推荐
- 使用 Neo4j 图数据库可视化(网络安全)知识图谱
目录 一.安装 Java 环境 1.下载 Java 包并解压到指定目录下 2.配置环境变量 a)添加系统变量 CLASS_PATH 和 JAVA_HOME b) 在已有的系统变量 Path 中添加( ...
- neo4j图数据库安装实践与报错解决
在图数据库领域中neo4j应该是使用的非常广泛的一种了,之前研究生期间就安装过这个数据库,后来换了电脑也就没有在尝试使用了,今天想在台式机上重新安装一下. 数据库下载地址在这里 打开后下载我红色线框圈 ...
- 做财务讲师真的好吗?启宣教育告诉你答案
疫情原因,国内经济一定程度上受到了不小的影响.虽然很多企业应对经济下滑的常规手段都是缩进预算,特别是企业的广告费.培训费等.但是相关数据显示,培训的诉求反而超出大家的想象.学习成长已经成为个人常态化的 ...
- python-绘图与可视化
python-绘图与可视化 文章目录 python-绘图与可视化 前言 一.Matplotlib 程序包 二.绘图命令的基本架构及其属性设置 (1)在Figure 上创建子plot,并设置属性 (2) ...
- iMeta | 复杂热图(ComplexHeatmap)可视化文章最新版,画热图就引它
点击蓝字 关注我们 复杂热图可视化 https://doi.org/10.1002/imt2.43 PROTOCOL ●2022年8月,德国癌症研究中心顾祖光在iMeta在线发表了题为"Co ...
- iMeta | 德国国家肿瘤中心顾祖光发表复杂热图(ComplexHeatmap)可视化方法
点击蓝字 关注我们 复杂热图可视化 https://doi.org/10.1002/imt2.43 PROTOCOL ●2022年8月,德国癌症研究中心顾祖光在iMeta在线发表了题为"Co ...
- 基于图数据库、图算法、图神经网络的 ID Resolution/ID Mapping 大数据分析方法与代码示例
本文首发于 NebulaGraph 公众号 "本文是一个基于 NebulaGraph 上的图数据库.图算法.图神经网络的 ID Resolution/ID Mapping 方法综述,除了基本 ...
- 图数据库在CMDB领域的应用
[导语]在上期的图数据库介绍中,我们对什么是图数据库,以及图数据库所擅长的领域做了一个初步的介绍,也收到了众多的反馈和咨询,特别要求我们对图数据库在一些具体行业的应用能做一些深入介绍.为此,从本期文档 ...
- 突破高连接性能瓶颈,图数据库在银行业这么用
来自:DBAplus社群 本文根据王磊老师在[2018 Gdevops全球敏捷运维峰会-北京站]现场演讲内容整理而成. 讲师介绍 王磊,现任职光大银行科技部数据领域架构师,曾任职于IBM全球咨询服务部 ...
最新文章
- anago 围棋_跳进我的碗里—关于中惒围棋加盟那些事
- 成为进阶Linux大佬的第一步
- 基于mcp940反编译Minecraft源代码
- Python随笔-切片
- python赋值01_python学习笔记1-赋值与字符串 | 学步园
- python编程中条件句_简单讲解Python编程中namedtuple类的用法
- 元宵诗词各一【明书】
- 解决hadoop no dataNode to stop问题
- 云计算正在“抹杀”开源?
- WinCE5.0中文模拟器SDK(VS2005)的配置
- Windows系统镜像下载
- 为什么Word打印预览的跟实际的不一样呢
- 中国文化和旅游部长:肯定《吴哥王朝》培养本地演员
- RCTF crypto100(1)
- 初次项目:电子通讯录
- 普通最小二乘法、加权最小二乘法、广义最小二乘法
- 科沃斯机器人招股_603486_科沃斯招股说明书.pdf
- python自动定期清理日志脚本支持Linux+windows
- Tomcat的8005、8009,8080端口解释
- 《HyVulDect: A hybrid semantic vulnerability mining system based ongraph neural network》阅读笔记
热门文章
- RouterOS 设置静态ARP绑定
- python算法简单了解
- Event Reciever ItemUpdated fired twice
- Autodesk Revit 和Naviswork 众多二次开发培训视频教程一键下载
- 解释性语言与编译性语言
- Linux几个版本下创建桌面快捷方式、开始菜单快捷方式、文件管理器右键菜单(只deepin uos 20)
- 16G116-1 装配式混凝土结构预制构件选用目录(一)
- matlab 函数 c++ 复写之randperm
- 团队协作api管理工具除了swagger,还有yapi
- Emscripten教程之emcc编译命令