CN116700860A - 基于Web操作系统上的原生窗口实现窗口绘制的方法及系统 - Google Patents

Abstract

基于Web操作系统上的原生窗口实现窗口绘制的方法及系统，系统包括运行于Web应用上的图形数据生产模块以及运行于Web引擎上的原生窗口兼容模块及合成模块，原生窗口兼容模块在Web引擎的管理下创建原生窗口兼容接口实例并返回给图形数据生产模块，该原生窗口兼容接口实例中实现有图形缓冲区队列模块，图形数据生产模块向对应的图形缓冲区队列模块中的图形缓冲区推送图形显示内容，供合成模块提取，完成窗口的绘制。本发明可以在Web操作系统上，为Web应用提供访问原生窗口的能力，Web应用可以通过原生代码访问原生窗口，使用硬件加速接口向原生窗口生产图形内容，扩展了Web应用的开发能力，提高了图形渲染场景和多媒体播放场景下的应用性能水平。

Description

基于Web操作系统上的原生窗口实现窗口绘制的方法及系统

技术领域

本发明涉及计算机信息技术领域，具体涉及基于Web操作系统上的原生窗口实现窗口绘制的方法及系统。

背景技术

Web应用中，通常使用Web技术如HTML、JavaScript、CSS进行UI交互逻辑的开发，在一定程度上，可以获得优秀的跨平台效果。在特定场景下，用户交互界面需要由直接绘制接口开发，以满足高度定制化的Direct UI交互需求，常见的场景如网页游戏和地图等，在Web开发中一般通过Canvas2D和WebGL技术以满足此需求。其中Canvas2D技术基于Skia绘图引擎，通过将Canvas2D的绘制请求转化为Skia绘制指令执行，并将Skia的绘制结果读取并发送至Web引擎通过GPU合成并送显；其中WebGL技术基于OpenGL ES渲染接口，使用JavaScript直接调用GPU指令完成绘制并合成、送显。

在基于Web技术的操作系统中，以上所述的Canvas2D技术，使用过程中通常存在Skia无法充分利用硬件加速，绘制指令执行缓慢的问题，导致UI绘制请求大量占用JavaScript线程的执行时间，进而导致交互卡顿，影响用户体验。同时以上所述的Canvas2D技术和WebGL技术，在高度封装底层数据结构的基础上，造成了无法直接访问原生图形硬件缓冲区的问题，导致其图形数据无法与其他系统模块共享，往往需要通过CPU进行图形硬件缓冲区的读写来实现图形数据的跨模块通信。

此外，在基于Web技术的终端操作系统中，通常提供基于图形缓冲区队列的原生窗口接口，统一管理图形缓冲区的申请、访问和释放等流程。根据生产-消费模型，图形缓冲区队列中分为消费者端和消费者端，通过Binder提供的进程间通信能力，在不同进程间发送和共享图形缓冲区，在多进程模型下，可以明显的减少IPC过程中的图形数据拷贝操作，提升图形渲染性能。但Web应用无法通过Web引擎目前具有的接口直接访问到该原生窗口接口。

公开号为CN115168756A的发明，公开了一种基于WEB移动操作系统的本地图像渲染系统，包括：在WEB移动操作系统图形渲染引擎的基础上扩展了绘制窗口抽象层，包括：图像渲染模块和容器管理模块；其中，图像渲染块包括绘制初始化模块、绘制窗口上下文模块和重绘模块；容器管理模块包括注册容器模块、注销容器模块和事件分发模块；所述容器管理模块负责管理绘制应用Canvas容器窗口状态；所述图像渲染模块负责在第三方平库完成绘制后同步通知绘制应用Canvas容器窗口进行重绘，实现本地图像数据的渲染。

发明内容

为解决已有技术存在的不足，本发明提供了一种基于Web操作系统上的原生窗口实现窗口绘制的系统，包括运行于Web应用上的图形数据生产模块，以及运行于Web引擎上的原生窗口兼容模块及合成模块，图形数据生产模块及合成模块均与原生窗口兼容模块连接，其中，

