前言
对于社区来说(关注我的人,还有将要关注我的人)有俩件事提前说一下下:
- 建设的所有专栏我都会去维系。然而写作周期就不做承诺了。的确懒..也不打算靠写文可能给我带来一些收益。(嗯,我对钱没有趣味)
随同春节的到来,也应该对往年主导推动的技术架构设计,落地,将来打算做一个回顾。波及到外部隐衷,这里将局部内容分享进去。
简介
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