打开文本图片集

摘要：在水利工程建设实践中，为了提升建设效率，通常需要应用建立水利工程主体构建模型。为了提升模型构建、渲染的效率，文章提出了一种WebGL技术，可以直接在网页上完成模型的构建与渲染，不需要复杂的模型构建呈现平台，可以显著提升模型构建渲染的效率。首先，简单介绍了WebGL技术，分析了具体的实现流程步骤，随后探讨了基于WebGL的三维可视化实现过程，最后，结合实际水利工程案例，分析了WebGL技术的模型构建宣传应用效果，结果表明，WebGL技术可以直接在网页上完成模型渲染，构建渲染的模型与用户交互性功能较强，用户可以随意控制模型，查看模型的细节参数，显著提升了Web端用户模型交互应用体验。

关键词：WebGL；水利工程；三维可视化；交互体验

一、WebGL技术与实现流程

WebGL技术本质上是一种绘图协议，主要用于满足三维图形的绘图要求。在WebGL技术的支持下，不仅可以直接在网页上完成三维图形的绘制，还会对绘制的图形进行渲染处理，用户也可以与绘制的图形进行交互，提升用户的三维绘图体验。传统三维绘图较为复杂，需要在专门的应用程序平台上才能完成绘制[1]。而应用WebGL技术，可以并不需要安装复杂的绘图平台插件，可以直接在平台网页上绘图，建立复杂的三维模型，更好地满足了当下三维绘图、制图的需求。在具有应用WebGL技术进行绘图的过程中，需要应用一种名为“Three.js”的框架，这是一种开源框架，开发代码体量相对较小，运行速度快，可以更好地实现基于WebGL的绘图。

二、基于WebGL的三维可视化实现与展示

（一）CAD图形预处理与建模

在进行三维绘图时，需要应用一种三维建模工具软件SketchUp。这种软件提供了两种底图绘制方法，一是直接采用软件自带的绘图工具，在网页上完成地图的绘制。二是先采用CAD完成底图绘制，然后将绘制成功直接插入SketchUp中。对比两种方法，第一种整体的效率比较低，但可以保障绘制的精准度。第二种效率比较高，但需要提前对绘制的CAD图进行预处理，避免SketchUp软件不能识别图形内容出现报错现象。为了保障绘制效率，建议选择第二种建模方法。在这一方法中，CAD图预处理流程如图2所示。在采用SketchUp工具进行3D建模时，直接采样工具中拉伸、曲面放样等功能完成建模目的。如果图形比较复杂，还可以采用拼接方式完成建模。针对两个图形的拼接点，需要选择SketchUp工具中的模型交错功能，才能将两个图形建模拼接成一个复杂的图形。

（二）模型渲染

模型渲染需要借助WebGL技术来实现，上述图1已经简单介绍了模型渲染的具体流程步骤，以下是具体分析。

需要先在SketchUp引入“Three.js”框架，并从HTML界面入手，完成绘图场景的常见。整个场景是一个三维绘图空间，可以作为三维模型渲染的容器。在容器内部，搭载了各种模型渲染功能。（1）相机设置功能，将其中的模型对象直接投射到二维平面空间中来。基于不同的投射需要，相机可分为两种功能，一是正交相机，用于满足正交图形投射需求。二是透视相机，可以满足图形投射透视需求。在具体创建相机功能的过程中，需要采用如下代码：相机功能对象创建代码：

在完成相机对象创建后，还需要设置相机的具体位置，具体设置代码如下：（2）在完成相机位置设置后，还需要设置相机在场景中具体指向的对象，具体的代码如下：

（3）完成模型场景的光源设置。所谓的光源是指模型代表的物体在现实场景中，可能会存在的各种光源。在不同的光源下，模型呈现的效果也会有所差异。常见的场景光源包括环境自然光、聚光灯照射光源、平行光、点光源等，具体的光源创建代码如下：（4）完成模型的导入。在具体导入的过程中，可以灵活选择“Three.js”框架中的模型导入功能。在具体选择时，需要基于不同模型的格式，选择对应的模型加载功能。以导入格式为的模型，需要导入模型功能的代码如下：

