监测数据网页端三维可视化展示

曹树明

（中交天津航道局有限公司，天津300000）

随着我国水利工程建设的发展， 越来越多的水利工程进入运行管理阶段， 运行阶段的大坝管理及监测资料分析对大坝安全评价至关重要。 传统的监测多是基于监测仪器采集数据， 只是在采集数据阶段实现自动化， 但是在数据展示阶段缺少网页端高维度的信息可视化研究。随着信息技术的发展，支持浏览器显示三维模型的WebGL （Web Graphic library）为人们所了解并为许多行业所应用，王晶［1］利用WebGL技术实现桥梁监测信息可视化并解决了不同人员信息协同的问题；李志鹏［2］通过WebGL实现桥梁模型与监测数据的关联， 但模型文件解析和渲染过程较复杂；高喆［3］将WebGL技术结合BIM模型实现建筑模型展示。 因此本文同样采用WebGL技术实现水利工程监测信息三维数据模型展示。

1 三维数据可视化技术

Web端渲染模型一般是以WebGL技术作为绘图协议， 因此本文将对WebGL模型渲染原理进行学习研究以便将三维模型更高质量地在Web端绘制出来。首先WebGL是以单个坐标点为基础渲染单位的，因此需先从模型数据文件中获得三维图形顶点坐标，将其暂存到显存中方便GPU快速读取；读取完所有的点坐标之后， 需由顶点着色器进行图元装配即将点坐标生成三角形，单个三角形被称为图元，数据点是图元的基础，图元是三维模型的基础，不论多么复杂的三维模型都是由一个个基本的三角形组成；接下来需要光栅化即进行模型颜色渲染， 图元组装完成后由片元着色器通过对点坐标的颜色、 灯光等的计算，对整个三角形进行插值渲染，完成由点到面到体的模型颜色渲染。

一个三维模型可视化项目通常包含网页文件（HTML）、 样 式 文 件 （CSS）、JavaScript 脚 本 文 件、WebGL着色器（Shader）代码和数据模型文件。 内置了WebGL协议的浏览器， 通过JavaScript脚本调用WebGL代码接口读取模型文件并执行Shader代码实现三维模型绘制及逼真显示，图1为详细的WebGL渲染模型流程图。

图1 WebGL技术流程

Twgl.js 是一个微型的WebGL 助手库， 实现对WebGL API的封装，不再需要关注WebGL底层实现的原理，专注于本专业内的数据处理，使用起来更方便。Twgl.js提供了很多数据场显示的实例，官方文档十分详尽，数据接口等相当完备，对于初学者而言十分便捷。 因此本文基于此技术工具实现三维可视化。

2 实际工程概况

本文基于某重力坝工程，本工程为一等大（1）型工程，主要建筑物为1级建筑物，次要建筑物为3级建筑物。 坝高103m，底部高程1211m，库区内总体库容4.9亿m3，上、下水库挡水坝，下水库泄水建筑物，以及电站厂房及其他附属建筑物的设计洪水标准为200年一遇，校核洪水标准为1000年一遇。

电站总装机容量1200MW，4台机组， 单机容量300MW。 电站建成后在系统中将承担调峰、填谷、调频、 调相和事故备用任务。 枢纽建筑物主要由上水库、输水系统、地下厂房系统、下水库、泄洪建筑物和地面开关站等组成。

本工程地震基本烈度为Ⅶ度，上、下水库大坝抗震设防类别为甲类， 按基准期100年超越概率2%进行设计，相应的基岩峰值加速度为195.4gal；按基准期100年超越概率1%进行校核， 相应的基岩峰值加速度为386gal。

3 重力坝段模型数据预处理

由于该实际工程为一等大（1）工程，运行过程中一旦发生事故后果不堪设想， 所以大坝的正常运行至关重要。监测数据是对运行状态的一种直观反映，大坝的横河向位移、顺河向位移、纵向位移、渗流等监测量是大坝运行状态监测的依据， 但监测仪器只能记录下来某个高程的监测数据， 但要反应到整个坝体模型上就要对监测获得的数据进行插值处理，得出整个坝体数据， 这样才能更直观地反应出监测数据是否异常，大坝的运行状态是否良好。

3.1 重力坝段网格模型创建

网格模型是监测数据三维展示的基础， 因此需要预先创建好三维网格模型。 本文拟定采用单个典型坝段进行三维监测数据可视化展示， 坝宽30m，上游折坡点高程1241.5m， 坝顶宽度10m， 坝底宽度50m。 采用前处理软件Hypermesh进行三维网格模型的创建， 创建过程中需要注意地是要将网格模型的原点设置在实际工程中监测仪器布置位置的基点，便于直接使用监测仪器位置数据。 根据CAD图纸中工程几何外形轮廓，从模型的细部着手通过点、线、面等几何信息创建三维坝体网格模型。 绘制模型的过程中需要对模型的细小结构进行简化， 如坝体的廊道等，图为坝体三维网格模型创建示意图。

