基于WebGL 3D 技術的綜合能源服務仿真環(huán)境及場景設備的構建研究

劉 璐，傅擁鋼，高月娥

（國網(wǎng)河北省電力有限公司培訓中心，河北 保定 071000）

1 概述

綜合能源服務的出現(xiàn)既有外部的社會需求，也有高速發(fā)展的創(chuàng)新技術內(nèi)部驅動。從節(jié)能減排的社會化共識，到用戶需求的個性化、多元化，以用戶為中心提供多元化、高質量的能源服務。綜合能源服務實際上對售電企業(yè)來講就是由單一售電模式轉變?yōu)殡?、氣、冷、熱等多元化能源供應和多樣化服務模式?/p>

國家電網(wǎng)公司發(fā)布的《關于在各省公司開展綜合能源服務業(yè)務的意見》中將綜合能源服務定義為“一種新型的為滿足終端客戶多元化能源生產(chǎn)與消費的能源服務方式，涵蓋能源規(guī)劃設計、工程投資建設、多能源運營服務以及投融資服務等方面”。綜合能源系統(tǒng)（integrated energy systems，IES）是指在規(guī)劃、設計、建設和運行等過程中，通過對各類能源的產(chǎn)生、傳輸與分配、轉換、儲存、消費等環(huán)節(jié)進行有機協(xié)調(diào)與優(yōu)化，從而形成的綜合一體化系統(tǒng)。

2 綜合能源服務仿真現(xiàn)狀

綜合能源系統(tǒng)的核心是“源、網(wǎng)、荷、儲”四個物理環(huán)節(jié)形式多樣的交叉共建，在綜合能源系統(tǒng)的仿真規(guī)劃過程中，每個物理環(huán)節(jié)都有幾個關鍵點需要考慮和克服。綜合能源系統(tǒng)具體項目的模擬離不開精確而充足的數(shù)據(jù)支持，包括項目當?shù)氐臍庀髷?shù)據(jù)、負荷數(shù)據(jù)、能源價格和能源政策，在此基礎之上根據(jù)項目需求確定平臺能夠給予的能源類型、管網(wǎng)模型、設備模型和儲能方式的支持，最后根據(jù)一定的時間步長按照能源耦合和傳輸規(guī)則進行系統(tǒng)仿真獲得所需的仿真數(shù)據(jù)，或按照目標函數(shù)和約束條件對投資/運行進行階段性時間尺度的規(guī)劃，為投資/運行提供決策支持。除此之外，部分平臺在項目規(guī)劃之后可以提供經(jīng)濟性、環(huán)保性和能效性的性能評估。

3 綜合能源仿真環(huán)境及場景設備構建關鍵技術

3.1 Web3D 技術

Web3D 虛擬現(xiàn)實技術是通過Web 瀏覽器呈現(xiàn)虛擬場景，主要包含三維建模、人機交互以及實時渲染。

（1）三維建模，虛擬場景真實度越高，其模型文件就越大，且場景渲染加載速度越慢。（2）人機交互，用戶通過鼠標、鍵盤等硬件對虛擬場景或模型放大、縮小，旋轉、視角切換，達到對虛擬場景或模型的多維度觀察與控制。（3）實時渲染，虛擬場景或模型實時的加載顯示在用戶本地瀏覽器。使用不同的Web3D 技術，瀏覽器也需要安裝不同的插件實現(xiàn)模型的渲染顯示。WebGL 技術不需要插件，解決了臃腫的虛擬場景渲染插件問題，其跨平臺的特性更是受到了越來越多的用戶歡迎。

3.2 WebGL 介紹

WebGL 著色器提供了靈活且強大的二維、三維圖形繪制方法，且提供了豐富的渲染效果。WebGL 著色器通過字符串的方式嵌入在JavaScript 文件中，通過JavaScript 讀取著色器內(nèi)的相關信息。WebGL 的程序執(zhí)行流程如圖1 所示。

圖1

3.3 Three.js 簡介

Three.js 是使用JavaScript 語言編寫的一款運行在瀏覽器中的3D 引擎。WebGL 底層的API 封裝度很低，存在應用開發(fā)難度大、計算過程復雜、容錯率低等弊端。Three.js 3D引擎的出現(xiàn)改變了這些現(xiàn)狀，其功能主要體現(xiàn)在以下幾個方面：

（1）不需要太多復雜的計算機圖形學知識，利用其組件就可以構建基本的3D 場景。

（2）Three.js 支持矩陣、向量和映射等3D 運算對象，以及各類可直接調(diào)用的數(shù)學函數(shù)。

（3）支持各種格式的3D 模型對象的加載，包括用戶自定義的JSON 格式文件。

