CN113888684A - Method and apparatus for graphics rendering and computer storage medium - Google Patents

Abstract

The embodiment of the application provides a graph rendering method, equipment and a computer storage medium. The graphic rendering method comprises the following steps: obtaining a rendering instruction issued by a container component by utilizing an engine component, and determining an instruction type and an execution operation corresponding to the rendering instruction; when the rendering instruction comprises a graphic rendering instruction, the graphic rendering operation is carried out in a set canvas environment by utilizing a canvas implementation component to obtain a rendered graphic, wherein the graphic rendering operation comprises at least one of the following operations: 2D rendering operation, 3D rendering operation. The technical scheme that this application provided realizes the graphics through the engine device that the framework is simple, the rendering pipeline is retrencied and plays up the operation, not only can guarantee the exactness of graphics rendering, specifically can reach the effect that the browser was played up, can satisfy different users' user demand moreover, conveniently carries out the graphics rendering operation, supports the container of polymorphic type such as applet, widget, Weex simultaneously.

Description

Method and apparatus for graphics rendering and computer storage medium

Technical Field

The present application relates to the field of image processing technologies, and in particular, to a method and an apparatus for rendering a graphic, and a computer storage medium.

Background

The applet is an application which can be used without downloading and installing, the dream that the application is 'reachable by a touch' is realized, and the user can open the application by scanning or searching. At present, graphics in an applet are generally rendered by a web view WebView engine in a browser kernel. However, since the rendering pipeline in the browser kernel is complex, when an engine in the browser kernel is used to perform a rendering operation on graphics in an applet or other scene, rendering performance is not ideal.

Disclosure of Invention

The embodiment of the application provides a graphic rendering method, equipment and a computer storage medium, which can ensure the performance and effect of graphic rendering by realizing graphic rendering operation through an engine device with simple structure and simplified rendering pipeline.

In a first aspect, an embodiment of the present application provides a graphics rendering method, including:

obtaining a rendering instruction issued by a container component by utilizing an engine component, and determining an instruction type and an execution operation corresponding to the rendering instruction;

when the rendering instruction comprises a graphic rendering instruction, the graphic rendering operation is carried out in a set canvas environment by utilizing a canvas implementation component to obtain a rendered graphic, wherein the graphic rendering operation comprises at least one of the following operations: 2D rendering operation, 3D rendering operation.

In a second aspect, an embodiment of the present application provides a graphics rendering apparatus, including:

the engine component is used for acquiring the rendering instruction issued by the container component, and determining the instruction type and the execution operation corresponding to the rendering instruction;

the canvas implementation component is configured to, when the rendering instruction includes a graphics rendering instruction, perform a graphics rendering operation in a set canvas environment to obtain a rendered graphics, where the graphics rendering operation includes at least one of: 2D rendering operation, 3D rendering operation.

In a third aspect, an embodiment of the present application provides an electronic device, including: a memory, a processor; wherein the memory is configured to store one or more computer instructions, wherein the one or more computer instructions, when executed by the processor, implement the graphics rendering method of the first aspect.

In a fourth aspect, an embodiment of the present invention provides a computer storage medium for storing a computer program, where the computer program is used to make a computer implement the graphics rendering method shown in the first aspect when executed.

In a fifth aspect, an embodiment of the present invention provides a computer program product, including: a computer program which, when executed by a processor of an electronic device, causes the processor to perform the graphics rendering method of the first aspect.

In a sixth aspect, an embodiment of the present application provides a graphics rendering method, including:

acquiring a rendering instruction to be processed;

establishing a canvas environment corresponding to the rendering instruction;

when the rendering instruction comprises a graphics rendering instruction, performing graphics rendering operation in the painting environment to obtain a rendered graphic, wherein the graphics rendering operation comprises at least one of the following operations: 2D rendering operation, 3D rendering operation.

In a seventh aspect, an embodiment of the present application provides a graphics rendering apparatus, including:

the first acquisition module is used for acquiring a rendering instruction to be processed;

the first establishing module is used for establishing a canvas environment corresponding to the rendering instruction;

a first processing module, configured to, when the rendering instruction includes a graphics rendering instruction, perform a graphics rendering operation within the canvas environment to obtain a rendered graphics, where the graphics rendering operation includes at least one of: 2D rendering operation, 3D rendering operation.

In an eighth aspect, an embodiment of the present application provides an electronic device, including: a memory, a processor; wherein the memory is configured to store one or more computer instructions, wherein the one or more computer instructions, when executed by the processor, implement the graphics rendering method of the sixth aspect.

In a ninth aspect, an embodiment of the present invention provides a computer storage medium for storing a computer program, where the computer program is used to make a computer implement the graphics rendering method shown in the above sixth aspect when executed.

In a tenth aspect, an embodiment of the present invention provides a computer program product, including: a computer program which, when executed by a processor of an electronic device, causes the processor to perform the graphics rendering method of the sixth aspect described above.

According to the technical scheme, the rendering operation of the graph is realized through the engine device which is simple in structure and simple in rendering pipeline, the rendering accuracy of the graph can be guaranteed, the rendering effect of the browser can be achieved, the using requirements of different users can be met, the rendering operation of the graph is convenient to carry out, meanwhile, multiple types of containers such as small programs, small parts and Weex are supported, and the practicability of the rendering method is improved.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative efforts.

FIG. 1a is a schematic structural diagram of an engine for a graphics rendering operation according to an embodiment of the present disclosure;

fig. 1b is a schematic flowchart of a graphics rendering method according to an embodiment of the present disclosure;

fig. 2 is a schematic flowchart of another graphics rendering method according to an embodiment of the present disclosure;

fig. 3 is a first flowchart illustrating a process of obtaining a pending rendering instruction according to an embodiment of the present application;

fig. 4 is a schematic flowchart of displaying the rendered graphics according to the embodiment of the present application;

fig. 5 is a schematic flowchart of another graphics rendering method according to an embodiment of the present application;

fig. 6 is a schematic flowchart of another graphics rendering method according to an embodiment of the present application;

fig. 7 is a second flowchart illustrating a process of obtaining a to-be-processed rendering instruction according to an embodiment of the present application;

FIG. 8 is a schematic diagram illustrating a graphics rendering method according to an embodiment of the present application;

fig. 9 is a schematic flowchart of a graphics rendering method according to an embodiment of the present application;

fig. 10 is a schematic structural diagram of a graphics rendering apparatus according to an embodiment of the present application;

FIG. 11 is a schematic structural diagram of an electronic device corresponding to the graphics rendering apparatus shown in FIG. 10;

fig. 12 is a schematic structural diagram of a graphics rendering apparatus according to an embodiment of the present application;

fig. 13 is a schematic structural diagram of an electronic device corresponding to the graphics rendering apparatus shown in fig. 12.

Detailed Description

In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

The terminology used in the embodiments of the present application is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. As used in the examples of this application and the appended claims, the singular forms "a", "an", and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise, and "a" and "an" typically include at least two, but do not exclude the presence of at least one.

It should be understood that the term "and/or" as used herein is merely one type of association that describes an associated object, meaning that three relationships may exist, e.g., a and/or B may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the character "/" herein generally indicates that the former and latter related objects are in an "or" relationship.

The words "if", as used herein, may be interpreted as "at … …" or "at … …" or "in response to a determination" or "in response to a detection", depending on the context. Similarly, the phrases "if determined" or "if detected (a stated condition or event)" may be interpreted as "when determined" or "in response to a determination" or "when detected (a stated condition or event)" or "in response to a detection (a stated condition or event)", depending on the context.

