CN107578475A - 一种三维网页显示方法及装置 - Google Patents

Abstract

本申请公开了一种三维网页显示方法，包括：根据解析策略解析原网页文件，将原网页分离化提取新的元素；根据模型化策略将所述元素具象化为空间立体几何体；根据布局策略对所述空间立体几何体进行空间布局，得到三维的新网页。本申请还公开了一种三维网页显示装置。应用本申请公开的技术方案，能够提高用户在VR设备中使用浏览器的便利性，提高用户体验。

Description

一种三维网页显示方法及装置

技术领域

本申请涉及浏览器技术领域，特别涉及一种三维网页显示方法及装置。

背景技术

随着虚拟现实(VR)技术的发展，浏览器已经在VR设备上得到支持，但是，还存在以下技术问题没有得到解决：

1)大部分标签仅支持网页的二维显示，或仅支持部分标签的三维显示。

2)当前利用VR浏览网页时，视觉上存在多余空间。

3)对用户而言，现有VR浏览器在视觉上不够酷炫，用户体验较差，没有体现VR设备的浏览初衷。

4)针对网页本身而言，网页的开发模式以及标准比较陈旧，没有适应当下热门的流行趋势。

发明内容

本申请提供了一种三维网页显示方法及装置，以提高用户在VR设备中使用浏览器的便利性，提高用户体验。

本申请公开了一种三维网页显示方法，包括：

A、根据解析策略解析原网页文件，将原网页分离化提取新的元素；

B、根据模型化策略将所述元素具象化为空间立体几何体；

C、根据布局策略对所述空间立体几何体进行空间布局，得到三维的新网页。

较佳的，所述A还包括：

对原网页进行解析后，根据解析结果获得所述原网页的特征信息，所述特征信息至少包括：网页类型、元素的重要属性、原网页的布局信息。

较佳的，提取新的元素的方法至少包括：切片法和分层法。

较佳的，所述B包括：

根据所述元素的特征查询模型化策略，确定所述元素在空间中需要呈现的形状；

在立体几何体算法库中获取与模型化策略对应的算法，并利用图形库将所述元素绘制为单位大小的几何体；

根据原网页以及元素的属性，查询对应的策略，调整几何体的大小；

根据元素的属性和特征，对其进行变形或者资源再获取，在几何体上进行纹理化。

较佳的，所述C包括：

根据布局策略对所述空间立体几何体根据其在原网页的属性和特征进行空间布局，得到三维的新网页。

较佳的，所述布局策略的原则是基于原网页已有的布局信息，不改变原网页的整体布局。

较佳的，所述进行空间布局还包括以下的至少一种：

将网页中重要的信息所对应的几何体模型进行大小位置的调整，放置在用户中心视野范围内；将网页内不重要的信息所对应的几何体模型进行大小位置的调整，放置在用户中心视野范围外；

对于多个相关联的模型，进行关联性布局；

对有特殊朝向属性效果的模型，当用户改变当前视野时，随用户视野旋转改变模型的方向，始终将模型几何体朝向面面向用户的视野平面；

对有特殊动态效果的模型，通过图形库算法进行动态效果渲染。

本申请还公开了一种三维网页显示装置，包括：控制模块、提取模块、模型化模块和布局模块，其中：

所述提取模块，用于根据控制模块的解析策略解析原网页文件，将原网页分离化提取新的元素；

所述模型化模块，用于根据控制模块的模型化策略将提取模块所提取的新的元素具象化为空间立体几何体；

所述布局模块，用于根据控制模块的布局策略对所述空间立体几何体进行空间布局，得到三维的新网页。

由上述技术方案可见，本申请能够提高用户在VR设备中使用浏览器的便利性，提高用户体验。并且，针对现有的平面页面，本申请通过进行重新解析渲染以及空间化布局，并针对未来可预见的3D网页开发标准，支持对其的解析渲染等，能够进一步提高在VR设备中使用浏览器的便利性。

附图说明

图1为本申请360°/3D网页显示模块示意图；

图2为本申请360°/3D网页显示流程图；

图3为本申请元素提取模块切片法示意图；

图4为本申请元素提取模块分层法示意图；

图5为本申请布局模块示意图；

图6为本申请控制模块示意图。

具体实施方式

为使本申请的目的、技术方案及优点更加清楚明白，以下参照附图并举实施例，对本申请作进一步详细说明。

