王成燁

摘 要：在Web3D虛擬場景的應(yīng)用中，如何用對(duì)等傳輸來支撐海量用戶對(duì)于海量模型數(shù)據(jù)的下載是亟待解決的問題。利用谷歌公司的WebRTC技術(shù)，該文嘗試搭建了瀏覽器之間的對(duì)等數(shù)據(jù)傳輸通道，分析了虛擬場景傳輸與加載的特性，從提升加載速率和優(yōu)化用戶體驗(yàn)的角度出發(fā)，設(shè)計(jì)和實(shí)現(xiàn)了虛擬3D場景在網(wǎng)頁間對(duì)等傳輸?shù)脑拖到y(tǒng)。實(shí)際應(yīng)用表明，該系統(tǒng)達(dá)到了設(shè)計(jì)目標(biāo)，成功實(shí)施運(yùn)行，對(duì)于P2P技術(shù)在場景傳輸方面的應(yīng)用提供了一定的借鑒。

關(guān)鍵詞： 對(duì)等傳輸； WebRTC； Web3D

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）36-0203-04

The Realization of the Transmission of the Virtual 3D Scene between the Browsers

WANG Cheng-ye

（Software Institute，Tongji University，Shanghai 201800，China）

Abstract：In the application of Web3D， it is urgent to solve the problem that how to use the P2P transmission to support massive users to download massive model data. By the Googles WebRTC technology， this paper tries to build a peer-to-peer data transmission channel between browsers， analyzes the characteristics of virtual scene transmission and loading.To increase the loading rate and optimize the user experience， the paper design and implement a prototype system of virtual 3D scene transmission between web pages. The practical application shows that the system achieves the design goal and provides some references for the application of P2P technology in the scene transmission.

Key words：P2P transmission； WebRTC； Web3D

1 引言

虛擬現(xiàn)實(shí)（VR）技術(shù)是近年最為火熱的技術(shù)，其用計(jì)算機(jī)模擬生成動(dòng)態(tài)的三維圖形圖像，營造出逼真的場景氛圍，并可以和用戶進(jìn)行實(shí)時(shí)交互。近年來，隨著瀏覽器技術(shù)的快速發(fā)展，尤其是WebGL技術(shù)的逐步成熟，人們可以開始在網(wǎng)頁上加載和渲染大規(guī)模的3D模型。由于網(wǎng)頁應(yīng)用具有無需下載客戶端、靈活方便、跨平臺(tái)等特點(diǎn)，基于網(wǎng)頁的虛擬現(xiàn)實(shí)被越來越多的應(yīng)用到生產(chǎn)生活的各項(xiàng)領(lǐng)域。例如常見的網(wǎng)頁虛擬游戲、網(wǎng)頁場景漫游、網(wǎng)頁模擬購物等。由于3D虛擬場景應(yīng)用具有場景模型數(shù)據(jù)量大、用戶量多的特點(diǎn)，如何支持3D場景高效安全的傳輸成為了一個(gè)新的課題。傳統(tǒng)的C/S架構(gòu)中，用戶統(tǒng)一向服務(wù)器發(fā)出下載請求。服務(wù)器面臨著巨大的負(fù)載壓力和高并發(fā)的用戶請求，用戶的下載質(zhì)量也受到服務(wù)器上傳帶寬的限制。采用P2P架構(gòu)進(jìn)行對(duì)等傳輸可以解決上述問題，在P2P架構(gòu)的傳輸系統(tǒng)中，分布在系統(tǒng)中的節(jié)點(diǎn)既是模型內(nèi)容的下載者，也將自己已經(jīng)下載好的內(nèi)容分享給其他節(jié)點(diǎn)。P2P架構(gòu)可以充分利用用戶節(jié)點(diǎn)的上傳帶寬，分擔(dān)服務(wù)器壓力，提升傳輸效率。本文基于谷歌公司的WebRTC技術(shù)，搭建了瀏覽器間的數(shù)據(jù)信道，設(shè)計(jì)并實(shí)現(xiàn)了在瀏覽器間對(duì)等傳輸虛擬場景的原型系統(tǒng)，為用戶化身在網(wǎng)頁虛擬場景中的暢游提供了網(wǎng)絡(luò)支撐。

2 虛擬3D場景傳輸系統(tǒng)的總體設(shè)計(jì)

2.1 虛擬3D場景傳輸系統(tǒng)的拓?fù)湓O(shè)計(jì)

