CN102591651A - 一种网页3d渲染和控制方法及装置 - Google Patents

Abstract

本发明适用于计算机应用领域，提供了一种网页3D渲染和控制方法及装置，所述方法包括：通过网页画布元素文档对象模型接口获得网页3D图形接口；创建本地窗口及本地窗口控制器，在所述本地窗口控制器中创建绘图线程，并设置绘图间隔时间；触发预备完成事件，初始化着色器及图形数据缓存区；运行所述绘图线程，取得所述本地窗口状态；根据所述本地窗口状态，所述绘图线程执行相应的操作。在本发明实施例中，由于通过本地线程来定时触发3D场景绘制效率较高，使得动画的绘制更加流畅和高效。且web引擎就能实现通过取得的本地窗口的不同状态执行不同的操作，减少了网页前端开发难度。

Description

一种网页3D渲染和控制方法及装置

技术领域

本发明属于计算机应用领域，尤其涉及一种网页3D渲染和控制方法及装置。

背景技术

随着科技的进步，网页技术的飞速发展，传统的2D网页已经无法满足人们的需求。目前，HTML(文本标记语言，Hypertext Markup Language)5使用WebGL(一种3D绘图标准)作为网页3D图形接口，以此建立了javascript(一种脚本语言)和OpenGL ES(OpenGL for Embedded Systems，OpenGL三维图形应用程序编程接口的子集)之间的调用桥梁。因而，网页前端人员通过webgl调用OpenGL ES即可实现3D画面的绘制。具体的绘制方法主要有以下两种：

其一，采用定时器绘制3D场景。

首先，通过网页画布元素得到网页3D图形接口，在初始化着色器和图形数据缓存区后设置定时器，并设定定时器的定时时间。当网页关闭时则结束3D场景的绘制；在网页未关闭的状态下，调用web引擎3D图形绘制接口，绘制一个3D场景，并在定时器定时时间到后绘制下一个3D场景。

然而，当用户与网页交互较多或前后两个场景变化很大时，由于javascript本身执行效率低及定时器的不稳定性，会导致3D场景转换不流畅。

其二，通过调用javascript库执行3D场景绘制。

通过网页画布元素得到网页3D图形接口，初始化着色器和图形数据缓存区后，调用javascript库执行3D场景绘制。

但是，对于多标签浏览器而言，当前标签窗口没有激活时，仍然会一直绘制3D场景，浪费系统资源。若采用特定的javascript库解决该问题则会增加前端开发难度。

因此，采用定时器绘制3D场景会导致3D场景转换不流畅，而采用javascript库绘制3D场景则使得前端开发难度较大。

发明内容

本发明实施例的目的在于提供一种网页3D渲染和控制方法及装置，旨在解决现有技术会导致3D场景转换不流畅且前端开发难度大的问题。

本发明实施例是这样实现的，一种网页3D渲染和控制方法，所述方法包括：

通过网页画布元素文档对象模型接口获得网页3D图形接口；

创建本地窗口及本地窗口控制器，在所述本地窗口控制器中创建绘图线程，并设置绘图间隔时间；

触发预备完成事件，初始化着色器及图形数据缓存区；

运行所述绘图线程，取得所述本地窗口状态；

根据所述本地窗口状态，所述绘图线程执行相应的操作。

进一步的，所述本地窗口状态包括：本地窗口销毁、本地窗口未销毁、本地窗口激活、本地窗口非激活、本地窗口大小未改变及本地窗口大小改变。

进一步的，所述根据所述本地窗口状态，所述绘图线程执行相应的操作包括：

当所述本地窗口处于本地窗口销毁状态时，退出所述绘图线程。

更进一步的，所述根据所述本地窗口状态，所述绘图线程执行相应的操作包括：

当所述本地窗口处于本地窗口未销毁，但本地窗口非激活状态时，暂停所述绘图线程，当所述本地窗口恢复激活状态时运行所述绘图线程。

再进一步的，所述根据所述本地窗口状态，所述绘图线程执行相应的操作包括：

当所述本地窗口处于本地窗口未销毁，本地窗口非激活状态且本地窗口大小未改变状态时，线程休眠所述间隔时间后，激发场景绘制事件绘制3D场景；

