回顾下渲染引擎-G一年的历程回顾下渲染引擎-G一年的历程

前言对于社区来说(关注我的人,还有将要关注我的人)有俩件事提前说一下下:

建立的所有专栏我都会去维系。但是写作周期就不做承诺了。确实懒..也不打算靠写文能够给我带来一些收益。(嗯,我对钱没有兴趣)
伴随春节的到来,也应该对今年主导推进的技术架构设计,落地,未来计划做一个回顾。涉及到内部隐私,这里将部分内容分享出来。

简介 【回顾下渲染引擎-G一年的历程】2021年个人技术方向算是横向发展,有一定收获。本文贴合专栏对于其中一个方向:渲染引擎(FastV)的回顾。暂不开源。

Fast是快速的意思,也是渲染引擎设计初衷(大数据下高性能体验); V visual(data visual)可视化; FastV 快速数据可视化,打造一个高性能渲染引擎。 ~~至于功能方面可参考Antv的G2 G6,但是设计初衷不一样,彼此优势不一样。~~
下面主要介绍其中的一个基础渲染引擎研发的渲染库FastV-G

架构介绍背景
图可视化从几个方面来考虑:布局(algorithms-layout) 渲染(render) 交互(behaviors) 。

文章图片

请看上面的部分架构截图 (没有体验完整的设计)

右边(蓝色)说明引擎的整体思路:

controller作为总体控制器下面分为render(渲染) events(事件/交互) algorithms(算法/逻辑)
左边为核心模块,举几个例子说明我们的优势。

1.behaviors 高性能交互。其实交互的性能体现是离不开渲染和算法的。其实优化也是定位,分解,各个击破。比如渲染,我针对交互式操作做了切分。拿BS架构下的渲染来说。

文章图片

~~图片示意切分可能比上图更复杂,主要是思路。~~
将所有基础图元(shapes)使用WebGL渲染(硬件加速),label利用canvas-2d进行渲染。然后将交互部分做切分每次update只做交互部分的update,它怎么能够不快。(当然这里的交互可能存在全部内容的更新,也需要对于交互进行分类分不同的case)

2.algorithms

Graph 算法之图算法,图的数据结构重新设计,利用逻辑结构的优势。例如数组查询快。将矩阵(数组)作为图结构(可以学一下C++的一个库ligra,有兴趣后续可以分享一下) 图相关路径算法,社区算法作出非常大的提升。快就完事了。
layout 算法之布局算法,例如ForceDirectLyaout(力引导布局),点击交互所需要的2D碰撞算法底层数据结构均采取quadTree结构进行比对数据集减少。