大規模Web3D輕量級展示系統設計

李雅敬

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

關鍵詞：Web3D；模型輕量化；Web數據傳輸；場景管理；Web前端

中圖分類號：TP393 文獻標識碼：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技術在越來越多的領域得到應用。網頁應用天然具有跨平臺和輕量化的特性，因此Web3D技術有了廣泛的需求，也得到不斷完善和發展。但由于Web平臺的特殊性，在線3D模型的展示與傳統平臺展示相比仍有諸多問題。首先，3D模型體量較大時客戶端帶寬仍較為有限，需要優化傳輸機制，減少用戶等待時間以提高在線模型加載的可用性；其次，Web展示受瀏覽器性能限制，對于體量巨大的模型需要一定的加載策略，以保證在有限系統資源的條件下，盡可能展示出視覺和交互體驗良好的模型[1]。最后，對于模型的前端加載和管理，以及用戶的交互反饋，都需要進行輕量化處理，以保證在用戶查看、瀏覽時的體驗有較好的連續性和穩定性。

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

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

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

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

4）實現漸進式加載與模型揀選配合的場景調度方法；

5）對數據的網絡傳輸進行優化。

2 系統技術實現

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

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

2.1 輕量級模型預處理

2.1.1 BVH構建與模型分割

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

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

2.1.2 LPM漸進式加載處理

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

2.2 輕量級數據傳輸

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

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

2.3 輕量級場景管理

2.3.1 基于BVH的視錐剔除

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

2.3.2 基于關注度的視錐剔除

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

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

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

3 結束語

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

參考文獻：

[1] 王偉， 賈金原， 張晨曦， 等. 大規模虛擬場景漸進式傳輸的研究進展[J]. 計算機科學， 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]. 系統仿真學報， 2012， 24（1）： 69-73.

[6] 任雙君， 周旭， 任勇毛， 等. 基于HTML5的瀏覽器端多線程下載技術[J]. 計算機系統應用， 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] 賈金原， 王偉， 王明飛， 等. 基于多層增量式可擴展扇形興趣區域的大規模DVE場景對等漸進式傳輸機制[J]. 計算機學報， 2014， 37（6）： 1324-1334.

【通聯編輯：謝媛媛】