基于WebGL技術(shù)的三維自動(dòng)化可視系統(tǒng)設(shè)計(jì)

周 萌

（四川宜賓學(xué)院，宜賓 644000）

0 引言

在三維可視化研究中，可視化技術(shù)逐漸從靜態(tài)的可視化轉(zhuǎn)變?yōu)閯?dòng)態(tài)的可視化，為各行各業(yè)的人員提供了更好的用戶體驗(yàn)[1]。目前研究的三維可視系統(tǒng)具有非常高的藝術(shù)性和震撼力，能夠處理的數(shù)據(jù)類型非常多，生成的三維圖形精細(xì)度也非常高，在很多領(lǐng)域中得到了充分應(yīng)用。但是，由于可視化系統(tǒng)的使用者知識(shí)背景差異比較大，系統(tǒng)專業(yè)性太強(qiáng)，很多時(shí)候不利于用戶操作，對于三維可視系統(tǒng)還需要更進(jìn)一步[2]。

現(xiàn)階段，技術(shù)人員和學(xué)術(shù)專家對三維可視系統(tǒng)的研究更多的是考慮數(shù)據(jù)時(shí)代大數(shù)據(jù)的特征，加深三維可視系統(tǒng)的研究深度，逐漸研發(fā)了上手簡單、操作難度小的系統(tǒng)[3]。現(xiàn)行有很多成熟的三維可視系統(tǒng)應(yīng)用在各個(gè)領(lǐng)域中，常見的三維可視系統(tǒng)注重技術(shù)實(shí)現(xiàn)和算法優(yōu)化，注重大數(shù)據(jù)技術(shù)的結(jié)合，從單一的數(shù)據(jù)逐漸轉(zhuǎn)向了多維數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)的三維可視化[4]。但是，在實(shí)際操作中，三維可視化的處理涉及到圖像渲染和大量交互操作，需要瀏覽器插件作為支持，在渲染時(shí)僅通過軟件部分支撐，系統(tǒng)整體的魯棒性需要進(jìn)一步提高[5]。因此，提出基于WebGL技術(shù)的三維自動(dòng)化可視系統(tǒng)，利用WebGL技術(shù)的特點(diǎn)解決上述常見的三維可視系統(tǒng)中存在的問題。

1 基于WebGL技術(shù)的三維自動(dòng)化可視系統(tǒng)硬件設(shè)計(jì)

在系統(tǒng)硬件設(shè)計(jì)中，以原有的系統(tǒng)結(jié)構(gòu)作為基礎(chǔ)，將WebGL應(yīng)用到系統(tǒng)硬件結(jié)構(gòu)中，從系統(tǒng)硬件上優(yōu)化系統(tǒng)的運(yùn)算速度。原有的系統(tǒng)結(jié)構(gòu)如圖1所示。

圖1 系統(tǒng)總體結(jié)構(gòu)示意圖

將WebGL應(yīng)用到構(gòu)建層中，形成的技術(shù)架構(gòu)如圖2所示。

圖2 優(yōu)化后的系統(tǒng)技術(shù)架構(gòu)圖

在WebGL的支持下，使用可進(jìn)化FDP-2SoPC芯片作為加速芯片，將其與系統(tǒng)內(nèi)的FPGA配置控制器連接在一起，實(shí)現(xiàn)加速芯片對FPGA IP核位流配置，由FIFO接口和共享接口ROM組成兩者之間的數(shù)據(jù)接口，同時(shí)在模塊中加入了使能寄存器，降低系統(tǒng)硬件功耗。

上述FPGA配置控制器是為系統(tǒng)核心控制器控制FPGA和加速芯片的專用接口，核心控制器采用嵌入式結(jié)構(gòu)，通過外部的激勵(lì)實(shí)現(xiàn)內(nèi)部的配置和控制。核心控制器與FPGA之間數(shù)據(jù)傳輸命令字示意圖如圖3所示。

圖3 核心控制器和FPGA數(shù)據(jù)傳輸命令示意圖

從圖中可以看出，讀命令字分為三個(gè)步驟實(shí)現(xiàn)，寫命令字分為兩個(gè)步驟實(shí)現(xiàn)，通過讀命令字采集數(shù)據(jù)，通過寫命令字傳輸數(shù)據(jù)，上述操作均在WebGL的支持下實(shí)現(xiàn)，從系統(tǒng)底層的硬件設(shè)計(jì)上實(shí)現(xiàn)數(shù)據(jù)的加速處理。

2 基于WebGL技術(shù)的三維自動(dòng)化可視系統(tǒng)軟件設(shè)計(jì)

