一種面向Web3D的大規(guī)模場景實(shí)時(shí)繪制方案

葛一波

摘要：網(wǎng)頁端處理大規(guī)模3D場景一直是一個(gè)極具挑戰(zhàn)性的問題。提出了一套面向Web3D的大規(guī)模場景實(shí)時(shí)繪制方案。首先，對場景數(shù)據(jù)進(jìn)行處理，對室外進(jìn)行網(wǎng)格劃分，對室內(nèi)構(gòu)建連通圖，對重復(fù)模型進(jìn)行檢測，建立出適用于Web上展示的場景結(jié)構(gòu)；之后，使用基于興趣區(qū)域（area of interest，AOI）的室外場景管理和基于連通圖的室內(nèi)場景管理結(jié)合的方式進(jìn)行場景加載和繪制。為提高用戶體驗(yàn)，引入關(guān)注度的概念優(yōu)化場景繪制方案。最后通過實(shí)驗(yàn)，證明了方案的有效性。

關(guān)鍵詞：Web3D；AOI；連通圖；場景管理；實(shí)時(shí)繪制

中圖分類號：TP391 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2016）29-0201-03

1引言

隨著互聯(lián)網(wǎng)時(shí)代的到來，將互聯(lián)網(wǎng)與虛擬現(xiàn)實(shí)進(jìn)行結(jié)合所產(chǎn)生的Web3D技術(shù)也隨之應(yīng)運(yùn)而生，其目的在于在互聯(lián)網(wǎng)上構(gòu)架三維虛擬世界。而由于計(jì)算機(jī)用戶對圖形效果要求的不斷提高，三維場景日益復(fù)雜，在虛擬場景的規(guī)?？焖贁U(kuò)大的同時(shí)，場景數(shù)據(jù)的復(fù)雜度也在隨之增加，這使得瀏覽器不可能一次性地加載所有場景數(shù)據(jù)。此種情況下，如何在網(wǎng)頁端處理大規(guī)模3D場景，實(shí)現(xiàn)在線流暢展示，是一個(gè)極具挑戰(zhàn)性的問題。

本文主要設(shè)計(jì)了一種面向Web3D的大規(guī)模場景實(shí)時(shí)繪制方案。方案通過場景數(shù)據(jù)分析，對場景進(jìn)行網(wǎng)格劃分，用于實(shí)現(xiàn)場景的分塊加載，同時(shí)對可重用模型進(jìn)行檢測，便于之后進(jìn)行數(shù)據(jù)重用；引入AOI思想，根據(jù)視點(diǎn)位置，通過多線程對室外場景進(jìn)行分塊加載及繪制；引用Cell&Portal算法思想，構(gòu)建室內(nèi)場景連通關(guān)系圖，實(shí)現(xiàn)室內(nèi)場景分區(qū)加載；通過實(shí)際測試，引入場景模型關(guān)注度的概念，對方案進(jìn)行優(yōu)化。最后，通過實(shí)驗(yàn)，證明本文提出的方案是有效可行的。方案主要使用We-bGL進(jìn)行實(shí)現(xiàn)。具體技術(shù)路線圖如圖1所示。

2場景數(shù)據(jù)預(yù)處理

為了更方便地進(jìn)行后續(xù)場景管理，本文首先對場景數(shù)據(jù)進(jìn)行預(yù)處理。主要分為三部分工作：

1）

針對場景中存在的某些模型對象重復(fù)使用的情況，例如，一個(gè)房間中多個(gè)相同型號的椅子。本文通過將多個(gè)模型對象使用一套模型數(shù)據(jù)及多個(gè)變換矩陣的形式給出，有效降低了需要加載的數(shù)據(jù)量及程序運(yùn)行時(shí)的內(nèi)存消耗。

2）針對室外場景，本文將整個(gè)場景地圖進(jìn)行網(wǎng)格劃分，并對網(wǎng)格進(jìn)行編號，然后將模型頂點(diǎn)投影到網(wǎng)格平面，記錄下投影到的網(wǎng)格編號，即將模型綁定到了一個(gè)或多個(gè)網(wǎng)格上，便于后續(xù)場景管理策略的實(shí)現(xiàn)。如圖2 a）所示，B0、B1、B2、B3代表了室外建筑物，可以看出B0占據(jù)一個(gè)網(wǎng)格，而B1、B2、B3分布在多個(gè)網(wǎng)格中。圖2b）給出了網(wǎng)格A、B、C、D對應(yīng)的數(shù)據(jù)結(jié)構(gòu)。

3）針對室內(nèi)場景，引人Cell&Portal算法的思想，通過分析室內(nèi)房間的連通關(guān)系，將整個(gè)室內(nèi)空間按照房間進(jìn)行分區(qū)，實(shí)現(xiàn)室內(nèi)場景分區(qū)管理，而像過道等特殊空間也可用房間進(jìn)行表示。如圖3左圖所示，門、窗等連通面代表了房間的連通關(guān)系，房間內(nèi)則附帶一些家具模型信息，右圖則給出了構(gòu)筑物B0與室內(nèi)房間構(gòu)建出的連通關(guān)系圖。

