CN104850388B - 网页绘制方法及装置 - Google Patents

Abstract

一种网页绘制方法，包括：获取网页中渲染模式为硬件渲染模式的网页元素，获取所述网页元素中包含的脚本指令和标签信息；获取操作***版本信息，将所述脚本指令和标签信息转换成与所述操作***版本信息对应的***图形引擎指令；创建图形处理器进程，通过所述图形处理器进程执行所述***图形引擎指令，生成相应的渲染数据；通过浏览器进程加载所述生成的渲染数据并展示。此外，还提供了一种网页绘制装置、一种基于3D引擎的图形渲染数据生成方法及装置。上述网页绘制方法及装置、基于3D引擎的图形渲染数据生成方法及装置能够减少指令转换的时间，从而提高执行效率。

Description

网页绘制方法及装置

技术领域

本发明涉及浏览器技术领域，特别是涉及一种网页绘制方法及装置。

背景技术

现有的浏览器技术中，例如谷歌公司的chrome浏览器，对于网页（特别是HTML5定义的网页）中的3D元素通常采用硬件加速技术来绘制。其先将网页中的脚本指令和网页标签转换成OpenGL指令，再将OpenGL指令转换成***图形引擎指令（例如在windows操作***中为DirectX指令），然后才由操作***的图形渲染组件完成对网页的绘制。这种方式就使得在网页绘制中需要经过多次指令转换，从而执行效率不高。

发明内容

基于此，有必要提供一种能提高执行效率的网页绘制方法。

一种网页绘制方法，包括：

获取网页中渲染模式为硬件渲染模式的网页元素，获取所述网页元素中包含的脚本指令和标签信息；

获取操作***版本信息，将所述脚本指令和标签信息转换成与所述操作***版本信息对应的***图形引擎指令；

创建图形处理器进程，通过所述图形处理器进程执行所述***图形引擎指令，生成相应的渲染数据；

通过浏览器进程加载所述生成的渲染数据并展示。

此外，还有必要提供一种能提高执行效率的网页绘制装置。

一种网页绘制装置，包括：

脚本提取模块，用于获取网页中渲染模式为硬件渲染模式的网页元素，获取所述网页元素中包含的脚本指令和标签信息；

指令转换模块，用于获取操作***版本信息，将所述脚本指令和标签信息转换成与所述操作***版本信息对应的***图形引擎指令；

指令执行模块，用于创建图形处理器进程，通过所述图形处理器进程执行所述***图形引擎指令，生成相应的渲染数据；

渲染数据加载模块，用于通过浏览器进程加载所述生成的渲染数据并展示。

此外，还有必要提供一种能提高执行效率的基于3D引擎的图形渲染数据生成方法。

一种基于3D引擎的图形渲染数据生成方法，包括：

获取输入的脚本指令和/或标签信息；

获取操作***版本信息，将所述脚本指令和/或标签信息转换成与所述操作***版本信息对应的***图形引擎指令；

创建图形处理器进程，通过所述图形处理器进程执行所述***图形引擎指令，生成相应的渲染数据并存储在显存中；

生成显存中渲染数据准备就绪的通知指令。

此外，还有必要提供一种能提高执行效率的基于3D引擎的图形渲染数据生成装置。

一种基于3D引擎的图形渲染数据生成装置，包括：

指令获取模块，用于获取输入的脚本指令和/或标签信息；

图形引擎选择模块，用于获取操作***版本信息，将所述脚本指令和/或标签信息转换成与所述操作***版本信息对应的***图形引擎指令；

渲染数据生成模块，用于创建图形处理器进程，通过所述图形处理器进程执行所述***图形引擎指令，生成相应的渲染数据并存储在显存中；

通知模块，用于生成显存中渲染数据准备就绪的通知指令。

上述网页绘制方法及装置、基于3D引擎的图形渲染数据生成方法及装置中，无需先将网页中的脚本指令和网页标签先转换成同一标准的OpenGL指令，再由OpenGL指令转化成底层的***图形引擎指令，而是通过获取操作***版本信息直接将网页中的脚本指令和网页标签转换成底层的***图形引擎指令。使得网页中的渲染模式为硬件加速模式的网页元素中的脚本指令和网页标签能够快速地转换成底层的***图形引擎指令，从而提高了执行效率。

