安卓系统上基于GPU实现的Canvas元素渲染方法及装置

摘要

本发明提供了一种在安卓系统上基于GPU硬件实现的Html5Canvas元素渲染方法，包括：在检测到针对Html5网页中的Canvas元素的渲染操作指令且完成初始化创建操作后，通过SkiaGPU函数库将针对2DCanvas绘图API的调用指令转换为针对OpenGLESAPI的调用指令；将在所述初始化操作时创建的EGLContext设置为渲染操作所在线程的当前上下文；使用所述GPU在所述初始化操作时创建的离屏本地窗口中渲染所述Canvas元素；以及利用所述GPU的贴图操作功能，将渲染后的Canvas元素从所述离屏本地窗口复制到设备的当前活动窗口上。利用该方法，通过利用安卓操作系统提供的本地窗口渲染机制和OpenGLESAPI，使用GPU来完成Canvas元素的绘制和混合，从而实现利用GPU硬件加速来提高Canvas渲染性能。

说明书

技术领域

本发明涉及网页渲染领域，更为具体地，涉及一种在安卓系统上基于GPU硬件实现的Canvas元素渲染方法及装置。

 

背景技术

在HTML5技术中的2D Canvas规范中定义了一组2D Canvas 绘图API（应用程序接口，Application Programming Interface），利用这些API可以在网页上进行立即模式的二维图形绘制。这里，Canvas是指画布。如果网页中包含一个Canvas标签，就可以通过JavaScript代码在这个标签的区域范围内，使用各种2D Canvas绘图API绘制用户想要的东西。

GPU英文全称Graphic Processing Unit，中文翻译为“图形处理单元”。GPU是相对于CPU的一个概念。GPU是显示卡的“大脑”，它决定了大部分性能，同时也是2D显示卡和3D显示卡的区别依据。2D显示芯片在处理3D图像和特效时主要依赖CPU的处理能力，称为“软加速”。3D显示芯片是将三维图像和特效处理功能集中在显示芯片内，也即所谓的“硬件加速”功能。

在现有的浏览器实现中，是将JavaScript对2D Canvas绘图API的调用映射到一个平台相关的2D绘图库，在该2D绘图库中绘制离屏位图（这个步骤通常称作绘图步骤），然后再把该位图拷贝到当前程序的可见窗口上（这个步骤通常称之为混合步骤）。这种方式的缺陷在于无论是绘图步骤还是混合步骤都只能依赖CPU来完成，效率较低，无法充分利用GPU进行硬件加速。

发明内容

鉴于上述，本发明提出了一种在安卓系统上基于GPU硬件实现的Html5 Canvas元素渲染方法和装置，该方法和装置利用Android操作系统提供的本地窗口渲染机制和OpenGL ES API，使用GPU来完成Canvas元素的绘制和混合，从而实现利用GPU硬件加速来提高Canvas渲染性能。

根据本发明的一个方面，提供了一种在安卓系统上基于GPU硬件实现的Html5 Canvas元素渲染方法，包括：在检测到针对Html5网页中的Canvas元素的渲染操作指令且完成初始化创建操作后，通过Skia GPU函数库将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令；将在所述初始化操作时创建的EGL Context设置为渲染操作所在线程的当前上下文；根据所述Canvas元素的属性信息，使用所述GPU在所述初始化操作时创建的离屏本地窗口中渲染所述Canvas元素；以及利用所述GPU的贴图操作功能，将渲染后的Canvas元素从所述离屏本地窗口复制到设备的当前活动窗口上，所述初始化创建操作包括：基于所述Canvas元素的属性信息，为所述Canvas元素创建离屏本地窗口；以及基于所述离屏本地窗口，创建EGL Window Surface和EGL Context。

在上述方面的一个或多个示例中，通过Skia GPU函数库将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令可以包括：将在所述离屏本地窗口中创建的EGL Windows Surface包装成SkGpuDevice；创建基于SkGpuDevice的SkCanvas；以及利用所述SkCanvas将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令。

在上述方面的一个或多个示例中，利用GPU的贴图操作功能，将渲染后的Canvas元素从所述离屏本地窗口复制到设备的当前活动窗口上可以包括：在完成所述离屏本地窗口中的Canvas元素渲染后，将所述离屏本地窗口与OpenGL贴图绑定；以及通过贴图操作将所述离屏本地窗口复制到设备的当前活动窗口上。