本发明提出了一种三维的网页显示方法，也可称为一种360°的网页显示方法。当用户在VR设备或其它可空间化的设备中浏览网页时，本发明将网页在三维空间中立体化渲染，将网页中的元素在三维空间中呈现为各种形式，从而提高用户在VR设备中使用浏览器的便利性，并增强用户体验。

本发明360°/3D的网页显示方法可以由如图1所示的功能模块实现，包括：提取模块、模型化模块、布局模块和控制模块。

图2为本发明3D网页显示方法的主体流程示意图，其中：

一、提取模块：根据控制模块的解析策略解析网页文件，将当前网页分离化，通过重组合并等操作形成新的元素，每一个元素将用于后续的模型化和布局。在对网页进行解析后，即可根据解析结果获得原网页的特征信息，包括：网页类型(如：文字类、视频类、图像类、条目类等)、元素的重要属性，原网页布局信息等；将这些特征信息更新至控制模块，以便后续模块的访问查询。具体的提取方法举例如下：

1、切片法，如图3所示，包括以下主要步骤：

a.对网页进行解析，将原网页当做一个整体；

b.根据网页位置信息进行裁剪分离；

c.对同一类别进行整合，整合可以通过与控制模块交互后，采取位置信息区域化或内容信息统一化等方法进行。

2、分层法，如图4所示，包括以下步骤：

a.对网页进行解析。

b.根据网页的层级关系分层，分层的方法可以有但不仅限于以下几种：

1)根据原网页已有的模块划分进行分层，如element间的父子及继承关系，或者通过id、class作为索引。

2)根据Z-index属性值进行分层；

3)根据canvas、video等特殊标签作为标识进行分层；

最后需要进行计算并分层。

c.对同一类别进行整合，整合可以通过与控制模块交互后，采取位置信息区域化或内容信息统一化等方法进行。例如：当文字和视频强相关时，根据内容信息统一化原则，将文字与视频整合为一个元素或者多个相关联的元素。

二、模型化模块：将提取模块输出的元素具象化为空间立体几何体，一个元素对应一个模型，具体过程如图5所示，包括以下步骤：

1.根据已提取的元素的特征，向控制模块查询模型化策略，确定元素在空间中需要呈现的形状，例如：对于大篇幅文字元素，可以采用面片状、环幕状或滚球状等。

2.在立体几何体算法库中获取与模型化策略对应的算法，并利用图形库将所提取的元素绘制为单位大小的几何体，该几何体可以是规则或者不规则几何体。

3.根据原网页以及元素的属性，查询控制模块的策略，调整几何体的大小。

4.根据元素的属性和特征，对其进行变形或者资源再获取，在几何体上进行纹理化。具体的：

针对当前的万维网联盟(W3C)标准，根据原有的元素特征对几何体进行变形。

资源再获取是指：可针对未来的新型的网页规范，网页对特殊的3D标签或者style属性定义其空间形态，在可立体化的环境中，获取其相应的资源。

假设如下：当网页正常平面显示时，仅显示front.ipg；当在可立体化的环境中，获取该图片的其它方位信息，并对其进行几何纹理化。

值得注意的是，对3D形态未定义的元素进行模型化的同时，其生成的几何体可以是不同的，通过用户的操作以及自定义可以对该几何体进行改变。

三、布局模块：对于模型化模块输出的几何体模型，根据其原有属性和特征，向控制模块查询布局策略，进行空间布局。具体的：

1.首先，布局的原则是基于原网页已有的布局信息，不改变网页原来的整体布局。

2.将网页中较为重要的信息所对应的几何体模型进行大小位置的调整，放置在用户中心视野范围内，如：标题、内容、视频等；将网页内不重要的信息所对应的几何体模型进行大小位置的调整，放置在用户中心视野范围外，如：广告等。

3.对于多个相关联的模型，可以采取某种方式进行关联性布局，例如：位置排版、动画关联等等。

4.对有特殊朝向属性效果的模型，当用户改变当前视野时，该模型可以随用户视野旋转改变，始终将模型几何体朝向面面向用户的视野平面。

5.对有特殊动态效果的模型，通过图形库算法进行动态效果渲染，例如：上文新型网页规范下的代码中提到的animation3D属性。

四、控制模块：控制模块为与用户进行交互的模块，并对其它三个模块和策略进行管理，其功能如图6所示。