当所述本地窗口处于本地窗口未销毁，本地窗口非激活状态且本地窗口大小改变状态时，激发窗口改变事件，调用网页3D图形接口改变绘图的宽和高。

本发明实施例的另一目的在于提供网页3D渲染和控制装置，所述装置包括：

图形接口获取模块，用于通过网页画布元素文档对象模型接口获得网页3D图形接口；

线程创建模块，用于创建本地窗口及本地窗口控制器，在所述本地窗口控制器中创建绘图线程，并设置绘图间隔时间；

着色器初始化模块，用于触发预备完成事件，初始化着色器及图形数据缓存区；

窗口状态获取模块，用于运行所述绘图线程，取得所述本地窗口状态；

操作执行模块，用于根据所述本地窗口状态，所述绘图线程执行相应的操作。

进一步的，所述本地窗口状态包括：本地窗口销毁、本地窗口未销毁、本地窗口激活、本地窗口非激活、本地窗口大小未改变及本地窗口大小改变。

进一步的，所述操作执行模块包括：

销毁状态模块，用于当所述本地窗口处于本地窗口销毁状态时，退出所述绘图线程。

更进一步的，所述操作执行模块包括：

非激活状态模块，用于当所述本地窗口处于本地窗口未销毁，但本地窗口非激活状态时，暂停所述绘图线程，当所述本地窗口恢复激活状态时运行所述绘图线程。

再进一步的，所述操作执行模块包括：

窗口大小未改变模块，用于当所述本地窗口处于本地窗口未销毁，本地窗口非激活状态且本地窗口大小未改变状态时，线程休眠所述间隔时间后，激发场景绘制事件绘制3D场景；

窗口大小改变模块，用于当所述本地窗口处于本地窗口未销毁，本地窗口非激活状态且本地窗口大小改变状态时，激发窗口改变事件，调用网页3D图形接口改变绘图的宽和高。

在本发明实施例中，由于通过本地线程来定时触发3D场景绘制效率较高，使得动画的绘制更加流畅和高效。且web引擎就能实现通过取得的本地窗口的不同状态执行不同的操作，减少了网页前端开发难度。

附图说明

图1是本发明第一实施例提供的网页3D渲染和控制方法流程图；

图2是本发明第二实施例提供的根据本地窗口状态，绘图线程执行相应的操作的方法流程图；

图3是本发明第三实施例提供的一种用于实现网页3D渲染和控制的装置的功能模块图；

图4本发明第四实施例提供的网页3D渲染和控制模块图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例提供一种网页3D渲染和控制方法，通过采用web引擎中的本地线程来实现3D场景的绘制，使得网页3D动画能够流畅呈现。并通过定义特定的web引擎文档对象模型(Document Object Model，DOM)事件来根据本地窗口的状态执行相应的操作，避免动画在窗口未激活时仍然绘制的情况。

本发明提供了一种网页3D渲染和控制方法：

通过网页画布元素文档对象模型接口获得网页3D图形接口；

创建本地窗口及本地窗口控制器，在所述本地窗口控制器中创建绘图线程，并设置绘图间隔时间；

触发预备完成事件，初始化着色器及图形数据缓存区；

运行所述绘图线程，取得所述本地窗口状态；

根据所述本地窗口状态，所述绘图线程执行相应的操作。

所述装置包括：

图形接口获取模块，用于通过网页画布元素文档对象模型接口获得网页3D图形接口；

线程创建模块，用于创建本地窗口及本地窗口控制器，在所述本地窗口控制器中创建绘图线程，并设置绘图间隔时间；

着色器初始化模块，用于触发预备完成事件，初始化着色器及图形数据缓存区；

窗口状态获取模块，用于运行所述绘图线程，取得所述本地窗口状态；

操作执行模块，用于根据所述本地窗口状态，所述绘图线程执行相应的操作。

为了说明本发明所述的技术方案，下面通过具体实施例来进行说明。

实施例一：

如图1所示为本发明提供的网页3D渲染和控制方法的流程图，为了便于说明，仅示出了与本发明实施例相关的部分。

