CN102087598A

CN102087598A - 一种3d界面展示方法、装置及浏览装置

Info

Publication number: CN102087598A
Application number: CN2011100446786A
Authority: CN
Inventors: 刘永霞
Original assignee: Shenzhen Coship Electronics Co Ltd
Current assignee: Shenzhen Coship Electronics Co Ltd
Priority date: 2011-02-22
Filing date: 2011-02-22
Publication date: 2011-06-08

Abstract

本发明公开了一种3D界面展示方法、装置及浏览装置，其中，所述方法包括：解析出超文本标记语言HTML文件中包含的3D对象、属性、函数调用及其相关参数的语句；根据3D对象语句中包含的对象名称，调用预先封装的该对象的实现方法；根据所述函数调用及其相关参数，以及属性语句中包含的属性值，运行所述对象实现方法，在网页中展示出3D界面。通过本发明，能够提高3D界面的开发效率。

Description

一种3D界面展示方法、装置及浏览装置

技术领域

本发明涉及3D开发技术领域，特别是涉及一种3D界面展示方法、装置及浏览装置。

背景技术

随着芯片性能的不断提高，以及图像处理技术的不断发展，三维(3D，3Dimensions)图像显示技术也得到了较为广泛地推广及应用，例如，3D电影、3D游戏等。在实现3D图像的过程中，3D界面展示技术是其中一个非常重要的环节。

目前，可以实现3D界面展示组件开发的技术比较多，例如Opengl(Open Graphics Library，是个专业的图形程序接口，是一个功能强大，调用方便的底层图形库)、Opengl es(OpenGL for Embedded Systems，嵌入式系统中的OpenGL)等等。但是，对于3D界面开发人员而言，编写出复杂的3D界面展示程序是非常困难的。这是因为，现有技术中，3D开发人员需要直接操作3D图形库(包括前述Opengl、Opengles等)的接口，进行3D建模及3D物体显示的相关操作，并且要求3D开发人员必须深刻理解3D建模、3D物体变换的相关知识，对技术性以及知识储备的要求很高。因此，现有技术中3D界面开发的效率比较低。

发明内容

本发明提供一种3D界面展示方法、装置及浏览装置，能够提高3D界面的开发效率。

为实现上述目的，本发明提供了如下方案：

一种3D界面展示方法，包括：

解析出超文本标记语言HTML文件中包含的3D对象、属性、函数调用及其相关参数的语句；

根据3D对象语句中包含的对象名称，调用预先封装的该对象的实现方法；

根据所述函数调用及其相关参数，以及属性语句中包含的属性值，运行所述对象实现方法，在网页中展示出3D界面。

优选的，所述在网页中展示出3D界面包括：

根据所述函数调用及其相关参数，对3D场景进行初始化；

建立3D对象模型；

根据所述属性语句中包含的属性值对3D对象进行状态设置；

在所述3D场景中，根据所述3D对象模型，绘制并显示所述3D对象。

优选的，所述根据所述函数调用及其相关参数，对3D场景进行初始化包括：

对3D场景中以下参数中的任意一种或任意多种的组合进行初始化：显示上下文、视角、相机位置、3D显示句柄、灯光、3D渲染方式。

优选的，所述建立3D对象模型包括：

管理对象构造中的相关数据；

管理对象的纹理。

优选的，所述根据所述属性语句中包含的属性值对3D对象进行状态设置包括：

根据所述属性语句中包含的属性值对3D对象中以下参数中任意一种或多种的组合进行状态设置：透明度、平移变换、旋转变换、变比变换、镜像变换、投影变换、光照、纹理、材质、形状、变换步长。

优选的，所述绘制所述3D对象包括：

调用3D图形库中的接口，绘制所述3D对象。

一种3D界面展示装置，包括：

解析单元，用于解析出超文本标记语言HTML文件中包含的3D对象、属性、函数调用及其相关参数的语句；

调用单元，用于根据3D对象语句中包含的对象名称，调用预先封装的该对象的实现方法；

展示单元，用于根据所述函数调用及其相关参数，以及属性语句中包含的属性值，运行所述对象实现方法，在网页中展示出3D界面。

优选的，所述展示单元包括：

初始化子单元，用于根据所述函数调用及其相关参数，对3D场景进行初始化；

建模子单元，用于建立3D对象模型；

状态设置子单元，用于根据所述属性语句中包含的属性值对3D对象进行状态设置；

显示子单元，用于在所述3D场景中，根据所述3D对象模型，绘制并显示所述3D对象。

优选的，所述初始化子单元具体用于：对3D场景中以下参数中的任意一种或任意多种的组合进行初始化：显示上下文、视角、相机位置、3D显示句柄、灯光、3D渲染方式。

优选的，所述建模子单元包括：

