趙凱華，陶富嶺，潘煒元

（黃河勘測規(guī)劃設(shè)計有限公司，河南 鄭州 450003）

水利行業(yè)BIM技術(shù)起步相對較晚，目前在設(shè)計階段的應(yīng)用較多，而BIM技術(shù)大部分價值產(chǎn)生在建設(shè)階段及運行維護階段。設(shè)計階段的BIM應(yīng)用，多是通過BIM建模，有效規(guī)避設(shè)計過程中的“錯、漏、碰、缺”問題，從而提高設(shè)計質(zhì)量和效率，可直觀地進行方案比選，為決策提供直觀參考，這些在各設(shè)計平臺內(nèi)即可實現(xiàn)。建設(shè)階段及運行維護階段的BIM應(yīng)用，發(fā)生在BIM設(shè)計階段之后，對設(shè)計平臺依賴度較小，多應(yīng)用于4D工程進度模擬、5D工程量計算及可視化驗收及運行維護等方面，這些應(yīng)用需求多樣，需要一個健全完善的水利工程BIM數(shù)據(jù)管理和綜合應(yīng)用平臺進行支持［6］。目前，BIM在后設(shè)計階段的應(yīng)用多采用客戶端安裝的形式，一方面用戶需要安裝客戶端及相應(yīng)運行環(huán)境，不夠方便；另一方面，跨平臺兼容性差，且無法直接在移動端使用，通用性不夠強。

HTML5.0是HTML（超文本標記語言）的第五套標準，新增了canvas標簽，用以定義圖形，通過腳本可以對其圖形進行控制。同時，HTML5.0也提供了 WebGL特性，通過 canvas標簽來展現(xiàn)。WebGL，是一項基于OpenGL ES2.0的、用來在網(wǎng)頁上繪制和渲染復(fù)雜三維圖形（3D圖形），并允許用戶與之進行交互的技術(shù)，它結(jié)合了HTML5.0和Javascript，允許開發(fā)者在網(wǎng)頁（Web頁面）上創(chuàng)建和渲染三維圖形［7］，可通過著色器編程語言（GLSL ES）實現(xiàn) GPU編程。目前，被 Chrome、Firefox、Safari、Opera等瀏覽器支持，IE11以后的版本也支持WebGL。采用WebGL技術(shù)可實現(xiàn)水利工程BIM模型在Web端進行加載展示，結(jié)合Web開發(fā)構(gòu)建BIM技術(shù)的Web應(yīng)用，可以大幅度節(jié)省使用者的硬件及軟件投入成本，另一方面，無需安裝客戶端即可運行，可運行于PC端、移動端的瀏覽器上，這對BIM技術(shù)在水利工程全生命周期推廣應(yīng)用極為有利。

綜上所述，構(gòu)建水利工程BIM技術(shù)數(shù)據(jù)管理及應(yīng)用平臺，對于推廣BIM技術(shù)在水利工程全生命周期應(yīng)用非常必要，通過Web技術(shù)實現(xiàn)在經(jīng)濟上是合理、在技術(shù)上是可行的。

1 技術(shù)路線

構(gòu)建基于Web技術(shù)的水利工程BIM數(shù)據(jù)管理及應(yīng)用平臺，可將整個業(yè)務(wù)應(yīng)用分為三層，即表示層、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層，如圖1所示。

工作模式如下：表示層主要完成與用戶進行交互，采用WebGL及Javascript技術(shù)完成BIM模型的展示及交互、BIM應(yīng)用業(yè)務(wù)的交互，并將用戶請求傳遞給業(yè)務(wù)邏輯層；業(yè)務(wù)邏輯需完成用戶權(quán)限控制、接收表示層的請求以及對用戶請求合法性校驗，并負責(zé)處理業(yè)務(wù)請求，然后以數(shù)據(jù)訪問請求的形式傳遞給數(shù)據(jù)訪問層；數(shù)據(jù)訪問層運行在服務(wù)器端，接收業(yè)務(wù)邏輯層的數(shù)據(jù)訪問請求，負責(zé)完成對數(shù)據(jù)庫的訪問，并將訪問結(jié)果反饋給業(yè)務(wù)邏輯層，由業(yè)務(wù)邏輯層反饋給表示層，表示層將請求結(jié)果呈現(xiàn)給用戶。

1.1 數(shù)據(jù)及數(shù)據(jù)訪問層

