網頁環境下無插件虛擬場景漫游的研究

郭穩穩 仲梁維

摘 ?要：隨著網頁技術的快速發展，在網頁上能夠創建更多的復雜頁面。本文使用WebGL技術構建虛擬三維場景，在三維場景中加載渲染中間格式的三維模型，實現三維模型在網頁環境下的可視化展示;并使用射線相交法、幾何變換、相機投影，運用計算機圖形學相關知識，實現模型的交互，主要表現為鼠標點選模型，模型的旋轉、縮放、平移，通過鼠標手勢改變相機的位置和姿態，實現了虛擬場景的漫游，從不同角度對模型進行觀察。通過以上研究，構建了一個具有良好交互性的沉浸式場景漫游系統。

關鍵詞：WebGL;模型交互;可視化;三維場景;漫游

中圖分類號：TP399 ? ? 文獻標識碼：A

Abstract： With rapid development of web technology， more complex pages can be created on the web. This paper proposes to use WebGL （Web Graphics Library） technology to construct virtual 3D scenes， at which intermediate format 3D models are loaded and rendered to realize visual display of 3D models in web environment. Ray intersection， geometric transformation， camera projection， and related knowledge of computer graphics are used to realize interaction of the model， which is mainly manifested as mouse click on the model， the model's rotation， zoom， and translation. Mouse gestures can change position and posture of the camera to realize roaming of the virtual scene， and observe the model from different angles. Through the above research， an immersive scene roaming system with good interaction is constructed.

Keywords： WebGL; model interaction; visualization; three-dimensional scene; roaming

1 ? 引言（Introduction）

互聯網的快速發展推動著人們獲取知識方式的進步和升級[1]。二維網頁以文字、圖片、視頻組合的方式呈現的信息有限，對三維模型信息的展示具有有限性和不充分性，傳統的二維網頁獲取信息的方式已無法滿足人們的要求。三維圖形相對二維圖形有著無法比擬的直觀性，因此越來越多的開發人員將三維應用融入Web頁面中去[2]。目前，對三維應用的研究主要集中在優化頁面性能，優化頁面呈現效果，提高用戶體驗。

WebGL是網頁版的3D繪圖協議，它源于免費的、統一的、標準的OpenGL協議，將JavaScript和OpenGL ES進行綁定，通過HTML5的Canvas標簽獲取WebGL上下文對三維模型進行渲染。同時，WebGL可以調用電腦GPU進行硬件加速，大大提高了渲染質量和效率。目前，幾乎所有的瀏覽器都已經支持WebGL，不需要依賴任何插件且兼容性好[3]。借助WebGL技術可以以可視化的方式與用戶進行交互，使信息展示更加充分，提高用戶體驗。

本文基于WebGL三維圖形引擎實現了無插件三維模型在Web端的顯示及漫游，對其中的一些關鍵點進行了詳細的討論，如外部三維模型的加載、模型的渲染原理、模型的點選、虛擬場景構建及漫游、實時碰撞檢測等。

2 ? 虛擬場景構建（Virtual scene construction）

2.1 ? WebGL渲染管線

在三維場景中要渲染由許多頂點構成的圖形，需要一個非常高效的流程來渲染這些頂點，這一過程由WebGL渲染管線完成。渲染管線是GPU內部處理圖形的并行處理單元，如圖1所示是WebGL渲染管線的渲染流程。首先將模型頂點數據存入頂點緩沖對象，通過頂點著色器的處理后輸入經過幾何、投影變換的頂點坐標，法向量和紋理坐標;然后通過圖元裝配對頂點進行分配組裝，再經過光柵化將圖形離散成像素點的形式，光柵化后輸出的是一幀幀的圖像，再經過片元處理器計算每個頂點的顏色和紋理顏色;最后經過剪裁測試和深度測試將圖像顯示在顯示設備上。

2.2 ? 基于Three.js的虛擬場景構建

雖然WebGL功能強大，但畢竟是位于底層的繪圖協議，使用復雜的著色器語言渲染，開發難度極高。而Three.js是通過JavaScript對WebGL進行封裝的三維圖形引擎，功能強大，易用性強，在虛擬現實、數據可視化領域應用廣泛，只需要通過簡單的JavaScript腳本即可在Web端創建三維場景。

創建三維場景需要三個基本的元素：相機、場景和渲染器[4]。場景是實現三維場景的必要元素，是場景中各個元素的容器，用來放置相機、光源、幾何模型等元素，模型只有被添加到場景中才能被顯示出來。在二維顯示設備上顯示三維模型，正是通過相機的投影將模型投影到顯示設備上，由相機決定哪些物體被顯示出來。本文選擇的是透視相機，因為透視相機渲染的物體會呈現出遠大近小的特點，比較接近現實世界中的真實情況，通過移動相機位置實現在三維場景中的漫游效果。渲染器是三維空間中的核心模塊，它將場景和相機綁定，遍歷場景中的子元素將其顯示到顯示設備上。如圖2所示是一個比較直觀的Three.js創建三維場景的流程，大致可以分為以下兩個過程：

