一种基于双目视差原理的3D浏览器实现方法

摘要

本发明涉及一种基于双目视差原理的3D浏览器实现方法，它使3D电视上所显示的3D网页和3D视频一样呈现立体感和深度感。本发明的要点是将用于控制浏览器外观的层叠样式表CSS中的2D定位属性扩展为3D定位属性，用于控制呈现纵深感的3D网页的外观。3D定位属性由2D定位属性和3D专用定位属性构成，3D专用定位属性可缺省。本发明总体可概括为以下步骤：1）绘制3D左右视帧；2）获取3D定位信息；3）创建3D网页；4）解析3D网页；5）渲染3D网页的左右视帧；6）处理3D传输格式。本发明具有对现存的2D网页进行修改即可成为3D网页，兼容传统的2D浏览器，具有无缝支持2D网页和3D网页等优点。

权利要求

1.一种基于双目视差原理的3D浏览器实现方法，包括制作3D对象左右视图，其特征在于：之后有以下五个步骤：A、获取3D对象定位属性值，将用于控制网页外观的层叠样式表CSS中的2D定位属性扩展为3D定位属性，其中3D定位属性包含2D/3D定位属性和增加的3D专用定位属性；

B、根据所述的3D定位属性创建3D网页；

C、在浏览器的3D网页解析器中对上述的3D定位属性进行相应解析，计算出在渲染时所需的3D定位信息；

D、在内存中分配相应的左右离屏缓冲区，将解析后的3D定位信息在左右离屏缓冲区渲染出左视帧和右视帧；

E、根据不同的3D传输格式，将左右离屏缓冲区的信息映射到视频缓冲区并在3D显示器上显示出来，具体如下：a.当传输格式为半高清3D帧兼容时，要分别进行如下变换：

1）左右拼：则分别将左右离屏缓冲区的奇数和偶数列映射到视频缓冲区的左右半部；

2）上下拼：则分别将左右离屏缓冲区的奇数和偶数行映射到视频缓冲区的上下半部；

3）列交错：则分别将左右离屏缓冲区的奇数和偶数列映射到视频缓冲区中；

4）行交错：则分别将左右离屏缓冲区的奇数和偶数行映射到视频缓冲区中。

b.当传输格式为全高清3D帧序列时，则无需变换，左右离屏缓冲区直接作为左右两路的视频缓冲区；

c.当传输格式为全高清3D帧封装时，则无需变换，左右离屏缓冲区直接对应视频缓冲区中封装帧的左右或上下部分。

说明书

一种基于双目视差原理的3D浏览器实现方法

技术领域

[0001] 本发明涉及计算机科学技术领域，特别是涉及一种3D浏览器（3D Browser），它基于双目视差原理，在各种（快门、偏振、裸眼等）方式的3D电视上所显示的3D网页（包含网页形式的3D图形用户界面），和3D视频一样呈现具有景深和层次感的立体世界。其中的3D网页可以是放在万维网（World Wide Web）的某个网站上，也可以是常驻本地的文件。

背景技术

[0002] 人类的眼睛在观察一个三维物体时，由于双眼水平分开在两个不同的位置上，所看到的物体图像是不同的。左右眼看到的图像分别称其为左视图和右视图，它们之间存在着一个视差。由于视差的存在，通过人类的大脑，可以感受到一个具有景深和层次感的3D世界，这就是双目视差原理。根据这一原理，如果能够让人的双眼分别看到两幅不同视觉角度的视图，就可以感受到一个具有景深和层次感的3D视图。

[0003] 3D电视就是依据双目视差原理而设计的，它给人们的视频生活带来了全新的立体感受。相对于传统的2D显示器而言，3D显示器可兼容播放2D、3D视频内容，但尚未有一种供3D显示器显示的3D网页或网页方式的用户界面。随之所产生的问题是：1）2D网页与3D视频叠加后再切换成3D显示时，呈现的是紊乱的画面；2）如果先切换成3D显示后再与2D网页叠加的话，呈现的是2D和3D混合的不和谐的效果。随着互联网访问和网页方式用户界面的迅速增长，在3D电视上显示3D网页就成为新的需求。

[0004] 迄今为止，上海创图网络科技公司申请了发明专利“基于浏览器的三维网页实现方法”，该方法是在2D显示器上用浏览器显示带有立体感的三维网页。此外，美国的Charles S. Palm申请了专利“3D stereo browser for the internet”，该专利是一种在2D显示器上显示带有立体感网页的3D浏览器。这两个专利的技术基础是三维图形，共同点是在2D显示器上显示。

