基于移動端的水工建筑物輕量化模型展示研究

李 濤，許丞瑜，杰德爾別克，，查冠臣，李東明，任宇迪

(1.新疆農(nóng)業(yè)大學(xué)水利與土木工程學(xué)院，新疆 烏魯木齊 830052；2.河海大學(xué)水利水電學(xué)院，江蘇 南京 210024)

0 引 言

在信息化時(shí)代背景下，出現(xiàn)的多種新技術(shù)賦予了水利工程新的管理模式與手段，并將工作流程變得更加標(biāo)準(zhǔn)化、參數(shù)化，水工建筑物三維模型的展示與交互逐漸受到人們的關(guān)注[1]。當(dāng)前國內(nèi)已有許多高等院校和研究單位結(jié)合所屬領(lǐng)域開展了這項(xiàng)研究工作，如貴州黔源電力股份有限公司的饒毅、陳輝、張啟陽等提出洪水實(shí)時(shí)動態(tài)可視化調(diào)度三維模型的研究[2]；中水北方勘測設(shè)計(jì)研究有限責(zé)任公司的龐清艷則將實(shí)景三維模型應(yīng)用在河湖劃界、岸線規(guī)劃中[3]，然而上述研究的三維模型展示局限于在固定端進(jìn)行，便捷性差，且用戶的交互能力受限。西南民族大學(xué)藥學(xué)院的車海俊、卓瑪央吉、拉目加等，已經(jīng)利用移動端小程序建造了三維建模掌上實(shí)驗(yàn)室[4]，而縱觀整個(gè)國內(nèi)外關(guān)于移動端水利建筑的研究情況，涉及這方面的研究還相對較少。

微信作為人手必備的強(qiáng)大軟件，滲透到每個(gè)人的生活。小程序相較于App而言，更有不占內(nèi)存，隨用隨走的優(yōu)點(diǎn)，且微信小程序作為一種新興的移動應(yīng)用形態(tài)，擁有較大的用戶基數(shù)和社交化特性，為人們提供了更多元化的交互方式，具有功能豐富、便捷高效的特點(diǎn)[5]。相對于傳統(tǒng)的三維模型展示需要在固定端上進(jìn)行，在微信小程序上展示三維模型，可以讓水利建筑工作者在移動端更便捷地觀測三維模型，將實(shí)地建筑與三維模型切實(shí)結(jié)合，可更好地指導(dǎo)實(shí)際工作。本文針對移動端微信小程序與三維模型的結(jié)合，詳細(xì)介紹了如何利用Civil 3D與Revit軟件進(jìn)行高質(zhì)量參數(shù)化建模，同時(shí)介紹利用Cesium平臺將模型進(jìn)行輕量化與微信小程序進(jìn)行對接，最終實(shí)現(xiàn)模型在小程序上流暢展示。

1 基于Civil 3D與Revit搭建水工建筑模型

Civi13D與Revit是Autodesk公司開發(fā)的兩款面向基礎(chǔ)設(shè)施行業(yè)的三維設(shè)計(jì)軟件，其中Civil 3D可以幫助用戶在設(shè)計(jì)模型中提高效率準(zhǔn)確性和可視化效果。而Revit軟件為用戶提供了便捷高效的設(shè)計(jì)途徑，保證數(shù)據(jù)精度[6]。

通過分析建模優(yōu)缺點(diǎn)和相關(guān)參考文獻(xiàn)可以得到Revit建立水工建筑模型時(shí)，尤其在面對復(fù)雜截面構(gòu)件情況下無法精確建模，同時(shí)對地形無法進(jìn)行詳細(xì)的處理。Civil 3D建立水工建筑模型雖然精度比Revit高，但模型參數(shù)化程度較低。Civil 3D與Revit具有良好的互通性，如二者相結(jié)合可以相互彌補(bǔ)各自缺點(diǎn)，能夠建出高精度、高參數(shù)化的三維水工建筑物模型。一般建模思路是可通過Civil 3D建模再通過插件將模型導(dǎo)入Revit中，或者將復(fù)雜構(gòu)件在Revit細(xì)分成有多個(gè)簡單形狀的構(gòu)件后再將簡單部件模型在Civil 3D進(jìn)行拼接組成復(fù)雜構(gòu)件模型，從而實(shí)現(xiàn)精確建模和參數(shù)化建模[7]。