原生窗口兼容模块在Web引擎的管理下创建原生窗口兼容接口实例并返回给图形数据生产模块，该原生窗口兼容接口实例中实现有图形缓冲区队列模块，图形数据生产模块向对应的图形缓冲区队列模块中的图形缓冲区推送图形显示内容，供合成模块提取，完成窗口的绘制。

其中，所述原生窗口兼容模块包括依次连接的接口兼容模块、图形缓冲区队列模块及图形缓冲区管理模块，其中，

图形缓冲区队列模块用于基于Web操作系统原生窗口的实现方式在Web引擎中构建图形缓冲区队列，并分别实现图形缓冲区队列的生产者端和消费者端，以分别实现对图形缓冲区的入队和出队操作；图形缓冲区队列与原生窗口兼容接口实例一一对应；

图形缓冲区管理模块用于维护并管理Web引擎中所有图形缓冲区队列模块中图形缓冲区的分配、释放操作，同时实现将图形缓冲区上传为GPU纹理的功能；

接口兼容模块提供连接到生产者端的生产者接口以及连接到消费者端的消费者接口，其中，生产者接口用于供Web应用通过生产者端从图形缓冲区队列模块中获取新的可用的图形缓冲区以及向图形缓冲区队列模块入队已经填充了图形内容的图形缓冲区，消费者接口用于通过消费者端，在图形缓冲区队列模块中入队已经填充了图形内容的图形缓冲区后，接收该帧刷新的事件通知并获取当前帧对应的图形缓冲区数据。

其中，图形缓冲区管理模块中针对图形缓冲区的分配及释放分别基于Allocate和Deallocate接口来完成，两个接口的功能如下：

Allocate接口：接收图形缓冲区队列模块创建图形缓冲区的请求，根据请求参数调用操作系统原生图形缓冲区管理接口，分配并初始化对应的图形缓冲区，同时创建浏览器纹理对象并绑定所述的图形缓冲区，通过生产者端返回浏览器纹理对象和其所拥有的图形缓冲区的访问句柄至Web应用；

Deallocate接口：用于释放指定的浏览器纹理对象和对应的图形缓冲区；

所述浏览器纹理对象，是指基于浏览器纹理对象接口定义实现的派生类，其持有并管理所述的图形缓冲区和GPU纹理。

其中，图形缓冲区管理模块中将图形缓冲区上传为GPU纹理的功能的实现方法如下：基于Web引擎定义的浏览器纹理对象接口，对图形缓冲区数据访问功能进行封装，根据操作系统平台GPU渲染接口实现纹理对象接口类型中的GPU纹理上传功能，将浏览器纹理对象持有的图形缓冲区上传为GPU纹理并获得对应的GPU纹理访问句柄，Web引擎通过该浏览器纹理对象对所述的图形缓冲区和GPU纹理访问句柄进行访问与管理。

其中，所述合成模块基于原生窗口兼容模块提供的消费者接口接入到原生窗口兼容模块的消费者端，以监听帧更新通知，并根据帧更新通知，从图形缓冲区队列出队原生窗口兼容接口实例的当前更新帧数据，包含该帧对应的图形缓冲区和浏览器纹理对象，并将所述浏览器纹理对象所持有的GPU纹理访问句柄配置为下一合成帧的显示内容，在下一个垂直同步信号触发时使用该浏览器纹理对象持有的GPU纹理访问句柄与其他Web图形内容的GPU纹理访问句柄执行合成，从而实现窗口绘制。

本发明还提供了一种基于上述系统的原生窗口实现窗口绘制的方法，包括如下步骤：

