基于WebGL的勘探地形及探井信息三维可视化系统设计

谭傜月，张余强，何小海，卿粼波，陈岑

（1.四川大学电子信息学院，成都610065；2.成都西图科技有限公司，成都610065；3.浙江大华技术股份有限公司，杭州310053）

0 引言

勘探生产信息是油田开发中重要的数据资源，包括生产统计信息、探井结构信息和地理信息数据等，传统的数字油田信息平台只是将勘探数据进行图表管理与二维GIS展示[1]，对三维空间特征表现不足。一些新型的油田空间数据可视化项目，需要依赖于ArcGIS或自主研发的专业软件[2-3]，利用插件进行开发、跨平台兼容性差。

随着HTML5及WebGL技术的普及，浏览器端的三维空间数据可视化有了新的解决方案[4]。WebGL是基于OpenGL ES2.0的Web 3D绘图标准，用于在支持HTML5的浏览器中实现2D和3D图形绘制，并提供硬件3D加速渲染[5]，可以在无插件的情况下大幅度提升浏览器对三维图形的绘制效率。Three.js是一个基于WebGL的3D建模图形库，它对WebGL错综复杂的底层进行了封装和简化，提供了丰富的图形对象和场景模拟组件，可以在Web端流畅地展示交互式的三维场景和模型[6]，因其简单易用、可扩展性强而被广泛使用。因此，本文在二维WebGIS的基础上，选择Three.js作为三维可视化工具，研究了基于WebGL的地形和探井分层信息三维可视化技术，设计并实现了一个集二维GIS、三维建模与传统勘探信息为一体的Web可视化应用系统，具有跨平台、无插件、美观易用的特点，有利于提高相关业务人员的工作效率。

1 系统功能设计

系统基于WebGIS和WebGL技术，使用SRTM 90M数字高程数据和勘探数据信息，实现了二维GIS、三维地形及探井建模展示，系统功能模块如图1所示。

图1系统功能模块图

二维GIS模块，首先从Google地图服务器中在线加载所视区域内的地图瓦片数据，通过OpenLayers开源地图引擎进行二维地图初始化；接着通过WebGIS接口获取勘探生产信息，从其中提取探井坐标并在地图对应位置添加探井图标图层，用户通过点选或圈选一定范围的地物目标后进行空间数据查询及三维建模。

三维建模模块，首先进行场景、相机、光线等三维场景初始化设置，同时对查询返回的地形和探井数据进行处理和建模；对获取到的高程数据下采样生成多层地形Mesh对象并加入LOD模型，并根据需求进行空间插值，接着生成等高线贴图并更新Mesh对象材质；对获取的探井数据，根据分层信息生成圆柱体对象，接着绑定与其他二维图表统计信息的交互操作，最后将其加入场景进行渲染。本文主要研究重点为三维建模模块，相关算法与实现将在后续章节进行详细说明。

2 关键模块设计及实现

2.1 基于移动窗口反距离权重法的DEM空间插值

数字高程模型（Digital Elevation Model，DEM），是地表地形的数字化表现形式，本文提前下载SRTM 90M分辨率的DEM栅格数据作为地形建模数据源，进行拼接及转换后输出栅格化的XYZ格式点云数据以供后续查询使用。由于DEM数据精度有限，生成的地形模型在地势陡峭的区域刻画不够丰富，因此本文对小范围内地形变化大的区域内空缺的高程点进行空间插值。

DEM空间插值指的是根据已有区域高程值预测空缺单元的高程值，主要分为整体函数内插和局部函数内插两大类，整体插值法一般用于预测区域内的整体趋势，局部插值法则使用邻近数据点来预测空缺单元数值，常用的局部空间插值算法有反距离权重法（IDW）、克里金法（Kriging）、自然邻域法（NNI）等[7]。综合网格数据等距特点和局部地形精细化的需求，本文选用了简单高效的移动窗口反距离权重法，该方法假设空间对象的特征是空间相关的，且与空间距离存在明显关联。该方法将距离平方的倒数作为权重值，对空缺点周围多个邻点的高程值进行加权平均，样本点到预测点的距离越近则对预测结果影响越大，适用于小范围的空间插值预测[8]。

式（1）中ZP表示预测点P的高程值，Zi表示单元内邻点高程值，wi表示权重，式（2）为权重的计算过程，一般为两点间距离平方的倒数即幂参数k为2。考虑到选点的合理性及计算性能，所选点与待测点距离不宜过远，一般选择待测点周围3×3或5×5的窗口进行插值。因本文所用DEM网格数据等距排列特性，可以提前计算窗口内各单元权重值，减少插值运算量，未知点窗口及权重分布如图2所示。

图2未知点窗口及权重分布图

在实际插值过程中，本文选用3×3的窗口，从矩阵左上角水平移动窗口，依次进行空缺单元的高程值预测，最后将插值后的地形对象加入LOD模型中进行渲染，以期在保证渲染性能和响应速度的同时，尽可能展示更多地形细节。

2.2 基于Marching Squares算法的等高线贴图生成S

为了模拟真实地貌特征，需要进行地表纹理贴图，等高线作为地表形态的主要表现形式，在地形模拟领域有着不可替代的优越性，因此引入等高线对地形特征进行进一步的表示。常用的等值线生成算法分为规则矩形网格提取法和不规则三角网格提取法两种，鉴于前文所述DEM数据特点，本文选择基于规则网格数据的Marching Squares算法进行等高线的提取和绘制。Marching Squares是一种从二维矩阵数据生成轮廓的图形绘制算法，其生成的轮廓可以分为Isolines（等值线）和Isobands（等值带）两种，该算法典型应用于地形图等高线和天气图等压线的生成[9]。由于等值带计算复杂、渲染速度慢，因此本文采用Marching Squares算法快速绘制所选区域内的地形等高线，具体算法步骤如下：