1.1 基于Civil 3D搭建水工建筑物及地形的步驟

與Revit相比，Civil 3D在地形曲面上構(gòu)建模型更為便捷[8]，它可以通過壩軸線和預(yù)先建立的部件，將大壩基本模型一鍵插入到地形曲面中，生成開挖線，并進(jìn)行工程量計(jì)算等。Civil 3D搭建模型的步驟如下：

(1)建立地形曲面。利用Civil 3D將常規(guī)的CAD圖紙中的圖元生成地形曲面。選用等高線生成地形一般是選中所有等高線后對等高線進(jìn)行賦值，選擇起始高程值和增量，之后選擇創(chuàng)建曲面功能來創(chuàng)建地形。

(2)建立壩軸線。首先利用CAD圖元生成軸線，之后使用路程創(chuàng)建工具繪制大壩位置的多段線，并根據(jù)對象創(chuàng)建路線，在繪制過程中需要詳細(xì)確定起始點(diǎn)和創(chuàng)建名稱。

(3)建立建筑物主體。可以利用Civil 3D自帶的部件編輯器繪制大壩主體部件，例如重力壩的溢流段或非溢流段。之后選擇壩軸線進(jìn)行裝配，提取道路實(shí)體，利用部件中的面代碼生成三維實(shí)體。

(4)生成開挖實(shí)體模型。使用曲面挖掘命令使得地形曲面和開挖曲面之間形成空間體素，并通過邊界優(yōu)化技術(shù)來提高實(shí)體生成速度。

(5)生成地形實(shí)體。通過生成曲面功能將原地形數(shù)據(jù)和開挖處理后的地形數(shù)據(jù)進(jìn)行導(dǎo)入，并利用曲面生成命令將數(shù)據(jù)轉(zhuǎn)化為實(shí)體，建立大壩主體模型。

在Civil 3D完成模型建立后，可以使用重力壩的壩軸線，創(chuàng)建采樣線設(shè)定所需的寬度、橫斷面間距和樁號。通過分析計(jì)算材質(zhì)對地形曲面的上方和開挖后的曲面下方進(jìn)行劃分。在計(jì)算標(biāo)準(zhǔn)中添加部件代碼，以計(jì)算壩體工程量，并生成多個(gè)橫斷面視圖。通過設(shè)置總體積表，對其進(jìn)行拆分，生成各樁號的開挖量和壩體工程量，并利用斷面圖特性得到與橫斷面對應(yīng)的體積表格，從而滿足施工對填方和挖方數(shù)據(jù)的要求。

1.2 基于Revit搭建水工建筑物

Revit在水工建筑物模型搭建中的作用是對常規(guī)部分進(jìn)行建模與整合，同時(shí)對各部件建立相應(yīng)的構(gòu)件族庫，通過標(biāo)高及軸網(wǎng)進(jìn)行定位后依照搭積木的方式進(jìn)行裝配[9]，如水電站上部框架架構(gòu)以及部分簡單水工模型直接利用Revit參數(shù)化族模塊進(jìn)行搭建。Revit建模優(yōu)勢在于對類似的部件，只需要通過調(diào)整對應(yīng)參數(shù)值，便可循環(huán)應(yīng)用，從而減少工作量，高效完成工作。在參數(shù)化過程中需要注意模型拆分情況，拆分的越合理越能提高族的重復(fù)利用性[10]。

