CN107835436A - 一种基于WebGL的实时虚实融合直播系统及方法 - Google Patents

Abstract

本发明提出的一种基于WebGL的实时虚实融合直播系统及方法，该系统及方法使用WebGL接口在Web端实现了一种实时虚实融合的有效方法。该系统由5个模块组成：视频模型生成模块、视频直播模块、GIS服务模块、虚实融合模块以及场景操纵器模块。该系统实现了Web端上多视频流实时虚实融合的显示效果，提升了虚实融合显示的匹配准确度，具有需求资源少，跨平台兼容性好，可扩展性强的优点。

Description

一种基于WebGL的实时虚实融合直播系统及方法

技术领域

本发明属于计算机视觉中的虚拟现实技术领域，主要涉及一种基于WebGL的实时虚实 融合直播系统及方法。

背景技术

随着计算机图形技术与互联网技术的发展，传统的二维图像渐渐不能满足现代人们对展 示和理解场景的需要，而虚拟现实技术的出现弥补了这个缺点。因此，近年来，虚拟现实技 术及其相关领域发展迅速，被广泛用于模拟训练，视频监控，城市漫游，军事演示，景区展 示等领域。

虚拟三维场景能够让用户得到更加立体与真实的体验。当虚拟场景的环境信息与真实环 境信息越相似，用户得到的真实感越高，而且虚拟场景能够使用户更好、更自由地了解对应 的真实场景，增加了场景的沉浸感和体验感。但是，由于三维虚拟场景中的模型只能表示某 一个时刻的静止状态，用户并不能够通过观察这样静止的三维场景模型来了解到该场景的动 态变化。恰好相反，二维视频图像虽然不能展示三维模型具有的立体的感觉，但能够比较真 实地记录一段时间内场景的实际变化，人们通过视频可以了解到场景的动态变化。

如果将三维虚拟环境与二维视频图像结合起来建立增强虚拟环境，既能够提升三维模型 蕴含的信息量，使三维模型更加具有真实世界的变化，更富真实感，又能表达出比视频图像 更加广阔的空间范围，使用户能够利用虚拟场景的模型外观，空间分布，画面动态等信息进 一步理解视频图像的内容以及各个视频图像的时空关系，减轻用户的认知压力。早在1996 年，Moezzi(参见Moezzi S,Katkere A,Kuramura D Y,et al.Realitymodeling and visualization from multiple video sequences[J].Computer Graphicsand Applications,IEEE,1996,16(6): 58-63)等就提出三维场景融合视频显示的概念，他们使用多个不同视角的相机来捕捉运动 中的物体，并对其重建，然后动态地将重建的模型融合到虚拟场景中。2003年南加州大学的 Neumann(参见NeumannU,et al.AugmentedVirtual Environments(AVE):for Visual-ization of Dynamic Imagery[C].IEEEVirtual Reality 2003.2003:61-67)等人首次提出了增强虚拟环境 (Augmented VirtualEnvironment，AVE)这一概念，进一步发展了视频增强虚拟场景技术， 得到了虚实融合显示的效果。Neumann等人实现了多个校园场景的增强虚拟环境，再将采集 的视频数据投影到对应的建筑模型和地形上，形成了带有图像变化的动态三维模型。2012 年台湾大学的Chen(参见Chen S C,Lee C Y,Lin C W,et al.2D and 3D visualization with dual-resolution for surveillance.Proceedingsof IEEE Computer Society Conference onComputer Vision and Pattern Recognition Workshops,Providence,2012.23–30)等建立了使用GIS辅助的 可视化框架，其将多个不同分辨率相机的视图与三维模型进行融合，实现了多分辨率的监控 策略。

与此同时，基于Web的互联网技术在各行各业扮演着越来越重要的角色，其中Web技 术与虚拟现实技术的融合更是当今科技研究的潮流：借助互联网技术实现三维虚拟场景，使 用户能够通过浏览器访问虚拟场景，不仅能够突破地域空间的限制，还能够更加方便快捷地 给用户带来足不出户而又身临其境的虚拟场景体验。2011年，多媒体技术标准化组织Khronos 正式发布WebGL标准规范，它可以仅仅通过HTML脚本，在不借助任何浏览器插件的情况 下，实现Web交互式三维场景的绘制；通过统一的，标准的，跨平台的OpenGL接口，利 用底层的图形硬件进行图形渲染的加速，WebGL技术可以实现增强虚拟环境在桌面浏览器 甚至手机端的绘制，Web端的简洁高效也大大方便了增强虚拟环境的传播与实用，这正是虚 拟现实技术未来的一个重要发展趋势。

