基于WebGL的三維虛擬博物館碰撞檢測

李赟　劉一松　陳繼明行

摘要摘要：三維虛擬博物館是通過計算機對現實生活中博物館的一個模擬，在各大主流瀏覽器上提供虛擬博物館漫游功能，讓廣大用戶不必親臨現場就可以在網上身臨其境地了解博物館藏品信息。在分析虛擬博物館實際應用的基礎上，針對虛擬場景中的碰撞檢測，提出了一種基于WebGL的適用于虛擬博物館的碰撞檢測算法。算法首先使用XML構建虛擬場景，并通過樹的篩選方式對空間進行篩選，然后使用優化的AABB包圍盒進行碰撞檢測，使用戶在使用第一人稱漫游博物館場景時，能與靜態物品產生真實的碰撞效果。實驗結果表明，該算法的運用可以實時反映連續碰撞效果。

關鍵詞關鍵詞：WebGL；虛擬博物館；碰撞檢測；AABB

DOIDOI：10.11907/rjdk.171092

中圖分類號：TP319

文獻標識碼：A文章編號文章編號：16727800（2017）05012405

0引言

虛擬現實技術的成熟和網絡技術的普及使得3D虛擬博物館的實現成為可能。3D虛擬博物館依據現實中的博物館，利用計算機構建一個虛擬的三維世界，通過網絡處理技術將現實博物館逼真地展現給用戶。3D虛擬博物館的實現不僅打破了傳統展館在時間和空間上的局限性，還為使用者提供了關于聽覺和視覺的模擬，讓用戶能自由地觀察三維空間中的展品，給用戶一種沉浸式的體驗[1]。

對于虛擬博物館，人們關注的是其實時性和真實感，而其真實性和實時感主要體現于第一人稱視角在虛擬場景中的使用。要使用戶以第一人稱漫游場景時能如同在現實世界中瀏覽場景時一樣，碰撞檢測成為三維虛擬博物館系統實現中的重要一環。

對于碰撞檢測的研究，至今為止已經形成了一個相對完整的體系，網頁版虛擬技術實現的“Flash3D”、“Java3D”、“Unity3D”等技術都有自身的一些碰撞檢測機制，然而這些技術在網頁端的實現都需要安裝一些特定的插件，因此存在很大的局限性。而場景模型的針對性、應用領域的專業性和場景要求的特殊性，對碰撞檢測的效果提出了不同要求：對于虛擬維修[2]，主要追求碰撞檢測效率，因而王崴等[3]采用動態分裂平面法加速OBB包圍盒構建的過程來進行碰撞檢測；對于游戲場景，由于場景模型多且復雜，為了游戲場景的真實性和實時性，劉翼等[3]提出了結合使用空間剖分法和層次包圍盒法對其進行檢測。WebGL[4]是2010年公開發布的Web端3D繪圖標準，它無需安裝插件且具有跨平臺性[56]，因此受到人們的關注，然而對WebGL碰撞檢測方面的研究并不是很多，因此亟需尋找一種方法對WebGL進行碰撞檢測。本文提出了一種基于AABB包圍盒的碰撞檢測算法實現在WebGL環境下適用于虛擬現實博物館進行的碰撞檢測。

1相關工作

Sang Z，Wang T Y，Zou X X[7]提出了一種適用于數控機床的在線碰撞檢測算法。基于數控機床的特點，綜合分析了八叉樹算法和網格分割的碰撞檢測算法優缺點，提出了一種長方體碰撞檢測結合分離軸碰撞檢測的算法來優化傳統機床的碰撞檢測算法。該算法準確性好且精度較高，但是效率較低。

Hung W H，Kang S C J[8]針對虛擬環境中的仿真施工現場，在2014年提出了一種快速的碰撞檢測算法，稱為傳播聚類方法。該方法采用K均值進行聚類迭代，將對象分為多個組，定義一個質量指標進行結果評估，符合質量要求時，該組對象采用AABB包圍盒進行替換，還建立了一個分散對象場景、一個施工現場場景、一個散亂的普通遺址場景進行測試。該算法對虛擬建筑場景快速有效，但是碰撞檢測緊密型較差。

2015年，王磊[9]提出了一個基于混合型包圍盒的碰撞檢測方法，稱為HBBCD算法。算法首先將待檢測物體轉化成二叉樹，在根節點處構建包圍球，上層結構構建AABB包圍盒，下層結構構建OBB包圍盒。然后在相交測試階段，使用隊列標記已檢測的物體，優先遍歷深層次節點。王磊[9]將該算法集成到Unity3D中完成了一個基于Web3D的武警總隊警史館系統，該算法很好地滿足了碰撞檢測的準確性和實時性，但是復雜度高，計算比較麻煩。