It is also noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a good or system that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such good or system. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a commodity or system that includes the element.

In addition, the sequence of steps in each method embodiment described below is only an example and is not strictly limited.

Interpretation of terms:

cross-platform: broadly, programming languages, software or hardware devices may run on multiple operating systems or devices of different hardware architectures.

(Web) Canvas: specifically the Canvas drawing capability defined in the W3C standard and formally introduced by html5, comprising: a Canvas label and a 2D & WebGL JS Application program Interface (API for short).

WebGL (Web Graphics library): the method is a general 3D drawing protocol of a Web end, and JS is combined with OpenGL (ES), so that html5 Canvas supports 3D hardware accelerated rendering.

The game engine: the game engine is used for simplifying game development cost and generally comprises a renderer, a physical engine, a collision detection module, a scene management module and other functional modules.

The small program: the application can be used without downloading and installing, the dream that the application is 'reachable by a touch hand' is realized, and the application can be opened by scanning or searching by a user.

The JavaScript engine, called JS engine for short, is a virtual machine for processing JavaScript scripts.

JSI: the JS engine abstract layer shields the difference of the JS engines, so that developers can run on different JS engines through one set of codes.

Skia engine: namely, the android system underlying 2D graphics processing engine is a C + + open source function library, includes functions such as font processing and bitmap processing, is generally applied to an android system or Chrome browser, and can render 2D texts and images by using Skia.

The following describes the graphics rendering method, apparatus, and computer storage medium provided in various embodiments of the present application with an exemplary application scenario.

FIG. 1a is a schematic structural diagram of an engine for a graphics rendering operation according to an embodiment of the present disclosure; referring to fig. 1a, the present embodiment provides a cross-platform, high-performance, standardized, and extensible engine for graphics rendering, which can be embedded in WebView by replacing default Canvas with a peer rendering method, can be used in different containers (e.g., applet, Weex, etc.), and can be used on a large scale in live broadcast, e-commerce, etc. Specifically, the engine may be deployed on a client or a server, and when the engine is deployed on a client, the client is a terminal device capable of performing a graphics rendering operation, and a basic structure of the client may include: at least one processor. The number of processors depends on the configuration and type of client. The client may also include a Memory, which may be volatile, such as RAM, or non-volatile, such as Read-Only Memory (ROM), flash Memory, etc., or may include both types. The memory typically stores an Operating System (OS), one or more application programs, and may also store program data and the like. In addition to the processing unit and the memory, the client includes some basic configurations, such as a network card chip, an IO bus, a display component, and some peripheral devices. Alternatively, some peripheral devices may include, for example, a keyboard, a mouse, a stylus, a printer, and the like. Other peripheral devices are well known in the art and will not be described in detail herein. Alternatively, the client may be a pc (personal computer) terminal, a handheld terminal (e.g., a smart phone, a tablet computer), or the like.

When the engine is deployed on a server, the server is a device capable of providing a graphics rendering service, and the server may be a cluster server, a regular server, a cloud host, a virtual center, or the like.

Specifically, the engine for graphics rendering may include: the JS engine component and the canvas implementation component, at this time, referring to fig. 1b, the graphics rendering method in this embodiment may include:

step S101: and obtaining the rendering instruction issued by the container component by utilizing the engine component, and determining the instruction type and the execution operation corresponding to the rendering instruction.

Step S102: when the rendering instruction comprises a graphic rendering instruction, the canvas implementation component performs graphic rendering operation in a set canvas environment to obtain a rendered graphic, wherein the graphic rendering operation comprises at least one of the following operations: 2D rendering operation, 3D rendering operation.

The container component may form a container layer, containers such as applets, widgets, or Weex frames may be deployed on the container layer, the engine component may form an engine layer, and the engine layer is configured to analyze and process the rendering instruction, where the rendering instruction may refer to an instruction that needs to be subjected to rendering processing operation, in some examples, the rendering instruction may be a JS rendering instruction, and of course, the rendering instruction may also be another type of rendering instruction, for example: the rendering instructions may also be CAD rendering instructions, and the like. It is to be understood that when the rendering instruction is a JS rendering instruction, the engine component may be a JS engine component. The canvas implementation component may form a canvas implementation layer for implementing graphics rendering operations.

For convenience of understanding and explanation, the following description will be given by taking the JS instruction as the rendering instruction and the JS engine component as the engine component as examples: specifically, the container component can be in communication connection with the JS engine component, so that after the JS instruction is acquired by the container component, the JS instruction can be sent to the JS engine component, and the JS instruction issued by the container component can be acquired by the JS engine component. In some examples, the container component can generate a JS file based on the execution operation input by the user, the JS file includes a plurality of JS instructions, and then the JS file is transmitted to the JS engine component, so that the JS engine component can acquire the JS file integrated with the plurality of JS instructions. It should be noted that, since the container component can deploy multiple applets or widgets, and each applet or widget can send a JS instruction to the JS engine component, the JS instruction obtained by the JS engine component can come from different applets or widgets at the same time.

Since the JS instruction has a plurality of different types, the different types of JS instruction may correspond to different execution operations, for example: a JS instruction for refreshing the current page, a JS instruction for refreshing the parent object, a JS instruction for refreshing the parent window object, a JS instruction for performing the digital conversion operation, a JS instruction for implementing the graphics rendering operation, and the like. Therefore, after the JS engine component acquires the JS instruction, the JS instruction can be analyzed to identify the instruction type corresponding to the JS instruction and the operation to be executed.

After JS engine component carries out analysis processes to the JS instruction, can acquire the processing result that the JS instruction corresponds, when the processing result is that the JS instruction includes the graphics rendering instruction, then explain that the graphics rendering operation needs to be carried out this moment, then, need realize the subassembly through the canvas and realize the graphics rendering operation, and is concrete, and the canvas realizes that the subassembly can carry out the graphics rendering operation in the canvas environment that sets for, and the graphics rendering operation includes at least one of following: the method includes a 2D rendering operation and a 3D rendering operation, and in some examples, the 3D rendering operation may be specifically a WebGL rendering operation, so that a rendered graphic meeting design requirements may be obtained, and the rendered graphic may be a 2D graphic or a 3D graphic.

The graphic rendering method provided by the embodiment realizes graphic rendering operation through the engine device which is simple in structure and relatively simple in rendering pipeline, not only can guarantee the correctness of graphic rendering, but also can specifically achieve the effect of browser rendering, can meet the use requirements of different users, is convenient to perform graphic rendering operation, simultaneously supports multiple types of containers such as small programs, small parts and Weex, and further improves the practicability of the rendering method.

Based on the above embodiments, referring to fig. 1a, a specific architecture of an engine component for performing analysis processing on a rendering instruction is not limited in this embodiment, and a person skilled in the art may configure the engine component according to a specific application scenario or application requirements. For example, when the engine module is a JS engine module, a plurality of JS engine units of different types may be included in the JS engine module, and the JS engine units may include at least two of the following: a JS V8 engine, a javascript core engine, a Quick JS engine, etc., although those skilled in the art can configure other types of JS engine units according to specific application requirements and design requirements, and the details thereof are not repeated herein.

Based on the engine component with the above structure, in this embodiment, the obtaining, by the engine component, the rendering instruction issued by the container component, and determining the instruction type and the execution operation corresponding to the rendering instruction may include: and obtaining the rendering instruction issued by the container component by using the engine module, determining a target engine unit corresponding to the rendering instruction in a plurality of engine units of different types, and determining the instruction type and executing operation corresponding to the rendering instruction by using the target engine unit.