第一管理子单元，用于管理对象构造中的相关数据；

第二管理子单元，用于管理对象的纹理。

优选的，所述状态设置子单元具体用于：根据所述属性语句中包含的属性值对3D对象中以下参数中任意一种或多种的组合进行状态设置：透明度、平移变换、旋转变换、变比变换、镜像变换、投影变换、光照、纹理、材质、形状、变换步长。

优选的，所述显示子单元具体用于：

调用3D图形库中的接口，绘制所述3D对象。

一种浏览装置，其特征在于，包括前述任一项所述的3D界面展示装置。

根据本发明提供的具体实施例，本发明达到了以下技术效果：

本发明实施例中，预先提供了各种3D特效的实现方法，并封装了相应的接口；这样，相当于扩展了一套基于JavaScript的3D接口，将这些接口提供给用户，用户就可以利用这些接口以编写HTML文件的方式进行3D界面的开发。在具体进行3D界面展示时，可以通过浏览装置等工具对HTML文件进行解析，从中解析出超文本标记语言HTML文件中包含的3D对象、属性、函数调用及其相关参数的语句，然后根据3D对象语句中包含的对象名称，调用预先封装的该对象的实现方法，最后，根据所述函数调用及其相关参数，以及属性语句中包含的属性值，运行所述实现方法，就可以在网页中展示出3D界面。可见，通过本发明实施例，相当于用户不必直接操作3D图形库，也不需要理解3D建模、3D物体变换等相关知识，就可以完成3D界面的开发，因此，能够简化3D界面的开发流程，达到提高3D界面的开发效率的目的。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的方法的流程图；

图2是本发明实施例提供的开发框架示意图；

图3是本发明实施例提供的装置的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本发明保护的范围。

参见图1，是本发明实施例中3D界面展示方法流程图。

S101：解析出HTML(Hyper Text Mark-up Language，超文本标记语言)文件中包含的3D对象、属性、函数调用及其相关参数的语句；

在本发明实施例中，为了简化3D开发的流程，预先提供了各种3D特效的实现方法，并封装了相应的接口；这样，相当于扩展了一套基于JavaScript的3D接口，将这些接口提供给用户，用户就可以利用这些接口以编写HTML文件的方式进行3D界面的开发。

也就是说，利用本发明实施例的方法，在开发3D界面时，不必直接操作3D图形库，只需要通过本发明实施例的各种3D特效的接口编写HTML文件，就可以完成3D界面的开发。

其中，3D特效的接口可以以对象名称及其属性的方式提供。在编写HTML代码时，相当于是在确定了所需的对象之后，为对象的各个属性进行赋值的过程。因此，不需要用户理解3D建模、3D物体变换等相关知识，就可以完成3D界面的开发。

在编写好一个HTML文件之后，就可以通过浏览装置等工具来解释该文件。例如，在通过浏览装置来实现的方式下，相当于对浏览装置内核进行了JS扩展，使得浏览装置能够对HTML文件进行解析之后，调用本发明实施例中的3D特效的实现方法，实现在网页中进行3D界面的展示。

S102：根据3D对象语句中包含的对象名称，调用预先封装的该对象的实现方法；

用户在HTML文件中使用的对象名称与预先封装的对象实现方法中的对象名称是相同的，因此，可以通过对象名称匹配的方式，查找到当前的HTML文件中存在的对象实现方法，并调用该对象实现方法。

S103：根据所述函数调用及其相关参数，以及属性语句中包含的属性值，运行所述对象实现方法，在网页中展示出3D界面。

在运行对象实现方法时，首先需要向方法中传入相关的参数及属性值信息。在本发明实施例中，这些参数及属性值信息包含在用户编写的HTML文件中，并且已经通过浏览装置解析出来，因此，直接根据这些函数调用及其相关参数，以及属性语句中包含的属性值，运行对象实现方法，即可在一个网页中展示出3D界面。

也就是说，在本发明实施例中，提供了新的3D界面开发框架，参见图2，该框架主要包括以下几个部分：3D网页特效层、3D特效封装层及3D特效依赖层。下面分别进行介绍。

(一)3D网页特效层相当于是最顶层的展示层，也就是用户最终看到最终的3D界面展示效果的一层。

(二)3D特效封装层属于该框架的中间层，也是属于比较关键的一层。该层由以下两个模块组成：浏览装置的JavaScript解析模块及3D特效封装模块。其中，浏览装置的JavaScript解析模块主要负责解析网页中的3D特效语句，包括对象、属性以及函数调用等，并将解析结果传递给3D特效封装模块。3D特效封装模块封装了各种3D特效的实现方法，其主要作用有以下几个方面：

(1)3D场景的初始化：包括显示上下文、视角、相机位置、3D显示句柄、灯光、3D渲染方式等参数。