步骤S1：原生窗口兼容模块创建原生窗口兼容接口实例以及与该原生窗口兼容接口实例一一对应的图形缓冲区队列，并返回图形缓冲区的访问句柄，分别供图形数据生成模块及合成模块通过访问句柄访问原生窗口兼容模块中的图形缓冲区；原生窗口兼容接口实例中实现有接口兼容模块和图形缓冲区队列模块；

步骤S2：合成模块通过原生窗口兼容模块中的消费者接口向图形缓冲区队列中注册帧更新通知；

步骤S3：Web应用访问原生窗口兼容模块中的生产者接口，从原生窗口兼容接口实例关联的图形缓冲区队列的生产者端出队一个可用的图形缓冲区，向该图形缓冲区填入当前期望显示的图形内容，之后再通过生产者接口将填充了图形内容的图形缓冲区重新入队至图形缓冲区队列；

步骤S4：图形缓冲区队列在生产者端接收到图形缓冲区入队事件时，通过消费者端向合成模块发送帧更新通知；

步骤S5：合成模块响应该帧更新通知，并调用消费者接口从图形缓冲区队列出队队首的图形缓冲区及其对应的浏览器纹理对象，通过浏览器纹理对象接口的GPU纹理上传功能，将对应的图形缓冲区上传至GPU并获得对应的GPU纹理访问句柄；

步骤S6：在下一个垂直同步信号到达时，将步骤5获得的GPU纹理访问句柄与其他Web图形内容作为GPU指令的输入参数提交到GPU，使用GPU渲染接口执行2D合成；

步骤S7：合成模块标记步骤S5获得的浏览器纹理对象为空闲，释放其GPU纹理访问句柄，通过消费者接口将该浏览器纹理对象持有的图形缓冲区重新入队至图形缓冲区队列中，等待生产者端再次入队填充有有效图形内容的图形缓冲区。

本发明提供的基于Web操作系统上的原生窗口实现窗口绘制的方法及系统，可以在Web操作系统上，为Web应用提供访问原生窗口的能力，Web应用可以通过原生代码如C/C++访问原生窗口，使用硬件加速接口如OpenGLES、OpenMAX向原生窗口生产图形内容，扩展了Web应用的开发能力，提高了图形渲染场景和多媒体播放场景下的应用性能水平。本发明有效克服了web操作系统上现有绘制技术的缺点。

附图说明

图1：本发明的基于Web操作系统上的原生窗口实现窗口绘制的系统的逻辑框架图。

图2：本发明的基于Web操作系统上的原生窗口实现窗口绘制的系统的数据交互关系图。

图3：本发明的基于Web操作系统上的原生窗口实现窗口绘制的系统的原生窗口兼容模块的逻辑框架图。

图4：本发明的基于Web操作系统上的原生窗口实现窗口绘制的方法的实现流程图。

具体实施方式

为了对本发明的技术方案及有益效果有更进一步的了解，下面结合附图详细说明本发明的技术方案及其产生的有益效果。

针对现有技术中的缺陷，本发明提出的基于Web操作系统上的原生窗口实现窗口绘制的系统，其核心的技术构思在于，在Web引擎中构建图形缓冲区队列，并分别实现生产者端和消费者端，通过生产者端接口，向Web应用提供兼容于系统原生窗口的数据类型，称为原生窗口兼容接口实例，通过该原生窗口兼容接口实例，Web应用可以直接访问底层的硬件图形缓冲区，并可在多个系统模块中共享访问，通过消费者端接口，向Web引擎中的合成模块提交图形缓冲区内容，并通过GPU执行合成运算。

与此相对应，本发明对应的基于Web操作系统上的原生窗口实现窗口绘制的方法，其核心的技术构思在于，Web应用中的第三方绘制代码基于Web引擎提供的生产者接口，向图形缓冲区队列填入图形内容并触发图形缓冲区队列的帧更新通知，该图形缓冲区队列的消费者端由Web引擎管理，该帧更新通知由消费者端通过消费者接口发送至合成模块处理，合成模块提取该图形缓冲区和对应的浏览器纹理对象，调用浏览器纹理对象接口将图形缓冲区上传至GPU获得GPU纹理句柄，在下一个垂直同步信号到达时，使用该浏览器纹理对象持有的GPU纹理访问句柄与其他Web图形内容的GPU纹理访问句柄进行合成运算并送显，完成第三方绘制图形内容的展现。