Specifically, since the engine units of different types can analyze and process the applet or a small part of the rendering instructions sent by the applet or the small part of the applet, in order to ensure the accuracy and reliability of analyzing and identifying the rendering instructions, after the engine module obtains the rendering instructions issued by the container assembly, the engine module may be used to determine a target engine unit corresponding to the rendering instructions among the engine units of different types. Specifically, among a plurality of different types of engine units, determining a target engine unit corresponding to the rendering instruction may include: the method comprises the steps of obtaining an instruction type identifier corresponding to a rendering instruction, storing a mapping relation between the instruction type identifier and an engine unit in advance, and determining a target engine unit corresponding to the instruction type identifier based on the mapping relation in a plurality of different types of engine units.

After the target engine unit is acquired, the rendering instruction may be analyzed and identified by the target engine unit to determine an instruction type and an execution operation corresponding to the rendering instruction. For example: the container assembly includes: the small program 1 and the small program 2 are used, the small program 1 issues the JS file 1 to the JS engine component, the JS file 1 comprises a plurality of JS instructions to be processed, after the JS engine component acquires the JS file 1, an instruction type identifier corresponding to the JS file 1 can be determined, specifically, a file extension name of the JS file 1 can be acquired, and the instruction type identifier corresponding to the JS file 1 is determined through the file extension name. When the instruction type is identified as type a, the following mapping relation is configured in advance: the JS instruction of the type a needs to be analyzed and identified by a JSC engine unit. Therefore, the JSC engine units in the JS engine units can be determined as target engine units based on the mapping relationship, and then the JSC engine units can be used for analyzing and processing the JS instructions in the JS file 1, so that a relatively accurate analysis and processing result can be obtained.

In this embodiment, the engine module in the engine component is set to include a plurality of engine units of different types, and the configured engine units can analyze and process rendering instructions of different types, specifically, the engine module is used to determine a target engine unit corresponding to a rendering instruction in the plurality of engine units of different types, and then the target engine unit is used to determine an instruction type and an execution operation corresponding to the rendering instruction; when the engine module is the JS engine module, the JS engine of most types can be supported through the JSI technology, the deployed JS engine can analyze and process the JS instructions corresponding to the applets or the applets of different types, the quality and the reliability of the JS instruction analysis and processing are ensured, and the application range of the graph rendering method is effectively expanded.

On the basis of the above embodiment, referring to fig. 1a, the engine assembly in this embodiment may further include: the engine association module, at this time, the method in this embodiment may further include: and associating the preset graphic application program interface with the engine module by using the engine association module, and performing graphic drawing operation in the canvas environment through the graphic application program interface and the graphic drawing instruction when the rendering instruction comprises the graphic drawing instruction.

Since the engine module does not have a graphics rendering capability, in order to implement the graphics rendering operation, a preset graphics application program interface API may be associated with the engine module, that is, the preset graphics API may be bound with the engine module by the engine association module, where the graphics API may include at least one of the following: a graphics API corresponding to a 2D graphics library, a graphics API corresponding to a 3D graphics library, and so on. Thus, when the rendering instructions include graphics drawing instructions, graphics drawing operations may be performed within the canvas environment via the graphics application program interface and the graphics drawing instructions. For example: when the rendering instruction comprises a straight line drawing instruction, the straight line drawing operation can be carried out through a graphic API corresponding to the 2D graphic library; when the rendering instruction comprises a sphere drawing instruction, the drawing operation of the sphere can be performed through a graphics API corresponding to the 3D graphics library, so that the engine module can effectively realize the graphics drawing operation.

It should be noted that, because the number of the engine modules may be multiple, and the implementation editing languages for performing the binding operation between the multiple engine modules and the graphics API are different, at this time, in order to shield the difference between the multiple engine modules, the association operation between the multiple engine modules and the graphics API may be implemented through the intermediate component, specifically, the association operation is performed on the graphics API and the intermediate component, and the intermediate component is in communication connection with each engine module, so that each engine module may call the graphics API through the intermediate component, thereby effectively implementing the association operation between the graphics API and each engine module through one set of association code, and further improving the practicability of the graphics rendering method.

For example, when the engine module is a JS engine module, the JS engine modules may be multiple, and the editing languages for implementing the binding operation between the JS engine modules and the graphics API are different, at this time, in order to shield differences between the JS engine modules, the association operation between the JS engine modules and the graphics API may be implemented through the JSI middleware, specifically, the association operation is performed on the graphics API and the JSI middleware, and the JSI middleware is in communication connection with each JS engine module, so that each JS engine module may call the graphics API through the JSI middleware, thereby effectively implementing the association operation between the graphics API and each JS engine module through a set of association codes, and further improving the practicability of the graphics rendering method.

On the basis of the foregoing embodiment, referring to fig. 1a, the canvas implementation component in this embodiment may include: a Canvas rendering unit and a WebGL rendering unit; at this time, when the rendering instruction includes a graphics rendering instruction, the performing, by the canvas implementation component in this embodiment, the graphics rendering operation in the set canvas environment may include:

step S1021: and performing 2D rendering operation of the graphics by the Skia engine in the set Canvas environment by using a Canvas rendering unit.

Step S1022: and performing 3D rendering operation of the graph in the set canvas environment by using the WebGL rendering unit.

In order to improve the universality and universality of the use of the engine architecture, when the Canvas implementation component is configured, the Canvas rendering unit can be configured to implement 2D rendering operation of graphics through the Skia engine, the WebGL rendering unit can implement 3D rendering operation of graphics through the OpenGLES engine, and the OpenGLES (OpenGL for Embedded systems) engine is a subset of the OpenGL three-dimensional graphics API and is designed for Embedded devices such as mobile phones, PDAs, game hosts and the like. Therefore, the canvas implementation component can effectively implement a standard interface completely consistent with a browser kernel based on the Skia engine and the OpenGLES engine, so that the practicability of the graph rendering method can be improved, the use performance of the graph rendering method can be improved, and performance optimization operation is facilitated.

On the basis of the above embodiment, referring to fig. 1a, the method in this embodiment may further include: before the engine component obtains the rendering instruction issued by the container component, a window environment corresponding to an operating system and the rendering instruction is established by using a canvas configuration module included in the window adaptation component, the window environment is used for displaying a graph rendering result, the operating system corresponds to the container component, and the window adaptation component is used for being deployed on a preset platform framework.

The engine in this embodiment may include a form adaptation component, configured to be deployed on a preset platform architecture, where the preset platform architecture may include at least one of the following: android platform architecture, iOS platform architecture, windows platform architecture, and the like. Specifically, the window adaptation component may be deployed on a preset platform architecture, and the window environments for displaying the graphics rendering result corresponding to different preset platform architectures are different. Therefore, in the process of running the engine, the canvas configuration module may learn, before the engine component acquires the rendering instruction issued by the container component, the operating system corresponding to the container component, for example: when the container component runs on the Android platform architecture, the operating system is an Android system; when the container component runs on the iOS platform architecture, the operating system is an iOS system; when the container component runs on the windows platform architecture, the operating system is a windows system. After learning the operating system, a corresponding window environment may be established based on the operating system and the rendering instructions, the window environment corresponding to the operating system for displaying the graphics rendering results corresponding to the rendering instructions.

