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

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

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

0 引 言

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

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

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

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

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

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

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

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

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

(3)建立建筑物主體?？梢岳肅ivil 3D自帶的部件編輯器繪制大壩主體部件，例如重力壩的溢流段或非溢流段。之后選擇壩軸線進行裝配，提取道路實體，利用部件中的面代碼生成三維實體。

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

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

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

1.2 基于Revit搭建水工建筑物

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

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

2 輕量化模型展示

2.1 Cesium平臺

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

2.2 輕量化的方法

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

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

圖2 頂點聚類法簡化模型示意

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

圖3 紋理壓縮的分類

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

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

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

2.3.1 gltf文件的介紹

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

2.3.2 連接方式

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

(1)將gltf文件放置在一個可以訪問的位置，可以是本地文件系統或網絡服務器。

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

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

(4)利用longitude、latitude和height等屬性進行模型的經度、緯度和高度展示與調試，并以此屬性控制模型在場景中的顯示?？梢允褂媚Ｐ偷膶嵗龑ο?ModelInstance)來訪問和修改模型的屬性。例如，可以使用modelInstance.modelMatrix屬性來設置模型的變換矩陣等。

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

3 三維模型在微信小程序中的呈現

3.1 微信小程序與云開發的介紹

微信小程序作為近代產生的一種極為便捷的應用，無需下載即可使用，在極短的時間內便可創造嶄新的開發環境和生態[16]。相對于傳統的網頁，微信小程序中選用了嶄新的Hybrid渲染方式，通過將視圖層和邏輯層分開且使雙線程視圖層界面與其同時運行，使用Webview進行渲染[17]。

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

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

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

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

圖5 微信小程序云開發過程

小程序云開發的具體步驟如下：

(1)在微信開發者工具中的小程序原始文件內創建云函數，通過引用特殊的工具包來調用一系列功能，對函數進行初始化。

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

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

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

(5)執行“獲取默認環境數據庫的引用”的操作。這是為了確定并使用特定的數據庫環境，通過“獲取表名”的操作，可以對特定的數據表進行編輯。

4 工程實例

4.1 工程概況

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

4.2 模型搭建

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

圖6 部件編輯器展示

4.3 模型輕量化

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

圖7 水電站模型的細節展示

4.4 小程序的應用

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

圖8 微信小程序主頁展示

圖9 微信小程序模型展示

5 結 語

本文以微信小程序為基礎，搭建了一套實用、可行的小程序，實現了三維模型在移動端的輕量化體現，具有較高的應用價值。

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

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