基于WebGL的二维三维融合态势可视化设计及关键技术研究
2019-06-14陈昊赵斐
陈昊 赵斐
（北京跟踪与通信技术研究所，北京 100094）
1 引言
未来战争已经朝着信息化方向不断推进，如何获取信息优势已经成为制胜关键。各国大力发展的天基、空基、陆基、海上及水下态势感知技术空前发展，各类侦察、探测、遥感技术获取海量战场信息，形成了察觉战场态势的基础，但如何对海量战场信息进行处理、分析，准确进行态势估计和预测，为作战指挥决策和执行提供支持，成为亟待解决的问题。战场态势可视化是可视化技术的重要应用，通过对作战对象的几何特征和拓扑关系的展现，复杂战场信息数据易于理解，以直观方式展示大量战场信息分析的结果。
2 态势可视化技术发展现状
战场态势可视化得到了军事大国的重视，已被广泛用于作战态势指挥显示、联合作战任务规划、数字战例分析、作战模拟推演、协同对抗模式演练等领域。
2.1 国外态势可视化发展历程
20世纪90年代中期，美军便提出了虚拟战场可视化。近年来，美国海军研究所和美国海运联合体联合资助的Dragon战场态势可视化系统[1]，以三维显示的方式来展现战场空间，通过移动终端设备获取战场各个军队作战信息，加强了对战场信息的查询分析能力以及战场态势显示能力。
2.2 国内态势可视化现状及存在的问题
国内的可视化系统主要包括信息工程大学的二三维显示系统[2]，北京航空航天大学基于GIS的虚拟二三维战场态势。这些系统各有特点，一定程度上满足了对作战模拟系统二三维显示的要求，部分系统充分考虑系统的分布式和通用性，采用基于HLA的模拟仿真标准框架。但随着态势可视化系统的发展，已有系统暴露出缺陷：一是系统对平台高度依赖，导致信息态势共享、协同性低。二是系统二三维度的联动和融合程度不高，难以在统一界面实现多层次不同维度的灵活切换。
鉴于当前国内态势可视化系统存在的不足，本文设计了基于WebGL的二维三维融合战场态势可视化系统，提出了多源数据的统一管理、二三维军标一体化表达、基于WebGL的显示引擎技术，实现了多种态势信息综合显示和战场态势空间分析功能。
3 基于WebGL的二维三维融合态势可视化设计
3.1 设计思路
随着网络技术的发展，战场态势可视化系统通过C/S架构转向Web应用，从而具备跨平台、可移植特性，实现态势信息的高效协同共享。在可视化技术选择上，基于HTML5以及WebGL的显示技术组合，以插件、硬件加速的方式，为逼真的态势显示、丰富的人机交互提供更好的体验，本文以WebGL技术为基础，为态势的可视化提供更好的技术支撑。
3.2 系统架构
本文设计的基于WebGL的二三维态势融合可视化系统框架自底向上分为三个层次：数据层、业务层和表现层。数据层对多源数据一体化封装，为态势融合应用提供统一的数据支撑；业务层是二三维一体化态势融合展示的核心，是整个系统的服务器端，对底层数据进行组织管理，为客户端提供高效的数据服务和业务处理，为二三维一体化服务提供支撑；表现层由基于WebGL的二三维一体化显示引擎和多个功能模块组成，放置在Web端，负责数据的调度与访问、二三维场景加载与交互，并提供二三维态势融合显示、态势交互、态势空间分析及人工标绘的人机接口。基于WebGL的二三维融合态势可视化系统架构如图1所示。
图1 基于WebGL的二三维融合态势可视化系统架构
4 基于WebGL的二维三维融合态势可视化关键技术研究
4.1 多源数据的统一管理技术
随着作战力量的多元化发展，战场数据来源也是多样化和异构的，因此，必须对原始的态势数据和环境数据进行格式转换和处理，生成统一的面向Web的轻量级数据格式。本文选择一种通用数据格式，将多源、异构的数据转换成标准数据格式，并兼顾数据在浏览器上的可视化效率。针对二维态势数据，提供OGC标准的数据接口；针对三维模型数据，选用glTF标准数据格式[3]。glTF参照JSON表达方式，基于JavaScript对象表示法进行定义，是面向WebGL、OpenGL ES以及OpenGL接口的传输格式，为Web3D 资源提供一种轻便、可重复使用的共存标准，以及统一的资源存储库和档案库。glTF数据模型不但能够表示复杂的数据类型和空间关系，还可以在Web上高效传输和解析，通过WebGL显卡能够直接加载该数据结构。
4.2 二三维军标一体化表达技术
二维军标技术可以通过GDI（Graphics Device Interface，图形设备接口）实时生成，并保存在二维军标库。标绘时直接在二维地图上进行人工标绘和编辑。基于态势三维可视化需求，三维军标的创建和标绘技术应加以研究并更好地实现。本文提出一种一体化表达技术，可实现二三维军标的一体化创建和标绘。针对规则军标和不规则军标，直接通过二维军标快速实时生成对应的三维军标，同时在态势标绘时，解决二三维军标的一体化可视化；通过计算，降低三维军标生成的难度，并建立部分二三维军标间的对应联系。
由基本的图元（点、线等）构成的规则军标，在三维场景中的三维效果通常不会随着地形等因素改变，生成与标绘三维军标的具体过程相对简单。先对GDI实时生成的二维军标图像进行斜面与浮雕算法处理，生成具有三维军标效果的图像，存储在三维军标库中。斜面与浮雕算法是通过模拟光源产生的三维效果而对图像进行亮度变化处理的一种图像处理方法。在进行态势标绘时，采用公告板（billboard）技术实现三维规则军标在三维场景的标绘，即在三维态势场景中，选定特定的空间位置和方向，放置一个公告板，这个公告板是一个共面四边形，将上述三维军标以纹理的形式贴附到四边形上，使得该三维标绘始终面向观察点的位置，给用户一致的视觉显示。
基于线状和面状的不规则军标，通过在二维军标上增加一个高程维度，使之成为三维图形。具体实现采用面三角剖分算法生成三维动态军标的形状底面，再对生成的平面军标添加高程以生成三维动态军标，最后利用WebGL在三维场景中进行标绘。在使用三维不规则军标进行态势标绘时，要考虑军标与地形的关系。例如，在跨越一片山脉的区域标绘一个双线箭标，军标也随着地形起伏，这需要根据军标和地形的关系对军标的高程信息进行控制，从而形成军标浮于地形表面、随地形起伏的效果。
4.3 基于WebGL的显示引擎技术
本文设计了一个基于WebGL和HTML5协同的Web端可视化框架，采取异步资源获取的方式，实现跨平台显示的需求，提升系统的平台适应性和灵活性，具备实现更多二维三维应用的扩展潜力。
（1）基于WebGL的Web端可视化框架
基于WebGL的Web端可视化框架如图2所示，主要包含几个模块，实现对二三维态势融合显示、空间分析和人机交互等应用的支持。
高速资源加载模块：采用AJAX技术实现异步资源加载，极大地缩小资源的加载容量。在服务器端访问数据库后，计算顶点信息，将其转换为glTF格式。
通用处理模块：通用处理提供系统调试、分析和跨浏览器运行的实用程序，包括浏览器兼容性和用户行为等常规检测，为系统各应用模块在浏览器端执行提供数学库辅助，如提供向量和矩阵执行运算等支持。
用户界面：对浏览器端可能的事件和事件处理封装，提供良好的I/O和人工交互接口，嵌入了GUI组件提供无缝切换的用户界面。
图2 基于WebGL的跨平台Web端可视化框架
（2）WebGL可视化渲染过程
WebGL是Web端可视化框架的核心[4]，基于OpenGL ES 2.0，提供3D图形的API，能够搭建在基于浏览引擎的环境上，代码作用于HTML5的
图3 WebGL二三维图形绘制流程
数据预处理：对各种数据进行简单处理，包括对几何模型进行格式转换，将模型转换为图形库所能接受的原始图元格式；对图片以及视频等进行预处理。
参数设置：二三维场景数据在发送到渲染模块完成渲染前，对场景进行简单设置，包括物体纹理特性、摄像机位置、视点方向、光照属性等。
纹理映射：指定义和应用纹理的方式，为了使二三维场景更具真实感，给模型进行贴图。
模型构造：通过二三维API接口提供的相关函数方法，将物体模型构建成对应的几何模型。
投影变换：将图形从三维转换为二维表示，用投影的方法降低三维图形的维数。
视口变换：视口在屏幕上是一个矩形区域。由于计算机显示屏是二维显示的，所以需要视口变换，将处在三维坐标系的物体转换为适用于二维显示的坐标系中，方便用户通过显示屏将物体显示出来。
5 试验验证
5.1 系统软件环境搭建
基于本文提出的建模方法，在Windows+Apache+MySQL+PHP环境下，应用HTML5+WebGL技术对试验系统进行研发，并利用实测数据进行应用验证。由于WebGL只包含底层函数，直接使用WebGL进行开发过于繁琐，因此采用基于WebGL的地图引擎Cesium实现战场环境和战场态势可视化。Cesium是一个基于JavaScript编写的使用WebGL的地图引擎的开源框架[5]，支持3D、2.5D、2D形式的地图展示，可以自行绘制图形，高亮区域，提供良好的触摸支持，且支持绝大多数的浏览器和移动端框架。
5.2 二三维战场环境可视化
战场环境通常用二维地图或三维地形场景来表达，二三维战场环境可视化基于WebGL实现二维地图可视化和三维地形场景可视化。Cesium提供了多种ImageryProvider用于实现二维地图的加载，可以用WebMapServiceImageryProvider和WebMapTileServiceImageryProvider两个类实现WMS地图和WMTS地图的加载。在Cesium中，地形和影像的处理不同，默认是影像覆盖在地形上，任何影像的provider都可以在任何地形的provider上使用。使用CesiumTerrainProvider类实现地形数据的加载，也可模拟光照、积雪、水流等真实环境。实现二三维战场环境可视化效果如图4所示。
（1）二三维战场态势可视化
二三维战场态势可视化通过军标符号来实时表达战场的二三维态势，也就是说二维态势用二维军标来表达，三维态势用三维军标来表达。
Cesium提供Entity API来绘制空间数据，例如点、标记、标签、线、3D模型、形状。Cesium提供两类API：一是面向图形开发人员的底层API，即“Primitive API”。二是高级别的数据驱动API，即“Entity API”。该API使用一致性设计的、高级别的对象管理一组相关性的可视化对象，其底层使用Primitive API。绘制不同类型的三维军标符号可用viewer.entities.add（）来实现。实现的二三维态势如图5所示。
图4 二三维战场态势可视化效果
图5 二三维态势可视化
（2）二三维态势空间分析
二三维态势空间分析实现剖面分析、通视分析、缓冲区分析等功能。在三维地形上绘制一条进行剖面分析的线路，绘制完成自动弹出默认采样间距的分析剖面示意图。举例说明剖面分析的实现流程：
①实现鼠标点击操作两次，记录获取到的两点坐标，确定要进行剖面分析的线段。通过viewer.scene.pickPosition（click.position），获取坐标。②对获取的线段做插值，取样获取线段上100个点的坐标。③将取样点坐标存入数组array[]后，遍历取出数组中各点坐标，根据当前点经纬度坐标求得3DTilset在该坐标下的点位高度。④根据获取的X、Y、Z三个坐标绘制剖面图。剖面分析示意图如图6所示。
图6 X、Y、Z三个坐标绘制剖面图
6 结论
现代战争正朝着陆、海、空、天、电全维联合，信息化方向快速发展，战场态势空前复杂。态势可视化技术将复杂的战场态势以直观方式予以呈现，为战场态势感知与作战指挥提供支持，是未来联合作战的重要一环。本文论述了当前国内外战场态势可视化相关技术和系统的发展现状，剖析当前存在的问题，提出了一种基于WebGL的二维三维融合态势可视化技术，以提升战场态势可视化系统的平台适应性和二三维视觉间的联动性，并构建原型系统进行验证和测试。