常見的P2P傳輸系統(tǒng)可劃分為集中式P2P，分布式非結(jié)構(gòu)化P2P，分布式結(jié)構(gòu)化P2P和混合式P2P[1]。在本系統(tǒng)中，我們的節(jié)點(diǎn)架構(gòu)使用混合式非結(jié)構(gòu)化的P2P架構(gòu)。這樣的設(shè)計(jì)是出于以下的考慮：

（1） 本系統(tǒng)針對(duì)的是大規(guī)模的虛擬場景傳輸和海量用戶，如果采用集中式P2P架構(gòu)，中心服務(wù)器管理系統(tǒng)中所有節(jié)點(diǎn)的信息，雖然無需傳輸模型數(shù)據(jù)，但仍然需要處理高并發(fā)的用戶請求。并且一旦中心服務(wù)器崩潰，整個(gè)系統(tǒng)就無法運(yùn)行。故集中式P2P架構(gòu)不適合本系統(tǒng)。

（2） 分布式結(jié)構(gòu)化P2P系統(tǒng)一般采用DHT結(jié)構(gòu)來管理節(jié)點(diǎn)組織，節(jié)點(diǎn)在系統(tǒng)中的資源發(fā)現(xiàn)、資源查找等行為均建立在節(jié)點(diǎn)間的信令交換的基礎(chǔ)之上。現(xiàn)有的WebRTC技術(shù)雖然支持瀏覽器間模型數(shù)據(jù)的傳輸，但信令的交換還是要借助WebSocket和信令服務(wù)器才能夠進(jìn)行。當(dāng)前技術(shù)無法滿足瀏覽器之間直接傳遞信令。故結(jié)構(gòu)化P2P不適合本系統(tǒng)。

（3） 綜上所述，瀏覽器間的P2P傳輸仍需借助信令服務(wù)器，而為了防止信令服務(wù)器單點(diǎn)失效，系統(tǒng)需配置多臺(tái)信令服務(wù)器。因此，我們最終選擇了混合式非結(jié)構(gòu)化的P2P架構(gòu)，該架構(gòu)中有多個(gè)超級(jí)節(jié)點(diǎn)擔(dān)當(dāng)信令服務(wù)器的角色。每個(gè)超級(jí)節(jié)點(diǎn)管轄一部分普通節(jié)點(diǎn)，并為其管轄的普通節(jié)點(diǎn)中轉(zhuǎn)信令，超級(jí)節(jié)點(diǎn)之間也互相傳遞信令。系統(tǒng)具體的拓?fù)湓O(shè)計(jì)如圖1所示：

圖中的節(jié)點(diǎn)有三種，普通節(jié)點(diǎn)、超級(jí)節(jié)點(diǎn)和資源服務(wù)器。其中，普通節(jié)點(diǎn)就是虛擬場景中的用戶，被相對(duì)應(yīng)的超級(jí)節(jié)點(diǎn)管轄。普通節(jié)點(diǎn)向超級(jí)節(jié)點(diǎn)發(fā)送請求以獲取下載源節(jié)點(diǎn)[2]。超級(jí)節(jié)點(diǎn)在系統(tǒng)中的作用主要有三個(gè)：

（1） 作為信令服務(wù)器。普通節(jié)點(diǎn)間建立WebRTC數(shù)據(jù)傳輸信道之前需要交換SDP信令，而此時(shí)節(jié)點(diǎn)信道尚未建立，必須借助超級(jí)節(jié)點(diǎn)進(jìn)行中轉(zhuǎn)。普通節(jié)點(diǎn)通過WebSocket與超級(jí)節(jié)點(diǎn)進(jìn)行通信，將自己的SDP信令報(bào)文發(fā)給超級(jí)節(jié)點(diǎn)，超級(jí)節(jié)點(diǎn)再轉(zhuǎn)發(fā)給目的節(jié)點(diǎn)。之后節(jié)點(diǎn)間才能建立數(shù)據(jù)信道。