在进行3D场景初始化时，首先可以声明3D场景，浏览装置JavaScript解析模块进行解析，将函数调用和相关参数传递给3D特效封装模块；然后3D特效封装模块初始化3D的场景，包括显示上下文、视角、相机位置、灯光以及渲染方式等参数，保证3D物体显示的场景是用户期望的。场景初始化后，相关参数后续网页可以进行修改。

(2)3D对象建模：3D对象建模是非常关键的一步，主要包括：封装3D元素对象，并管理对象的生命周期。管理3D对象用到的数据资源(图片、文字、文件等)的下载、存储和释放。管理纹理数据的创建、绑定等。

(3)3D对象状态设置：如透明度、平移变换、旋转变换、变比变换、镜像变换、投影变换、光照、纹理、材质、形状、变换步长等。

用户创建对象后，可以对物体的状态进行设置，此时3D特效封装模块可以进行状态的记录和管理，但并不进行状态的执行。

(4)3D对象的绘制和显示：执行3D对象的各种变换和显示。

其中，关于3D对象的显示，主要是维护一系列对象的显示，管理对象的显示(如对象的可见性、是否在裁剪范围内等)。

3D对象的绘制，主要是根据用户设置的参数等，进行绘制。如透明度变化、平移变换、旋转变换、变比变换、镜像变换、投影变换、光照、纹理、材质、形状变化等，也可以根据用户设置的步长和变换步数等参数，渐变执行到目标值。

需要说明的是，对于3D特效封装层而言，无论是3D场景的初始化、3D对象建模还是3D对象的绘制和显示，都是预先封装好的，3D界面开发人员不需要了解这些步骤的具体实现，直接调用这些封装好的接口即可。

其中，在进行3D对象的绘制时，会需要调用3D图形库、图形引擎以及底层驱动等接口，因此，在该框架中，还包括一个3D特效依赖层，下面对该层进行简单地介绍。

(三)3D特效依赖层的主要作用是提供3D图形库、图形引擎以及底层驱动。其中，3D图形库主要是提供3D图形的API，包括OpenglES、Opengl等。图形引擎及底层驱动主要用于执行3D图形的特效请求。

也就是说，3D特效依赖层提供了最基本的支持，只有通过这一层的支持，才能最终实现3D特效。当然，对3D特效依赖层中图形引擎的调用、函数的调用等都可以是在3D特效封装模块中封装好的，3D界面开发人员不需要关心其具体实现。

通过以上所述可见，在本发明实施例中，将3D界面开发过程中最繁琐的部分预先实现，形成一个中间层，3D界面开发人员不需要直接调用3D图形库中的API函数，或者OpenglES、Opengl接口，而是直接调用该基于JavaScript封装的3D接口即可。因此，对于3D界面开发人员而言，相当于屏蔽了底层的实现细节，只要知道需要展现什么样的界面，就可以方便地通过制作HTML文件，并在浏览装置的网页中看到最终的3D特效图了。

例如，3D开发人员想要显示一个立方体，则可以写出的HTML文件可以为：

<head>

var canvas3d；

var canvasw＝1280；

var canvash＝720；

var cubElement；

function initPage(){

canvas3d＝new Canvas3D(0，0，canvasw，canvash)；

cubElement＝new CubeElement(500，300，0，100，100，100)；

canvas3d.add(cubElement)；

cubElement.rotateY＝45；

canvas3d.refresh()；

}

</script>

</head>

</html>

其中，“canvas 3d”是指画布，最终的3D效果图需要在一个画布上进行绘制。“CubeElement”就是指立方体这个对象的名称，也就是3D特效封装层提供的关于立方体这个对象的3D接口，在进行3D界面开发时，直接调用了该接口。括号中的数字(500，300，0，100，100，100)就是在指定该对象的各个属性，包括立方体的尺寸、颜色等。另外，在上述HTML文件中还可以设置立方体的其他3D效果，即旋转效果，具体通过“cubElement.rotateY＝45”这一语句来实现，也即让该立方体沿着Y方向旋转45度。编写好这个HTML文件之后，双击该文件，浏览装置就可以在一个网页中显示出一个沿着Y方向旋转45度的立方体，其尺寸及颜色与用户设定的相同。当然，实际上在实现该3D特效时，还需要调用很多底层接口或函数，但是3D界面开发人员不必关心，因此，相当于只需要3D界面开发人员通过HTML文件告知3D特效封装层，想要什么物体，以及物体的具体参数信息，即可得到想要的3D特效图像。而不需要对3D建模、3D物体变换等相关知识进行深入地了解，因此，大大提高了3D界面的开发效率。

