許昊天

摘要：WebGL技術(shù)使得網(wǎng)頁具有了利用GPU進行三維繪制和渲染的能力，從而使得我們可以在二維網(wǎng)頁上展示三位內(nèi)容。然而網(wǎng)頁的計算和存儲資源十分有限，而且所有的數(shù)據(jù)需要在打開網(wǎng)頁后通過網(wǎng)絡(luò)獲取。對于大規(guī)模三維虛擬場景模型，其在網(wǎng)絡(luò)上傳輸效率是一個瓶頸問題，極大地限制了應(yīng)用的規(guī)模。本文針對性地提出了一套模型輕量化策略，同時還提出了一個基于WebRTC的對等覆蓋網(wǎng)絡(luò)用于傳輸三維虛擬場景數(shù)據(jù)，大幅提升了傳輸效率和網(wǎng)頁可以支持的三維應(yīng)用規(guī)模上限。

關(guān)鍵詞：WebGL，WebRTC，Web3D

中圖分類號：TP311? ? ? ? 文獻標識碼：A? ? ? ? 文章編號：1009-3044（2019）03-0215-03

引言

得益于Web技術(shù)的快速發(fā)展，網(wǎng)頁可以作為一個載體去表達越來越豐富的內(nèi)容。隨著近年來VR技術(shù)的火熱，WebVR得以快速發(fā)展。我們需要將一些規(guī)模較大的三維場景模型在Web上可視化，這中間就涉及許多技術(shù)難題。首先，一個Web3D應(yīng)用首先要通過網(wǎng)絡(luò)下載模型文件，而大規(guī)模的三維場景在網(wǎng)絡(luò)上的傳輸需要耗費很長時間，這就導(dǎo)致了因等待時間過長而帶來的用戶體驗的下降。其次，Web應(yīng)用能獲取到的瀏覽器的計算資源和存儲資源遠不及運行在操作系統(tǒng)上的應(yīng)用程序，而三維繪制和渲染又十分依賴于這些資源。這些極大限制了目前Web3D應(yīng)用的規(guī)模大小。

本文目標是將大規(guī)模城市級三維場景在Web上進行可視化，主要做了以下工作。首先，為了減少三維模型在網(wǎng)絡(luò)上的傳輸時間，使用基于WebRTC的對等網(wǎng)絡(luò)來傳輸三維模型。其次，結(jié)合對現(xiàn)有三維模型格式的分析，提出了一套模型輕量化預(yù)處理策略和一種適用于網(wǎng)絡(luò)傳輸?shù)娜S模型格式。最后，提出了一套基于用戶行為和視覺貢獻度的漸進式加載策略和瀏覽器緩存策略，以保證用戶打開網(wǎng)頁時的首屏加載速度，以及后續(xù)用戶在三維場景的漫游過程中，不會因為模型過大而導(dǎo)致瀏覽器崩潰。

1 模型輕量化預(yù)處理

1.1 拉伸體參數(shù)化

三維模型通常都是由三角網(wǎng)格組成。隨著模型精度和復(fù)雜度的提升，存儲這些密集的三角網(wǎng)格數(shù)據(jù)需要消耗大量的存儲資源，進而導(dǎo)致模型文件體積變大，網(wǎng)絡(luò)傳輸時間提高。我們首先對三角網(wǎng)格的存儲方式進行優(yōu)化。

這些在三維場景模型中，存在大量的可以看作拉伸體的三維物體。拉伸體是通過一個平面在一個方向上平移的軌跡形成的三維物體，圓柱體就是一個典型的拉身體。在三維場景尤其是城市，建筑場景中，存在大量的拉伸體，如管道，墻體等。我們通過對這些拉身體進行參數(shù)化表示，如圖1所示。這樣我們就可以不用存儲復(fù)雜的三角網(wǎng)格信息，只需要存儲幾個參數(shù)即可，進而大幅降低模型文件的體積。

1.2 復(fù)雜模型三角帶化