在步骤S101中，通过网页画布元素DOM接口获得网页3D图形接口。

在本发明实施例中，在网页javascript中通过画布元素DOM接口获得网页3D图形接口。其中，网页3D图形接口用于初始化本地窗口，设置设备3D渲染配置，并通过调用OpenGL ES相关接口来实现3D绘图。

在步骤S102中，创建本地窗口及本地窗口控制器，在本地窗口控制器中创建绘图线程，并设置绘图间隔时间。

在本发明实施例中，本地窗口用于显示3D画面的图形界面。本地窗口控制器用于获取本地窗口的状态及绘图线程的创建和管理。所述绘图间隔时间为一段固定的时间。

在步骤S103中，触发预备完成事件，初始化着色器及图形数据缓存区。

在本发明实施例中，本地窗口控制器发出预备完成事件，在成功触发预备完成事件后，网页初始化着色器及图形数据缓存区。

在本发明实施例中，定义了特定的web引擎DOM事件，所述DOM事件包括但不限于：预备完成事件、窗口改变事件及场景绘制事件。其中，激发预备完成事件能初始化着色器及图形数据缓存区；激发窗口改变事件能调用网页3D图形接口改变绘图的宽和高；激发场景绘制事件能绘制3D场景。

在步骤S104中，运行绘图线程，取得本地窗口状态。

在本发明实施例中，运行绘图线程后，绘图线程取得本地窗口状态。其中，本地窗口状态包括但不限于：本地窗口销毁、本地窗口未销毁、本地窗口激活、本地窗口非激活、本地窗口大小未改变及本地窗口大小改变。

在步骤S105中，根据本地窗口状态，绘图线程执行相应的操作。

在本发明实施例中，由于取得的本地窗口状态不同，则绘图线程所执行的操作也不同。当本地窗口处于本地窗口销毁状态时，退出绘图线程；当本地窗口处于本地窗口未销毁，但本地窗口非激活状态时，暂停绘图线程，当本地窗口恢复激活状态时运行绘图线程；当本地窗口处于本地窗口未销毁，本地窗口非激活状态且本地窗口大小未改变时，让线程休眠绘图间隔时间后，激发场景绘制事件绘制3D场景；当本地窗口处于本地窗口未销毁，本地窗口非激活状态且本地窗口大小改变时，激发窗口改变事件，调用网页3D图形接口改变绘图的宽和高。具体如图2所示，此处不再赘述。

在本发明实施例中，由于通过本地线程来定时触发3D场景绘制效率较高，使得动画的绘制更加流畅和高效。且web引擎就能实现通过取得的本地窗口的不同状态执行不同的操作，减少了网页前端开发难度。

实施例二：

如图2所示为本发明提供的根据本地窗口状态，绘图线程执行相应的操作(图1步骤S105)的方法流程图，为了便于说明，仅示出了与本发明实施例相关的部分。

在步骤S201中，获取本地窗口状态；

在步骤S202中，判断本地窗口是否处于本地窗口销毁状态，是则执行步骤S208，否则执行步骤S203；

在步骤S203中，判断本地窗口是否处于本地窗口激活状态，是则执行步骤S205，否则执行步骤S204。

在步骤S204中，暂停绘图线程，当本地窗口恢复激活状态时运行绘图线程。

在本发明实施例中，当本地窗口处于未激活状态时，为了防止在当前标签窗口未激活却一直绘制3D场景的问题，暂停绘图线程，节约了系统资源。直到本地窗口恢复激活状态时运行绘图线程。

在步骤S205中，判断窗口大小是否改变，是则执行步骤S206，否则执行步骤S207。

在步骤S206中，激发窗口改变事件，调用网页3D图形接口改变绘图的宽和高。

在本发明实施例中，若窗口大小发生了改变，则激发窗口改变事件，调用网页3D图形接口改变绘图的宽和高，使得绘图的宽和高与窗口大小相适应。

在步骤S207中，线程休眠所述间隔时间后，激发场景绘制事件绘制3D场景。

在本发明实施例中，若窗口大小未发生改变，则在线程休眠所述间隔时间后，激发场景绘制事件绘制3D场景。