2.1 三維模型處理引擎設(shè)計(jì)

三維模型處理中針對不同的功能需要不同的引擎作為支撐，在設(shè)計(jì)中，對于幾何處理引擎的設(shè)計(jì)，如圖4所示。

圖4 幾何處理引擎內(nèi)部結(jié)構(gòu)示意圖

在用戶與三維可視系統(tǒng)交互時(shí)，幾何處理引擎在讀取到用戶的操作后，就會(huì)將參數(shù)保存到局部寄存器中，在處理完成后，經(jīng)過全局寄存器堆向用戶提供幾何數(shù)據(jù)讀取服務(wù)，從而完整三維模型幾何的渲染和設(shè)計(jì)。

在三維模型的光照和顏色引擎設(shè)計(jì)上，計(jì)算三維模型在環(huán)境下的環(huán)境光、反射光、頂點(diǎn)顏色等參數(shù)。計(jì)算公式如下：

式(1)是環(huán)境光計(jì)算公式，其中Ma和La分別表示環(huán)境光屬性和分量；式(2)是散射光計(jì)算公式，其中Md和Ld分別表示模型材質(zhì)的散射光分量和光源的散射光分量，L和N分別表示光源向量和法向量，max{L·N，0}表示L和N之間的夾角；式(3)是三維模型鏡面反射光的計(jì)算公式，其中max{S·N，0}表示觀察向量與法線的夾角，右上角標(biāo)記的S表示材質(zhì)的鏡面指數(shù)，反映三維模型表面的光滑程度，S表示模型的觀察向量與光源方向向量的歸一化結(jié)果，Ls表示光源鏡面反射分量，Ge表示材質(zhì)的發(fā)射光RGB值，Ms表示光源鏡面的法向量，color表示最終的頂點(diǎn)顏色，是多個(gè)光源的累加結(jié)果。在計(jì)算過程中，如果，max{L·N，0}夾角大于90°，三維模型的頂點(diǎn)顏色沒有變化，無法觀測到正確的三維模型，因此在計(jì)算時(shí)使用0代替。當(dāng)max{S·N，0}等于入射角時(shí)，取最大值，接收完整的入射光。

在三維視圖送入到光柵化引擎前，需要將視圖頂點(diǎn)坐標(biāo)轉(zhuǎn)換為設(shè)備坐標(biāo)，這就需要用到投影引擎，由于模型變換和觀察變換之間存在等效性，在投影引擎設(shè)計(jì)中，假設(shè)投影棱臺(tái)中的點(diǎn)為Q（x，y，z），經(jīng)過投影，在觀察平面上的點(diǎn)為P（xp，yp，zp），計(jì)算可得：

得到的透視投影矩陣為：

公式中sz表示規(guī)范化中的比例因子，tz表示平移因子。利用觀察目標(biāo)體內(nèi)的任意一點(diǎn)以及原點(diǎn)距近平面和遠(yuǎn)平面的距離，求解比例因子和平移因子，再將得到的結(jié)果代回到變換矩陣中，即可完成三維投影，得到模型視圖矩陣。

由上述的光源參數(shù)和投影參數(shù)確定三維模型的表現(xiàn)形式，在確定三維模型后，通過WebGL技術(shù)設(shè)計(jì)的可視化功能展示在用戶面前。

2.2 基于WebGL技術(shù)的可視化功能設(shè)計(jì)

使用WebGL技術(shù)創(chuàng)建可視化界面，在界面的左側(cè)為用戶權(quán)限下所有可視圖按照一定順序排列，以無限滾動(dòng)的方式呈現(xiàn)在用戶面前，通過HTML5的drop功能實(shí)現(xiàn)拖拽操作，將目標(biāo)圖像加入到可視化界面中。系統(tǒng)交互中，在拖拽開始時(shí)，使用ondragstart選中元素，當(dāng)目標(biāo)視圖被拖動(dòng)到目標(biāo)位置時(shí)，執(zhí)行ondragenter，當(dāng)需要移除目標(biāo)元素時(shí)，使用ondragleave執(zhí)行指針操作，在拖拽結(jié)束后，執(zhí)行ondragend。在可視化過程中，用戶觀察到的視圖就是對各個(gè)事件的監(jiān)測結(jié)果，通過dragstart事件的監(jiān)測，可保證用戶在操作視圖元素時(shí)，原始視圖內(nèi)容不變，只改變目標(biāo)元素屬性；通過對leave事件的監(jiān)測，在監(jiān)聽到拖拽目標(biāo)離開目標(biāo)區(qū)域后，可將可視化視圖刪除。

