虛擬3D場(chǎng)景在網(wǎng)頁(yè)間對(duì)等傳輸?shù)膶?shí)現(xiàn)

王成燁

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

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

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

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

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

常見(jiàn)的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ī)模的虛擬場(chǎng)景傳輸和海量用戶(hù)，如果采用集中式P2P架構(gòu)，中心服務(wù)器管理系統(tǒng)中所有節(jié)點(diǎn)的信息，雖然無(wú)需傳輸模型數(shù)據(jù)，但仍然需要處理高并發(fā)的用戶(hù)請(qǐng)求。并且一旦中心服務(wù)器崩潰，整個(gè)系統(tǒng)就無(wú)法運(yùn)行。故集中式P2P架構(gòu)不適合本系統(tǒng)。

（2） 分布式結(jié)構(gòu)化P2P系統(tǒng)一般采用DHT結(jié)構(gòu)來(lái)管理節(jié)點(diǎn)組織，節(jié)點(diǎn)在系統(tǒng)中的資源發(fā)現(xiàn)、資源查找等行為均建立在節(jié)點(diǎn)間的信令交換的基礎(chǔ)之上?，F(xiàn)有的WebRTC技術(shù)雖然支持瀏覽器間模型數(shù)據(jù)的傳輸，但信令的交換還是要借助WebSocket和信令服務(wù)器才能夠進(jìn)行。當(dāng)前技術(shù)無(wú)法滿(mǎn)足瀏覽器之間直接傳遞信令。故結(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)就是虛擬場(chǎng)景中的用戶(hù)，被相對(duì)應(yīng)的超級(jí)節(jié)點(diǎn)管轄。普通節(jié)點(diǎn)向超級(jí)節(jié)點(diǎn)發(fā)送請(qǐng)求以獲取下載源節(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)通過(guò)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ā)送請(qǐng)求給超級(jí)節(jié)點(diǎn)。超級(jí)節(jié)點(diǎn)根據(jù)存儲(chǔ)的信息進(jìn)行分析計(jì)算，并返回一定量的候選下載源給請(qǐng)求節(jié)點(diǎn)。請(qǐng)求節(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)中場(chǎng)景模型的初始副本下載。當(dāng)系統(tǒng)中的節(jié)點(diǎn)退出而導(dǎo)致某些數(shù)據(jù)塊無(wú)法下載時(shí)，節(jié)點(diǎn)轉(zhuǎn)而向資源服務(wù)器進(jìn)行請(qǐng)求。請(qǐng)求節(jié)點(diǎn)的請(qǐng)求一旦超時(shí)未收到回應(yīng)，說(shuō)明下載鏈路存在問(wèn)題，節(jié)點(diǎn)也轉(zhuǎn)而向資源服務(wù)器進(jìn)行請(qǐng)求。

2.2 虛擬3D場(chǎng)景傳輸系統(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ā)出查詢(xún)信息也借助的是WebSocket。WebRTC信道建立之后，普通節(jié)點(diǎn)之間利用WebRTC的信道來(lái)傳輸模型數(shù)據(jù)。

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

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

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

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

（4） Web圖形渲染層

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

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

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

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

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

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

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

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

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

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

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

（2） 普通節(jié)點(diǎn)通過(guò)WebSocket向超級(jí)節(jié)點(diǎn)發(fā)送節(jié)點(diǎn)查詢(xún)請(qǐng)求。超級(jí)節(jié)點(diǎn)接收到報(bào)文后，搜索自身的存儲(chǔ)，查找擁有請(qǐng)求節(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)聽(tīng)9090端口，以處理來(lái)自其他節(jié)點(diǎn)的請(qǐng)求。

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

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

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

3 結(jié)論

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