基于Web 的大規模三維空間模型高效可視化關鍵技術

劉 剛，陳根深，陳麒玉，吳雪超

（1.中國地質大學（武漢）計算機學院，湖北 武漢 430074；2.智能地學信息處理湖北省重點實驗室，湖北 武漢 430074；3.智慧地質資源環境技術湖北省工程研究中心，湖北 武漢 430074）

對于一個城市級或以上的基于網絡的三維空間模型可視化系統，其渲染數據量非常巨大，可以達到TB以上的數量級。在網絡環境下進行大規模場景渲染的過程中，模型的渲染部分會隨著用戶視角的改變而改變，瀏覽器需要快速地切換渲染場景，釋放上一幀的同時需要加載當前幀[1-2]。網絡瀏覽器客戶端比較常用的模型可視化技術有Construct 2、WebGL、WebGL2、WebGPU 等，可以直接通過瀏覽器加載模型，不需要安裝其他的插件。但是面對大規模的三維空間模型時，進行實時交互可視化仍面臨著一些技術難點，主要體現在以下幾個方面：瀏覽器繪制性能弱、交互顯示延遲、數據傳輸速度瓶頸等，導致數據加載慢、渲染時間長等諸多問題。為此，前人引入了一系列的渲染加速方法，包括遮擋剔除、隱面剔除和視錐體剔除、空間分割、動態加載[3-10]等。

在基于網絡的模型可視化技術方面，2011年2月首次發布了Construct 2，元素只能支持2D，繪制功能非常有限，其速度主要取決于CPU向GPU發出繪圖命令的效率[11]。WebGL 首次出現在2011 年初發布的Chrome9和Firefox4中。WebGL2最早出現在2017年的Chrome56 和Firefox51，WebGL2 是將WebGL 的功能提高到與OpenGL ES 3.0同等水平的更新[12]。WebGPU是一種新的圖形渲染技術，被認為是當前的圖形渲染技術中的一種高性能、跨平臺的API[13]。相比于WebGL等上層API，WebGPU 是一個更加精確的圖形渲染API，完全開放了整個顯卡的能力，使其具有更高的性能和效率。此外，WebGPU 可以減少CPU 的開銷、對多線程有良好的支持、使用計算著色器可以將通用計算的功能引入Web、以及擁有全新的著色器語言等。

網絡環境下遮擋剔除技術的研究起步較晚，研究重點主要放在對特定的遮擋剔除技術進行改進，以提高其性能、可用性和正確性[14-18]。近年來得益于GPU 在圖形計算方面的出眾表現，使得將圖形計算任務從CPU 轉移至GPU 成為可能。Schütz[19]等就基于GPU 進行點云渲染計算，這樣既減輕了CPU 繁重的計算負擔，又提高了整體的渲染效率，其性能相較于硬件管道要高出一個數量級。網絡環境下遮擋剔除有以下主流方案：①基于視點的遮擋剔除；②基于場景圖的遮擋剔除；③基于圖像處理的遮擋剔除；④基于深度排序的遮擋剔除；⑤基于矢量化的遮擋剔除；⑥基于面向對象的遮擋剔除；⑦基于光線追蹤的遮擋剔除等。

對于局部小范圍空間模型的可視化，地上建筑、地質模型等模型數據的數據量較小，一般不超過1 GB。此時，計算機可以一次性地載入并處理全部數據，使其得到更好的渲染效果。但對于海量模型，渲染數據會達到幾十GB到幾百GB[20-23]。因此，如何利用計算機有限的處理能力實現海量模型數據實時調度和渲染已成為面臨的一個重要問題。杜瑩[24]、Zhang L[25]和Ren Z[26]等對全球多分辨率虛擬地形仿真的關鍵技術進行了研究，初步實現了全球大規模地形數據的實時調度和渲染。Lebiedz J[27]等提出了基于計算機集群的虛擬地形并行化方案，有效提高了地形數據調度和渲染的性能，并實現了地形的網絡化調度和渲染。趙建斌[28]根據Win32線程庫和DirectX的多線程支持，提出了一種渲染幀的線程級并行化方法。李喆[29]根據線程數等于CPU核數的原則，提出了一種設置線程數量的方法等。雖然在基于網絡環境下二維、三維空間信息可視化的方面已有較多的成果[23-26,30-32]，目前多線程異步調度方法能提高CPU的利用率，但是該方法存在著對復雜場景渲染效率優化效果不明顯，或者能提升三維場景的并行渲染效率，但卻未提出相應的策略調度來保證負載平衡等問題。

