[发明专利]一种基于WebGL的多媒体与三维场景融合的方法和系统

说明书

本发明公开了一种基于WebGL的多媒体与三维场景融合的方法和系统，所述方法包括以下步骤：S1：对多媒体源进行处理，使其在浏览器渲染时转化为图片，以所述图片作为纹理，获得多媒体纹理；S2：建立与多媒体匹配的虚拟相机模型；S3：计算所述虚拟相机模型中每一个虚拟相机的投影矩阵和视图矩阵，获得投影视图矩阵；S4：定义WebGL的片元着色器，将每个片元的深度值作为片元颜色值，获得深度纹理；S5：将所述多媒体纹理、投影视图矩阵以及深度纹理拼接为数组，以所述数组作为渲染场景时的着色器uniform变量，然后进行正常渲染获得多媒体与三维场景的融合结果。本发明能够让三维模型和真实多媒体进行融合，解决三维虚拟场景与真实场景融合的技术问题。

技术领域

本发明涉及视频融合技术领域，特别涉及一种基于WebGL的多媒体与三维场景融合的方法和系统。

背景技术

多媒体通常以采用独立的播放器进行展示，无法与播放内容所处的背景关联。这种展示方式在诸如在线视频监控系统中，会给使用者带来很多问题：1)画面孤立，无法全局预览；2)画面分散，无法确定空间位置；3)屏幕制约，同时观察画面有限；4)跨镜头追踪困难，无法建立时空关联。

现有技术基于WebGL的三维可视化场景中，可以将文字、图形、图片、视频作为三维模型的纹理，通过纹理贴图方式进行融合展示。然而，该技术中所使用的的纹理贴图通常是在三维模型制作过程中预先定义的，不能随意改变。而将一个多媒体源作为纹理贴图分散在多个模型上进行展示时，三维模型的制作过程将变得非常复杂。在视频监控等场景中，用户希望展示的视频可以随着云台的转动、焦距的调整进行动态改变，如此就不得不对每一个状态进行建模，这种实施方式的人力成本、时间成本非常大。

发明内容

针对上述问题，本发明旨在提供一种基于WebGL的多媒体与三维场景融合的方法和系统，让三维模型和多媒体进行融合，解决三维虚拟场景与真实场景融合的问题。

本发明的技术方案如下：

一方面，提供一种基于WebGL的多媒体与三维场景融合的方法，包括以下步骤：

S1：对多媒体源进行处理，使其在浏览器渲染时转化为图片，以所述图片作为纹理，获得多媒体纹理；

S2：根据多媒体显示的类型、位置和大小，建立与所述多媒体匹配的虚拟相机模型；

S3：计算所述虚拟相机模型中每一个虚拟相机的投影矩阵和视图矩阵，并根据所述投影矩阵和视图矩阵获得投影视图矩阵；

S4：定义WebGL的片元着色器，将每个片元的深度值作为片元颜色值，然后进行场景渲染，将渲染的结果保存在颜色缓冲中，获得深度纹理；

S5：将所述多媒体纹理、投影视图矩阵以及深度纹理拼接为数组，以所述数组作为渲染场景时的着色器uniform变量，然后进行正常渲染获得多媒体与三维场景的融合结果。

作为优选，步骤S1中，所述多媒体源包括文字、图形、图片、视频中的任意一种或多种；

将文字或图形绘制在HTMLCanvasElement上，并将Canvas以图片格式输出，获得文字或图形对应的多媒体纹理；

将视频绘制在HTMLVideoElement上，在浏览器渲染时，获取视频的帧画面，所述帧画面即为视频对应的多媒体纹理。

作为优选，步骤S2中，建立所述虚拟相机模型时，采用正交相机或透视相机，并根据所述多媒体显示的类型、位置和大小调整虚拟相机参数，所述虚拟相机参数包括相机位置、相机视线、上方向以及视景体。

作为优选，步骤S4中，获取所述深度纹理时，将三维场景中虚拟相机模型上点在剪裁空间中的深度值作为片元颜色值，并将深度值的浮点数转化为RGBA整形颜色值。