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

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

背景技术：

1、web应用中，通常使用web技术如html、javascript、css进行ui交互逻辑的开发，在一定程度上，可以获得优秀的跨平台效果。在特定场景下，用户交互界面需要由直接绘制接口开发，以满足高度定制化的direct ui交互需求，常见的场景如网页游戏和地图等，在web开发中一般通过canvas2d和webgl技术以满足此需求。其中canvas2d技术基于skia绘图引擎，通过将canvas2d的绘制请求转化为skia绘制指令执行，并将skia的绘制结果读取并发送至web引擎通过gpu合成并送显；其中webgl技术基于opengl es渲染接口，使用javascript直接调用gpu指令完成绘制并合成、送显。

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

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

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

技术实现思路

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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