3場景管理策略

為對大規(guī)模場景進(jìn)行實(shí)時(shí)渲染，需要進(jìn)行有效的場景管理，本文分別從室內(nèi)與室外進(jìn)行闡述。

3.1基于AOI的室外場景分塊加載與繪制

在現(xiàn)實(shí)生活中，人們的視野是有一定限度的，超過視野的區(qū)域是看不清，也就不會過多關(guān)注，而會將更多注意力放在眼前物體上，在虛擬場景中也是同樣的道理。通過視點(diǎn)坐標(biāo)對場景對象集進(jìn)行過濾，這即是AOI的思想。

通過前述網(wǎng)格劃分，本文很容易將AOI應(yīng)用于算法中。如圖4所示，考慮到場景漫游時(shí)需要頻繁旋轉(zhuǎn)視角的特點(diǎn)，本文將距視點(diǎn)坐標(biāo)一定范圍的圓形區(qū)域作為興趣區(qū)域，即圖4中粗線描述的圓形區(qū)域，而將興趣區(qū)域覆蓋的網(wǎng)格作為需要繪制的區(qū)域，對這些網(wǎng)格內(nèi)綁定的模型對象進(jìn)行顯示。同時(shí)，為了提高渲染的實(shí)時(shí)性，不會出現(xiàn)當(dāng)前顯示區(qū)域模型文件還未加載的情況，本文在興趣區(qū)域基礎(chǔ)上擴(kuò)充一定范圍作為加載區(qū)域，即圖4中細(xì)線劃定的圓形區(qū)域，而將該區(qū)域覆蓋的網(wǎng)格作為需要加載的區(qū)域，對這些網(wǎng)格內(nèi)綁定的模型對象對應(yīng)的數(shù)據(jù)進(jìn)行預(yù)加載。這樣在視點(diǎn)運(yùn)動(dòng)時(shí)，從一個(gè)網(wǎng)格運(yùn)動(dòng)到另一個(gè)網(wǎng)格，變化后的顯示區(qū)域并未超出運(yùn)動(dòng)前的加載區(qū)域，從而不需要等待數(shù)據(jù)的加載完成即可實(shí)時(shí)進(jìn)行新區(qū)域的場景繪制。

程序運(yùn)行時(shí)，由于場景繪制并不需要等待數(shù)據(jù)加載的完成，場景繪制與場景加載可以分開進(jìn)行，使用多線程可以很好地進(jìn)行上述工作。本文工作是在WebGL基礎(chǔ)上展開，HTML5很好的提供了多線程的支持，在具體實(shí)現(xiàn)上，本文將數(shù)據(jù)加載與模型對象構(gòu)建的任務(wù)交由一工作線程進(jìn)行，而主線程主要負(fù)責(zé)當(dāng)前場景渲染隊(duì)列的管理，將顯示區(qū)域的模型對象添加到渲染隊(duì)列進(jìn)行繪制。

在程序運(yùn)行之初，首先根據(jù)視點(diǎn)位置加載模型數(shù)據(jù)，然后根據(jù)模型數(shù)據(jù)進(jìn)行模型繪制；之后在場景漫游中則根據(jù)視點(diǎn)位置的移動(dòng)，使用增量和減量的形式，如圖5所示，對新進(jìn)入顯示區(qū)域的增量網(wǎng)格中的模型對象添加到渲染隊(duì)列，對離開顯示區(qū)域的減量網(wǎng)格中的模型對象進(jìn)行移除。這里需要注意，一個(gè)模型對象可能覆蓋多個(gè)網(wǎng)格，當(dāng)這多個(gè)網(wǎng)格有一個(gè)存在于顯示區(qū)域，就需要對該模型對象進(jìn)行繪制，因此程序在運(yùn)行時(shí)需要對模型對象進(jìn)行計(jì)數(shù)，當(dāng)模型對象所在某個(gè)網(wǎng)格進(jìn)入顯示區(qū)域，其顯示計(jì)數(shù)即加1，離開則需要減1，只有當(dāng)模型對象顯示計(jì)數(shù)為0時(shí)，才將其從渲染隊(duì)列中刪除。同理，使用相同的方式維護(hù)加載區(qū)域。

3.2基于連通圖的室內(nèi)場景分區(qū)加載與繪制

當(dāng)在室內(nèi)進(jìn)行場景漫游時(shí)，考慮到室內(nèi)場景結(jié)構(gòu)復(fù)雜，房間與房間相互阻隔，當(dāng)漫游到某個(gè)房間，我們不會關(guān)心它不相鄰的房間的結(jié)構(gòu)情況，因此為減少不必要的渲染，本文通過前述構(gòu)建的室內(nèi)場景連通圖，對室內(nèi)采用分區(qū)加載和繪制。具體過程如下：