但综合来看，当前主流的多视频流虚实融合方法普遍存在着画面畸变、融合效果差以及 虚实对准代价过大等问题。而且由于Web端可用的资源有限，实现不错的融合效果更为困 难，所以现有虚实融合相关技术大多基于桌面客户端程序实现，未能实现轻量级Web端的 虚实融合系统。当前虚实融合系统普遍存在的系统要求过高，视频渲染耗费资源过多和维护 困难等问题限制了虚实融合系统在浏览器乃至移动端的广泛应用。

发明内容

本发明的技术解决问题：克服现有技术的不足，提供一种基于WebGL技术的实时虚实 融合直播系统及方法，克服了当前多视频流虚实融合代价过大的问题，提高了虚实融合方法 的跨平台兼容性。

本发明的技术解决方案：一种基于WebGL的实时虚实融合直播系统，所述的虚实融合 直播系统由离线端、服务器端和客户端构成，在离线端部署视频模型生成模块；在服务器端 部署了视频直播模块和GIS服务模块；客户端部署了虚实融合模块以及场景操纵器模块：

视频模型生成模块：读取监控摄像头采集的实时监控视频图像或本地视频图像，使用单 幅照片建模技术生成二进制格式描述的文件，所述二进制格式文件包含视频模型顶点坐标数 据和相机参数信息；使用其相机参数信息计算出视频模型的纹理投影变换矩阵及观看该视频 模型的最佳相机视点位姿，再将得到的该视频模型相关信息结合视频模型WebGL渲染参数 转化、存储为客户端浏览器可识别的JSON文件格式的视频模型文件。所述的视频模型文件 由视频模型顶点坐标数据、视频模型相机位姿信息、初始纹理图片信息以及WebGL渲染信 息组成；所述的WebGL渲染信息包括视频模型顶点数据格式、投影矩阵、视频动态纹理信 息和着色器程序；视频模型生成模块与服务器端非同步、离线地生成视频模型文件，最后将 生成的视频模型供GIS服务模块的调用；

视频直播模块：接收监控摄像头采集的实时监控视频图像或本地视频图像，并将其处理 并存储；当客户端虚实融合模块绘制视频模型的时候向视频直播模块请求对应的视频图像作 为动态纹理时，视频直播模块将对应的视频图像向客户端虚实融合模块转发，供其使用；若 虚实融合模块请求的是本地视频，视频直播模块直接转发本地视频；若虚实融合模块请求的 是实时监控视频流，视频直播模块使用RTMP协议接受网络监控摄像头的实时推流，并对实 时视频流进行转码、分片处理，最终生成m3u8格式的视频配置文件和ts格式的视频分片文 件，最后通过HTTP协议推送到客户端浏览器供虚实融合模块使用；

GIS服务模块：提供和管理整个虚实融合场景数据，所述虚实融合场景数据包括视频模 型生成模块生成的视频模型，虚实融合场景中的三维建筑模型，所述三维建筑模型由真实建 筑建模生成，以及整个场景的环境，当客户端浏览器发出访问的HTTP请求，GIS服务模块 负责向虚实融合系统传输所需的视频模型和三维建筑模型；同时还向客户端浏览器提供一个 地理信息系统(Geographic Information System，GIS)作为虚实融合场景的载体和环境，视 频模型和建筑模型通过真实世界地理坐标系即经纬度坐标定位在数字地球上，实现了整个场 景和各个模型精确的相对位置，所述地理信息系统是一个三维数字地球，带有地形信息和卫 星底图，实现整个场景环境的真实再现；

虚实融合模块：读取视频模型文件，调用WebGL接口实现视频模型的渲染，并使用HTML5的Tag标签向视频直播模块请求该视频模型对应的视频流数据，数据通过HTTP协 议传输，最终得到分片的实时视频流数据；将实时视频流数据作为纹理，使用纹理投影的方式渲染、绘制，得到带有视频动态纹理的视频模型虚实融合效果；

场景操纵器模块：为用户提供在客户端Web界面上的一系列交互操作，使得用户能够 在三维增强虚拟环境中自由浏览，包括虚拟场景漫游、场景信息显示、视频纹理控制和VR 模式这四类功能，可以让用户对于增强虚拟场景有更好的体验感与沉浸感；所述的虚拟场景 漫游功能可让用户选择访问预先设定好的重要场景节点，或沿预定路线进行场景自动漫游； 所述的场景信息显示功能可在用户点击选中对应的建筑模型或视频模型来获取对该模型详 细信息的介绍；所述的视频纹理控制功能允许用户对场景内的视频模型进行操作、控制，使 得用户能够对感兴趣的视频进行操作，所述操作包括暂停、播放、回放、快进、同步操作； 所述的VR模式功能可让用户在使用VR设备浏览客户端Web时获得VR显示效果。