另外需要说明的是，在本发明实施例中，使用了浏览装置对3D特效进行显示，但是，在显示3D特效时，直接采用3D封装模块及3D特效依赖层的JS扩展进行画图，而不需要浏览装置执行对页面元素进行分析、排版、渲染等控制操作。因此，可以节省在显示过程中的时间消耗。

与本发明实施例提供的3D界面展示方法相对应，本发明实施例还提供了一种3D界面展示装置，参见图3，该装置包括：

解析单元301，用于解析出超文本标记语言HTML文件中包含的3D对象、属性、函数调用及其相关参数的语句；

调用单元302，用于根据3D对象语句中包含的对象名称，调用预先封装的该对象的实现方法；

展示单元303，用于根据所述函数调用及其相关参数，以及属性语句中包含的属性值，运行所述对象实现方法，在网页中展示出3D界面。

其中，展示单元303包括：

建模子单元，用于建立3D对象模型；

具体实现时，所述初始化子单元具体可以用于：

所述建模子单元具体可以包括：

第一管理子单元，用于管理对象构造中的相关数据；

第二管理子单元，用于管理对象的纹理。

所述状态设置子单元具体可以用于：

所述显示子单元具体可以用于：

调用3D图形库中的接口，绘制所述3D对象。

本发明实施例提供的3D界面展示装置中，预先提供了各种3D特效的实现方法，并封装了相应的接口；这样，相当于扩展了一套基于JavaScript的3D接口，将这些接口提供给用户，用户就可以利用这些接口以编写HTML文件的方式进行3D界面的开发。在具体进行3D界面展示时，可以通过浏览装置等工具对HTML文件进行解析，从中解析出超文本标记语言HTML文件中包含的3D对象、属性、函数调用及其相关参数的语句，然后根据3D对象语句中包含的对象名称，调用预先封装的该对象的实现方法，最后，根据所述函数调用及其相关参数，以及属性语句中包含的属性值，运行所述实现方法，就可以在网页中展示出3D界面。可见，通过本发明实施例，相当于用户不必直接操作3D图形库，也不需要理解3D建模、3D物体变换等相关知识，就可以完成3D界面的开发，因此，能够简化3D界面的开发流程，达到提高3D界面的开发效率的目的。

如前文所述，在具体实现时，可以直接对浏览装置进行改进，或者对已有的浏览装置内核进行JavaScript扩展，即可支持本发明实施例提供的3D界面展示方法及装置。因此，在本发明实施例中，还提供了一种浏览装置，可以包括前述3D界面展示装置。

前文对本发明实施例提供的3D界面展示装置及浏览装置进行了介绍，由于与3D界面展示方法相对应，因此，未详述部分可以参见方法部分的介绍，这里不再赘述。

以上对本发明所提供的一种3D界面展示方法、装置及浏览装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本发明的限制。

Claims

1.一种3D界面展示方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，所述在网页中展示出3D界面包括：

根据所述函数调用及其相关参数，对3D场景进行初始化；

建立3D对象模型；

根据所述属性语句中包含的属性值对3D对象进行状态设置；

3.根据权利要求2所述的方法，其特征在于，所述根据所述函数调用及其相关参数，对3D场景进行初始化包括：

4.根据权利要求2所述的方法，其特征在于，所述建立3D对象模型包括：

管理对象构造中的相关数据；

管理对象的纹理。

5.根据权利要求2所述的方法，其特征在于，所述根据所述属性语句中包含的属性值对3D对象进行状态设置包括：

6.根据权利要求2所述的方法，其特征在于，所述绘制所述3D对象包括：

调用3D图形库中的接口，绘制所述3D对象。

7.一种3D界面展示装置，其特征在于，包括：

8.根据权利要求7所述的装置，其特征在于，所述展示单元包括：

建模子单元，用于建立3D对象模型；

9.根据权利要求8所述的装置，其特征在于，所述初始化子单元具体用于：对3D场景中以下参数中的任意一种或任意多种的组合进行初始化：显示上下文、视角、相机位置、3D显示句柄、灯光、3D渲染方式。

10.根据权利要求8所述的装置，其特征在于，所述建模子单元包括：

第一管理子单元，用于管理对象构造中的相关数据；

第二管理子单元，用于管理对象的纹理。

11.根据权利要求8所述的装置，其特征在于，所述状态设置子单元具体用于：根据所述属性语句中包含的属性值对3D对象中以下参数中任意一种或多种的组合进行状态设置：透明度、平移变换、旋转变换、变比变换、镜像变换、投影变换、光照、纹理、材质、形状、变换步长。

12.根据权利要求8所述的装置，其特征在于，所述显示子单元具体用于：

调用3D图形库中的接口，绘制所述3D对象。

13.一种浏览装置，其特征在于，包括权利要求7至12任一项所述的3D界面展示装置。