在構(gòu)建可視化交互屏過程中，單擊交互屏中的目標(biāo)視圖，在交互屏的左側(cè)會(huì)顯示出三維模型的樣式配置和數(shù)據(jù)配置，利用樣式配置改變視圖元素的屬性，通過數(shù)據(jù)配置可以對系統(tǒng)內(nèi)的數(shù)據(jù)進(jìn)行實(shí)時(shí)更新，從未達(dá)到實(shí)時(shí)更新三維視圖的目的。具體的實(shí)現(xiàn)策略有兩種，一種是直接修改和編輯原始的視圖屬性和數(shù)據(jù)，另一種是通過裝飾者模式修改和編輯原始視圖，在同時(shí)操作多個(gè)可視化交互屏?xí)r，實(shí)現(xiàn)對同一個(gè)視圖元素復(fù)用的同時(shí)，不會(huì)改變視圖內(nèi)容，提高了自身的可操作性。至此，基于WebGL技術(shù)的三維自動(dòng)化可視系統(tǒng)設(shè)計(jì)完成。

3 基于WebGL技術(shù)的三維自動(dòng)化可視系統(tǒng)的測試與分析

3.1 多源數(shù)據(jù)連接功能測試

在三維自動(dòng)化可視系統(tǒng)性能測試中，為了盡可能覆蓋系統(tǒng)的全部功能，針對系統(tǒng)內(nèi)的多個(gè)模塊機(jī)進(jìn)行數(shù)據(jù)連接測試，從系統(tǒng)的各個(gè)模塊數(shù)據(jù)連接情況驗(yàn)證系統(tǒng)的擴(kuò)展性，分析系統(tǒng)數(shù)據(jù)對接功能是否正常。具體的測試內(nèi)容包括數(shù)據(jù)源連接、靜態(tài)文件上傳測試和實(shí)時(shí)數(shù)據(jù)表操作功能測試。

多源數(shù)據(jù)連接功能測試主要測試內(nèi)容是數(shù)據(jù)源的增刪改查四種操作；實(shí)時(shí)數(shù)據(jù)表的配置功能通過SQL語句實(shí)現(xiàn)，驗(yàn)證實(shí)時(shí)數(shù)據(jù)能夠正常增加和刪除，以及對數(shù)據(jù)的實(shí)時(shí)操作是否成功；在系統(tǒng)設(shè)計(jì)中，三維可視系統(tǒng)支持多源靜態(tài)文件上傳，在測試中，選擇比較常見的txt、Excel文件作為測試文件，用于多源數(shù)據(jù)連接測試。具體測試內(nèi)容與測試結(jié)果如表1所示

表1 多種數(shù)據(jù)源連接功能測試

通過表中的測試結(jié)果可以看出，設(shè)計(jì)的三維自動(dòng)化可視系統(tǒng)多源數(shù)據(jù)連接功能測試結(jié)果均滿足預(yù)期，系統(tǒng)可正常使用。

3.2 系統(tǒng)魯棒性測試

在功能測試完成后，針對系統(tǒng)的應(yīng)用性能展開研究與分析，從系統(tǒng)的魯棒性出發(fā)，引入兩種常見的三維可視系統(tǒng)，通過占用內(nèi)存測試和實(shí)時(shí)大屏響應(yīng)性能測試，驗(yàn)證系統(tǒng)的魯棒性。

三維自動(dòng)化可視系統(tǒng)在應(yīng)用時(shí)，用戶可能對多個(gè)可視化大屏進(jìn)行編輯工作，隨著系統(tǒng)運(yùn)行時(shí)間的增加，瀏覽器內(nèi)存也會(huì)不斷增加，系統(tǒng)的響應(yīng)時(shí)間將會(huì)隨著內(nèi)存的增加而減小，嚴(yán)重影響系統(tǒng)的運(yùn)行效率。在測試中，運(yùn)行三維可視系統(tǒng)，打開多個(gè)可視系統(tǒng)交互屏，在保持前一個(gè)交互屏處于播放狀態(tài)的同時(shí)，打開后一個(gè)交互屏，在此過程中，觀察隨著可視化交互屏數(shù)目的增加，系統(tǒng)瀏覽器內(nèi)存產(chǎn)生的變化。測試中使用的系統(tǒng)分別是基于3Dmine的可視系統(tǒng)和基于三維激光掃描的可視系統(tǒng)，各個(gè)可視系統(tǒng)的占用內(nèi)存測試結(jié)果如圖5所示。

