基于WebGL的水利工程三維可視化研究應用

梁啟斌 羅朝林

(珠江水利委員會珠江水利科學研究院，廣東 廣州 510610)

1 引 言

隨著用戶體驗需求快速興起，信息化與數(shù)字化技術已經(jīng)融入社會生活的方方面面，運用的技術和手段也越來越多[1-3]，可視化技術就是其中的一種?？梢暬夹g和工具眾多，在水利工程建設中應用廣泛[4]，其中3D虛擬現(xiàn)實技術備受重視，各行業(yè)呈現(xiàn)出從二維平面展示模型轉向三維模型立體展示模型的發(fā)展趨勢[5]。與此同時，新一代3D繪圖標準協(xié)議WebGL(Web Graphics Library)應運而生，推動了網(wǎng)絡三維可視化技術的發(fā)展，使普通電腦瀏覽器也能流暢展示3D場景和模型。水利行業(yè)的三維展示技術起步相對較慢，目前主要通過BIM建模，并提高設計質(zhì)量和效率，但用于用戶模型展示時存在安裝復雜、跨平臺兼容性差等問題[6]。有許多學者及技術人員把水利工程與WebGL技術進行結合，2018年潘飛等[7]采用WebGL作為集成容器，把BIM和GIS技術有機結合，實現(xiàn)GIS中IFC模型數(shù)據(jù)的分級集成；2020年晁陽等[8]運用WebGL技術實現(xiàn)BIM模型可視化展示。

本文基于WebGL技術，將三維模型利用軟件進行輕量化轉換，并通過代碼編寫實現(xiàn)三維模型在Web瀏覽器輕量化顯示及實時數(shù)據(jù)交互功能[9]，使三維模型展示免去程序安裝的過程，且具備跨平臺瀏覽的特性，有利于三維模型技術的推廣，促進水利行業(yè)建設與管理由傳統(tǒng)的紙質(zhì)化、平面化、粗放式向數(shù)字化、立體化、精細化轉變。

2 WebGL技術及SketchUp軟件

2.1 WebGL技術

WebGL是一種3D繪圖協(xié)議，這種繪圖技術標準把JavaScript和OpenGL ES 2.0結合在一起，允許開發(fā)者在Web頁面上創(chuàng)建和渲染三維圖形[10]。目前被Firefox、Chrome、Opera、Safari、IE11以上版本等瀏覽器支持。其完美地解決了目前Web交互式3D動畫的兩個問題：一是無須任何瀏覽器插件支持，僅使用HTML腳本即可實現(xiàn)Web交互式3D動畫的制作；二是通過標準的、統(tǒng)一的、跨平臺的OpenGL接口，調(diào)用底層圖形硬件加速功能進行圖形渲染[11]。

WebGL技術目前有兩款主流的三維框架，分別是Three.js和ThingJS。兩者都是JavaScript 三維庫，都運用 JavaScript 對WebGL的三維處理能力進行封裝。其中Three.js更偏向三維技術底層，適合三維愛好者學習三維技術；ThingJS更偏重信息化應用功能開發(fā)，重在提高開發(fā)效率，降低開發(fā)成本，適合使用三維技術做項目的開發(fā)者[12]。

2.2 SketchUp軟件

SketchUp是Google開發(fā)的一套直接面向設計方案創(chuàng)作過程的完整3D建模設計工具，具有易學易用、所見即所得的特點。采用SketchUp進行設計，不僅能通過著色、貼圖和渲染材質(zhì)等功能充分表達設計師的設計理念，還能加深工程建設參與方對設計方案的理解，提高水利工程施工的精度和質(zhì)量，能更好地指導水利工程施工[13]。

3 三維可視化實現(xiàn)方式

3.1 SketchUp建模

SketchUp軟件提供了兩種基本的底圖繪制方式。一是直接繪制，在新建項目中利用SketchUp軟件自帶的繪圖工具完成底圖的繪制工作；二是導入CAD軟件生成的底圖(見圖1)[14]。前者工作效率較低，但精準度高，不易出現(xiàn)軟件無法識別的錯誤；后者制圖效率高，但需要對導入的CAD底圖進行預處理，否則會出現(xiàn)軟件報錯。

圖1 CAD底圖

CAD地圖預處理流程如下：

步驟1：打開圖層選項卡，選中所需要的圖層，把其余圖層刪除。

步驟2：輸入命令wb，選擇拾取點，拾取點一般在左下角或者右下角。

步驟3：點擊“選擇對象”，從右下向左上選取圖形，然后選擇保存路徑。

步驟4：點擊工具欄“繪圖—填充”。預覽查看是否能完成填充，不能對圖形進行填充說明圖形還沒完全閉合，不滿足導入SketchUp的條件，這時需要執(zhí)行步驟5。

步驟5：輸入命令bo，點擊“拾取點”，選中圖形中任意一處地方，然后回車確認。

步驟6：重復步驟4，預覽圖形能完成填充，說明圖形已經(jīng)閉合，可導入至SketchUp作為底圖使用。

在底圖的基礎上，利用SketchUp軟件的多種三維建模方法，如放樣、拉伸、掃掠、旋轉、按住并拖動等，進行三維建模。在水利工程復雜形體建模中常用的建模方法是拉伸和曲面放樣(見圖2)。

圖2 圖形拉伸

對于復雜的模型，可以采用拼接的方式進行建模。如圖2中的三維模型，就是由兩個不同的部件組合而成的。在SketchUp中，單純把兩個部件拼在一起并不能組合成一個新的部件，還需要選中整個部件組合，點擊鼠標右鍵，選中菜單中的“交錯平面”，選擇“模型交錯”，這樣兩個部件才成功組合成一個部件。