In this embodiment, the engine is configured to further include a window adaptation component, the window adaptation component may be deployed on a preset platform architecture, and then before the engine component obtains a rendering instruction issued by the container component, a window environment corresponding to the operating system and the rendering instruction is established through the canvas configuration module, and the window environment is used for displaying a graphics rendering result, thereby effectively realizing that platform architectures of different types can be supported through one set of code logic, and further improving the practicability and the application range of the graphics rendering method.

On the basis of the above embodiment, referring to fig. 1a, the method in this embodiment may further include: and acquiring the rendered graph by using an interface management module in the window adaptation component, and displaying and/or managing the rendered graph.

Specifically, after the rendered graph is obtained, if the rendered graph needs to be displayed, the rendered graph can be displayed through a display; if the rendered graphics need to be managed, the rendered graphics may be managed, for example: the rendered graph can be stored, transmitted, marked and the like, so that the rendered graph can be effectively displayed and/or managed according to design requirements or application requirements after being obtained, and the convenience and reliability of the graph rendering method are further improved.

Fig. 2 is a schematic flowchart of another graphics rendering method according to an embodiment of the present disclosure; referring to fig. 2, the present embodiment provides another graphics rendering method, and the execution subject of the method may be a graphics rendering apparatus, and it is understood that the graphics rendering apparatus may be implemented as software, or a combination of software and hardware. Specifically, the graphics rendering method may include:

step S201: and acquiring a rendering instruction to be processed.

Step S202: a canvas environment corresponding to the rendering instructions is established.

Step S203: when the rendering instruction comprises a graphics rendering instruction, performing graphics rendering operation in the canvas environment to obtain a rendered graphic, wherein the graphics rendering operation comprises at least one of the following operations: 2D rendering operation, 3D rendering operation.

The above steps are explained in detail below:

step S201: and acquiring a rendering instruction to be processed.

The to-be-processed rendering instruction refers to a rendering instruction that needs to be analyzed, in some examples, the rendering instruction may be a JS rendering instruction, and of course, the rendering instruction may also be another type of rendering instruction, for example: the rendering instructions may also be CAD rendering instructions, and the like. Specifically, the number of the obtained rendering instructions to be processed may be one or more, a specific implementation manner of obtaining the rendering instructions is not limited in this embodiment, and a person skilled in the art may perform any setting according to a specific application scenario, for example: the graphics rendering device can be provided with an instruction acquisition device, the execution operation input by a user is acquired through the instruction acquisition device, and the rendering instruction can be generated based on the execution operation; or, the graphics rendering apparatus may be communicatively connected to a third device (which may be a client or an applet running on the client), and after the rendering instruction input by the user is obtained through the third device, the obtained rendering instruction may be transmitted to the graphics rendering apparatus, so that the graphics rendering apparatus can stably obtain the rendering instruction.

In some examples, when the rendering instruction is a JS instruction, obtaining the rendering instruction to be processed may include: and acquiring the JS instruction sent by at least one container in the container component. Of course, those skilled in the art may also use other manners to obtain the rendering instruction to be processed, as long as the accuracy and reliability of obtaining the rendering instruction can be ensured, which is not described herein again.

Step S202: a canvas environment corresponding to the rendering instructions is established.

After the rendering instruction is obtained, since different types of rendering instructions may correspond to different canvas environments, in order to implement a graphics rendering operation, a canvas environment corresponding to the rendering instruction may be established. In some instances, establishing the canvas environment corresponding to the rendering instructions may include: the method comprises the steps of determining an instruction type of a rendering instruction, and establishing a canvas environment corresponding to the rendering instruction based on the instruction type, wherein the canvas environment is used for realizing a graph rendering operation. In other examples, the same type of rendering instructions executed on different operating platforms may correspond to different canvas environments, and thus, establishing the canvas environment corresponding to the rendering instructions may include: an operating system for executing the rendering instructions is determined, and a canvas environment is established based on the operating system and the rendering instructions, the canvas environment being used for implementing the graphics rendering operations.

Of course, those skilled in the art may also use other manners to establish the canvas environment corresponding to the rendering instruction, as long as the accurate reliability of establishing the canvas environment can be ensured, which is not described herein again.

Step S203: when the rendering instruction comprises a graphics rendering instruction, performing graphics rendering operation in the canvas environment to obtain a rendered graphic, wherein the graphics rendering operation comprises at least one of the following operations: 2D rendering operation, 3D rendering operation.

Since rendering instructions are of many different types, different types of rendering instructions may correspond to different execution operations, such as: rendering instructions for refreshing the current page, rendering instructions for refreshing the parent object, rendering instructions for refreshing the parent window object, rendering instructions for performing a digital conversion operation, rendering instructions for implementing a graphics rendering operation, and so forth. Therefore, after the rendering instruction is acquired, the rendering instruction may be analyzed, and specifically, the instruction type corresponding to the rendering instruction and the operation to be performed may be identified.

When the processing result is that the rendering instruction comprises a graphics rendering instruction, it indicates that a graphics rendering operation needs to be performed at this time, and further, the graphics rendering operation can be performed in the established canvas environment, and the graphics rendering operation includes at least one of the following operations: and 2D rendering operation and 3D rendering operation, so that rendered graphics meeting design requirements can be obtained, and the rendered graphics can be 2D graphics or 3D graphics.

Compared with the rendering mode of a browser kernel, the graph rendering method provided by the embodiment has the advantages that the implementation mode is simple, the rendering principle is simple, the correctness of graph rendering can be guaranteed, the rendering effect of the browser can be achieved, the use requirements of different users are met, the graph rendering operation is convenient to carry out, meanwhile, small programs, small parts, Weex and other types of containers are supported, the requirements of brand marketing and other requirements can be met, and the practicability of the graph rendering method is effectively improved.

Fig. 3 is a first flowchart illustrating a process of obtaining a pending rendering instruction according to an embodiment of the present application; on the basis of the foregoing embodiment, referring to fig. 3, the present embodiment provides an implementation manner for acquiring a to-be-processed rendering instruction, and specifically, the acquiring a to-be-processed rendering instruction in the present embodiment may include:

step S301: all original rendering instructions included in the display list are fetched.

Step S302: invalid instructions included in all of the original rendering instructions are identified.

Step S303: and deleting the invalid instruction to obtain a rendering instruction to be processed.

The display list used for storing the rendering instructions is configured in advance, and after the rendering instructions sent by the applet or the user are acquired, the received rendering instructions can be stored in the display list, so that the original rendering instructions can be generated. Since the original rendering instructions may include invalid instructions (useless instructions), the invalid instructions may include: error instructions, overlaid graphics drawing instructions, and the like. Therefore, in order to improve the quality and efficiency of the graphics rendering operation, all the original rendering instructions included in the display list may be obtained first, and all the original rendering instructions may correspond to a period of time or a graphics rendering operation, that is, obtaining all the original rendering instructions included in the display list may include: acquiring an instruction calling period, and acquiring all original rendering instructions included in the display list based on the instruction calling period; alternatively, fetching all of the original rendering instructions included in the display list may include: and acquiring an instruction calling operation, and acquiring all original rendering instructions included in the display list based on the instruction calling operation.

After all the original rendering instructions are fetched, analysis and identification can be performed on all the original rendering instructions to identify invalid instructions included in all the original rendering instructions. In some examples, identifying invalid instructions included in all of the original rendering instructions may include: and acquiring a machine learning model for analyzing and processing the instructions, and inputting all the original rendering instructions into the machine learning model, so that whether invalid instructions are included in all the original rendering instructions can be identified, and if the invalid instructions are included, specific invalid instructions can be determined. In other examples, identifying invalid instructions included in all of the original rendering instructions may include: the method comprises the steps of obtaining instruction types, instruction execution actions, instruction execution areas and instruction execution times corresponding to all original rendering instructions, identifying whether invalid instructions are included in all the original rendering instructions or not based on the instruction types, the instruction execution actions, the instruction execution areas and the instruction execution times, and determining which invalid instructions are specific if the invalid instructions are included.