发明内容

[0005] 本申请的技术基础是双目视差原理，不同之处是在3D显示器上显示。

[0006] 本发明所述的3D浏览器，包括桌面（Desktop）3D浏览器和嵌入式（Embedded）3D浏览器，它涵盖遵循W3C规范的各种浏览器和增加各种私有功能的浏览器，还可向后兼容，即兼容传统的2D浏览器。

[0007] 为了解决在3D显示器上显示3D网页的问题，本发明提供了一种基于双目视差原理的3D浏览器的实现方法，该方法可对传统的2D浏览器进行扩展，使之成为呈现景深和层次感的3D浏览器。它具有如下优越性：1）网页或网页方式的图形用户界面制作容易；2）无需编译就可以用浏览器察看网页或或网页方式的图形用户界面的显示效果；3）可对已有的2D网页进行改造使之成为3D网页；4）可无缝支持2D网页和3D网页；5）同时可用于访问互联网等。

[0008] 本发明所述的基于双目视差原理的3D浏览器系统架构包含以下3个部分：

[0009] 1）3D网页解析器（3D Webpage Parser），由2个子模块即HTML解析器（HTML Parser）和CSS解析器（CSS Parser）构成。其中3D网页可通过HTTP协议（http://）从网站下载，也可通过文件访问方式（file://）从本地读取。

[0010] 2）3D渲 染 引 擎（3D Rendering Engine），该 引 擎 对 左 离 频 缓 冲 区（OffScreenBuffer-L）和右离频缓冲区（OffScreenBuffer-R）进行操作。

[0011] 3）3D传输格式处理器（3D Transmission Format Processor），将左右离屏缓冲区的内容经过3D传输格式处理后放入视频缓冲区（ScreenBuffer）。视频缓冲区的内容能有效和高速地反映在显示屏上。

[0012] 本发明所述的3D浏览器实现方法，包括绘制3D对象左右视图，之后有以下五个步骤：

[0013] a、 获取3D对象定位属性值，将用于控制网页外观的层叠样式表CSS中的2D定位属性扩展为3D定位属性，其中3D定位属性包含2D/3D定位属性和增加的3D专用定位属性；

[0014] b、根据所述的3D定位属性创建3D网页；

[0015] c、 在浏览器的3D网页解析器中对上述的3D定位属性进行相应解析，计算出在渲染时所需的3D定位信息；

[0016] d、在内存中分配相应的左右离屏缓冲区，将解析后的3D定位信息在左右离屏缓冲区渲染出左视帧和右视帧；

[0017] e、 根据不同的3D传输格式，将左右离屏缓冲区的信息映射到视频缓冲区并在3D显示器上显示出来。

[0018] 所述步骤e的3D传输格式按照分辨率可分为全高清（Full HD）3D和半高清（Half HD）3D。全高清3D要传输完整的左、右两路视帧，其帧率增加一倍，有帧序列（Frame sequential）和帧封装（Frame packing）两种方式。而半高清3D又称其为帧兼容（Frame compatible）方式，即将左、右视帧各压缩一半后再打包进同一帧，其帧率不变（与现有的高清电视的帧率兼容），有左右拼（Side by side）、上下拼（Top and bottom）、列交错（Column Interleaving）和行交错（Row Interleaving）四种格式。其中，左右拼：是左右半部对应于左右视帧；上下拼：是上下半部对应于左右视帧；列交错：是奇偶列对应于左右视帧；行交错：是奇偶行对应于左右视帧。

[0019] 所述步骤e的传输格式为全高清3D帧序列时，则无需变换，左右离屏缓冲区直接作为左右两路的视频缓冲区。所述步骤e的传输格式为全高清3D帧封装时，则无需变换，左右离屏缓冲区直接对应视频缓冲区中封装帧的左右或上下部分。

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

[0021] 1）左右拼：则分别将左右离屏缓冲区的奇数和偶数列映射到视频缓冲区的左右半部；

[0022] 2）上下拼：则分别将左右离屏缓冲区的奇数和偶数行映射到视频缓冲区的上下半部；

[0023] 3）列交错：则分别将左右离屏缓冲区的奇数和偶数列映射到视频缓冲区中；

[0024] 4）行交错：则分别将左右离屏缓冲区的奇数和偶数行映射到视频缓冲区中。

