前言
對於社群來說(關注我的人,還有將要關注我的人)有倆件事提前說一下下:
- 建立的所有專欄我都會去維繫。但是寫作週期就不做承諾了。確實懶..也不打算靠寫文能夠給我帶來一些收益。(嗯,我對錢沒有興趣)
伴隨春節的到來,也應該對今年主導推進的技術架構設計,落地,未來計劃做一個回顧。涉及到內部隱私,這裡將部分內容分享出來。
簡介
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結構進行比對資料集減少。
- ...太多了
每個細節點交流都是精華。不能說在座的都不是對手, 但是基本信心在效能方面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