基于WebGL的三維模型及其信息化技術(shù)研究

鄭 華 劉 洋

（石家莊鐵路職業(yè)技術(shù)學(xué)院 河北石家莊 050061)

基于WebGL的三維模型及其信息化技術(shù)研究

鄭 華 劉 洋

（石家莊鐵路職業(yè)技術(shù)學(xué)院 河北石家莊 050061)

面向Web，基于WebGL技術(shù)和three.js引擎，研究三維模型在B/S環(huán)境下的展示、分析、子類選取和信息化技術(shù)，開發(fā)一些支撐Web3D應(yīng)用程序的中間件，設(shè)計了統(tǒng)一的UBSP（Unified Bim Server Platform）平臺，解決用戶在 Web端的模型上傳、模型瀏覽和信息管理問題，實驗結(jié)果表明，UBSP系統(tǒng)在模型分析、動畫處理、信息化等方面具備了足夠的穩(wěn)定性和實用性，平臺適用于建筑、機(jī)械、電子等行業(yè)的設(shè)備運維階段。

WebGLthree.js UBSP BIM

1 引言

傳統(tǒng)的信息化系統(tǒng)以關(guān)系數(shù)據(jù)庫為基礎(chǔ)，以C/S或B/S架構(gòu)解決特定領(lǐng)域的業(yè)務(wù)、安全和流程問題，由于 B/S架構(gòu)可以免去軟件安裝的環(huán)節(jié)，在系統(tǒng)升級、用戶使用方面有著天然的優(yōu)勢，現(xiàn)在 B/S架構(gòu)的系統(tǒng)成為了主流。

然而基于瀏覽器的應(yīng)用程序也有其天然的缺陷，比如性能問題、界面問題、狀態(tài)保存問題、3D圖形處理問題等等，這其中最弱的環(huán)節(jié)便是瀏覽器的3D圖形與動畫處理能力。

2009年8月，WebGL繪圖技術(shù)標(biāo)準(zhǔn)誕生，他可以直接在HTML5的Canvas元素中繪制三維動畫并提供硬件三維加速渲染功能，開創(chuàng)了基于Web的3D應(yīng)用程序的新格局。從此，瀏覽器端的3D引擎問題有了好的解決方案。

為了簡化Web端的3D編程，目前已有大量的基于WebGL技術(shù)的JavaScript引擎庫，如SceneJS、WebGLU、Three.js等。在眾多的引擎中，Three.js以簡單、直觀的方式封裝了3D圖形編程中常用的對象，使用了很多圖形引擎的高級技巧，極大地提高了性能，是一款優(yōu)秀的Web端3D引擎。

Three.js面向Web瀏覽器，解決了3D圖形引擎的封裝問題，其核心仍然是數(shù)學(xué)運算，如矩陣、向量、平移、縮放、旋轉(zhuǎn)等，在應(yīng)用程序端，Three.js并不提供任何封裝機(jī)制，由此又出現(xiàn)了很多基于Three.js引擎的、面向應(yīng)用程序的開發(fā)框架，Sim.js便是其中一個，他重新封裝了Three.js的API，支持用戶以面向?qū)ο蟮姆绞竭M(jìn)行3D編程，簡化了目標(biāo)選取、鼠標(biāo)事件處理、關(guān)鍵幀動畫等3D空間中難以駕馭的編程內(nèi)容。

基于Three.js引擎和Sim.js框架，本文研究了Web環(huán)境下的三維模型及其信息化技術(shù)，開發(fā)了基于B/S結(jié)構(gòu)的3D應(yīng)用程序中間件，允許用戶通過Web直接上傳三維模型，根據(jù)用戶級別的不同，調(diào)用不同的中間件，實施不同的信息化方案。

近幾年來，BIM（Building Information Model）成為了國內(nèi)的研究熱點，基于B/S架構(gòu)的BIM服務(wù)器是目前最熱的研究領(lǐng)域之一，至今還沒有非常成熟的應(yīng)用系統(tǒng)。作者結(jié)合上述研究，開發(fā)了 UBSP（Unified BIM Server Platform）平臺，平臺可以面向建筑、機(jī)電、裝飾、業(yè)余愛好者等各行各業(yè)，提供統(tǒng)一的三維模型展示及其信息化服務(wù)。