數(shù)據(jù)包括BIM數(shù)據(jù)庫及業(yè)務(wù)數(shù)據(jù)庫中的數(shù)據(jù)，以及文檔、圖片等其他形式數(shù)據(jù)。BIM設(shè)計文件需要經(jīng)過格式轉(zhuǎn)換、輕量化處理后進行存儲，須方便數(shù)據(jù)訪問層進行訪問。

1.1.1 BIM模型文件轉(zhuǎn)換

模型文件轉(zhuǎn)換主要完成三方面工作：

（1）將設(shè)計原始文件轉(zhuǎn)換成平臺適用的文件格式，如stl、obj、json、fbx等。其中stl、obj文件包含了幾何圖形信息，無法表達材質(zhì)信息，obj文件配合mtl文件可實現(xiàn)模型及材質(zhì)文件同時導(dǎo)入，json、fbx格式可以保存幾何屬性信息及材質(zhì)信息。

（2）幾何唯一性表達，對不同構(gòu)件生成與其一一對應(yīng)的ID，通過ID將唯一確定該構(gòu)件。

（3）數(shù)據(jù)壓縮與加密，壓縮后的數(shù)據(jù)可大大減少網(wǎng)絡(luò)傳輸時間，加密可以保證數(shù)據(jù)安全。

1.1.2 BIM模型輕量化處理

由于模型數(shù)據(jù)量大，直接加載會拖慢瀏覽器端顯示效率甚至造成瀏覽器崩潰，因此必須對模型文件進行輕量化操作。輕量化主要手段包括LOD、場景空間八叉樹劃分、增量繪制、繪制對象內(nèi)存池、圖元合并等。其中，LOD，即多重細節(jié)層次，可在不影響畫面視覺效果的條件下，通過逐次簡化景物的表面細節(jié)來減少場景的幾何復(fù)雜性，從而提高繪制算法的效率。該技術(shù)通常對每一原始多面體模型建立幾個不同逼近精度的幾何模型。與原模型相比，每個模型均保留了一定層次的細節(jié)。在實時圖像通信、交互式可視化、虛擬現(xiàn)實、地形表示等領(lǐng)域都得到了應(yīng)用，VR版的谷歌地球采用了LOD技術(shù)。

通過輕量化處理，模型數(shù)據(jù)量減小，大幅提高了網(wǎng)絡(luò)傳輸效率和Web端的顯示效率。

1.1.3 數(shù)據(jù)庫建設(shè)與維護

BIM業(yè)務(wù)應(yīng)用離不開數(shù)據(jù)庫的支持。通過數(shù)據(jù)庫，一方面能夠完成對用戶進行分類管理、權(quán)限控制，以及對工程信息、模型構(gòu)件信息、建設(shè)階段及運行維護階段的信息進行存儲、管理；另一方面，可方便地對數(shù)據(jù)進行增、刪、改、查操作，以及對數(shù)據(jù)維護。

1.1.4 數(shù)據(jù)訪問層

采用Web技術(shù)，須搭建服務(wù)器，通過服務(wù)器端對數(shù)據(jù)進行訪問。所有客戶請求首先送到A-pache服務(wù)器，如果是靜態(tài)文本則由apache解析，如果是動態(tài)請求，如jsp，Apache會將解析工作交給tomcat進行解析，tomcat解析完成后結(jié)果仍通過Apache返回給瀏覽器端，這樣可以達到分工合作，實現(xiàn)荷載均衡，提高系統(tǒng)性能的目的。服務(wù)器端語言可以選擇php、jsp、asp等，可實現(xiàn)數(shù)據(jù)訪問層功能。

1.2 業(yè)務(wù)邏輯層

圖1 系統(tǒng)架構(gòu)

業(yè)務(wù)邏輯層，在完成對用戶請求進行校驗、對業(yè)務(wù)需求進行處理的同時需對用戶權(quán)限進行控制，以實現(xiàn)可根據(jù)用戶權(quán)限進行不同響應(yīng)，使得用戶獲得對自身角色有用的信息，其他信息不予顯示。用戶請求校驗可保障系統(tǒng)安全，防止非法操作。

1.3 表示層

從服務(wù)器端獲得模型文件后，需要在前端完成加載處理。通常采用一些HTML5.0的三維引擎來處理，ThreeJS是一款較成熟的三維渲染引擎，它對WebGL進行了封裝，可提高開發(fā)效率，在建筑工程領(lǐng)域已獲得了較多應(yīng)用，包括 Autodesk的Forge平臺以及廣聯(lián)達的 BIMFace平臺。使用ThreeJS進行模型渲染處理，前端主要工作如下：