图1及图2分别为本发明的基于Web操作系统上的原生窗口实现窗口绘制的系统的逻辑框架图及数据交互关系图，如图1及图2所示，本发明提供的基于Web操作系统上的原生窗口实现窗口绘制的系统，包括运行于Web应用上的图形数据生产模块，以及运行于Web引擎上的原生窗口兼容模块及合成模块，图形数据生产模块及合成模块均与原生窗口兼容模块连接，其中，原生窗口兼容模块在Web引擎的管理下创建原生窗口兼容接口实例并返回给图形数据生产模块，该原生窗口兼容接口实例中实现有图形缓冲区队列模块，图形数据生产模块向对应的图形缓冲区队列模块中的图形缓冲区推送图形显示内容，供合成模块提取并提交至GPU，完成窗口的绘制。

图3为本发明的基于Web操作系统上的原生窗口实现窗口绘制的系统的原生窗口兼容模块的逻辑框架图，也涉及本发明的核心发明点，下结合图1-图3详述本发明详细的技术构思：

一、图形数据生产模块

集成于Web应用中，作为图形生产者，提供能够产生图形数据的第三方绘制代码，通过原生窗口兼容模块提供的生产者接口接入到原生窗口兼容模块的生产者端，具体的，由于Web引擎通过原生窗口兼容模块创建了原生窗口兼容接口实例（该接口实例中一对一地实现有图形缓冲区队列），使图形数据生产模块可以直接调用原生窗口接口访问该原生窗口兼容接口实例，向对应的图形缓冲区队列模块推送图形显示内容，或通过调用可以间接访问原生窗口接口的第三方图形库，通过CPU或GPU方式执行绘制指令并将图形显示内容推送至图形缓冲区队列模块，之后由图形缓冲区队列通知消费者提取并处理对应的图形缓冲区数据。

二、原生窗口兼容模块

基于Web操作系统原生窗口实现方式，在Web引擎中创建原生窗口兼容接口实例并返回给图形数据生产模块，构建图形缓冲区队列并管理图形缓冲区的申请和释放，图形缓冲区队列分别实现生产者端和消费者端，通过生产者端，向Web应用提供兼容于Web操作系统原生窗口接口的数据类型，也即原生窗口兼容接口实例；通过消费者端，向Web引擎中的合成模块提供帧更新通知和帧数据获取功能。

原生窗口兼容模块包括接口兼容模块、图形缓冲区队列模块以及图形缓冲区管理模块，各模块的功能介绍如下：

图形缓冲区管理模块：提供图形缓冲区和浏览器纹理管理功能，图形缓冲区管理模块维护Web引擎所有图形缓冲区实例的分配和释放操作，提供2个接口：Allocate和Deallocate。

所述的浏览器纹理，指的是基于Web引擎的浏览器纹理对象接口实现的一个派生类型，用于对Web引擎提供访问/管理图形缓冲区的功能。其持有对应的图形缓冲区的访问句柄，根据Web操作系统平台GPU渲染接口（如OpenGL ES）实现GPU纹理上传功能，可将图形缓冲区上传为GPU纹理并获得对应的GPU纹理访问句柄，该GPU纹理访问句柄亦存储于该浏览器纹理对象中，该浏览器纹理对象持有的图形缓冲区实例和GPU纹理会随着浏览器纹理对象的销毁一同释放。

