[发明专利]一种基于Canvas的双目3D网页实现方法及系统

说明书

技术领域

本发明涉及一种视觉技术领域的方法及系统，具体地，涉及一种基于Canvas的双目3D网页实现方法及系统。

背景技术

人眼在观察一个三维物体时，由于左右眼的水平位置不同，看到的物体图像也不尽相同。左右眼看到的图像分别称为左视图和右视图，它们之间的差异称为视差。存在视差的左右视图通过人脑的处理既能使人感知到一个具有景深和层次感的世界。

立体三维电视播放器应用了这一双目视差原理，它能同时显示某一三维场景的两个略有不同的投影视角，并使人的左右眼分别获得左右视图，从而在人脑中融合成立体图像。3D显示器可以兼容播放2D、3D视频内容，但尚未存在一种广泛使用的在3D电视上显示3D网页或网页形式的用户界面的方法。随着互联网访问和网页应用的不断发展，为了使用户在使用3D电视时能够获得一致的3D体验，在3D电视上显示3D网页成为日益迫切的需求。

经检索，中国发明专利“基于浏览器的三维网页实现方法”（中国专利公开号为101067827A），美国的Charles S.Palm申请了专利“3D stereo browser for the internet”（专利号US7190371B2）。上述两个专利均是利用三维图形在2D显示器上显示带有立体感的网页。

中国发明专利“一种基于双目视差原理的3D浏览器实现方法”（中国专利为102184082A），该方法使用层叠样式表CSS来控制3D对象的位置并在3D显示器上显示，适合于编写使用CSS的一般网页。

发明内容

本发明针对现有的双目立体显示终端格式要求，提供一种基于Canvas的双目3D网页实现方法和系统。本发明采用Canvas技术，通过对网页中的不同对象增加深度信息，将网页解析并输出成与立体显示终端兼容的格式，实现双目3D网页的立体呈现。

为实现上述目的，本发明采用了以下技术方案：

本发明基于双目视差原理，在3D显示器上显示，不同之处是使用Canvas来控制3D对象的位置，完成3D网页，解决了在3D显示器上呈现具有立体效果的3D网页的问题。本发明的要点是将用于控制Canvas上元素位置的2D定位属性扩展为3D定位属性，从而得到具有纵深感的立体效果。

根据本发明的一个方面，提供一种基于Canvas的双目3D网页实现方法，包括以下步骤：

A、获取要在Canvas上绘制的元素、即3D对象的定位属性值，将用于在合适的位置绘制3D对象从而呈现所要求的立体效果，其中3D定位属性值包括2D定位属性和新增加的3D深度属性；

B、根据所述的3D定位属性，使用本发明提供的JavaScript库函数编写3D网页；

C、使用支持Canvas的浏览器解析上述3D网页，计算出3D对象在左视帧和右视帧中的不同位置；

D、根据不同的3D传输格式，将左右视帧按不同的方式绘制并在3D显示器上显示出来。

所述步骤A的3D对象包括Canvas支持的全部元素，即线、几何图形、文字、图片和视频等，使用本方法可以实现这些元素的出屏或入屏的立体效果。

所述步骤D的传输格式为半高清3D帧兼容时，要分别进行如下变换：

1）左右拼：则分别将得到的左右视帧进行水平方向上的亚采样，得到宽度减半的左右视帧并绘制到Canvas的左右半部分；

2）上下拼：则分别将得到的左右视帧进行垂直方向上的亚采样，得到高度减半的左右视帧并绘制到Canvas的上下半部分；

3）列交错：则分别将左右视帧进行水平方向上的亚采样，得到宽度减半的左右视帧并绘制到Canvas的奇数和偶数列上；

4）行交错：则分别将左右视帧进行垂直方向上的亚采样，得到高度减半的左右视帧并绘制到Canvas的奇数和偶数行上；

所述步骤D的传输格式为全高清3D帧序列时，则无需变换，左右视帧直接绘制到左右两路对应的Canvas上；

所述步骤D的传输格式为全高清3D帧封装时，则无需变换，左右视帧直接作为左右或上下部分绘制到Canvas上。

根据本发明的一个方面，提供一种用于实现上述方法的系统，该系统包括：