基于WebGL的洪水演进三维可视化时空仿真方法.pdf

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）。2.2.2 洪水淹没算法原理 对地形瓦片数据生成指定步长的规则矩形格网，分别进行无源淹没和有源淹没分析。无源淹没不考虑洪水流向的问题，选择矩形格网最左下角的网格作为开始判断的原始点，获得其高程值minH和洪水水位值waterH进行比较，当minwaterHH时，该格网状态定义为淹没，存入到淹没缓冲区（buffer），依次遍历所有格网并判断其淹没状态，存入至淹没缓冲区中，直到最后一个格网。对于倾斜摄影三维模型，可以根据模型边缘点作为原始点，由原始点沿三角网判断，直到生成淹没点缓冲区（姜仁贵等，2011）。通过给定不同洪水水位值waterH来选择缓存区中满足淹没条件的网格点，使洪水淹没过程具有时间演变特性，更加形象生动地表达模拟仿真效果，如图 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 洪水演进关注的参数变量主要是淹没面积、洪水体积和流量。淹没面积计算方法为，判断每个格网高程iH与T 时刻洪水水位高程TH 的大小关系，若iTHH，则为淹没格网；若iTHH，则为未淹没格网。然后对淹没格网逐一面积计算并求和得到淹没面积：1=niiSS淹没 （1）式中，S淹没为此时刻洪水淹没总面积，m2；iS 为第i 个淹没网格的面积，m2；n为淹没网格的个数。张涛 等：基于 WebGL 的洪水演进三维可视化时空仿真方法 299 淹没体积的计算方法为，计算淹没网格高程iH与T时刻洪水水位高程TH之差iH；然后对淹没网格依次求取洪水体积并求和：iiiVHS （2）1=niiVV淹没 （3）式中，iV为第i个淹没网格的洪水体积，m3；V淹没为洪水淹没总体积，m3。洪水流量v计算方法为，计算洪水淹没总体积V淹没与T时刻之商：/vVT淹没 （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所示。300 Journal of Spatio-temporal Information 时空信息学报 2023,30(2)图 7 不同时刻地形洪水淹没时空模拟结果 Fig.7 Spatio-temporal simulation results of terrain flood submergence at different time points 图 8 不同时刻倾斜模型淹没时空模拟结果 Fig.8 Spatio-temporal simulation results of oblique model submergence at different time points 三维场景数据在Web端渲染时，帧率变化稳定且大于40帧/s，能够满足浏览要求，如图10所示。实验结果表明，基于WebGL实现的洪水演进三维可视化仿真具有时空表达效果，并能够精确统计淹没数值。从有源淹没和无源淹没统计结果来看，有源淹没具有来势猛、破坏性强的特点，无源淹没发 张涛 等：基于 WebGL 的洪水演进三维可视化时空仿真方法 301 图 9 不同海拔 GIS 软件洪水淹没效果 Fig.9 Flood submergence effect using GIS software at different altitudes 图 10 Web 端洪水演进过程三维可视化帧率变化 Fig.10 Frame rate variation of 3D visualization in the Web-based flood evolution process 展到一定阶段相对稳定。传统GIS软件赋予二维图层海拔高度与三维地形叠加显示，从而模拟洪水淹没效果，难以统计洪水数值且缺少时间维度的变化过程。综上，基于WebGL的洪水淹没仿真模拟方法相比较传统GIS方法具有时空表达、动态模拟与多维度展示的优势。4 结 论 面向实时性洪水演进分析、表达和实际应用的需要，针对Web端地形、影像和三维模型等大体量场景数据动态调度效率不高和二维数据模拟效果实时性不强的问题，本文提出了一种基于WebGL洪水演进三维可视化的时空仿真方法。对场景数据进行四叉树划分和中间节点多LOD层级生成，在渲染场景时基于视点距离动态加载和调度LOD层级；基于规则网格和三角网模型采用种子扩散算法进行洪水淹没分析，并对分析结果进行三维时空过程模拟和统计。通过实验分析，本方法可以保证Web环境下大体量三维场景数据的高效动态调度和洪水演进时空过程快速三维推演和历史回溯，以互联网为途径对洪水灾情提前预报、预警，减少洪灾造成的经济损失和人员伤亡。参考文献 常静.2010.基于WebGIS的洪水淹没三维可视化技术研究.硕士学位论文.郑州:郑州大学 陈静,袁思佳,曾方敏.2014.三维虚拟地球中有源洪水淹没分析算法.武汉大学学报(信息科学版),39(4):492-495,504 陈良超,李锋.2019.顾及多源 LOD 的室内外三维模型组织和调度方法.测绘科学,44(10):152-157 302 Journal of Spatio-temporal Information 时空信息学报 2023,30(2)樊青松,肖晨旦.2019.基于B/S架构的实时校正洪水预报模型研究.浙江水利水电学院学报,31(2):32-35 黄一帆,李文辉.2021.ArcGIS 在生态水面淹没范围计算中的应用.陕西水利,(12):22-24 姜仁贵,解建仓,李建勋,李昊,李维乾.2011.基于数字地球的洪水淹没分析及仿真研究.计算机工程与应用,47(13):219-222 蒋杰,吴玲达,徐江斌.2009.基于数字地球的洪灾演进模型表现.计算机工程与应用,45(36):1-4,164 李晨光.2019.基于 ArcGIS 的三维洪水模拟分析.工程技术研究,4(24):27-28 刘畅,殷浩,张叶廷,谢潇,曹振宇.2018.基于 WebGL 的三维管线轻量可视化方法.地理信息世界,25(4):48-51,57 刘恒洋.2019.基于 DEM 的洪湖分蓄洪区东块洪水淹没模拟研究.硕士学位论文.武汉:华中科技大学 刘明,郭亮亮,龙慧,夏秀龙.2023.基于 WebGL 的数字孪生流域平台研究.甘肃水利水电技术,59(3):21-23,27 刘晓林.2022.基于WebGIS的昌平区洪水预报系统设计与实现.北京水务,(5):41-46 刘一鸣.2018.基于 WebGL 的高维时空数据可视化研究.硕士毕业论文.北京:北京邮电大学 孙杰,谢文寒,白瑞杰.2019.无人机倾斜摄影技术研究与应用.测绘科学,44(6):145-150 孙连华,秦萍.2023.基于 GIS 的洪水风险图避险转移分析.测绘与空间地理信息,46(1):155-158,161 田林钢,魏暄云,王素云.2020.Supermap 组件式开发在洪水演进中的应用研究.水利与建筑工程学报,18(6):223-227 汪洋,徐震,赵杏英,林武,李凌翔.2021.基于空间索引的倾斜模型轻量化技术研究与实现.人民长江,52(S2):298-301 王凯松,刘增良,邢晨.2019.OSGB 三维模型数据切割与修平编辑工具的设计与实现.北京测绘,33(6):679-682 王旭,杨新,王志铭.2010.在 GPU 上实现地形渲染的自适应算法.计算机辅助设计与图形学学报,22(10):1741-1749,1755 邢峰,崔巍,许大璐,邱天奇,李益言,杜清运.2018.基于 WebGL的三维云景渲染方法.地理信息世界,25(5):94-98,102 邢华桥,侯妙乐,王磊,姜晓轶.2015.基于球面 QTM 的大范围有源淹没算法研究.测绘通报,(12):46-49,53 杨帆,杜凯.2016.基于 WebGL 的三维虚拟地球系统设计与实现.地理信息世界,23(2):113-118 张连翀,李国庆,于文洋,冉全.2017.基于水平集的洪涝淹没范围时空模拟方法.国土资源遥感,29(1):92-96 朱庆,陈兴旺,丁雨淋,刘铭崴,何华贵,杨卫军,陈利燕,曹振宇.2017.视觉感知驱动的三维城市场景数据组织与调度方法.西南交通大学学报,52(5):869-876 朱祖乐.2016.基于 WebGL 的郑州市区积水路段暴雨洪水三维场景模拟.硕士学位论文.郑州:郑州大学 Bai R,Li T J,Huang Y F,Li J Y,Wang G Q.2015.An efficient and comprehensive method for drainage network extraction from DEM with billions of pixels using a size-balanced binary search tree.Geomorphology,238(1):56-67 Rueda A,Noguera J M,Martnez-Cruz C.2013.A flooding algorithm for extracting drainage networks from unprocessed digital elevation models.Computers&Geosciences,59:116-123 Teng J,Jakeman A J,Vaze J,Croke B F W,Dutta D,Kim S.2017.Flood inundation modelling:A review of methods,recent advances and uncertainty analysis.Environmental Modelling&Software,90:201-216 Spatio-temporal simulation method for 3D flood evolution visualization based on WebGL ZHANG Tao1,ZHU Shichao2,ZHEN Qianqian2,XIANG Shiyao1,GUO Changshun1,LI Bing1 1.Research and Development Center of Life Cycle BIM Technologies Application,Shandong Provincial Communications Planning and Design Institute Co.,Ltd.,Jinan 250031,China;2.Shandong Hi-Speed Infrastructure Construction Co.,Ltd.,Jinan 250014,China Abstract:Existing flood dynamic visualization and simulation algorithms mainly focus on the processing and displaying of two-dimensional grid data and 2.5D model.However,these approaches often struggle to capture the changes of flood across both time and space dimensions.Consequently,they fall short of providing accurate information for flood prediction and forecasting.Therefore,addressing the challenge of obtaining real-time,fast,and accurate flood progression trends and spatio temporal changes has emerged as a critical issue in the field of flood routing process simulation.In order to address this problem,a WebGL-based 3D visual spatio-temporal simulation method for flood routing is proposed.Firstly,we obtain high-precision elevation,image and real 3D model data.We construct tile pyramids using terrain and image data and establish spatial indexes of sub-block positions based on longitude and latitude records.This ensures responsiveness to data access and storage requirements at various resolutions,improving the access efficiency of digital elevation model(DEM)and image data.We then determine levels of detail for object model nodes within the display environment based on their positions and significance.This informs resource allocation for object rendering,reducing the number of faces and detail of unimportant objects.As a result,efficient rendering operations are achieved.Real 3D model data is merged with the root node,enhancing model retrieval efficiency.Then,the spatio-temporal evolution process of passive flooding is realized by traversing the grid regular grid and storing the qualified ones in the buffer zone.For the 张涛 等：基于 WebGL 的洪水演进三维可视化时空仿真方法 303 spatio-temporal evolution of active flooding,we employ the seed point diffusion algorithm.At the same time,the quantitative calculation method of flood inundation is analyzed.Finally,based on WebGL technology,different times or submergence ranges of different water levels are rendered as frame caches.To ensure a smooth rendering effect,different frames need to be interpolated.By rendering and displaying the frame caches one by one.And on this basis,a 3D visual time-space simulation platform for flood routing is developed to show the three-dimensional scene and simulation effect and support the input of simulation parameters such as maximum height,minimum height,and flow rate.We found that this method realized fast loading of 3D scene data,efficient rendering of flood spatio-temporal evolution process and accurate statistics of flood inundation values,solved the problem of loading stuck on the Web end of large-scale GIS data,met the requirements of timeliness and spatial accuracy of 3D spatio temporal flood simulation,and adapted to a variety of network terminals.Compared with the flood inundation effect simulated by traditional GIS software,this method has the advantages of spatio-temporal expression,dynamic simulation and multi-dimensional.This method realizes the measurement of flood submergence in time and space dimensions,which is of great significance for flood forecasting and decision-making,and reduces the loss of life and property caused by flood.Key words:WebGL;flood evolution;spatio-temporal simulation;3D scenes;web terminals Supported by Shandong Provincial Department of Transportation Science and Technology Plan Project(2019B58);Shandong Provincial Department of Transportation Science and Technology Plan Project(2020B72);Shandong Provincial Communications Planning and Design Institute Co.,Ltd.Science and Technology Innovation Project(KJ-2020-SJY-04)