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

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

Info

Publication number
CN103336816B
CN103336816B CN201310266070.7A CN201310266070A CN103336816B CN 103336816 B CN103336816 B CN 103336816B CN 201310266070 A CN201310266070 A CN 201310266070A CN 103336816 B CN103336816 B CN 103336816B
Authority
CN
China
Prior art keywords
canvas
rendering
window
gpu
canvas element
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201310266070.7A
Other languages
English (en)
Other versions
CN103336816A (zh
Inventor
梁捷
易旭昕
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba China Co Ltd
Original Assignee
Guangzhou Dongjing Computer Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Guangzhou Dongjing Computer Technology Co Ltd filed Critical Guangzhou Dongjing Computer Technology Co Ltd
Priority to CN201310266070.7A priority Critical patent/CN103336816B/zh
Publication of CN103336816A publication Critical patent/CN103336816A/zh
Priority to PCT/CN2013/087693 priority patent/WO2014205993A1/zh
Priority to US14/901,431 priority patent/US10013503B2/en
Application granted granted Critical
Publication of CN103336816B publication Critical patent/CN103336816B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T1/00—General purpose image data processing
    • G06T1/20—Processor architectures; Processor configuration, e.g. pipelining

Abstract

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

Description

安卓系统上基于 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）执行的计算机程序，并且存储在移动终端的存储器中。在该计算机程序被处理器执行时，执行本发明的方法中限定的上述功能。
此外，根据本发明的方法还可以实现为一种计算机程序产品，该计算机程序产品包括计算机可读介质，在该计算机可读介质上存储有用于执行本发明的方法中限定的上述功能的计算机程序。
此外，上述方法步骤以及系统单元也可以利用控制器以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计算机可读存储设备实现。
本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现所述的功能，但是这种实现决定不应被解释为导致脱离本发明的范围。
尽管前面公开的内容示出了本发明的示例性实施例，但是应当注意，在不背离权利要求限定的本发明的范围的前提下，可以进行多种改变和修改。根据这里描述的发明实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本发明的元素可以以个体形式描述或要求，但是也可以设想多个，除非明确限制为单数。
虽然如上参照图描述了根据本发明的各个实施例进行了描述，但是本领域技术人员应当理解，对上述本发明所提出的各个实施例，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。

Claims (9)

1.一种在安卓系统上基于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和EGLContext；
其中，通过Skia GPU函数库将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令包括：
将在所述离屏本地窗口中创建的EGL Windows Surface包装成SkGpuDevice；
创建基于SkGpuDevice的SkCanvas；以及
利用所述SkCanvas将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令。
2.如权利要求1所述的Canvas元素渲染方法，其中，利用GPU的贴图操作功能，将渲染后的Canvas元素从所述离屏本地窗口复制到设备的当前活动窗口上包括：
在完成所述离屏本地窗口中的Canvas元素渲染后，将所述离屏本地窗口与OpenGL贴图绑定；以及
通过贴图操作将所述离屏本地窗口复制到设备的当前活动窗口上。
3.如权利要求2所述的Canvas元素渲染方法，其中，将所述离屏本地窗口与OpenGL贴图绑定在接收到窗口更新请求后执行，所述窗口更新请求是在客户端的渲染引擎监测到在所述离屏本地窗口中完成一个或多个Canvas元素渲染后发出的。
4.如权利要求1所述的Canvas元素渲染方法，其中，所述Canvas元素的属性信息是从渲染引擎中获取的，所述属性信息至少包括元素大小和元素位置。
5.如权利要求1所述的Canvas元素渲染方法，其中，在通过Skia GPU函数库将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令，所述方法还包括：
在检测到针对Html5网页中的Canvas元素的渲染操作指令后，检查针对所述Canvas元素是否完成所述初始化创建操作；以及
在未完成所述初始化创建操作时，针对所述Canvas元素执行所述初始化创建操作。
6.一种用于在安卓系统上基于GPU硬件实现Html5Canvas元素渲染的Canvas元素渲染装置，包括：
初始化单元，用于基于所述Canvas元素的属性信息，为所述Canvas元素创建离屏本地窗口，以及基于所述离屏本地窗口，创建EGL Window Surface和EGL Context；
转换单元，用于在检测到针对Html5网页中的Canvas元素的渲染操作指令且所述初始化单元完成初始化创建操作后，通过Skia GPU函数库将针对2D Canvas绘图API的调用指令转换为针对OpenGL ESAPI的调用指令；
设置单元，用于将在所述初始化操作时创建的EGL Context设置为渲染操作所在线程的当前上下文；
渲染单元，用于根据所述Canvas元素的属性信息，使用所述GPU在所述初始化操作时创建的离屏本地窗口中渲染所述Canvas元素；以及
复制单元，用于利用所述GPU的贴图操作功能，将渲染后的Canvas元素从所述离屏本地窗口复制到设备的当前活动窗口上；
其中，所述转换单元包括：
包装模块，用于将在所述离屏本地窗口中创建的EGL WindowsSurface包装成SkGpuDevice；
创建模块，用于创建基于SkGpuDevice的SkCanvas；以及
转换模块，用于利用所述SkCanvas，将针对2D Canvas绘图API的调用指令转换为针对OpenGL ES API的调用指令。
7.如权利要求6所述的Canvas元素渲染装置，其中，所述复制单元包括：
绑定模块，用于在完成所述离屏本地窗口中的Canvas元素渲染后，将所述离屏本地窗口与OpenGL贴图绑定；以及
贴图复制模块，用于通过贴图操作将所述离屏本地窗口复制到设备的当前活动窗口上。
8.如权利要求7所述的Canvas元素渲染装置，其中，所述绑定模块被配置为在接收到窗口更新请求后执行将所述离屏本地窗口与OpenGL贴图绑定，所述窗口更新请求是在客户端的渲染引擎监测到在所述离屏本地窗口中完成一个或多个Canvas元素渲染后发出的。
9.如权利要求6所述的Canvas元素渲染装置，还包括：
检查单元，用于在检测到针对Html5网页中的Canvas元素的渲染操作指令后，检查针对所述Canvas元素是否完成所述初始化创建操作，
其中，在未完成所述初始化创建操作时，所述初始化单元针对所述Canvas元素执行所述初始化创建操作。
CN201310266070.7A 2013-06-28 2013-06-28 安卓系统上基于GPU实现的Canvas元素渲染方法及装置 Active CN103336816B (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
CN201310266070.7A CN103336816B (zh) 2013-06-28 2013-06-28 安卓系统上基于GPU实现的Canvas元素渲染方法及装置
PCT/CN2013/087693 WO2014205993A1 (zh) 2013-06-28 2013-11-22 安卓系统上基于GPU实现的Canvas元素渲染方法及装置
US14/901,431 US10013503B2 (en) 2013-06-28 2013-11-22 Canvas element rendering method and apparatus implemented on android system based on GPU

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201310266070.7A CN103336816B (zh) 2013-06-28 2013-06-28 安卓系统上基于GPU实现的Canvas元素渲染方法及装置

Publications (2)

Publication Number Publication Date
CN103336816A CN103336816A (zh) 2013-10-02
CN103336816B true CN103336816B (zh) 2017-02-08

Family

ID=49244981

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201310266070.7A Active CN103336816B (zh) 2013-06-28 2013-06-28 安卓系统上基于GPU实现的Canvas元素渲染方法及装置

Country Status (3)

Country Link
US (1) US10013503B2 (zh)
CN (1) CN103336816B (zh)
WO (1) WO2014205993A1 (zh)

Families Citing this family (37)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103336816B (zh) * 2013-06-28 2017-02-08 广州市动景计算机科技有限公司 安卓系统上基于GPU实现的Canvas元素渲染方法及装置
CN103617027B (zh) * 2013-10-29 2015-07-29 合一网络技术(北京)有限公司 基于安卓系统的图像渲染引擎构建方法及系统
CN103605534B (zh) * 2013-10-31 2017-04-05 优视科技有限公司 图片加载方法及装置
US10121263B2 (en) 2013-10-31 2018-11-06 Uc Mobile Co., Ltd. Methods and devices for image loading and methods and devices for video playback
CN103699577B (zh) * 2013-11-29 2016-10-12 小米科技有限责任公司 一种页面显示加速方法、装置及移动终端
CN104598646A (zh) * 2015-02-16 2015-05-06 深圳岂凡网络有限公司 一种网页3d引擎的实现方法及网页3d引擎
CN105069015A (zh) * 2015-07-13 2015-11-18 山东超越数控电子有限公司 一种国产平台网页加速技术的实现方法
CN105069831B (zh) * 2015-07-28 2018-05-29 广州爱拍网络科技有限公司 一种基于Hook技术获取OpenGL渲染画面的方法和系统
CN105187853A (zh) * 2015-09-09 2015-12-23 上海赛为信息技术有限公司 基于opengl es的arm终端系统及视频显示方法
CA2946074C (en) 2015-10-21 2024-02-13 Stephen Viggers Systems and methods for using an opengl api with a vulkan graphics driver
CN107153528A (zh) * 2016-03-02 2017-09-12 阿里巴巴集团控股有限公司 混合模型列表项重用的方法及设备
CN107707965B (zh) * 2016-08-08 2021-02-12 阿里巴巴（中国）有限公司 一种弹幕的生成方法和装置
CN106327563B (zh) * 2016-08-24 2019-04-05 武汉斗鱼网络科技有限公司 一种Directx纹理资源互操作系统及方法
CN107832108B (zh) * 2016-09-14 2021-05-07 阿里巴巴集团控股有限公司 3D canvas网页元素的渲染方法、装置及电子设备
CN106598514B (zh) * 2016-12-01 2020-06-09 惠州Tcl移动通信有限公司 一种终端设备中切换虚拟现实模式的方法及系统
CA3013624A1 (en) * 2017-08-09 2019-02-09 Daniel Herring Systems and methods for using egl with an opengl api and a vulkan graphics driver
US11451619B2 (en) * 2017-12-12 2022-09-20 Honor Device Co., Ltd. App remote control method and related devices
CN110297568A (zh) * 2018-03-22 2019-10-01 阿里巴巴集团控股有限公司 电子白板实现方法、装置、设备以及存储介质
CN109375980B (zh) * 2018-10-29 2021-10-15 四川长虹教育科技有限公司 基于Andriod系统的触控绘图方法
CN111402349B (zh) * 2019-01-03 2023-09-08 百度在线网络技术（北京）有限公司 渲染方法、渲染装置和渲染引擎
CN111460342B (zh) * 2019-01-21 2023-04-25 阿里巴巴集团控股有限公司 页面的渲染展示方法、装置、电子设备及计算机存储介质
CN109960543B (zh) * 2019-03-18 2022-07-19 广州视源电子科技股份有限公司 书写操作的处理方法和装置
CN110751592A (zh) * 2019-08-21 2020-02-04 北京达佳互联信息技术有限公司 图形资源转换方法、装置、电子设备及存储介质
CN110648272B (zh) * 2019-08-21 2023-10-03 北京达佳互联信息技术有限公司 图形资源转换方法、装置、电子设备及存储介质
CN110704768B (zh) * 2019-10-08 2022-03-18 支付宝(杭州)信息技术有限公司 基于图形处理器的网页渲染方法以及装置
CN113079408B (zh) * 2019-12-17 2022-11-18 北京嗨动视觉科技有限公司 视频播放方法、装置和系统
CN111179369B (zh) * 2019-12-27 2023-07-25 珠海全志科技股份有限公司 一种基于安卓系统的gpu渲染方法及装置
CN111767100A (zh) * 2020-01-09 2020-10-13 北京沃东天骏信息技术有限公司 应用于浏览器的图像处理方法、装置、系统及介质
TWI751496B (zh) * 2020-02-18 2022-01-01 元太科技工業股份有限公司 電子紙顯示器及其驅動方法
CN111459486B (zh) * 2020-04-01 2023-05-23 杭州华望系统科技有限公司 一种基于网页画布的图形拖动优化方法
CN114041111A (zh) 2020-05-20 2022-02-11 京东方科技集团股份有限公司 笔迹绘制方法、装置、电子设备、介质和程序产品
CN111800669B (zh) * 2020-08-10 2021-04-06 视若飞信息科技(上海)有限公司 安卓系统下文本字幕的渲染方法和装置
CN112269575A (zh) * 2020-11-18 2021-01-26 安徽四创电子股份有限公司 一种canvas绘制动态二维场景的方法
CN113225616B (zh) * 2021-04-27 2022-11-15 杭州海康威视数字技术股份有限公司 视频播放方法、装置、计算机设备及可读存储介质
CN115268720A (zh) * 2022-08-16 2022-11-01 北京尽微致广信息技术有限公司 一种页面渲染方法、装置、设备及可读存储介质
CN115409687B (zh) * 2022-10-31 2023-01-13 北京麟卓信息科技有限公司 一种基于显示缓冲区合成的渲染差异检测方法
CN115562793B (zh) * 2022-12-05 2023-02-03 北京麟卓信息科技有限公司 一种基于镜像操作的跨运行环境ui快速渲染方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TW200948088A (en) * 2008-02-27 2009-11-16 Ncomputing Inc System and method for virtual 3D graphics acceleration and streaming multiple different video streams
CN102681853A (zh) * 2012-05-17 2012-09-19 中科方德软件有限公司 一种利用OpenGL ES实现安卓操作系统桌面3D转屏的方法及装置
CN103092612A (zh) * 2012-12-31 2013-05-08 深圳天珑无线科技有限公司 实现安卓操作系统3d桌面贴图的方法及电子装置
CN103116490A (zh) * 2012-12-04 2013-05-22 广州市久邦数码科技有限公司 一种基于网页的九切图绘制方法

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101520067B1 (ko) * 2008-10-02 2015-05-13 삼성전자 주식회사 윈도우 시스템을 구현한 그래픽 처리 방법 및 그 장치
US20120113091A1 (en) * 2010-10-29 2012-05-10 Joel Solomon Isaacson Remote Graphics
JP2013041500A (ja) * 2011-08-18 2013-02-28 Wing Keung Cheung Ｈｔｍｌ５２ｄ描画仕様のみで動作する３ｄエンジン
CN103336816B (zh) * 2013-06-28 2017-02-08 广州市动景计算机科技有限公司 安卓系统上基于GPU实现的Canvas元素渲染方法及装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TW200948088A (en) * 2008-02-27 2009-11-16 Ncomputing Inc System and method for virtual 3D graphics acceleration and streaming multiple different video streams
CN102681853A (zh) * 2012-05-17 2012-09-19 中科方德软件有限公司 一种利用OpenGL ES实现安卓操作系统桌面3D转屏的方法及装置
CN103116490A (zh) * 2012-12-04 2013-05-22 广州市久邦数码科技有限公司 一种基于网页的九切图绘制方法
CN103092612A (zh) * 2012-12-31 2013-05-08 深圳天珑无线科技有限公司 实现安卓操作系统3d桌面贴图的方法及电子装置

Also Published As

Publication number Publication date
US10013503B2 (en) 2018-07-03
CN103336816A (zh) 2013-10-02
WO2014205993A1 (zh) 2014-12-31
US20160328486A1 (en) 2016-11-10

Similar Documents

Publication Publication Date Title
CN103336816B (zh) 安卓系统上基于GPU实现的Canvas元素渲染方法及装置
CN102867284B (zh) 一种图形绘制引擎装置及其实现方法
CN102122502B (zh) 一种三维字体显示方法以及相关装置
US10198785B2 (en) Graphics processing method, apparatus, and system
US8347275B2 (en) OpenGL to OpenGL/ES translator and OpenGL/ES simulator
CN104866318A (zh) 一种多窗口中标签页的展示方法及装置
CN105069831A (zh) 一种基于Hook技术获取OpenGL渲染画面的方法和系统
KR101401380B1 (ko) 원격 렌더링 기반의 3ｄ 응용프로그램 실행 장치 및 그 방법
CN103164227B (zh) 一种窗口图像的采集方法及装置
KR20160032936A (ko) 렌더링 데이터의 압축을 해제하는 장치, 방법 및 기록매체
CN103543923A (zh) 控件的点击事件处理方法及系统
GB2524047A (en) Improvements in and relating to rendering of graphics on a display device
CN113655975B (zh) 图像显示方法、装置、电子设备和介质
JP2013045401A (ja) アニメーション描画装置
CN108733602B (zh) 数据处理
US8203567B2 (en) Graphics processing method and apparatus implementing window system
CN104751057B (zh) 一种用于增强计算机系统安全性的方法及装置
CN103077036A (zh) 一种处理界面的方法及装置
CN103700362A (zh) 多信号窗口显示方法及装置
JP2006171274A (ja) アプリケーション描画端末、アプリケーション描画の表示方法およびアプリケーション描画プログラム
CN105376510A (zh) 一种投影方法及投影装置
WO2023202494A1 (zh) 界面显示方法及电子设备
CN104063241B (zh) 宿主程序与com组件的图像同步显示的方法与系统
CN107479978B (zh) 电子书显示方法、装置及移动终端
CN117234657B (zh) 一种基于虚拟子图层的多窗口渲染优化方法

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C14 Grant of patent or utility model
GR01 Patent grant
TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20200421

Address after: 310052 room 508, floor 5, building 4, No. 699, Wangshang Road, Changhe street, Binjiang District, Hangzhou City, Zhejiang Province

Patentee after: Alibaba (China) Co.,Ltd.

Address before: 2, 16, 301 rooms, 510665 Yun Yun Road, Tianhe District, Guangdong, Guangzhou

Patentee before: GUANGZHOU UCWEB COMPUTER TECHNOLOGY Co.,Ltd.