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

陳海洋

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

關鍵詞 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

引言

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

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

1數(shù)據(jù)展示算法

1.1 算法思想

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

1.2 算法流程

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

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

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

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

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

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

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

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

1.3 算法應用

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

參考文獻

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

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