在上述方面的一个或多个示例中，将所述离屏本地窗口与OpenGL贴图绑定在接收到窗口更新请求后执行，所述窗口更新请求是在客户端的渲染引擎监测到在所述离屏本地窗口中完成一个或多个Canvas元素渲染后发出的。

在上述方面的一个或多个示例中，所述Canvas元素的属性信息是从渲染引擎中获取的，所述属性信息至少包括元素大小和元素位置。

在上述方面的一个或多个示例中，在通过Skia GPU函数库将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令，所述方法还可以包括：在检测到针对Html5网页中的Canvas元素的渲染操作指令后，检查针对所述Canvas元素是否完成所述初始化创建操作；以及在未完成所述初始化创建操作时，针对所述Canvas元素执行所述初始化创建操作。

根据本发明的另一方面，提供了一种用于在安卓系统上基于GPU硬件实现Html5 Canvas元素渲染的Canvas元素渲染装置，包括：初始化单元，用于基于所述Canvas元素的属性信息，为所述Canvas元素创建离屏本地窗口，以及基于所述离屏本地窗口，创建EGL Window Surface和EGL Context；转换单元，用于在检测到针对Html5网页中的Canvas元素的渲染操作指令且所述初始化单元完成初始化创建操作后，通过Skia GPU函数库将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令；设置单元，用于将在所述初始化操作时创建的EGL Context设置为渲染操作所在线程的当前上下文；渲染单元，用于根据所述Canvas元素的属性信息，使用所述GPU在所述初始化操作时创建的离屏本地窗口中渲染所述Canvas元素；以及复制单元，用于利用所述GPU的贴图操作功能，将渲染后的Canvas元素从所述离屏本地窗口复制到设备的当前活动窗口上。

在上述方面的一个或多个示例中，所述转换单元可以包括：包装模块，用于将在所述离屏本地窗口中创建的EGL Windows Surface包装成SkGpuDevice；创建模块，用于创建基于SkGpuDevice的SkCanvas；以及转换模块，用于利用所述SkCanvas，将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令。

在上述方面的一个或多个示例中，所述复制单元可以包括：绑定模块，用于在完成所述离屏本地窗口中的Canvas元素渲染后，将所述离屏本地窗口与OpenGL贴图绑定；以及贴图复制模块，用于通过贴图操作将所述离屏本地窗口复制到设备的当前活动窗口上。

在上述方面的一个或多个示例中，所述绑定模块被配置为在接收到窗口更新请求后执行将所述离屏本地窗口与OpenGL贴图绑定，所述窗口更新请求是在客户端的渲染引擎监测到在所述离屏本地窗口中完成一个或多个Canvas元素渲染后发出的。

在上述方面的一个或多个示例中，所述Canvas元素渲染装置还可以包括：检查单元，用于在检测到针对Html5网页中的Canvas元素的渲染操作指令后，检查针对所述Canvas元素是否完成所述初始化创建操作，其中，在未完成所述初始化创建操作时，所述初始化单元针对所述Canvas元素执行所述初始化创建操作。

根据本发明的另一方面，还提供了一种包括上述Canvas元素渲染装置的移动终端。

利用上述方法及装置，可以利用Android操作系统提供的本地窗口渲染机制和OpenGL ES API，使用GPU来完成Canvas元素的绘制和混合，从而实现利用GPU硬件加速来提高Canvas渲染性能。

为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。

 

附图说明

根据下述参照附图进行的详细描述，本发明的上述和其他目的、特征和优点将变得更加显而易见。在附图中：

图1示出了根据本发明的Canvas元素渲染方法的过程示意图；

图2示出了根据本发明的实施例的在安卓系统上基于GPU硬件实现的Html5 Canvas元素渲染方法的流程图；

图3示出了图2中的初始化操作的示例的示意图；

图4示出了图2中的将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令的一个示例的示意图；

图5示出了图2中的将渲染后的Canvas元素从离屏本地窗口复制到设备的当前活动窗口的示例的示意图；