Revit創(chuàng)建水工建筑物詳細(xì)步驟包括：選擇合適的族樣板創(chuàng)建族文件，使用拉伸、放樣、融合等命令定義構(gòu)件幾何形狀，之后建立參照平面跟形狀進(jìn)行鎖定；在已建形狀的基礎(chǔ)上，對需要?jiǎng)?chuàng)建尺寸標(biāo)注與定義的參數(shù)進(jìn)行編輯；最后通過標(biāo)簽命令進(jìn)行參數(shù)與形狀的關(guān)聯(lián)，同時(shí)根據(jù)需要加入材質(zhì)和其他屬性。按照以上步驟建立Civil3D部分未搭建的模型庫和其他簡單模型，形成構(gòu)件族庫。建立完所有單個(gè)建筑的情況后，通過Revit項(xiàng)目文件，包括Civil3D模型在內(nèi)的所有構(gòu)件進(jìn)行載入并創(chuàng)建實(shí)例模型，通過軸網(wǎng)和標(biāo)高對構(gòu)件模型進(jìn)行精準(zhǔn)定位，最后拼接組成完備的水工建筑物模型。具體建模流程見圖1。

2 輕量化模型展示

2.1 Cesium平臺

Cesium作為一種開源JavaScript庫，主要用于搭建高性能的3D地球和地理應(yīng)用。它基于WebGL技術(shù)，能夠在Web瀏覽器中實(shí)時(shí)渲染大規(guī)模的地理數(shù)據(jù)[11]。

2.2 輕量化的方法

在實(shí)時(shí)渲染和可視化應(yīng)用中，復(fù)雜的三維模型會增加計(jì)算和渲染的負(fù)擔(dān)，增加工程建設(shè)的成本。通過輕量化處理，減小模型文件的尺寸，可減少存儲需求和傳輸成本，提供更流暢的用戶交互體驗(yàn)，使微信小程序能夠快速、流暢地展示各類模型。模型輕量化的目的是通過減小模型的大小、復(fù)雜性和資源需求，以提高模型的性能和效率，同時(shí)降低存儲空間和傳輸成本。Cesium通過LOD對模型輕量化，而LOD簡化有以下幾種方式：

(1)頂點(diǎn)聚類。頂點(diǎn)聚類可以通過降低頂點(diǎn)數(shù)量和合并相似的面來減少模型的復(fù)雜度[12]，如圖2所示。

圖2 頂點(diǎn)聚類法簡化模型示意

(2)紋理壓縮。紋理壓縮是一種通過減少紋理圖像尺寸和質(zhì)量來減小紋理數(shù)據(jù)存儲空間和傳輸帶寬的技術(shù)，可以減少模型的內(nèi)存占用和加載時(shí)間，提高渲染性能[13]。具體的紋理壓縮分類見圖3。

圖3 紋理壓縮的分類

(3)層次模型。將模型分解為多個(gè)層次，每個(gè)層次都包含不同的細(xì)節(jié)級別。這樣可以根據(jù)觀察者的位置和距離選擇合適的渲染程度。水電站模型某角度和距離下的層次渲染效果如圖4所示。

圖4 水電站模型的粗略展示

2.3 模型的接入與平臺的展示

2.3.1 gltf文件的介紹