2016年，鄭華和劉家[10]提出了基于WebGL的面向Web的建筑模型碰撞檢測算法，先對導入的模型進行拆解，然后將拆解后的子模型進行碰撞檢測。該方法運算簡單，但運算步驟較多，對規則的類長方體模型有較好的碰撞檢測結果，但考慮的情況比較單一。

2碰撞檢測

碰撞檢測是為了提高虛擬場景的真實感而提出的關鍵技術，其主要目的在于避免模型在運動過程中出現與其它模型發生交叉或者直接穿越的現象，避免用戶在使用虛擬場景時產生違和感[1112]。碰撞檢測主要分為3個階段：確認碰撞模型階段、模型相交測試階段和碰撞響應階段。確認碰撞模型階段就是檢測運動物體與靜態物體是否發生碰撞，如果發生碰撞則確定碰撞模型；模型相交測試即確定運動模型與靜止模型是否發生穿越或沖突；碰撞響應階段即當運動物體與靜態物體發生碰撞時，運動物體作出相應改變的過程。

2.1碰撞

碰撞[13]是指兩個作相對運動的模型接觸并改變其運動狀態的現象。

從能量角度出發可將碰撞分為：理想彈性碰撞、非彈性碰撞、完全非彈性碰撞和超彈性碰撞。理想彈性碰撞是指在不考慮任何不同能量間的轉化或者能量損耗的前提下，動能和動能之間的改變；非彈性碰撞是指在部分動能轉換成其它形式的能，物體發生一定的改變；完全非彈性碰撞是指物體在發生碰撞后動能為零，完全不反彈；超彈性碰撞是指碰撞后的動能超過碰撞前的動能。

針對本文需要檢測的虛擬博物館系統，主要考慮的是動態物體和絕對靜態物體之間的碰撞。由上述不同碰撞類型可知，當運動物體和靜態物體發生理性彈性碰撞時，靜態物體不發生任何改變，運動物體將做反方向的等動能運動；當運動物體和靜態物體發生非彈性碰撞時，運動物體或靜態物體發生形變或發熱，運動物體做削弱動能的運動；當運動物體和靜態物體發生完全非彈性碰撞時，運動物體和靜態物體保持靜止；當運動物體和靜態物體發生超彈性碰撞時，運動物體做反方向更快速的運動。運動的物體就是第一人稱視角模型，絕對靜止的物體就是博物館場景模型。由此可知，場景模型中的模型屬性都是剛體，且動能較小，因此需要考慮的是完全非彈性碰撞。

2.2相交

相交是指兩個物體相互交叉在一起。二維平面中，圖形與圖形之間擁有兩個及兩個以上交點，則兩個圖形相交（直線與直線相交只有一個交點）；三維平面中，當一個三維模型的部分或全部存在于另一個三維模型的內部（兩個模型的體積發生重疊）時這兩個三維模型相交。

本文討論的相交是指當用戶使用第一人稱進行漫游時，由于第一人稱視角模型和場館靜態模型的碰撞檢測不及時，或者包圍盒選擇不合適所引起的視角的穿透。發生相交時，用戶使用第一人稱視角可以看到模型內部，使場景出現違和感。若沒有包圍盒或者碰撞檢測緩慢，則有可能發生穿越現象。用戶可以用平滑的速度穿過前面場景中的障礙物。

3基于包圍盒的碰撞檢測算法分析

3.1包圍球

包圍球算法[14]是將模型碰撞描述為一個能將該模型包圍住的最小球體。即確定球心和球半徑（每個坐標軸投影絕對值最大的點間距離），就可以描述為一個包圍球。該方法構造比較簡單，計算相對方便。

3.2AABB包圍盒

AABB包圍盒[15]是指軸向包圍盒，即將模型碰撞描述為將該模型包圍住的最小長方體，該長方體的長、寬、高分別平行于軸向上的X軸、Y軸和Z軸，確定模型每個軸向上投影的最大值和最小值即可構造相應的AABB包圍盒模型。該方法構造簡單但緊密型差。

3.3OBB包圍盒

OBB包圍盒[16]即將模型碰撞描述為將碰撞模型包圍住的最小長方體，該長方體與軸向無關。該方法緊密性好，靈活但構造復雜。

3.4Kdops包圍盒