在步骤S208中，结束操作。

在本发明实施例中，当本地窗口处于未激活状态时，为了防止在当前标签窗口未激活却一直绘制3D场景的问题，暂停绘图线程，节约了系统资源。且不需要前端开发再去主动判断绘制窗口大小何时改变，窗口改变时机由web引擎通过发出窗口改变事件来通知前端页面，然后调用网页3D图形接口改变绘图的宽和高，重新设置绘图大小即可，降低了前端开发的难度。

实施例三：

在本发明实施例中，提供了一种具体的用于实现网页3D渲染和控制的装置实例，其功能模块如图3所示。

在本发明实施例中，功能模块主要包括四大块，分别为：web页面31、web引擎32、图形用户界面系统33及OpenGL ES34。其中：

Web页面31为javascript调用网页3D图形接口的流程部分。包括三个模块，分别为：3D接口预备完成模块311、窗口改变处理模块312及绘制3D场景模块313。具体为：

3D接口预备完成模块311，与预备完成事件相对应，用于初始化着色器及图形数据缓存区。

窗口改变处理模块312，与激发窗口改变事件相对应，用于调用网页3D图形接口改变绘图的宽和高。

绘制3D场景模块313，与激发场景绘制事件相对应，用于绘制3D场景。

web引擎32为浏览器核心功能模块，包括四个子模块，分别为：网页3D图形接口321、3D DOM事件322、本地窗口控制器323及本地窗口324。具体为：

网页3D图形接口321，用于初始化本地窗口，设置设备3D渲染配置，并通过调用openGL ES相关接口来实现3D绘图。

3D DOM事件322，用于定义渲染3D动画的主要部分，具体包括三个特定的事件：预备完成事件、窗口改变事件及场景绘制事件。

本地窗口控制器323，获取本地窗口的状态及绘图线程的创建和管理。

本地窗口324，用于显示3D画面的图形界面。

图形用户界面系统33，用于负责管理和改变本地窗口状态。

OpenGL ES34为开源的公开图形绘制模块。

实施例四：

图4为本发明实施例提供的网页3D渲染和控制装置模块图，为了便于说明，仅示出了与本发明实施例相关的部份。该装置可以是内置于手机、电脑等电子设备中的软件单元、硬件单元或者软硬件相结合的单元，或者作为独立的挂件集成到这些电子设备或电子设备的应用系统中。其中：

图形接口获取模块41，用于通过网页画布元素DOM接口获得网页3D图形接口。

线程创建模块42，用于创建本地窗口及本地窗口控制器，在本地窗口控制器中创建绘图线程，并设置绘图间隔时间。

着色器初始化模块43，用于触发预备完成事件，初始化着色器及图形数据缓存区。

在本发明实施例中，定义了特定的web引擎DOM事件，所述DOM事件包括但不限于：预备完成事件、窗口改变事件及场景绘制事件。其中，激发预备完成事件能初始化着色器及图形数据缓存区；激发窗口改变事件能调用网页3D图形接口改变绘图的宽和高；激发场景绘制事件能绘制3D场景。

窗口状态获取模块44，用于运行绘图线程，取得本地窗口状态。

在本发明实施例中，本地窗口状态包括但不限于：本地窗口销毁、本地窗口未销毁、本地窗口激活、本地窗口非激活、本地窗口大小未改变及本地窗口大小改变。

操作执行模块45，用于根据本地窗口状态，绘图线程执行相应的操作。

在本发明实施例中，所述操作执行模块45包括4个子模块，分别为：

销毁状态模块451，用于当本地窗口处于本地窗口销毁状态时，退出绘图线程。

非激活状态模块452，用于当本地窗口处于本地窗口未销毁，但本地窗口非激活状态时，暂停绘图线程，当本地窗口恢复激活状态时运行绘图线程。

窗口大小未改变模块453，用于当本地窗口处于本地窗口未销毁，本地窗口非激活状态且本地窗口大小未改变时，让线程休眠绘图间隔时间后，激发场景绘制事件绘制3D场景。