本发明的一种基于WebGL的实时虚实融合直播方法，实现步骤如下：

(1)当视频模型生成步骤：获得实时监控视频图像或本地视频图像输入时，使用单幅 照片建模技术将监控画面生成视频模型顶点数据，同时记录下相机参数信息，最后将上述数 据汇总生成二进制格式文件存储；使用相机参数信息计算出视频模型的纹理投影变换矩阵及 观看该视频模型的最佳视点位姿，将得到的数据汇总并转换为JSON格式描述的glTF文件， 包括原二进制文件内容和WebGL渲染参数，将得到的结果提供给GIS服务步骤调用；

(2)视频直播步骤：接收客户端虚实融合步骤绘制视频模型的时候申请对应视频图像 作为动态纹理的请求，若虚实融合步骤请求的是本地视频，视频直播步骤直接转发本地视频； 若虚实融合步骤请求的是实时监控视频流，视频直播步骤使用RTMP协议实时接受网络监控 摄像头的实时推流，并对实时视频流进行转码、分片处理，最终生成m3u8格式的视频配置 文件和ts格式的视频分片文件，最后通过HTTP协议推送到客户端浏览器供虚实融合步骤使 用；

(3)GIS服务步骤：接收视频模型生成步骤提供的视频模型文件，将其转发给虚实融 合步骤使用；存储建模生成的建筑模型，并在接收到客户端请求的时候转发建筑模型供客户 端虚实融合步骤调用；接收客户端浏览器发出访问的HTTP请求，根据请求向客户端浏览器 提供一个地理信息系统(Geographic Information System，GIS)作为整个虚实融合场景的载 体，GIS服务器提供的地理信息系统是一个三维数字地球，三维数字地球包含地形信息和卫 星底图，GIS服务步骤将三维数字地球和视频模型、建筑模型的经纬度坐标发送给虚实融合 步骤，用于实现整个场景和各个模型精确的相对位置；

(4)虚实融合步骤：读取视频模型文件后调用WebGL接口实现视频模型的渲染，并使 用HTML5的Tag标签向视频直播步骤请求该视频模型对应的视频流数据，数据通过HTTP协议传输，最终得到分片的实时视频流数据；将实时视频流数据作为纹理，使用纹理投影的方式渲染、绘制，得到带有视频动态纹理的视频模型虚实融合效果；同时虚实融合步骤读取三维建筑模型，调用WebGL接口将建筑模型一并渲染在GIS服务步骤提供的三维数字地球上，实现整个场景的完整渲染绘制；

(5)场景操纵器步骤：接收并解析用户在客户端Web界面上的交互操作，通过改变相 机位姿、显示对应信息和改变渲染模式方法满足用户在虚实融合场景中自由浏览的需求，包 括虚拟场景漫游、场景信息显示、视频纹理控制和VR模式这四类功能，从而为用户提供虚 实融合场景的交互体验。

本发明与现有技术相比的优点在于：

(1)本发明使用单幅照片建模技术直接从原始监控画面重建出视频模型，同时使用纹 理投影的方式实现视频流作为视频模型的动态纹理，解决了当前大部分虚实融合方法虚实对 准代价过高、精确度低的问题，实现了较好的虚实融合效果。

(2)本发明通过调用WebGL和HTML5的接口实现虚实融合，提高了虚实融合方法的效率，降低了该方法对系统资源的需求，并最终在Web端实现了虚实融合系统，提高了虚 实融合系统的跨平台兼容性，有利于该方法更为广泛地传播。

(3)本发明通过搭建流媒体服务器实现视频直播模块，使得系统能够支持并实现多路 实时视频流的存储、转发和投影纹理贴图，保证了整个虚实融合系统的实时性，提高了系统 对不同型号监控相机的兼容性，确保了整个系统的可扩展性。

附图说明

图1为本发明的系统结构示意图；

图2为本发明的glTF文件结构示意图；

图3为视频模型渲染效果示意图；其中(a)为不带纹理的视频模型；(b)为带纹理的视频模 型；(c)为最佳视点下的视频模型；