附图说明

图1为一个实施例中网页绘制方法的流程图；

图2为一个应用场景中GDI方式绘制和硬件加速方式绘制网页元素的过程对比图；

图3为一个实施例中多个管理器对象分别转换脚本指令和网页标签的示意图；

图4为一个应用场景中，判断是否启用硬件加速的过程示意图；

图5为一个实施例中网页绘制的过程示意图；

图6为一个实施例中网页绘制装置的结构示意图；

图7为一个实施例中基于3D引擎的图形渲染数据生成方法的流程图；

图8为一个实施例中基于3D引擎的图形渲染数据生成装置的结构示意图。

具体实施方式

在一个实施例中，如图1所示，一种网页绘制方法，该方法的运行可依赖于浏览器程序，该浏览器程序可运行于基于冯诺依曼体系的计算机***之上。该计算机***可以是具备图形处理器（GPU，Graphic Process Unit）的个人电脑、笔记本电脑、平板电脑以及智能手机等。

该方法包括：

步骤S102，获取网页中渲染模式为硬件渲染模式的网页元素，获取网页元素中包含的脚本指令和标签信息。

渲染模式可分为软绘制模式（Software Render）和硬件渲染模式。软绘制模式即以图形设备接口（GDI，Graphic Device Interface）的方式绘制网页元素。硬件渲染模式即为通过***图形引擎指令来控制显卡设备绘制网页。

脚本指令可以是网页中的javascript脚本语言定义的指令。标签信息可以是符合HTML5标准的网页标签。

在本实施例中，可遍历网页中的网页元素，判断网页元素是否为WebGL标签定义的网页元素，若是，则该网页元素即为渲染模式为硬件渲染模式的网页元素。

WebGL为一种3D绘图标准。Web开发人员可通过在HTML5中添加WebGL标签来定义需要以硬件加速方式渲染的网页元素，该部分网页元素在被浏览器渲染时，即可借助***显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

也就是说，在绘制符合HTML5标准的网页的应用场景中，可获取网页中以WebGL标签定义的网页元素，并获取其中包含的脚本指令和网页标签。

在本实施例中，对于渲染模式不为硬件渲染模式的网页元素，例如网页中的文字内容，即可通过前述的图形设备接口的方式进行渲染。

步骤S104，获取操作***版本信息，将脚本指令和标签信息转换成与操作***版本信息对应的***图形引擎指令。

操作***版本信息包含了操作***的类型和版本号信息，对于具有跨平台特性的浏览器可获取到安装该浏览器的操作***的类型和版本号。例如，操作***可以是window、linux或OS X，相应的windows的版本号可以是xp，2003，window7、windows8等。***图形引擎指令即为与操作***适配的符合OpenGL标准的图形渲染指令。例如，对于windows xp***，***图形引擎指令可以是DirectX9.0系列的指令，对于windows8***，***图形引擎指令可以是DirectX11.0系列的指令，对于linux***，则可以是OpenGL指令。***图形引擎指令也可以不是操作***自带的图形引擎指令，而是第三方开源组织为某个操作***编写的第三方图形引擎指令。

步骤S106，创建图形处理器进程，通过图形处理器进程执行***图形引擎指令，生成相应的渲染数据。

图形处理器进程即为GPU进程，可通过GPU驱动程序创建GPU进程。GPU进程创建后，即可在该进程中执行前述已转换的***图形引擎指令，从而生成相应的渲染数据。该GPU生成的渲染数据存储在显存（显存，也被叫做帧缓存，它的作用是用来存储显卡芯片处理过或者即将提取的渲染数据）中。

步骤S108，通过浏览器进程加载生成的渲染数据并展示。

GPU进程通过执行转换后的***图形引擎指令生成渲染数据之后，即可生成显存中渲染数据准备就绪的通知指令，并通过操作***传递给浏览器进程，即通知浏览器进程显存中的渲染数据已准备就绪，浏览器进程即可将该生成的渲染数据加载，然后展示到显示屏上。

优选的，通过图形处理器进程生成相应的渲染数据的步骤可具体为：通过图形处理器进程以渲染到纹理的方式生成渲染数据并存储在显存中。

浏览器即可通过在显存中读取该生成的渲染数据将其加载。