本发明中，浏览器纹理对象接口定义的是浏览器如何使用图形缓冲区，其中包含一个上传为GPU纹理的功能接口，这个接口使用GPU渲染接口实现；GPU渲染接口在本发明中主要指代OpenGL ES，实际提供上传图形缓冲区至GPU并获得GPU纹理访问句柄的功能，也就是获得EGLIamge的步骤（下文详述）。

其中Allocate用于接收浏览器应用进程创建图形缓冲区的请求，创建所需的图形缓冲区，具体的：申请指定格式、尺寸的图形缓冲区，图形缓冲区管理模块根据申请参数，调用操作系统原生图形缓冲区管理接口，分配并初始化对应的图形缓冲区，随后，创建浏览器纹理对象并绑定所述的图形缓冲区，并返回所述图形缓冲区的访问句柄至Web应用；

其中Deallocate用于销毁指定的浏览器纹理对象，并释放其持有的图形缓冲区和GPU纹理。

图形缓冲区队列模块：基于Web操作系统原生窗口接口所定义的生产者-消费者运行模型，基于Binder提供的IPC机制，分别实现生产者端和消费者端，其共同管理一个图形缓冲区队列，生产者端和消费者端分别可以对该队列执行出队和入队操作，如图3。特别地，当生产者端请求出队图形缓冲区，但队列中空闲图形缓冲区数量不足或者队列中已有的空闲图形缓冲区不匹配请求参数时，图形缓冲区队列模块向图形缓冲区管理模块请求新的图形缓冲区，具体的：图形缓冲区队列模块通过图形缓冲区管理模块提供的Allocate接口，申请一个新的图形缓冲区对象，获得其访问句柄，随后将该句柄注册到图形缓冲区队列，并将该图形缓冲区的访问句柄返回到生产者端。当生产者端入队了新的有效图形缓冲区时，向图形缓冲区队列入队该图形缓冲区，并向消费者服务端发送帧刷新通知。

接口兼容模块：提供消费者接口和生产者接口。

其中消费者接口提供给合成模块访问，其连接到对应图形缓冲区队列的消费者端，可以从消费者端获得帧刷新事件通知，根据当前刷新状态，可以从消费者端获取当前帧对应的图形缓冲区访问句柄；

其中生产者接口提供给Web应用访问，其连接到对应的生产者端，可以从生产者端获取新的可用缓冲区和向生产者端申请入队已填充图形内容的图形缓冲区；同时，接口兼容模块对该生产者接口封装一组兼容于Web操作系统原生窗口接口的接口族，该接口族继承自Web操作系统原生窗口类型，提供完全相同的接口和运行表现。

三、合成模块

其与图形数据生产模块的数据交互如图3所示，作为图形消费者，基于原生窗口兼容模块提供的消费者接口，接入到原生窗口兼容模块的消费者端，监听帧更新通知，并根据帧更新通知信息从图形缓冲区队列获取更新帧的图形缓冲区访问句柄，将该图形缓冲区所属的浏览器纹理对象所持有的GPU纹理访问句柄配置为下一合成帧的显示内容。在下一个垂直同步信号触发时使用该GPU纹理访问句柄象与其他web图形内容的GPU纹理访问句柄完成合成。

图4为本发明的基于Web操作系统上的原生窗口实现窗口绘制的方法的实现流程图，如图4所示，在一个典型的Web应用原生窗口集成模型下，本发明的执行步骤如下：

1、Web应用通过访问扩展WebAPI，请求Web引擎创建兼容原生窗口兼容接口实例，所述原生窗口兼容接口实例，由前述的原生窗口兼容模块创建并管理，在创建原生窗口兼容接口实例的同时，Web引擎为该原生窗口兼容接口实例创建对应的图形缓冲区队列实例并返回该原生窗口兼容接口实例的访问句柄，该原生窗口兼容接口实例与图形缓冲区队列实例一一对应。其中Web应用获得该原生窗口兼容接口实例的一个访问句柄HP，该访问句柄HP提供生产者接口可用于访问图形缓冲区队列的生产者端，且该访问句柄HP与Web操作系统的原生窗口接口兼容，可以通过原生窗口接口直接访问图形缓冲区队列的生产者端。其中Web引擎保留该原生窗口兼容接口实例的另一个访问句柄HS，该访问句柄HS提供消费者接口，可用于访问图形缓冲区队列的消费者端，可以接收图形缓冲区队列的帧更新通知及从图形缓冲区队列中出队队列中的最新的图形缓冲区。