（4）它不僅支持3D Canvas 渲染，而且支持2D Canvas，CSS 和SVG 的渲染效果，可擴展性較強。

（5）提供多種Web 3D 開發(fā)的功能性效果，如模型材質和紋理加載，場景陰影效果等。

4 基于WebGL 3D 技術仿真環(huán)境的構建

4.1 三維仿真環(huán)境模型處理流程設計

環(huán)境模型在瀏覽器上傳到云服務器之后主要經(jīng)歷三個階段：模型解析、模型輕量化、模型存儲。在環(huán)境模型解析階段，主要是采用相關SDK 與API 實現(xiàn)對原模型的數(shù)據(jù)解析，然后將模型的幾何、屬性信息、構件之間的關系進行提取。接著將環(huán)境模型輕量化處理，并將其保存在自定義的多文檔文件結構中，用于前端模型渲染，同時將模型中可能會在其他地方用到的數(shù)據(jù)進行提取，存儲到數(shù)據(jù)庫中，環(huán)境模型處理流程如圖2 所示：

圖2

4.2 環(huán)境模型存儲

在WebGL 進行顯示前，首先對原始格式的3D 模型數(shù)據(jù)通過Three.js 使用正則表達式提取出環(huán)境模型對應的頂點信息、頂點索引、面信息和UV 信息，然后進行解析和轉換，在轉換過程中并對模型數(shù)據(jù)進行輕量化，然后存儲到統(tǒng)一的、盡可能小的中間格式文件中，減少服務器上3D 模型所占用的空間，使3D 模型能被快速加載。所以一個輕量級的模型存儲結構，是環(huán)境模型在Web 上展示的基礎。

5 基于WebGL 技術的場景設備渲染

WebGL 是一個JavaScript API，可在任何兼容的Web瀏覽器中渲染高性能的交互式3D 和2D 圖形，而無需使用插件。WebGL 通過引入一個與OpenGL ES 2.0 非常一致的API 來做到這一點，該API 可以在HTML5＜canvas＞元素中使用。 這種一致性使API 可以利用用戶設備提供的硬件圖形加速。

本文利用Three.js 將場景設備實現(xiàn)仿真渲染。

圖3

場景-相機-渲染器：立方體網(wǎng)格模型和光照組成了一個虛擬的三維場景，相機對象就像你生活中使用的相機一樣可以拍照，只不過是拍攝虛擬的景物，拍攝一個物體的時候相機的位置和角度需要設置，虛擬的相機還需要設置投影方式，當你創(chuàng)建好一個三維場景，相機也設置好，通過渲染器就可以執(zhí)行拍照動作。

圖4

設備渲染步驟：

（1）創(chuàng)建場景Scene

THREE.Scene 對象是所有不同對象的容器，也就是說該對象保存所有物體、光源、攝像機以及渲染所需的其他對象。

let scene = new THREE.Scene（）;

（2）創(chuàng)建幾何體Geometry

//創(chuàng)建一個立方體幾何對象Geometry

let geometry = new THREE.BoxGeometry （3，1.8，0.8）;//x、y、z

（3）創(chuàng)建材質Material

let material=new THREE.MeshBasicMaterial（{color：0xcccccc}）;

通過構造函數(shù)THREE.MeshLambertMaterial（）創(chuàng)建了一個可以用于立方體的材質對象，構造函數(shù)的參數(shù)是一個對象，對象包含了顏色、透明度等屬性，本案例中只定義了顏色color，顏色屬性值，這里使用的顏色值表示方法是16進制RGB 三原色模型。

（4）創(chuàng)建網(wǎng)格模型Mesh 并加入場景Scene

let cube = new THREE.Mesh（geometry，material）//網(wǎng)格模型對象mesh

scene.add（cube）;////網(wǎng)格模型添加到場景中

（5）創(chuàng)建相機Camera

（6）創(chuàng)建渲染器Renderer

6 結論

隨著能源革命和能源供給側改革的不斷深入以及“互聯(lián)網(wǎng)+”智慧能源和多能互補集成優(yōu)化等示范項目的開展，綜合能源系統(tǒng)的規(guī)模不斷擴大。在此背景下，開展綜合能源服務仿真工作，能夠為綜合能源服務的進一步發(fā)展提供可靠理論依據(jù)。本文通過對WebGL 3D 技術、Three.js 等技術的研究。利用Three.js 組件就可以構建基本的3D 場景，且支持各種格式的3D 模型對象的加載，包括自定義的JSON格式文件，其可擴展性也較強，由此實現(xiàn)對綜合能源服務仿真環(huán)境及場景設備的構建。