渲染到纹理的方式即为RTT（Render to Texture）方式。如图3所示，RTT方式生成的渲染数据并不会直接展示到显示屏上，而是被缓存在显示适配器（显卡）的显存中（如图3中最终生成的Bitmap1数据，即为通过RTT方式生成的渲染数据，对应3D动画等网页内容），而以GDI方式生成的渲染数据同样也需要先存储在显存中（如图3中最终生成的Bitmap2数据，即为通过GDI方式生成的渲染数据，对应文字内容等网页元素），再由浏览器进程读取后再显示到显示屏上。因此，浏览器进程可在显存中分别读取以GDI方式生成的渲染数据（对应文字内容）和以RTT方式生成的渲染数据（对应3D图像等经过硬件加速生成渲染数据），然后将其组合拼接后再显示到显示屏上，网页即可得到完整的展示。

优选的，将脚本指令和标签信息转换成与操作***版本信息对应的***图形引擎指令包括：

获取脚本指令和标签信息的类型，获取脚本指令和标签信息的类型对应的转换引擎接口函数；

根据转换引擎接口函数将脚本指令和标签信息转换成与操作***版本信息对应的***图形引擎指令。

进一步的，转换引擎接口函数包括场景创建接口函数、渲染算法接口函数和资源加载接口函数中的至少一种。

如图4所示，可预设场景管理器对象、渲染管理器对象和资源管理器对象。

对于用于创建3D场景中的实体的脚本指令或网页标签，例如创建地形、植被、人物等实体的脚本指令或网页标签，即可通过调用场景创建接口函数对其进行转换。此外，还可通过场景管理器对象可以对创建的3D场景中的实体进行各种优化处理，例如，相应的搜索、排序以及剔除功能，以及进行碰撞检测。

对于用于对创建的3D场景中的实体进行渲染算法渲染的脚本指令或网页标签，例如光照渲染算法、透明度处理算法和Z排序处理算法等对应的脚本或网页标签，则可通过调用渲染算法接口函数对其进行转换。

对于获取资源文件的脚本指令或网页标签，例如用于读取本地浏览器缓存中的图片、音频或视频素材文件的脚本和网页标签，以及用于抓取远程服务器上的图片、音频或视频素材文件的脚本和网页标签，则可通过调用资源加载接口函数对其进行转换

也就是说，调用上述转换引擎接口函数之前，先对脚本指令和网页标签进行分类，然后对每种类型的脚本指令和网页标签则调用相应的转换引擎接口函数，在该转换引擎接口函数中，再根据操作***版本信息选择合适的类型的***图形引擎指令，然后在该转换引擎接口函数的调用过程中，将脚本指令和网页标签转换成***图形引擎指令。

在本实施例中，获取操作***版本信息的步骤之后还包括：

获取显卡驱动信息，根据操作***版本信息和/或显卡驱动信息判断是否支持硬件加速，若否，则以图形设备接口的方式绘制网页元素。

对于部分计算机，其显示适配器较老，或者其驱动版本较旧，从而不支持前述***图形引擎指令。可预设支持硬件加速的显卡列表，然后将获取到的显卡驱动信息与该支持硬件加速的显卡列表进行比对，若该列表中不包含该显卡驱动信息，则仍以GDI的方式绘制网页。

例如，在一个应用场景中，可在网页上设置一个可供用户点击切换的开关按钮，用于切换开启和关闭是否进行硬件加速的状态。在进行网页绘制的过程中，则如图4所示，先判断该开关按钮是否已切换到开启硬件加速的状态，若是，则查找网页上的标签元素，判断是否包含WebGL标签，若是，则获取操作***版本信息和显卡驱动信息，其中显卡驱动信息中包含了显卡的类型、型号（通常为显卡公司规范的标识型号）以及显卡驱动编号等信息，可在预设的过滤表（或者支持表）中查找显卡型号、操作***版本信息、显卡驱动编号，若查找结果为支持硬件加速，则将WebGL标签下定义的脚本指令和/或网页标签传递给3D引擎，并根据操作***版本信息将其转换成***图形引擎指令。

在本实施例中，如图5所示，展示了获取到渲染模式为硬件加速模式的网页元素，并提取到相应的javascript指令和网页标签后进行指令转换以及完成网页绘制的整个过程。