2 Web下的三維模型顯示與控制

2.1 模型顯示

到目前為止，Three.js可以直接支持amf、json、dae、ctm、obj、md2、ply、stl等格式三維模型。無論哪種格式的模型，Three.js最終都會將其解析為若干Object3D（Three.js中關(guān)于3D對象的基類）對象的組合，以obj模型為例，導(dǎo)入模型的API如下：loader.load('model.obj','model.mtl',function ( object ) {…});

代碼中的 object即為最終返回的Object3D對象，可以直接放入 3D場景（Scene），如圖1所示：

如果僅限于模型的整體顯示，該方法是可行的，但其缺陷在于不能執(zhí)行模型的進(jìn)一步細(xì)化處理，因為loader方法會將整個模型文件封裝成一個獨立的3D對象，只能做整體處理。

2.2 模型控制

模型加入場景以后，要允許用戶從不同角度來查看模型，Three.js封裝了很多場景控制類，其中最常用的兩個類是First Person Controls和Trackball Controls，前者用于第一人稱漫游控制，后者用于旋轉(zhuǎn)、平移和縮放控制，系統(tǒng)預(yù)定義了一些控制熱鍵，表1即為Trackball Controls類的控制熱鍵，用戶可根據(jù)需求自行拓展其他熱鍵。

圖1 導(dǎo)入obj模型

表1 THREE.Trackball Controls中的控制鍵

需要注意的是，Three.js內(nèi)置的場景控制類并沒有提供碰撞檢測機(jī)制，在巡游過程中會出現(xiàn)攝像機(jī)穿墻而過的情況，這部分功能需要用戶自行解決。

由于大多數(shù)建筑具有橫平豎直的特點，為提高效率，可以使用AABB（Axially Aligned Bounding Box，軸對齊矩形邊界框）包圍盒算法，即先對模型進(jìn)行子類拆解，然后為每個子類計算包圍盒，在每一次攝像機(jī)的位移過程中，通過判斷攝像機(jī)是否與包圍盒相撞，實現(xiàn)碰撞檢測機(jī)制，主要代碼如下：

3 Web下的三維模型拆解與重組

3.1模型拆解

loader方法會將整個模型文件封裝成一個獨立的Object3D對象，需要將其逐個拆開，這樣才能為每一個子類進(jìn)行獨立的信息化管理。

Object3D本質(zhì)上是一個抽象類，該類聲明了一些3D對象的基本私有屬性，如ID、名稱、位置、本地矩陣和世界矩陣等，除此外還聲明了一個私有屬性：children數(shù)組，該數(shù)組包含了 Object3D對象的所有子類。

通過遍歷children數(shù)組，即可得到模型中的所有子類，從而實現(xiàn)模型拆解，如圖2所示，在“模型信息”欄中，可以看到該模型共包含711個子類。

通過調(diào)用traverse函數(shù)可以遞歸遍歷children數(shù)組，比如：

圖2 通過children數(shù)組獲取所有模型子類

3.2 模型重組

拆解出來的模型子類有兩個用途，一是用于碰撞檢測，二是便于對子類實施信息化管理。子類在加入場景以前先要進(jìn)行實例化、注冊鼠標(biāo)事件等操作，然后在原位置上重新置入場景即可完成模型的重組。

需要注意的時，在模型文件中并不只是包含網(wǎng)格(Mesh)對象，還會有一些其他信息，比如燈光、攝像機(jī)、骨骼、動畫等數(shù)據(jù)，因此在模型重構(gòu)時，要過濾掉與場景無關(guān)的對象。在UBSP系統(tǒng)實現(xiàn)中，只提取了模型中網(wǎng)格對象，燈光、動畫部分的內(nèi)容則由程序后期根據(jù)需要自行添加，比如場景顏色和亮度控制、模型子類的動畫控制（如開關(guān)門、鼠標(biāo)經(jīng)過時點亮子類等動作）。

Three.js并沒有提供Object3D對象的事件注冊機(jī)制，Sim.js框架中對這部分內(nèi)容進(jìn)行了封裝，常用的鼠標(biāo)事件包括：handleMouseOver、handleMouseOut和handleMouseDown，前兩個事件可用于子類點亮和一些AJAX程序，第三個事件即鼠標(biāo)單擊事件，可用于實現(xiàn)模型子類的信息化管理。模型重組部分的主要代碼如下：