[0025] 本发明采用这种实现方法具有如下优点：1）网页方式的图形用户界面制作容易；2）无需编译就可以看到网页的显示效果；3）对已有的2D网页进行修改即可成为3D网页，在3D电视上显示3D图形用户界面；4）可无缝支持传统的2D网页和具有景深和层次感的
3D网页；5）同时可用于访问互联网等。

附图说明

[0026] 图1是由于双目视差而产生左右眼不同视图的示意图。

[0027] 图2是本发明的3D浏览器的系统架构图。

[0028] 图3是本发明的基本流程。

[0029] 图4是本发明如何将左右视帧形成一个左右拼视帧的示意图。

具体实施方式

[0030] 图1示出了由于双目视差而产生左右眼不同视图，左右眼视图分别称其为左右视帧（view frame）。左右视帧中的对象物体与景深有关，称其为深度（Depth）。

[0031] 图2示出了本发明的3D浏览器的系统架构图，由3D网页解析器200、3D渲染引擎210和3D传输格式处理器220这3个模块组成。3D网页解析器200包括HTML解析器201和CSS解析器202构成。

[0032] 图3是本发明的流程图，其中图的左半部是创建3D网页的流程，右半部是3D浏览器解析、渲染和处理3D传输格式的流程。

[0033] 图4示出了存储在操作系统内存中的左视帧和右视祯形成左右拼视祯的过程。

[0034] 下面以3D菜单图标为例，结合图2、图3和图4对本发明的具体实现方式及其基本步骤做如下详细叙述。其中设3D电视的分辨率是1080P，因此左右视帧、左右离屏缓冲区400和410（OffScreenBuffer-L/R）以及视频缓冲区（ScreenBuffer）的大小均为1920×1080。左右离屏缓冲区400和410可通过调用操作系统的内存分配功能来生成。而视频缓冲区可对应于操作系统的相应部分，如Linux操作系统的帧缓冲区（FrameBuffer）。

[0035] 1.制作3D对象左右视图300

[0036] 为了避免复杂的3D视图建模，采用3D计算机图形软件Autodesk Maya（或其它3D图形软件）来制作3D左右视图。其中，双目视距设定为国际平均值6.35厘米（根据需要可进行微调）。针对3D菜单图标在3D网页中布局的需求，用Maya建立其3D模型图，调整深度并生成带层次和深度感的左右视图。如果要使3D菜单图标呈现凸出或凹进显示器平面的特殊效果，凸出的3D菜单图标要在0.5到1倍深度之间；凹进的3D菜单图标在1到1.5倍深度之间。其它详细操作请参考Maya用户手册。左右视图制作完毕后，保存为相应的左右视图文件。在以下的步骤中，双目视距以及深度信息不再需要。

[0037] 2.获取3D对象定位属性值310

[0038] 网页描述语言是W3C制定的超文本置标语言HTML和层叠样式表CSS、以及ECMA制定的JavaScript，其中的CSS用于控制网页的外观。本发明的要点是将CSS的2D定位属性扩展为2D/3D定位属性并增加3D专有属性，用于呈现景深和层次感的3D网页的外观。3D定位属性由如下集合构成：

[0039] 3D定位属性 = {2D/3D定位属性，3D专用定位属性}，其中：

[0040] 2D/3D定位属性 = 传统的CSS定位属性；

[0041] 3D专用定位属性 = {view-frame}。

[0042] 3D专用定位属性view-frame（视帧）用于表示该对象与左视帧或右视帧相关的信息。3D专用定位属性可缺省，缺省意味着3D浏览器与传统的2D浏览器兼容。

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

[0044]

[0045] 针对步骤1中绘制的3D左右视图，为了避免复杂的3D定位信息计算，采用图形编辑软件Adobe Photoshop（或其它图形软件）分别打开左右视图文件，并将其中的菜单图标进行切图，读取top, left, bottom，right和view-frame的定位属性值。

[0046] 用Photoshop获取的菜单图标的3D定位属性值见下表2：

[0047]

[0048] 3.创建3D网页320

[0049] 和传统的2D网页不同，3D网页要分别对左右视帧加以表述。用HTML语言描述3D网页中的每个对象，用CSS语言描述每个对象的3D定位属性。上表2所示的3D定位属性，其3D左右视帧的HTML和CSS的代码如下：

[0050]

[0051]

[0052]

[0053]

[0054] .leftMenuClass {

[0055] position: absolute;

[0056] top: 814px; left: 363px; bottom: 956px; right: 628px;

[0057] view-frame: left;

[0058] }

[0059] .rightMenuClass {

[0060] position: absolute;

[0061] top: 814px; left: 339px; bottom: 956px; right: 604px;

[0062] view-frame: right;

[0063] }

