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

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

Info

Publication number
WO2014205993A1
WO2014205993A1 PCT/CN2013/087693 CN2013087693W WO2014205993A1 WO 2014205993 A1 WO2014205993 A1 WO 2014205993A1 CN 2013087693 W CN2013087693 W CN 2013087693W WO 2014205993 A1 WO2014205993 A1 WO 2014205993A1
Authority
WO
WIPO (PCT)
Prior art keywords
canvas element
rendering
canvas
window
gpu
Prior art date
Application number
PCT/CN2013/087693
Other languages
English (en)
French (fr)
Inventor
易旭昕
Original Assignee
广州市动景计算机科技有限公司
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 广州市动景计算机科技有限公司 filed Critical 广州市动景计算机科技有限公司
Priority to US14/901,431 priority Critical patent/US10013503B2/en
Publication of WO2014205993A1 publication Critical patent/WO2014205993A1/zh

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

Definitions

  • the present invention relates to the field of web page rendering, and more particularly to a method and apparatus for rendering a Canvas element based on GPU hardware on an Android system. Background technique
  • a set of 2D Canvas Drawing APIs is defined in the 2D Canvas specification in HTML5 technology, which enables two-dimensional graphics rendering in immediate mode on a web page.
  • Canvas refers to the canvas. If the page contains a Canvas tag, you can use JavaScript code to draw what the user wants using a variety of 2D Canvas drawing APIs within the scope of the tag.
  • the GPU English full name Graphic Processing Unit, Chinese translation for "graphic processing unit”.
  • the GPU is a concept relative to the CPU.
  • the GPU is the "brain" of the display card, which determines most of the performance, and is also the basis for the difference between 2D graphics cards and 3D graphics cards.
  • the 2D display chip mainly relies on the processing power of the CPU when processing 3D images and special effects, which is called “soft acceleration”.
  • the 3D display chip concentrates the three-dimensional image and special effects processing functions on the display chip, also known as the "hardware acceleration” function.
  • the JavaScript call to the 2D Canvas drawing API is mapped to a platform-dependent 2D drawing library, and the off-screen bitmap is drawn in the 2D drawing library (this step is usually called a drawing step).
  • bitmap is then copied to the visible window of the current program (this step is often referred to as the blending step).
  • This step is often referred to as the blending step.
  • the drawback of this approach is that both the drawing step and the mixing step can only be done by relying on the CPU, and the efficiency is low, and the GPU cannot be fully utilized for hardware acceleration. Summary of the invention
  • the present invention proposes an Html5 Canvas based on GPU hardware implementation on an Android system.
  • the element rendering method and device use the local window rendering mechanism provided by the Android operating system and the OpenGL ES API to use the GPU to complete the drawing and mixing of the Canvas elements, thereby realizing the GPU hardware acceleration to improve the Canvas rendering performance.
  • the present invention provides a Html5 Canvas element rendering method based on GPU hardware implementation on an Android system, including: performing an initialization creation operation for a Canvas element, the initialization creation operation including: based on attribute information of the Canvas element, Creating an off-screen local window for the Canvas element, and creating an EGL Window Surface and an EGL Context based on the off-screen local window; after detecting a rendering operation instruction for the Canvas element in the Html5 webpage and completing the initialization creation operation,
  • the Skia GPU function library converts the call instruction for the 2D Canvas drawing API into a call instruction for the OpenGL ES API; sets the EGL Context created at the time of the initialization operation to the current context of the thread in which the rendering operation is located; according to the Canvas element Attribute information, using the GPU to render the Canvas element in an off-screen local window created during the initializing operation; and copying the rendered Canvas element from the off-screen local window by using a mapping operation function of the GPU Go to the current active window of the device.
  • converting the call instruction for the 2D Canvas drawing API to the call instruction for the OpenGL ES API through the Skia GPU function library may include: EGL Windows to be created in the off-screen local window Surface is packaged into SkGpuDevice; SkGpuDevice-based SkCanvas is created; and the call instruction for the 2D Canvas drawing API is converted into a call instruction for the OpenGL ES API by using the SkCanvas.
  • copying the rendered Canvas element from the off-screen local window to the current active window of the device may include: completing the off-screen local window After the Canvas element is rendered, the off-screen local window is bound to the OpenGL texture; and the off-screen local window is copied to the current active window of the device by a mapping operation.
  • the off-screen local window after receiving the window update request, the off-screen local window is bound to an OpenGL map, and the window update request is detected by the browser rendering engine to change the content of the webpage. After the issue.
  • the attribute information of the Canvas element is obtained from a rendering engine, and the attribute information includes at least an element size and an element position.
  • the 2D Canvas will be painted through the Skia GPU function library.
  • the method may further include: after detecting a rendering operation instruction for the Canvas element in the Html5 webpage, checking whether the initialization is completed for the Canvas element Creating an operation; and performing the initialization creation operation for the Canvas element when the initialization creation operation is not completed.
  • the present invention provides a Canvas element rendering apparatus for implementing Html5 Canvas element rendering based on GPU hardware on an Android system, comprising: an initialization unit, configured to use the attribute information of the Canvas element as the Canvas Creating an off-screen local window, and creating an EGL Window Surface and an EGL Context based on the off-screen local window; a conversion unit for detecting a rendering operation instruction for a Canvas element in the Html 5 webpage and the initialization unit is completed After initializing the creation operation, the call instruction for the 2D Canvas drawing API is converted into a call instruction for the OpenGL ES API through the Skia GPU function library; a setting unit is configured to set the EGL Context created at the time of the initialization operation to the rendering operation a current context of the thread; a rendering unit, configured to render the Canvas element in an off-screen local window created by the GPU during the initializing operation according to attribute information of the Canvas element; and a copy unit for utilizing the The texture operation function of the GPU, the rendered Canvas element is The off-screen
  • the converting unit may include: a packaging module, configured to package an EGL Windows Surface created in the off-screen local window into a SkGpuDevice; a creating module, configured to create a SkGpuDevice-based A SkCanvas; and a conversion module for converting a call instruction for the 2D Canvas drawing API to a call instruction for the OpenGL ES API by using the SkCanvas.
  • the copying unit may include: a binding module, configured to bind the off-screen local window and the OpenGL texture after completing the rendering of the Canvas element in the off-screen local window And; a texture copying module, configured to copy the off-screen local window to a current active window of the device by a mapping operation.
  • the binding module is configured to perform binding the off-screen local window with an OpenGL map after receiving a window update request, the window update request being rendered in a browser The bow I engine detects that the content of the web page has changed.
  • the Canvas element rendering apparatus may further include: a checking unit, configured to check whether the Canvas element is completed after detecting a rendering operation instruction for a Canvas element in the Html5 webpage The initialization creation operation, wherein the initialization creation operation is not completed The initialization unit performs the initialization creation operation for the Canvas element.
  • a checking unit configured to check whether the Canvas element is completed after detecting a rendering operation instruction for a Canvas element in the Html5 webpage The initialization creation operation, wherein the initialization creation operation is not completed The initialization unit performs the initialization creation operation for the Canvas element.
  • the present invention provides a computer readable medium having program code executable by a processor, the program code causing a processor to perform the following steps: performing an initialization creation operation for a Canvas element, the initialization creation operation including Creating an off-screen local window for the Canvas element based on the attribute information of the Canvas element; and creating an EGL Window Surface and an EGL Context based on the off-screen local window; detecting a rendering operation instruction for the Canvas element in the Html5 webpage and completing the initialization
  • the call instruction for the 2D Canvas drawing API is converted into a call instruction for the OpenGL ES API through the Skia GPU function library;
  • the EGL Context created at the time of the initialization operation is set as the current context of the thread in which the rendering operation is located; Attribute information of the Canvas element, using the GPU to render the Canvas element in an off-screen local window created during the initializing operation; and using the GPU's texture operation function to render the rendered Canvas element from the Off-screen local window copied to the device'
  • FIG. 1 is a schematic diagram showing a process of a Canvas element rendering method of the present invention
  • FIG. 2 is a flowchart showing a Html5 Canvas element rendering method based on GPU hardware implemented on an Android system according to an embodiment of the present invention
  • 3 is a schematic diagram showing an example of an initialization operation in FIG. 2
  • FIG. 4 is a diagram showing an example of converting a call instruction for a 2D Canvas drawing API to a call instruction for an OpenGL ES API in FIG. 2
  • 5 shows a schematic diagram of the example of copying the rendered Canvas element from the off-screen local window to the current active window of the device in FIG. 2
  • FIG. 6 shows a GPU based on the GPU for the embodiment of the present invention.
  • Hardware implementation Html5
  • FIG. 7 is a block schematic diagram showing one example of the conversion unit of FIG. 6.
  • FIG. 8 is a block diagram showing an example of the copying unit of FIG.
  • FIG. 9 is a block diagram showing a mobile terminal having the Canvas element rendering apparatus described in FIG. 6.
  • the same reference numerals are used throughout the drawings to refer to the DETAILED DESCRIPTION Various aspects of the present disclosure are described below. It should be understood that the teachings herein may be embodied in a variety of forms, and that any specific structure, function, or both disclosed herein are merely representative.
  • any aspect disclosed herein can be implemented independently of any other aspects, and two or more of these aspects can be combined in various ways.
  • an apparatus or a method of practice may be implemented using any number of the aspects set forth herein.
  • such an apparatus may be implemented or practiced using other structures, functions, or structures and functions in addition to or in one or more aspects than those set forth herein.
  • any aspect described herein can include at least one element of the claims.
  • the technical solution related to the present invention is an implementation scheme of 2D Canvas element rendering in an Html5 webpage using GPU hardware acceleration on the Android platform.
  • OpenGL for Embedded Systems is a subset of the OpenGL 3D graphics API designed for embedded devices such as mobile phones, PDAs, and game consoles.
  • OpenGL Open Graphics Library
  • EGL is the interface between OpenGL ES and the underlying local window system of the operating system.
  • OpenGL ES is designed to provide platform independence.
  • Display is an abstract representation of a graphical display device (display), and most EGL functions take a Display as a parameter.
  • Context is an OpenGL state machine
  • Surface is a drawing buffer
  • Context and Surface can be one-to-one, many-to-one, one-to-many.
  • Context can be one of the three types of window ⁇ pbuffer pixmap.
  • Skia is a 2D vector graphics drawing library containing text (Text), bitmap (Bitmap), graphics
  • FIG. 1 is a schematic diagram showing the process of a Canvas element rendering method according to the present invention. As shown in FIG.
  • the 2D Canvas element in the Html 5 webpage is first drawn in the off-screen local window of the Android system, and copied to the current Android program after the drawing is completed. Visible on the window. 2 illustrates Html5 based on GPU hardware implementation on an Android system in accordance with an embodiment of the present invention.
  • step S110 is performed to perform an initialization creation operation for the Canvas element; then, step S120 is performed to check whether the Canvas element is Complete the initialization creation operation. If the initialization creation operation has not been completed, it returns to step S110. If the initialization creation operation is completed, it proceeds to step S130.
  • FIG. 3 shows a schematic diagram of an example of the initialization operation in FIG. 2. As shown in Figure 3, first, at the step
  • step S121 Create an off-screen local window for the Canvas element based on the attribute information of the Canvas element.
  • the attribute information of the Canvas element is obtained from a rendering engine, and the attribute information includes at least an element size and an element position.
  • an off-screen local window is created according to the element size of the Canvas element.
  • the off-screen local window refers to a local window created by the operating system, but the operating system's window mixer does not draw it onto the display screen when the window is mixed, that is, it does not directly participate in the operating system itself. The window is mixed, it is invisible to the operating system.
  • step S123 an EGL Window Surface and an EGL Context are created based on the off-screen local window.
  • step S130 the call instruction for the 2D Canvas drawing API is converted into a call instruction for the OpenGL ES API by the Skia GPU function library.
  • step S131 the EGL Windows Surface created in the off-screen local window is packaged into a SkGpuDevice.
  • a SkGvas based on SkGpuDevice is created.
  • step S135 the call instruction for the 2D Canvas drawing API is converted into a call instruction for the OpenGL ES API by using the SkCanvas.
  • the created SkCanvas is used for 2D drawing, and then the calling instruction (ie, 2D drawing instruction) for the 2D Canvas drawing API is converted into a calling instruction (SP, 3D GL instruction) for the OpenGL ES API via SkGpuDevice.
  • the EGL Context is set to the thread where the rendering operation is located (SP, for The current context of the drawing thread that renders the Canvas element.
  • the drawing thread renders the Canvas element in the off-screen local window using the GPU according to the attribute information of the Canvas element (position information of the Canvas element, etc.).
  • the hybrid thread utilizes the texture operation function of the GPU to copy the rendered Canvas element from the off-screen local window to the current active window of the device (ie, the current Android program is visible). On the window).
  • FIG. 5 shows a schematic diagram of an example of copying the rendered Canvas element from the off-screen local window to the current active window of the device in FIG. As shown in FIG. 5, after the Canvas element rendering in the off-screen local window is completed, the off-screen local window is bound to the OpenGL texture in step S151.
  • step S153 the off-screen local window is copied to the current active window of the device (ie, the visible window of the current Android program) by a mapping operation, thereby implementing Canvas element rendering according to the present invention.
  • binding the off-screen local window to the OpenGL texture is performed after receiving the window update request, and the window update request is sent after the browser rendering engine detects that the webpage content has changed.
  • the browser rendering engine detects that the webpage content has changed.
  • the rendering engine considers that the content of the Canvas element in the web page has changed, thereby issuing a new update request.
  • step S110 in Fig. 2 may be deleted.
  • the detecting step of the rendering operation instruction for the Canvas element in the Html5 web page may be added.
  • the Html5 Canvas element rendering method based on GPU hardware implementation on the Android system according to the present invention is described above with reference to FIGS. 1 through 5.
  • the above-mentioned Canvas element rendering method of the present invention may be implemented by software, hardware implementation, or a combination of software and hardware.
  • 6 shows a block schematic diagram of a Canvas element rendering apparatus 600 for implementing Html5 Canvas element rendering based on GPU hardware on an Android system, in accordance with an embodiment of the present invention. As shown in FIG.
  • the Canvas element rendering apparatus 600 includes an initialization unit 610, a conversion unit 620, and a setting.
  • a unit 630, a rendering unit 640, and a copy unit 650 are provided.
  • the initialization unit 610 is configured to create an off-screen local window for the Canvas element based on the attribute information of the Canvas element, and create an EGL Window Surface and an EGL Context based on the off-screen local window.
  • the attribute information of the Canvas element is obtained from a rendering engine, and the attribute information includes at least an element size and an element position. After obtaining the attribute information of the Canvas element, an off-screen local window is created according to the element size of the Canvas element.
  • the converting unit 620 is configured to convert the calling instruction for the 2D Canvas drawing API to the OpenGL ES API through the Skia GPU function library after detecting the rendering operation instruction for the Canvas element in the Html 5 webpage and the initialization unit 610 completes the initialization creation operation. Call instruction.
  • FIG. 7 shows a block schematic diagram of one example of the conversion unit 620 of FIG. 6. As shown in FIG. 7, the conversion unit 620 includes a packaging module 621, a creation module 623, and a conversion module 625.
  • the packaging module 621 is configured to package the EGL Windows Surface created in the off-screen local window into a SkGpuDevice.
  • the creation module 623 is used to create a SkCanvas based on SkGpuDevice.
  • the conversion module 625 is configured to convert the call instruction for the 2D Canvas drawing API into a call instruction for the OpenGL ES API by using the SkCanvas.
  • the setting unit 630 is configured to set the EGL Context created at the time of the initialization operation to the current context of the thread in which the rendering operation is located.
  • the thread in which the rendering operation is located refers to the drawing thread used to render the Canvas element.
  • the rendering unit 640 is configured to render the Canvas element in the off-screen local window created by the GPU during the initializing operation according to the attribute information of the Canvas element, such as location information of the Canvas element in the Html5 webpage.
  • the copy unit 650 uses the texture operation function of the GPU to copy the rendered Canvas element from the off-screen local window to the current active window of the device.
  • Fig. 8 is a block diagram showing an example of the copying unit in Fig. 6. As shown in FIG. 8, the copy unit 650 includes a binding module 651 and a texture copy module 653. After completing the rendering of the Canvas element in the off-screen local window, the binding module 651 binds the off-screen local window to the OpenGL texture. The map copy module 653 then copies the off-screen local window to the current active window of the device through a map operation.
  • the binding module 651 is configured to perform binding of the off-screen local window to an OpenGL map after receiving the window update request, the window update request being detected by the browser rendering engine Issued after the content of the page has changed.
  • the Canvas element rendering apparatus 600 may further include an inspection unit (not shown) for checking for the rendering operation instruction for the Canvas element in the Html 5 webpage, Whether the Canvas element completes the initialization creation operation, wherein the initialization unit performs the initialization creation operation for the Canvas element when the initialization creation operation is not completed.
  • the Canvas element rendering apparatus 600 may further include a detecting unit (not shown) for detecting whether there is a rendering operation instruction for the Canvas element in the Html5 webpage.
  • the above method and device can utilize the local window rendering mechanism provided by the Android operating system and
  • FIG. 9 shows a block schematic diagram of a mobile terminal 10 having a Canvas element rendering apparatus 600 in accordance with the present invention.
  • the mobile terminal 10 includes a Canvas element rendering device 600 as shown in FIG.
  • the Canvas element rendering apparatus included in FIG. 9 may further include various modifications of the Canvas element rendering apparatus 600 shown in FIG. 6.
  • the mobile terminal of the present invention can be various smart mobile terminals, such as smart phones.
  • the method according to the invention can also be implemented as a computer program executed by a processor (such as a CPU) in a mobile terminal and stored in a memory of the mobile terminal.
  • the above-described functions defined in the method of the present invention are performed when the computer program is executed by the processor.
  • the method according to the invention may also be embodied as a computer program product comprising a computer readable medium on which is stored a computer program for performing the functions described above in the method of the invention.
  • the method steps and system units described above may also be implemented with a controller and a computer readable storage device for storing a computer program that causes the controller to implement the steps or unit functions described above.
  • Those skilled in the art will also appreciate that the various exemplary logic blocks described in connection with the disclosure herein, The modules, circuits, and algorithm steps can be implemented as electronic hardware, computer software, or a combination of both.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • User Interface Of Digital Computer (AREA)
  • Stored Programmes (AREA)

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元素渲染方法及装置 本申请要求于 2013年 6月 28日提交中国专利局、 申请号为 201310266070.7、发 明名称为 "安卓系统上基于 GPU硬件实现的 Canvas元素渲染方法及装置"的中国专 利申请的优先权， 其全部内容通过引用结合在本申请中。 技术领域
本发明涉及网页渲染领域， 更为具体地， 涉及一种在安卓系统上基于 GPU硬件 实现的 Canvas元素渲染方法及装置。 背景技术
在 HTML5技术中的 2D Canvas规范中定义了一组 2D Canvas 绘图 API (应用程 序接口， Appl ication 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 元素渲染方法， 包括： 针对 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元素从所述离屏本地窗口复制到设备的当前活动窗口上。 在上述方面的一个或多个示例中， 通过 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元素的属性信息是从渲染引擎中 获取的， 所述属性信息至少包括元素大小和元素位置。 在上述方面的一个或多个示例中， 在通过 Skia GPU函数库将针对 2D Canvas绘 图 API的调用指令转换为针对 OpenGL ES API的调用指令之前，所述方法还可以包括： 在检测到针对 Html5网页中的 Canvas元素的渲染操作指令后， 检查针对所述 Canvas 元素是否完成所述初始化创建操作； 以及在未完成所述初始化创建操作时，针对所述 Canvas元素执行所述初始化创建操作。 另一方面，本发明提供了一种用于在安卓系统上基于 GPU硬件实现 Html5 Canvas 元素渲染的 Canvas元素渲染装置， 包括： 初始化单元， 用于基于所述 Canvas元素的 属性信息， 为所述 Canvas元素创建离屏本地窗口， 以及基于所述离屏本地窗口， 创 建 EGL Window Surface和 EGL Context; 转换单元， 用于在检测到针对 Html 5网页 中的 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贴图绑定， 所述窗口更新请求是在浏览器渲 染弓 I擎侦测到网页内容发生变化后发出的。 在上述方面的一个或多个示例中， 所述 Canvas元素渲染装置还可以包括： 检查 单元， 用于在检测到针对 Html5网页中的 Canvas元素的渲染操作指令后， 检查针对 所述 Canvas元素是否完成所述初始化创建操作， 其中， 在未完成所述初始化创建操 作时， 所述初始化单元针对所述 Canvas元素执行所述初始化创建操作。 另一方面， 本发明还提供了一种包括上述 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元素从所述离屏本地窗口复 制到设备的当前活动窗口上。 利用上述方法及装置， 可以利用 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元素渲染方法中， 针对 Html 5网页中的 2D Canvas元素， 首先 在安卓系统的离屏本地窗口中进行绘制，在绘制完成后复制到当前安卓程序的可见窗 口上。 图 2 示出了根据本发明的实施例的在安卓系统上基于 GPU 硬件实现的 Html5
Canvas元素渲染方法的流程图。 如图 2所示， 首先， 在检测到针对 Html 5网页中的 Canvas元素的渲染操作指令 后， 执行步骤 S110, 针对 Canvas元素进行初始化创建操作； 然后， 执行步骤 S120， 检查针对所述 Canvas元素是否完成初始化创建操作。 如果未完成所述初始化创建操 作， 则返回到步骤 S110。 如果完成了所述初始化创建操作， 则进行到步骤 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的调用指令（ S卩， 2D绘图指令） 转换成针对 OpenGL ES API的调用指令 （SP， 3D GL指令）。 然后， 在步骤 S140, 将所述 EGL Context设置为渲染操作所在线程 （SP， 用于 渲染该 Canvas元素的绘图线程） 的当前上下文。 接着， 在步骤 S150, 绘图线程根据所述 Canvas元素的属性信息 （Canvas元素 的位置信息等）， 使用 GPU在离屏本地窗口中渲染所述 Canvas元素。 在完成 Canvas元素渲染后，在步骤 S160,混合线程利用所述 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用于在检测到针对 Html 5网页中的 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元素渲染装置 600还可以包括检查单元 (未示出），用于在检测到针对 Html 5网页中的 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

权 利 要 求
1、 一种在安卓系统上基于 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元素从所述离屏本地窗 口复制到设备的当前活动窗口上。
2、如权利要求 1所述的 Canvas元素渲染方法，其特征在于，通过 Skia GPU 函数库， 将针对 2D Canvas绘图 API的调用指令转换为针对 OpenGL ES API的 调用指令包括：
将在所述离屏本地窗口中创建的 EGL Windows Surface 包装成 SkGpuDevice;
创建基于 SkGpuDevice的 SkCanvas; 以及
利用所述 SkCanvas, 将针对 2D Canvas绘图 API 的调用指令转换为针对 OpenGL ES API的调用指令。
3、 如权利要求 1所述的 Canvas元素渲染方法， 其特征在于， 利用 GPU的 贴图操作功能， 将渲染后的 Canvas元素从所述离屏本地窗口复制到设备的当前 活动窗口上， 包括：
在完成所述离屏本地窗口中的 Canvas元素渲染后， 将所述离屏本地窗口与 OpenGL贴图绑定； 以及
通过贴图操作将所述离屏本地窗口复制到设备的当前活动窗口上。
4、 如权利要求 3所述的 Canvas元素渲染方法， 其特征在于， 在接收到窗口 更新请求后， 将所述离屏本地窗口与 OpenGL贴图绑定， 所述窗口更新请求是在 浏览器渲染引擎侦测到网页内容发生变化后发出的。
5、 如权利要求 1所述的 Canvas元素渲染方法， 其特征在于： 所述 Canvas 元素的属性信息是从渲染引擎中获取的，所述属性信息至少包括元素大小和元素 位置。
6、如权利要求 1所述的 Canvas元素渲染方法，其特征在于，在通过 Skia GPU 函数库将针对 2D Canvas绘图 API的调用指令转换为针对 OpenGL ES API的调 用指令之前， 所述方法还包括：
在检测到针对 Html5网页中的 Canvas元素的渲染操作指令后， 检查针对所 述 Canvas元素是否完成所述初始化创建操作； 以及
在未完成所述初始化创建操作时， 针对所述 Canvas元素执行所述初始化创 建操作。
7、 一种用于在安卓系统上基于 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元素从 所述离屏本地窗口复制到设备的当前活动窗口上。
8、 如权利要求 7所述的 Canvas元素渲染装置， 其特征在于， 所述转换单元 包括：
包装模块， 用于将在所述离屏本地窗口中创建的 EGL Windows Surface包装 成 SkGpuDevice;
创建模块， 用于创建基于 SkGpuDevice的 SkCanvas; 以及
转换模块， 用于利用所述 SkCanvas, 将针对 2D Canvas绘图 API的调用指 令转换为针对 OpenGL ES API的调用指令。
9、 如权利要求 7所述的 Canvas元素渲染装置， 其特征在于， 所述复制单元 包括：
绑定模块， 用于在完成所述离屏本地窗口中的 Canvas元素渲染后， 将所述 离屏本地窗口与 OpenGL贴图绑定； 以及
贴图复制模块，用于通过贴图操作将所述离屏本地窗口复制到设备的当前活 动窗口上。
10、 如权利要求 9所述的 Canvas元素渲染装置， 其特征在于， 所述绑定模 块被配置为在接收到窗口更新请求后， 将所述离屏本地窗口与 OpenGL 贴图绑 定， 所述窗口更新请求是在浏览器渲染引擎侦测到网页内容发生变化后发出的。
11、 如权利要求 7所述的 Canvas元素渲染装置， 其特征在于， 还包括： 检查单元， 用于在检测到针对 Html5网页中的 Canvas元素的渲染操作指令 后， 检查针对所述 Canvas元素是否完成所述初始化创建操作，
其中， 在未完成所述初始化创建操作时， 所述初始化单元针对所述 Canvas 元素执行所述初始化创建操作。
12、 一种具有处理器可执行的程序代码的计算机可读介质， 其特征在于， 所 述程序代码使处理器执行下述步骤： 针对 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元素从所述离屏本地窗 口复制到设备的当前活动窗口上。
PCT/CN2013/087693 2013-06-28 2013-11-22 安卓系统上基于GPU实现的Canvas元素渲染方法及装置 WO2014205993A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
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 (2)

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

Publications (1)

Publication Number Publication Date
WO2014205993A1 true WO2014205993A1 (zh) 2014-12-31

Family

ID=49244981

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2013/087693 WO2014205993A1 (zh) 2013-06-28 2013-11-22 安卓系统上基于GPU实现的Canvas元素渲染方法及装置

Country Status (3)

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

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104598646A (zh) * 2015-02-16 2015-05-06 深圳岂凡网络有限公司 一种网页3d引擎的实现方法及网页3d引擎

Families Citing this family (35)

* 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 合一网络技术(北京)有限公司 基于安卓系统的图像渲染引擎构建方法及系统
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
CN103605534B (zh) * 2013-10-31 2017-04-05 优视科技有限公司 图片加载方法及装置
CN103699577B (zh) * 2013-11-29 2016-10-12 小米科技有限责任公司 一种页面显示加速方法、装置及移动终端
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移动通信有限公司 一种终端设备中切换虚拟现实模式的方法及系统
EP3441877A3 (en) * 2017-08-09 2019-03-20 Daniel Herring Systems and methods for using egl with an opengl api and a vulkan graphics driver
CN111433743B (zh) * 2017-12-12 2022-05-20 荣耀终端有限公司 一种app远程控制方法及相关设备
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 广州视源电子科技股份有限公司 书写操作的处理方法和装置
CN110648272B (zh) * 2019-08-21 2023-10-03 北京达佳互联信息技术有限公司 图形资源转换方法、装置、电子设备及存储介质
CN110751592A (zh) * 2019-08-21 2020-02-04 北京达佳互联信息技术有限公司 图形资源转换方法、装置、电子设备及存储介质
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 杭州华望系统科技有限公司 一种基于网页画布的图形拖动优化方法
WO2021232294A1 (zh) * 2020-05-20 2021-11-25 京东方科技集团股份有限公司 笔迹绘制方法、装置、电子设备、介质和程序产品
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 杭州海康威视数字技术股份有限公司 视频播放方法、装置、计算机设备及可读存储介质
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
JP2013041500A (ja) * 2011-08-18 2013-02-28 Wing Keung Cheung Ｈｔｍｌ５２ｄ描画仕様のみで動作する３ｄエンジン
CN103092612A (zh) * 2012-12-31 2013-05-08 深圳天珑无线科技有限公司 实现安卓操作系统3d桌面贴图的方法及电子装置
CN103336816A (zh) * 2013-06-28 2013-10-02 广州市动景计算机科技有限公司 安卓系统上基于GPU实现的Canvas元素渲染方法及装置

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
CN102681853B (zh) * 2012-05-17 2015-05-20 中科方德软件有限公司 一种利用OpenGL ES实现安卓操作系统桌面3D转屏的方法及装置
CN103116490B (zh) * 2012-12-04 2016-06-29 广州市久邦数码科技有限公司 一种基于网页的九切图绘制方法

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
JP2013041500A (ja) * 2011-08-18 2013-02-28 Wing Keung Cheung Ｈｔｍｌ５２ｄ描画仕様のみで動作する３ｄエンジン
CN103092612A (zh) * 2012-12-31 2013-05-08 深圳天珑无线科技有限公司 实现安卓操作系统3d桌面贴图的方法及电子装置
CN103336816A (zh) * 2013-06-28 2013-10-02 广州市动景计算机科技有限公司 安卓系统上基于GPU实现的Canvas元素渲染方法及装置

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104598646A (zh) * 2015-02-16 2015-05-06 深圳岂凡网络有限公司 一种网页3d引擎的实现方法及网页3d引擎

Also Published As

Publication number Publication date
US10013503B2 (en) 2018-07-03
US20160328486A1 (en) 2016-11-10
CN103336816A (zh) 2013-10-02
CN103336816B (zh) 2017-02-08

Similar Documents

Publication Publication Date Title
WO2014205993A1 (zh) 安卓系统上基于GPU实现的Canvas元素渲染方法及装置
WO2017000580A1 (zh) 一种媒体内容渲染的方法、用户设备及系统
EP2756481B1 (en) System and method for layering using tile-based renderers
JP6185211B1 (ja) 適応的シェーディングによるテクスチャルックアップを使用した帯域幅低減
JP5166552B2 (ja) グラフィックス処理システムにおけるオフスクリーンサーフェスのためのマルチバッファサポート
TW200901081A (en) Post-render graphics overlays
TW201812613A (zh) ３Ｄ ｃａｎｖａｓ網頁元素的渲染方法、裝置及電子設備
CN101882077B (zh) 高效率绘制与渲染基本图形的方法及装置
WO2015047642A1 (en) Conditional page fault control for page residency
US9542715B2 (en) Memory space mapping techniques for server based graphics processing
EP3353737A1 (en) Efficient display processing with pre-fetching
WO2020192608A1 (zh) 图形渲染方法、装置和计算机可读存储介质
WO2013004118A1 (zh) 一种图形绘制引擎及其实现方法
US9805439B2 (en) Memory space mapping techniques for server based graphics processing
KR20170132758A (ko) 하이브리드 2d/3d 그래픽 렌더링
US8854368B1 (en) Point sprite rendering in a cross platform environment
TW200303493A (en) Depth write disable for zone rendering
CN105487848A (zh) 一种3d应用的显示刷新方法及系统
KR20090087504A (ko) 포스트-렌더링 그래픽스 회전
CN116821040A (zh) 基于gpu直接存储器访问的显示加速方法、装置及介质
EP3438936B1 (en) Method and apparatus for managing graphics layers within a data processing system
CN111460342B (zh) 页面的渲染展示方法、装置、电子设备及计算机存储介质
US20100085367A1 (en) Graphics processing method and apparatus implementing window system
JP2006171274A (ja) アプリケーション描画端末、アプリケーション描画の表示方法およびアプリケーション描画プログラム
CN106201401A (zh) 用于虚拟桌面呈现的3d图像加速显示方法

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 13888428

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

WWE Wipo information: entry into national phase

Ref document number: 14901431

Country of ref document: US

122 Ep: pct application non-entry in european phase

Ref document number: 13888428

Country of ref document: EP

Kind code of ref document: A1