（2） 提供節(jié)點(diǎn)查找與選擇服務(wù)。超級(jí)節(jié)點(diǎn)存儲(chǔ)并管理著其所轄普通節(jié)點(diǎn)的性能、帶寬信息以及擁有數(shù)據(jù)的信息。當(dāng)普通節(jié)點(diǎn)需要尋找擁有其所需數(shù)據(jù)塊的節(jié)點(diǎn)時(shí)，其發(fā)送請求給超級(jí)節(jié)點(diǎn)。超級(jí)節(jié)點(diǎn)根據(jù)存儲(chǔ)的信息進(jìn)行分析計(jì)算，并返回一定量的候選下載源給請求節(jié)點(diǎn)。請求節(jié)點(diǎn)根據(jù)返回的節(jié)點(diǎn)信息再向它們建立對(duì)等連接進(jìn)行數(shù)據(jù)傳輸。

（3） 提供NAT穿透的功能。由于內(nèi)外網(wǎng)之間IP地址會(huì)進(jìn)行轉(zhuǎn)換，因此兩個(gè)處于內(nèi)網(wǎng)之下的節(jié)點(diǎn)如果想交換信令建立對(duì)等連接，必須進(jìn)行NAT穿透。超級(jí)節(jié)點(diǎn)通ICE框架進(jìn)行NAT穿透，使得節(jié)點(diǎn)之間能順利地建立信道連接。

圖中的Resource Server是資源服務(wù)器[3]，資源服務(wù)器提供系統(tǒng)中場景模型的初始副本下載。當(dāng)系統(tǒng)中的節(jié)點(diǎn)退出而導(dǎo)致某些數(shù)據(jù)塊無法下載時(shí)，節(jié)點(diǎn)轉(zhuǎn)而向資源服務(wù)器進(jìn)行請求。請求節(jié)點(diǎn)的請求一旦超時(shí)未收到回應(yīng)，說明下載鏈路存在問題，節(jié)點(diǎn)也轉(zhuǎn)而向資源服務(wù)器進(jìn)行請求。

2.2 虛擬3D場景傳輸系統(tǒng)的系統(tǒng)架構(gòu)

Web3D傳輸系統(tǒng)主要設(shè)計(jì)為四層架構(gòu)，分別為數(shù)據(jù)信道層，節(jié)點(diǎn)選擇層，模型數(shù)據(jù)傳輸協(xié)議層，Web圖形渲染層。圖2所示為具體的系統(tǒng)架構(gòu)。

（1） 數(shù)據(jù)信道層

數(shù)據(jù)信道層是系統(tǒng)最底層的模塊，該模塊主要由WebSocket信道和WebRTC信道組成。數(shù)據(jù)信道承擔(dān)了傳輸信令和傳輸模型數(shù)據(jù)的通道的作用。在WebRTC信道建立之前，普通節(jié)點(diǎn)需要建立WebSocket信道和超級(jí)節(jié)點(diǎn)進(jìn)行通信，借助超級(jí)節(jié)點(diǎn)進(jìn)行SDP信令交換，以建立WebRTC信道。除此之外，普通節(jié)點(diǎn)尋找模型數(shù)據(jù)下載源向超級(jí)節(jié)點(diǎn)發(fā)出查詢信息也借助的是WebSocket。WebRTC信道建立之后，普通節(jié)點(diǎn)之間利用WebRTC的信道來傳輸模型數(shù)據(jù)。

（2） 節(jié)點(diǎn)選擇層

節(jié)點(diǎn)選擇層是基于數(shù)據(jù)信道層之上的，普通節(jié)點(diǎn)通過WebSocket向超級(jí)節(jié)點(diǎn)發(fā)出查詢請求，以選擇模型最優(yōu)下載源。超級(jí)接收到普通節(jié)點(diǎn)的請求后，在其存儲(chǔ)中查找到所有擁有該模型的節(jié)點(diǎn)信息，通過算法計(jì)算出最合適的下載源節(jié)點(diǎn)返回給請求節(jié)點(diǎn)。請求節(jié)點(diǎn)再與該節(jié)點(diǎn)建立WebRTC連接并開始下載模型數(shù)據(jù)。

（3） 模型數(shù)據(jù)傳輸協(xié)議層

普通節(jié)點(diǎn)在場景中通過算法選擇優(yōu)先下載的模型后，就進(jìn)入模型數(shù)據(jù)傳輸協(xié)議層進(jìn)行具體的模型傳輸。我們將模型等分成較小的piece，piece又等分成block，block是系統(tǒng)中最小的傳輸單位。普通節(jié)點(diǎn)每次請求模型的一個(gè)piece，并通過節(jié)點(diǎn)選擇層獲得擁有該模型數(shù)據(jù)的節(jié)點(diǎn)。普通節(jié)點(diǎn)與其建立WebRTC連接，向其發(fā)出下載piece的請求。下載源節(jié)點(diǎn)接收到請求后，以block為單位將piece傳輸給請求節(jié)點(diǎn)。請求節(jié)點(diǎn)接收到完整的piece后，對(duì)piece的完整性進(jìn)行驗(yàn)證，如果驗(yàn)證通過，則該piece下載完畢，開始下載新的piece，直到整個(gè)模型被下載完畢。