在一个实施例中，如图6所示，一种网页绘制装置，包括：脚本提取模块102、指令转换模块104、指令执行模块106以及渲染数据加载模块108，其中：

脚本提取模块102，用于获取网页中渲染模式为硬件渲染模式的网页元素，获取网页元素中包含的脚本指令和标签信息。

指令转换模块104，用于获取操作***版本信息，将脚本指令和标签信息转换成与操作***版本信息对应的***图形引擎指令。

指令执行模块106，用于创建图形处理器进程，通过图形处理器进程执行***图形引擎指令，生成相应的渲染数据。

渲染数据加载模块108，用于通过浏览器进程加载生成的渲染数据并展示。

在本实施例中，脚本提取模块102还用于遍历网页中的网页元素，判断网页元素是否为WebGL标签定义的网页元素，若是，则该网页元素即为渲染模式为硬件渲染模式的网页元素。

在本实施例中，指令转换模块104还用于获取脚本指令和标签信息的类型，获取脚本指令和标签信息的类型对应的转换引擎接口函数；根据转换引擎接口函数将脚本指令和标签信息转换成与操作***版本信息对应的***图形引擎指令。

在本实施例中，转换引擎接口函数包括场景创建接口函数、渲染算法接口函数和资源加载接口函数中的至少一种。

在本实施例中，指令执行模块106还用于通过图形处理器进程以渲染到纹理的方式生成渲染数据并存储在显存中；

渲染数据加载模块108还用于通过浏览器进程在显存中读取生成的渲染数据将其加载。

在本实施例中，指令转换模块104还用于获取显卡驱动信息，根据操作***版本信息和/或显卡驱动信息判断是否支持硬件加速，若否，则以图形设备接口的方式绘制网页元素。

在一个实施例中，如图7所示，一种基于3D引擎的图形渲染数据生成方法，包括：

步骤S202，获取输入的脚本指令和/或标签信息。

步骤S204，获取操作***版本信息，将脚本指令和/或标签信息转换成与操作***版本信息对应的***图形引擎指令。

步骤S206，创建图形处理器进程，通过图形处理器进程执行***图形引擎指令，生成相应的渲染数据并存储在显存中。

步骤S208，生成显存中渲染数据准备就绪的通知指令。

在一个实施例中，如图8所示，一种基于3D引擎的图形渲染数据生成装置，包括指令获取模块202、图形引擎选择模块204、渲染数据生成模块206以及通知模块208，其中：

指令获取模块202，用于获取输入的脚本指令和/或标签信息。

图形引擎选择模块204，用于获取操作***版本信息，将所述脚本指令和/或标签信息转换成与所述操作***版本信息对应的***图形引擎指令。

渲染数据生成模块206，用于创建图形处理器进程，通过所述图形处理器进程执行所述***图形引擎指令，生成相应的渲染数据并存储在显存中。

通知模块208，用于生成显存中渲染数据准备就绪的通知指令。

上述网页绘制方法及装置、基于3D引擎的图形渲染数据生成方法及装置中，无需先将网页中的脚本指令和网页标签先转换成同一标准的OpenGL指令，再由OpenGL指令转化成底层的***图形引擎指令，而是通过获取操作***版本信息直接将网页中的脚本指令和网页标签转换成底层的***图形引擎指令。使得网页中的渲染模式为硬件加速模式的网页元素中的脚本指令和网页标签能够快速地转换成底层的***图形引擎指令，从而提高了执行效率。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (14)

1.一种网页绘制方法，包括：

获取网页中渲染模式为硬件渲染模式的网页元素，获取所述网页元素中包含的脚本指令和标签信息；

获取操作***版本信息，将所述脚本指令和标签信息转换成类型与所述操作***版本信息对应的***图形引擎指令；

创建图形处理器进程，通过所述图形处理器进程执行所述***图形引擎指令，生成相应的渲染数据；

通过浏览器进程加载生成的渲染数据并展示。

2.根据权利要求1所述的网页绘制方法，其特征在于，所述获取网页中渲染模式为硬件渲染模式的网页元素的步骤包括：

遍历所述网页中的网页元素，判断所述网页元素是否为WebGL标签定义的网页元素，若是，则该网页元素即为渲染模式为硬件渲染模式的网页元素。