（1）網頁加載完畢后，執行初始化函數，創建場景、相機、渲染器;

（2）為場景添加光源，將渲染器和網頁容器元素進行綁定。

執行渲染函數，將場景中的對象顯示到顯示設備上，同時相機位置和姿態改變時繼續執行渲染操作，實現場景實時更新。

2.3 ? 加載三維模型

在進行場景漫游前，需要將幾何模型導入虛擬場景中進行顯示，目前支持的主流格式有JSON、STL、OBJ、GLTF等，這些格式都是以純文本的形式存儲模型的頂點坐標、頂點顏色、法向量、材質信息、面信息等。Three.js內置了模型加載器，可以讀取模型信息并進行渲染顯示，大致原理都相同，但是Three.js對JSON格式的模型更加友好，因為JSON作為一種數據交換格式，具有體積小、傳輸速度快等特點[5]。導入JSON格式模型的方法如下：

const loader=new THREE.JSONLoader（）;

loader.load（'models/json/lightmap.json'，function

（geometries） {

var material=new THREE.MeshBasicMaterial

（{color： 0x222222}）;

var mesh=new THREE.Mesh（geometries，

material）;

scene.add（mesh）;

}）

將三維建模軟件繪制好的模型保存成JSON格式文件，通過文件加載器讀取JSON文件獲取模型的幾何信息，然后創建模型材質。這個過程中可以對模型表面材料進行自定義，根據幾何信息和模型材質創建網格模型，并將網格模型添加到虛擬場景中去，渲染器會將網格模型渲染并顯示到屏幕上。

3 ?虛擬場景中模型的交互（Model interaction in a virtual scene）

3.1 ? 射線相交法拾取模型

如圖3所示，三維模型的渲染實際是相機拍攝空間中一個物體的過程，乘以相機的投影矩陣將三維模型投影到近平面上，經過光柵化后生成一幀幀的圖像顯示到二維顯示設備上[6]，三維模型的點擊拾取實質上是三維模型到二維圖像的逆過程。三維場景中的元素不支持瀏覽器的原生事件，因此本文使用射線相交法檢測模型是否被鼠標拾取。射線相交法的原理即從鼠標發出一條射線，指向遠平面，檢測該射線是否與三維空間中的物體相交，如果相交，此時鼠標在模型上方，表示鼠標拾取到模型。射線相交法主要分為以下三個步驟：

（1）鼠標點擊屏幕上一點時，點對應三維空間中的一點，需要將像素坐標轉換為標準化屏幕坐標。像素坐標系以屏幕左上角為原點，以像素點為單位，代表屏幕的像素寬度和高度。設備坐標系以屏幕中心點為原點，坐標范圍為

[-1，1]。從像素坐標轉換為設備坐標如公式（1）所示，其中和分別表示設備屏幕的寬度和高度。

（2）通過標準化設備坐標向視景體空間發射射線，射線指向遠平面，這樣就可以實現對視景體中所有的模型進行檢測。

（3）得到所有與射線相交的物體，按照距離從近到遠進行排序，距離最近的物體就是鼠標拾取的模型，將該模型高亮顯示。

3.2 ? 實現虛擬場景漫游

Three.js內置了許多相機控件，通過該控件可以控制虛擬場景中的相機，如軌道球控制器、第一視角控制器、飛行控制器等。軌道球控制器可以控制相機圍繞場景旋轉，也能改變相機的位置和姿態，使用軌道球控制器實現場景漫游是一種主流的方法[7]。用戶可以通過鼠標手勢和鍵盤按鍵控制相機圍繞場景旋轉，從各個角度觀察場景中的模型，也可以控制相機的前后左右移動和觀察角度。OrbitControls.js文件封裝了軌道球控制器控件，將軌道球控制器應用到場景中的關鍵代碼如下所示：

var controls=new OrbitControls（camera， domElement）;

controls.panSpeed=2 // 平移速度

controls .minZoom=0.4 // 最小縮放

this.controls.enableKeys=true // 是否啟用鍵盤控制

this.controls.target.set（0， 0， 0）

… // 設置軌道球控制器的其他參數

實例化軌道球控制器對象，將場景中的相機和網頁頁面元素作為參數傳給控制器對象，可以自定義控制器參數，也可以使用默認參數。為了實時更新相機的位置，需要在鼠標移動時觸發場景渲染方法，從而實時進行虛擬場景漫游，讓相機位置的改變更加流暢，增加場景的沉浸感。