（4） Web圖形渲染層

當(dāng)場景中的全部模型數(shù)據(jù)被依序下載完畢后，進(jìn)入圖形渲染層將模型場景渲染出來。本系統(tǒng)使用的是基于WebGL的圖形渲染庫Three.js，其使用簡潔方便，能夠在網(wǎng)頁上高效快捷的渲染模型。

2.3虛擬3D場景傳輸系統(tǒng)的類的設(shè)計(jì)

系統(tǒng)的類圖設(shè)計(jì)如圖3所示。整體類圖設(shè)計(jì)的思路是單個(gè)的類負(fù)責(zé)具體的功能，降低類之間的耦合性。本系統(tǒng)采用MVC的架構(gòu)，其中Controller類負(fù)責(zé)系統(tǒng)整體的流程。整個(gè)Controller類分成兩個(gè)大塊。Controller類中的成員對(duì)象Discovery類負(fù)責(zé)節(jié)點(diǎn)選擇最優(yōu)下載源并與之建立對(duì)等連接。其利用底層的Socket類建立WebSocket連接并通過其上的Tracker類與超級(jí)節(jié)點(diǎn)進(jìn)行對(duì)話，利用Simple-peer類建立WebRTC連接。Controller類中另一個(gè)部分則是進(jìn)行模型數(shù)據(jù)的下載工作，其建立在Simple-peer類之上的Wire類來實(shí)現(xiàn)模型傳輸?shù)木唧w協(xié)議。我們將模型等分成piece，又將piece等分成block[4]。節(jié)點(diǎn)每次請求一個(gè)block，收到block后會(huì)更新標(biāo)志位，收到一個(gè)完整的piece后會(huì)驗(yàn)證其完整性并下載下一個(gè)piece[5]。

2.4 虛擬3D場景傳輸系統(tǒng)的系統(tǒng)流程

2.4.1 普通節(jié)點(diǎn)的流程設(shè)計(jì)

（1） 用戶化身所代表的普通節(jié)點(diǎn)進(jìn)入系統(tǒng)后，在場景中自由的漫游。每當(dāng)有場景模型進(jìn)入其視野范圍后，普通節(jié)點(diǎn)就開始對(duì)其下載。普通節(jié)點(diǎn)首先向超級(jí)節(jié)點(diǎn)發(fā)送模型數(shù)據(jù)塊的信息，向其請求候選下載源。超級(jí)節(jié)點(diǎn)接收到請求后查詢自身存儲(chǔ)，選擇最優(yōu)的下載源返回。普通節(jié)點(diǎn)獲取最優(yōu)下載源信息后通過超級(jí)節(jié)點(diǎn)的信令傳遞與之建立WebRTC連接[6]。

（2） 普通節(jié)點(diǎn)與下載源建立對(duì)等連接后，向其發(fā)出下載一個(gè)piece的請求。請求節(jié)點(diǎn)維護(hù)一個(gè)下載狀態(tài)表。下載源節(jié)點(diǎn)每次向請求節(jié)點(diǎn)發(fā)送一個(gè)block，等到全部的block發(fā)送完畢后，請求節(jié)點(diǎn)會(huì)驗(yàn)證收到的piece內(nèi)容是否完整正確，如果校驗(yàn)成功，請求節(jié)點(diǎn)會(huì)更改下載的狀態(tài)，表示這個(gè)piece已經(jīng)下載完畢了。

（3） 如果該模型在系統(tǒng)中沒有節(jié)點(diǎn)擁有，或者下載時(shí)間超時(shí)，普通節(jié)點(diǎn)會(huì)轉(zhuǎn)向資源服務(wù)器完成下載。

（4） 普通節(jié)點(diǎn)重復(fù)以上流程，每次請求一個(gè)piece，直到整個(gè)模型下載完畢。普通節(jié)點(diǎn)通過three.js庫將模型渲染出來，用戶就能在場景中看到該模型了[7]。