目前Cesium主要以gltf與3D Tiles兩種格式的數(shù)據(jù)模型為主，其中g(shù)ltf格式是由Microsoft與Khron 3D公司共同推出的三維模型文件格式。GLTF的核心模塊是描述3D場景的結(jié)構(gòu)和構(gòu)成的JSON文件。該模塊包含了模型的節(jié)點(diǎn)層次、相機(jī)等邏輯結(jié)構(gòu)[14]。scene是gltf文件的場景，一個(gè)gltf可能含有多個(gè)scene，而每個(gè)scene則包含一個(gè)nodes數(shù)組。Nodes作為場景圖層次結(jié)構(gòu)的節(jié)點(diǎn)，包含旋轉(zhuǎn)、平移等變換，并可進(jìn)一步引用子節(jié)點(diǎn)和Mesh、Camera(渲染場景的視圖配置)，或引用描述網(wǎng)格變形的Skin。Mesh描述了一個(gè)在場景中出現(xiàn)的，可以用來訪問實(shí)際幾何數(shù)據(jù)的Accessor物體的幾何物體。每個(gè)mesh對象有Name和Primitives兩個(gè)字段。Primitives 又是一個(gè)數(shù)組，數(shù)組的每個(gè)成員是一個(gè)Primitive 對象，而Material則是用來指定Peimitive所使用的材質(zhì)，texture則由一個(gè)Sampler和一個(gè)image定義。Accessor作為一個(gè)訪問器被Mesh、Skin、Animation使用，并給BufferView提供幾何數(shù)據(jù)、皮膚參數(shù)和隨時(shí)間變化的動畫[15]。

2.3.2 連接方式

在Cesium平臺中，可以通過以下步驟將gltf格式文件導(dǎo)入到場景中：

(1)將gltf文件放置在一個(gè)可以訪問的位置，可以是本地文件系統(tǒng)或網(wǎng)絡(luò)服務(wù)器。

(2)在Cesium的JavaScript代碼中，使用Cesium的模型加載器(ModelLoader)來加載gltf文件，也可以使用ModelLoader.fromGltf()方法來加載gltf文件，該方法接受一個(gè)gltf文件的URL作為參數(shù)。

(3)使用scene的primitives屬性將加載的模型添加到Cesium的場景中。

(4)利用longitude、latitude和height等屬性進(jìn)行模型的經(jīng)度、緯度和高度展示與調(diào)試，并以此屬性控制模型在場景中的顯示。可以使用模型的實(shí)例對象(ModelInstance)來訪問和修改模型的屬性。例如，可以使用modelInstance.modelMatrix屬性來設(shè)置模型的變換矩陣等。

(5)可以根據(jù)需要，添加其他的Cesium組件和功能，如相機(jī)控制、光照效果、動畫等。

3 三維模型在微信小程序中的呈現(xiàn)

3.1 微信小程序與云開發(fā)的介紹

微信小程序作為近代產(chǎn)生的一種極為便捷的應(yīng)用，無需下載即可使用，在極短的時(shí)間內(nèi)便可創(chuàng)造嶄新的開發(fā)環(huán)境和生態(tài)[16]。相對于傳統(tǒng)的網(wǎng)頁，微信小程序中選用了嶄新的Hybrid渲染方式，通過將視圖層和邏輯層分開且使雙線程視圖層界面與其同時(shí)運(yùn)行，使用Webview進(jìn)行渲染[17]。

微信開發(fā)者助手為開發(fā)者提供了一項(xiàng)名為云開發(fā)功能的特殊服務(wù)，其中包括云數(shù)據(jù)庫、云函數(shù)等功能。云數(shù)據(jù)庫可以存儲開發(fā)者在建立微信小程序時(shí)所需要的數(shù)據(jù)，方便操控管理且安全性強(qiáng)；云函數(shù)是一種在云開發(fā)功能中所使用的特殊服務(wù)器端代碼，可以在微信小程序中處理邏輯問題可以將數(shù)據(jù)與數(shù)據(jù)庫進(jìn)行連接。相對于利用three.js插件在微信小程序中導(dǎo)入3D模型，云開發(fā)功能為開發(fā)者開拓了一條更為便捷的道路，極大地縮短了建立微信小程序的時(shí)間[18]。

3.2 微信小程序的搭建及云端中三維模型的使用