Kdops包圍盒[17]將模型碰撞描述為能將模型圍住的最小凸多面體，該凸多面體所有面的法向量都來自于一個固定方向，有固定的軸集。該方法緊密性最佳，但是構造麻煩。

4 基于WebGL的3D虛擬博物館碰撞檢測

3D虛擬博物館的碰撞檢測主要研究的是三維空間中運動物體（虛擬人物）與靜態物體（博物館場景）之間發生的碰撞檢測。

由于博物館的場景較大，且對用戶體驗有一定的要求，因此，為了檢測出移動物體在運動過程的沖突，需要找到一個高效的基于場景的連續沖突檢測算法。

4.1空間篩選

在構建場景時，采用XML參數化語言進行實現[18]。考慮到整個系統渲染效率、碰撞檢測和后續場景交互的方便性，采用如圖1所示的樹狀結構組織場景。

碰撞空間主要通過樹形結構來確定，如果確定用戶停留在博物館外觀場景的虛擬空間時，只需要進行博物館外觀場景中的碰撞檢測，若確定用戶進入主題館（如青銅器館）場景中，則進行與之相應的主題館場景中的碰撞檢測。

主題館場景主要分為兩種模型，即展臺模型（博物館建造時已經確立的固定不動部分）和展品模型（可根據現實情況變更的可變動部分），而展品模型一般都存放在對應的展柜之中。因此，為了提高碰撞檢測的效率，可以直接進行展柜模型的碰撞檢測。

4.2碰撞模型確認

經過上述的空間篩選后，可以初步確定模型碰撞的范圍。由于博物館建筑模型的特殊性，一般展廳的展柜多為規則長方體透明玻璃，而展品一般都放在展柜之中，當使用第一人稱視角模擬用戶漫游場景時，只需要考慮外部展廳對于第一人稱視角的碰撞反應，而無需考慮放置在內部的展品對于第一人稱產生的碰撞。因此選用AABB碰撞檢測包圍盒作為基本的碰撞模型，然后對此模型作一定的改進，最后利用改進的碰撞模型完成對主題館內的碰撞檢測。

針對WebGL的碰撞檢測，主要分為兩種情況：一種是由鍵盤控制第一人稱漫游引起的運動模型和靜態模型之間的碰撞；另一種是鼠標控制的運動模型和靜態模型之間的碰撞。

對于場景中的靜態展柜模型需要先設置對應的AABB包圍盒，分別記錄靜態模型包圍盒S（S是一個變量，是靜態模型名稱）在3個軸向上的投影點，X軸上投影的最小值和最大值分別記為：S-Xmin，S-Xmax；Y軸上投影的最小值和最大值分別記為：S-Ymin，S-Ymax；Z軸上投影的最小值和最大值分別記為：S-Zmin，S-Zmax。

4.2.1鍵盤控制的運動模型和靜態模型之間的碰撞檢測

對于運動模型M，計算運動后的包圍盒，并記錄3個軸向上的投影點，分別為：M-Xmin，M-Xmax，M-Ymin，M-Ymax，M-Zmin，M-Zmax。依次判斷3個軸向上的碰撞，以X軸為例，先判斷最小值，若M-Xmin≤S-Xmax，則將S和M碰撞檢測標志置為True（S和M碰撞檢測標志默認為false），如果M-Xmin>S-Xmax，不作處理；再判斷最大值，如果M-Xmax≤S-Xmin，S和M碰撞檢測標志置為False，如果M-Xmax>S-Xmin，不作處理。若處理完3個軸向上的碰撞，最終M碰撞檢測標志為True，則存在碰撞，碰撞模型為S。

由于運動模型和靜態模型的碰撞對于實時性要求較高，因而需要將碰撞檢測的機制放置在渲染循環機制中。本文采用three.js來繪制虛擬場景，three.js是基于WebGL的3D圖形繪制庫，它主要由3部分組成：相機、場景和渲染器。

然后將碰撞檢測包圍盒算法添加到場景中，并給相機添加碰撞檢測盒，利用渲染循環機制不斷更新運動物體運動后的位置和運動后包圍盒狀況，實時監控碰撞的發生并繪制更新的虛擬場景。循環方式如下代碼所示，animate函數是一個動畫，在系統運行時不斷執行，使render函數內的場景和相機不斷更新，并渲染它們。

4.2.2鼠標控制的運動模型和靜態模型之間的碰撞檢測