3.2 運用WebGL技術渲染模型

步驟1：需要引入WebGL技術的Three.js框架。

步驟2：在HTML頁面中創(chuàng)建場景。場景相當于現(xiàn)實的空間環(huán)境，它作為一個容器把所有的光源、相機和物體都放置在其內(nèi)部。創(chuàng)建場景的相關代碼(以下代碼均在script標簽內(nèi)部)為：var scene = new THREE.Scene()。

步驟3：設置場景中的相機。Three.js框架內(nèi)定義的相機有正交相機和透視相機兩種，用于將三維空間的物理對象投射到二維平面中。相關代碼如下：

創(chuàng)建相機對象：var camera = new THREE.Orthographic Camera(-s*k,s*k,s,-s,1,1000)。

設置相機位置：camera.position.set(200,300,200)。

設置相機方向(指向的場景對象)：camera.lookAt (scene.position)。

步驟4：設置場景中的光源。光源對應的是現(xiàn)實中的各類光，包括點光源、平行光、聚光源、環(huán)境光等，能真實模擬物體在不同環(huán)境中的顯示效果。相關代碼如下：

創(chuàng)建環(huán)境光：var ambient = new THREE.AmbientLight(0x444444)；scene.add(ambient)。

步驟5：模型導入。Three.js框架有很多模型加載器，包括.stl、.obj與.mtl、.fbx、.collada、.ply及.gltf，可以根據(jù)導入模型的格式采用不同的加載器。如導入.fbx格式的模型，代碼為：

var loader = new THREE.FBXLoader()；

loader.load(“SambaDancing.fbx”, function(obj) {

scene.add(obj);

})。

步驟6：設置渲染器。通過設置環(huán)境光、點光源、相機角度等操作導入三維模型，可調(diào)用渲染函數(shù)對場景進行渲染，將幾何模型和材料渲染成實物并顯示出來，代碼如下：

創(chuàng)建渲染對象：var renderer = new THREE.WebGLRenderer()。

設置渲染區(qū)域尺寸：renderer.setSize(width, height)。

設置背景顏色：renderer.set Clear Color(0xb9d3ff,1)。

插入canvas對象：rdocument.body.append Child(renderer.dom Element)。

執(zhí)行渲染操作：renderer.render(scene,camera)。

通過執(zhí)行上述步驟，實現(xiàn)了三維模型構建以及Web端模型展示的功能(見圖3)。

圖3 三維模型Web展示

4 攔河壩三維模型及Web可視化展示應用

以李溪攔河壩工程為例，采用SketchUp軟件建立三維實體模型，運用軟件的貼圖功能為模型添加材質(zhì)，使三維實體模型展示效果更為逼真，最后利用其提供的導出功能把三維實體模型導出為fbx格式文件(包括材質(zhì)文件)。按上述步驟建立場景，進行相機、光源及渲染器設置，調(diào)用加載器，最終實現(xiàn)在Web瀏覽器加載渲染。模型在Web瀏覽器加載完成后的效果見圖4，圖中在不同構件上方的白色標簽內(nèi)顯示的是構件名稱和實時采集數(shù)據(jù)，位于圖下方的綠色正方體表示揚壓力監(jiān)測點，位于圖中間的淺藍色長方體表示沉降位移監(jiān)測點，沉降位移監(jiān)測點相鄰的彩色圓柱體表示水平位移監(jiān)測點。

圖4 攔河壩工程三維模型Web展示

該攔河壩工程三維模型主要由壩體、揚壓力監(jiān)測點、沉降位移監(jiān)測點和垂直位移監(jiān)測點等構件組成，構件信息主要通過ajax方法，異步調(diào)用API接口，從后臺獲取構件的信息，包括采集的實時數(shù)據(jù)、型號參數(shù)、數(shù)量等，然后動態(tài)加載到三維模型上。代碼如下：

獲取json數(shù)據(jù)：$.ajax({url:“/model/getdata”,

type: “GET”,

dataType: “json”,

cache: false,

success: function (obj) {

var alldata = obj.data[0];

})。

遍歷獲取的數(shù)據(jù)：for(var i=0;i

根據(jù)數(shù)據(jù)動態(tài)生成三維構件：var cylinder=new THREE.Mesh(geometry_cy, new THREE.MeshNormalMaterial({color: 0xffff00,name:“sid:”+k}));

cylinder.name=“sid:”+k;cylinder.overdraw = true;cylinder.translateY(0.55);

cylinder.translateX(-0.1)。

通過點擊三維模型上不同的構件，可以查看其相應的信息，于頁面右上方顯示(見圖5)，信息包括構件的名稱、監(jiān)測點數(shù)值、數(shù)據(jù)采集時間等內(nèi)容。代碼如下：

圖5 三維模型Web交互展示

創(chuàng)建構件拾取對象：var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize())。

計算與拾取光線相交的構件：var intersects = raycaster.intersectObjects(scene.children, true)。

選取相交的第一個構件：var currentIntersected = inter+sects[ 0 ].object。

最后觸發(fā)顯示構件信息的方法。

4 結 語

以WebGL技術為基礎的Three.js框架，提供了一種無插件、體積小、效率高的渲染方法，優(yōu)化了Web端用戶的使用體驗；利用Three.js框架，只需通過簡單的代碼編寫，就能實現(xiàn)各種格式的三維模型輕量化顯示，既能滿足用戶在Web端瀏覽、查詢的需求，也確保了三維模型的信息安全。不過，由于模型的三維展示效果通過Web端進行渲染，對于大型復雜的模型場景渲染效率會降低，需要進一步研究以改善模型的渲染效率。