陳海洋

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

關(guān)鍵詞 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

引言

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

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

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

1.1 算法思想

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

1.2 算法流程

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

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

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

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

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

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

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

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

1.3 算法應(yīng)用

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

參考文獻(xiàn)

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

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