3.根据权利要求1所述的网页绘制方法，其特征在于，所述将所述脚本指令和标签信息转换成类型与所述操作***版本信息对应的***图形引擎指令包括：

获取所述脚本指令和标签信息的类型，获取所述脚本指令和标签信息的类型对应的转换引擎接口函数；

根据所述转换引擎接口函数将所述脚本指令和标签信息转换成类型与所述操作***版本信息对应的***图形引擎指令。

4.根据权利要求3所述的网页绘制方法，其特征在于，所述转换引擎接口函数包括场景创建接口函数、渲染算法接口函数和资源加载接口函数中的至少一种。

5.根据权利要求1所述的网页绘制方法，其特征在于，所述通过所述图形处理器进程执行所述***图形引擎指令，生成相应的渲染数据的步骤为：

通过所述图形处理器进程以渲染到纹理的方式生成渲染数据并存储在显存中；

所述通过浏览器进程加载生成的渲染数据的步骤为：

通过浏览器进程在显存中读取生成的渲染数据将其加载。

6.根据权利要求1所述的网页绘制方法，其特征在于，所述获取操作***版本信息的步骤之后还包括：

获取显卡驱动信息，根据所述操作***版本信息和/或显卡驱动信息判断是否支持硬件加速，若否，则以图形设备接口的方式绘制所述网页元素。

7.一种网页绘制装置，其特征在于，包括：

脚本提取模块，用于获取网页中渲染模式为硬件渲染模式的网页元素，获取所述网页元素中包含的脚本指令和标签信息；

指令转换模块，用于获取操作***版本信息，将所述脚本指令和标签信息转换成类型与所述操作***版本信息对应的***图形引擎指令；

指令执行模块，用于创建图形处理器进程，通过所述图形处理器进程执行所述***图形引擎指令，生成相应的渲染数据；

渲染数据加载模块，用于通过浏览器进程加载生成的渲染数据并展示。

8.根据权利要求7所述的网页绘制装置，其特征在于，所述脚本提取模块还用于遍历所述网页中的网页元素，判断所述网页元素是否为WebGL标签定义的网页元素，若是，则该网页元素即为渲染模式为硬件渲染模式的网页元素。

9.根据权利要求7所述的网页绘制装置，其特征在于，所述指令转换模块还用于获取所述脚本指令和标签信息的类型，获取所述脚本指令和标签信息的类型对应的转换引擎接口函数；根据所述转换引擎接口函数将所述脚本指令和标签信息转换成类型与所述操作***版本信息对应的***图形引擎指令。

10.根据权利要求9所述的网页绘制装置，其特征在于，所述转换引擎接口函数包括场景创建接口函数、渲染算法接口函数和资源加载接口函数中的至少一种。

11.根据权利要求7所述的网页绘制装置，其特征在于，所述指令执行模块还用于通过所述图形处理器进程以渲染到纹理的方式生成渲染数据并存储在显存中；

所述渲染数据加载模块还用于通过浏览器进程在显存中读取生成的渲染数据将其加载。

12.根据权利要求7所述的网页绘制装置，其特征在于，所述指令转换模块还用于获取显卡驱动信息，根据所述操作***版本信息和/或显卡驱动信息判断是否支持硬件加速，若否，则以图形设备接口的方式绘制所述网页元素。

13.一种基于3D引擎的图形渲染数据生成方法，包括：

获取输入的脚本指令和/或标签信息；

获取操作***版本信息，将所述脚本指令和/或标签信息转换成类型与所述操作***版本信息对应的***图形引擎指令；

创建图形处理器进程，通过所述图形处理器进程执行所述***图形引擎指令，生成相应的渲染数据并存储在显存中；

生成显存中渲染数据准备就绪的通知指令。

14.一种基于3D引擎的图形渲染数据生成装置，其特征在于，包括：

指令获取模块，用于获取输入的脚本指令和/或标签信息；

图形引擎选择模块，用于获取操作***版本信息，将所述脚本指令和/或标签信息转换成类型与所述操作***版本信息对应的***图形引擎指令；

渲染数据生成模块，用于创建图形处理器进程，通过所述图形处理器进程执行所述***图形引擎指令，生成相应的渲染数据并存储在显存中；

通知模块，用于生成显存中渲染数据准备就绪的通知指令。