大規(guī)模Web3D輕量級展示系統(tǒng)設(shè)計

李雅敬

摘要：目前Web3D技術(shù)應(yīng)用廣泛，但展示的模型數(shù)據(jù)量大時，由于網(wǎng)絡(luò)帶寬和瀏覽器性能有限，數(shù)據(jù)傳輸時長較長、用戶瀏覽卡頓甚至客戶端無法顯示等問題限制了Web3D的應(yīng)用。對以上問題提出了模型后端預(yù)處理和前端場景管理結(jié)合的方案，對總體模型構(gòu)建層次包圍盒，并由此進行模型分割和前端瀏覽時的模型剔除，從而進行LPM（Lightweight Progressive Mesh）輕量化處理；實現(xiàn)了基于WebSocket和Web Worker的多線程模型數(shù)據(jù)傳輸，并提出了一套較為完整的前端模型管理技術(shù)，形成了相較傳統(tǒng)技術(shù)具有輕量級優(yōu)勢的解決方案。

關(guān)鍵詞：Web3D；模型輕量化；Web數(shù)據(jù)傳輸；場景管理；Web前端

中圖分類號：TP393 文獻標(biāo)識碼：A 文章編號：1009-3044（2019）06-0270-03

A Design of a Large-scale Web3D Lightweight Display System

LI Ya-jing

（School of Software Engineering， Tongji University， Shanghai 201804， China）

Abstract： At present， Web3D technologies are widely used， but when the amount of model data is large， due to insufficient network bandwidth and browser capacity， the applications of Web3D have been limited by resulting long time data transfer， browsing lag and even client display failure. Based on the above problems， this paper combines back-end model pretreatment with front-end scene management. With a hierarchy bounding box for the overall model， the system can split the model， remove certain sub-models in front-end browsing， and carry out LPM （Lightweight Progressive Mesh） processing. This system uses multi-threaded model data transfer based on WebSocket and Web Worker and completes a set of front-end model management technologies. At last， a solution with lightweight advantages over traditional technology is formed.

Key words： web3d； lightweight model； web data transfer； scene management； web frontend

1 背景

近年來，3D技術(shù)在越來越多的領(lǐng)域得到應(yīng)用。網(wǎng)頁應(yīng)用天然具有跨平臺和輕量化的特性，因此Web3D技術(shù)有了廣泛的需求，也得到不斷完善和發(fā)展。但由于Web平臺的特殊性，在線3D模型的展示與傳統(tǒng)平臺展示相比仍有諸多問題。首先，3D模型體量較大時客戶端帶寬仍較為有限，需要優(yōu)化傳輸機制，減少用戶等待時間以提高在線模型加載的可用性；其次，Web展示受瀏覽器性能限制，對于體量巨大的模型需要一定的加載策略，以保證在有限系統(tǒng)資源的條件下，盡可能展示出視覺和交互體驗良好的模型[1]。最后，對于模型的前端加載和管理，以及用戶的交互反饋，都需要進行輕量化處理，以保證在用戶查看、瀏覽時的體驗有較好的連續(xù)性和穩(wěn)定性。

本文針對上述問題，提出了在線3D模型展示各環(huán)節(jié)的關(guān)鍵技術(shù)，形成了一套具有一定可行性的技術(shù)鏈。主要工作有：

1）對模型進行聚類、分割等預(yù)處理；

2）將分割模型進行必要的輕量化預(yù)處理；

3）結(jié)合局部模型索引信息的揀選邏輯；

4）實現(xiàn)漸進式加載與模型揀選配合的場景調(diào)度方法；

5）對數(shù)據(jù)的網(wǎng)絡(luò)傳輸進行優(yōu)化。

2 系統(tǒng)技術(shù)實現(xiàn)

3D展示系統(tǒng)主要包含Web后端預(yù)處理和前端加載和渲染兩方面。在后端預(yù)處理階段，首先對模型生成包圍盒層次（Bounding Volume Hierarchy， BVH），將其樹結(jié)構(gòu)數(shù)據(jù)保存。然后基于BVH樹數(shù)據(jù)進行子模型索引與分割，生成與BVH葉子節(jié)點對應(yīng)的局部模型的文件。得到局部模型文件之后，對局部模型文件進行輕量化處理，確定模型不同的精度等級，同時在收到請求后通過其關(guān)注度等參數(shù)選擇要傳輸?shù)哪Ｐ?，計算模型的傳輸次序和精度?/p>