2、合成模块通过消费者接口向图形缓冲区队列消费者端注册帧更新通知。具体地：调用访问句柄HS提供的消费者接口，向对应的图形缓冲区队列消费者端注册一个回调函数或回调函数类，该回调函数或回调函数类会在图形缓冲区入队新的图形缓冲区时被调用，指示图形缓冲区队列消费者端尽快出队新的图形缓冲区以及图形缓冲区中的图形内容数据。

3、Web应用通过接口兼容模块的生产者接口，从对应的图形缓冲区队列生产者端出队一个可用的图形缓冲区，通过访问该图形缓冲区的虚拟地址执行图形数据填充操作，向该图形缓冲区填入当前期望显示的图形内容，在图形内容填充结束后调用生产者接口将该具有图形内容的图形缓冲区重新入队至图形缓冲区队列。

特别地，所述的原生窗口兼容接口实例，实现了Web操作系统原生窗口接口，可以使用Web操作系统原生窗口接口访问该原生窗口兼容接口实例的图形缓冲区内容。

4、图形缓冲区队列在生产者端接收到图形缓冲区入队事件时，向消费者端发送帧更新通知并调用消费者接口中注册的回调函数；

5、合成模块回调函数被调用，响应该帧更新通知。随后调用消费者接口，从图形缓冲区队列出队队首（也即最新帧的）图形缓冲区和对应的浏览器纹理对象，通过浏览器纹理对象将图形缓冲区上传为GPU纹理，并获得相应的GPU纹理访问句柄，将所述的GPU纹理访问句柄存储于浏览器纹理对象中。

6、在下一个垂直同步信号到达时，调用OpenGL ES库接口，将步骤5获得的GPU纹理访问句柄与其他Web图形内容的GPU纹理访问句柄作为GPU指令的输入参数提交至GPU，与其它Web图形内容执行2D合成。

7、2D合成完成后，合成模块标记步骤5所述出队的浏览器纹理对象为空闲，释放该浏览器纹理对象持有的GPU纹理访问句柄，调用消费者接口将该浏览器纹理对象持有的图形缓冲区重新入队至图形缓冲区队列，等待生产者端再次填充有效图形内容。

优选地，所述步骤3-7中，可以使用支持硬件加速的GPU渲染接口完成。

特别地，Web操作系统的EGL库接口和OpenGL ES库接口可以访问步骤3所述的原生窗口兼容接口实例，所述EGL库和OpenGL ES库中实现了调用原生窗口接口中出队图形缓冲区并上传为GPU纹理的功能，该GPU纹理可接收来自GPU的图像内容，在接收到有效的图形数据后，由EGL库和OpenGL ES库调用原生窗口接口向图形缓冲区队列的生产者端入队GPU纹理对应的图形缓冲区。

特别地，在基于OpenGL ES库接口实现所述浏览器纹理对象的将图形缓冲区上传为GPU纹理功能的情况下，步骤6与步骤7所述GPU纹理访问句柄指的是通过OpenGL ES库接口，将图形缓冲区上传至GPU模块，创建对应的EGLImage实例，由OpenGL ES库接口返回的EGLImage的标识符。

