網(wǎng)頁環(huán)境下無插件虛擬場景漫游的研究

郭穩(wěn)穩(wěn) 仲梁維

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

關(guān)鍵詞：WebGL;模型交互;可視化;三維場景;漫游

中圖分類號：TP399 ? ? 文獻標(biāo)識碼：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）

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

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

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

2 ? 虛擬場景構(gòu)建（Virtual scene construction）

2.1 ? WebGL渲染管線

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

2.2 ? 基于Three.js的虛擬場景構(gòu)建

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

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

（1）網(wǎng)頁加載完畢后，執(zhí)行初始化函數(shù)，創(chuàng)建場景、相機、渲染器;

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

執(zhí)行渲染函數(shù)，將場景中的對象顯示到顯示設(shè)備上，同時相機位置和姿態(tài)改變時繼續(xù)執(zhí)行渲染操作，實現(xiàn)場景實時更新。

2.3 ? 加載三維模型

在進行場景漫游前，需要將幾何模型導(dǎo)入虛擬場景中進行顯示，目前支持的主流格式有JSON、STL、OBJ、GLTF等，這些格式都是以純文本的形式存儲模型的頂點坐標(biāo)、頂點顏色、法向量、材質(zhì)信息、面信息等。Three.js內(nèi)置了模型加載器，可以讀取模型信息并進行渲染顯示，大致原理都相同，但是Three.js對JSON格式的模型更加友好，因為JSON作為一種數(shù)據(jù)交換格式，具有體積小、傳輸速度快等特點[5]。導(dǎo)入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文件獲取模型的幾何信息，然后創(chuàng)建模型材質(zhì)。這個過程中可以對模型表面材料進行自定義，根據(jù)幾何信息和模型材質(zhì)創(chuàng)建網(wǎng)格模型，并將網(wǎng)格模型添加到虛擬場景中去，渲染器會將網(wǎng)格模型渲染并顯示到屏幕上。

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

3.1 ? 射線相交法拾取模型

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

（1）鼠標(biāo)點擊屏幕上一點時，點對應(yīng)三維空間中的一點，需要將像素坐標(biāo)轉(zhuǎn)換為標(biāo)準化屏幕坐標(biāo)。像素坐標(biāo)系以屏幕左上角為原點，以像素點為單位，代表屏幕的像素寬度和高度。設(shè)備坐標(biāo)系以屏幕中心點為原點，坐標(biāo)范圍為

[-1，1]。從像素坐標(biāo)轉(zhuǎn)換為設(shè)備坐標(biāo)如公式（1）所示，其中和分別表示設(shè)備屏幕的寬度和高度。

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

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

3.2 ? 實現(xiàn)虛擬場景漫游

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

var controls=new OrbitControls（camera， domElement）;

controls.panSpeed=2 // 平移速度

controls .minZoom=0.4 // 最小縮放

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

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

… // 設(shè)置軌道球控制器的其他參數(shù)

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

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

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

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

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

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

5 ? 結(jié)論（Conclusion）

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

參考文獻（References）

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

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

[3] 邊金龍，周偉健，曹曉強.交通監(jiān)控管理系統(tǒng)中互聯(lián)網(wǎng)WebGL三維可視化技術(shù)的應(yīng)用[J].中國交通信息化，2020（03）：? ? ? 130-133.

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

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

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

[7] 陳敏，楊陽.基于WebGL的建筑大模型實時顯示系統(tǒng)設(shè)計與實現(xiàn)[J].電子技術(shù)與軟件工程，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.

作者簡介：

郭穩(wěn)穩(wěn)（1995-），男，碩士生.研究領(lǐng)域：計算機輔助設(shè)計，Web3D技術(shù).

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