图4为本发明的流媒体服务器实时视频流直播示意图；

图5为本发明的m3u8文件播放原理示意图；

图6为本发明的纹理投影过程示意图。

具体实施方法

为了更好的理解本发明的技术方案，以下结合附图和实施示例做进一步详细叙述。

本发明提出了一种基于WebGL的实时虚实融合直播系统及方法，如图1所示，本发明 所述的虚实融合直播系统由离线端、服务器端和客户端构成，在离线端部署视频模型生成模 块；在服务器端部署了视频直播模块和GIS服务模块；客户端部署了虚实融合模块以及场景 操纵器模块。

整个实现过程如下：

(1)当视频模型生成模块获得实时监控视频图像或本地视频图像输入时，视频模型生 成模块使用单幅照片建模技术将监控画面生成视频模型顶点数据，同时记录下相机参数信 息，最后将上述数据汇总生成二进制格式文件存储；使用相机参数信息计算出视频模型的纹 理投影变换矩阵及观看该视频模型的最佳视点位姿。将得到的数据汇总并转换为JSON格式 描述的glTF文件，包括原二进制文件内容和WebGL渲染参数。将得到的结果提供给GIS 服务模块调用。

(2)视频直播模块接收客户端虚实融合模块绘制视频模型的时候申请对应视频图像作 为动态纹理的请求，若虚实融合模块请求的是本地视频，视频直播模块直接转发本地视频； 若虚实融合模块请求的是实时监控视频流，视频直播模块使用RTMP协议实时接受网络监控 摄像头的实时推流，并对实时视频流进行转码、分片处理，最终生成m3u8格式的视频配置 文件和ts格式的视频分片文件，最后通过HTTP协议推送到客户端浏览器供虚实融合模块使 用。

(3)GIS服务模块接收视频模型生成模块提供的视频模型文件，将其转发给虚实融合 模块使用；存储建模生成的建筑模型，并在接收到客户端请求的时候转发建筑模型供客户端 虚实融合模块调用；接收客户端浏览器发出访问的HTTP请求，根据请求向客户端浏览器提 供一个地理信息系统(Geographic Information System，GIS)作为整个虚实融合场景的载体。 GIS服务器提供的地理信息系统主要是一个三维数字地球，其包含地形信息和卫星底图。GIS 服务模块将三维数字地球和视频模型、建筑模型的经纬度坐标发送给虚实融合模块，用于实 现整个场景和各个模型精确的相对位置。

(4)虚实融合模块读取视频模型文件后调用WebGL接口实现视频模型的渲染，并使用 HTML5的Tag标签向视频直播模块请求该视频模型对应的视频流数据，数据通过HTTP协议传输，最终得到分片的实时视频流数据；将实时视频流数据作为纹理，使用纹理投影的方式渲染、绘制，得到带有视频动态纹理的视频模型虚实融合效果。同时虚实融合模块读取三维建筑模型，调用WebGL接口将建筑模型一并渲染在GIS服务模块提供的三维数字地球上，实现整个场景的完整渲染绘制。

(5)场景操纵器模块接收并解析用户在客户端Web界面上的交互操作，通过改变相机 位姿、显示对应信息和改变渲染模式等方法满足用户在虚实融合场景中自由浏览的需求，包 括虚拟场景漫游、场景信息显示、视频纹理控制和VR模式这四类主要功能。从而为用户提 供对于本系统的虚实融合场景的交互体验。

上述实现过程具体实施原理及方法如下：

1.离线端视频模型生成模块主要原理及方法如下：

本发明使用的原始三维视频模型文件格式是北京航空航天大学虚拟现实技术与系统国 家重点实验室设计定义的一种三维模型文件格式SIBM，该类型文件使用单幅照片建模技术 生成。SIBM文件格式是二进制文件，存储的是模型的二进制数据，使用者可以对其进行快 速的读写。SIBM文件中包含的信息首先为SIBM文件的版本信息，不同的SIBM版本对应 不同的模型顶点坐标系，可适应不同引擎的渲染坐标系要求，紧接着是4个字节的整数类型 的顶点个数信息，然后是这些顶点的三维坐标信息，坐标的类型是三维浮点向量；之后是三 维模型的相机参数信息，包括相机的位置，视角，焦距等参数；最后是三维模型的初始纹理 图片信息，即图片的二进制流数据。