//實例化每一個子類并加入場景

4 Web下的三維模型信息化系統(tǒng)實現(xiàn)

4.1 模型格式及場景自適應(yīng)問題

在3D建模領(lǐng)域，由于沒有統(tǒng)一的標(biāo)準(zhǔn)，不同廠商都定義了自己的3D模型格式，但最核心的內(nèi)容都是網(wǎng)格對象及其點、線、面等參數(shù)的定義。其中Autodesk公司的Obj格式由于文本存儲、沒有專利限制等優(yōu)點而被廣泛采納，幾乎所有的建模工具都能導(dǎo)出這種格式的模型。在UBSP系統(tǒng)實現(xiàn)中，仍然采用了這種格式。

在UBSP平臺中，模型由用戶自行上傳至服務(wù)器，因此存在模型尺寸要自適應(yīng) 3D場景的問題。模型有大有小，在瀏覽器上呈現(xiàn)出來時，必須保證以合適的角度、比例、位置來顯示模型。UBSP系統(tǒng)通過對模型進(jìn)行分析計算，得到模型的最大的外立方體包圍盒，根據(jù)此包圍盒計算攝像機(jī)的位置和朝向，從而達(dá)到良好的呈現(xiàn)效果。

圖3 關(guān)鍵幀動畫與AJAX提示信息

4.2 界面問題

在UBSP系統(tǒng)實現(xiàn)中，兩個最關(guān)鍵的界面問題是鼠標(biāo)經(jīng)過子類時的點亮效果和異步信息提示問題，如圖3所示。

子類點亮效果可以通過修改材質(zhì)的emissive屬性并輔以關(guān)鍵幀動畫來實現(xiàn)，其中關(guān)鍵幀部分的主要代碼如下：

//定義關(guān)鍵幀動畫類

//定義關(guān)鍵幀數(shù)據(jù)

MeshBox.Keys = [0, 0.5, 1];

MeshBox.EmissiveValues = [{ r: 1, g: 1, b: 0 }, { r: 1, g: 0, b: 0 }, { r: 1, g: 1, b: 0}];

這段代碼將產(chǎn)生一個以0.5秒為周期的，在黃色和紅色之間不斷過渡的顏色動畫，用于點亮子類時效果非常明顯。

另外一個異步信息提示的界面問題，可以直接通過AJAX和JSON來實現(xiàn)，保證在不刷新整個網(wǎng)頁的前提下，局部更新網(wǎng)頁內(nèi)容，更新過程由系統(tǒng)在后臺完成。

4.3 數(shù)據(jù)庫及其與模型的關(guān)聯(lián)問題

UBSP系統(tǒng)被設(shè)計為一個提供公共三維模型信息化服務(wù)的平臺，所有模型的子類信息數(shù)據(jù)將被保存到同一張數(shù)據(jù)表（T_Model_Info）中，表結(jié)構(gòu)如下：

表2T_Model_Info的表結(jié)構(gòu)

這樣的設(shè)計為信息化管理提供了一定的可擴(kuò)展性，將來可以根據(jù)名稱、時間、模型id等字段進(jìn)行分類查詢。

模型和數(shù)據(jù)庫的關(guān)聯(lián)，最關(guān)鍵的問題是Sub_id字段如何與模型子類建立關(guān)聯(lián)關(guān)系，Three.js引擎在解析模型文件時會為每一個子類順序分配一個geometryid，程序可直接引用該參數(shù)，比如：

mesh.name = box.geometry.id;

UBSP系統(tǒng)中，基于模型子類的信息化管理界面如圖4所示。

圖4 基于模型子類的信息化管理

除此外還有一些其他的數(shù)據(jù)表，比如T_Models和T_Users分別用于保存模型數(shù)據(jù)和用戶數(shù)據(jù)。

4.4 Web服務(wù)器

UBSP系統(tǒng)的服務(wù)器環(huán)境為：SQL Server 2008數(shù)據(jù)庫 + IIS7.0 + ASP.NET4.0；客戶端測試環(huán)境為：Intel Core?2雙核CPU、2G內(nèi)存、NVIDIA GeForce 9400 GT顯卡；建模軟件為：Revit 2014中文版、3ds Max2010中文版。

