馬 亮,王 彬
(1.南京交通職業(yè)技術(shù)學(xué)院信息化建設(shè)與管理辦公室,江蘇 南京 211188;2.河海大學(xué)海洋學(xué)院,江蘇 南京 210024)
近年來,軟件正從桌面端向Web端、移動端發(fā)展,為了提升用戶體驗(yàn),軟件數(shù)據(jù)的呈現(xiàn)和交互方式一直處于快速變化之中。二維的數(shù)據(jù)呈現(xiàn)和交互方式越發(fā)不能滿足日益提高的用戶體驗(yàn)的需求,基于三維模型的數(shù)據(jù)呈現(xiàn)和交互更符合用戶的認(rèn)知特點(diǎn)。計(jì)算機(jī)技術(shù)與網(wǎng)絡(luò)技術(shù)的發(fā)展使面向網(wǎng)絡(luò)的三維可視化成為計(jì)算機(jī)領(lǐng)域的重要發(fā)展方向[1]。利用Web三維技術(shù)相關(guān)理論及研究成果,實(shí)現(xiàn)跨平臺、全方位三維場景展示以及具備豐富、易擴(kuò)充的交互操作,已經(jīng)成為三維應(yīng)用開發(fā)的一種趨勢[2]。
Web三維技術(shù)通過Web 瀏覽器呈現(xiàn)虛擬場景,主要包含三維建模、人機(jī)交互以及實(shí)時(shí)渲染[3],是在網(wǎng)頁中實(shí)現(xiàn)虛擬現(xiàn)實(shí)技術(shù)的總稱,Web三維場景中的模型,可以實(shí)現(xiàn)多角度觀察,并能通過鍵盤、鼠標(biāo)等輸入設(shè)備與場景和單體模型進(jìn)行交互,讓瀏覽者產(chǎn)生更多的操作自主感。Web三維實(shí)現(xiàn)技術(shù)有Java3D、VRML、X3D、shockwave3D、WebGL等。上述大部分技術(shù)選型運(yùn)行于瀏覽器需要安插插件,存在著各種缺陷,已被逐步淘汰。
2010年以來,WebGL三維技術(shù)逐漸成熟,為Web三維技術(shù)領(lǐng)域帶來了劃時(shí)代的改變。WebGL技術(shù)完美解決了以往Web三維技術(shù)的幾乎全部缺陷。盡管目前WebGL還處于發(fā)展中,但是其發(fā)展的潛力巨大,它為Web三維技術(shù)應(yīng)用開發(fā)指明了新的方向,具有明顯強(qiáng)勁的發(fā)展勢頭[4],是構(gòu)建基于Web的虛擬仿真實(shí)驗(yàn)室的首選三維技術(shù)。
1.1.1 WebGL技術(shù)起源及優(yōu)勢
OpenGL ES是OpenGL的一個子集,此套標(biāo)準(zhǔn)的推出是為了滿足嵌入式設(shè)備開發(fā)需求和設(shè)備環(huán)境;而WebGL是基于OpenGL ES標(biāo)準(zhǔn)編制,用于網(wǎng)頁端渲染三維畫面。2011年3月,多媒體技術(shù)標(biāo)準(zhǔn)化組織Khronos基于OpenGL ES 2.0發(fā)布了WebGL 1.0標(biāo)準(zhǔn)規(guī)范;2017年1月,基于OpenGLES 3.0發(fā)布了WebGL 2.0規(guī)范。WebGL的功能是通過增加OpenGL ES的一個JavaScript綁定而實(shí)現(xiàn)的。WebGL運(yùn)行于html5的canvas標(biāo)簽中,通過操作canvas標(biāo)簽支持的WebGLRenderingContext3D繪制實(shí)例對象,向GPU傳輸繪制數(shù)據(jù)、繪制參數(shù)、著色器代碼(GLSL ES語言編寫),經(jīng)過GPU全流程渲染管線的計(jì)算,最終渲染出三維畫面,并與Web網(wǎng)頁版式進(jìn)行合成。WebGL網(wǎng)頁客戶端技術(shù)組成如圖1所示。
圖1 WebGL網(wǎng)頁客戶端技術(shù)組成
WebGL具有四大優(yōu)點(diǎn):(1)不需要安裝插件,大部分移動端、PC端瀏覽器都原生支持WebGL,2013年微軟IE11也支持了WebGL;(2)三維場景渲染速度較快,WebGL可調(diào)用用戶終端GPU硬件渲染三維場景;
(3)具有 HTML5官方支持的標(biāo)準(zhǔn);(4)基于OpenGL標(biāo)準(zhǔn)開發(fā),基礎(chǔ)牢固,標(biāo)準(zhǔn)成熟。雖然WebGL面世時(shí)間較短,但WebGL發(fā)展很快,是順應(yīng)技術(shù)趨勢、適應(yīng)性廣泛的三維技術(shù)選型。
1.1.2 WebGL編程原理
1.1.2.1 圖形流水管線
目前GPU主要采用圖形流水管線結(jié)構(gòu)處理繪制數(shù)據(jù),完成三維場景的渲染。整個處理過程分多步驟、多階段進(jìn)行,繪制數(shù)據(jù)逐步從流水管線的上一個階段傳送到下一階段。進(jìn)入圖形流水管線的數(shù)據(jù)主要包含三維模型數(shù)據(jù)和著色器指令,數(shù)據(jù)主要依次經(jīng)過以下圖形流水管線:(1)頂點(diǎn)著色器;(2)圖元裝配;(3)光柵化;(4)片段著色器;(5)像素處理(①裁剪測試,②多重采樣片段運(yùn)算,③模板測試,④嘗試緩存測試,⑤融合,⑥抖動);(6)繪制緩存。只要采用了GPU硬件加速,硬件內(nèi)的渲染過程就必須遵循上述步驟,無論OpenGL、WebGL、DirectX。因此,WebGL處理圖形數(shù)據(jù)也遵循和圍繞上述處理步驟和流程,對應(yīng)GPU的物理流水管線的各階段。
1.1.2.2 WebGL編程技術(shù)
WebGL標(biāo)準(zhǔn)與OpenGL、OpenGL ES核心標(biāo)準(zhǔn)是一樣的,只是為了適配不同的應(yīng)用環(huán)境,在非核心標(biāo)準(zhǔn)上有一定的區(qū)別,OpenGL適用于桌面應(yīng)用,OpenGL ES適用于嵌入式設(shè)備應(yīng)用,WebGL適用于網(wǎng)頁應(yīng)用。WebGL采用的是可編程的圖形流水管線,在整個圖形流水管線中,頂點(diǎn)著色器、片段著色器的功能是可以使用GLSL ES編程語言編程介入,以控制GPU渲染的效果,其它圖形流水管線階段不能編程,均有固定處理方式。WebGL渲染流程如圖2所示。
基于WebGL繪制三維畫面,三維模型部分?jǐn)?shù)據(jù)通過JS腳本從模型文件中加載入頂點(diǎn)緩沖區(qū),后由GPU調(diào)用,三維模型數(shù)據(jù)一般包含頂點(diǎn)坐標(biāo)、繪制索引、頂點(diǎn)顏色、法線、紋理圖像、紋理坐標(biāo)、光線數(shù)據(jù)等;坐標(biāo)變換所需要的變換矩陣及其它數(shù)據(jù)也是由JS腳本計(jì)算并傳入GPU;頂點(diǎn)著色器、片段著色器需要的GLSL ES指令,一般也是由JS腳本從文件中讀取,然后以字符串的形式傳入GPU。
頂點(diǎn)著色器主要執(zhí)行與頂點(diǎn)相關(guān)的操作,如:(1)調(diào)用緩沖區(qū)的頂點(diǎn)坐標(biāo)數(shù)據(jù),結(jié)合傳入的模型變換矩陣,對頂點(diǎn)坐標(biāo)進(jìn)行變換;(2)計(jì)算并分配頂點(diǎn)法線;(3)計(jì)算并分配頂點(diǎn)顏色等。片元著色器主要對紋理、光照等進(jìn)行逐片元計(jì)算。
圖2 WebGL渲染流程
目前虛擬現(xiàn)實(shí)應(yīng)用大概分四種類型:(1)桌面虛擬現(xiàn)實(shí)系統(tǒng),顯示器直接顯示三維畫面,無其它輔助交互和顯示設(shè)備;(2)沉浸式虛擬現(xiàn)實(shí)系統(tǒng),通過頭戴顯示器(HMD)或者VR盒子觀看三維畫面,通過數(shù)據(jù)手套等虛擬交互設(shè)備完成與虛擬場景的互動;(3)分布式虛擬現(xiàn)實(shí)系統(tǒng),基于網(wǎng)絡(luò)的虛擬環(huán)境,將沉浸式虛擬現(xiàn)實(shí)與分布式交互結(jié)合,把不同方位的用戶連接在同一個虛擬現(xiàn)實(shí)環(huán)境中;(4)增強(qiáng)現(xiàn)實(shí)系統(tǒng),將真實(shí)環(huán)境與虛擬環(huán)境結(jié)合,使用者透過顯示畫面可以看到真實(shí)世界,并疊加虛擬場景。
普通Web三維應(yīng)用,實(shí)現(xiàn)了桌面式虛擬現(xiàn)實(shí),不能滿足瀏覽者對沉浸式體驗(yàn)的要求。2014年Mozilla基金會的Vladimir Vukicevic提出WebVR,2017年萬維網(wǎng)聯(lián)盟(W3C)發(fā)布了WebVR 1.0規(guī)范初稿,WebVR 2.0也在積極次修訂之中,WebVR目前還是一種實(shí)驗(yàn)性Web功能。WebVR關(guān)鍵優(yōu)勢在于,同一個WebVR應(yīng)用能跨設(shè)備、免安裝、輕量化、體驗(yàn)一致。用戶在PC端使用主流的VR頭戴式顯示器(HMD),手機(jī)端使用VR盒子,就能獲得一致的沉浸式虛擬現(xiàn)實(shí)體驗(yàn)。
開發(fā)WebGL三維應(yīng)用,建模三維模型是關(guān)鍵環(huán)節(jié)之一。目前主要有兩種WebGL三維場景構(gòu)建類型,即360°全景照片式的三維場景和基于三維模型的三維場景。
360°全景照片式的三維場景,類似身處球形或柱形照片墻之內(nèi)進(jìn)行瀏覽。照片采用現(xiàn)場拍攝的實(shí)景照片拼接而成。三維頁面渲染攝像機(jī)視角,通過操作鍵盤、鼠標(biāo)、數(shù)據(jù)手套等,模擬攝像機(jī)的各種操作,以實(shí)現(xiàn)對虛擬場景進(jìn)行360°瀏覽。基于全景照片的三維場景并不會對場景中的物體進(jìn)行三維建模,此處所謂建模是指拍照及拼接,不能對三維場景中物體進(jìn)行單獨(dú)操作,也并不能實(shí)現(xiàn)真正任意全景無死角漫游,虛擬場景的觀察點(diǎn)通過預(yù)設(shè),已經(jīng)固定,并且瀏覽只能原地360°觀看。
由于360°全景照片式的虛擬現(xiàn)實(shí),虛擬場景的展示效果依托于對360°實(shí)景照片的拼接,所以開發(fā)成本低、開發(fā)時(shí)間短,能滿足部分虛擬場景展示需求,是目前虛擬現(xiàn)實(shí)產(chǎn)品中應(yīng)用較多的模式[5]。
對于瀏覽體驗(yàn)要求高、交互較復(fù)雜的三維場景,360°全景照片虛擬現(xiàn)實(shí)顯然不能滿足需求。為了在虛擬空間實(shí)現(xiàn)全視角瀏覽,進(jìn)行真正的全景無死角任意漫游,實(shí)現(xiàn)對虛擬空間中單個模型物體的交互,需要通過構(gòu)建三維模型來構(gòu)造虛擬場景?,F(xiàn)階段三維建模主要方式有幾何人工建模、圖片建模、激光建模、航空傾斜攝影建模等,一般地,根據(jù)建模對象的特征和設(shè)備條件來選擇建模方式。
2.2.1 幾何人工建模
幾何人工建模是指使用建模軟件從零開始建模,如3Ds Max、Maya、Blender等,幾何人工建模方式生成的模型幾何精度高、紋理精細(xì),但是建模工作量較大、時(shí)間較長、模型不夠真實(shí)。
2.2.2 圖片建模
逆向建模已存在的實(shí)物。建模流程如下:拍照,照片修飾,照片導(dǎo)入,逆向重建,模型修復(fù)。此類軟件有ImageModeler、Agisofe photoScan等。進(jìn)行圖片建模,材質(zhì)反光性、拍照角度、拍照環(huán)境、照片數(shù)量等因素,對建模質(zhì)量都有影響,模型生成后一般需要導(dǎo)入3Ds max之類的建模軟件,對模型進(jìn)行改進(jìn)和修復(fù)。圖片建模方式適合小規(guī)格物體的建模,若硬件條件充足,應(yīng)優(yōu)先使用精度更高的激光建模方式替代照片建模。
2.2.3 激光建模
激光建模模式有兩種:激光三維掃描和激光雷達(dá)建模。這兩類建模采用了不同類型的激光,建模適用不同的現(xiàn)場。
2.2.3.1 激光三維掃描建模
激光三維掃描采用相位激光與脈沖激光,多應(yīng)用于工業(yè)領(lǐng)域。獲取空間點(diǎn)云數(shù)據(jù),可建立結(jié)構(gòu)不規(guī)則物體、復(fù)雜場景的三維模型。激光三維掃描儀主要應(yīng)用于建筑物、小型物體、保護(hù)文物、零件、隧道的逆向建模。
2.2.3.2 激光雷達(dá)建模
激光雷達(dá)采用可見光波段和紅外波段,是一種集激光掃描儀、全球定位系統(tǒng)(GPS)、慣性導(dǎo)航系統(tǒng)(INS)、高分辨率數(shù)碼相機(jī)等技術(shù)于一身的光機(jī)電一體化集成系統(tǒng)。激光雷達(dá)建模多使用于城市等大區(qū)域的三維建模、繪制地形等,可獲得激光點(diǎn)云數(shù)據(jù)并生成精確的數(shù)字高程模型(DEM)、數(shù)字表面模型(DSM),同時(shí)獲取物體DOM(數(shù)字正射影像)信息,通過對激光點(diǎn)云數(shù)據(jù)的處理,可得到真實(shí)的三維場景圖[6]。激光雷達(dá)建模的優(yōu)點(diǎn):(1)可穿透植被,能完整測量被覆蓋的地形;(2)獲取的數(shù)據(jù)精度高;(3)單次掃描獲取數(shù)據(jù)的面積大。激光雷達(dá)建模的不足:(1)設(shè)備昂貴;(2)物體紋理圖像不能同時(shí)被獲取,需后期采集紋理圖像進(jìn)行貼圖。
2.2.3.3 航空傾斜攝影建模
航空傾斜攝影是航空攝影建模中最流行的,航空傾斜攝影普遍用于對大范圍場景進(jìn)行建模,比如一個社區(qū)、一個城市等,航空傾斜攝影能自動對大范圍、復(fù)雜的場景數(shù)據(jù)進(jìn)行高效率的采集,然后由專業(yè)軟件對數(shù)據(jù)進(jìn)行自動化處理、自動貼圖,極大地提升了模型生成效率。航空傾斜攝影一般通過無人機(jī)搭載五鏡頭相機(jī)進(jìn)行操作,從四個傾斜角度、一個垂直角度采集影像數(shù)據(jù)、定位信息、紋理信息,如圖3所示。航空傾斜攝影建模具有建模成本低、自動化處理數(shù)據(jù)、可量測性強(qiáng)、模型逼真等特點(diǎn)[7]。
圖3 航空傾斜攝影方式
但是,航空傾斜攝影一旦無法拍攝到被遮擋的物體表面,會導(dǎo)致模型有破面。實(shí)際生產(chǎn)中,會將三維激光掃描和航空傾斜攝影相結(jié)合,通過航空傾斜攝影來獲取空中視角下能拍攝的物體表面的數(shù)據(jù),通過三維激光掃描來獲取空中視角下觸及不到的物體的表面數(shù)據(jù)。
基于WebGL的三維場景載入網(wǎng)頁,畫面都是由顯卡在中央處理器的協(xié)助下實(shí)時(shí)運(yùn)算并渲染出來的。三維模型數(shù)據(jù)量大,運(yùn)行時(shí)經(jīng)常出現(xiàn)加載慢、畫面卡頓的情況,加載速度與硬件性能已成為限制Web三維效果的瓶頸,如何快速從服務(wù)器獲取模型并解析、加載、渲染仍然是一個需要優(yōu)化的問題。本文認(rèn)為在不確定用戶客戶端設(shè)備性能和網(wǎng)絡(luò)性能的情況下,可以從單體三維模型、三維場景、網(wǎng)絡(luò)加載機(jī)制三方面進(jìn)行優(yōu)化。
單體三維模型優(yōu)化一般是在模型構(gòu)建階段完成,目標(biāo)是在符合WebGL數(shù)據(jù)加載格式標(biāo)準(zhǔn)、不影響或較少影響渲染質(zhì)量、滿足功能的情況下,通過對模型數(shù)據(jù)進(jìn)行有損或無損方式的預(yù)處理,實(shí)現(xiàn)三維模型輕量化、模型數(shù)據(jù)內(nèi)部組織結(jié)構(gòu)優(yōu)化。單體三維模型的優(yōu)化,一般通過對模型文件格式的選擇和模型幾何數(shù)據(jù)優(yōu)化來完成。
3.1.1 文件格式
三維模型的文件格式代表了模型數(shù)據(jù)標(biāo)準(zhǔn),對模型數(shù)據(jù)組織結(jié)構(gòu)的優(yōu)化,部分是通過選擇模型數(shù)據(jù)文件格式來完成的。由于建模軟件眾多,導(dǎo)致生成的格式眾多,如3Ds、dae、obj、stl、glTF等。對于單體模型,本文推薦使用glTF格式文件。所有WebGL框架和引擎都提供對glTF文件格式的支持,跨平臺特點(diǎn)顯著,已成為Web的三維模型的事實(shí)標(biāo)準(zhǔn)。glTF文件由JSON文件和二進(jìn)制文件組成。
glTF是由Khronos組織制訂并推進(jìn),該組織正是OpenGL、WebGL等標(biāo)準(zhǔn)的制訂者。glTF格式的制訂迎合了網(wǎng)絡(luò)傳輸、客戶端解析的需要,實(shí)現(xiàn)了三維模型數(shù)據(jù)在瀏覽器中的動態(tài)、快速地加載和展示,該文件格式將客戶端解析的部分計(jì)算壓力前置到了建模軟件的模型文件的生成階段,最大程度地減少使用WebGL及其它API運(yùn)行時(shí)的計(jì)算處理,可以不用額外解析而直接被加載到GL緩沖器中。glTF格式的優(yōu)點(diǎn):(1)文件被合理壓縮;(2)直接加載入GL緩沖,不需要額外解析;(3)加載速度快;(4)三維場景描述完整,(5)可擴(kuò)展。
3.1.2 單體三維模型幾何數(shù)據(jù)優(yōu)化
模型輕量化是通過對模型幾何表面數(shù)據(jù)優(yōu)化來完成,優(yōu)化的方式包括:(1)在不影響展示效果和功能的情況下,將模型中的部分面進(jìn)行刪除,一般通過優(yōu)化工具進(jìn)行;(2)參數(shù)化處理有規(guī)則模型、拉伸體模型,以減少面的數(shù)量;(3)在不影響展示效果和功能的情況下,對低重要性的復(fù)雜模型表面,可以考慮使用紋理貼圖替代多邊形建模。
三維場景優(yōu)化是指大批量模型情形下的渲染優(yōu)化。三維場景的優(yōu)化主要通過以下兩種方式完成:基于LOD層次模型的優(yōu)化、場景管理優(yōu)化。
3.2.1 基于多分辨率LOD技術(shù)的模型加載優(yōu)化
目前,基于網(wǎng)絡(luò)和計(jì)算終端現(xiàn)狀,對三維場景數(shù)據(jù)進(jìn)行簡化和多分辨率的可視化渲染,已成現(xiàn)階段三維數(shù)據(jù)傳輸、渲染的主流方法。LOD(Levels of Detail)是指多細(xì)節(jié)層次,用不同級別的幾何體來表示物體,距離視點(diǎn)越遠(yuǎn)則加載的模型越粗糙,距離視點(diǎn)越近則加載的模型越精細(xì),從而在不影響視覺效果的前提下提高顯示效率并降低存儲[8]。多分辨率LOD技術(shù)中,一般基于金字塔結(jié)構(gòu)組織瓦片數(shù)據(jù),如圖4所示。用四叉樹數(shù)據(jù)結(jié)構(gòu)來組織瓦片金字塔,是較好的選擇。對原始模型的結(jié)構(gòu),用四叉樹結(jié)構(gòu)分層、分塊,能保證空間索引系統(tǒng)與層和塊能嚴(yán)格統(tǒng)一。
本文推薦將3D Tiles 標(biāo)準(zhǔn)作為三維瓦片數(shù)據(jù)格,它繼承了glTF的優(yōu)點(diǎn),添加了漸進(jìn) LOD方法,場景的復(fù)雜度根據(jù)視距進(jìn)行調(diào)整。漸進(jìn)LOD方法不是直接進(jìn)行模型置換,而是隨著視點(diǎn)靠近模型,在模型上不斷地補(bǔ)充細(xì)節(jié)。3D Tiles適合大規(guī)模三維場景的傳輸、顯示,支持對DEM地形、BIM、大規(guī)模建筑模型、傾斜攝影數(shù)據(jù)、點(diǎn)云數(shù)據(jù)等各種類型三維數(shù)據(jù)的瓦片化表達(dá)。
圖4 瓦片金字塔模型
3.2.2 場景管理優(yōu)化
如何有序管理包含大量三維模型的場景,建立較好的場景層次關(guān)系,為場景篩選、遮擋剔除、可視性處理、碰撞檢測等提供條件。
有些三維場景非常復(fù)雜,基于Z緩沖方法處理可見性問題并不合理。有時(shí),在繪制三維場景時(shí)CPU使用率已經(jīng)接近百分之百,這種狀況下運(yùn)用遮擋剔除的效果并不明顯??梢钥紤]使用一些預(yù)生成信息去降低渲染時(shí)遮擋剔除的計(jì)算復(fù)雜度,可以顯著提高遮擋剔除的效率[9]。預(yù)生成信息,是指利用場景管理層次體系算法生成的輔助數(shù)據(jù)結(jié)構(gòu),可以將場景分層:先分區(qū),再分物體,然后分割到多邊形。場景管理中經(jīng)常用到兩個層次體系:(1)BSP樹,用于加速剔除;(2)包圍體樹,用于碰撞檢測。
網(wǎng)絡(luò)加載優(yōu)化主要利用現(xiàn)有網(wǎng)絡(luò)技術(shù)特性,優(yōu)化三維模型數(shù)據(jù)在網(wǎng)絡(luò)中傳速的速度。本文提出一種基于WebRTC的模型文件傳輸機(jī)制。
WebRTC(Web Real-Time Communications),用于實(shí)現(xiàn)瀏覽器之間的音頻、視頻及數(shù)據(jù)共享,已被納入萬維網(wǎng)聯(lián)盟的W3C推薦標(biāo)準(zhǔn),目前主流瀏覽器均支持WebRTC技術(shù)。目前WebRTC技術(shù)主要應(yīng)用于流媒體播放、即時(shí)通信系統(tǒng)、在線視頻通話等領(lǐng)域?;赪ebRTC技術(shù),利用WebTorrent協(xié)議在瀏覽器之間建立一套文件對等傳輸機(jī)制,將瀏覽WebGL應(yīng)用的終端用戶組成一個P2P的對等網(wǎng)絡(luò),瀏覽器節(jié)點(diǎn)之間就可以互相提供資源傳輸服務(wù),共享對等網(wǎng)絡(luò)中的文件。
上述基于WebRTC的P2P網(wǎng)絡(luò),如果用于傳輸WebGL應(yīng)用中的三維模型,將有效地提升模型加載的速度。當(dāng)用戶瀏覽三維場景需要加載模型時(shí),不僅只從服務(wù)器端獲取,還可以從具有這些模型數(shù)據(jù)的其他用戶那里獲取。隨著在線用戶數(shù)量的增加,傳統(tǒng)中心式的服務(wù)器負(fù)載會越來越高,而WebRTC對等網(wǎng)的傳輸效率隨著在線用戶的增加越來越高。
WebGL技術(shù)的出現(xiàn)有其必然性,WebGL技術(shù)的優(yōu)點(diǎn)就是它要解決的問題:兼容各種瀏覽器、無插件、硬件加速、基于既有成熟標(biāo)準(zhǔn)的子集。通過上述優(yōu)點(diǎn)幾乎可以預(yù)見WebGL技術(shù)的未來。
長春師范大學(xué)學(xué)報(bào)2022年2期