本发明中，图形缓冲区的访问句柄以及原生窗口兼容接口的访问句柄在技术上的含义或区别说明如下：图形缓冲区就是一个容纳图形数据的空间，此外还包含一些对图形数据的描述信息，如图像数据类型、图形数据解析格式、图形宽度、图形高度等。HP指代兼容模块的生产者接口，HS指代兼容模块的消费者接口，二者指向的实际上是同一个原生窗口兼容接口实例。HP和HS都提供向队列入队和从队列出队的功能，但是HP入队的是容纳新图形数据的缓冲区，出队的是没有有效数据的空缓冲区；HS出队的是容纳新数据的缓冲区，入队的是已经使用过的、没有有效数据的缓冲区。图形缓冲区的访问句柄以及原生窗口兼容接口的访问句柄的不同点在于：原生窗口兼容接口实例的访问句柄如HP和HS，是用来与队列传递（或者叫交换）图形缓冲区访问句柄的，图形缓冲区访问句柄指向的实际存储图形数据的图形缓冲区。

与现有技术相比，本发明具有如下的有益效果：

1. 广泛支持基于OpenGL ES的大量移动终端平台，不局限于特定的移动终端平台，具有明显的跨硬件平台优越性；

2. 充分利用了系统原生窗口运行逻辑的可扩展性，扩展Web引擎访问原生窗口的功能，在解决Web应用难以与系统其他模块共享图形缓冲区的基础上，利用硬件图形缓冲区和GPU渲染接口的平台无关特性，使得Web应用可以借助GPU高效完成图形密集型任务，提升系统和Web应用的图形性能。

虽然本发明已利用上述较佳实施例进行说明，然其并非用以限定本发明的保护范围，任何本领域技术人员在不脱离本发明的精神和范围之内，相对上述实施例进行各种变动与修改仍属本发明所保护的范围，因此本发明的保护范围以权利要求书所界定的为准。

Claims (6)

1.一种基于Web操作系统上的原生窗口实现窗口绘制的系统，其特征在于，包括运行于Web应用上的图形数据生产模块，以及运行于Web引擎上的原生窗口兼容模块及合成模块，图形数据生产模块及合成模块均与原生窗口兼容模块连接，其中，

原生窗口兼容模块在Web引擎的管理下创建原生窗口兼容接口实例并返回给图形数据生产模块，该原生窗口兼容接口实例中实现有图形缓冲区队列模块，图形数据生产模块向对应的图形缓冲区队列模块中的图形缓冲区推送图形显示内容，供合成模块提取，完成窗口的绘制。

2.如权利要求1所述的基于Web操作系统上的原生窗口实现窗口绘制的系统，其特征在于，所述原生窗口兼容模块包括依次连接的接口兼容模块、图形缓冲区队列模块及图形缓冲区管理模块，其中，

图形缓冲区队列模块用于基于Web操作系统原生窗口的实现方式在Web引擎中构建图形缓冲区队列，并分别实现图形缓冲区队列的生产者端和消费者端，以分别实现对图形缓冲区的入队和出队操作；图形缓冲区队列与原生窗口兼容接口实例一一对应；

图形缓冲区管理模块用于维护并管理Web引擎中所有图形缓冲区队列模块中图形缓冲区的分配、释放操作，同时实现将图形缓冲区上传为GPU纹理的功能；

接口兼容模块提供连接到生产者端的生产者接口以及连接到消费者端的消费者接口，其中，生产者接口用于供Web应用通过生产者端从图形缓冲区队列模块中获取新的可用的图形缓冲区以及向图形缓冲区队列模块入队已经填充了图形内容的图形缓冲区，消费者接口用于通过消费者端，在图形缓冲区队列模块中入队已经填充了图形内容的图形缓冲区后，接收该帧刷新的事件通知并获取当前帧对应的图形缓冲区数据。

3.如权利要求2所述的基于Web操作系统上的原生窗口实现窗口绘制的系统，其特征在于，图形缓冲区管理模块中针对图形缓冲区的分配及释放分别基于Allocate和Deallocate接口来完成，两个接口的功能如下：

