前言
对于社区来说 (关注我的人, 还有将要关注我的人) 有俩件事提前说一下下:
- 建设的所有专栏我都会去维系。然而写作周期就不做承诺了。的确懒.. 也不打算靠写文可能给我带来一些收益。(嗯, 我对钱没有趣味)
-
随同春节的到来, 也应该对往年主导推动的技术架构设计, 落地, 将来打算做一个回顾。波及到外部隐衷, 这里将局部内容分享进去。
简介
2021 年集体技术方向算是横向发展, 有肯定播种。本文贴合专栏对于其中一个方向: 渲染引擎 (FastV) 的回顾。暂不开源。
Fast 是疾速的意思, 也是渲染引擎设计初衷 (大数据下高性能体验);V visual(data visual) 可视化;FastV 疾速数据可视化, 打造一个高性能渲染引擎。
至于性能方面可参考 Antv 的 G2 G6, 然而设计初衷不一样, 彼此劣势不一样。
上面次要介绍其中的一个根底渲染引擎研发的渲染库 FastV-G
架构介绍
背景
图可视化从几个方面来思考: 布局(algorithms-layout) 渲染(render) 交互(behaviors)。
请看下面的局部架构截图 (没有体验残缺的设计)
-
左边 (蓝色) 阐明引擎的整体思路:
controller 作为总体控制器 上面分为 render(渲染) events(事件 / 交互) algorithms(算法 / 逻辑)
- 右边为外围模块, 举几个例子阐明咱们的劣势。
- behaviors 高性能交互。其实交互的性能体现是离不开渲染和算法的。其实优化也是定位, 合成, 各个击破。比方渲染, 我针对交互式操作做了切分。拿 BS 架构下的渲染来说。
图片示意 切分可能比上图更简单, 次要是思路。
将所有根底图元 (shapes) 应用 WebGL 渲染(硬件加速),label 利用 canvas-2d 进行渲染。而后将交互局部做切分 每次 update 只做交互局部的 update, 它怎么可能不快。(当然这里的交互可能存在全部内容的更新, 也须要对于交互进行分类 分不同的 case)
- algorithms
Graph 算法之图算法, 图的数据结构从新设计, 利用逻辑构造的劣势。例如数组查问快。将矩阵 (数组) 作为图构造(能够学一下 C ++ 的一个库 ligra, 有趣味后续能够分享一下) 图相干门路算法, 社区算法作出十分大的晋升。快就完事了。
layout 算法之布局算法, 例如 ForceDirectLyaout(力疏导布局), 点击交互 所须要的 2D 碰撞算法 底层数据结构均采取 quadTree 构造进行比对数据集缩小。
- … 太多了
每个细节点交换都是精髓。不能说在座的都不是对手, 然而根本信念在性能方面 kill 大部分的库还是有信念的。
技术介绍
BS 技术选型阐明
- Webpack 工程构建
- Node & Npm 服务 包治理
- Mocha 单元测试
- Typescript 主程序逻辑
- Canvas WebGL 渲染 API
- Babel-loader 语言编译
P: 算法 - 布局 (layout) 方向, 因为存在复杂度高的算法 更多是 C ++ 编写 (一方面语言问题, 一方面思考到可扩大问题. 通信问题目前不是瓶颈点[前面也能够做切分, 有做思考])。通过 restful 形式进行通信。
利用场景
从可视化 (交互) 角度来说, 分为展现, 剖析, 编辑三个方向。而后三个方向继而还能够衍生各类行业。比方图剖析:
图剖析
FastV-G 可反对的业务畛域。
- 常识图谱；
- 图平台：图数据库、图计算；
- 平安风控；
- …
看个成果
只是分享下技术成绩, 视觉我就先不在意了。大家谅解哈哈哈.
- 硬件是 i5 CPU 集显 16G 的内存
- 算法局部, 大略 10w 图元(5w 点 5w 边) 上图为 10s 内的迭代成果。
- 渲染局部 秒级. zoom select drag 相干操作均在 30fps 左右。
最初
先介绍到这里.over