為了達到很好的兼容性和通用型，模型的三角網(wǎng)格數(shù)據(jù)通常是以三角面為單位進行存儲的，也就是說每一個三角面都需要存儲三個頂點。這種看似合理的方式實際上存在數(shù)據(jù)冗余。如圖2所示，對于兩個有重疊邊的三角形，直觀來說只需要四個頂點即可表示，但實際存儲了六個頂點。

我們可以將以三角面為單位進行存儲的三角網(wǎng)格數(shù)據(jù)轉(zhuǎn)換成以三角帶為單位存儲，這個過程叫做三角帶化（Stripification）。這樣可以大大減少存儲冗余的頂點數(shù)據(jù)，進而減小文件體積。[1]中對比了常見的模型三角帶化算法。WebGL中支持基于三角帶的繪制，只需將繪制參數(shù)設(shè)置成gl.TRIANGLE_STRIP。圖3是一個復(fù)雜三角網(wǎng)格經(jīng)過三角帶化后生成的數(shù)個三角帶的前后對比圖。

1.3 三維數(shù)據(jù)的無損壓縮

Google的Chrome Media團隊于2017年7月發(fā)布并開源了Draco。Draco是一個開源壓縮庫，用于改善3D圖形的存儲和傳輸。Draco主要用于三角網(wǎng)格網(wǎng)格數(shù)據(jù)和點云數(shù)據(jù)的無損壓縮，可以使三維模型文件體積顯著減小，有效降低了數(shù)據(jù)傳輸對網(wǎng)絡(luò)帶寬的依賴，同時并沒有犧牲渲染的速度和質(zhì)量。我們使用Draco對前文輕量化處理策略處理后的模型進一步壓縮。圖4給出輕量化處理前后的模型使用ZIP壓縮和Draco壓縮的結(jié)果對比，可以看出Draco可以帶來更高的壓縮率，且不與前文的輕量化策略沖突。

壓縮后的文件在瀏覽器中進行解壓的速度也是一個重要的參考指標，圖5可見在瀏覽器中通過JavaScript進行解壓的速度雖低于使用C++進行解壓的速度，但也在可以接受的范圍內(nèi)。

2 對等覆蓋網(wǎng)

2.1 基于WebTorrent的集中式內(nèi)容路由與分發(fā)

現(xiàn)如今WebRTC技術(shù)已被主流瀏覽器所支持，但是這些應(yīng)用大多是將WebRTC技術(shù)應(yīng)用于流媒體播放、即時通信系統(tǒng)、在線視頻通話等領(lǐng)域。WebRTC技術(shù)賦予了瀏覽器與另一個瀏覽器的點對點通信的能力，我們可以基于WebRTC技術(shù)，將用戶組成一個P2P的對等覆蓋網(wǎng)絡(luò)，并以此來傳輸三維虛擬場景模型，提高傳輸效率。這樣當用戶在三維場景中漫游時，對于當前位置下需要加載的模型，可以從具有這些模型數(shù)據(jù)的其他用戶那里獲取，而不需要從服務(wù)器獲取。這樣就大大降低了服務(wù)器的壓力，同時，隨著用戶數(shù)量的增加，網(wǎng)絡(luò)規(guī)模的擴大，P2P網(wǎng)絡(luò)傳輸模型的速度會高于從單臺服務(wù)器下載模型的速度。

WebTorrent是運行在WebRTC之上的一種瀏覽器之間文件對等傳輸技術(shù)，通過構(gòu)建出一個集中式的P2P拓撲網(wǎng)絡(luò)，來實現(xiàn)網(wǎng)絡(luò)中為文件共享。我們在WebTorrent的基礎(chǔ)之上，進一步構(gòu)建出一套適用于大規(guī)模城市級三維模型漸進式傳輸?shù)穆酚膳c分發(fā)模式，在瀏覽器上構(gòu)建出高效的P2P網(wǎng)絡(luò)，如圖6所示。當多個人同時使用WebTorrent下載一個三維模型時，每個人都可以為其他人提供三維模型文件的部分片段，每一個下載模型文件的節(jié)點在下載的同時都可以為其他節(jié)點提供服務(wù)。當下載完畢后，可以一直為其他節(jié)點提供服務(wù)，直到用戶關(guān)閉瀏覽器。