通過Civil3D得到的三維模型可以從不同的視角進(jìn)行觀看、縮放、旋轉(zhuǎn)等操作，有著極高的自由度，使用戶對于水工建筑物的認(rèn)識更為直觀和全面，利于用戶深入了解和體驗(yàn)三維模型。而微信小程序在生活中應(yīng)用廣泛，操作簡單，無需下載和安裝，用戶可以用極快的速度隨時(shí)開啟微信小程序。將二者加以結(jié)合使得用戶無需借助電腦，即可查看水工建筑物的三維模型，大大提高了效率，同時(shí)使過程變得更加便捷。

相對于通常的three.js加載三維模型，在微信小程序中使用云開發(fā)進(jìn)行加載和處理更加簡單便捷。方法大體可分為云函數(shù)的使用和數(shù)據(jù)庫的調(diào)用兩個(gè)部分，圖5為微信小程序云開發(fā)過程。

圖5 微信小程序云開發(fā)過程

小程序云開發(fā)的具體步驟如下：

(1)在微信開發(fā)者工具中的小程序原始文件內(nèi)創(chuàng)建云函數(shù)，通過引用特殊的工具包來調(diào)用一系列功能，對函數(shù)進(jìn)行初始化。

(2)通過設(shè)定云函數(shù)的“主體部分”，定義函數(shù)的基本結(jié)構(gòu)和行為，其次獲取用戶識別信息。

(3)導(dǎo)入已修正為gltf格式的三維模型數(shù)據(jù)到微信小程序的數(shù)據(jù)庫中。而后通過“獲取并處理返回結(jié)果”以及“輸出調(diào)試信息”的操作，即可在云開發(fā)環(huán)境中創(chuàng)建用戶數(shù)據(jù)集合，從而在云開發(fā)環(huán)境的數(shù)據(jù)庫中加載數(shù)據(jù)。

(4)在.js文件中，執(zhí)行“函數(shù)定義”的操作。通過“調(diào)用數(shù)據(jù)庫API”，獲取數(shù)據(jù)庫中的數(shù)據(jù)得到所需的信息。這些信息將會呈現(xiàn)在控制臺上，以便進(jìn)行觀察和檢查。最后，通過“變量控制”操作來調(diào)整和管理各個(gè)變量的狀態(tài)和值。

(5)執(zhí)行“獲取默認(rèn)環(huán)境數(shù)據(jù)庫的引用”的操作。這是為了確定并使用特定的數(shù)據(jù)庫環(huán)境，通過“獲取表名”的操作，可以對特定的數(shù)據(jù)表進(jìn)行編輯。

4 工程實(shí)例

4.1 工程概況

本文研究的對象為112 m高的某碾壓混凝土重力壩，流域總面積822 km2，壩址以上流域面積709 km2，主河流長68.6 km。壩頂5孔泄水閘，壩頂高程153.00 m，壩頂寬6 m，總裝機(jī)容量為193.2 MW。壩體上游面84 m高程以上為豎直面，84 m高程以下坡度為1∶0.3；下游面坡度為1∶0.75，折坡點(diǎn)高程為145.00 m。設(shè)計(jì)洪水位150.00 m，水庫校核洪水位151.88 m，正常蓄水位150.00 m，死水位130.00 m，水庫總庫容7.173億m3，死庫容3.542億m3，正常蓄水位以下庫容6.813億m3，有效庫容3.271億m3，庫容系數(shù)為19.9%，為不完全年調(diào)節(jié)水庫，共10個(gè)壩段。主體工程于2007年9月開工，于2011年11月竣工。

4.2 模型搭建

在搭建本工程實(shí)例模型中，根據(jù)上述提到的建模流程，對大壩進(jìn)行參數(shù)化的建模與整合，主要所完成的建模任務(wù)有：通過Civil3D繪制地形曲面，使用部件編輯器，繪制溢流壩段主體，依托壩軸線導(dǎo)出到地心曲面，生成開挖實(shí)體和地形實(shí)體；通過Revit對壩體上部結(jié)構(gòu)，如防浪墻、控制室、閘室等進(jìn)行了搭建、創(chuàng)造族文件，通過軸網(wǎng)、標(biāo)高對結(jié)構(gòu)進(jìn)行定位拼接；最后通過項(xiàng)目文件進(jìn)行了整合，調(diào)整模型參數(shù)、屬性材質(zhì)，對模型進(jìn)行后續(xù)的渲染，完成了整個(gè)樞紐的搭建與整合[19]。圖6為非溢流壩段和溢流壩段部件編輯器展示。