（5）渲染功能设置。在完成各种场景功能设置，并将模型成功导入后，需要对模型进行渲染处理。在处理时，首先需要完成针对性地渲染功能的设置[2]。借助这种渲染功能，便于用户基于实际渲染需求，灵活调动各种参数，完成模型的场景渲染，从而将模型从简单的三维图形渲染成类似实物的一种三维图形，具体的操作代码如下：

一是结合实际情况，选择创建的渲染对象，代码参考：

二是根据实际渲染的需求，准确设置具体的模型渲染尺寸，代码参考：

三是完成模型背景颜色的设置，代码参考：

四是插入对象，代码参考：

五是渲染功能的执行，代码参考：

通过采用上述方法，可以顺利完成基于WebGL的三维模型的构建与可视化展示。

三、交互体验下基于WebGL的水利工程三维可视化

以某水利工程大坝三维模型为例，该大坝三维模型的组成并不复杂，主要由大坝的主体、沉降位移监测点和垂直位移监测点等构件组成。相关大坝坝体构件组成的信息，主要采用a.jax方法，异步完成了API接口的调用，从后台完成构件详细的信息获取。相关获取的信息主要包括各种坝体构件的实时数据信息、构件参数信息以及构件的具体组成数量等，然后将获取的构件信息直接加载在三维模型之上。随后，按照文章上述提出的方法，完成模型的场景构建，并做好相机、光源以及渲染器的设置，最后直接在浏览器界面上完成模型的渲染处理。在完成模型渲染后，最终的效果图如图1所示。

上述模型可以显著提升用户的交互体验，这些交互体验主要体现在以下几点：一是用户可以直接浏览模型整体结构，随时查看模型构件的几何参数信息。在具体查看时，用户可以直接通过鼠标滚轮放大缩小模型，同时采用左右键控制，完成模型的旋转、平移与缩放。如果需要查看模型的信息细节，可以直接点击想要查看的模型部分，模型将会自动弹出查看部件的参数信息[3]。二是通过WebGL构建渲染的模型，还可以支持模型内部构造信息的查看。 比如可以在界面组件控制器的帮助下，由用户自主添加辅助控制面，具体的控制面可以是Y轴控制面或者X、Z轴控制面等，随后通过操控鼠标，移动控制面位置，模型也会被轴线进行虚拟化切割，从而显示出模型内部的具体的细部构造，进一步提升模型与用户的交互性体验。总之，通过应用WebGL构建的模型，可以直接在网页构建、加载、渲染，整体能够呈现出真实的模型实物效果，还能够通过灯光、颜色的渲染调整，模拟真实的工程环境，进一步提升了模型的可视化展示效果。

总结：总之，在水利工程实践中，针对模型的构建与渲染，可以应用WebGL技术，借助该技术提供的Three.js框架，完成对模型的高效化构建、渲染。这种WebGL技术可以直接在网页上完成模型渲染，不需要复杂的软件程序，可以显著提升模型构件渲染的效率，并且构建渲染的模型与用户交互性功能较强，用户可以随意控制模型，查看模型的细节参数，观察模型的内部构建，显著提升了Web端用户模型交互应用体验。但这种WebGL技术通常适用于以下小型的模型构建渲染，针对一些大型且构成复杂的模型，整体的构建渲染效率将会下降，还会影响最终的可视化效果。所以后续还需要加大研究开发的力度，提升WebGL技术渲染大型复杂模型的效率与可视化水平。

参考文献

[1]刘勇，王伟玲，许洪健.基于React＿Umi+Cesium框架下的水利工程BIM+GIS的Web端应用实现[J].治淮，2022，（02）：26-28.

[2]尹广林，晁阳.基于WebGL的监测信息三维全景展示平台研究[J].长江信息通信，2022，35（08）：105-107.

[3]杜政，王海俊，谈震，等.基于IFC与WebGL的水利工程BIM轻量化应用研究[J].中国农村水利水电，2020，（11）：199-203.