When it is determined that the invalid instruction is included in all the original rendering instructions, the invalid instruction in all the original rendering instructions may be deleted, so that the to-be-processed rendering instruction may be obtained, and it may be understood that the obtained to-be-processed rendering instruction does not include the invalid instruction. Upon determining that no invalidation instructions are included in all of the original rendering instructions, then all of the original rendering instructions may be directly determined as rendering instructions to be processed.

In this embodiment, by obtaining all the original rendering instructions included in the display list, when all the original rendering instructions include an invalid instruction, the invalid instruction included in all the original rendering instructions can be identified, and then the invalid instruction is deleted, so as to obtain a to-be-processed rendering instruction that does not include the invalid instruction; when the invalid instruction is not included in all the original rendering instructions, all the original rendering instructions can be directly determined as the rendering instructions to be processed, so that the accuracy and reliability of determination of the rendering instructions are guaranteed, the fact that the invalid instruction is not included in the obtained rendering instructions is guaranteed, and the instruction and the efficiency of the graphic rendering operation are improved.

On the basis of the foregoing embodiment, after obtaining the rendered graphics, the method in this embodiment may further include: the rendered graphics are displayed and/or managed.

Specifically, after the rendered graphics are obtained, if the rendered graphics need to be displayed, the rendered graphics may be displayed through a display, for example: the rendered graphics may be inserted into the webview container using a peer rendering technique. If the rendered graphics need to be managed, the rendered graphics may be managed, for example: the method can be used for storing the rendered graph, transmitting the rendered graph, marking the rendered graph and the like, so that the rendered graph can be effectively displayed and/or managed according to design requirements or application requirements after being obtained, and the convenience and reliability of the method are further improved.

When the rendered graphics need to be displayed, in order to ensure the quality and effect of the graphics display, referring to fig. 4, the displaying of the rendered graphics in this embodiment may include:

step S401: a vertical synchronization signal corresponding to the display is acquired.

Step S402: and rasterizing the rendered graph based on the vertical synchronous signal, and displaying the rendered graph through a display.

Among them, Vertical synchronization is also called field synchronization (Vertical synchronization), and in view of the display principle of a Cathode Ray Tube (CRT) display, a horizontal scanning line is formed by a single pixel, and the horizontal scanning line is stacked in the Vertical direction to form a complete picture. The refresh rate of the display is controlled by the display card DAC, and the display card DAC generates a vertical synchronizing signal after completing scanning of one frame. Generally, after the configuration information of the display is determined, a vertical synchronization signal corresponding to the display may be acquired.

After the vertical synchronization signal is acquired, the rendered graphics may be rasterized based on the vertical synchronization signal and displayed by the display. Specifically, based on the vertical synchronization signal, rasterizing the rendered graphics may include: when the vertical synchronization signal is acquired every time, the vertical synchronization signal can be used as a rasterization trigger signal to trigger the GPU thread to perform rasterization processing on the rendered graphics, so that the rendered graphics are displayed on a display.

In this embodiment, after the rendered graphics are obtained, if the rendered graphics need to be displayed, the rendered graphics can be displayed through the display; if the rendered graph needs to be managed, the rendered graph can be managed, so that the rendered graph can be effectively displayed and/or managed according to design requirements or application requirements after the rendered graph is obtained, and the convenience and reliability of the graph rendering method are further improved.

Fig. 5 is a schematic flowchart of another graphics rendering method according to an embodiment of the present application; on the basis of the above embodiment, referring to fig. 5, the method in this embodiment may further include:

step S501: when the rendering instruction comprises a texture uploading instruction, determining a texture uploading thread corresponding to the texture uploading instruction, wherein the texture uploading thread shares a context with a GPU thread of a graphics processor for realizing graphics rendering operation;

step S502: and uploading the pictures stored in the CPU to the GPU based on the texture uploading thread, generating a GPU texture object, and sharing the GPU texture object with the GPU thread.

After the rendering instruction to be processed is obtained, the rendering instruction to be processed may be analyzed to identify an instruction type corresponding to the rendering instruction to be processed and an action to be executed. When the recognition result is that the rendering instruction includes a texture upload instruction, in order not to affect the data processing operation of the GPU thread, a texture upload thread corresponding to the texture upload instruction may be determined, and it should be noted that the texture upload thread may be a thread task newly established based on the texture upload instruction, or may also be a thread that is established in advance and is to be called. The texture uploading thread and the GPU thread are two completely different thread tasks, so that when texture uploading operation is carried out based on the texture uploading thread, data processing operation of the GPU thread is not affected.

After determining the texture upload thread, the picture stored in the CPU may be uploaded to the GPU based on the texture upload thread to generate a GPU texture object, and in order to enable the GPU to directly obtain the GPU texture object, the texture upload thread and the GPU thread may share a context, that is, the texture upload thread and the GPU thread share the generated GPU texture object.

In this embodiment, when the rendering instruction includes a texture uploading instruction, a texture uploading thread corresponding to the texture uploading instruction is determined, and then, a picture stored in a CPU of the core processor is uploaded to the GPU based on the texture uploading thread to generate a GPU texture object, and the GPU texture object is shared with the GPU thread, so that asynchronous texture uploading operation is effectively implemented, so that not only is data processing operation of the GPU thread unaffected, but also the CPU thread can directly acquire the asynchronously uploaded GPU texture object, thereby further improving stability and reliability of use of the graphics rendering method.

Fig. 6 is a schematic flowchart of another graphics rendering method according to an embodiment of the present application; referring to fig. 6, the graphics rendering method in this embodiment may be applied to a producer-consumer model, and in this case, before obtaining the rendering instruction to be processed, the method in this embodiment may further include:

step S601: acquiring an instruction writing request and a rendering instruction to be written;

step S602: and storing the rendering instruction to be written in the memory cache region as the rendering instruction to be processed based on the instruction writing request.

In the producer consumer model, a producer is used for producing rendering instructions, a consumer is used for obtaining the rendering instructions, and in order to decouple the producer and the consumer, a memory cache region for storing the rendering instructions can be configured in advance.

Then, the consumer may obtain the rendering instruction to be processed through the memory cache region, specifically, as shown in fig. 7, the obtaining of the rendering instruction to be processed in this embodiment may include:

step S701: and acquiring an instruction calling request.

Step S702: and acquiring all to-be-processed rendering instructions in the memory cache region based on the instruction calling request.

When a consumer needs to obtain rendering instructions to be processed, an instruction calling request can be generated, and then all rendering instructions to be processed in the memory cache region can be obtained based on the instruction calling request, so that the rendering instructions to be processed in the memory cache region can be effectively obtained in batches through the instruction calling request.

In the embodiment, the instruction writing request and the rendering instruction to be written are obtained, and the rendering instruction to be written is stored in the memory cache region as the rendering instruction to be processed based on the instruction writing request; by acquiring the instruction calling request and then acquiring all to-be-processed rendering instructions in the memory cache region based on the instruction calling request, the method effectively realizes that a producer can store the generated rendering instructions in the memory cache region, and when a consumer acquires the rendering instructions, the producer can acquire the rendering instructions by accessing the memory cache region, so that the graph rendering method is suitable for a producer-consumer model, and the practicability and the application range of the graph rendering method are further improved.