视频模型生成模块在读入原始SIBM文件数据后将其输出为WebGL引擎能够识别使用 的glTF格式文件。glTF(GL Transmission Format)是由Microsoft与Khronos 3D公司共同推 出的三维模型文件格式。其使用基于JSON的架构描述模型的数据信息，数据结构高效，具 有传输的及时性和解析的高效率等特点。非常符合Web端对于速度和简洁性的要求。

如图2所示，glTF的基本架构大致可以分为四个部分，其中最上层的glTF模块是一个 JSON架构，描述了模型的节点层次，材质，相机，动画等相关逻辑结构；bin模块描述了glTF模块所描述对象的具体顶点数据信息；glsl模块描述了渲染模型的着色器；png、jpg模块描述了模型的纹理图。

获取的相机视频流图像数据是通过投影纹理的方式与三维视频模型融合绘制的。投影纹 理映射目的是用投影的方式映射一张纹理到物体上。该方法不需要在应用程序中指定顶点纹 理坐标，而是在顶点着色程序中通过视点矩阵和投影矩阵计算得到纹理坐标。因此从SIBM 文件中读取的三维模型的顶点坐标需要进行矩阵变换，才能在二维的显示器上正确地显示。

在glTF文件中，通过定义glsl着色器程序以及定义视图变换矩阵和投影矩阵来实现投 影纹理的。其中视图变换矩阵和投影矩阵由SIBM文件中的相机参数计算得到。计算步骤如 下：

[输入]location、forward、up、focus、width、height、近裁剪平面(near)、远裁剪平面(far)

[输出]视图变换矩阵和投影矩阵的4x4矩阵

Step 1：求出forward、side、up基向量和视觉坐标系eye。Location即为视觉坐标系eye， 不需要额外的运算。side和up基向量需要通过计算得出，如下所示：

side＝cross(forward，up)

up＝cross(side，forward)

Step 2：对得到的三个基向量进行标准化。

Step 3：使用side、up、forward基向量构成矩阵R，使用eye构成矩阵T，如下所示：

Step 4：使用矩阵R与矩阵T求出视图变换矩阵，运算方法如下所示：

Step 5：求出left、right、bottom、top参数。

left(l)＝(-ratio)*near/Focus

right(r)＝-left

bottom(b)＝(-near)/Focus

top(t)＝bottom

step 6：求出投影矩阵。

由此得到了WebGL可识别的视频模型文件。该文件的渲染效果如图3所示，其中(a)为 不带纹理的视频模型；(b)为带纹理的视频模型，但由于观察视点与原始监控相机位置不重合 导致视频动态纹理会有一定的扭曲现象；(c)为最佳视点下的视频模型，此时可获得较好的视 觉效果。可以看出，通过视频模型可以实现使用视频作为场景的动态纹理，且在最佳视点处 可得到比较好的虚实融合效果。

视频模型生成模块与服务器端非同步、离线地生成视频模型文件，最后将生成的视频模 型供视频直播模块的调用。所述的视频模型文件由视频模型顶点坐标数据、视频模型相机位 姿信息、初始纹理图片信息以及WebGL渲染信息组成；所述的WebGL渲染信息包括视频模 型顶点数据格式、投影矩阵、视频动态纹理信息和着色器程序。

2.服务器端视频直播模块主要原理及方法如下：

本发明在实现了本地视频作为三维视频模型的基础上进一步实现了网络监控摄像头获 取的实时视频流作为纹理。这样就可以实现在场景的三维视频模型上的实时监控与直播。

实时视频流直播的方法示意如图4所示，流媒体服务器维护一个消息队列来接收浏览器 的数据请求，并向浏览器发送所需视频流数据。如果用户浏览器请求实时视频流，流媒体服 务器会通过专门的模块来从网络摄像头拉取视频流数据，经过统一的编码处理后发送给发出 请求的浏览器。以这种方式，流媒体服务器可以使得虚实融合系统能更好地支持不同类型、 不同编码的相机数据而不涉及具体的相机型号和驱动，这样使得向系统添加新的相机及数据 更为方便，保证了系统的可扩展性。如果用户请求的是本地缓存的视频，流媒体服务器则直 接找到对应的缓存文件并发送给用户浏览器。

其中，本发明使用Nginx服务器作为流媒体服务器用于接受客户端要求。根据用户要求， Nginx流媒体服务器调用FFmpeg从网络监控摄像头获取RTMP协议编码传输的实时视频流 数据。RTMP实时消息传输协议是Adobe Systems公司为Flash播放器与流媒体服务器之间 视音频数据传输而开发的协议，是一种用来进行实时数据通信的网络协议。RTMP的兼容性 较差，实时性较好。所以使用这种协议来上传视频流，也就是视频流推送到Nginx服务器可 以最大限度减少视频获取传输过程中的延迟。

