CN103412874B - 用于实现三维页面的方法及系统 - Google Patents

Abstract

本申请公开了一种用于实现三维网页的方法及系统，利用在HTML语言中定义的视帧标签、在CSS语言中定义的三维定位信息属性组以及在JavaScript语言中定义的显示格式对象创建三维页面文件，并且对三维页面文件进行解析并相应建立视帧对应的文档对象模型树，最后对文档对象模型树进行三维渲染，依据显示格式显示渲染所得三维页面。这样，采用上述处理方式就能实现双视点或多视点三维网页，在双视点或多视点3D显示器上呈现具有深度感的立体三维网页世界，革新了网络体验。

Description

用于实现三维页面的方法及系统

技术领域

本申请涉及计算机应用领域，尤其涉及一种用于实现三维页面的方法及系统。

背景技术

人类的眼睛在观察一个三维物体时，由于双眼水平分开在两个不同的位置上，所看到的物体图像是不同的。左眼和右眼看到的图像分别为左眼图像和右眼图像，它们之间存在着一个视差（Parallax）。由于视差的存在，通过人类的大脑，可以感受到一个具有景深和层次感的三维（3D）世界，这就是双目视差原理。视差又分为正视差、负视差及零视差。在3D显示平面上，物体的左眼图像在左侧、右眼图像在右侧时被定义为正视差，观看正视差的物体时，感觉该物体位于3D显示平面的后方；在3D显示平面上，物体的左眼图像在右侧、右眼图像在左侧时被定义为负视差，观看负视差的物体时，感觉该物体位于3D显示平面的前方；而零视差是指在3D显示平面上，物体的左眼图像与右眼图像完全重合。面向裸眼立体3D显示的多视点3D则是由至少三个相邻的视点构成的，定义为多视点立体3D（Multi-viewStereoscopic3D），相邻的两个视点构成双视点3D。由此可见，多视点3D是双视点3D的扩展，双视点3D是多视点3D的特例。

目前的双视点或多视点3D技术主要应用于3D电视上，而目前如何将多视点3D技术应用于网页，成为现有技术的一大问题。

发明内容

本申请提供一种用于实现三维页面的方法及系统，以实现双视点及多视点3D网页。

根据本申请的第一方面，本申请提供一种用于实现三维网页的方法，包括：

获得三维页面文件，所述三维页面文件包括如下内容：HTML语言中的至少两个视帧标签，每一视帧标签包括每一视帧的标识及内容，视帧的内容包括页面布局及页面元素，所述页面元素包括三维页面元素；CSS语言中的三维定位信息属性组，三维定位信息属性组包括视帧的标识、视帧中三维页面元素的标识，以及三维页面元素的三维定位信息；JavasScript语言中的显示格式对象，显示格式对象包括视帧的标识以及视帧的显示格式信息；

对三维页面文件进行解析，得到视帧标签、三维定位信息属性组以及显示格式对象中的信息；

根据解析得到的视帧标签及三维定位信息属性组中的信息，建立每一视帧对应的文档对象模型树；

根据解析得到的显示格式对象中的信息，对需要显示的各视帧对应的文档对象模型树进行三维渲染，得到三维页面以进行显示。

根据本申请的第二方面，本申请提供一种用于实现三维网页的系统，包括：

解析模块，用于获得三维页面文件，所述三维页面文件包括如下内容：HTML语言中的至少两个视帧标签，每一视帧标签包括每一视帧的标识及内容，视帧的内容包括页面布局及页面元素，所述页面元素包括三维页面元素；CSS语言中的三维定位信息属性组，三维定位信息属性组包括视帧的标识、视帧中三维页面元素的标识，以及三维页面元素的三维定位信息；JavasScript语言中的显示格式对象，显示格式对象包括视帧的标识以及视帧的显示格式信息；并对三维页面文件进行解析，得到视帧标签、三维定位信息属性组以及显示格式对象中的信息；

视帧构建模块，用于根据解析得到的视帧标签及三维定位信息属性组中的信息，建立每一视帧对应的文档对象模型树；

渲染模块，用于根据解析得到的显示格式对象中的信息，对需要显示的各视帧对应的文档对象模型树进行三维渲染，得到三维页面以进行显示。

本申请的有益效果是：