（1）对于每个2×2像素形成的网格单元，分布判断其4个顶点的高程值与等高线阈值的大小，0表示低于阈值，1表示高于阈值，遍历矩阵网格单元，输出二值化的网格数据。

（2）现在每个顶点有0/1两种状态，对于每个网格单元，顺时针方向绕单元格记录顶点数值生成4位二进制码即查询索引，每个单元格有24种可能状态。使用查询索引访问预先构建的查找表，得到对应索引值下的轮廓线的绘制方法，如图3所示，其中黑色圆点表示状态1，蓝色线段表示该索引值对应的划线方式。

图3查找表示意图

（3）第二步中只是粗略地选择边缘中点进行划线，现结合原始顶点值和等高线阈值沿单元边缘进行线性插值，修正划线位置得到更精确的轮廓线位置。

得到区域内的地形数据后，对高程值范围进行分组得到多个阈值，对每个阈值调用Marching Squares算法生成等高线并利用贝塞尔曲线进行平滑处理，与模拟地形底图叠加生成等值线图，并将其作为地形Mesh对象的纹理贴图进行渲染显示，增加地形真实感、提升用户体验。

2.3 地形及探井三维建模

本文使用Three.js中的PlaneGeometry平面模型生成对应长宽的二维平面，再通过修改相应坐标顶点的z值（对应高程值）形成连绵起伏的地势，最后将平面绕X轴进行90度的3D旋转，完成基于WebGL的三维地形建模。同时，考虑到初始化DEM数据量冗余量较大、加载渲染时间长，因此本文引入层次细节模型（Lev⁃els Of Detail，LOD）对地形渲染进行效率优化，即对距离屏幕较近的区域进行精细的模型渲染，而对远离屏幕的区域采用粗略的模型显示[10]。具体的，本文对初始加载的高程数据分别间隔1、2个数据点进行下采样，在长宽不变的情况下减少数据量、增大数据间隔，再对多组高程值矩阵分别进行地形建模，按照距离相机越远、模型越粗糙的标准生成3层LOD模型并加入场景渲染。对于需要插值的区域，先进行空间插值计算，再将插值后的数据生成地形对象并加入LOD模型中。在实际使用中，通过监控LOD的update函数判断当前显示的地形Mesh对象，从而进行等高线绘制和地形纹理贴图更换、等高线图例展示、高程值标注等动态的交互操作。三维地形建模的流程图如图4（a）所示。

本文根据探井数据中的层位代码、层位颜色及高度信息将竖直分层的探井对象抽象为一组圆柱体，即一个探井模型由多层圆柱体对象组合而成，使用Three.js中的CylinderGeometry几何体工具，按层位信息计算重心坐标、起始高度、层位高度后进行逐层建模，并对每一层分别绑定交互事件，进行勘探生产信息包括探井基础数据与统计数据的联动展示。Three.js中的对象无法直接绑定点击事件，因此使用Raycaster射线工具监听鼠标点击事件，生成一条由相机位置指向点击坐标的射线，若射线与探井层位对象有交点则判断用户点击成功，场景相机与控制器中心点跟随移动至层位中心点高度，同时显示探井基本信息框、层位信息框和层位图例。点击信息栏的统计信息按钮，可跳转至其他二维图表页面，了解更详细的勘探统计数据信息。通过三维探井与二维图表结合的方式，直观立体地展示探井状态、统计数据及周边地形特点。三维探井建模的流程图如图4（b）所示。

图4建模流程图

3 系统测试

3.1 系统功能测试

对系统进行功能测试，包括二维GIS、三维地形及探井重建、人机交互等主要功能。系统成功获取并在二维地图上标注当日探井分布信息，使用圈选工具在二维地图上随机选取一定范围的地理区域，点击三维展示按钮，成功显示该区域内地形及探井的三维模型。该区域的三维地形如图5所示，滑动鼠标对可视区域进行放大缩小并触发相应的LOD模型，点击可进行高度标注、等高线绘制、坐标轴显示等功能。三维探井如图6所示，点击圆柱体可在界面右侧展示分层图例信息，左侧展示探井信息框，并能对探井进行层位点击、统计图表信息显示等联动操作。经测试，系统所有功能均符合预期。

图5三维地形图

图6三维探井图

3.2系统性能测试

对本系统三维建模场景的流畅度性能进行测试，帧率（FPS）表示图形处理器每秒钟更新的次数，FPS值越高、刷新越快、画面越流畅。通常FPS值在30以上就可以保持画面的流畅性，目前大多数浏览器的屏幕刷新率为60次每秒，因此Web端FPS值达到60时动画渲染性能最优。本文借助Three.js的性能检测插件Stats对三维建模页面绘图性能进行实时监测与分析，间隔5秒记录一次FPS值，记录结果如表1所示，随着绘制范围与数据量的增加，渲染帧率有所下降，但仍在预期范围之内。系统平均帧率在50-60FPS之间，页面渲染流畅、交互性能良好。

表1三维场景渲染性能测试表

4 结语

本文设计并实现了一个交互式的Web端可视化应用系统，使用Three.js的地形工具通过曲面拟合的方法进行三维地形建模，同时运用细节层次模型、移动窗口反距离权重空间插值法、Marching Squares等高线生成算法等进行地形细节的丰富与渲染性能的提升。在地形建模的基础上，将探井对象抽象为圆柱体，使用Three.js的几何体工具进行逐层建模，并通过交互操作进行二维勘探生产信息图表页面的实时联动展示。通过对地形和探井信息的三维重建，直观地展示了勘探统计和空间信息，便于油田工作人员观测探井结构及其周围的地形地貌，提高其获取和分析数据的效率。