綜上所述，針對網絡環境下大規模三維空間模型應用需求，本文的主要研究目標是使得網絡瀏覽器客戶端的大規模三維空間模型可視化系統能夠快速、高質量地渲染模型，采用面向網絡的三維模型遮擋剔除、渲染優化、并行加載等策略，解決網絡環境下大規模三維空間模型可視化高效渲染及數據調度效率提升等相關問題。

1 總體技術路線

針對網絡環境下瀏覽器客戶端大規模三維空間模型高效可視化需求，主要開展3個方面的研究：

1）網絡環境下多類型三維模型遮擋剔除策略。針對不同三維模型的結構和數據差異性，可以采用不同粒度的剔除策略，包括對象級剔除（Object-level Culling）、面級剔除（Face-level Culling）和像素級剔除（Pixel-level Culling）等。對于具有復雜結構的三維模型和結構簡單的三維模型，需要開展相應的不同規模的剔除與渲染實驗，通過網絡環境下的實際測試確定合適的遮擋剔除策略，以提升整體剔除計算效率。

2）基于WebGPU 計算管線的渲染優化方法。傳統遮擋剔除算法（TOCA）中，視點發射的每條光線都需要與場景中的每個包圍盒BVH（層次包圍體，Bounding Volume Hierarchy）進行一次相交測試并計算該包圍盒到視點的距離，從而導致遮擋剔除原始方法的計算量十分的巨大。將遮擋剔除原始方法中大量重復的計算單元由CPU移入GPU中做并行計算，通過并行計算的方式來減少時間消耗。隨著WebGPU的計算管線API的開放，運用GPU在網絡瀏覽器客戶端進行并行計算成為可能，可以直接把所有的計算單元放入GPU 中進行計算。WebGPU 提供的管線技術，大大降低了CPU和GPU之間頻繁通信帶來的時間損耗，使得GPU算力能夠更好地體現出來。

3）基于多線程的大規模數據異步并行加載和渲染方法。針對大規模三維空間模型的在可視化和人機交互場景中的計算效率問題，通過創建渲染線程的方法，進一步提升渲染和交互的流暢性（圖2 中PVS 為潛在可見集potentially visible sets）。此外，可在內存中開辟多級緩存區，以減少硬盤讀取，降低加載時間，并將異步并行加載數據量大的三維空間模型數據添加到渲染隊列中等待渲染。

2 關鍵技術方法

2.1 大規模三維空間模型剔除粒度的選擇方法

三維模型渲染剔除粒度指的是在三維渲染過程中，用于減少不必要的渲染計算的一種優化技術，其粒度表示為3 種不同的級別：對象級剔除、面級剔除和像素級剔除。不同的剔除粒度可以通過結合使用來達到更好的優化效果，減少不必要的渲染操作，提高渲染效率。對象剔除和面剔除在三維模型渲染使用中，對象剔除通過檢測模型包圍盒與相機視錐體的相交來判斷模型是否需要被渲染，從而減少不必要的渲染操作。面剔除則通過檢測模型的每個面與相機視錐體的相交來判斷面是否需要被渲染，同樣也能減少不必要的渲染操作。對象剔除和面剔除的結合使用可以更有效地剔除不需要渲染的對象和面，從而提高渲染性能和效率。

2.2 基于WebGPU 計算管線的三維模型遮擋剔除優化方法

對于Web端的遮擋剔除算法，傳統的CPU離線預處理方法計算緩慢，占用了大量的資源，渲染時間消耗較大。本文將傳統離線預處理中的計算部分從CPU端移植到GPU端執行，提出了基于WebGPU計算管線的改進算法（improved algorithm based on the computing pipeline of WebGPU，IACPW）。并針對IACPW 中計算管線創建開銷過大的問題引入了離線遮擋剔除的思想和BVH 場景樹的改進算法（introduced BVH tree improvement algorithm，IBTIA），提出了調整計算策略的改進算法（Adjusted Computing Improvement Algorithm，ACIA）。3 種方法的處理流程圖見圖2，基于WebGPU 計算管線的改進算法主要將所有包圍盒與射線的計算過程放入GPU 中進行并行計算，引入BVH場景樹的改進算法，在CPU中剔除掉了一部分不必要的計算過程，隨后將剔除結果傳入GPU中進行后續的計算，調整計算策略的改進算法在引入BVH場景樹的改進算法的基礎上將在CPU中剔除部分不必要計算過程的也放入GPU中進行剔除。由于相交測試計算是三維模型遮擋剔除過程中計算量最多的環節之一，這種調整策略可顯著降低CPU的負載，提高了GPU的利用率，整體計算效率將得到有效提升。