2.2 基于超級節(jié)點的層次組網(wǎng)

如圖7，我們通過引入超級節(jié)點（Super Peer）并構(gòu)建出一個復(fù)合式的P2P網(wǎng)絡(luò)拓撲結(jié)構(gòu)，來進一步緩解中心Tracker服務(wù)器的壓力，同時盡可能地縮短內(nèi)容路由的時間，提高P2P網(wǎng)絡(luò)整體的傳輸效率。我們將一個完整的三維場景進一步細分成數(shù)個子場景，將處在同一個子場景下的用戶再單獨構(gòu)建出一個子P2P網(wǎng)絡(luò)，超級節(jié)點是這個子P2P網(wǎng)絡(luò)中的Tracker服務(wù)器，同時也包含這個子場景內(nèi)的全部模型信息。如此一來，當用戶處在一個自場景中時，如果需要獲取此子場景中的模型文件，只需要向這個子場景對應(yīng)的子P2P網(wǎng)絡(luò)中的中心Tracker服務(wù)器發(fā)出請求即可。如果需要獲取其他子場景內(nèi)的三維模型文件，再向其他子場景的Tracker服務(wù)器請求即可。這種策略將原先集中式Tracker服務(wù)器的負載分擔到各個子場景的Tracker服務(wù)器上，提高了P2P網(wǎng)絡(luò)可容納的對等節(jié)點的數(shù)量和網(wǎng)絡(luò)的可靠性。

2.3 實驗結(jié)果

我們在阿里云上部署不同數(shù)量節(jié)點并模擬多個用戶同時在三維虛擬場景中進行漫游的情況，得到圖8所示是實驗結(jié)果?？梢钥闯?，當節(jié)點數(shù)很少時，對等傳輸?shù)男什⒈炔簧显鹊募惺絺鬏斝?。原因是使用對等傳輸機制需要進行內(nèi)容路由和WebRTC建立連接的過程，這個過程會耗費一定的時間。隨著節(jié)點數(shù)量的提升，傳統(tǒng)中心式的服務(wù)器漸漸不能承擔如此高的負載，服務(wù)器的帶寬不能滿足這么多節(jié)點的需要，導(dǎo)致模型傳輸速度大幅下降。而WebRTC對等覆蓋網(wǎng)的傳輸效率越來越高，瀏覽器節(jié)點之間可以互相為其他瀏覽器節(jié)點提供資源傳輸服務(wù)。

3 結(jié)論

本文針對WebVR應(yīng)用中三維虛擬場景的網(wǎng)絡(luò)傳輸瓶頸問題，提出了解決方案。首先通過對三維虛擬場景模型進行輕量化預(yù)處理來減小模型文件的體積。輕量化手段主要包括拉伸體模型參數(shù)化，復(fù)雜模型三角帶化，以及無損壓縮這三個步驟。經(jīng)過這三個步驟后可以大幅降低模型文件的體積，減小網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量。其次，提出了一種基于WebRTC的對等覆蓋網(wǎng)絡(luò)，并將其應(yīng)用于三維虛擬場景模型傳輸，經(jīng)過實驗測試，在模型數(shù)據(jù)的分發(fā)方面優(yōu)于傳統(tǒng)集中式的分發(fā)模式。

參考文獻：

[1] Vaně?ek P， Kolingerová I. Comparison of triangle strips algorithms[J]. Computers & Graphics， 2007， 31（1）： 100-118.

[2] Hu Y ， Chen Z ， Liu X ， et al. WebTorrent based fine-grained P2P transmission of large-scale WebVR indoor scenes[C]// International Conference on 3d Web Technology. ACM， 2017.

[3] 劉小軍，賈金原.面向手機網(wǎng)頁的大規(guī)模WebBIM場景輕量級實時漫游算法[J].中國科學(xué)：信息科學(xué)，2018，48（3）：274-292.

【通聯(lián)編輯：唐一東】