CN102937968A

CN102937968A - 一种基于Canvas的双目3D网页实现方法及***

Info

Publication number: CN102937968A
Application number: CN2012103846874A
Authority: CN
Inventors: 周军; 张少博; 张艳芳
Original assignee: Shanghai Jiaotong University
Current assignee: Shanghai Jiaotong University
Priority date: 2012-10-11
Filing date: 2012-10-11
Publication date: 2013-02-20
Anticipated expiration: 2032-10-11
Also published as: CN102937968B

Abstract

本发明提供了一种基于Canvas的双目3D网页实现方法及***，方法步骤：设计网页效果图，获取3D定位信息；创建3D网页；解析3D网页，得到左右视帧；根据不同的3D传输格式将左右视帧绘制到Canvas上***包括：3D网页解析器；3D传输格式处理器。本发明的要点是将用于控制Canvas上元素位置的2D定位属性扩展为3D定位属性，从而得到具有纵深感的立体效果。3D定位属性由2D定位属性和3D深度属性构成，其中3D深度属性可缺省。本发明通过HTML5中新引入的Canvas元素来实现，具有兼容传统2D浏览器，无缝支持2D网页和3D网页，适于开发3D用户界面、网页游戏等优点。

Description

一种基于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上。

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

1）3D网页解析器，主要由JavaScript函数组成，能够根据3D对象的3D定位属性计算得到3D对象在左右视图中的位置。该JavaScript函数接受要绘制元素的内容、3D定位属性等信息作为参数，判断元素的类型并选择调用不同的Canvas内建函数（drawImage、fillText等），并依据提供3D的定位属性进行绘制，其中左右视图中的水平视差由深度信息参数通过线性对应关系计算得到。

2）3D传输格式处理器，将左右视图按照制定的传输格式提供给浏览器进行Canvas渲染，得到最终的网页。

本发明方法对于已有的网页编程方法进行了扩展，通过对元素增加新的元素属性的定义，针对立体显示器支持的立体显示格式，如左右拼、上下拼、列交错、行交错等格式，使得编写出来的网页通过现有的浏览器即可输出与立体显示器对应的3D网页，最终在3D显示器上实现立体效果。

由于Canvas作为HTML5标准中定义的一种元素，使用方式十分灵活，本发明可被用于多种情况。可以设置Canvas的大小小于3D显示器的大小，可以使得屏幕的一部分呈现3D效果而其余部分是传统的2D网页；可以设置Canvas大小等于3D显示器的大小，此种情况适用于开发3DTV的UI界面、3D网页游戏等；可以设置Canvas大于3D显示器的大小，从而呈现内容较多、页面较大的3D网页；亦可以在多个画布上应用本发明，从而达到简化编程、提高运行效率的作用。

与现有技术相比，本发明具有如下的有益效果：1）易于创建网页或网页形式的用户界面；2）兼容传统2D浏览器；3）无缝支持2D网页和3D网页；4）适于开发3D网页游戏等。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：

图1是双目视差原理产生立体效果的示意图。

图2是本发明的***架构图。

图3是本发明的基本流程。

图4是本发明如何将左右视图进行水平方向亚采样生成左右拼格式的示意图。

具体实施方式

下面结合具体实施例对本发明进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本发明，但不以任何形式限制本发明。应当指出的是，对本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进。这些都属于本发明的保护范围。

图1示出了产生左右不同的视图，从而产生立体效果的双目视差原理。

图2为本发明实现***架构图，由3D网页解析器和3D传输格式处理器组成，其中3D网页解析器主要由实施例中所述的JavaScript函数组成，能够根据3D对象的3D定位属性计算得到3D对象在左右视图中的位置。

图3是按照本发明进行3D网页编写及显示的流程图，由设计网页效果、获取3D定位信息、创建3D网页、解析3D网页和根据传输模式绘制5个步骤组成。

图4为将左右视图进行水平方向亚采样、宽度减半从而生成左右拼格式的示意图。

下面以左右拼方式绘制一个具有深度信息的图片为例，结合图2、图3和图4对本发明的具体实现方式和基本步骤做如下详细描述。其中设3D电视的分辨率为1920x1080，大小为42英寸，根据业界标准计算得到在保证舒适度的情况下左右视图最大视差为107像素。为了编写方便及通用性，本发明将正负视差线性对应到[-10，10]的深度取值中。负视差对应于出屏显示效果，正视差对应于入屏显示效果。

1.设计网页效果图

可以采用3D计算机图形软件如Autodesk Maya等对于网页进行3D建模，调整深度及舒适性。本例为了简明的介绍，并未使用建模软件，简单的将要绘制的图片的深度属性值设为-2，即出屏2个深度单位。

2.获取3D定位信息

本发明的要点是将Canvas中元素的2D定位属性扩展为3D定位属性，从而呈现具有景深和层次感的3D网页。3D定位属性由如下集合构成：