2.3 基于多線程的三維模型數據動態調度策略

大規模模型數據讀取時，通過單線程對大量的數據讀寫然后建立包圍盒使得速度緩慢。本文提出基于多線程的大規模空間模型數據快速調度的方法，引入WebWorker 的方法來實現多線程的功能，能夠在JavaScript 中創建多線程的機制。在多線程的機制中，主線程正在運行時，WebWorker線程在后臺運行，并且兩者可以并行工作不會相互受到干擾，等到Web-Worker線程完成計算任務后將結果返回給主線程。主線程可以創建WebWorker 線程并為其分配一些任務。這樣可以把一些高計算量型或延遲較高的任務由Web-Worker線程來負擔，讓主線程來處理一些界面上的交互功能，以免受到其他線程的影響。

在模型加載的過程中主要分為主線程和渲染線程。主線程主要完成場景數據的讀取，對應用戶的操作進行響應，根據相機的變化獲取相應的PVS。子線程（渲染線程）主要是完成數據的加載和模型的渲染，以及模型數據資源的釋放。在主線程向渲染線程的數據傳遞過程中，本文采用了一種新的數據傳輸方法，即WBufferC （WBuffer-based Conveying），來減少時間消耗。WBufferC 會在內存中開辟一塊buffer，且其長度可以動態增長，利用buffer 自動管理內存長度的優點，可以對其重復利用以及解析不同長度的數據，而不需要自行申請并管理這些內存。

在數據的渲染過程中為防止數據的二次讀取和二次渲染，在加載當前視角的可見集后釋放上一視角的緩存數據，在確定當前視角的可見集合后計算場景中已有模型與前視角的可見集合的差集，然后剔除不可見的部分。這樣做可以先行清空緩存區的數據，有足夠的空間對后面的數據進行加載。同時對于場景中已有部分，計算當前視角的可見集與場景中已有模型的差集，在渲染進程中只需要加載計算后的差集，實現模型數據的動態調度。

3 實驗與結果

實驗系統總體框架如圖3，開發測試環境為Windows 11 和Node16，硬件環境是核心處理器Intel Core-i7，顯卡3090 Ti，內存64.0 GB。存儲模塊由MinIO、MySQL及Redis組成，在Windows 11上面部署MinIO 用以存儲模型的原始文件。采用MySQL 存儲模型的元數據并建立索引，引入Redis作為緩存。用戶可以通過不同的端口訪問該系統，該系統目前推薦的瀏覽器是Google Chrome Canary和Microsoft Edge Canary。

我們分別使用5 種尺度三維地質體模型數據進行測試，設置從小到大的模型梯度，5種模型的比例尺分別為1∶5 000、1∶25 000、1∶50 000、1∶250 000、1∶500 000，其基本信息如表1所示。

在遮擋剔除粒度選擇策略實驗中，本文結合典型的三維地上建筑模型和三維地質模型進行了實驗，選擇適合的剔除方式。總體模型剔除粒度選擇流程如圖1所示，以實驗區5 000棟，10 000棟，50 000棟和100 000棟三維建筑模型以及五指山地質模型（406 MB），五指山地層體（1.22 GB）和黔東北地質模型（10.6 GB）為實驗對象。通過不同的渲染方法對不同數量的建筑物渲染后以mesh級別為剔除對象的結果和三角形級別進行剔除結果對比，發現以mesh 級別為剔除對象時CPU、GPU 利用率低，內存的使用量會大，加載時間長。在渲染不同規模大小地質模型后，三角形級別剔除的CPU、GPU利用率比mesh級別剔除結果高，內存的使用量和加載時間減小。這是由于建筑模型結構相對規范和簡單，加載后以mesh級模型對象為剔除對象總體效率較高。對于地質體模型，由于其形態隨機變化、結構復雜，加載后以三角形面片級別進行剔除總體效率較高。