（1）通過ThreeJS引擎構(gòu)建場景并加載模型，如果是通過stl、obj格式加載幾何模型信息缺少材質(zhì)信息，可通過ThreeJS庫API實現(xiàn)貼材質(zhì)。

（2）Web前端 UI設(shè)計，主要完成界面設(shè)計、需熟悉前端開發(fā)的人員完成，需具備html、CSS、Javascript的基本知識，這部分采用前端設(shè)計UI框架提升效率。

（3）BIM模型交互設(shè)計，主要完成特定的模型交互需求，如模型平移、旋轉(zhuǎn)等基本操作，以及剪切、測量等工程需求。

（4）BIM業(yè)務(wù)交互設(shè)計，需結(jié)合具體的BIM應(yīng)用需求，對前端頁面進行定制，并將請求發(fā)送到業(yè)務(wù)邏輯層。

2 關(guān)鍵技術(shù)研究

2.1 W eb三維場景構(gòu)建及模型加載

采用ThreeJS引擎將模型加載到網(wǎng)頁，需要三個組件：場景、相機、渲染器，缺一不可。其中，相機相當(dāng)于用戶的眼睛，通過對其控制來實現(xiàn)移動、旋轉(zhuǎn)等基本操作，可實現(xiàn)模擬第一人稱視角進行漫游。

ThreeJS中包括四種相機：透視相機PerspectiveCamera、正交投影相機OrthographicCamera、全景相機CubeCamera和3D相機StereoCamera。其中，透視相機最接近自然的視圖，滿足近大遠小的規(guī)律；正交投影相機將所有尺寸相同的物體渲染一樣大，二維游戲開發(fā)時常用；全景相機是可360度拍攝的相機，使用六個不同方向的相機同時拍攝，將拍攝的結(jié)果融合到同一個畫面中；3D相機是用兩個不同位置的透視相機同時拍攝，將拍攝的結(jié)果合成到一個畫面。相機選擇很重要，根據(jù)不同需求選擇合適的相機。

渲染器包括WebGLRender和CanvasRender。其中WebGLRender使用WebGL來渲染圖形，速度較快，但是有些瀏覽器不支持；CanvasRender瀏覽器支持性好，使用canvas2d來渲染圖形，渲染速度差一些，主要用來渲染2D圖形。BIM模型加載使用WebGLRender。

在引入three.js庫之后，可以調(diào)用three.js提供的API函數(shù)生成三大組件，這里采用PerspectiveCamera和 WebGLRender。

其中，PerspectiveCamera四個參數(shù)分別代表垂直方向觀察角度、視窗的寬高比、最近視角、最遠視角。onGrogess和onError為加載obj文件過程中以及加載出錯時的回調(diào)函數(shù)，如果加載成功則將模型添加到場景中。

2.2 模型簡單交互實現(xiàn)

要實現(xiàn)鼠標和模型互動，讓模型動起來，可通過給模型添加ThreeJS的OrbitControl控制器實現(xiàn)模型的平移、轉(zhuǎn)動等操作。在引入OrbitControls.js文件后，可通過代碼添加。

2.3 選擇功能實現(xiàn)

通過以上兩步已經(jīng)可以將obj模型加載如場景并使場景動起來，但是并不支持模型選擇。實現(xiàn)選擇功能，需要開發(fā)者自己實現(xiàn)，通過Javascript和ThreeJS配合完成。實現(xiàn)流程如圖2所示。

定義模型選中后狀態(tài)的原理是，在原模型位置上生成新的模型并賦予新的材質(zhì)，然后添加到場景中。

2.4 基本剪切功能實現(xiàn)

剪切是在BIM設(shè)計軟件中非常實用的功能，通過它可方便地查看工程建筑物內(nèi)部結(jié)構(gòu)，ThreeJS提供了基本的剪切功能，主要實現(xiàn)步驟為：①定義剪切面。通過定義THREE.Plane來定義剪切面對象，該類封裝了一些方法，通過這些方法可實現(xiàn)剪切位置的變化；②設(shè)置場景中材質(zhì)的clippingPlanes屬性；③設(shè)置渲染器的localClippingEnabled屬性，通過clipShadows屬性可設(shè)置是否剪切陰影。

圖2 選中功能實現(xiàn)流程

2.5 測量功能實現(xiàn)

