基于WebGL 3D 技術(shù)的綜合能源服務(wù)仿真環(huán)境及場(chǎng)景設(shè)備的構(gòu)建研究

劉 璐，傅擁鋼，高月娥

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

1 概述

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

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

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

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

3 綜合能源仿真環(huán)境及場(chǎng)景設(shè)備構(gòu)建關(guān)鍵技術(shù)

3.1 Web3D 技術(shù)

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

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

3.2 WebGL 介紹

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

圖1

3.3 Three.js 簡(jiǎn)介

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

（1）不需要太多復(fù)雜的計(jì)算機(jī)圖形學(xué)知識(shí)，利用其組件就可以構(gòu)建基本的3D 場(chǎng)景。

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

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

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

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

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

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

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

圖2

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

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

5 基于WebGL 技術(shù)的場(chǎng)景設(shè)備渲染

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

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

圖3

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

圖4

設(shè)備渲染步驟：

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

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

let scene = new THREE.Scene（）;

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

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

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

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

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

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

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

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

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

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

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

6 結(jié)論

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