由于鼠標控制運動模型的運動方式是直線運動，可以計算運動模型運動中包圍盒在3個軸向上的投影。在直線運動狀態下，可以認為在Z軸上投影坐標保持不動，因此只要考慮在Y軸和X軸存在的關系，運動前包圍盒X軸為：M-Xmin，M-Xmax，Y軸投影點為：M-Ymin，M-Ymax；運動后包圍盒X軸投影點為M-Xmin′，M-Xmax′，Y軸投影點為：M-Ymin′，M-Ymax′。根據線性方程y=ax+b可知：

然后將運動路線中可能存在的碰撞進行檢測，判斷方式和鍵盤控制運動的碰撞判斷方式類似。

4.3模型相交測試

運用分割軸算法進行模型相交測試，若兩個模型不相交，則存在一個平面使得兩個模型分別位于平面的兩側。

運動模型M和靜止模型S，其中心連線在每個軸向上的投影長度為C=|（S-M）*Axis|（Axis指每個軸向），參考長度為T=L/2+[（S-Max）-（S-Min）/2]，其中L是運動包圍盒邊長。當某個軸向上的C≥T時，模型不相交；如果各個軸向上中心連線投影長度C都小于它的參考長度T，則模型相交。

4.4動作選擇

由于運動方式分為鍵盤控制的運動和鼠標控制的運動，因而動作選擇需要做一定的區分。

4.4.1鍵盤控制運動碰撞時的動作選擇

未檢測到碰撞時，運動操作繼續，并作相應的動作。當檢測到發生碰撞時，首先確定發生碰撞的軸向，由于博物館場景模型為平地，檢測碰撞時只需要檢測4個軸向上的碰撞。將運動模型碰撞檢測盒朝著4個軸向：X軸正軸，X軸負軸，Y軸正軸和Y軸負軸分別收縮，然后進行檢測，若在某一軸向收縮的情況下檢測到碰撞消除，則該軸向預判為碰撞軸向，運動模型在該軸向上的運動被鎖定，只允許其它軸向上的運動，碰撞模型檢測盒恢復；若未檢測到碰撞消除，則再次縮小各軸向的邊長，繼續檢測。

4.4.2鼠標控制運動碰撞時的動作選擇

未檢測到碰撞時，平移運動被執行，模型平緩運動到目標位置。當檢測到碰撞時，根據對碰撞反應精度的要求，將模型的運動量減小1/r倍，并按上述碰撞檢測方法再次進行檢測，即計算運動目標位置為（M-Xmin′+M-Xmin）（r-1）/r，（M-Xmax′+M-Xmax）（r-1）/r，（M-Ymin′+M-Ymin）（r-1）/r，（M-Ymax′+M-Ymax）（r-1）/r的情況。若仍然存在碰撞檢測則繼續將運動量減小1/r倍并檢測，否則，按照減小的運動量運動。

由于虛擬博物館對碰撞反應的速率要求相對較高，對精度要求相對較低，因而當檢測到碰撞時，選擇將模型的運動量減半并按上述碰撞檢測方法再次進行檢測，即計算運動目標位置為（M-Xmin′+M-Xmin）/2，（M-Xmax′+M-Xmax）/2，（M-Ymin′+M-Ymin）/2，（M-Ymax′+M-Ymax）/2的情況。若仍然存在碰撞檢測則繼續將運動量減半并檢測，否則按照減半的運動量運動。

5檢測結果

本文基于WebGL對虛擬博物館中的碰撞檢測展開了研究，設計并實現了三維虛擬博物館系統，從而驗證該碰撞檢測的可行性和碰撞檢測效果。

當使用鍵盤進行第一人稱漫游時，用戶通過鍵盤控制第一人稱的移動，W向前、S向后、A向左、D向右。若不發生碰撞，則用戶做如圖2所示的流暢的勻速運動。

若發生碰撞，輸出對應的提示信息，并給出碰撞軸，如圖3所示。判斷當前狀態為hit給出碰撞軸為X正方向，此時用戶不能再向X正軸方向前進，但用戶可以向Y軸正方向、Y軸負方向或X軸負方向前進。

當鼠標控制第一人稱移動時，通過鼠標點擊屏幕來獲取運動模型的終點信息。若運動過程中不發生碰撞，則第一人稱視角以直線勻速運動方式移動到終點位置，如圖4所示。進入場景默認起始位置（0，0，0）點擊屏幕之后獲取終點位置（115.33，73.021，0），若該運動路徑上未發生碰撞，則移動到（115.33，73.021，0）位置。

若發生碰撞時，第一人稱視角運動量減半，并重新檢測。