常用的測量功能包括距離測量和高程測量，根據(jù)鼠標在模型上點擊點的坐標來計算兩點之間距離或者某點的高程，ThreeJS并沒有提供相應(yīng)工具，需根據(jù)需求來定制開發(fā)。實現(xiàn)該功能主要步驟如下：①給＜canvas＞組件添加鼠標監(jiān)聽事件；②判斷是否為左鍵按下，如果是繼續(xù)下一步，否則直接退出；③鼠標點擊坐標轉(zhuǎn)換為屏幕坐標；④判斷是否與模型相交，如果是繼續(xù)下一步，否則退出；⑤記錄交點坐標；⑥根據(jù)坐標信息可獲取高程信息，或者計算兩點間的距離，從而完成高程測量與距離測量。該部分流程與選中功能實現(xiàn)雷同。

3 典型功能實現(xiàn)

某水利工程采用CATIA進行BIM設(shè)計，以設(shè)計成果，即CATPart文件為BIM模型，構(gòu)建了基于Web技術(shù)的BIM數(shù)據(jù)管理及應(yīng)用平臺。采用A-pache+Tomcat搭建了后臺服務(wù)器，服務(wù)器端采用php處理客戶端請求，數(shù)據(jù)庫采用MySQL，Web前端使用了jQuery庫、bootstrapUI框架。將模型轉(zhuǎn)換為stl格式文件加載到場景中，賦予基本材質(zhì)，并生成了水面效果。完成BIM模型交互功能包括：

· 模型選中

· 右鍵菜單

· BIM信息查詢

· 剪切盒子

· 剪切面

· 測量距離

· 測量高程

另外，實現(xiàn)了捕捉功能，可實現(xiàn)距離的精確測量。

該系統(tǒng)目前部署在內(nèi)網(wǎng)，經(jīng)過內(nèi)網(wǎng)電腦及移動端測試，均取得了良好效果，無需安裝客戶端和任何插件，只要瀏覽器支持WebGL，登錄系統(tǒng)后可實現(xiàn)對BIM模型查看、工程信息查詢、模型顯示及隱藏、模型漫游、裁剪以及測量等操作。

4 總結(jié)及展望

WebGL技術(shù)解決了BIM模型在瀏覽器端的展示問題，配合前端開發(fā)技術(shù)及數(shù)據(jù)庫技術(shù)，能夠應(yīng)對從簡單到復(fù)雜的BIM模型交互需求及BIM業(yè)務(wù)應(yīng)用需求，通過模型格式轉(zhuǎn)換及數(shù)據(jù)輕量化處理可以解決遠程數(shù)據(jù)傳輸效率問題。構(gòu)建基于Web技術(shù)的水利工程BIM數(shù)據(jù)管理及應(yīng)用平臺，既能保護BIM原始模型數(shù)據(jù)的安全，同時將BIM模型信息進行展示，又降低了在施工及運行維護階段推廣BIM應(yīng)用的軟件及硬件投入成本，管理部門及政府監(jiān)管部門的都是BIM技術(shù)的受益者，這必將推動BIM技術(shù)在水利工程全生命周期推廣應(yīng)用。

［1］Ballard，G.，The Last Planner System of Production Control，2000，Ph.D.Diss.，F(xiàn)aculty of Engineering［J］.School of Civil Engineering，The University of Birmingham，UK.

［2］NIBSNational BIM Standard Project Committee［OL］.National BIM Standard，2006，retrieved from http：／／cic.vtt.fi／projects／vbenet／data／What_is_the_NBIMS.pdf，5-12.

［3］王珺.BIM理念及BIM軟件在建設(shè)項目中的應(yīng)用研究［D］.西南交通大學(xué)，2011.

［4］張建平，李丁，林佳瑞，等.BIM在工程施工中的應(yīng)用 ［J］.施工技術(shù)，2012（16）：10-17.

［5］何關(guān)培.BIM和BIM相關(guān)軟件 ［J］.土木建筑工程信息技術(shù)，2010（04）：110-117.

［6］劉輝.BIM定義水利工程建設(shè)和管理的未來［OL］.來源：http：／／mp.weixin.qq.com／s／LBCcEgW-NgBDgvX7SdKtYg.

［7］謝光磊，譯.Kouichi Matsuda Rodger Lea.WebGL Programming Guide：Interactive 3D Graphics Progrmming With WebGL［M］.北京：電子工業(yè)出版社，2014.