[0064] 3D网页创建好后，按照标准的网页文件方式保存在网站上、或者是外存中。

[0065] 4.在3D网页解析器200中解析3D网页330

[0066] 通过HTTP协议（http://）从网站下载、或通过文件访问方式（file://）从本地读取该3D网页。

[0067] 3D浏览器在解析网页时，如果网页中的对象存在3D定位属性，则对其进行相应的处理，得出该3D对象在渲染时所需的3D定位信息。3D属性的解析方法，是传统的2D浏览器解析方法的扩展。3D网页的解析步骤是：1）在HTML解析器201中根据HTML的嵌套关系，生成树形结构的DOM树；2）通过CSS解析器202（CSS parser）解析出CSS的属性值。如果存在3D专用定位属性view-frame，则进行相应的解析；3）将解析完毕的DOM树交付给
3D渲染引擎210。菜单图标网页中CSS部分解析后生成的CSSStyleSheet如下:

[0068] (CSSStyleSheet

[0069] (CSSRule

[0070] (Selectors (.leftMenuClass))

[0071] (Declaration (position absolute) (top 814px) (left 363px)

[0072] (bottom 956px) (right 628px) (view-frame left))

[0073] )

[0074] (CSSRule

[0075] (Selectors (.rightMenuClass))

[0076] (Declaration (position absolute) (top 814px) (left 339px)

[0077] (bottom 956px) (right 604px) (view-frame right))

[0078] )

[0079] )

[0080] 5.3D渲染引擎210渲染3D网页的左视帧340和右视帧350

[0081] 渲染3D网页的步骤是：

[0082] 1）按照CSSStyleSheet中CSS规则进行左右视页面布局（Layout）。例如，根据左视帧菜单图标对应的leftMenuClass的CSSRule，将其布局在左视（left）页面中起点坐标为（814, 363）的位置上、长宽为（956, 628）。类似地，对右视帧菜单图标进行相应的页面布局。

[0083] 2）左右视页面布局好后，调用系统的描画（Painting）机制，分别在左离频缓冲区400（OffScreenBuffer-L）和右离频缓冲区410（OffScreenBuffer-R）中描画出相应的3D页面。

[0084] 6.3D传输格式处理器220处理3D传输格式360

[0085] 左右离屏缓冲区400和410的内容经过3D传输格式处理器220进行3D传输格式处理后放入视频缓冲区（ScreenBuffer）。视频缓冲区的内容能有效和高速地显示在3D显示器上。

[0086] 根据3D电视的3D传输格式，分别进行如下变换：

[0087] 传输格式为全高清3D帧序列时，则左离频缓冲区和右离频缓冲区的数据即为左右两路的内容。传输格式为全高清3D帧封装时，则左离频缓冲区和右离频缓冲区的数据直接对应于帧封装帧的左右或上下部分的内容。

[0088] 传输格式为半高清3D帧兼容方式时：

[0089] 1）若为左右拼，则将左离频缓冲区的奇数列映射到视频缓冲区左侧的960×1080中，右离频缓冲区的偶数列映射到视频缓冲区右侧的960×1080中。

[0090] 2）若为上下拼，则将左离频缓冲区的奇数行映射到视频缓冲区上部的1920×540中，右离频缓冲区的偶数行映射到视频缓冲区下部的1920×540中。

[0091] 3）若为列交错，则将左离频缓冲区的奇数列映射到视频缓冲区作为其奇数列，右离频缓冲区的偶数列映射视频缓冲区作为其偶数列。

[0092] 4）若为行交错，则将左离频缓冲区的奇数行映射到视频缓冲区作为其奇数行，右离频缓冲区的偶数行映射到视频缓冲区作为其偶数行。

[0093] 图4示出了以上第1种情形，左离频缓冲区400的奇数列映射到视频缓冲区左侧的960×1080中，右离频缓冲区410的偶数列映射到视频缓冲区右侧的960×1080中；其余三种情形可类推得出。

[0094] 按上述3D格式进行传输并在3D电视上显示，即可看到具有景深和层次感的3D网页。

[0095] 本发明的最大特点是，3D浏览器兼容传统的2D浏览器，既解决了显示3D网页的问题，又向后兼容传统的2D网页。

[0096] 上述内容，仅仅是对本发明的优选方式进行描述，并非对本发明的构思和范围进行限定。在不脱离本发明设计构思的前提下，任何对本发明的技术方案做出的各种变型和改进，均属本发明的保护范围。