2.4.2 超級(jí)節(jié)點(diǎn)的流程設(shè)計(jì)

（1） 超級(jí)節(jié)點(diǎn)首先建立http服務(wù)器，并在http服務(wù)器之上建立WebSocket服務(wù)器，開放9090端口，監(jiān)聽來自普通節(jié)點(diǎn)的請求。一旦有普通節(jié)點(diǎn)發(fā)出了連接的請求，超級(jí)節(jié)點(diǎn)就與之建立WebSocket連接。

（2） 普通節(jié)點(diǎn)通過WebSocket向超級(jí)節(jié)點(diǎn)發(fā)送節(jié)點(diǎn)查詢請求。超級(jí)節(jié)點(diǎn)接收到報(bào)文后，搜索自身的存儲(chǔ)，查找擁有請求節(jié)點(diǎn)所需模型的最優(yōu)下載源，并返回給普通節(jié)點(diǎn)。同時(shí)，超級(jí)節(jié)點(diǎn)向下載源中轉(zhuǎn)普通節(jié)點(diǎn)的SDP信令，以幫助兩者之間建立WebRTC連接[8]。

（3） 以上步驟完成后，超級(jí)節(jié)點(diǎn)繼續(xù)監(jiān)聽9090端口，以處理來自其他節(jié)點(diǎn)的請求。

2.4.3 資源服務(wù)器的流程設(shè)計(jì)

（1） 資源服務(wù)器保存有系統(tǒng)模型的初始副本，其監(jiān)聽來自普通節(jié)點(diǎn)的下載請求。

（2） 一旦普通節(jié)點(diǎn)無法正常下載模型，就轉(zhuǎn)而向資源服務(wù)器發(fā)送請求。資源服務(wù)器接收到請求后將相應(yīng)的模型傳輸給請求節(jié)點(diǎn)。

3 結(jié)論

對(duì)等傳輸系統(tǒng)的Web3D場景應(yīng)用的重要支撐，高效的傳輸系統(tǒng)能夠保證用戶實(shí)時(shí)下載所見的場景模型，不會(huì)感覺到卡頓和延遲。本文研究了如何在瀏覽器之間建立WebRTC對(duì)等傳輸信道，并以此設(shè)計(jì)和實(shí)現(xiàn)了虛擬3D場景在網(wǎng)頁間對(duì)等傳輸?shù)脑拖到y(tǒng)。該系統(tǒng)首次將對(duì)等傳輸?shù)脑O(shè)計(jì)應(yīng)用到VR領(lǐng)域中，可以安全高效的傳輸模型場景數(shù)據(jù)，是一次創(chuàng)新的嘗試，也對(duì)未來相應(yīng)的研究起到一定的借鑒作用。

參考文獻(xiàn)：

[1] 周文莉， 吳曉非. P2P技術(shù)綜述[J]. 計(jì)算機(jī)工程與設(shè)計(jì)， 2006， 27（1）：76-79.

[2] Koskela T， Kassinen O， Korhonen J， et al. Peer-to-peer community management using structured overlay networks[C]// International Conference on Mobile Technology， Applications， and Systems， Mobility Conference 2008， Yilan， Taiwan， September. 2008：1-6.

[3] Koskela T， Heikkinen A， Harjula E， et al. RADE： Resource-aware distributed browser-to-browser 3D graphics delivery in the web[C]// IEEE International Conference on Wireless and Mobile Computing， NETWORKING and Communications. 2015：500-508.

[4] 汪燕， 柳斌. BitTorrent協(xié)議分析及控制策略[J]. 實(shí)驗(yàn)技術(shù)與管理， 2006， 23（1）：54-56.

[5] Pouwelse J， Garbacki P， Epema D， et al. The Bittorrent P2P File-Sharing System： Measurements and Analysis[J]. Lecture Notes in Computer Science， 2005， 3640：205-216.

[6] Vogt C， Werner M J， Schmidt T C. Leveraging WebRTC for P2P Content Distribution in Web Browsers[C]// IEEE Intern. Conf. on Network Protocols. 2013：1-2.

[7] Williams J L. Learning HTML5 Game Programming： Build Online Games with Canvas， SVG， and WebGL[M]. Addison-Wesley Professional， 2011.

[8] Burnett D C. WebRTC： Handling Media on the Web[M]// Multimodal Interaction with W3C Standards. Springer International Publishing， 2017.