梁啟斌 羅朝林

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

1 引 言

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

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

2 WebGL技術(shù)及SketchUp軟件

2.1 WebGL技術(shù)

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

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

2.2 SketchUp軟件

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

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

3.1 SketchUp建模

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

圖1 CAD底圖

CAD地圖預(yù)處理流程如下：

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

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

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

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

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

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

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

圖2 圖形拉伸

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

3.2 運(yùn)用WebGL技術(shù)渲染模型

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

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

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

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

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

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

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

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

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

var loader = new THREE.FBXLoader()；

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

scene.add(obj);

})。

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

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

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

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

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

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

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

圖3 三維模型Web展示

4 攔河壩三維模型及Web可視化展示應(yīng)用

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

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

該攔河壩工程三維模型主要由壩體、揚(yáng)壓力監(jiān)測點、沉降位移監(jiān)測點和垂直位移監(jiān)測點等構(gòu)件組成，構(gòu)件信息主要通過ajax方法，異步調(diào)用API接口，從后臺獲取構(gòu)件的信息，包括采集的實時數(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)生成三維構(gòu)件：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)。

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

圖5 三維模型Web交互展示

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

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

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

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

4 結(jié) 語

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