基于WebGL標(biāo)準(zhǔn)的家庭娛樂(lè)終端上Web3D渲染的實(shí)現(xiàn)

(武漢鐵路職業(yè)技術(shù)學(xué)院電子電氣工程系，湖北 武漢430074）

近幾年來(lái)，家庭娛樂(lè)終端設(shè)備的性能在不斷增強(qiáng)，如高清機(jī)頂盒、智能電視機(jī)等都可以支持越來(lái)越復(fù)雜的應(yīng)用。然而，在這些終端上進(jìn)行3D圖形的渲染還是一個(gè)比較困難的任務(wù)。目前常見(jiàn)的家庭娛樂(lè)終端3D渲染方式有3種[1-2]：3D渲染硬件架構(gòu)、遠(yuǎn)端3D渲染架構(gòu)(渲染過(guò)程由遠(yuǎn)端功能強(qiáng)大的服務(wù)器，渲染結(jié)果通過(guò)網(wǎng)絡(luò)以視頻方式傳送到家庭娛樂(lè)終端設(shè)備）、軟件架構(gòu)(整個(gè)渲染過(guò)程在家庭娛樂(lè)終端上執(zhí)行）。第3種方法非常有前景，但是比起另外2種所引起的關(guān)注度要小。最有成績(jī)的一個(gè)結(jié)果是對(duì)傳統(tǒng)基于多邊形3D渲染方式的替代技術(shù)[3]。其目的是降低3D渲染過(guò)程的復(fù)雜性，而不顯著降低渲染圖形的品質(zhì)。近幾年，OpenGL ES作為一個(gè)家庭娛樂(lè)終端設(shè)備基本的3D圖形渲染標(biāo)準(zhǔn)出現(xiàn)了，OpenGL ES的出現(xiàn)是基于傳統(tǒng)的多邊形渲染方法。下面，筆者在家庭娛樂(lè)終端設(shè)備上進(jìn)行基于多邊形的Web3D內(nèi)容渲染，使用WebGL API創(chuàng)建渲染引擎，實(shí)現(xiàn)傳統(tǒng)的著色、光照及導(dǎo)航算法。

1 系統(tǒng)體系架構(gòu)

筆者在開(kāi)源瀏覽器WebKit的基礎(chǔ)上，按照WebGL規(guī)范要求，創(chuàng)建了如圖1所示的3D圖形渲染引擎，實(shí)現(xiàn)傳統(tǒng)的著色、光照和導(dǎo)航過(guò)程。該引擎由4個(gè)模塊構(gòu)成。

1）渲染器模塊 其主要功能是管理所有的渲染過(guò)程，在必要的時(shí)候調(diào)用其他的模塊。它的輸入包含3D元件數(shù)據(jù)及用戶交互事件的XML文件。它的輸出是用戶當(dāng)前視角的3D場(chǎng)景圖。

圖1 WebKit瀏覽器中Web3D組件結(jié)構(gòu)示意圖

2）事件管理器模塊 其主要功能是負(fù)責(zé)處理用戶與瀏覽器交互時(shí)的用戶事件(如著色模型的改變）及實(shí)現(xiàn)動(dòng)畫(huà)功能的動(dòng)畫(huà)事件(如定時(shí)器更新事件）。事件管理模塊還包含從XML解析模塊傳入的Web3D場(chǎng)景路徑。事件管理模塊在接收到渲染器模塊輸入的事件后，按要求更新Web3D場(chǎng)景路徑，并將更新的Web3D場(chǎng)景路徑輸出到場(chǎng)景管理模塊，由其做進(jìn)一步的顯示處理。

3）場(chǎng)景管理模塊 場(chǎng)景管理模塊主要負(fù)責(zé)Web3D場(chǎng)景的可視化處理過(guò)程。其接收事件管理器輸出的路徑更新信息及XML解析的場(chǎng)景節(jié)點(diǎn)信息，調(diào)用渲染器的渲染呈現(xiàn)函數(shù)，由渲染器模塊在終端屏幕上呈現(xiàn)當(dāng)前3D場(chǎng)景的渲染結(jié)果。

4）解析模塊 其主要功能是進(jìn)行XML文件解析，提取文件中的3D場(chǎng)景節(jié)點(diǎn)及路徑，分別輸送到場(chǎng)景管理和事件管理模塊。

圖2 場(chǎng)景創(chuàng)建和渲染的流程示意圖

2 3D渲染呈現(xiàn)

3D場(chǎng)景的建立和渲染管線工作流與標(biāo)準(zhǔn)的3D虛擬現(xiàn)實(shí)應(yīng)用的流程類(lèi)似，其流程如圖2所示。嵌入動(dòng)態(tài)內(nèi)容的Web頁(yè)面中，所有的頁(yè)面邏輯都在HEAD部分定義，在BODY部分有頁(yè)面結(jié)構(gòu)及UI元件。在這些元件中，最重要的當(dāng)然是Canvas對(duì)象，也就是WebGL實(shí)現(xiàn)屏幕渲染的地方。

Canvas在腳本的末尾輸出的區(qū)域register，對(duì)于一個(gè)腳本對(duì)象來(lái)說(shuō)，它是一個(gè)連接各種canvas事件的特殊函數(shù)。

對(duì)3D場(chǎng)景建立的來(lái)說(shuō)，glMolViewer對(duì)象是主要成員，這個(gè)對(duì)象的結(jié)構(gòu)包含WebGL提供的事件處理子系統(tǒng)。Canvas事件觸發(fā)一個(gè)專(zhuān)有函數(shù)，WebGL在JavaScript語(yǔ)言的基礎(chǔ)上開(kāi)發(fā)了一個(gè)動(dòng)態(tài)加載和刪除的listener和redirect時(shí)間。下面這個(gè)例子是一個(gè)listener示例：

初始化和數(shù)據(jù)加載由load函數(shù)完成，它是渲染器的主要特性，包含輸入數(shù)據(jù)的加載和著色器的編譯。

這種整體的數(shù)據(jù)管理方式對(duì)一個(gè)單一的、緊湊的網(wǎng)頁(yè)數(shù)據(jù)庫(kù)來(lái)說(shuō)是很好的方式。更多的的時(shí)候，還需要利用異步加載機(jī)制，使得大型的流／離散數(shù)據(jù)庫(kù)的加載或者用戶動(dòng)態(tài)加載遠(yuǎn)程文件更加有效。繪制函數(shù)中包含了實(shí)際的渲染代碼：

這個(gè)函數(shù)可以持續(xù)或按需調(diào)用，當(dāng)用sglRegisterCanvas函數(shù)注冊(cè)一個(gè)Canvas后，如果參數(shù)是0，那么Canvas只是重畫(huà)，否則該參數(shù)表示畫(huà)面呈現(xiàn)理想的幀率。在每一個(gè) “tick”，WebGL將調(diào)用更新函數(shù)，然后重畫(huà)。在這2種情況中，只要檢測(cè)到一個(gè)WebGL幀緩沖區(qū)變化，Html渲染引擎將啟動(dòng)一個(gè)頁(yè)面制作操作。GLSL著色器包含在Web頁(yè)面的HEAD部分的腳本實(shí)體。

一個(gè)3D娛樂(lè)場(chǎng)景的實(shí)現(xiàn)代碼可以按上述示例的方式逐一設(shè)計(jì)和組織。這個(gè)簡(jiǎn)單的示例是一個(gè)優(yōu)化的起點(diǎn)，對(duì)于有經(jīng)驗(yàn)的圖形編程人員來(lái)說(shuō)非常的簡(jiǎn)單。

[1]Antochi I，Juurlink B，Vassliadi，S．Selecting the Optimal Tile Size for Low-Power Tile-Based Rendering [A]．Proceedings of the thirteenth Annual Workshop on Circuits，Systems and Signal Processing [C]．ProRISC，2002：1-6．

[2]Burigat S，Chittaro L．Location-aware Visualization of VRML Models in GPS-based Mobile Guides [A]．Proceedings of the tenth international conference on 3DWeb technology [C] ．New York：ACM Press，2005：57-64．

[3]Buttussi F，Chittaro L，Nadalutti D．H-Animator：A Visual Tool for Modeling，Reuse and Sharing of X3DHumanoid Animations [A]．Proceedings of the eleventh international conference on 3D Web technology [C]．New York：ACM Press，2006．