摘 要：隨著“GIS+BIM”時(shí)代的到來，“GIS+BIM”技術(shù)的發(fā)展對(duì)智慧電站的建設(shè)起到了加速劑的作用，“GIS+BIM”技術(shù)的應(yīng)用可以帶來顯著的經(jīng)濟(jì)效益、社會(huì)效益和環(huán)境效益。針對(duì)新一代數(shù)字電網(wǎng)建設(shè)，為解決數(shù)據(jù)冗余、不直觀等問題，三維可視化引擎依托壓縮空氣儲(chǔ)能電站完成三維模型可視化、仿真模擬、場(chǎng)景漫游、文檔掛接、屬性查看等功能，為智慧電站建設(shè)提供高可用、極穩(wěn)定的平臺(tái)支撐。

關(guān)鍵詞：Three.js；三維可視化；壓縮空氣儲(chǔ)能；仿真模擬

中圖分類號(hào)：TP391.4 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2024）16-0131-05

Application and Research of 3D Visual Engine Based on ThreeJS in

Compressed Air Energy Storage Power Station

Abstract： With the advent of the“GIS+BIM”era， the development of“GIS+BIM”technology has played a role in promoting the construction of smart power stations. The application of“GIS+BIM”technology can bring significant economic， social， and environmental benefits. For the construction of the new generation digital power grid， in order to solve problems such as data redundancy and lack of intuitiveness， the 3D visual engine relies on compressed air energy storage power stations to complete functions such as 3D model visualization， simulation， scene roaming， document hanging， and attribute viewing， providing highly available and extremely stable platform support for the construction of smart power stations.

Keywords： Three.js; 3D visualization; compressed air energy storage; simulation

0 引 言

隨著近幾年來智慧電廠概念的興起，整個(gè)電力行業(yè)都聚焦在智慧電廠變電站數(shù)字化的技術(shù)應(yīng)用環(huán)節(jié)。變電站數(shù)字化是多學(xué)科技術(shù)有機(jī)整合為一體的交叉學(xué)科，BIM技術(shù)是一種現(xiàn)代化的建模手段[1]。在HTML5和WebGL等互聯(lián)網(wǎng)技術(shù)快速發(fā)展的背景之下[2]，參考“互聯(lián)網(wǎng)+”思維，將BIM與WebGIS相融合[3]，客觀、完整地獲取電站設(shè)備元器件幾何和色彩等資料，實(shí)現(xiàn)對(duì)變電站全站模型以及主設(shè)備和輔助設(shè)備的三維結(jié)構(gòu)可視化[4]。電網(wǎng)數(shù)字化建設(shè)是國(guó)家電網(wǎng)有限公司落實(shí)國(guó)企改革三年行動(dòng)、建設(shè)現(xiàn)代設(shè)備管理體系的重要舉措[5]。

電網(wǎng)數(shù)字化、電站智能化，使得變電站三維可視化變得格外重要，小場(chǎng)景+輕量化+高性能的電站模型三維可視化成為當(dāng)下的技術(shù)熱點(diǎn)。當(dāng)下國(guó)內(nèi)商業(yè)解決方案中，已知的商業(yè)解決方案動(dòng)輒耗資幾十萬甚至上百萬，而且商業(yè)方案部署過程中也存在各種各樣的約束，幾乎不支持私有服務(wù)器部署，數(shù)據(jù)安全無法保證；成熟的商業(yè)解決方案和定制開發(fā)也存在諸多限制，無法滿足項(xiàng)目需求。因此，進(jìn)行輕量化、高性能、跨平臺(tái)的電站三維模型可視化技術(shù)研究變得非常必要，電站模型在PC網(wǎng)頁端和手機(jī)網(wǎng)頁端的瀏覽變得更加輕松，大幅提升了用戶體驗(yàn)，降低了項(xiàng)目成本，提高了生產(chǎn)效益。

本文從壓縮空氣儲(chǔ)能電站項(xiàng)目實(shí)際需求出發(fā)，為解決壓縮空氣儲(chǔ)能電站內(nèi)部設(shè)備不直觀、模型數(shù)據(jù)量大、三維模型可視化不流暢等問題，開展WebGL底層技術(shù)、三維仿真技術(shù)及性能優(yōu)化研究，構(gòu)建基于Three.js+BIM的空氣壓縮儲(chǔ)能電站三維可視化平臺(tái)，實(shí)現(xiàn)模型數(shù)據(jù)可視化、通用功能、三維場(chǎng)景仿真模擬等功能開發(fā)，為空氣壓縮儲(chǔ)能電站項(xiàng)目提供三維可視化平臺(tái)，為實(shí)現(xiàn)電網(wǎng)工程設(shè)計(jì)的數(shù)字化、精細(xì)化和可視化提供更好的手段和表達(dá)方式[6]。