图6示出了根据本发明的实施例的用于在安卓系统上基于GPU硬件实现Html5 Canvas元素渲染的Canvas元素渲染装置的方框示意图；

图7示出了图6中的转换单元的一个示例的方框示意图；

图8示出了图6中的复制单元的一个示例的方框示意图；以及

图9示出了具有图6中所述的Canvas元素渲染装置的移动终端的方框示意图。

在所有附图中相同的标号指示相似或相应的特征或功能。

 

具体实施方式

下面描述本公开的各个方面。应该明白的是，本文的教导可以以多种多样形式具体体现，并且在本文中公开的任何具体结构、功能或两者仅仅是代表性的。基于本文的教导，本领域技术人员应该明白的是，本文所公开的一个方面可以独立于任何其它方面实现，并且这些方面中的两个或多个方面可以按照各种方式组合。例如，可以使用本文所阐述的任何数目的方面，实现装置或实践方法。另外，可以使用其它结构、功能、或除了本文所阐述的一个或多个方面之外或不是本文所阐述的一个或多个方面的结构和功能，实现这种装置或实践这种方法。此外，本文所描述的任何方面可以包括权利要求的至少一个元素。

本发明涉及的技术方案是在Android平台上的使用GPU硬件加速的Html5网页中的2D Canvas元素渲染的实现方案。它能够利用Android操作系统提供的本地窗口渲染机制和跨平台的OpenGL ES API，使用GPU来完成Canvas元素的绘图和混合，从而实现利用硬件加速来提高Canvas渲染性能。

在介绍本发明的具体实施例之前，首先对本发明中涉及的一些术语进行说明。

术语“OpenGL ES (OpenGL for Embedded Systems)” 是 OpenGL三维图形 API 的子集，它是针对手机、PDA和游戏主机等嵌入式设备而设计的。

术语“OpenGL（Open Graphics Library）”是个专业的图形程序接口，是一个功能强大，调用方便的底层图形库。

术语“EGL” 是 OpenGL ES 和操作系统底层的本地窗口系统之间的接口，是为 OpenGL ES 提供平台独立性而设计。在EGL 中，Display 是图形显示设备（显示屏）的抽象表示，大部分EGL函数都要带一个 Display 作为参数。Context 是 OpenGL 状态机，Surface 是绘图缓冲，Context 与 Surface 可以是一对一、多对一、一对多的关系。Context可以是 window、pbuffer、pixmap 三种类型之一。

Skia是一个2D矢量图形绘图函数库，包含文本（Text），位图（Bitmap），图形（Shape）等绘制功能，实现简洁高效。不仅用于Google Chrome浏览器，新兴的Android开放手机平台也采用Skia作为绘图处理，它可以适配基于不同硬件的后端实现，默认的实现使用CPU进行绘制，而可选的GPU实现可以通过把2D绘图API转换成OpenGL/OpenGL ES 3D API的调用，使用GPU进行绘制。

下面将参照附图描述本发明的各个实施例。

图1示出了根据本发明的Canvas元素渲染方法的过程示意图。如图1所示，在根据本发明的Canvas元素渲染方法中，针对Html5网页中的2D Canvas元素，首先在安卓系统的离屏本地窗口中进行绘制，在绘制完成后复制到当前安卓程序的可见窗口上。

图2示出了根据本发明的实施例的在安卓系统上基于GPU硬件实现的Html5 Canvas元素渲染方法的流程图。

如图2所示，首先，在检测到针对Html5网页中的Canvas元素的渲染操作指令后，检查针对所述Canvas元素是否完成初始化创建操作。如果未完成所述初始化创建操作，则进行到步骤S120。在步骤S120，针对所述Canvas元素执行所述初始化创建操作，然后进行到步骤S130。如果完成了所述初始化创建操作，则进行到步骤S130。

图3示出了图2中的初始化操作的示例的示意图。如图3所示，首先，在步骤S121，基于所述Canvas元素的属性信息，为所述Canvas元素创建离屏本地窗口。所述Canvas元素的属性信息是从渲染引擎中获取的，所述属性信息至少包括元素大小和元素位置。在获取Canvas元素的属性信息后，根据Canvas元素的元素大小，创建离屏本地窗口。这里，所述离屏本地窗口是指由操作系统创建的本地窗口，但是操作系统的窗口混合器不会在进行窗口混合时把它绘制到显示屏幕上，也就是说它不直接参与操作系统本身的窗口混合，对操作系统来说它是不可见的。