Allocate接口：接收图形缓冲区队列模块创建图形缓冲区的请求，根据请求参数调用操作系统原生图形缓冲区管理接口，分配并初始化对应的图形缓冲区，同时创建浏览器纹理对象并绑定所述的图形缓冲区，通过生产者端返回浏览器纹理对象和其所拥有的图形缓冲区的访问句柄至Web应用；

Deallocate接口：用于释放指定的浏览器纹理对象和对应的图形缓冲区；

所述浏览器纹理对象，是指基于浏览器纹理对象接口定义实现的派生类，其持有并管理所述的图形缓冲区和GPU纹理。

4.如权利要求3所述的基于Web操作系统上的原生窗口实现窗口绘制的系统，其特征在于，图形缓冲区管理模块中将图形缓冲区上传为GPU纹理的功能的实现方法如下：基于Web引擎定义的浏览器纹理对象接口，对图形缓冲区数据访问功能进行封装，根据操作系统平台GPU渲染接口实现纹理对象接口类型中的GPU纹理上传功能，将浏览器纹理对象持有的图形缓冲区上传为GPU纹理并获得对应的GPU纹理访问句柄，Web引擎通过该浏览器纹理对象对所述的图形缓冲区和GPU纹理访问句柄进行访问与管理。

5.如权利要求2所述的基于Web操作系统上的原生窗口实现窗口绘制的系统，其特征在于，所述合成模块基于原生窗口兼容模块提供的消费者接口接入到原生窗口兼容模块的消费者端，以监听帧更新通知，并根据帧更新通知，从图形缓冲区队列出队原生窗口兼容接口实例的当前更新帧数据，包含该帧对应的图形缓冲区和浏览器纹理对象，并将所述浏览器纹理对象所持有的GPU纹理访问句柄配置为下一合成帧的显示内容，在下一个垂直同步信号触发时使用该浏览器纹理对象持有的GPU纹理访问句柄与其他Web图形内容的GPU纹理访问句柄执行合成，从而实现窗口绘制。

6.基于权利要求2-5中任一项所述的基于Web操作系统上的原生窗口实现窗口绘制的方法，其特征在于，包括如下步骤：

步骤S1：原生窗口兼容模块创建原生窗口兼容接口实例以及与该原生窗口兼容接口实例一一对应的图形缓冲区队列，并返回图形缓冲区的访问句柄，分别供图形数据生成模块及合成模块通过访问句柄访问原生窗口兼容模块中的图形缓冲区；原生窗口兼容接口实例中实现有接口兼容模块和图形缓冲区队列模块；

步骤S2：合成模块通过原生窗口兼容模块中的消费者接口向图形缓冲区队列中注册帧更新通知；

步骤S3：Web应用访问原生窗口兼容模块中的生产者接口，从原生窗口兼容接口实例关联的图形缓冲区队列的生产者端出队一个可用的图形缓冲区，向该图形缓冲区填入当前期望显示的图形内容，之后再通过生产者接口将填充了图形内容的图形缓冲区重新入队至图形缓冲区队列；

步骤S4：图形缓冲区队列在生产者端接收到图形缓冲区入队事件时，通过消费者端向合成模块发送帧更新通知；

步骤S5：合成模块响应该帧更新通知，并调用消费者接口从图形缓冲区队列出队队首的图形缓冲区及其对应的浏览器纹理对象，通过浏览器纹理对象接口的GPU纹理上传功能，将对应的图形缓冲区上传至GPU并获得对应的GPU纹理访问句柄；

步骤S6：在下一个垂直同步信号到达时，将步骤5获得的GPU纹理访问句柄与其他Web图形内容作为GPU指令的输入参数提交到GPU，使用GPU渲染接口执行2D合成；

步骤S7：合成模块标记步骤S5获得的浏览器纹理对象为空闲，释放其GPU纹理访问句柄，通过消费者接口将该浏览器纹理对象持有的图形缓冲区重新入队至图形缓冲区队列中，等待生产者端再次入队填充有有效图形内容的图形缓冲区。