通过提供一种用于实现三维网页的方法及系统，利用在HTML语言中定义的视帧标签、在CSS语言中定义的三维定位信息属性组以及在JavaScript语言中定义的显示格式对象创建三维页面文件，并且对三维页面文件进行解析并相应建立视帧对应的文档对象模型树，最后对文档对象模型树进行三维渲染，依据显示格式显示渲染所得三维页面。这样，采用上述处理方式就能实现双视点或多视点三维网页，在双视点或多视点3D显示器上呈现具有深度感的立体三维网页世界，革新了网络体验。

附图说明

图1为本申请实施例的用于实现3D网页的方法的流程图；

图2为本申请实施例的用于实现三维网页的系统的结构图。

具体实施方式

本申请是对网页语言HTML、CSS、Javascript进行全面的扩展，而实现双视点或多视点立体3D网页的技术。

下面通过一个具体实施例结合附图对本申请作进一步详细说明。

请参考图1，本实施例的用于实现3D网页的方法主要包括如下流程：

步骤101，建立网页的页面布局。具体地，可利用现有的所见即所得的网页页面编辑工具，如Dreamweaver网页编辑器，或者直接用文本编辑器来编辑得到单视点网页（传统2D网页）的页面布局，然后将所得的网页的页面布局保存成为文件。

步骤102，获得网页中的多种页面元素，如图像页面元素或文字页面元素等。为达到3D显示效果，网页中必然包含三维图像页面元素，可采用Autodesk Maya等三维动画软件对图像页面元素进行三维建模，得到三维图像页面元素。另外，对于文字页面元素，也可以进行图像化，从而得到文字对应的三维图像页面元素。当然，也可以不对文字页面元素进行图像化。

步骤103，在HTML语言中定义至少两个视频标签。具体地，每一视帧标签包括每一视帧的标识及内容，视帧的内容包括页面布局及页面元素。而视频标签可为view标签，其中可包括视帧的标识，以及包含页面元素的视帧的内容。如下表1所示，view标签用于标记3D网页中的某个视帧，view标签是继根（Root）元素html之后的元素，称之为次根（Sub-root）元素。另外，view标签可以缺省，目的是为了与原有的HTML语言兼容。

表1

如上表1所示，值number表示视帧的值，也就是视帧的标识，而进行文本编辑时，可将视帧的内容置于view标签中的body子标签中。

步骤104，在CSS语言中定义三维定义信息属性组。具体地，三维定位信息属性组包括视帧的标识、视帧中三维页面元素的标识，以及三维页面元素的三维定位信息。页面元素可包含现有的二维（2D）定位信息，例如页面元素距显示屏边缘的距离、页面元素的长度及宽度等，另外，页面元素中的三维页面元素除了包含2D定位信息外，还应当包含3D定位信息，3D定位信息可采用Autodesk Maya等三维动画软件进行设定，3D定位信息可包括瞳距（eye-distance）、三维页面元素距离显示平面的深度值（depth）等，或者为瞳距（eye-distance）、三维页面元素距离显示平面的深度值（depth）的继承信息。当对3D定位信息进行设定后，即可采用本方法形成正视差、负视差或零视差的、具有深度和层次感的立体3D网页。一般情况下，同一视帧中三维页面元素的深度相同。三维定位信息属性组可为CSS语言中单独定义的Parallax属性组，其包括视帧的标识以及三维页面元素的三维定位信息，如下表2所示，或者，CSS语言中单独定义的Parallax属性组包括视帧标识以及三维页面元素的三维定位信息的继承（inherit）信息，如下表3所示。而Parallax属性组可以缺省，以与原有的CSS语言兼容。

表2

表3

步骤105，在JavaScript语言中定义显示格式对象，最终得到三维网页文件。具体地，JavaScript语言的Multiview对象包括同时显示的视帧个数（number），Resolution对象包括显示屏的分辨率，即显示屏的宽度值（width）及高度值（height）等，如下表4所示，而上述对象还可以缺省，以与原有的JavaScript语言兼容。

表4

这样，通过上述方法得到的三维网页文件可保存在本地或上传到服务器，以供本地显示或下载显示。

