2097-3012(2023)02-0295-09 Journal of Spatio-temporal Information  时空信息学报
收稿日期: 2022-09-22；修订日期: 2023-06-18
基金项目: 山东省交通运输厅科技计划项目（2019B58）；山东省交通运输厅科技计划项目（2020B72）；山东省交通规划设计院集团有
限公司科技创新项目（KJ-2020-SJY-04）
作者简介: 张涛，研究方向为虚拟地理环境、算法开发、BIM+GIS 平台研发。E-mail ：*****************
基于WebGL 的洪水演进三维可视化时空仿真方法
张涛1，朱世超2，甄倩倩2，相诗尧1，郭长顺1，李兵1
1.山东省交通规划设计院集团有限公司 全寿命周期BIM 技术应用研发中心，济南 250031；
2. 山东高速基础设施建设有限公司，济南 250014
摘  要：为了防止洪水灾情误判和延报，实时、快速、准确地获取洪水发展趋势和时空变化信息成为提高洪灾预报亟待解决的问题。现有的洪水演进可视化和计算方法仍然停留在二维数据和伪三维模型的处理和
展示，难以为洪灾预测和预报提供准确信息。基于此，本文提出一种基于WebGL 洪水演进三维可视化的时空仿真方法；首先根据三维场景数据格式的不同分别进行细节层次分级和合并节点处理，然后深入分析洪水演进时空过程和定量化计算方法，最后利用WebGL 在浏览器端动态加载三维场景数据、高效渲染洪水时空演变过程以及精确统计洪水淹没数值。研究表明，本方法满足洪水演进仿真的时效性和精度要求，有效解决了Web 端三维数据加载卡顿的问题，适用于多种网络终端。
关键词：WebGL ；洪水演进；时空仿真；三维场景；网络终端
引用格式：张涛, 朱世超, 甄倩倩, 相诗尧, 郭长顺, 李兵. 2023. 基于WebGL 的洪水演进三维可视化时空仿真方法. 时空信
息学报, 30(2): 295-303
Zhang T, Zhu S C, Zhen Q Q, Xiang S Y , Guo C S, Li B. 2023. Spatio-temporal simulation method for 3D flood evolution visualization based on WebGL. Journal of Spatio-temporal Information, 30(2): 295-303, doi: 10.20117/j.jsti.202302018
1  引  言
依靠洪灾频发区精细三维数据进行淹没分析和研究过程模拟，是洪灾短期准确预报的有效手段（陈静等，
2014）。环境地形、水量和人为主观等因素的影响，会导致对洪水发展、运动过程的误判和延报，往往造成人员伤亡和经济损失（孙连华和秦萍，2023）。因此，要实施有效及时的防灾减灾预报和策略，就必须深入研究洪水淹没原理和演进过程，对洪水淹没的全周期过程进行高度精确的仿真模拟（常静，2010）。随着智慧防灾减灾体系的建立，如何在网络环境下实时掌握洪水动态变化成为三维GIS 的关键问题之一（樊青松和肖晨旦，2019）。
目前，关于洪水淹没仿真的技术，存在问题：一是基于C/S 端的地理信息系统（geographic information system ，GIS ）软件，如ArcGIS 、Erdas 等实现洪水淹没的静态展示，但难以真正做到洪水演进三维化仿真过程展示（黄一帆和李文辉，2021；李晨光，2019；刘恒洋，2019）；二是一些B/S 架构前后端底层的系统式开发和基于现有软件的二次开发（刘晓林，2022；刘畅等，2018；田林钢等，2020），需要以插件安装形式使用，且难以兼容多个浏览器，无法满足多用户对Web 端三维GIS 轻量化、实时性的要求。从实现效果上讲，一是难以高效加载与调度海量三维场景数据，满足不了宏观三维场景的应用需求（Bai 等，2015）；二是难以兼顾洪水淹没空间维度与时间维度的同步变化，不能实现贴近实际的洪水三维演进过程（Teng 等，2017；Rueda 等，2013；张连翀等，2017）。
WebGL 是一种面向浏览器端的跨平台、开放、免插件的三维可视化绘图标准，且提供了基于GPU 硬件加速的三维渲染技术（刘一鸣，2018）。基于HTML5 WebGL 可为开发者和最终使用户带来更简
296 Journal of Spatio-temporal Information 时空信息学报  2023, 30(2)
洁的开发与访问体验（杨帆和杜凯，2016）。利用WebGL技术在浏览器端实现洪水淹没分析和模拟仿真成为洪灾预防和预报的重要途径之一（朱祖乐，2016）。但目前WebGL技术仅支持较小数据量三维场景的加载和展示，对海量数据的实时绘制和交互式分析难以直接支持，现有的基于WebGL的三维GIS产品均未能很好地支持三维场景下的载体数据加载和洪水淹没过程动画模拟（刘明等，2023）。因此，针对大场景三维数据加载缓慢的问题，本文提出基于WebGL洪水演进三维可视化的时空仿真方法，设计一种大体量数据轻量化策略，利用WebGL高效绘制和动态渲染的特点，对洪水淹没演变过程进行动画模拟仿真。实验证明，本方法满足三维数据高效加载与显示，真实模拟洪水淹没演变过程，对现实性洪水灾害预测和预报具有较强的实用性。
2  方法与技术
基于WebGL的洪水演进三维可视化时空仿真方法的体系结构，如图1所示。本方法体系结构由数据层、存储层、原理层、服务层和应用层五层组成。数据层是根据地形数据精度和位置信息，利用四叉树对高精度地形数据进行细节层次（level of detail，LOD）、多粒度的划分，生成三维瓦片；对倾斜影像生成高效加载索引文件并合并根节点，经格式转换后得到WebGL支持格式3dtiles。存储层是将数据层的结果以空间数据库的方式发布到Web 服务器，以供终端调用。原理层包括地形影像生成LOD缓存的方法、倾斜模型合并根节点方法和洪水淹没算法。服务层基于WebGL提供的地图服务、数据服务、三维服务形成洪水淹没仿真服务，实现对数据的加载、可视化、分析和渲染。应用层是用户在各种终端只需一个网址
就可获取洪水淹没演进过程和定量化指标。
2.1  数据预处理
2.1.1  地形和影像数据预处理
由于地形和影像数据量大，直接加载到Web 端会造成操作卡顿和缓冲延时的问题，采用瓦片金字塔结构对数字高程模型（digital elevation model，DEM）和影像数据进行处理，生成多分辨率的瓦片数据。金字塔结构是一种多分辨率层次模型，能够在统一的空间参照下按分辨率级别的不同建立一组DEM和影像数据，将整体的DEM和影像数据进行分块处理，按照经纬度记录建立子块位置的空间索引，以响应不同分辨率数据的访问和存储需求，提高对DEM和影像数据的访问效率（朱庆等，2017）。把原始地形数据作为瓦片金字塔的底层Level 0，进行分块，形成第0层瓦片矩阵；在第0层的基础上，按每2像素×2像素的方法生成第1层Level 1，进行再次分块，形成第1层瓦片矩阵，如图2（a）所示。按照这个倍率依次对上层数据进行处理，直到形成完整的瓦片金字塔。
图1  洪水淹没仿真模拟体系结构
Fig.1 Simulation architecture for flood submergence
张涛 等：基于WebGL 的洪水演进三维可视化时空仿真方法 297
图2  瓦片结构示意图和LOD 层级效果图 Fig. 2  Tile structure diagram and level of detail effect
在瓦片金字塔的基础上对每个瓦片设置LOD 层级。LOD 技术是根据物体模型的节点在显示环境中所处的位置和重要度，决定物体渲染的资源分配，降低非重要物体的面数和细节度，从而获得高效率渲染运算（陈良超和李锋，2019）。当三维场景拉近看时，模型表现非常精细；当浏览整个场景时，模型只需以较粗糙方式显示。这样最大程度优化了资源的占用，提高了整个三维场景的性能。图2（b ）显示的是视点距离与模型精细化之间的关系。在Web 端可以设置模型LOD 层级、每一级网格简化率和每个层级之间的切换距离，此距离指相机视点与模型之间的距离，其决定了当前场景显示模型的精细程度。
经过预处理后的地形和影像切片数据发布到Web 服务器上，提供数据和地图服务，Web 端通过调用URL 地址访问数据。 2.1.2  倾斜摄影三维模型预处理
倾斜摄影三维模型不仅能够真实地反映地物
情况，高精度地获取物方纹理信息，还可通过先进的定位、融合、建模等技术，生成真实的三维实景模型（孙杰等，2019），可用于大场景下的三维空间分析。
倾斜摄影三维模型由航测影像自动生成，其三
维格网精细而复杂，导致倾斜摄影三维模型数据量往往非常大，这给数据转换、加载和应用带来严峻考验（汪洋等，2021）。倾斜摄影三维模型OSGB 格式自带原生LOD 结构，根据模型在三维场景中所处位置和重要程度，加载不同精细化的数据，即观察点离模型较近时，加载精细层保持高细节显示；观察点离模型较远时，使用模糊层数据降低内存消耗（王凯松等，2019）。原生LOD 层有利于模型的加载，但一个航测测区的模型是由很多个瓦片文件夹组成，会增加模型加载次数从而影响效率；为了提升模型加载和展示性能，合并根节点减少根节点数目，直到最优为止，如图3所示。
由于Cesium 暂不支持OSGB 格式数据，所以利用开源转换工具讲OSGB 格式数据转换为3dtiles 并发布到Web 服务器为Web 端提供三维数据服务。
图3  倾斜摄影三维模型根节点合并示意图
Fig.3  Illustration of root node merging in tilt photogrammetry-based 3D models
298 Journal of Spatio-temporal Information  时空信息学报  2023, 30(2)
2.2  洪水淹没算法 2.2.1  洪水淹没类型
按照洪水淹没的成因，可以将洪水淹没分为无源淹没和有源淹没。无源淹没只考虑降水造成的水位抬升，不考虑地表径流的汇入，所有高程值低于水位值的区域均认为被淹没。有源淹没通常设定一个或多个淹没源点，根据水位值从淹没源点向四周搜索连通的洼地，并根据水流速度确定各时间段的淹没范围，模拟出洪水淹没的时空过程（蒋杰等，2009）。
3d地图实景地图2.2.2  洪水淹没算法原理
对地形瓦片数据生成指定步长的规则矩形格网，分别进行无源淹没和有源淹没分析。无源淹没不考虑洪水流向的问题，选择矩形格网最左下角的网格作为开始判断的原始点，获得其高程值min H 和洪水水位值water H 进行比较，当min water H H <；时，该格网状态定义为淹没，存入到淹没缓冲区（buffer ），依次遍历所有格网并判断其淹没状态，存入至淹没缓冲区中，直到最后一个格网。对于倾斜摄影三维模型，可以根据模型边缘点作为原始点，由原始点沿三角网判断，直到生成淹没点缓冲区（姜仁贵等，2011）。通过给定不同洪水水位值water H 来选择缓存区中满足淹没条件的网格点，使洪水淹没过程具有时间演变特性，更加形象生动地表达模拟仿真效果，如图4所示。
图4  无源淹没原理图
Fig.4  Schematic diagram of passive submergence
有源淹没需要考虑格网之间的连通性，采用种
子点扩散算法进行计算。考虑洪水淹没发生的实际情况，需要指定一个源点作为算法计算的第一个原始点，提取其高程值判断是否淹没，若未被淹没，则按照网格顺序选择下一个网格，若满足淹没条件，则与此网格相邻的8个方向网格进行连通性分析，将满足淹没条件或具备连通性的格网标记下来并加入到缓冲区中，标记的网格作为下一轮的原始点继续进行8邻域扩散计算，直到所有满足淹没条件的网格皆存入缓冲区中（邢华桥等，2015）。为了体现淹没分析的时空演变过程，在算法中添加
Level 变量来记录每个淹没点的淹没层级，规定源点的Level 为1，源点周围淹没点的Level 为2，再一次扩散的淹没点的Level 为3，以此类推，直到最后一个Level 并确保Level 值大于0，Level 的不同值代表不同时间新增加的淹没区域。对于倾斜摄影三维模型，需先指定一个源点，沿三角网判断相邻三维点，满足条件的存入缓冲区并标记Level 值。原始点)(,P x y 标记为Level 1，其8邻域网格有三个满足淹没条件和连通性，标记为Level 2，作为下一轮判断的原始点，如图5所示。
图5  有源淹没原理图
Fig.5  Schematic diagram of active submergence
洪水演进关注的参数变量主要是淹没面积、洪水体积和流量。淹没面积计算方法为，判断每个格网高程i H 与T 时刻洪水水位高程T H 的大小关系，若i T H H <，则为淹没格网；若i T H H >，则为未淹没格网。然后对淹没格网逐一面积计算并求和得到淹没面积：
1
=n
i i S S =∑淹没          （1）
式中，S 淹没为此时刻洪水淹没总面积，m 2；i S 为第i 个淹没网格的面积，m 2；n 为淹没网格的个数。
张涛 等：基于WebGL 的洪水演进三维可视化时空仿真方法 299
淹没体积的计算方法为，计算淹没网格高程i H 与T 时刻洪水水位高程T H 之差i H ∆；然后对淹没网格依次求取洪水体积并求和：
i i i V H S =∆⋅            （2）
1
=n
i i V V =∑淹没            （3）
式中，i V 为第i 个淹没网格的洪水体积，m 3
；V 淹没
为洪水淹没总体积，m 3。
洪水流量v 计算方法为，计算洪水淹没总体积V 淹没与T 时刻之商：
/v V T =淹没            （4）
2.3  Web 端洪水淹没三维时空仿真实现
WebGL 是一种3D 绘图标准，其渲染机制是将相关数据提交给渲染队列，再调用GPU 资源来实现三维可视化渲染（邢峰等，2018）。
将地形数据、影像数据和倾斜摄影三维模型发布到Web 服务器，提供数据服务、地图服务和三维服务，利用URL 访问数据地址实现数据的加载和展示，金字塔结构和低层级节点遍历保证了数据的
加载、渲染与调度。场景中加载地形数据和倾斜摄影三维模型，其数据的每个像素自身带有高程值，
利用分层设法对不同高程范围进行颜赋值，在
Web 端图形绘制时每个像素相关信息被保存在内存里。通过洪水淹没算法的计算，将不同时刻或不同
水位值淹没范围进行渲染为帧缓存，为保证渲染效果的平滑流畅需要对不同帧进行插值，通过对帧缓
存逐条渲染显示，从而达到对淹没过程的模拟仿真（王旭等，2010）
。 用户通过浏览器输入网址就可进入洪水淹没模拟仿真界面，了解洪水淹没过程和三维模拟仿真
效果，从而在洪灾前进行宏观决策。
3  实验分析
3.1  实验场景与数据
基于WebGL 技术在浏览器端开发洪水演进三维可视化时空仿真平台，提供三维实验场景，如图
6所示。地形和影像数据选取某河流流域区域，用来模拟河流有源洪水淹没过程；倾斜摄影三维模型主要是某城市实景模型，主要用来表达城市无源淹没发展过程的仿真。
图6  Web 端洪水演进三维可视化时空仿真平台
Fig.6  Web-based spatio-temporal simulation platform for 3D flood evolution visualization
3.2  实验结果与分析
实验中给定初始的最大高程、最小高程和淹没速度，根据洪水淹没算法原理，结合本文提出的
WebGL 三维模型可视化渲染技术，动态模拟洪水的演进过程，将其与周围大场景相融合，直观地展示洪水在三维虚拟环境中的动态变化过程，并精确定量计算洪水淹没面积、体积和流量。
地形叠加影像数据用于洪水有源淹没计算仿真，结果如图7所示。倾斜摄影三维模型用于洪水无源淹没计算仿真，结果如图8所示。传统GIS 软件中基于地形、影像和研究区域范围Shapefile 文件模拟洪水淹没效果图，其原理是在伪三维效果下通过设置Shapefile 文件海拔和颜来模拟不同海拔下研究区域淹没结果，如图9所示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。