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

（1.中國地質(zhì)大學(xué)（武漢）計算機(jī)學(xué)院，湖北 武漢 430074；2.智能地學(xué)信息處理湖北省重點(diǎn)實(shí)驗(yàn)室，湖北 武漢 430074；3.智慧地質(zhì)資源環(huán)境技術(shù)湖北省工程研究中心，湖北 武漢 430074）

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

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

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

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

綜上所述，針對網(wǎng)絡(luò)環(huán)境下大規(guī)模三維空間模型應(yīng)用需求，本文的主要研究目標(biāo)是使得網(wǎng)絡(luò)瀏覽器客戶端的大規(guī)模三維空間模型可視化系統(tǒng)能夠快速、高質(zhì)量地渲染模型，采用面向網(wǎng)絡(luò)的三維模型遮擋剔除、渲染優(yōu)化、并行加載等策略，解決網(wǎng)絡(luò)環(huán)境下大規(guī)模三維空間模型可視化高效渲染及數(shù)據(jù)調(diào)度效率提升等相關(guān)問題。

1 總體技術(shù)路線

針對網(wǎng)絡(luò)環(huán)境下瀏覽器客戶端大規(guī)模三維空間模型高效可視化需求，主要開展3個方面的研究：

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

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

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

2 關(guān)鍵技術(shù)方法

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

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

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

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

2.3 基于多線程的三維模型數(shù)據(jù)動態(tài)調(diào)度策略

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

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

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

3 實(shí)驗(yàn)與結(jié)果

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

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

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

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

圖3 實(shí)驗(yàn)系統(tǒng)總體框架

在遮擋剔除實(shí)驗(yàn)中，表2為不同方法及不同大小模型實(shí)驗(yàn)的時間統(tǒng)計結(jié)果，其中-表示算法時間消耗過長。從中可以看出，基于WebGPU計算管線的改進(jìn)算法的效果相較于原始方法有很大的提升，但是略差于離線遮擋剔除方法，引入BVH場景樹的改進(jìn)算法將基于WebGPU計算管線的改進(jìn)算法與離線遮擋剔除方法結(jié)合后效果較好，再次對引入BVH場景樹的改進(jìn)算法進(jìn)行改進(jìn)的調(diào)整計算策略的改進(jìn)算法效果最好。雖然實(shí)驗(yàn)?zāi)Ｐ偷囊?guī)模從小到大設(shè)置了一個梯度，但是基于WebGPU計算管線的改進(jìn)算法的總耗時基本不變?？傮w而言，從計算速率來看，調(diào)整計算策略的改進(jìn)算法在渲染大體量三維模型時為速率最快的遮擋剔除方法，而基于WebGPU計算管線的改進(jìn)算法則為最為穩(wěn)定的改進(jìn)方法。

表2 遮擋剔除實(shí)驗(yàn)的不同方法時間消耗數(shù)據(jù)/ms

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

圖4 遮擋剔除實(shí)驗(yàn)的計算時間消耗柱狀圖

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

圖5 地上建筑及地下地質(zhì)體的聯(lián)合實(shí)驗(yàn)

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

4 結(jié) 論

針對網(wǎng)絡(luò)瀏覽器端大規(guī)模三維空間模型繪制性能弱、交互顯示延遲等問題，在模型遮擋剔除粒度選擇方法、遮擋剔除算法及動態(tài)調(diào)度等方面進(jìn)行了優(yōu)化設(shè)計，以提升三維模型的渲染效率和交互體驗(yàn)。

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

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

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

開發(fā)了基于WebGPU的大規(guī)模三維空間模型展示系統(tǒng)，系統(tǒng)綜合利用了上面描述的關(guān)鍵技術(shù)，實(shí)現(xiàn)了不同尺度和規(guī)模的地質(zhì)模型和地上建筑模型的快速加載和渲染，在實(shí)際工程中得到了較好的表現(xiàn)。

未來工作中，可以在硬件層面上繼續(xù)發(fā)展，優(yōu)化配置算法來提升網(wǎng)絡(luò)環(huán)境下的數(shù)據(jù)讀取和傳輸性能。目前WebGPU的管線配置存在著大量的參數(shù)，配置過程較為復(fù)雜，其計算時間消耗也部分依賴于場景樹的深度，未來可以對場景樹的結(jié)構(gòu)進(jìn)行優(yōu)化，或者引入機(jī)器學(xué)習(xí)的方法對視角所見的模型部分進(jìn)行預(yù)測。