1）當(dāng)攝像機(jī)處于室外時(shí)，加載并繪制室外場景的同時(shí)，對于室外構(gòu)筑物連通的室內(nèi)房間進(jìn)行加載并繪制，而與該房間相鄰的房間則進(jìn)行預(yù)加載。如圖3，R0即為與B0構(gòu)筑物相鄰的房間，需要進(jìn)行顯示，R1、R2、R3是與R0相鄰的對象，需要進(jìn)行預(yù)加載。

2）當(dāng)從室外進(jìn)入室內(nèi)某個(gè)房間，根據(jù)預(yù)加載的數(shù)據(jù)繪制與該房間相鄰的房間，且預(yù)加載與相鄰房間連通的房間。

3）當(dāng)從一個(gè)房間通過連通面（門、窗等）運(yùn)動(dòng)到另一房間，將與另一房間相鄰房間加入渲染隊(duì)列進(jìn)行繪制，且將不相關(guān)的房間從渲染隊(duì)列中移除。加載數(shù)據(jù)的流程也是如此。

需要注意的是，在加載或繪制某個(gè)房間時(shí)，需要以相同方式處理房間內(nèi)包含的模型對象。與室外場景管理類似，加載數(shù)據(jù)也需要單獨(dú)使用一個(gè)工作線程來進(jìn)行。

4基于關(guān)注度的優(yōu)先繪制算法

以上場景管理策略在實(shí)際測試中，我們發(fā)現(xiàn)了一個(gè)問題：在進(jìn)行室外場景漫游時(shí)，由于程序只是繪制攝像機(jī)相鄰區(qū)域內(nèi)的模型對象，對稍遠(yuǎn)一點(diǎn)的模型對象則采用預(yù)加載而不繪制的處理方式，這使得實(shí)際運(yùn)行時(shí)，一些距離稍遠(yuǎn)而體積很大的模型對象，由于距離遠(yuǎn)而未繪制，只有當(dāng)攝像機(jī)離它稍近時(shí)才顯示出來，這顯然沒達(dá)到預(yù)期的效果，用戶對一些體積稍大而距離并不太遠(yuǎn)的構(gòu)筑物也比較敏感。本文針對這一情況提出了相應(yīng)改進(jìn)算法。

首先，本文引入關(guān)注度的概念。關(guān)注度指的是用戶對于場景中的某個(gè)模型的關(guān)注程度。關(guān)注度受到三個(gè)主要因素的影響：模型的體積大小，模型數(shù)據(jù)復(fù)雜度，模型距離攝像機(jī)的距離。模型的體積越大，復(fù)雜度越低，距離越短，模型的關(guān)注度越高。所以可以列出以下公式：

attentionLevel=100* boxSize/dataSize/cameraDistance

其中boxSize是指模型包圍盒的體積，dataSize是指模型數(shù)據(jù)復(fù)雜度，cameraDistance是指攝像機(jī)距離模型的距離，100為擴(kuò)大常量，便于取值判斷。當(dāng)attentionLevel大于0.01（實(shí)驗(yàn)數(shù)據(jù)）時(shí)，表示模型是易受到關(guān)注的。

這里，對上述室外場景管理策略進(jìn)行相應(yīng)更改。在程序?qū)虞d區(qū)域的模型對象進(jìn)行數(shù)據(jù)加載時(shí)，計(jì)算出其相應(yīng)的關(guān)注度，并以此判斷模型是否易受到關(guān)注；當(dāng)確定模型易受到關(guān)注，則將模型直接加入渲染隊(duì)列來進(jìn)行顯示，這樣使得加載區(qū)域中關(guān)注度高的模型對象能得到優(yōu)先繪制，從而提供給用戶更好的視覺體驗(yàn)。

5實(shí)驗(yàn)結(jié)果

最后本文通過實(shí)驗(yàn)對上文提出的方法進(jìn)行測試。測試環(huán)境為Windows 10操作系統(tǒng)，使用Chrome瀏覽器進(jìn)行展示，硬件配置為Intel（R）Core（TM）i5-2400 CPU@3.IOGHz處理器、8.0GB內(nèi)存、NVIDIA GeForce GTX460顯卡。針對基本點(diǎn)、線、面數(shù)據(jù)量200M、模型對象個(gè)數(shù)為10000個(gè)左右的數(shù)據(jù)進(jìn)行測試。使用算法前后對比如下：

從表格中可以看出，使用本文算法后，首次加載時(shí)間明顯縮短，內(nèi)存消耗減小，且FPS顯著提高，這些都能很好優(yōu)化用戶體驗(yàn)，且本文在測試不使用本文算法的情況時(shí)，由于數(shù)據(jù)量很大，經(jīng)常會出現(xiàn)瀏覽器崩潰的情況。圖6給出了使用算法后的實(shí)驗(yàn)效果。

6結(jié)論

以上實(shí)驗(yàn)表明，本文提出的方案能有效降低系統(tǒng)資源消耗，提高渲染效率，為大規(guī)模場景實(shí)時(shí)渲染提供有力支撐。