窗口大小改变模块454，用于当本地窗口处于本地窗口未销毁，本地窗口非激活状态且本地窗口大小改变时，激发窗口改变事件，调用网页3D图形接口改变绘图的宽和高。

在本发明实施例中，由于通过本地线程来定时触发3D场景绘制效率较高，使得动画的绘制更加流畅和高效。且web引擎就能实现通过取得的本地窗口的不同状态执行不同的操作，减少了网页前端开发难度。

本领域普通技术人员可以理解，实现上述实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，所述的程序可以在存储于一计算机可读取存储介质中，所述的存储介质，如ROM/RAM、磁盘、光盘等。

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

Claims (10)

1.一种网页3D渲染和控制方法，其特征在于，所述方法包括下述步骤：

A：通过网页画布元素文档对象模型接口获得网页3D图形接口；

B：创建本地窗口及本地窗口控制器，在所述本地窗口控制器中创建绘图线程，并设置绘图间隔时间；

C：触发预备完成事件，初始化着色器及图形数据缓存区；

D：运行所述绘图线程，取得所述本地窗口状态；

E：根据所述本地窗口状态，所述绘图线程执行相应的操作。

2.如权利要求1所述的方法，其特征在于，所述本地窗口状态包括：

本地窗口销毁、本地窗口未销毁、本地窗口激活、本地窗口非激活、本地窗口大小未改变及本地窗口大小改变。

3.如权利要求2所述的方法，其特征在于，所述步骤E的操作包括：

当所述本地窗口处于本地窗口销毁状态时，退出所述绘图线程。

4.如权利要求2所述的方法，其特征在于，所述步骤E的操作包括：

当所述本地窗口处于本地窗口未销毁，但本地窗口非激活状态时，暂停所述绘图线程，当所述本地窗口恢复激活状态时运行所述绘图线程。

5.如权利要求2所述的方法，其特征在于，所述步骤E的操作包括：

当所述本地窗口处于本地窗口未销毁，本地窗口非激活状态且本地窗口大小未改变状态时，线程休眠所述间隔时间后，激发场景绘制事件绘制3D场景；

当所述本地窗口处于本地窗口未销毁，本地窗口非激活状态且本地窗口大小改变状态时，激发窗口改变事件，调用网页3D图形接口改变绘图的宽和高。

6.一种网页3D渲染和控制装置，其特征在于，所述装置包括：

图形接口获取模块，用于通过网页画布元素文档对象模型接口获得网页3D图形接口；

线程创建模块，用于创建本地窗口及本地窗口控制器，在所述本地窗口控制器中创建绘图线程，并设置绘图间隔时间；

着色器初始化模块，用于触发预备完成事件，初始化着色器及图形数据缓存区；

窗口状态获取模块，用于运行所述绘图线程，取得所述本地窗口状态；

操作执行模块，用于根据所述本地窗口状态，所述绘图线程执行相应的操作。

7.如权利要求6所述的装置，其特征在于，所述本地窗口状态包括：

本地窗口销毁、本地窗口未销毁、本地窗口激活、本地窗口非激活、本地窗口大小未改变及本地窗口大小改变。

8.如权利要求7所述的装置，其特征在于，所述操作执行模块包括：

销毁状态模块，用于当所述本地窗口处于本地窗口销毁状态时，退出所述绘图线程。

9.如权利要求7所述的装置，其特征在于，所述操作执行模块还包括：

非激活状态模块，用于当所述本地窗口处于本地窗口未销毁，但本地窗口非激活状态时，暂停所述绘图线程，当所述本地窗口恢复激活状态时运行所述绘图线程。

10.如权利要求7所述的装置，其特征在于，所述操作执行模块还包括：

窗口大小未改变模块，用于当所述本地窗口处于本地窗口未销毁，本地窗口非激活状态且本地窗口大小未改变状态时，线程休眠所述间隔时间后，激发场景绘制事件绘制3D场景；

窗口大小改变模块，用于当所述本地窗口处于本地窗口未销毁，本地窗口非激活状态且本地窗口大小改变状态时，激发窗口改变事件，调用网页3D图形接口改变绘图的宽和高。

Images