接着，在步骤S123，基于所述离屏本地窗口，创建EGL Window Surface和EGL Context。例如，在调用系统API创建离屏本地窗口后，获得操作系统的本地窗口的句柄，然后，利用该句柄创建EGL Window Surface和EGL Context。此外，创建EGL Context后，如果要其在某个Surface上真正生效，需要在将这个Context设置为当前线程的当前Context时（通过eglMakeCurrent API调用），跟这个Surface绑定。在完成与所创建的Window Surface绑定后，在该Context上执行的GL命令，就会真正绘制到绑定的Window Surface上。

在如上完成初始化创建操作后，在步骤S130，通过Skia GPU函数库将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令。图4示出了通过Skia GPU函数库将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令的一个示例的示意图。

如图4所示，在完成初始化创建操作后，在步骤S131，将在所述离屏本地窗口中创建的EGL Windows Surface包装成SkGpuDevice。然后，在步骤S133，创建基于SkGpuDevice的SkCanvas。接着，在步骤S135，利用所述SkCanvas将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令。这里，所创建的SkCanvas供2D绘图使用，然后经由SkGpuDevice将针对2D Canvas绘图API的调用指令（即，2D绘图指令）转换成针对OpenGL ES API的调用指令（即，3D GL指令）。

然后，在步骤S140，将在所述初始化操作时创建的EGL Context设置为渲染操作所在线程（即，用于渲染该Canvas元素的绘图线程）的当前上下文。

接着，在步骤S150，绘图线程根据所述Canvas元素的属性信息（Canvas元素的位置信息等），使用GPU在离屏本地窗口中渲染所述Canvas元素。

在完成Canvas元素渲染后，在步骤S150，混合线程利用所述GPU的贴图操作功能，将渲染后的Canvas元素从所述离屏本地窗口复制到设备的当前活动窗口（即，当前安卓程序的可见窗口）上。

图5示出了图2中的将渲染后的Canvas元素从离屏本地窗口复制到设备的当前活动窗口的示例的示意图。

如图5所示，在完成所述离屏本地窗口中的Canvas元素渲染后，在步骤S151，将所述离屏本地窗口与OpenGL贴图绑定。然后，在步骤S153，通过贴图操作将所述离屏本地窗口复制到设备的当前活动窗口（即，当前安卓程序的可见窗口）上，由此实现根据本发明的Canvas元素渲染。

在本发明的一个示例中，将所述离屏本地窗口与OpenGL贴图绑定是在接收到窗口更新请求后执行，所述窗口更新请求是在浏览器渲染引擎侦测到网页内容发生变化后发出。例如，当JavaScript代码在调用Canvas的2D绘图指令时，渲染引擎就认为网页中的Canvas元素的内容发生了变化，从而发出一个新的更新请求。

这里要说明的是，图2示出的实施例仅仅是本发明的一个具体实施例，还可以对上述实施例进行各种修改。修改后的实施例落在本发明的范围内。比如，在本发明的其它示例中，可以删除图2中的步骤S110。或者，在步骤S110之前，可以增加针对Html5网页中的Canvas元素的渲染操作指令的检测步骤。

如上参照图1到图5描述了根据本发明的在安卓系统上基于GPU硬件实现的Html5 Canvas元素渲染方法。本发明的上述Canvas元素渲染方法，可以采用软件实现，也可以采用硬件实现，或采用软件和硬件组合的方式实现。

图6示出了根据本发明的实施例的用于在安卓系统上基于GPU硬件实现Html5 Canvas元素渲染的Canvas元素渲染装置600的方框示意图。

如图6所示，Canvas元素渲染装置600包括初始化单元610、转换单元620、设置单元630、渲染单元640和复制单元650。

初始化单元610用于基于Canvas元素的属性信息，为所述Canvas元素创建离屏本地窗口，以及基于所述离屏本地窗口，创建EGL Window Surface和EGL Context。所述Canvas元素的属性信息是从渲染引擎中获取的，所述属性信息至少包括元素大小和元素位置。在获取Canvas元素的属性信息后，根据Canvas元素的元素大小，创建离屏本地窗口。