1.控制模块包括：预处理，即处理用户输入以及其他模块的查询请求；策略：即管理每个模块对应的规则策略的设定值，对3D网页渲染中不可控因素进行限定和规范，包括：提取策略、模块化策略、布局策略、交互策略。

例如：提取模块中的切片法和分层法可作为不同的提取策略；对不同的网页类型进行全局或部分性刷新可作为不同的布局策略；用户对3D网页渲染的个性化设置可作为不同的交互策略等等。

其中，策略可以是：系统默认、原网页定义或者用户自定义的。其优先级为：用户定义>原网页>系统默认。

2.用户交互：当用户视觉范围/位置发生变化时，元素需要与用户产生互动行为，例如：当用户在虚拟的三维空间中前进时，当用户靠近某一个3D模型时，可根据当前算法对元素进行视觉调整；用户可合并已选择的3D模型，可放大缩小或点击所选择的3D模型。用户交互行为包含但不限于：姿势、位置或语音等等。

下面通过一个使用VR设备浏览网页的具体过程对本申请进行举例说明。

1.用户打开VR设备，使用浏览器开始浏览网页。

2.解析网页文件，根据控制模块的解析策略将当前网页分离化，通过重组合并等操作形成新的元素。

3.将这些元素具象化成空间立体几何体，并根据其原有属性和特征，查询布局策略，将这些几何体进行空间布局。

4.用户可对空间中的几何体进行互动，例如变形、合并、改变位置等。

5.当用户点击网页中链接时，根据策略，决定新网页布局刷新方式(全局或部分)。如果全局布局刷新，则清除当前效果，并开始新的网页3D化渲染，重复步骤2～5；如果部分布局刷新，则仅对需要修改的部分进行更新。

同样的，只要是可立体化的设备均可应用本申请公开的方法，并支持相应的功能。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (8)

1.一种三维网页显示方法，其特征在于，包括：

A、根据解析策略解析原网页文件，将原网页分离化提取新的元素；

B、根据模型化策略将所述元素具象化为空间立体几何体；

C、根据布局策略对所述空间立体几何体进行空间布局，得到三维的新网页。

2.根据权利要求1所述的方法，其特征在于，所述A还包括：

对原网页进行解析后，根据解析结果获得所述原网页的特征信息，所述特征信息至少包括：网页类型、元素的重要属性、原网页的布局信息。

3.根据权利要求1或2所述的方法，其特征在于：

提取新的元素的方法至少包括：切片法和分层法。

4.根据权利要求1所述的方法，其特征在于，所述B包括：

根据所述元素的特征查询模型化策略，确定所述元素在空间中需要呈现的形状；

在立体几何体算法库中获取与模型化策略对应的算法，并利用图形库将所述元素绘制为单位大小的几何体；

根据原网页以及元素的属性，查询对应的策略，调整几何体的大小；

根据元素的属性和特征，对其进行变形或者资源再获取，在几何体上进行纹理化。

5.根据权利要求1所述的方法，其特征在于，所述C包括：

根据布局策略对所述空间立体几何体根据其在原网页的属性和特征进行空间布局，得到三维的新网页。

6.根据权利要求5所述的方法，其特征在于：

所述布局策略的原则是基于原网页已有的布局信息，不改变原网页的整体布局。

7.根据权利要求5所述的方法，其特征在于，所述进行空间布局还包括以下的至少一种：

将网页中重要的信息所对应的几何体模型进行大小位置的调整，放置在用户中心视野范围内；将网页内不重要的信息所对应的几何体模型进行大小位置的调整，放置在用户中心视野范围外；

对于多个相关联的模型，进行关联性布局；

对有特殊朝向属性效果的模型，当用户改变当前视野时，随用户视野旋转改变模型的方向，始终将模型几何体朝向面面向用户的视野平面；

对有特殊动态效果的模型，通过图形库算法进行动态效果渲染。

8.一种三维网页显示装置，其特征在于，包括：控制模块、提取模块、模型化模块和布局模块，其中：

所述提取模块，用于根据控制模块的解析策略解析原网页文件，将原网页分离化提取新的元素；

所述模型化模块，用于根据控制模块的模型化策略将提取模块所提取的新的元素具象化为空间立体几何体；

所述布局模块，用于根据控制模块的布局策略对所述空间立体几何体进行空间布局，得到三维的新网页。