In a specific implementation, the present application embodiment provides a graphics rendering method based on a new engine architecture, where the engine architecture can be shown with reference to fig. 1, and the engine architecture mainly includes: WAL form adaptation component (otherwise known as WAL form adaptation layer), Canvas implementation component (Canvas implementation layer), JS engine component (JS engine layer):

the WAL window adaptation component is used for managing the window environment of the platform, and is used for being deployed on a preset platform architecture; the WAL window adaptation component may include: the canvas configuration module EGL/EAGL is configured to implement bridging between the platform and the canvas implementation component, specifically, before the JS engine component acquires the rendering instruction issued by the container component, a window environment corresponding to the operating system and the JS instruction is established, where the window environment is used to display a graphics rendering result, and the operating system corresponds to the container component. And the interface management module is used for managing the life cycle, release time, display time, window size and the like of the rendered graph.

The Canvas implementation component comprises: a Canvas rendering unit for implementing 2D rendering operation and a WebGL rendering unit for implementing 3D rendering operation (which may be WebGL rendering operation), where the Canvas rendering unit may implement Canvas 2D rendering with a skea engine as a core; it should be noted that, in order to support the standard communication protocol, the 2D rendering operation can be implemented by selecting the Skia engine, so that the rendering performance can be ensured to be consistent with that of the browser, the user requirements can be met, and the rendering correctness and effect can also be ensured. The WebGL rendering unit can be developed based on a native OpenGLES graphical interface, and meanwhile, WebGL1.0 and 2.0 standard interfaces can be supported.

The JS engine component comprises: JS engine module and engine correlation module, JS engine module includes: and the JS V8 engine, JavaScript core engine, Quick JS engine and other mainstream engine modules are used for acquiring the JS instruction issued by the container component, determining a target engine unit corresponding to the JS instruction in the JS engine units of different types, and analyzing and identifying the JS instruction by using the target engine unit so as to determine the instruction type and execution operation corresponding to the JS instruction.

The engine association module is used for associating a preset graphic application program interface with the JS engine module so as to realize JS API encapsulation operation, and in order to shield differences among JS engines of different types, the engine association module can perform association binding operation on the preset graphic API and the JS engines of different types through the JSI intermediate component.

It should be noted that the engine architecture in this application embodiment may include one or more Canvas rendering units, and multiple graphics rendering operations may be performed simultaneously by the one or more Canvas rendering units. Compared with a rendering engine in a browser kernel, the engine architecture in the embodiment has the characteristics of simple engine architecture and relatively simplified rendering pipeline, and can ensure the correctness of graphics rendering when the graphics rendering operation is performed through the engine architecture, and particularly can achieve the effect of browser rendering.

Referring to fig. 8 to fig. 9, based on the above engine architecture, the present application embodiment provides a graphics rendering method, which may specifically include the following steps:

step 1: and acquiring the JS instruction to be processed, which is issued by the container component.

Wherein, after the JS engine component acquires the original JS instruction issued by the container component, the JS instruction can be stored in the display list through the Skia engine (SkCanvas) and the image recorder, so that a plurality of original JS instructions can be stored in the display list, the original JS instruction at the moment can include an effective instruction and an ineffective instruction, and in order to improve the quality and efficiency of the image rendering operation, the JS instruction to be processed acquired and issued by the container component can include: acquiring all original JS instructions included in a display list; the invalid instructions included in all the original JS instructions are identified, and specifically, all the original JS instructions can be analyzed and processed through a preset rule, so as to identify the invalid instructions included in all the original JS instructions, where the invalid instructions may include covered instructions, error instructions, and the like. After the invalid instruction included in the original JS instruction is identified, the invalid instruction can be deleted, so that the JS instruction to be processed is obtained.

Step 2: and establishing a canvas environment corresponding to the JS instruction.

And step 3: when the JS instruction comprises a graphics rendering instruction, performing graphics rendering operation in the canvas environment to obtain a rendered graphics, wherein the graphics rendering operation comprises at least one of the following operations: 2D rendering operations, WebGL rendering operations.

Specifically, after the Canvas environment corresponding to the JS instruction is established, the WebGL and Canvas 2D rendering capabilities can be supported through the encapsulated graphics API, and the JS context of the container is exposed from the rendering capabilities through the JS association module by using a standardized interface, so that the 2D rendering operation and/or the WebGL rendering operation can be performed in the Canvas environment.

And 4, step 4: the rendered graphics are displayed and/or managed.

In some examples, when the rendered graphics need to be displayed, the rendered graphics may be inserted or overlaid into a webview container or other container using a peer rendering technique to display the rendered graphics. In other examples, displaying the rendered graphics may include: acquiring a vertical synchronization signal corresponding to a display; and rasterizing the rendered graph based on the vertical synchronous signal, and displaying the rendered graph through a display.

In still other examples, when a picture in the CPU needs to be uploaded to the GPU, the picture uploading manner in the related art is generally to upload the picture from the CPU to the GPU through a GPU thread, however, the uploading operation of the picture is time-consuming and the waiting time of the uploading operation of the picture is long. In order to shorten the waiting time of the GPU on the main thread when uploading a picture from the CPU to the GPU, referring to fig. 9, the graphics rendering method in this embodiment may further include the following steps:

step 11: and when the JS instruction comprises a texture uploading instruction, determining a texture uploading thread corresponding to the texture uploading instruction, wherein the texture uploading thread shares the context with a GPU thread of a graphics processor for realizing graphics rendering operation.

Step 12: and uploading the pictures stored in the CPU of the core processor to the GPU based on the texture uploading thread, generating a GPU texture object, and sharing the GPU texture object with the GPU thread.

Specifically, after the JS instruction is acquired, the JS instruction can be analyzed to identify the instruction type and the execution action corresponding to the JS instruction, when the JS instruction includes a texture uploading instruction, a JS thread can be established, the texture uploading instruction is recorded into the display list DisplayList through the established JS thread, rasterization can be performed on a GPU thread when a vertical synchronization signal Vsync is acquired each time, the instructions in the display list are analyzed into graphics instructions GL, the graphics GL are sent to the GPU to be rendered, and finally the rendered graphics are displayed on a display screen.

It should be noted that when the rendered graphics do not need to be displayed, the rendered graphics may be stored in a memory or a preset area, so that when the rendered graphics are needed, the rendered graphics may be called and used.

In the embodiment, the asynchronous uploading operation is realized in a mode of sharing the GL context, so that the uploaded picture can be directly used by a main thread (GPU thread), specifically, the picture is uploaded to the GPU from the CPU through the JS thread, and the JS thread and the GPU thread are two threads, so that the asynchronous texture uploading operation is realized.

In other examples, the graphics rendering method in this embodiment may be applied to the producer-consumer model, and in this case, before acquiring the JS instruction to be processed, the method in this embodiment may further include:

step S21: and acquiring an instruction write request and a JS instruction to be written.

Step S22: and storing the JS instruction to be written in a memory cache area as the JS instruction to be processed based on the instruction writing request.

Then the consumer can obtain the JS instruction of pending through the memory cache district, and is specific, obtains the JS instruction of pending and can include:

step S23: and acquiring an instruction calling request.

Step S24: and acquiring all JS instructions to be processed in the memory cache area based on the instruction calling request.

