基于WebGL 3D 技术的综合能源服务仿真环境及场景设备的构建研究

刘 璐，傅拥钢，高月娥

（国网河北省电力有限公司培训中心，河北 保定 071000）

1 概述

综合能源服务的出现既有外部的社会需求，也有高速发展的创新技术内部驱动。从节能减排的社会化共识，到用户需求的个性化、多元化，以用户为中心提供多元化、高质量的能源服务。综合能源服务实际上对售电企业来讲就是由单一售电模式转变为电、气、冷、热等多元化能源供应和多样化服务模式。

国家电网公司发布的《关于在各省公司开展综合能源服务业务的意见》中将综合能源服务定义为“一种新型的为满足终端客户多元化能源生产与消费的能源服务方式，涵盖能源规划设计、工程投资建设、多能源运营服务以及投融资服务等方面”。综合能源系统（integrated energy systems，IES）是指在规划、设计、建设和运行等过程中，通过对各类能源的产生、传输与分配、转换、储存、消费等环节进行有机协调与优化，从而形成的综合一体化系统。

2 综合能源服务仿真现状

综合能源系统的核心是“源、网、荷、储”四个物理环节形式多样的交叉共建，在综合能源系统的仿真规划过程中，每个物理环节都有几个关键点需要考虑和克服。综合能源系统具体项目的模拟离不开精确而充足的数据支持，包括项目当地的气象数据、负荷数据、能源价格和能源政策，在此基础之上根据项目需求确定平台能够给予的能源类型、管网模型、设备模型和储能方式的支持，最后根据一定的时间步长按照能源耦合和传输规则进行系统仿真获得所需的仿真数据，或按照目标函数和约束条件对投资/运行进行阶段性时间尺度的规划，为投资/运行提供决策支持。除此之外，部分平台在项目规划之后可以提供经济性、环保性和能效性的性能评估。

3 综合能源仿真环境及场景设备构建关键技术

3.1 Web3D 技术

Web3D 虚拟现实技术是通过Web 浏览器呈现虚拟场景，主要包含三维建模、人机交互以及实时渲染。

（1）三维建模，虚拟场景真实度越高，其模型文件就越大，且场景渲染加载速度越慢。（2）人机交互，用户通过鼠标、键盘等硬件对虚拟场景或模型放大、缩小，旋转、视角切换，达到对虚拟场景或模型的多维度观察与控制。（3）实时渲染，虚拟场景或模型实时的加载显示在用户本地浏览器。使用不同的Web3D 技术，浏览器也需要安装不同的插件实现模型的渲染显示。WebGL 技术不需要插件，解决了臃肿的虚拟场景渲染插件问题，其跨平台的特性更是受到了越来越多的用户欢迎。

3.2 WebGL 介绍

WebGL 着色器提供了灵活且强大的二维、三维图形绘制方法，且提供了丰富的渲染效果。WebGL 着色器通过字符串的方式嵌入在JavaScript 文件中，通过JavaScript 读取着色器内的相关信息。WebGL 的程序执行流程如图1 所示。

图1

3.3 Three.js 简介

Three.js 是使用JavaScript 语言编写的一款运行在浏览器中的3D 引擎。WebGL 底层的API 封装度很低，存在应用开发难度大、计算过程复杂、容错率低等弊端。Three.js 3D引擎的出现改变了这些现状，其功能主要体现在以下几个方面：

（1）不需要太多复杂的计算机图形学知识，利用其组件就可以构建基本的3D 场景。

（2）Three.js 支持矩阵、向量和映射等3D 运算对象，以及各类可直接调用的数学函数。

（3）支持各种格式的3D 模型对象的加载，包括用户自定义的JSON 格式文件。

（4）它不仅支持3D Canvas 渲染，而且支持2D Canvas，CSS 和SVG 的渲染效果，可扩展性较强。

（5）提供多种Web 3D 开发的功能性效果，如模型材质和纹理加载，场景阴影效果等。

4 基于WebGL 3D 技术仿真环境的构建

4.1 三维仿真环境模型处理流程设计

环境模型在浏览器上传到云服务器之后主要经历三个阶段：模型解析、模型轻量化、模型存储。在环境模型解析阶段，主要是采用相关SDK 与API 实现对原模型的数据解析，然后将模型的几何、属性信息、构件之间的关系进行提取。接着将环境模型轻量化处理，并将其保存在自定义的多文档文件结构中，用于前端模型渲染，同时将模型中可能会在其他地方用到的数据进行提取，存储到数据库中，环境模型处理流程如图2 所示：

图2

4.2 环境模型存储

在WebGL 进行显示前，首先对原始格式的3D 模型数据通过Three.js 使用正则表达式提取出环境模型对应的顶点信息、顶点索引、面信息和UV 信息，然后进行解析和转换，在转换过程中并对模型数据进行轻量化，然后存储到统一的、尽可能小的中间格式文件中，减少服务器上3D 模型所占用的空间，使3D 模型能被快速加载。所以一个轻量级的模型存储结构，是环境模型在Web 上展示的基础。

5 基于WebGL 技术的场景设备渲染

WebGL 是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D 和2D 图形，而无需使用插件。WebGL 通过引入一个与OpenGL ES 2.0 非常一致的API 来做到这一点，该API 可以在HTML5＜canvas＞元素中使用。 这种一致性使API 可以利用用户设备提供的硬件图形加速。

本文利用Three.js 将场景设备实现仿真渲染。

图3

场景-相机-渲染器：立方体网格模型和光照组成了一个虚拟的三维场景，相机对象就像你生活中使用的相机一样可以拍照，只不过是拍摄虚拟的景物，拍摄一个物体的时候相机的位置和角度需要设置，虚拟的相机还需要设置投影方式，当你创建好一个三维场景，相机也设置好，通过渲染器就可以执行拍照动作。

图4

设备渲染步骤：

（1）创建场景Scene

THREE.Scene 对象是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象。

let scene = new THREE.Scene（）;

（2）创建几何体Geometry

//创建一个立方体几何对象Geometry

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

（3）创建材质Material

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

通过构造函数THREE.MeshLambertMaterial（）创建了一个可以用于立方体的材质对象，构造函数的参数是一个对象，对象包含了颜色、透明度等属性，本案例中只定义了颜色color，颜色属性值，这里使用的颜色值表示方法是16进制RGB 三原色模型。

（4）创建网格模型Mesh 并加入场景Scene

let cube = new THREE.Mesh（geometry，material）//网格模型对象mesh

scene.add（cube）;////网格模型添加到场景中

（5）创建相机Camera

（6）创建渲染器Renderer

6 结论

随着能源革命和能源供给侧改革的不断深入以及“互联网+”智慧能源和多能互补集成优化等示范项目的开展，综合能源系统的规模不断扩大。在此背景下，开展综合能源服务仿真工作，能够为综合能源服务的进一步发展提供可靠理论依据。本文通过对WebGL 3D 技术、Three.js 等技术的研究。利用Three.js 组件就可以构建基本的3D 场景，且支持各种格式的3D 模型对象的加载，包括自定义的JSON格式文件，其可扩展性也较强，由此实现对综合能源服务仿真环境及场景设备的构建。