在Nginx流媒体服务器传输到实时虚实融合客户端的过程中，为了满足HTML5对实时 流在移动端的兼容性，本发明使用了HLS协议传输视频流数据。

所谓HLS协议，简单讲就是把整个实时流分成一个个小的，基于HTTP的文件来下载， 每次只下载一些，其中的m3u8文件就是基于HLS协议，存放视频流元数据的文件。每一个m3u8文件，分别对应若干个ts文件，这些ts文件才是真正存放视频的数据，m3u8文 件只是存放了一些ts文件的配置信息和相关路径。如附图5所示，当视频播放时，.m3u8是 动态改变的，video标签会解析这个文件，并找到对应的ts文件来播放。这样就实现了video 标签对实时流的支持，再调用模型渲染绘制模块对实时流进行渲染绘制，从而在桌面端及移动端都实现了实时流作视频模型的动态纹理，实现了实时视频流的直播。

3.服务器端GIS服务模块主要原理及方法如下：

在本发明中，使用地理坐标系即经纬度坐标来描述相机和模型的精确位置，所以使用 GIS服务模块可以帮助更有效地管理这种大型场景。这种基于真实世界坐标的地理系统可以 让场景和真实世界更好地对应起来。

GIS服务模块维护一个消息队列接收客户端浏览器发出访问的HTTP请求，解析对应请 求并向客户端浏览器提供一个地理信息系统(Geographic Information System，GIS)作为整 个虚实融合场景的载体。该地理信息系统主要维护了一个三维数字地球，该三维数字地球带 有地形信息和卫星底图。所述卫星地图总共包含13级精度，最高精度可实现街道级别的底 图显示。虚实融合场景中的视频模型和建筑模型通过地理坐标系定位在数字地球上，实现了 精确的相对位置，可以让用户在虚实融合场景中游览时有如置身在真实的地球环境上，提高 了用户的沉浸感。

4.客户端虚实融合模块主要原理及方法如下：

模型尤其是三维视频模型在渲染过程中使用了HTML5的多媒体新特性以及与WebGL 引擎的对应接口。

HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。于2014年10月制定完成。其设计的初衷就是为了在移动设 备上支持多媒体。

在本发明的虚实融合模块中，由HTML5的<video>标签读取本地或实时视频流数据，并 由用户所用浏览器进行解码存储，将视频流数据分解成一帧帧的图像文件存储于数组中，再 由WebGL引擎对得到的数据进行处理，根据glsl文件定义的投影纹理的方式生成对应的纹 理，最后由一个实时更新的渲染引擎不断对视频模型的纹理进行渲染更新，最终在三维视频 模型上得到了一个不断变化的投影纹理。这样就在三维场景中实现了三维视频模型与视频流 纹理数据的融合绘制与显示。

如图6所示，虚实融合模块得到对应数据后实现虚实融合渲染和绘制的过程主要有4个 阶段：

(1)首先读取相机在真实环境中的位姿信息，将其转换为三维空间中的位姿信息；

(2)然后可用得到的相机位姿信息计算出相机的模型-视图矩阵M_mv和投影矩阵M_p；

(3)之后在对模型做必要的处理，如裁剪相机看不见的模型等，以此来减少计算量加 速融合的过程；

(4)最后使用WebGL接口根据相关渲染参数对视频模型进行渲染加速，在显卡中进行 片元纹理化和色彩化操作，片元经过光栅化操作后最终转换为屏幕上所见到的像素。

由于使用了HTML5作为实现基础，所以本发明不仅能够很好地支持桌面端各类浏览器 的访问与渲染显示，还实现了在移动端的高效传输及显示。

5.场景操纵器模块主要原理及方法如下：

本发明系统在实现三维场景模型与实时视频流数据融合绘制后，由场景操纵器模块提供 在Web界面上的一系列交互操作，使得用户能够在三维增强虚拟环境中自由浏览，包括虚 拟场景漫游、场景信息显示、视频纹理控制和VR模式这四类主要功能。从而让用户对于本 系统的增强虚拟场景有更好的体验感与沉浸感。