在前端加載和渲染階段，首先實現(xiàn)基于BVH的高效模型揀選方案。在揀選算法中，首先要基于關(guān)注度，結(jié)合視錐剔除和遮擋剔除的方案進行模型揀選算法的優(yōu)化。選出需要渲染的模型之后，傳輸此部分局部模型的基網(wǎng)格。然后進行漸進式數(shù)據(jù)傳輸，同時前端會對緩存進行優(yōu)化，選擇保留部分模型數(shù)據(jù)，以及新增或剔除部分模型數(shù)據(jù)。

2.1 輕量級模型預(yù)處理

2.1.1 BVH構(gòu)建與模型分割

對總體模型構(gòu)建BVH層次包圍盒，模型的三角面片可以視作其基本元素?；诨驹貙傮w模型構(gòu)建包圍盒有兩種方法可供選擇：自頂向下和自底向上方法。自底向上方法從模型的構(gòu)件出發(fā)，先取得模型所有構(gòu)件的包圍盒，然后根據(jù)生成新包圍盒最小的目標(biāo)來求取包含多個構(gòu)件包圍盒的大包圍盒作為前述多個構(gòu)件的父節(jié)點。如此遞歸直到場景中只剩下一個包圍盒[2]。

C. Lauterbach等人基于多核GPU的構(gòu)建方法[3]使用自底向上方法與一種線性排序算法的結(jié)合，可以以較低成本快速構(gòu)建模型的BVH結(jié)構(gòu)。使用此方法得到結(jié)構(gòu)數(shù)據(jù)后，模型依據(jù)BVH樹葉子節(jié)點劃分進行細(xì)粒度分割，保持了在樹中的拓?fù)浣Y(jié)構(gòu)，可以供隨后的模型管理和渲染策略使用。

2.1.2 LPM漸進式加載處理

我們使用漸進式網(wǎng)格進行模型的層級壓縮[4]。所謂漸進式網(wǎng)格，即模型數(shù)據(jù)傳輸中采用漸進式的方法，先傳輸保持模型特征的必要數(shù)據(jù)，再傳輸細(xì)節(jié)數(shù)據(jù)，客戶端就可根據(jù)這些數(shù)據(jù)漸進地將模型進行重建[5]。同時進行數(shù)據(jù)重用，將重復(fù)模型的其中一個進行一次傳輸加載，然后深拷貝已經(jīng)加載的模型數(shù)據(jù)，并對其位置等參數(shù)進行修改，即可利用已有數(shù)據(jù)轉(zhuǎn)換得到一個重復(fù)三維模型。

2.2 輕量級數(shù)據(jù)傳輸

服務(wù)器維護資源索引，包括一個下載URL和文件MD5值的映射表，和一個文件MD5值和文件的實際可用下載地址映射表。服務(wù)器接收到客戶端發(fā)來的資源請求后，解析請求URL并根據(jù)URL查詢URL-文件MD5值的大小映射表，找到此URL對應(yīng)的文件MD5值；再根據(jù)結(jié)果查詢文件MD5值和文件的實際可用下載地址映射表，獲得多個可用下載地址并返回給客戶端，為后續(xù)的Web Works多線程下載提供鏈接。

客戶端根據(jù)下載地址數(shù)量和文件大小決定創(chuàng)建Worker子線程的數(shù)量，即將文件分為幾段。然后創(chuàng)建Worker子線程，并使用postMessage函數(shù)分配下載文件的地址、偏移和總大小，開始通過已創(chuàng)建的WebSocket連接下載，使用onMessage函數(shù)接受workers返回的下載完成或失敗信息。下載完成后，將模型數(shù)據(jù)寫入磁盤[6]。

2.3 輕量級場景管理

2.3.1 基于BVH的視錐剔除