圖6 部件編輯器展示

4.3 模型輕量化

在建立好的參數(shù)化模型基礎(chǔ)上需要將模型轉(zhuǎn)變?yōu)镃esium可識別的格式，本次采用3d Max的babylon插件轉(zhuǎn)變?yōu)間ltf格式。在輕量化前還需要利用Cesium的Viewer對象來創(chuàng)建一個(gè)地球可視化應(yīng)用程序的實(shí)例。然后，使用Cesium.Model類來創(chuàng)建一個(gè)模型實(shí)例，并將gltf文件的URL傳遞給Cesium.Model的構(gòu)造函數(shù)[20]。利用longitude、latitude和height等屬性設(shè)置模型的位置、縮放和旋轉(zhuǎn)等屬性。同時(shí)，在模型加載完成后添加回調(diào)函數(shù)，以便在模型加載完成后執(zhí)行相應(yīng)的處理邏輯，以此完成對模型的輕量化處理。最后通過My assets下載輕量化后的模型文件。圖7為水電站內(nèi)部輕量化后的展示效果。

圖7 水電站模型的細(xì)節(jié)展示

4.4 小程序的應(yīng)用

在設(shè)計(jì)小程序之前，按照需求，將整個(gè)小程序分主頁、分類、個(gè)人等三部分進(jìn)行開發(fā)。其中，主頁介紹了著名的水利工程師與經(jīng)典水利建筑，而分類則是按照不同的要求放入了不同的水工建筑物模型的展示，最后的頁面則是用來記錄用戶的基本信息，如圖8所示。在合理的規(guī)劃基礎(chǔ)上通過微信開發(fā)者工具中的小程序原始文件內(nèi)創(chuàng)建云函數(shù)文件，通過代碼const cloud=require(‘wx-server-sdk’)調(diào)用wx-server-sdk，并利用代碼cloud.Init對函數(shù)進(jìn)行初始化，此時(shí)需利用代碼const db=cloud.database對數(shù)據(jù)庫進(jìn)行引用。之后將已經(jīng)輕量化處理的水工建筑物三維模型數(shù)據(jù)導(dǎo)入到數(shù)據(jù)庫中，并利用wx.cloud.callfunction、success∶res=、console.log()等函數(shù)調(diào)用所創(chuàng)建的云函數(shù)，并在云開發(fā)中創(chuàng)建用戶集合后即可加載數(shù)據(jù)，通過此方式完成對模型的訪問。圖9為微信小程序端展示的輕量化模型效果。

圖8 微信小程序主頁展示

圖9 微信小程序模型展示

5 結(jié) 語

本文以微信小程序?yàn)榛A(chǔ)，搭建了一套實(shí)用、可行的小程序，實(shí)現(xiàn)了三維模型在移動端的輕量化體現(xiàn)，具有較高的應(yīng)用價(jià)值。

(1)利用Revit和Civil 3D兩個(gè)建模軟件各自的優(yōu)勢，實(shí)現(xiàn)精確的參數(shù)化建模，參數(shù)化的模型為水工建筑物信息化管理與決策提供基本的數(shù)據(jù)載體。

(2)基于Cesium平臺和微信小程序的結(jié)合，對三維模型進(jìn)行了輕量化處理，并將輕量化模型展示在微信小程序云端，實(shí)現(xiàn)了水工建筑物三維模型在移動端的展示，為水工建筑物模型不同階段的管理提供更好的技術(shù)支持與展示。