基于WebGL的三維圖形渲染系統(tǒng)的設(shè)計(jì)研究

吳文蔚

(山西職業(yè)技術(shù)學(xué)院,山西 太原 030006)

0 引言

早期的三維圖像處理技術(shù)有很多，例如虛擬現(xiàn)實(shí)建模語(yǔ)言(Virtual Reality Modeling Language，VRML)技術(shù)，它是一種面向WEB應(yīng)用的三維建模語(yǔ)言，雖然集合了XML、JAVA等先進(jìn)技術(shù)，具有較強(qiáng)的三維圖像計(jì)算能力，但在模型渲染質(zhì)量與交互性等方面卻差強(qiáng)人意；Shockwave 3D是基于Shockwave多媒體播放軟件拓展了英特爾的3D渲染功能的三維圖像處理技術(shù)，Shockwave 3D在三維交互與實(shí)時(shí)渲染兩方面的處理性能較好，但其本質(zhì)是一種播放器程序，應(yīng)用于WEB服務(wù)時(shí)，只要更換環(huán)境，用戶就需要下載新的插件，并且對(duì)數(shù)據(jù)傳輸?shù)木W(wǎng)絡(luò)帶寬要求很高，使其在WEB應(yīng)用中很難被普及。WebGL技術(shù)就是在這樣的背景下發(fā)展起來(lái)的專門(mén)面向WEB應(yīng)用開(kāi)發(fā)的一款三維圖像處理技術(shù)，一方面WebGL提供有硬件調(diào)用接口，可以直接調(diào)用GPU部件實(shí)現(xiàn)硬件加速圖形處理[1]，另一方面WebGL通過(guò)JavaScript語(yǔ)言封裝以標(biāo)簽的形式嵌入在HTML頁(yè)面中[2]，便于WEB應(yīng)用的直接調(diào)用，而無(wú)需下載任何插件。因此本研究采用WebGL技術(shù)構(gòu)建一個(gè)基于WEB應(yīng)用的三維圖形渲染系統(tǒng)，既可以大大提高圖形的處理效率，還便于系統(tǒng)的應(yīng)用推廣。

1 系統(tǒng)采用的核心技術(shù)

1.1 WebGL技術(shù)

WebGL是WEB 3D圖形應(yīng)用開(kāi)發(fā)的標(biāo)準(zhǔn)應(yīng)用程序編程接口(Application Programming Interface，API)，WebGL在OpenGL基礎(chǔ)上將JavaScrip與OpenGL相結(jié)合，實(shí)現(xiàn)了基于WEB前端三維圖形的硬件加速渲染功能[3]，大大提高了WEB瀏覽器中三維圖形的處理速度。WebGL通過(guò)JavaScrip封裝了對(duì)各類硬件接口的功能調(diào)用方法，再通過(guò)HTML5(HyperText Markup Language 5)的Canvas元素獲取WebGL的上下文環(huán)境，如此WEB前端的開(kāi)發(fā)人員就可以實(shí)現(xiàn)對(duì)底層硬件的直接訪問(wèn)和功能調(diào)用。

1.2 HTML5

HTML5實(shí)現(xiàn)了對(duì)移動(dòng)端的顯示支持和突破性的多媒體支持，特別是增加了JavaScript 的通用API，為基于WEB服務(wù)的圖形處理提供了先進(jìn)的技術(shù)。HTML5瀏覽器支持多線程、并發(fā)式線程管理、全雙工實(shí)時(shí)通信、數(shù)據(jù)存儲(chǔ)本地化等功能，大大提高了WEB應(yīng)用的事件響應(yīng)效率和數(shù)據(jù)通信效率。除此之外，HTML5在圖形處理方面，新增了Canvas功能，通過(guò)在Canvas元素中嵌入JavaScrip腳本語(yǔ)言實(shí)現(xiàn)二維圖形的繪制、著色，也為三維圖形處理的功能擴(kuò)展提供了技術(shù)基礎(chǔ)。

1.3 JavaScript語(yǔ)言

JavaScript是一款輕量級(jí)的、即時(shí)編譯型語(yǔ)言，核心語(yǔ)言庫(kù)簡(jiǎn)小精干，可以通過(guò)各類語(yǔ)法糖來(lái)實(shí)現(xiàn)功能擴(kuò)展[4]。在圖形處理方面，WebGL、Canvas 2D都是JavaScript的API擴(kuò)展，集合了圖形處理的所有軟、硬件優(yōu)勢(shì)。