1 技術(shù)研發(fā)

基于底層Three.js技術(shù)、React框架、TypeScript語言，研發(fā)了電站模型三維可視化平臺(tái)，實(shí)現(xiàn)了電站模型三維可視化在壓縮空氣儲(chǔ)能項(xiàng)目中的應(yīng)用。

1.1 Three.js技術(shù)介紹

Three.js是一款基于WebGL技術(shù)運(yùn)行在瀏覽器中的3D引擎[7]，默認(rèn)WebGL只支持簡(jiǎn)單的點(diǎn)、線、三角，是一款運(yùn)行在瀏覽器中的3D引擎，提供非常多的3D顯示功能，可以用它來創(chuàng)建各種三維場(chǎng)景，包括攝影機(jī)、光影、材質(zhì)等對(duì)象，并提供多種三維模型加載器，在二維、三維渲染上有明顯的性能優(yōu)勢(shì)。Three.js是運(yùn)用JavaScript編寫而成的，它類屬于WebGL [8]，Three.js能夠充分發(fā)揮GPU渲染器的渲染能力、場(chǎng)景搭建能力、光源創(chuàng)建能力。

1.2 3D Tiles數(shù)據(jù)格式

3D Tiles是由Cesium團(tuán)隊(duì)為擴(kuò)展地形和圖像流而在glTF數(shù)據(jù)格式基礎(chǔ)上建立的三維模型瓦片數(shù)據(jù)結(jié)構(gòu)，可對(duì)大規(guī)模三維地理空間數(shù)據(jù)進(jìn)行流式傳輸[9]。在3D Tiles中，一個(gè)Tileset是由一系列Tile組成的樹狀結(jié)構(gòu)，它包含的具體數(shù)據(jù)格式如表1所示。

3D Tile以樹的結(jié)構(gòu)形式組織，結(jié)合了層次LOD的概念，實(shí)現(xiàn)空間數(shù)據(jù)最佳渲染，提升整體性能。3D Tile結(jié)構(gòu)圖如圖1所示。

1.3 Three.js中的坐標(biāo)系

Three.js中的坐標(biāo)系是右手坐標(biāo)系，在使用Three.js加載模型時(shí)，實(shí)際還會(huì)用到2D和3D坐標(biāo)系。如軌道控制器可以改變相機(jī)在空間坐標(biāo)系中的位置：軌道控制器響應(yīng)鼠標(biāo)事件（中間鍵滾輪縮放、右鍵按下平移、左鍵按下旋轉(zhuǎn)）。調(diào)整相機(jī)在坐標(biāo)系中的位置。改變坐標(biāo)，重新渲染；通過3D到2D坐標(biāo)系的變換實(shí)現(xiàn)模型的縮放、平移、旋轉(zhuǎn)：

1）右手坐標(biāo)系。x軸水平方向：向右為正；y軸垂直方向：向上為正；z軸內(nèi)外方向（垂直于xy平面）：向外為正，如圖2所示。

2）世界坐標(biāo)系。世界坐標(biāo)系即場(chǎng)景坐標(biāo)系，是以Vector3（0，0，0）為原點(diǎn)的XYZ坐標(biāo)軸的坐標(biāo)系，如圖3所示。

3）局部坐標(biāo)系。局部坐標(biāo)系即模型坐標(biāo)系，是以局部模型中心為原點(diǎn)，繪制XYZ坐標(biāo)軸的坐標(biāo)系，如圖4所示。

4）屏幕坐標(biāo)系。屏幕坐標(biāo)系就是canvas中的坐標(biāo)系，也就是左上角是坐標(biāo)原點(diǎn)的二維坐標(biāo)系，如圖5所示。

2 關(guān)鍵技術(shù)研究

2.1 WebGL底層技術(shù)研究