3D定位属性={2D定位属性，3D深度属性}，其中：

2D定位属性=HTML5标准中Canvas上各个元素的定位属性；

3D深度属性=元素的深度值，取值范围为[-10，10]，10表示元素处于屏幕后的最大位置，-10表示元素处于屏幕前的最大值。

3D定位属性及相关说明见下表1：

上表中的dx、dy、dw、dh等2D定位属性为绘制矩形、图像、视频及文字时的2D定位信息，绘制其他形状和线条时略有不同，但仍可以通过加入depth属性的方式实现3D效果。

3.创建3D网页

和传统的2D网页不同，调用本发明中包含的JavaScript库函数来完成绘制，要在（200，100）位置绘制大小为300x400，出屏两个深度单位的图片，JavaScript代码如下：

其中CSBS.drawSBS为本发明提供的函数。该函数接受要绘制元素的内容、3D定位属性等信息作为参数，判断元素的类型并选择调用不同的Canvas内建函数（drawImage、fillText等），并依据提供的3D定位属性参数进行绘制，是进行解析和绘制操作的主体。其中左右视图中的水平视差由深度信息参数通过上文所述的线性对应关系计算得到。3D网页编写完成后，保存在网络上或者本地硬盘中。

4.解析3D网页

这一步骤主要由JavaScript库函数完成，上一步骤中的代码解析的最终结果如下：

this.bufferContext.drawImage(img,dx/2+c*depth,dy,dw/2,dh);

this.bufferContext.drawImage(img,width/2+dx/2-c*depth,dy,dw/2,dh);

其中width为画布的宽度，c为深度和视差之间换算的一个确定系数。在这里图像的高度和垂直位置不变，宽度减半，水平位置由原水平位置和深度属性共同计算得到。在这一步中同时完成了水平方向上的亚采样及按照左右拼方式在Canvas上绘制。

5.根据3D传输模式，在Canvas上绘制

这一步骤通常和上一步由同一代码块同时完成，实现方式因3D传输模式不同略有差异，具体如下：

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

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

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

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

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

按上述步骤编写网页并在3D电视上显示，即可得到具有层次感的3D网页。

本发明是实现双目3D网页（包含网页形式的3D图形用户界面、游戏等应用）的一种方法和***，它通过HTML5中新引入的画布（Canvas）元素来实现。通过使用这种方法编写的网页，只需在现有的2D浏览器进行解析，即可在3D电视上呈现具有景深和层次感的立体化网页。本发明的最大特点是，可以直接在现有浏览器上显示3D网页，继承了Canvas的优点，即适合编写3D用户界面、网页游戏等。

以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变形或修改，这并不影响本发明的实质内容。

Claims

1.一种基于Canvas的双目3D网页实现方法，其特征在于，包括以下步骤：

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

B、根据所述的3D定位属性，使用JavaScript库函数接口编写3D网页；

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

2.根据权利要求1所述的基于Canvas的双目3D网页实现方法，其特征在于：所述步骤A的3D对象包括Canvas支持的全部元素，即线、几何图形、文字、图片和视频。

3.根据权利要求1所述的基于Canvas的双目3D网页实现方法，其特征在于：所述步骤D的传输格式为半高清3D帧兼容时，要分别进行如下变换：

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

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

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

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

4.根据权利要求1所述的基于Canvas的双目3D网页实现方法，其特征在于：所述步骤D的传输格式为全高清3D帧序列时，则无需变换，左右视帧直接绘制到左右两路对应的Canvas上。

5.根据权利要求1所述的基于Canvas的双目3D网页实现方法，其特征在于：所述步骤D的传输格式为全高清3D帧封装时，则无需变换，左右视帧直接作为左右或上下部分绘制到Canvas上。

6.根据权利要求1-5任一项所述的基于Canvas的双目3D网页实现方法，其特征在于：所述步骤B和步骤C中JavaScript库函数，该函数接受要绘制元素的内容、3D定位属性信息作为参数，判断元素的类型并选择调用不同的Canvas内建函数，并依据提供3D定位属性进行绘制，其中左右视图中的水平视差由深度信息参数通过线性对应关系计算得到。

7.一种用于实现权利要求1所述方法的***，其特征在于：该***包括：

3D网页解析器，主要由一系列JavaScript函数组成，能够根据3D对象的3D定位属性计算得到3D对象在左右视图中的位置；

3D传输格式处理器，将左右视图按照制定的传输格式绘制到最终的Canvas上。

8.根据权利要求7所述的***，其特征在于:所述JavaScript函数接受要绘制元素的内容、3D定位属性信息作为参数，判断元素的类型并选择调用不同的Canvas内建函数，并依据提供3D的定位属性进行绘制，其中左右视图中的水平视差由深度信息参数通过线性对应关系计算得到。