圖5 不同可視系統(tǒng)占用內(nèi)存測試結(jié)果

觀察圖中結(jié)果可知，提出的可視系統(tǒng)在可視化大屏達(dá)到一定數(shù)量后，瀏覽器內(nèi)存消耗基本持平，這是因?yàn)榭梢曄到y(tǒng)在設(shè)計(jì)中，融入了加速芯片，同時(shí)調(diào)用dispose()函數(shù)，清除了多余的可視化視圖Dom元素，釋放大量內(nèi)存，達(dá)到了減少瀏覽器內(nèi)存的目的。由此可見，提出的三維可視系統(tǒng)在應(yīng)用中，減小了對瀏覽器內(nèi)存的消耗，保證了系統(tǒng)在多個(gè)可視化交互屏操作時(shí)運(yùn)行的穩(wěn)定性。

在系統(tǒng)的實(shí)時(shí)大屏中，實(shí)時(shí)數(shù)據(jù)的改變會(huì)引起實(shí)時(shí)數(shù)據(jù)表的變化，用戶在操作系統(tǒng)時(shí)數(shù)據(jù)更新間隔較長并且更新間隔時(shí)間不固定，在數(shù)據(jù)更新頻繁的情況下，會(huì)嚴(yán)重?fù)p壞系統(tǒng)運(yùn)行壽命。針對這一特性，測試時(shí)，使用計(jì)算機(jī)模擬系統(tǒng)實(shí)時(shí)數(shù)據(jù)頻繁更新行為，觀察系統(tǒng)在發(fā)送更新次數(shù)不斷增加的情況下，可視系統(tǒng)實(shí)時(shí)更新響應(yīng)時(shí)間的變化。設(shè)定的條件為1s內(nèi)發(fā)送1000次數(shù)據(jù)更新請求，測試結(jié)果如圖6所示。

圖6 不同可視系統(tǒng)的可視化視圖更新響應(yīng)時(shí)間測試結(jié)果

由圖中結(jié)果可以看出，隨著測試時(shí)間的增加，基于3Dmine的三維可視系統(tǒng)和基于三維激光掃描的可視系統(tǒng)響應(yīng)時(shí)間顯著增加，同時(shí)系統(tǒng)內(nèi)存消耗也有明顯增加；提出的可視系統(tǒng)并沒有出現(xiàn)響應(yīng)時(shí)間增加明顯的情況，這是因?yàn)樵谙到y(tǒng)設(shè)計(jì)中增加了節(jié)流設(shè)計(jì)，在系統(tǒng)工作前，提前設(shè)定了一個(gè)周期閾值，與系統(tǒng)執(zhí)行操作時(shí)刻相比，如果執(zhí)行操作時(shí)刻大，則執(zhí)行命令，限制系統(tǒng)流量，達(dá)到節(jié)流的目的。將上述兩組實(shí)驗(yàn)結(jié)果結(jié)合在一起分析可知，設(shè)計(jì)的基于WebGL技術(shù)的三維自動(dòng)化可視系統(tǒng)占用內(nèi)存小，可視化視圖響應(yīng)時(shí)間短，整體魯棒性優(yōu)于常規(guī)的三維可視系統(tǒng)。

4 結(jié)語

信息可視化是目前社會(huì)發(fā)展必不可少的部分，隨著用戶需求的不斷提高，對三維可視化系統(tǒng)提出了更高的要求。本文以三維自動(dòng)化可視系統(tǒng)作為研究重點(diǎn)，借鑒大量研究文獻(xiàn)和資料，將WebGL技術(shù)應(yīng)用到可視系統(tǒng)設(shè)計(jì)中，在基于WebGL技術(shù)的三維可視系統(tǒng)設(shè)計(jì)完成后，以系統(tǒng)的魯棒性作為研究指標(biāo)，在多組實(shí)驗(yàn)數(shù)據(jù)的支持下，對比分析了不同三維可視系統(tǒng)的魯棒性，證明了設(shè)計(jì)的基于WebGL技術(shù)的可視系統(tǒng)在實(shí)際應(yīng)用中魯棒性更好。雖然本文設(shè)計(jì)的可視系統(tǒng)取得了明顯的進(jìn)展，但是隨著技術(shù)的更新迭代和用戶需求的改變，三維可視系統(tǒng)仍然有進(jìn)步和優(yōu)化的空間，在后續(xù)研究中，將通過多方面優(yōu)化可視系統(tǒng)的性能，提高系統(tǒng)的應(yīng)用水平。