(a)虚拟场景漫游：本功能主要是为了让用户能够更加自由地体验三维增强虚拟环境。 首先是用户能够访问预先设置的几个重要的场景节点。在本系统中，模型位置均由地理坐标 系表示，即由经纬度表示。因此，用户可通过下拉菜单栏选择预先设定好的重要场景节点， 获取对应的节点相机经纬度以及高度信息，其中相机姿态角用欧拉角表示。再由对应相机控 制模块根据得到的相机位姿信息控制相机飞行，最终使得用户访问该场景节点。自动场景漫 游原理类似，场景控制器预先存储一系列相机节点位姿参数，当用户点击对应按钮时，相机 即沿该预定路线进行自动漫游。

(b)场景信息显示：在用户游览虚拟场景的时候，还可以通过点击对应的三维建筑模 型或三维视频模型来获取对该模型详细信息的介绍，从而让用户对于场景及模型有更为深刻 的了解。本系统将三维模型的信息存储在MySQL数据库中，然后利用部署在Web服务器上 的PHP脚本页面访问MySQL数据库，查询对应的表格信息，最后将这些表格信息返回给用 户界面，从而实现用户对三维场景中模型信息的查询。其中三维模型信息包括模型编号、模 型名称、修建时间、建筑功能简介、地理位置等信息，三维视频模型信息包括模型编号、模 型名称、视频流来源、相机参数、地理位置等信息。

除了对三维模型信息进行查询外，本系统还支持当前鼠标位置的实际地理信息，包括经 纬度及高度信息。这样使得用户对于当前场景在三维地球中的具体位置有着更为感性的认 识。

(c)视频纹理控制：此功能允许用户对场景内的视频模型进行操作、控制。使得用户 能够对其感兴趣的视频进行操作，包括暂停、播放、回放、快进等操作，从而可以回放过去 时间的视频，还能随时与实际时钟同步，得到当前的实时视频流。此功能结合实时直播模块 可帮助用户对场景更好地监控。

(d)VR模式：通过点击VR模式按钮可进入VR模式，在VR模式中，系统将场景画 面渲染成左右眼两幅画面，两幅画面大体相似，角度略有差异，通过人为模拟左右眼视差角 从而实现VR效果显示。该功能使得本系统在VR设备上体验良好，让用户能够更好地享受 增强虚拟场景，获得更为逼真的效果。

本发明未详细阐述的部分属于本领域的技术人员公知技术。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说， 在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发 明的保护范围。

Claims (2)

1.一种基于WebGL的实时虚实融合直播系统，其特征在于：所述的虚实融合直播系统由离线端、服务器端和客户端构成，在离线端部署视频模型生成模块；在服务器端部署了视频直播模块和GIS服务模块；客户端部署了虚实融合模块以及场景操纵器模块：

视频模型生成模块：读取监控摄像头采集的实时监控视频图像或本地视频图像，使用单幅照片建模技术生成二进制格式描述的文件，所述二进制格式文件包含视频模型顶点坐标数据和相机参数信息；使用其相机参数信息计算出视频模型的纹理投影变换矩阵及观看该视频模型的最佳相机视点位姿，再将得到的该视频模型相关信息结合视频模型WebGL渲染参数转化、存储为客户端浏览器可识别的JSON文件格式的视频模型文件；所述的视频模型文件由视频模型顶点坐标数据、视频模型相机位姿信息、初始纹理图片信息以及WebGL渲染信息组成；所述的WebGL渲染信息包括视频模型顶点数据格式、投影矩阵、视频动态纹理信息和着色器程序；视频模型生成模块与服务器端非同步、离线地生成视频模型文件，最后将生成的视频模型供GIS服务模块的调用；

视频直播模块：接收监控摄像头采集的实时监控视频图像或本地视频图像，并将其处理并存储；当客户端虚实融合模块绘制视频模型的时候向视频直播模块请求对应的视频图像作为动态纹理时，视频直播模块将对应的视频图像向客户端虚实融合模块转发，供其使用；若虚实融合模块请求的是本地视频，视频直播模块直接转发本地视频；若虚实融合模块请求的是实时监控视频流，视频直播模块使用RTMP协议接受网络监控摄像头的实时推流，并对实时视频流进行转码、分片处理，最终生成m3u8格式的视频配置文件和ts格式的视频分片文件，最后通过HTTP协议推送到客户端浏览器供虚实融合模块使用；