5 結(jié)論

本文面向Web，針對B/S環(huán)境下的三維模型信息化難題，設(shè)計并實現(xiàn)了統(tǒng)一的UBSP（Unified Bim Server Platform）平臺，根據(jù)用戶級別的不同，開發(fā)了三個不同的3D應(yīng)用程序中間件：場景巡游、模型拆解和模型信息化，解決了Web端用戶的模型上傳、瀏覽和信息管理問題，可以為建筑、機(jī)電、裝飾、業(yè)余愛好者等行業(yè)，提供統(tǒng)一的三維模型展示及其信息化服務(wù)。

與現(xiàn)有的基于B/S結(jié)構(gòu)的BIM服務(wù)器相比，UBSP系統(tǒng)的最大亮點是其通用性，用戶只需在平臺上注冊用戶即可獲得模型信息化服務(wù)，無需定制，使用方便，節(jié)約成本。

最后，UBSP并不提供建模功能，他只是提供模型分析和信息化服務(wù)，因此，UBSP系統(tǒng)適用于模型運維階段。

[1]張建平,余芳強,李丁.面向建筑全生命期的集成BIM建模技術(shù)研究[J].土木建筑工程信息技術(shù),2012,4(01):6-14.

[2]王珩瑋,胡振中,林佳瑞. 面向Web的BIM三維瀏覽與信息管理[J].土木建筑工程信息技術(shù),2013,5(03):1-7.

[3]劉愛華,韓勇,張小壘.基于WebGL技術(shù)的網(wǎng)絡(luò)三維可視化研究與實現(xiàn)[J].地理空間信息,2012,10(05):79-81.

[4]王磊,高玨,金野.基于Web3D無插件的三維模型展示的研究[J].計算機(jī)技術(shù)與發(fā)展,2015,25(04):217-220.

[5]譚文文,丁世勇,李桂英.基于webGL和HTML5的網(wǎng)頁3D動畫的設(shè)計與實現(xiàn)[J].電腦知識與技術(shù),2011,7(28):6981-6983.

[6]霍冬,鄭偉華,盛步云. 基于WebGL的機(jī)械產(chǎn)品三維展示技術(shù)研究[J].制造業(yè)自動化,2013,35(09):73-77.

[7]周敬敬,陳昕,吳開超.利用 WebGL技術(shù)實現(xiàn)機(jī)房動態(tài)虛擬裝配設(shè)計的可視化[J].科研信息化技術(shù)與應(yīng)用,2013,4(02):87-92.

[8]趙學(xué)偉,沈旭昆,齊越. 基于Web的交互式三維發(fā)布系統(tǒng)[J].計算機(jī)工程, 2007,33(22):5-7.

[9] Cantor D. WebGL Beginner’s Guide[M]. Birmingham, United Kingdom: Packt Publishing, Limited, 2012

[10]P.M.Hubbard.Approximating polyhedra with sphms for time-critical collision detection[J].ACM TrimsGraph,1996,15(3):179-210.

Research on 3D Model and Information Technology Based on WebGL

ZHENG Hua LIU Yang
(Shijiazhuang Institute of Railway Technology Shijiazhuang 050061 Hebei China)

Oriented to Web, based on WebGL technology and three.js engine, this paper studied the display, analysis, sub-model selection and information technologies of 3D model in the B/S environment. Some middleware for supporting Web3D applications are developed, a unified UBSP(Unified Bim Server Platform) platform is designed, the model upload, browsing and information management issues in the Web are solved. Experimental results show that UBSP system has enough stability and practicality in model analysis, animation processing and information technologies, which is suitable for construction, machinery, electronics and other industries of the equipment maintenance phase.

WebGL three.js UBSP BIM

A

1673-1816(2017)01-0064-07

2016-03-12

鄭華（1977-），男，漢，安徽歙縣人，本科，副教授，研究方向關(guān)系數(shù)據(jù)庫、計算機(jī)網(wǎng)絡(luò)技術(shù)。

項目支持：河北省教育廳2016青年基金項目，基于B/S結(jié)構(gòu)的BIM服務(wù)器中間件技術(shù)研究，基金號：QN2016215