图2 坝体三维网格模型

3.2 监测数据插值

监测仪器只能记录下来某个高程的监测数据，但要反应到整个坝体模型上就要对监测获得的数据进行插值处理，得出整个坝体数据，这样才能更直观地反应出监测数据是否异常， 大坝的运行状态是否良好。

目前， 较常用的插值方法有线性插值、 两点插值、三次样条插值等。 本文利用Python编程语言基于支持向量机算法对三维模型进行数据插值，图3为基于支持向量机算法的三维模型插值流程。

图3 三维模型插值流程

读取按监测项目分类后的相同监测项目的监测仪器的三维坐标及当前监测数据， 并按照’x，y，z，value’（value，单个监测数据）格式输入到支持向量机算法中，支持向量机算法依据有数据的有限元节点，在算法内部生成最接近实际监测数据的空间插值函数如式（1），函数生成之后算法遍历没有数据的有限元节点坐标值， 近似插值生成节点数据值从而得出有限元模型所有节点上的监测数据。

3.3 数据规范化

插值完成后的坝体模型数据为所有单元节点的数值， 但WebGL在渲染的时候是根据颜色RGB的数值进行渲染的， 直接生成的数据不能够直接被网页端渲染器所识别， 因此需要对数据进行预先处理。

3.3.1 数据场值转化为RGB色彩值

RGB即红（red），绿（green），蓝（blue）的缩写，3种颜色按照不同比例混合可产生所有颜色， 显示器上的所有颜色都由此三者产生。

利用监测数据通过SVM模型对三维坝体模型进行插值，得出结果是坝体空间上的环境量数据场，如位移数据场温度数据场。 但若要将数据值以不同颜色区分显示到网页端需要利用Twgl.js技术进行渲染，而渲染器无法识别颜色数据以外的其他数据值，这就需要将插值后的数据转化成RGB形式的颜色数据。图为监测数值转化为颜色数值流程，首先定义云图中显示最亮和最暗的颜色； 然后读取文本格式的数据， 将获取到的字符串按照格式分割成单个数据后计算得到所有数值中的最大值和最小值， 并将最亮颜色绑定到最大值，最暗颜色绑定到最小值；其次遍历数据将所有数据在最大值与最小值间进行插值得出每个数据对应的不同颜色值； 最后将转换完成的颜色值以’R，G，B，R，G，B…’ 格式存储到.color文本文件。

图4 数值转换为颜色流程

3.3.2 点坐标与网格单元数据规范化

数据读取渲染的过程中先是对单个顶点进行渲染着色， 然后根据单元构成信息进行三角形单元内部插值着色，而网格模型是体单元，因此需要将体单元转化为三角形面单元。 利用python将体单元数据读取后进行分割并按照特定格式存放到文件中。 此外WebGL是单面渲染即三角形点的标记顺序是顺时针标记和逆时针标记，当单元标记只有一个方向的时候，WebGL默认渲染一个面， 这会导致模型从不同角度浏览会出现空白即未渲染现象，因此，需将单元顺时针与逆时针双向标记即0，1，5，0，5，4…0,5，1，0，4，5…并将数据存储到.indices文本文件。

图5 六面体单元信息示意图

4 监测数据三维可视化显示

大坝工程的安全监测意义十分重要， 是我国水利水电事业高效、稳定发展的重要前提。坝体的安全受多方面因素影响，随着时间推移，坝体的安全性逐渐降低，这就要求实时地对坝体进行监测。对坝体的实时监测能够第一时间了解坝体的运行状况， 及时获取坝体的健康状态， 对坝体的异常位移情况进行预警，保证坝体能够健康高效的运行［5］，因此需对大坝位移进行实时监测。

通过前面章节的数据处理， 形成规范化的数据格式， 然后编写核心代码对数据进行读取与渲染处理，生成实时位移云图，图为坝体上下游位移云图，核心代码如下。

图6 坝段位移场云图

5 结语

本文介绍了三维数据可视化技术， 通过对典型三维可视化工具的对比分析， 发现Twgl.js在数据模型展示方面兼容性好，开发便捷迅速；利用支持向量机回归器实现了监测数据三维空间插值， 利用Twgl.js实现了监测数据模型网页端显示。虽然实现了监测数据模型三维可视化展示， 但是监测数据在三维模型空间上的插值精度还不是十分精确。因此，需要进一步优化三维模型空间插值算法。