視錐體（frustum）代表場景對用戶的可見范圍。在本文中，僅繪制包圍盒全部處于視錐體或與視錐體相交的模型。由于在模型預(yù)處理階段已經(jīng)得出了模型的層次包圍盒，因此可以使用分層剔除法（Hierarchy Culling Method）[7]得到可見模型集。該算法依賴于總體模型劃分的樹形結(jié)構(gòu)，一旦我們剔除掉一個節(jié)點，那么剔除節(jié)點的子節(jié)點就也被一并剔除了。依據(jù)BVH二叉樹對遍歷方法進行優(yōu)化，如包圍盒完全處于視錐中的節(jié)點就不需遍歷其左右子樹，從而可以實現(xiàn)總體層數(shù)較低的節(jié)點遍歷，提高模型揀選的效率。

2.3.2 基于關(guān)注度的視錐剔除

關(guān)注度即用戶對場景中的某個模型分塊的關(guān)注程度，我們可以以用戶關(guān)注程度的主要因素：模型大?。Ｐ桶鼑姓紦?jù)的空間大?。┮约熬嚯x（模型距離視點的距離）來量化。也就是說可以認(rèn)為模型AABB包圍盒體積越大，距離攝像機位置越近，用戶對模型的關(guān)注度越高。如下公式所示。

[ConcernDegree=Volume（AABBm）Distance（Model， Camera）]

依據(jù)關(guān)注度，在視錐體內(nèi)部未進行視錐剔除的模型，我們進行進一步的剔除。對于關(guān)注度相對較低的模型，我們認(rèn)為其對于用戶查看整體場景是價值不大的[8]，因此可以設(shè)定一個閾值，如關(guān)注度處于后10%的模型我們不進行渲染，可以降低資源占用同時保證用戶體驗。

3 結(jié)束語

本文針對Web3D平臺開發(fā)相關(guān)的難點，在前人相關(guān)技術(shù)經(jīng)驗的基礎(chǔ)上，提出一套大型3D模型在線展示的平臺化方案。在相關(guān)的流程中本文實現(xiàn)了從預(yù)處理到渲染等相關(guān)階段的輕量化，如圖5所示，在具體實現(xiàn)中相較傳統(tǒng)平臺實現(xiàn)了模型的輕量化預(yù)處理優(yōu)勢、場景數(shù)據(jù)的輕量化傳輸優(yōu)勢、場景瀏覽的輕量化加載優(yōu)勢，可以有效地提升前端模型查看和用戶交互性能，同時提高了Web頁面的穩(wěn)定性和可用性。

參考文獻：

[1] 王偉， 賈金原， 張晨曦， 等. 大規(guī)模虛擬場景漸進式傳輸?shù)难芯窟M展[J]. 計算機科學(xué)， 2010， 37（2）： 38-43.

[2] Larsson T， Akenine-M?ller T. A dynamic bounding volume hierarchy for generalized collision detection[J]. Computers & Graphics， 2006， 30（3）： 450-459.

[3] Lauterbach C， Garland M， Sengupta S， et al. Fast BVH construction on GPUs[C]. Oxford， UK： Blackwell Publishing Ltd， 2009， 28（2）： 375-384.

[4] Hoppe H. Efficient implementation of progressive meshes[J]. Computers & Graphics， 1998， 22（1）： 27-36.

[5] 溫來祥， 賈金原. 基于單元重用機制的輕量化建模算法[J]. 系統(tǒng)仿真學(xué)報， 2012， 24（1）： 69-73.

[6] 任雙君， 周旭， 任勇毛， 等. 基于HTML5的瀏覽器端多線程下載技術(shù)[J]. 計算機系統(tǒng)應(yīng)用， 2017（11）.

[7] Bittner J， Wimmer M， Piringer H， et al. Coherent hierarchical culling： Hardware occlusion queries made useful[C]. Oxford， UK and Boston， USA： Blackwell Publishing， Inc， 2004， 23（3）： 615-624.

[8] 賈金原， 王偉， 王明飛， 等. 基于多層增量式可擴展扇形興趣區(qū)域的大規(guī)模DVE場景對等漸進式傳輸機制[J]. 計算機學(xué)報， 2014， 37（6）： 1324-1334.

【通聯(lián)編輯：謝媛媛】