GIS服务模块：提供和管理整个虚实融合场景数据，所述虚实融合场景数据包括视频模型生成模块生成的视频模型，虚实融合场景中的三维建筑模型，以及整个场景的环境，所述三维建筑模型由真实建筑建模生成；当客户端浏览器发出访问的HTTP请求，GIS服务模块负责向虚实融合系统传输所需的视频模型和三维建筑模型；同时还向客户端浏览器提供一个地理信息系统(Geographic Information System，GIS)作为虚实融合场景的载体和环境，视频模型和建筑模型通过真实世界地理坐标系即经纬度坐标定位在数字地球上，实现了整个场景和各个模型精确的相对位置，所述地理信息系统是一个三维数字地球，带有地形信息和卫星底图，实现整个场景环境的真实再现；

虚实融合模块：读取视频模型文件，调用WebGL接口实现视频模型的渲染，并使用HTML5的Tag标签向视频直播模块请求该视频模型对应的视频流数据，数据通过HTTP协议传输，最终得到分片的实时视频流数据；将实时视频流数据作为纹理，使用纹理投影的方式渲染、绘制，得到带有视频动态纹理的视频模型虚实融合效果；

场景操纵器模块：为用户提供在客户端Web界面上的一系列交互操作，使得用户能够在三维增强虚拟环境中自由浏览，包括虚拟场景漫游、场景信息显示、视频纹理控制和VR模式这四类功能，可以让用户对于增强虚拟场景有更好的体验感与沉浸感；所述的虚拟场景漫游功能可让用户选择访问预先设定好的重要场景节点，或沿预定路线进行场景自动漫游；所述的场景信息显示功能可在用户点击选中对应的建筑模型或视频模型来获取对该模型详细信息的介绍；所述的视频纹理控制功能允许用户对场景内的视频模型进行操作、控制，使得用户能够对感兴趣的视频进行操作，所述操作包括暂停、播放、回放、快进、同步操作；所述的VR模式功能可让用户在使用VR设备浏览客户端Web时获得VR显示效果。

2.一种基于WebGL的实时虚实融合直播方法，其特征在于：实现步骤如下：

(1)当视频模型生成步骤：获得实时监控视频图像或本地视频图像输入时，使用单幅照片建模技术将监控画面生成视频模型顶点数据，同时记录下相机参数信息，最后将上述数据汇总生成二进制格式文件存储；使用相机参数信息计算出视频模型的纹理投影变换矩阵及观看该视频模型的最佳视点位姿，将得到的数据汇总并转换为JSON格式描述的glTF文件，包括原二进制文件内容和WebGL渲染参数，将得到的结果提供给GIS服务步骤调用；

(2)视频直播步骤：接收客户端虚实融合步骤绘制视频模型的时候申请对应视频图像作为动态纹理的请求，若虚实融合步骤请求的是本地视频，视频直播步骤直接转发本地视频；若虚实融合步骤请求的是实时监控视频流，视频直播步骤使用RTMP协议实时接受网络监控摄像头的实时推流，并对实时视频流进行转码、分片处理，最终生成m3u8格式的视频配置文件和ts格式的视频分片文件，最后通过HTTP协议推送到客户端浏览器供虚实融合步骤使用；

(3)GIS服务步骤：接收视频模型生成步骤提供的视频模型文件，将其转发给虚实融合步骤使用；存储建模生成的建筑模型，并在接收到客户端请求的时候转发建筑模型供客户端虚实融合步骤调用；接收客户端浏览器发出访问的HTTP请求，根据请求向客户端浏览器提供一个地理信息系统(Geographic Information System，GIS)作为整个虚实融合场景的载体，GIS服务器提供的地理信息系统是一个三维数字地球，三维数字地球包含地形信息和卫星底图，GIS服务步骤将三维数字地球和视频模型、建筑模型的经纬度坐标发送给虚实融合步骤，用于实现整个场景和各个模型精确的相对位置；

(4)虚实融合步骤：读取视频模型文件后调用WebGL接口实现视频模型的渲染，并使用HTML5的Tag标签向视频直播步骤请求该视频模型对应的视频流数据，数据通过HTTP协议传输，最终得到分片的实时视频流数据；将实时视频流数据作为纹理，使用纹理投影的方式渲染、绘制，得到带有视频动态纹理的视频模型虚实融合效果；同时虚实融合步骤读取三维建筑模型，调用WebGL接口将建筑模型一并渲染在GIS服务步骤提供的三维数字地球上，实现整个场景的完整渲染绘制；

(5)场景操纵器步骤：接收并解析用户在客户端Web界面上的交互操作，通过改变相机位姿、显示对应信息和改变渲染模式方法满足用户在虚实融合场景中自由浏览的需求，包括虚拟场景漫游、场景信息显示、视频纹理控制和VR模式这四类功能，从而为用户提供虚实融合场景的交互体验。