4 ?基于Raycaster和包圍盒的碰撞檢測（Collision detection based on Raycaster and bounding box）

碰撞檢測在很多領域都有應用，如何準確地實現碰撞檢測是比較困難的問題。在無人機飛行、自動駕駛、航空航天等領域要求安全性和嚴格性，且需要能夠對碰撞進行預測。在虛擬場景漫游時無須考慮安全性和預測性，只需要在相機和場景中的物體即將發生碰撞時，正確控制相機的位置，防止相機和場景中的物體發生穿透現象即可[8]。

目前，已經有好幾種解決方案可以解決虛擬場景漫游問題，但是不依賴任何插件實現碰撞檢測還是有一定困難的。本文基于Raycaster和包圍盒檢測算法實現碰撞檢測，無須依賴任何插件，只需要借助瀏覽器腳本語言JavaScript即可[9]。Raycaster是Three.js封裝的類，表示從某一點投射出去的一條射線。包圍盒是場景中的相機外包圍一個立方體（或球體），在渲染過程中包圍盒跟隨相機位置的變化而變化，由于相機不具有大小，因此借助包圍盒確定相機和場景物體之間的實時位置關系[10]，如圖4所示是室內場景漫游效果圖，借助碰撞檢測保證相機和物體不會發生穿透現象。

基于Raycaster和包圍盒碰撞的檢測原理如下：以包圍盒的中心為起點，從起點向包圍盒各個頂點發射一束射線，檢測射線是否與場景中其他物體發生相交，如果相交，計算最近的一個交點與射線起點間的距離，如果這個距離比射線起點至包圍盒頂點距離小，則說明發生了碰撞，即發生了穿透現象，如圖5所示是碰撞檢測原理圖。

如圖6所示，是基于Raycaster和包圍盒的碰撞檢測流程。這種檢測方法屬于離散碰撞檢測，在render函數中，對每一幀進行靜態的相交測試，實質是對物體進行取樣并檢測。推薦通過提高包圍盒的分段數來提高算法準確性，但分段數過高會降低運算性能。

5 ? 結論（Conclusion）

本文詳細介紹了基于WebGL的無插件漫游技術，實踐表明，經過處理的三維模型可以在Web端實現可視化顯示及場景漫游;討論了射線相交法，實現在二維顯示設備上對三維模型的拾取，軌道控制器改變相機的位置和姿態實現場景的旋轉、縮放、平移，從不同角度對模型進行觀察。碰撞檢測可以提高漫游沉浸感，基于Raycaster和包圍盒的碰撞檢測可以防止相機和模型發生穿透現象。本文使用WebGL技術實現了無插件場景漫游和交互，未來可以在如何提高檢測準確性、優化算法性能等方面深入研究，相信隨著WebGL技術的發展，會出現越來越多的Web端三維應用，提供更加豐富的用戶體驗。

參考文獻（References）

[1] 劉文曉.基于WebGL的大體量三維模型渲染優化[D].武漢：華中科技大學，2019.

[2] 羅雅丹，羅琪斯.基于WebGL的全景技術智慧旅游系統[J].計算機系統應用，2020，29（01）：86-92.

[3] 邊金龍，周偉健，曹曉強.交通監控管理系統中互聯網WebGL三維可視化技術的應用[J].中國交通信息化，2020（03）：? ? ? 130-133.

[4] 馬瞳宇，崔靜，儲鼎.基于WebGL的實景三維場景與視頻監控圖像融合技術研究[J].測繪與空間地理信，2020，43（S1）：? ? ? 80-83.

[5] 李倩.基于WebGL的3D技術在網頁中的運用[J].電子測試，2020（12）：125-126.

[6] 晁陽，牛志偉，齊慧君.基于WebGL的BIM模型可視化研究[J].水電能源科學，2020，38（09）：79-82.

[7] 陳敏，楊陽.基于WebGL的建筑大模型實時顯示系統設計與實現[J].電子技術與軟件工程，2019（13）：71-72.

[8] QI A L， WANG H， WU Y H， et al. Research on the collision detection technology of coal-cutting machinery in remote virtual control[J]. Applied Mechanics and Materials， 2015（3785）：863-866.

[9] WANG W S， LI X W， DENG Z J. The development and application of 3-D visual display platform for safety monitoring information of hydropower project[J]. IOP Conference Series： Earth and Environmental Science， 2018， 189（2）：103-116.

[10] SIEBERTH T， DOBAY A， AFFOLTER R， et al. Applying virtual reality in forensics—A virtual scene walkthrough[J]. Forensic Science， Medicine and Pathology， 2019， 15（1）：41-47.

作者簡介：

郭穩穩（1995-），男，碩士生.研究領域：計算機輔助設計，Web3D技術.

仲梁維（1962-），男，碩士，教授.研究領域：計算機輔助智能設計制造.