步骤106，要对三维网页进行显示时，首先获得三维页面文件，那么通过上述步骤的处理，三维页面文件中至少包括如下内容：HTML语言中的至少两个视帧标签，每一视帧标签包括每一视帧的标识及内容，视帧的内容包括页面布局及页面元素，所述页面元素包括三维页面元素；CSS语言中的三维定位信息属性组，三维定位信息属性组包括视帧的标识、视帧中三维页面元素的标识，以及三维页面元素的三维定位信息；JavasScript语言中的显示格式对象，显示格式对象包括视帧的标识以及视帧的显示格式信息。

步骤107，对三维页面文件进行解析，得到视帧标签、三维定位信息属性组以及显示格式对象中的信息。具体地，其一，可对三维页面文件中的JavaScript语句进行解析，如果其中包含显示格式对象Resolution和Muliview，则获取同时显示的视帧个数（number），显示屏的分辨率，即显示屏的宽度值（width）及高度值（height）等，同时可设定相应的视频缓冲区；其二，可对三维页面文件中的HTML语句进行解析，如果其中包含视帧标签view，则获取相应的frame属性值，并进行相应的视帧处理；其三，可对三维页面文件中的CSS语句进行解析，如果其中包含三维定位信息属性组，即Parallax属性组，则获取view-frame、瞳距（eye-distance）及三维页面元素距离显示平面的深度值（depth）的属性值，进行相应三维定位信息属性的处理。

步骤108，根据解析得到的视帧标签及三维定位信息属性组中的信息，建立每一视帧对应的文档对象模型（Document Object Model，DOM）树。

步骤109，根据解析得到的显示格式对象中的信息，对需要显示的各视帧对应的DOM树进行三维渲染，得到三维页面以进行显示。具体地，可以建立相应的渲染树进行上述三维渲染，得到三维页面并存储到视频缓冲区中以进一步进行显示。

相应地，本实施例的用于实现三维网页的系统主要可包括如图2所示的结构：

三维页面文件创建模块201，用于利用Dreamweaver等网页编辑器或文本编辑器建立页面布局，采用Autodesk Maya等三维动画软件对图像页面元素进行三维建模，得到三维图像页面元素；采用Autodesk Maya等三维动画软件设定三维页面元素的三维定位信息；定义HTML语言中的至少两个视频标签；定义CSS语言中的三维定位信息属性组；定义JavaScript语言中的显示格式对象，得到三维网页文件。

解析模块202，用于获得三维页面文件，所述三维页面文件包括如下内容：HTML语言中的至少两个视帧标签，每一视帧标签包括每一视帧的标识及内容，视帧的内容包括页面布局及页面元素，所述页面元素包括三维页面元素；CSS语言中的三维定位信息属性组，三维定位信息属性组包括视帧的标识、视帧中三维页面元素的标识，以及三维页面元素的三维定位信息；JavasScript语言中的显示格式对象，显示格式对象包括视帧的标识以及视帧的显示格式信息；并对三维页面文件进行解析，得到视帧标签、三维定位信息属性组以及显示格式对象中的信息；

视帧构建模块203，用于根据解析得到的视帧标签及三维定位信息属性组中的信息，建立每一视帧对应的文档对象模型树；

渲染模块204，用于根据解析得到的显示格式对象中的信息，对需要显示的各视帧对应的文档对象模型树进行三维渲染，得到三维页面以进行显示。

其中，三维页面元素的三维定位信息包括：瞳距及三维页面元素距离显示平面的深度值，或瞳距及三维页面元素距离显示屏的深度值的继承信息。显示格式对象包括：同时显示的视帧个数，显示屏的宽度值及高度值。

需要说明的是：

1、作为另一种实施例，上述步骤106-109可单独形成用于实现三维网页的方法以显示三维网页，相应地，上述解析模块202、视帧构建模块203及渲染模块204可单独形成用于实现三维网页的系统以显示三维网页。

2、当需要实现双视点3D网页时，可仅形成两个视帧并将其同时叠加显示，从而达到双视点3D显示效果；当需要实现多视点3D网页时，需形成至少三个视帧并将其同时叠加显示，从而达到多视点3D显示效果。

3、在其他实施例中，还可以采用其他编辑工具达到上述同样的效果。

