基于W eb水利工程BIM數據管理及應用研究

趙凱華，陶富嶺，潘煒元

（黃河勘測規劃設計有限公司，河南 鄭州 450003）

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

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

綜上所述，構建水利工程BIM技術數據管理及應用平臺，對于推廣BIM技術在水利工程全生命周期應用非常必要，通過Web技術實現在經濟上是合理、在技術上是可行的。

1 技術路線

構建基于Web技術的水利工程BIM數據管理及應用平臺，可將整個業務應用分為三層，即表示層、業務邏輯層、數據訪問層，如圖1所示。

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

1.1 數據及數據訪問層

數據包括BIM數據庫及業務數據庫中的數據，以及文檔、圖片等其他形式數據。BIM設計文件需要經過格式轉換、輕量化處理后進行存儲，須方便數據訪問層進行訪問。

1.1.1 BIM模型文件轉換

模型文件轉換主要完成三方面工作：

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

（2）幾何唯一性表達，對不同構件生成與其一一對應的ID，通過ID將唯一確定該構件。

（3）數據壓縮與加密，壓縮后的數據可大大減少網絡傳輸時間，加密可以保證數據安全。

1.1.2 BIM模型輕量化處理

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

通過輕量化處理，模型數據量減小，大幅提高了網絡傳輸效率和Web端的顯示效率。

1.1.3 數據庫建設與維護

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

1.1.4 數據訪問層

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

1.2 業務邏輯層

圖1 系統架構

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

1.3 表示層

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

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

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

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

（4）BIM業務交互設計，需結合具體的BIM應用需求，對前端頁面進行定制，并將請求發送到業務邏輯層。

2 關鍵技術研究

2.1 W eb三維場景構建及模型加載

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

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

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

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

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

2.2 模型簡單交互實現

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

2.3 選擇功能實現

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

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

2.4 基本剪切功能實現

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

圖2 選中功能實現流程

2.5 測量功能實現

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

3 典型功能實現

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

· 模型選中

· 右鍵菜單

· BIM信息查詢

· 剪切盒子

· 剪切面

· 測量距離

· 測量高程

另外，實現了捕捉功能，可實現距離的精確測量。

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

4 總結及展望

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

［1］Ballard，G.，The Last Planner System of Production Control，2000，Ph.D.Diss.，Faculty 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軟件在建設項目中的應用研究［D］.西南交通大學，2011.

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

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

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

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