重新檢測時未發生碰撞，移動到減半后的位置，如圖5所示。進入場景默認起始位置（0，0，0）點擊屏幕之后獲取終點位置（117.28，56.33，0），判斷該運動路徑上是否發生碰撞，給出提示信息hit，并更新起始位置（0，0，0）和終點位置（58.64，28.165，0），終點位置是之前的一半，再次判斷后未產生碰撞，則移動到位置（58.64，28.165，0）。

若發生如6圖所示的連續碰撞，在起點位置（200，0，0）和終點位置（207.1，100.531，0）之間檢測到碰撞，輸出碰撞信息hit并將模型運動量減半，更新起點位置（200，0，0）和終點位置（203.55，50.2655，0）再次進行判斷，仍然存在碰撞繼續輸出碰撞信息hit并減半運動量，起點為（200，0，0），終點為（201.775，25.1328，0），再次檢測未發生碰撞，物體移動到位置（201.775，25.1328，0）。

6結語

隨著虛擬現實技術的發展，WebGL憑借跨平臺性和可操作性的優勢實現了很好的展示，然而目前國內對于WebGL和HTML5的探索和研究還不是很多。本文基于WebGL實現了虛擬博物館場館模型中的碰撞檢測，雖然不夠完美，緊密型存在差距，但方法是可行的，能快速檢測到場景中發生的連續碰撞和未發生失真的交互穿越現象。本文的碰撞檢測僅針對虛擬博物館的特性展開研究，相信隨著WebGL及3D引擎的不斷完善，瀏覽器端的3D仿真在教育、商業、生活等方面都會有更加廣闊的應用前景。

參考文獻參考文獻：

[1]張劍平，夏文菁.數字化博物館與學校教育相結合的機制與策略研究[J].中國電化教育，2016（1）：7985.

[2]王崴，周誠，楊云，等.面向虛擬維修的碰撞檢測算法[J].計算機應用與軟件，2016，33（4）：235238.

[3]劉翼.三維游戲中碰撞檢測算法的研究與實現[D].武漢：武漢理工大學，2010.

[4]MARRIN C.Webgl specification[Z].Khronos WenGL Working Group，2011.

[5]KOPEC A，BALA J，PIETA A.WebGL based visualisation and analysis of stratigraphic data for the purposes of the mining industry[J].Procedia Computer Science，2015，51（1）：28692877.

[6]SUN F，ZHANG Z，LIAO D，et al.A lightweight and crossplatform Web3D system for casting process based on virtual reality technology using WebGL[J].International Journal of Advanced Manufacturing Technology，2015，80（58）：801816.

[7]SANG Z，WANG T Y，ZOU X X，et al.Research on online collision detection algorithm of CNC machine tools[J].Key Engineering Materials，2016，693（3）：17801785.

[8]HUNG W H，KANG S C J.Automatic clustering method for realtime construction simulation[J].Advanced Engineering Informatics，2014，28（2）：138152.

[9]王磊.基于混合型包圍盒碰撞檢測技術的研究及其在Web3D漫游中的應用[D].上海：上海大學，2015.

[10]鄭華，劉佳.面向Web的建筑模型分析與碰撞檢測[J].石家莊鐵路職業技術學院學報，2016，15（2）：8994.

[11]HWANG S S，SPEYER J L.Collision detection system based on differential carrierphase global positioning system broadcasts[J].Journal of Aircraft，2015，46（6）：20772089.

[12]SU J，HONG D，TANG J，et al.An efficient anticollision algorithm based on improved collision detection scheme[J].IEICE Transactions on Communications，2016，99（2）：465470.

[13]WANG H.Defending continuous collision detection against errors[J].Acm Transactions on Graphics，2014，33（4）：110.

[14]溫茹.虛擬現實環境中碰撞檢測優化技術研究[D].長春：吉林農業大學，2014.

[15]趙偉，譚睿璞，李勇.復雜虛擬環境下的實時碰撞檢測算法[J].系統仿真學報，2010，22（1）：125129

[16]王偉，馬俊，劉偉.基于OBB包圍盒的碰撞檢測研究與應用[J].計算機仿真，2009（9）：180183.

[17]李紅波，周東諭，吳渝.基于混合包圍盒的碰撞檢測算法[J].計算機應用，2010，30（12）：33043306.

[18]盧威，曾定浩，陳繼明，等.虛擬博物館系統構建中的關鍵技術研究[J].計算機科學，2007，34（7）：244247.

責任編輯（責任編輯：孫娟）