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

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

背景技术：
人类的眼睛在观察一个三维物体时，由于双眼水平分开在两个不同的位置上，所看到的物体图像是不同的。左眼和右眼看到的图像分别为左眼图像和右眼图像，它们之间存在着一个视差（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显示效果，网页中必然包含三维图像页面元素，可采用AutodeskMaya等三维动画软件对图像页面元素进行三维建模，得到三维图像页面元素。另外，对于文字页面元素，也可以进行图像化，从而得到文字对应的三维图像页面元素。当然，也可以不对文字页面元素进行图像化。步骤103，在HTML语言中定义至少两个视频标签。具体地，每一视帧标签包括每一视帧的标识及内容，视帧的内容包括页面布局及页面元素。而视频标签可为view标签，其中可包括视帧的标识，以及包含页面元素的视帧的内容。如下表1所示，view标签用于标记3D网页中的某个视帧，view标签是继根（Root）元素html之后的元素，称之为次根（Sub-root）元素。另外，view标签可以缺省，目的是为了与原有的HTML语言兼容。表1如上表1所示，值number表示视帧的值，也就是视帧的标识，而进行文本编辑时，可将视帧的内容置于view标签中的body子标签中。步骤104，在CSS语言中定义三维定义信息属性组。具体地，三维定位信息属性组包括视帧的标识、视帧中三维页面元素的标识，以及三维页面元素的三维定位信息。页面元素可包含现有的二维（2D）定位信息，例如页面元素距显示屏边缘的距离、页面元素的长度及宽度等，另外，页面元素中的三维页面元素除了包含2D定位信息外，还应当包含3D定位信息，3D定位信息可采用AutodeskMaya等三维动画软件进行设定，3D定位信息可包括瞳距（eye-distance）、三维页面元素距离显示平面的深度值（depth）等，或者为瞳距（eye-distance）、三维页面元素距离显示平面的深度值...