In the producer consumer model, the producer and the consumer can respectively realize instruction writing and instruction calling operations in two threads, the production end can write the WebGL instruction code into the memory cache region, and the consumer can regularly and periodically decode the data in the memory cache region, so that a plurality of JS instructions can be submitted in batch. After the plurality of JS instructions are obtained, the JS instructions can be submitted to the GPU in batches, so that a production end can submit the plurality of instructions at one time without blocking, and the multithread scheduling can improve the overall parallelism and does not block the JS thread.

The technical scheme provided by the application embodiment can realize the following effects:

(1) different running platforms such as Android and iOS dual platforms can be supported through a set of codes, and multiple containers such as applets, widgets and Weex can also be supported, so that a cross-platform and cross-container graphics rendering scheme is realized;

(2) the JSI technology supports various different types of JS engines, so that cross-JS engine operation is realized;

(3) 2D rendering operation and WebGL rendering operation are realized through a Skia engine and OpenGLES, and a standard interface which is completely consistent with a browser kernel can be realized, so that the practicability and the application range of the graphic rendering scheme are improved;

(4) through the same-layer rendering technology, the Canvas rendering graph can be embedded into containers such as WebView and the like, the performance of the Canvas rendering graph is consistent with that of the WebView in the aspects of rolling, rendering, event processing and the like, a user cannot feel the difference, and the quality and the effect of the graph rendering operation are further ensured;

(5) the graphic rendering method can support a mainstream game engine, and particularly can support a mainstream type game engine such as Laya, egr and the like based on a uniform game adaptation layer; in addition, the graphic rendering method can be used in large scale in application scenes such as shops, brand areas and the like, and the application range of the technical scheme is further improved.

Fig. 10 is a schematic structural diagram of a graphics rendering apparatus according to an embodiment of the present application; referring to fig. 10, the embodiment provides a graphics rendering apparatus, which is configured to execute the graphics rendering method shown in fig. 1b, and specifically, the graphics rendering apparatus may include:

the engine component 11 is used for acquiring the rendering instruction issued by the container component, and determining the instruction type and the execution operation corresponding to the rendering instruction;

the canvas implementation component 12 is configured to, when the rendering instruction includes a graphics rendering instruction, perform a graphics rendering operation in a set canvas environment to obtain a rendered graphics, where the graphics rendering operation includes at least one of: 2D rendering operation, 3D rendering operation.

In some examples, the engine component 11 may include: the engine module 11a includes a plurality of engine units of different types, and is configured to obtain a rendering instruction issued by the container component, determine, in the engine units of different types, a target engine unit corresponding to the rendering instruction, and determine, by using the target engine unit, an instruction type corresponding to the rendering instruction and perform an operation.

In some instances, the engine component 11 may further include: and the engine association module 11b is configured to associate a preset graphics application program interface with the engine module, and perform a graphics drawing operation in the canvas environment through the graphics application program interface and the graphics drawing instruction when the rendering instruction includes the graphics drawing instruction.

In some instances, the canvas implementation component 12 may include:

a Canvas rendering unit 12a for performing a 2D rendering operation of graphics by a skea engine within a set Canvas environment;

the WebGL rendering unit 12b is configured to perform a 3D rendering operation of graphics within a set canvas environment.

In some examples, the apparatus may further comprise: the window adaptation component 13 is used for being deployed on a preset platform architecture; the window adaptation assembly 13 includes: the canvas configuration module 13a is configured to, before the engine component acquires the rendering instruction issued by the container component, establish a window environment corresponding to the operating system and the rendering instruction, where the window environment is used to display a graphics rendering result, and the operating system corresponds to the container component.

In some examples, the window adaptation component 13 may further include: and the interface management module 13b is configured to obtain the rendered graphics, and display and/or manage the rendered graphics.

The apparatus shown in fig. 10 can perform the method of the embodiments shown in fig. 1a, 1b, and 8-9, and the detailed description of the embodiment may refer to the related descriptions of the embodiments shown in fig. 1a, 1b, and 8-9. The implementation process and technical effect of the technical solution are described in the embodiments shown in fig. 1a, fig. 1b, and fig. 8 to fig. 9, and are not described herein again.

In one possible design, the structure of the graphics rendering apparatus shown in fig. 10 may be implemented as an electronic device, which may be a mobile phone, a tablet computer, a server, or other devices. As shown in fig. 11, the electronic device may include: a first processor 21 and a first memory 22. Wherein, the first memory 22 is used for storing a program of a corresponding electronic device to execute the graphics rendering method provided in the embodiments shown in fig. 1a, fig. 1b, fig. 8-fig. 9, and the first processor 21 is configured to execute the program stored in the first memory 22.

The program comprises one or more computer instructions, wherein the one or more computer instructions, when executed by the first processor 21, are capable of performing the steps of:

obtaining a rendering instruction issued by the container component by using the engine component, and determining an instruction type and an execution operation corresponding to the rendering instruction;

when the rendering instruction comprises a graphic rendering instruction, the canvas implementation component performs graphic rendering operation in a set canvas environment to obtain a rendered graphic, wherein the graphic rendering operation comprises at least one of the following operations: 2D rendering operation, 3D rendering operation.

Further, the first processor 21 is also used to execute all or part of the steps in the embodiments shown in fig. 1a, 1b, 8-9.

The electronic device may further include a first communication interface 23 for communicating with other devices or a communication network.

In addition, the embodiment of the present invention provides a computer storage medium for storing computer software instructions for an electronic device, which includes a program for executing the method for rendering graphics in the method embodiments shown in fig. 1a, 1b, and 8-9.

Furthermore, the present embodiment provides a computer program product comprising: computer program, which when executed by a processor of an electronic device, causes the processor to perform a method of graphics rendering in the method embodiments of fig. 1a, 1b, 8-9 described above.

Fig. 12 is a schematic structural diagram of a graphics rendering apparatus according to an embodiment of the present application; referring to fig. 12, the present embodiment provides a graphics rendering apparatus, which may be used to execute the graphics rendering method shown in fig. 2, and specifically, the graphics rendering apparatus in the present embodiment may include:

a first obtaining module 31, configured to obtain a rendering instruction to be processed;

a first establishing module 32, configured to establish a canvas environment corresponding to the rendering instruction;

the first processing module 33 is configured to, when the rendering instruction includes a graphics rendering instruction, perform a graphics rendering operation in the canvas environment to obtain a rendered graphics, where the graphics rendering operation includes at least one of: 2D rendering operation, 3D rendering operation.

In some examples, when the first obtaining module 31 obtains the rendering instruction to be processed, the first obtaining module 31 is configured to perform: acquiring all original rendering instructions included in a display list; identifying invalid instructions included in all original rendering instructions; and deleting the invalid instruction to obtain a rendering instruction to be processed.

In some examples, after obtaining the rendered graphics, the first processing module 33 in this embodiment is configured to: the rendered graphics are displayed and/or managed.

In some examples, when the first processing module 33 displays the rendered graphics, the first processing module 33 is configured to perform: acquiring a vertical synchronization signal corresponding to a display; and rasterizing the rendered graph based on the vertical synchronous signal, and displaying the rendered graph through a display.

In some examples, the first processing module 33 in this embodiment is configured to perform: when the rendering instruction comprises a texture uploading instruction, determining a texture uploading thread corresponding to the texture uploading instruction, wherein the texture uploading thread shares a context with a GPU thread of a graphics processor for realizing graphics rendering operation; and uploading the pictures stored in the CPU to the GPU based on the texture uploading thread, generating a GPU texture object, and sharing the GPU texture object with the GPU thread.