2 三維圖形渲染系統(tǒng)設(shè)計(jì)

三維圖形渲染系統(tǒng)整體架構(gòu)設(shè)計(jì)見(jiàn)圖1。

上層應(yīng)用基于HTML5的Canvas元素，以標(biāo)簽形式嵌入JavaScript腳本的API，再通過(guò)調(diào)用JavaScript 內(nèi)的WebGL應(yīng)用程序編程接口實(shí)現(xiàn)對(duì)三維圖形的各類處理。在WebGL接口調(diào)用之前，訪問(wèn)用戶可以通過(guò)上層應(yīng)用進(jìn)行圖形輔助渲染與渲染要素的參數(shù)配置、模式切換等操作。其中渲染要素用于配置三維圖形的光源模式、著色器類型、渲染視角、相機(jī)、貼圖材質(zhì)等參數(shù)；輔助渲染用于對(duì)轉(zhuǎn)換為網(wǎng)格對(duì)象的三維圖形進(jìn)行渲染前的計(jì)算分析。

圖1 三維圖形渲染系統(tǒng)架構(gòu)

渲染層主要實(shí)現(xiàn)兩方面功能，一是依據(jù)上層應(yīng)用的渲染要素參數(shù)設(shè)置建立要素之間的關(guān)聯(lián)關(guān)系，并調(diào)用對(duì)應(yīng)的函數(shù)接口；二是獲取WebGL的繪圖上下文配置接口，建立對(duì)應(yīng)的WebGL渲染管線。

WebGL渲染管線用于處理具體的圖形渲染事件，該層上集中了各種三維圖形的渲染算法，包括視圖變換算法、投影變換算法、邊界表示算法等。其中視圖變換算法主要是實(shí)現(xiàn)三維模型——視圖矩陣的轉(zhuǎn)換；投影變換算法用于構(gòu)建三維模型的投影矩陣，著色器使用投影矩陣將三維頂點(diǎn)的坐標(biāo)信息投影在二維空間的坐標(biāo)當(dāng)中；邊界表示算法是針對(duì)三維模型曲面進(jìn)行繪制的算法，通過(guò)對(duì)三維模型的邊界描述來(lái)捕獲模型的曲面細(xì)節(jié)，邊界描述涉及兩個(gè)方面的信息描述，一是三維圖形的拓?fù)湫畔?，用于曲面與相鄰面的邊界信息，二是三維曲面的幾何信息，也就是以曲面方程表示的信息。邊界表示算法設(shè)計(jì)較為簡(jiǎn)單，適用于曲面構(gòu)成沒(méi)有過(guò)于復(fù)雜的三維圖形渲染。

WebGL渲染管線通過(guò)WebGL的應(yīng)用編程接口可以直接調(diào)用底層的圖形處理器硬件，完成三維圖形的加速渲染。GPU是專用于圖形處理的顯示硬件，特別是針對(duì)三維圖形的處理，所采用的核心技術(shù)包括光影轉(zhuǎn)換技術(shù)、多矩陣的頂點(diǎn)混合技術(shù)、渲染壓縮技術(shù)等等。

3 系統(tǒng)功能設(shè)計(jì)與實(shí)現(xiàn)

三維圖形渲染系統(tǒng)功能設(shè)計(jì)見(jiàn)圖2。

