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

权利要求书

1.一种基于WebGL的多媒体与三维场景融合的方法，其特征在于，包括以下步骤：

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

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

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

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

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

2.根据权利要求1所述的基于WebGL的多媒体与三维场景融合的方法，其特征在于，步骤S1中，所述多媒体源包括文字、图形、图片、视频中的任意一种或多种；

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

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

3.根据权利要求1所述的基于WebGL的多媒体与三维场景融合的方法，其特征在于，步骤S2中，建立所述虚拟相机模型时，采用正交相机或透视相机，并根据所述多媒体显示的类型、位置和大小调整虚拟相机参数，所述虚拟相机参数包括相机位置、相机视线、上方向以及视景体。

4.根据权利要求1所述的基于WebGL的多媒体与三维场景融合的方法，其特征在于，步骤S4中，获取所述深度纹理时，将三维场景中虚拟相机模型上点在剪裁空间中的深度值作为片元颜色值，并将深度值的浮点数转化为RGBA整形颜色值。

5.根据权利要求1-4中任意一项所述的基于WebGL的多媒体与三维场景融合的方法，其特征在于，步骤S5中，进行正常渲染时，分别渲染场景中不透明物体和半透明物体，获得不透明物体的渲染结果一与半透明物体的渲染结果二，然后将所述渲染结果一和所述渲染结果二进行混合，获得所述多媒体与三维场景的融合结果。

6.根据权利要求5所述的基于WebGL的多媒体与三维场景融合的方法，其特征在于，不透明物体和半透明物体的渲染步骤相同，均包括以下子步骤：

S51：在正常渲染的顶点着色器中，计算顶点在每一个虚拟相机时的剪裁空间中的坐标；

S52：将所述剪裁空间中的坐标换算为标准设备空间中的点；

S53：以所述标准设备空间中的点的换算结果判断所述顶点是否在剪裁空间中，若不在，则不处理；若在，则进入步骤S54；

S54：将处于剪裁空间中的顶点与所述深度纹理数组中的深度值进行比较，判断所述处于剪裁空间中的顶点是否可见，若不可见，则不处理；若可见，则从所述多媒体纹理数组中获取片元的颜色值，进入步骤S55；

S55：对多个多媒体颜色值和正常颜色进行混合，将渲染结果保持到颜色缓冲区中；

通过步骤S51-S55，获得不透明物体的渲染结果一和半透明物体的渲染结果二。

7.根据权利要求6所述的基于WebGL的多媒体与三维场景融合的方法，其特征在于，步骤S51中，顶点在每一个虚拟相机时的剪裁空间中的坐标通过下式进行计算：投影视图矩阵*模型矩阵*顶点坐标。

8.根据权利要求6所述的基于WebGL的多媒体与三维场景融合的方法，其特征在于，步骤S52中，换算的公式为：position.xyz/position.w；式中，position.xyz为坐标的x,y,z分量，position.w为坐标的w分量；

标准设备空间(x,y,z)的范围为[-1,1]，在此范围内的点则处于剪裁空间中，不在此范围内的点则不处于剪裁空间中。