梁?jiǎn)⒈?羅朝林

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

1 引 言

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

本文基于WebGL技術(shù)，將三維模型利用軟件進(jìn)行輕量化轉(zhuǎn)換，并通過(guò)代碼編寫(xiě)實(shí)現(xiàn)三維模型在Web瀏覽器輕量化顯示及實(shí)時(shí)數(shù)據(jù)交互功能[9]，使三維模型展示免去程序安裝的過(guò)程，且具備跨平臺(tái)瀏覽的特性，有利于三維模型技術(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é)合在一起，允許開(kāi)發(fā)者在Web頁(yè)面上創(chuàng)建和渲染三維圖形[10]。目前被Firefox、Chrome、Opera、Safari、IE11以上版本等瀏覽器支持。其完美地解決了目前Web交互式3D動(dòng)畫(huà)的兩個(gè)問(wèn)題：一是無(wú)須任何瀏覽器插件支持，僅使用HTML腳本即可實(shí)現(xiàn)Web交互式3D動(dòng)畫(huà)的制作；二是通過(guò)標(biāo)準(zhǔn)的、統(tǒng)一的、跨平臺(tái)的OpenGL接口，調(diào)用底層圖形硬件加速功能進(jìn)行圖形渲染[11]。

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

2.2 SketchUp軟件

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

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

3.1 SketchUp建模

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

圖1 CAD底圖

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

步驟1：打開(kāi)圖層選項(xiàng)卡，選中所需要的圖層，把其余圖層刪除。

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

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

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

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

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

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

圖2 圖形拉伸

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

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

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

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

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

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

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

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

步驟4：設(shè)置場(chǎng)景中的光源。光源對(duì)應(yīng)的是現(xiàn)實(shí)中的各類(lèi)光，包括點(diǎn)光源、平行光、聚光源、環(huán)境光等，能真實(shí)模擬物體在不同環(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è)置渲染器。通過(guò)設(shè)置環(huán)境光、點(diǎn)光源、相機(jī)角度等操作導(dǎo)入三維模型，可調(diào)用渲染函數(shù)對(duì)場(chǎng)景進(jìn)行渲染，將幾何模型和材料渲染成實(shí)物并顯示出來(lái)，代碼如下：

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

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

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

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

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

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

圖3 三維模型Web展示

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

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

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

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

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

圖5 三維模型Web交互展示

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

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

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

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

4 結(jié) 語(yǔ)

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