通过实施本申请的三维网页的实现方法及其系统，首先建立网页的布局，将网页中的页面元素与布局相关联得到基础视帧，然后对基础视帧中的页面元素配置定位信息得到至少两个显示视帧，定位信息包含了三维页面元素的三维定位信息，再者将显示视帧按照显示格式进行进一步配置，从而使至少两个显示视帧在同时显示时能够具有三维显示效果。这样，只需在原有的网页编辑处理基础上，增加上述关联处理，例如，在HTML语言中增加标记视帧的标签内容、在CSS语言中增加描述视差的属性组以及在Javascript语言中增加描述显示格式的对象，就能采用这种简单的编辑方式就能实现双视点及多视点3D网页，革新了网络体验。

以上内容是结合具体的实施方式对本申请所作的进一步详细说明，不能认定本申请的具体实施只局限于这些说明。对于本申请所属技术领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干简单推演或替换。

Claims (6)

1.一种用于实现三维网页的方法，其特征在于，包括：

创建三维页面文件，包括：建立网页的页面布局，获得网页中的多种页面元素，在HTML语言中定义至少两个视帧标签，每一视帧标签包括每一视帧的标识及内容，视帧的内容包括页面布局及页面元素，所述页面元素包括三维页面元素；在CSS语言中定义三维定位信息属性组，三维定位信息属性组包括视帧的标识、视帧中三维页面元素的标识，以及三维页面元素的三维定位信息，三维页面元素的三维定位信息包括：瞳距及三维页面元素距离显示屏的深度值，或瞳距及三维页面元素距离显示屏的深度值的继承信息；在JavasScript语言中定义显示格式对象，显示格式对象包括视帧的标识以及视帧的显示格式信息，最终得到三维页面文件；

在对三维页面进行显示时，获取创建得到的三维页面文件，对三维页面文件进行解析，得到视帧标签、三维定位信息属性组以及显示格式对象中的信息；

根据解析得到的视帧标签及三维定位信息属性组中的信息，建立每一视帧对应的文档对象模型树；

根据解析得到的显示格式对象中的信息，对需要显示的各视帧对应的文档对象模型树进行三维渲染，得到三维页面以进行显示。

2.如权利要求1所述的方法，其特征在于，建立网页的页面布局具体为：

利用Dreamweaver网页编辑器或文本编辑器建立页面布局，

方法还包括：

采用Autodesk Maya三维动画软件对图像页面元素进行三维建模，得到三维图像页面元素；

采用Autodesk Maya三维动画软件设定三维页面元素的三维定位信息。

3.如权利要求1或2所述的方法，其特征在于，显示格式对象包括：同时显示的视帧个数，显示屏的宽度值及高度值。

4.一种用于实现三维网页的系统，其特征在于，包括：

三维页面文件创建模块，用于建立页面布局；定义HTML语言中的至少两个视帧标签；定义CSS语言中的三维定位信息属性组；定义JavaScript语言中的显示格式对象，得到三维页面文件；

解析模块，用于获得三维页面文件，所述三维页面文件包括如下内容：HTML语言中的至少两个视帧标签，每一视帧标签包括每一视帧的标识及内容，视帧的内容包括页面布局及页面元素，所述页面元素包括三维页面元素；CSS语言中的三维定位信息属性组，三维定位信息属性组包括视帧的标识、视帧中三维页面元素的标识，以及三维页面元素的三维定位信息，所述三维页面元素的三维定位信息包括：瞳距及三维页面元素距离显示屏的深度值，或瞳距及三维页面元素距离显示屏的深度值的继承信息；JavasScript语言中的显示格式对象，显示格式对象包括视帧的标识以及视帧的显示格式信息；并对三维页面文件进行解析，得到视帧标签、三维定位信息属性组以及显示格式对象中的信息；

视帧构建模块，用于根据解析得到的视帧标签及三维定位信息属性组中的信息，建立每一视帧对应的文档对象模型树；

渲染模块，用于根据解析得到的显示格式对象中的信息，对需要显示的各视帧对应的文档对象模型树进行三维渲染，得到三维页面以进行显示。

5.如权利要求4所述的系统，其特征在于，所述三维页面文件创建模块利用Dreamweaver网页编辑器或文本编辑器建立页面布局，采用Autodesk Maya三维动画软件对图像页面元素进行三维建模，得到三维图像页面元素；采用Autodesk Maya三维动画软件设定三维页面元素的三维定位信息。

6.如权利要求4或5所述的系统，其特征在于，显示格式对象包括：同时显示的视帧个数，显示屏的宽度值及高度值。