转换单元620用于在检测到针对Html5网页中的Canvas元素的渲染操作指令且初始化单元610完成初始化创建操作后，通过Skia GPU函数库将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令。

图7示出了图6中的转换单元620的一个示例的方框示意图。如图7所示，转换单元620包括包装模块621、创建模块623和转换模块625。包装模块621用于将在所述离屏本地窗口中创建的EGL Windows Surface包装成SkGpuDevice。创建模块623用于创建基于SkGpuDevice的SkCanvas。转换模块625用于利用所述SkCanvas，将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令。

设置单元630用于将在所述初始化操作时创建的EGL Context设置为渲染操作所在线程的当前上下文。这里，渲染操作所在线程是指用于渲染该Canvas元素的绘图线程。

渲染单元640用于根据所述Canvas元素的属性信息，比如Canvas元素在Html5网页中的位置信息，使用所述GPU在所述初始化操作时创建的离屏本地窗口中渲染所述Canvas元素。

在如上完成Canvas元素渲染后，复制单元650利用所述GPU的贴图操作功能，将渲染后的Canvas元素从所述离屏本地窗口复制到设备的当前活动窗口上。 

图8示出了图6中的复制单元的一个示例的方框示意图。如图8所示，复制单元650包括绑定模块651和贴图复制模块653。

在完成所述离屏本地窗口中的Canvas元素渲染后，绑定模块651将所述离屏本地窗口与OpenGL贴图绑定。然后，贴图复制模块653通过贴图操作将所述离屏本地窗口复制到设备的当前活动窗口上。

在本发明的一个示例中，绑定模块651被配置为在接收到窗口更新请求后执行将所述离屏本地窗口与OpenGL贴图绑定，所述窗口更新请求是在客户端的渲染引擎监测到在所述离屏本地窗口中完成一个或多个Canvas元素渲染后发出的。

此外，在本发明的另一示例中，Canvas元素渲染装置600还可以包括检查单元（未示出），用于在检测到针对Html5网页中的Canvas元素的渲染操作指令后，检查针对所述Canvas元素是否完成所述初始化创建操作，其中，在未完成所述初始化创建操作时，所述初始化单元针对所述Canvas元素执行所述初始化创建操作。

此外，在本发明的又一示例中，Canvas元素渲染装置600还可以包括检测单元（未示出），用于检测是否存在针对Html5网页中的Canvas元素的渲染操作指令。

利用上述方法及装置，可以利用Android操作系统提供的本地窗口渲染机制和OpenGL ES API，使用GPU来完成Canvas元素的绘制和混合，从而实现利用GPU硬件加速来提高Canvas渲染性能。

图9示出了具有根据本发明的Canvas元素渲染装置600的移动终端10的方框示意图。如图9所示，所述移动终端10包括如图6所示的Canvas元素渲染装置600。这里要说明的是，图9中包含的Canvas元素渲染装置还可以包括图6中所示的Canvas元素渲染装置600的各种变型。

此外，典型地，本发明所述的移动终端可为各种智能移动终端，比如智能手机。

此外，根据本发明的方法还可以被实现为由移动终端中的处理器（比如CPU）执行的计算机程序，并且存储在移动终端的存储器中。在该计算机程序被处理器执行时，执行本发明的方法中限定的上述功能。

此外，根据本发明的方法还可以实现为一种计算机程序产品，该计算机程序产品包括计算机可读介质，在该计算机可读介质上存储有用于执行本发明的方法中限定的上述功能的计算机程序。

此外，上述方法步骤以及系统单元也可以利用控制器以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计算机可读存储设备实现。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现所述的功能，但是这种实现决定不应被解释为导致脱离本发明的范围。

尽管前面公开的内容示出了本发明的示例性实施例，但是应当注意，在不背离权利要求限定的本发明的范围的前提下，可以进行多种改变和修改。根据这里描述的发明实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本发明的元素可以以个体形式描述或要求，但是也可以设想多个，除非明确限制为单数。

虽然如上参照图描述了根据本发明的各个实施例进行了描述，但是本领域技术人员应当理解，对上述本发明所提出的各个实施例，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。