簡述一種提升可視化效果的高性能2D數據展示算法

陳海洋

摘 要 針對前端通過Canvas或svg繪制2D點線數據效率低下的問題，本文設計一種基于WebGL的高性能2D數據展示算法，采用WebGL對點數據進行渲染，在計算模型視圖位置點時，使點的Z軸永遠朝上，節省了程序的運算時間，提高可視化效率。

關鍵詞 WebGL;可視化;算法

Abstract Aiming at the low efficiency of 2D point and line data drawn by canvas or SVG， this paper designs a high-performance 2D data display algorithm based on webgl， which uses webgl to render point data. When calculating the position point of model view， the Z axis of point is always upward， which saves the operation time of program and improves the visualization efficiency.

Keyword WebGL; Visualization; Algorithm

引言

面對海量數據時，僅僅通過單純的文本數據表達方式和分析手段來快速高效地處理和使用數據已是非常困難的事，因此需要新的技術來解決這一問題[1]。數據可視化技術通過計算機繪圖的方式，提供多種圖形方法來直觀地把晦澀難懂的傳統數據形象生動地表達出來，大大加強了人們對于數據的理解交互力度[2]。

在可視化繪圖情景下，前端的一些繪圖技術包括Flash、VML、SVG和Canvas等，這些繪圖技術都存在各自缺陷。Flash在前端繪圖需要安裝插件，使Flash中的元素與網頁中其他元素進行交互是要消耗大量時間和資源。VML規格被W3C所拒絕，目前僅有IE瀏覽器可以支持使用。Canvas把圖像放大圖形會變模糊，也無法對已繪制的圖像進行操作、修改。SVG則不能動態的修改動畫內容，也不能與HTML內容集成。

1數據展示算法

1.1 算法思想

本文設計了一種基于WebGL的提升可視化效果的高性能2D數據展示算法，采用WebGL對點數據進行渲染，使用Canvas來繪制點數據的圖片，然后將該圖片作為材質貼到點上。其中當點數據渲染時，在計算模型視圖位置點（通過坐標變換矩陣來計算）的時候，保持點Z軸不變，使得點Z軸會永遠朝上，這樣就節省了程序的運算時間，提高可視化效率。且本算法是通過在GPU上渲染的，比傳統的svg、canvas、flash渲染方法要快得多。

1.2 算法流程

本算法的技術流程如下圖1所示，主要包括以下步驟：

（1）數據準備。在數據準備階段，主要包括獲取頂點數據坐標、確定坐標變換矩陣等。頂點坐標一般來自三維軟件導出，或者框架生成。由于頂點數據往往成千上萬，在獲取到頂點坐標后，通常會將它存儲在顯存，即緩存區內，方便GPU更快讀取。

（2）定義頂點著色器。在定義頂點著色器階段，根據開發需要，由opengl es編寫，Javascript以字符串的形式定義并傳遞給GPU生成。一段頂點著色器程序的作用是根據在數據準備階段確定的坐標變換矩陣來完成坐標變化。因此將渲染算法的頂點著色器進行如下改進：

（3）保持z軸不變。在點數據渲染上我們在計算模型視圖位置點的時候，其計算公式如下。并且我們渲染時保存點的z軸不變，這樣點的z軸會永遠朝上，這樣渲染效果最好。

（4）圖元裝配。定義完頂點著色器之后，且計算模型視圖點時保持z軸不變則進行圖元裝配生成圖元。在圖元裝配階段，圖元裝配就是由頂點生成一個個圖元的過程。GPU根據頂點數量，挨個執行頂點著色器程序，生成頂點最終的坐標，完成坐標轉換。

（5）生成片元著色器。在生成片元著色器階段，由Canvas來繪制點數據的片元（圖片）。模型是什么顏色，看起來是什么質地，光照效果，陰影等等都在這個階段處理。

（6）片元光柵化。片元著色器對傳入頂點信息的圖元進行光柵化后生成片元，即是片元光柵化階段，由運行在GPU中的片元著色器完成模型的“上色”工作。通過片元著色器確定好了每個片元的顏色，并根據深度緩存區判斷哪些片元被擋住了而不需要渲染。最終將片元信息存儲到顏色緩存區，完成整個模型的渲染。

（7）寫入緩存區及可視化表達輸入。在最后的寫入緩存區階段，將渲染好的點數據信息存儲到顯存，即緩存區內，方便GPU更快讀取，然后再在前端可視化表達輸出。

1.3 算法應用

通過上述算法，可以得到如下圖2所示的可視化圖：

參考文獻

[1] 陳建軍，于志強，朱昀.數據可視化技術及其應用[J].紅外與激光工程，2001（5）：339-342.

[2] 王子毅，張春海.基于ECharts的數據可視化分析組件設計實現[J].微型機與應用，2016，35（14）：46-48，51.