In some examples, before the rendering instruction to be processed is obtained, the first obtaining module 31 and the first processing module 33 in this embodiment are configured to perform the following steps:

a first obtaining module 31, configured to obtain an instruction write request and a rendering instruction to be written;

the first processing module 33 is configured to store the rendering instruction to be written in the memory cache area as the rendering instruction to be processed based on the instruction write request.

In some examples, when the first obtaining module 31 obtains the rendering instruction to be processed, the first obtaining module 31 is configured to perform: acquiring an instruction calling request; and acquiring all to-be-processed rendering instructions in the memory cache region based on the instruction calling request.

The apparatus shown in fig. 12 can perform the method of the embodiment shown in fig. 2 to 9, and the detailed description of this embodiment can refer to the related description of the embodiment shown in fig. 2 to 9. The implementation process and technical effect of the technical solution refer to the descriptions in the embodiments shown in fig. 2 to fig. 9, and are not described herein again.

In one possible design, the structure of the graphics rendering apparatus shown in fig. 12 may be implemented as an electronic device, which may be a mobile phone, a tablet computer, a server, or other devices. As shown in fig. 13, the electronic device may include: a second processor 41 and a second memory 42. Wherein the second memory 42 is used for storing a program for executing the graphics rendering method provided in the embodiments shown in fig. 2-9, and the second processor 41 is configured for executing the program stored in the second memory 42.

The program comprises one or more computer instructions, wherein the one or more computer instructions, when executed by the second processor 41, are capable of performing the steps of:

acquiring a rendering instruction to be processed;

establishing a canvas environment corresponding to the rendering instruction;

when the rendering instruction comprises a graphics rendering instruction, performing graphics rendering operation in the canvas environment to obtain a rendered graphic, wherein the graphics rendering operation comprises at least one of the following operations: 2D rendering operation, 3D rendering operation.

Further, the second processor 41 is also used to execute all or part of the steps in the embodiments shown in fig. 2 to 9.

The electronic device may further include a second communication interface 43 for communicating with other devices or a communication network.

In addition, the embodiment of the present invention provides a computer storage medium for storing computer software instructions for an electronic device, which includes a program for executing the graphics rendering method in the method embodiments shown in fig. 2 to 9.

Furthermore, the present embodiment provides a computer program product comprising: the computer program, when executed by a processor of the electronic device, causes the processor to perform the method of graphics rendering in the method embodiments of fig. 2-9 described above.

The above-described embodiments of the apparatus are merely illustrative, and the units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.

Through the above description of the embodiments, those skilled in the art will clearly understand that each embodiment can be implemented by adding a necessary general hardware platform, and of course, can also be implemented by a combination of hardware and software. With this understanding in mind, the above-described technical solutions and/or portions thereof that contribute to the prior art may be embodied in the form of a computer program product, which may be embodied on one or more computer-usable storage media having computer-usable program code embodied therein (including but not limited to disk storage, CD-ROM, optical storage, etc.).

The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.

Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.

Finally, it should be noted that: the above embodiments are only used for illustrating the technical solutions of the present application, and not for limiting the same; although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some or all of the technical features may be equivalently replaced; and the modifications or the substitutions do not make the essence of the corresponding technical solutions depart from the scope of the technical solutions of the embodiments of the present application.

Claims (14)

1. A method of graphics rendering, comprising:

obtaining a rendering instruction issued by a container component by utilizing an engine component, and determining an instruction type and an execution operation corresponding to the rendering instruction;

when the rendering instruction comprises a graphic rendering instruction, the graphic rendering operation is carried out in a set canvas environment by utilizing a canvas implementation component to obtain a rendered graphic, wherein the graphic rendering operation comprises at least one of the following operations: 2D rendering operation, 3D rendering operation.

2. The method of claim 1, wherein the engine component comprises: an engine module comprising a plurality of different types of engine units;

the method comprises the following steps of acquiring a rendering instruction issued by a container component by utilizing an engine component, and determining an instruction type corresponding to the rendering instruction and executing operation, wherein the instruction type comprises the following steps:

and obtaining a rendering instruction issued by the container component by using the engine module, determining a target engine unit corresponding to the rendering instruction in a plurality of engine units of different types, and determining an instruction type and executing operation corresponding to the rendering instruction by using the target engine unit.

3. The method of claim 2, wherein the engine component further comprises: an engine association module, the method further comprising:

and associating a preset graphic application program interface with the engine module by using the engine association module, and performing graphic drawing operation in the drawing environment through the graphic application program interface and the graphic drawing instruction when the rendering instruction comprises the graphic drawing instruction.

4. The method of claim 1, wherein the canvas implementation component comprises: a Canvas rendering unit and a WebGL rendering unit; when the rendering instruction comprises a graphic rendering instruction, the graphic rendering operation is performed in the set canvas environment by utilizing the canvas implementation component, and the method comprises the following steps:

performing 2D rendering operation of graphics through a Skia engine in a set Canvas environment by using the Canvas rendering unit;

and performing 3D rendering operation of the graph in a set canvas environment by using the WebGL rendering unit.

5. The method of claim 1, further comprising:

before an engine component acquires a rendering instruction issued by a container component, a window environment corresponding to an operating system and the rendering instruction is established by using a canvas configuration module included in a window adaptation component, wherein the window environment is used for displaying a graph rendering result, the operating system corresponds to the container component, and the window adaptation component is used for being deployed on a preset platform architecture.

6. The method of claim 5, further comprising:

and acquiring the rendered graph by using an interface management module in the window adaptation component, and displaying and/or managing the rendered graph.

7. A method of graphics rendering, comprising:

acquiring a rendering instruction to be processed;

establishing a canvas environment corresponding to the rendering instruction;

when the rendering instruction comprises a graphics rendering instruction, performing graphics rendering operation in the painting environment to obtain a rendered graphic, wherein the graphics rendering operation comprises at least one of the following operations: 2D rendering operation, 3D rendering operation.

8. The method of claim 7, wherein fetching rendering instructions to be processed comprises:

acquiring all original rendering instructions included in a display list;

identifying invalid instructions included in all original rendering instructions;

and deleting the invalid instruction to obtain a rendering instruction to be processed.

9. The method of claim 7, wherein after obtaining rendered graphics, the method further comprises:

and displaying and/or managing the rendered graphics.

10. The method of claim 9, wherein displaying the rendered graphics comprises:

acquiring a vertical synchronization signal corresponding to a display;

and rasterizing the rendered graph based on the vertical synchronizing signal, and displaying the rendered graph through the display.

11. The method of claim 7, further comprising:

when the rendering instruction comprises a texture uploading instruction, determining a texture uploading thread corresponding to the texture uploading instruction, wherein the texture uploading thread shares a context with a GPU thread of a graphics processor for realizing graphics rendering operation;

and uploading the pictures stored in the CPU to a GPU based on the texture uploading thread, generating a GPU texture object, and sharing the GPU texture object with the GPU thread.

12. The method of claim 7, wherein prior to fetching the rendering instructions to be processed, the method further comprises:

acquiring an instruction writing request and a rendering instruction to be written;

and storing the rendering instruction to be written in a memory cache region based on the instruction writing request to serve as the rendering instruction to be processed.

13. The method of claim 12, wherein fetching rendering instructions to be processed comprises:

acquiring an instruction calling request;

and acquiring all to-be-processed rendering instructions in the memory cache region based on the instruction calling request.

14. An electronic device, comprising: a memory, a processor; wherein the memory is to store one or more computer instructions that when executed by the processor implement the graphics rendering method of any of claims 7-13.

Images