本平臺(tái)中的3D Tileset數(shù)據(jù)包含三種數(shù)據(jù)格式，分別為i3dm、b3dm、cmpt。其中i3dm和b3dm格式的模型需要使用Shader著色器，改變模型材質(zhì)顏色和透明度。WebGL是Web圖形庫(kù)，提供一系列的圖形接口，計(jì)算機(jī)GPU負(fù)責(zé)瀏覽器圖形渲染的工具。因?yàn)?D Tileset數(shù)據(jù)格式特點(diǎn)，GPU渲染管線上提供的頂點(diǎn)著色器單元對(duì)圖形渲染非常友好，使用GLSL語言編寫頂點(diǎn)著色器，對(duì)三角面片頂點(diǎn)進(jìn)行顏色渲染，可以改變電站設(shè)備顏色和透明度，提升渲染效率，達(dá)到大數(shù)據(jù)模型快速高效渲染的效果。

2.2 性能優(yōu)化研究專題

本平臺(tái)在大數(shù)量模型加載時(shí)，對(duì)電腦GPU和內(nèi)存提出了較高的要求，GPU和內(nèi)存具有較大的場(chǎng)景渲染壓力，導(dǎo)致三維可視化不流暢、用戶體驗(yàn)不佳。為減輕本平臺(tái)三維場(chǎng)景渲染壓力，降低內(nèi)存占用，保證渲染效果及為用戶帶來良好使用體驗(yàn)，需要展開性能優(yōu)化研究專題，這是本平臺(tái)研究的重點(diǎn)和難點(diǎn)。

2.3 BIM模型輕量化

電網(wǎng)模型具有高密度分布、施工建設(shè)時(shí)間連貫的特點(diǎn)，變電站集中分布著發(fā)電機(jī)組、電器元件、廠房、變壓器等變電設(shè)備。三維模型的重要內(nèi)容涉及幾何拓?fù)湫畔?、模型紋理特征、模型材質(zhì)特點(diǎn)。BIM模型輕量化需要在保持原有數(shù)據(jù)結(jié)構(gòu)、材質(zhì)、紋理特征的前提下，刪減一定量的頂點(diǎn)并重新構(gòu)建三角面片[10]，簡(jiǎn)化紋理，在保留變電站模型細(xì)節(jié)的基礎(chǔ)上最大程度簡(jiǎn)化BIM模型，是本平臺(tái)研究的重點(diǎn)和難點(diǎn)。

2.4 可視化平臺(tái)技術(shù)線路

針對(duì)當(dāng)前瀏覽器網(wǎng)絡(luò)環(huán)境和三維變電站模型高效可視化需求，三維可視化引擎采用Three.js底層技術(shù)框架，展示層采用React框架，VSCode平臺(tái)編碼，HTML5+CSS網(wǎng)頁展示，開源CesiumLab解析工具將FBX、OBJ、GLB格式數(shù)據(jù)轉(zhuǎn)換成3D Tiles格式數(shù)據(jù)，轉(zhuǎn)換后的3D Tiles模型流向模型存儲(chǔ)模塊。

模型存儲(chǔ)模塊支持OSS、MinIO和Nginx文件管理服務(wù)器，通過三維可視化模塊顯示到PC端、移動(dòng)端和大屏等終端。

可視化模塊提供三維電站模塊可視化、GIS支撐、仿真模擬和通用功能?？傮w技術(shù)線路圖如圖6所示。

2.4.1 模型格式轉(zhuǎn)換

BIM模型數(shù)據(jù)量在幾百M(fèi)B到GB之間時(shí)，若想實(shí)現(xiàn)快速渲染、幾何面片構(gòu)建、材質(zhì)渲染，需要通過CesiumLab開源軟件實(shí)現(xiàn)BIM模型的數(shù)據(jù)格式轉(zhuǎn)換，將BIM模型數(shù)據(jù)轉(zhuǎn)換為3Dtilets數(shù)據(jù)格式。3Dtilets數(shù)據(jù)格式是分層分塊的金字塔型結(jié)構(gòu)，可以實(shí)現(xiàn)模型的高效渲染。

2.4.2 性能優(yōu)化

本平臺(tái)的性能優(yōu)化從以下三方面入手：

1）LOD性能優(yōu)化。LOD（Levels of Detail）技術(shù)通常用于優(yōu)化大場(chǎng)景模型可視化性能，是一種實(shí)時(shí)三維計(jì)算機(jī)圖形技術(shù)。相機(jī)視點(diǎn)距離物體較近時(shí)，能觀察到的模型細(xì)節(jié)豐富；相機(jī)視點(diǎn)遠(yuǎn)離模型時(shí)，觀察到的細(xì)節(jié)逐漸模糊。系統(tǒng)繪圖程序根據(jù)一定的判斷條件，選擇相應(yīng)的細(xì)節(jié)進(jìn)行顯示，GPU實(shí)現(xiàn)高效渲染計(jì)算。

