WebVR大規模三維虛擬場景輕量對等傳輸關鍵技術

許昊天

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

關鍵詞：WebGL，WebRTC，Web3D

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

引言

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

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

1 模型輕量化預處理

1.1 拉伸體參數化

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

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

1.2 復雜模型三角帶化

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

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

1.3 三維數據的無損壓縮

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

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

2 對等覆蓋網

2.1 基于WebTorrent的集中式內容路由與分發

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

WebTorrent是運行在WebRTC之上的一種瀏覽器之間文件對等傳輸技術，通過構建出一個集中式的P2P拓撲網絡，來實現網絡中為文件共享。我們在WebTorrent的基礎之上，進一步構建出一套適用于大規模城市級三維模型漸進式傳輸的路由與分發模式，在瀏覽器上構建出高效的P2P網絡，如圖6所示。當多個人同時使用WebTorrent下載一個三維模型時，每個人都可以為其他人提供三維模型文件的部分片段，每一個下載模型文件的節點在下載的同時都可以為其他節點提供服務。當下載完畢后，可以一直為其他節點提供服務，直到用戶關閉瀏覽器。

2.2 基于超級節點的層次組網

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

2.3 實驗結果

我們在阿里云上部署不同數量節點并模擬多個用戶同時在三維虛擬場景中進行漫游的情況，得到圖8所示是實驗結果。可以看出，當節點數很少時，對等傳輸的效率并比不上原先的集中式傳輸效率。原因是使用對等傳輸機制需要進行內容路由和WebRTC建立連接的過程，這個過程會耗費一定的時間。隨著節點數量的提升，傳統中心式的服務器漸漸不能承擔如此高的負載，服務器的帶寬不能滿足這么多節點的需要，導致模型傳輸速度大幅下降。而WebRTC對等覆蓋網的傳輸效率越來越高，瀏覽器節點之間可以互相為其他瀏覽器節點提供資源傳輸服務。

3 結論

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

參考文獻：

[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] 劉小軍，賈金原.面向手機網頁的大規模WebBIM場景輕量級實時漫游算法[J].中國科學：信息科學，2018，48（3）：274-292.

【通聯編輯：唐一東】