圖2 三種模型遮擋剔除方法的處理流程圖

圖3 實驗系統總體框架

在遮擋剔除實驗中，表2為不同方法及不同大小模型實驗的時間統計結果，其中-表示算法時間消耗過長。從中可以看出，基于WebGPU計算管線的改進算法的效果相較于原始方法有很大的提升，但是略差于離線遮擋剔除方法，引入BVH場景樹的改進算法將基于WebGPU計算管線的改進算法與離線遮擋剔除方法結合后效果較好，再次對引入BVH場景樹的改進算法進行改進的調整計算策略的改進算法效果最好。雖然實驗模型的規模從小到大設置了一個梯度，但是基于WebGPU計算管線的改進算法的總耗時基本不變。總體而言，從計算速率來看，調整計算策略的改進算法在渲染大體量三維模型時為速率最快的遮擋剔除方法，而基于WebGPU計算管線的改進算法則為最為穩定的改進方法。

表2 遮擋剔除實驗的不同方法時間消耗數據/ms

圖4 為表2 中的數據柱狀圖顯示，展示了不同方法對表中模型的計算時間消耗。其中TOCA 為未經過任何優化的遮擋剔除原始方法，BOCA 指經前人優化過后的離線遮擋剔除方法，而IACPW、IBTIA、ACIA為本文依次提出的3 種改進遮擋剔除算法。從中我們可以直觀地看出，IACPW 渲染時間消耗較為平穩，IBTIA 效果較差，甚至在部分模型的渲染上較前人提出的方法時間消耗更長，ACIA 總體上而言計算時間消耗最小，效果最好。

圖4 遮擋剔除實驗的計算時間消耗柱狀圖

在動態調度實驗中，通過上述方法完成對5 種不同尺度和不同大小的模型加載，本文方法均獲得更高的加載速度（如圖5）。以貴州省1∶500 000整體模型（8.12 G）為例，用傳統方法的加載幀率為13 fps，使用本文方法的加載幀率達到40 fps。

圖5 地上建筑及地下地質體的聯合實驗

采用實驗區的100 000余棟三維建筑模型和典型三維地質模型（930 MB，面片數19，246，398個）為實驗對象，進行地上下三維模型的渲染實驗。較之傳統方法，本文方法均取得了可視化性能的提升，加載幀率60 fps，總加載時間為2.6 s，達到預期效果。

4 結 論

針對網絡瀏覽器端大規模三維空間模型繪制性能弱、交互顯示延遲等問題，在模型遮擋剔除粒度選擇方法、遮擋剔除算法及動態調度等方面進行了優化設計，以提升三維模型的渲染效率和交互體驗。

1）針對不同類型的空間模型選擇的適合剔除粒度。我們根據建筑模型和地質模型的特點，分別優化確定了對象級和面片級的剔除粒度，在保證顯示細節的前提下提高了整體三維模型渲染的效率。

2）提出了基于WebGPU 計算管線的遮擋剔除算法。在CPU中構建BVH場景樹，用WebGPU渲染管線進行相交計算并計算視點到篩選后包圍盒的距離，有效減輕CPU 的計算負擔，充分利用GPU 的計算能力，降低了離線遮擋剔除方法的預處理時間消耗。

3）基于多線程技術提出了一種大規模三維空間模型數據快速調度方案。引入WebWorker 線程技術，使用主線程和渲染進程分別處理數據加載、剔除過程和場景資源的更新遍歷，可以充分利用系統的多核資源，從而提高了渲染效率。

開發了基于WebGPU的大規模三維空間模型展示系統，系統綜合利用了上面描述的關鍵技術，實現了不同尺度和規模的地質模型和地上建筑模型的快速加載和渲染，在實際工程中得到了較好的表現。

未來工作中，可以在硬件層面上繼續發展，優化配置算法來提升網絡環境下的數據讀取和傳輸性能。目前WebGPU的管線配置存在著大量的參數，配置過程較為復雜，其計算時間消耗也部分依賴于場景樹的深度，未來可以對場景樹的結構進行優化，或者引入機器學習的方法對視角所見的模型部分進行預測。