2）按需渲染。假設(shè)場(chǎng)景本身就是靜止的，沒有任何物體變化，此時(shí)依然進(jìn)行不間斷的循環(huán)渲染是對(duì)瀏覽器性能和客戶端電量的一種浪費(fèi)。為避免這種現(xiàn)象的發(fā)生，在最開始加載模型渲染的時(shí)候，僅渲染有變化的地方，避免連續(xù)渲染占用瀏覽器內(nèi)存，當(dāng)瀏覽器窗口大小改變，不會(huì)重新渲染場(chǎng)景，實(shí)現(xiàn)場(chǎng)景瀏覽的快速響應(yīng)，保證平臺(tái)的流暢性和良好的用戶體驗(yàn)。

3）GLSL語言GPU渲染?，F(xiàn)代GPU所包含的渲染管線為可編程渲染管線，可以通過編程GLSL著色器語言來控制一些渲染階段的細(xì)節(jié)，基于3D Tiles數(shù)據(jù)特點(diǎn)，在模型加載時(shí)使用shader改變模型頂點(diǎn)著色，提升渲染效率和平臺(tái)性能。

2.5 可視化平臺(tái)功能設(shè)計(jì)

平臺(tái)從業(yè)務(wù)場(chǎng)景出發(fā)，提供了逼真的三維場(chǎng)景和友好的三維交互操作功能，提供了以下5個(gè)核心功能模塊：

1）模型可視化。本平臺(tái)支持3D Tiles格式數(shù)據(jù)，通過URL加載.json格式文件，實(shí)現(xiàn)對(duì)模型數(shù)據(jù)的加載、渲染、可視化。

2）施工進(jìn)度仿真模擬。平臺(tái)支持以時(shí)間為基準(zhǔn)的施工進(jìn)度仿真模擬，通過改變?cè)O(shè)備顏色，顯隱滿足不同業(yè)務(wù)場(chǎng)景的施工進(jìn)度模擬，滿足不同業(yè)務(wù)需求。

3）包圍盒剖切。變電站廠房?jī)?nèi)部和大型變電設(shè)備內(nèi)部的構(gòu)造往往是不清楚的，內(nèi)部設(shè)備被遮擋，本平臺(tái)提供包圍盒剖切功能，利用包圍盒剖切瀏覽內(nèi)部構(gòu)造，方便對(duì)設(shè)備進(jìn)行維護(hù)。

4）場(chǎng)景漫游。本平臺(tái)支持第一人稱場(chǎng)景漫游和飛行漫游兩種漫游模式，配合鍵盤鼠標(biāo)操作實(shí)現(xiàn)場(chǎng)景縮放、旋轉(zhuǎn)、平移等功能，滿足三維可視化業(yè)務(wù)場(chǎng)景需求。

5）基礎(chǔ)業(yè)務(wù)功能。本平臺(tái)提供場(chǎng)景通用操作功能：模型量測(cè)、框選放大、模型虛化?？臻g量測(cè)功能包括經(jīng)緯度量測(cè)、局部坐標(biāo)量測(cè)、高程量測(cè)、距離量測(cè)、面積量測(cè)、角度測(cè)量?？蜻x放大功能即用戶通過鼠標(biāo)框選操作快速定位目標(biāo)區(qū)域，幫助用戶快速瀏覽三維場(chǎng)景。模型虛化功能，即是指變電站中很多設(shè)備是在廠房?jī)?nèi)部，或者是地下層，通過外層模型虛化暴露內(nèi)層模型設(shè)備，讓用戶快速瀏覽內(nèi)部場(chǎng)景。

3 應(yīng)用成果

本平臺(tái)已應(yīng)用于壓縮空氣儲(chǔ)能電站項(xiàng)目，實(shí)現(xiàn)了電站模型可視化、包圍盒剖切、模型量測(cè)、場(chǎng)景漫游等功能，為變電站模型可視化提供了解決方案，為用戶查看在線變電站模型提供了便利，提升了用戶體驗(yàn)。本平臺(tái)也存在不足之處，例如包圍盒剖切目前只實(shí)現(xiàn)了整體模型剖切，后期需要繼續(xù)研究并優(yōu)化功能，實(shí)現(xiàn)單個(gè)設(shè)備包圍盒剖切。

3.1 模型可視化

用戶首次打開可視化平臺(tái)時(shí)呈現(xiàn)的場(chǎng)景，模型的加載可視化，通過鼠標(biāo)縮放、移動(dòng)操作實(shí)現(xiàn)模型的快速瀏覽，如圖7所示。