三維圖形導(dǎo)入/編輯模塊用于實(shí)現(xiàn)外部三維圖形的導(dǎo)入、格式轉(zhuǎn)換、內(nèi)部三維素材編輯等功能。系統(tǒng)支持的文件導(dǎo)入格式包括：MAX、C4D、FBX、OBJ等?？删庉嫷乃夭陌ㄙN圖材質(zhì)、光源及場(chǎng)景。貼圖材質(zhì)支持外部導(dǎo)入，文件格式主要包括JPEG、PNG等常見(jiàn)的圖片格式，WebGL通過(guò)Image DOM接口調(diào)用實(shí)現(xiàn)外部材質(zhì)的導(dǎo)入，并通過(guò)紋理映射函數(shù)將貼圖賦予三維模型表面，同時(shí)可以對(duì)貼圖材質(zhì)的顏色、明暗、反射、折射、透明度、光澤度等屬性進(jìn)行編輯與調(diào)整。光源編輯提供常規(guī)的幾種光源設(shè)置，包括：定向光、點(diǎn)光源、聚光燈和環(huán)境光，可設(shè)置的光源屬性包括通用屬性與特殊屬性兩種，其中通用屬性指的是所有光源都具備的屬性，例如光源的強(qiáng)度和顏色屬性，特殊屬性是指不同光源所具備的屬性，例如光源位置、方向、光距等，光源屬性的設(shè)置對(duì)場(chǎng)景不會(huì)產(chǎn)生影響，只針對(duì)三維模型的貼圖渲染產(chǎn)生效果。場(chǎng)景編輯用于實(shí)現(xiàn)場(chǎng)景的創(chuàng)建、編輯功能，通過(guò)WebGL的Scene對(duì)象可以創(chuàng)建一個(gè)場(chǎng)景，場(chǎng)景默認(rèn)會(huì)添加一個(gè)相機(jī)組件和一個(gè)網(wǎng)格組件，相機(jī)組件用于提供場(chǎng)景顯示的視角，并且可以對(duì)相機(jī)視角的位置坐標(biāo)、旋轉(zhuǎn)角度、寬高比、景深、最近渲染平面、最遠(yuǎn)渲染平面等參數(shù)進(jìn)行設(shè)置。

圖2 三維圖形渲染系統(tǒng)功能設(shè)計(jì)

三維圖形預(yù)處理模塊用于實(shí)現(xiàn)三維圖形的網(wǎng)格計(jì)算、著色器設(shè)置和渲染參數(shù)配置、創(chuàng)建渲染器等功能。三維圖形網(wǎng)格處理就是將三維圖形轉(zhuǎn)換為由若干標(biāo)準(zhǔn)幾何體拼裝而成的網(wǎng)格對(duì)象，再通過(guò)WebGL的BufferGeometry類的實(shí)例化對(duì)象可以對(duì)網(wǎng)格對(duì)象進(jìn)行渲染前的優(yōu)化。著色器配置用于實(shí)現(xiàn)著色器屬性的相關(guān)設(shè)置，WebGL預(yù)置了多種著色器用來(lái)滿足常見(jiàn)的著色需求，例如模擬風(fēng)、雪、雨、霧的天氣環(huán)境等。著色器配置功能可以對(duì)風(fēng)速、風(fēng)向、重力模擬、草的密度、高度等屬性進(jìn)行具體設(shè)置。渲染參數(shù)配置是對(duì)提取后的三維圖形頂點(diǎn)信息進(jìn)行一定閾值范圍的微調(diào)，以矯正部分面的渲染細(xì)節(jié)，例如曲面的邊界識(shí)別精度、數(shù)值范圍等。

三維圖形渲染管理模塊用于實(shí)現(xiàn)系統(tǒng)內(nèi)所有渲染任務(wù)的管理，以及具體任務(wù)的進(jìn)度管理。系統(tǒng)內(nèi)建立的所有渲染任務(wù)可以通過(guò)渲染隊(duì)列模塊進(jìn)行管理，在渲染隊(duì)列中可以查看和管理渲染任務(wù)列表；渲染進(jìn)度管理模塊用于查看和管理具體一個(gè)渲染任務(wù)的渲染進(jìn)度。

三維圖形導(dǎo)出模塊用于查看和管理已完成的渲染任務(wù)，并提供渲染文件的導(dǎo)出接口，用戶可以通過(guò)手動(dòng)設(shè)置，導(dǎo)出指定格式的渲染文件。

4 結(jié)語(yǔ)

在WEB服務(wù)應(yīng)用開(kāi)發(fā)中，圖形處理是非常重要的一項(xiàng)功能，本研究針對(duì)三維圖形處理技術(shù)在WEB服務(wù)中的應(yīng)用發(fā)展過(guò)程和具體的技術(shù)特性進(jìn)行了全面、深入的研究，并提出了以WebGL作為核心技術(shù)的三維圖形處理的解決方案，設(shè)計(jì)與實(shí)現(xiàn)了一個(gè)三維圖形渲染系統(tǒng)，有效提高了WEB服務(wù)在三維圖形處理方面的系統(tǒng)性能。