3.2 包圍盒剖切

當(dāng)用戶查看電站模型內(nèi)部結(jié)構(gòu)時(shí)，可以使用包圍盒剖切功能。包圍盒剖切包括六個(gè)面，每個(gè)面可以單獨(dú)剖切模型，配合鼠標(biāo)放大縮小旋轉(zhuǎn)平移操作，幫助用戶快速瀏覽包圍盒剖切模型內(nèi)部場(chǎng)景，如圖8所示。

3.3 場(chǎng)景漫游

場(chǎng)景漫游由第一人稱漫游和飛行漫游兩種漫游模式組成，幫助用戶沉浸式瀏覽場(chǎng)景。第一人稱漫游中，用戶可以在虛擬場(chǎng)景中以第一人稱的視角自由移動(dòng)和探索，使用鼠標(biāo)和鍵盤控制場(chǎng)景縮放、前進(jìn)、后退、加速、減速來實(shí)現(xiàn)場(chǎng)景漫游，如圖9所示。

3.4 模型測(cè)量

模型測(cè)量幫助用戶直觀獲取模型表面參數(shù)，包括長(zhǎng)度測(cè)量、寬度測(cè)量、高度測(cè)量、面積測(cè)量和角度測(cè)量，為用戶提供業(yè)務(wù)需求支撐，如圖10所示。

4 結(jié) 論

隨著BIM+GIS的快速發(fā)展，Three.js+BIM三維可視化技術(shù)在電力行業(yè)有著廣泛的應(yīng)用。本文論述了Three.js+BIM可視化技術(shù)在空氣壓縮儲(chǔ)能電站項(xiàng)目中的應(yīng)用，空氣壓縮儲(chǔ)能電站可視化平臺(tái)實(shí)現(xiàn)了對(duì)變電站建設(shè)中產(chǎn)生的變電站模型、數(shù)字模型、模型編碼以及模型節(jié)點(diǎn)等數(shù)據(jù)成果的統(tǒng)一管理，直觀展示了三維模型不同施工階段的三維場(chǎng)景。本平臺(tái)的研發(fā)對(duì)促進(jìn)電力行業(yè)的智慧電力建設(shè)、電力數(shù)字化建設(shè)和電力一體化建設(shè)有著十分重要的意義。

參考文獻(xiàn)：

[1] 弓國(guó)軍，符國(guó)暉，周亞敏.基于BIM技術(shù)的變電站三維可視化建模研究 [J].電子制作，2022，30（2）：66-68.

[2] 胡夏愷，陳俊濤，楊聃，等.基于Revit二次開發(fā)的BIM+WebGIS融合應(yīng)用研究 [J].中南大學(xué)學(xué)報(bào)：自然科學(xué)版，2021，52（11）：3930-3942.

[3] 胡夏愷，楊聃，朱悅林，等.基于BIM+WebGIS的輸電系統(tǒng)結(jié)構(gòu)安全監(jiān)測(cè)可視化平臺(tái)構(gòu)建 [J].中國(guó)農(nóng)村水利水電，2020（12）：185-188+192.

[4] 陶松梅，張煒.基于CIM模型的變電站三維可視化交互技術(shù)應(yīng)用 [J].廣西電力，2014，37（6）：22-24+37.

[5] 陶銀正.基于三維全景的電網(wǎng)數(shù)字化建設(shè)研究與應(yīng)用思路構(gòu)建 [J].安徽電氣工程職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2021，26（4）：82-86.

[6] 初建祥，張彥彪，羅金龍，等.3D打印BIM模型在變電站三維可視化設(shè)計(jì)中的應(yīng)用 [J].電力勘測(cè)設(shè)計(jì)，2022（10）：1-6+76.

[7] 陳雪婷，王澤宇，寇柏源，等.基于BIM的建筑模型三維可視化運(yùn)維管理平臺(tái) [J].綠色建造與智能建筑，2023（4）：33-36+40.

[8] 周浩成.Web3D可視化技術(shù)的研究與應(yīng)用 [J].智慧中國(guó)，2022（1）：78-79.

[9] 易立華.基于Cesium的WebGIS與BIM集成研究 [D].西安：長(zhǎng)安大學(xué)，2023.

[10] 王芳，尤一銘，余婷立.WebGIS三維可視化平臺(tái)在電網(wǎng)數(shù)字化移交中的應(yīng)用研究[J].現(xiàn)代信息科技，2021，5（17）：7-11.