CN111476858B - A 2D engine rendering method, device and equipment based on WebGL - Google Patents

Abstract

The present invention discloses a WebGL-based 2D engine rendering method, device, device, and computer-readable storage medium. The method includes: obtaining geometric objects corresponding to display objects; All geometric objects are sorted to obtain the sorting results; according to the sorting results and the preset number of objects in a single batch, all geometric objects are grouped and packaged to obtain geometric object groups; according to the number of textures required for each geometric object group and the preset maximum texture number, create batch processing requests, and render each batch processing request; the present invention sorts all geometric objects according to the rendering state and texture information of each geometric object, so that the rendering state can be the same and the same texture needs to be used for rendering The rendered geometric objects are adjacent to each other, thereby ensuring the rendering effect when using hardware rendering to batch processing requests, improving rendering efficiency and rendering performance, and improving user experience.

Description

A 2D engine rendering method, device and equipment based on WebGL

technical field

The present invention relates to the field of computer technology, in particular to a WebGL-based 2D engine rendering method, device, equipment and computer-readable storage medium.

Background technique

WebGL (Web Graphics Library) is a 3D drawing protocol. This drawing technology standard allows the combination of JavaScript (a scripting language) and OpenGL ES 2.0 (a graphics program interface), by adding a JavaScript of OpenGL ES 2.0 Binding, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas (used to draw graphics on web pages), so that Web developers can use the system graphics card to display 3D scenes and models more smoothly in the browser, and create Sophisticated navigation and data visualization. Obviously, the WebGL technical standard eliminates the trouble of developing a special rendering plug-in for web pages, and can be used to create website pages with complex 3D structures, and even to design 3D web games and so on.

In the prior art, when most WebGL-based 2d engines (i.e. WebGL 2d engines) use hardware to render Sprites (display objects), they do not adopt the method of batch processing, which makes the rendering efficiency and performance low, which is not conducive to user experience . Therefore, how to provide a batch processing rendering method of the WebGL 2d engine, improve rendering efficiency and performance, and improve user experience is an urgent problem to be solved today.

Contents of the invention

The purpose of the present invention is to provide a WebGL-based 2d engine rendering method, device, equipment and computer-readable storage medium, improve the rendering efficiency and rendering performance of display objects using hardware rendering, and improve user experience.

In order to solve the above-mentioned technical problems, the present invention provides a 2d engine rendering method based on WebGL, comprising:

Acquiring geometric objects corresponding to each of the display objects; wherein, each of the geometric objects is encapsulated by rendering information of the respective corresponding display objects, and the rendering information includes vertex data, texture information and rendering status;

According to the rendering state and the texture information of each of the geometric objects, sort all the geometric objects to obtain a sorting result; wherein, in the sorting results, the rendering status is the same and the texture information is the same adjacent geometric objects;

According to the sorting result and the preset number of objects in a single batch, all the geometric objects are grouped and packaged to obtain geometric object groups; wherein, each geometric object group is uploaded to the same vertex buffer by all corresponding geometric objects The vertex data in is encapsulated with the texture information and the rendering state;

According to the number of required textures and the preset maximum number of textures of each geometric object group, a batch processing request is created, and each batch processing request is rendered; wherein, the number of required textures is different in the corresponding geometric object group The amount of texture information in question.

Optionally, sorting all the geometric objects according to the rendering state and the texture information of each geometric object, to obtain a sorting result, including:

Put all said geometric objects into a display list;

According to the rendering state and the texture information of each of the geometric objects, sort all the geometric objects in the display list to obtain a sorted display list; wherein, the rendering in the sorted display list Geometric objects with the same state are adjacent, and geometric objects with the same rendering state and the same texture information are adjacent.

Optionally, all the geometric objects in the sorted display list are arranged in descending order according to the same number of rendering states, and the geometric objects with the same rendering state are arranged in descending order according to the same number of texture information. Small permutations.

Optionally, according to the sorting result and the preset number of objects in a single batch, all the geometric objects are grouped and packaged to obtain a geometric object group, including:

According to the sort order of the sorted display list, the geometric objects with the preset number of objects in a single batch are used as a group, and the vertex data of all geometric objects in each group are uploaded to a corresponding vertex buffer, and shared with The texture information and the rendering state are encapsulated into the geometric object group.

Optionally, the batch processing request is created according to the required number of textures and the preset maximum number of textures in each geometric object group, including:

Judging whether the number of required textures corresponding to the remaining geometric objects in the current geometric object group is greater than the preset maximum number of textures;

If so, according to the sorting order of the current geometric object group, select the different texture information of the preset maximum texture number from the remaining geometric objects in the current geometric object group to create a current texture list, and create a current texture list according to the current texture list. Batch processing requests, executing the step of judging whether the number of required textures corresponding to the remaining geometric objects in the current geometric object group is greater than the preset maximum number of textures;

If not, select the texture information of all remaining geometric objects in the current geometric object group to create a current texture list, and create a current batch processing request according to the current texture list.

Optionally, the acquisition of geometric objects corresponding to the display objects includes:

According to the root node container, traverse all the display objects;

Encapsulating the rendering information of each display object into respective corresponding geometric objects.

Optionally, the sorting of all the geometric objects according to the rendering state and the texture information of each geometric object, before obtaining the sorting result, further includes:

According to the level of the original stage corresponding to each of the display objects, the level value of the stage corresponding to each of the geometric objects is set.

The present invention also provides a 2d engine rendering device based on WebGL, comprising:

An acquisition module, configured to acquire geometric objects corresponding to each of the display objects; wherein, each of the geometric objects is encapsulated by rendering information of the respective corresponding display objects, and the rendering information includes vertex data, texture information and rendering status;

A sorting module, configured to sort all the geometric objects according to the rendering state and the texture information of each geometric object, and obtain a sorting result; wherein, the rendering states in the sorting result are the same and all Geometric objects with the same texture information as described above are adjacent;

An encapsulation module, configured to group and encapsulate all the geometric objects according to the sorting result and the preset number of objects in a single batch to obtain geometric object groups; wherein, each geometric object group consists of all corresponding geometric objects The vertex data uploaded to the same vertex buffer is packaged with the texture information and the rendering state;

A rendering module, configured to create a batch processing request according to the required number of textures and a preset maximum number of textures for each geometric object group, and render each batch request; wherein, the required number of textures is the corresponding geometry The number of different said texture information in the object group.

The present invention also provides a 2d engine rendering device based on WebGL, comprising:

memory for storing computer programs;

The processor is configured to implement the steps of the WebGL-based 2d engine rendering method as described above when executing the computer program.

The present invention also provides a computer-readable storage medium, where a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the steps of the WebGL-based 2d engine rendering method as described above are realized .

A WebGL-based 2d engine rendering method provided by the present invention includes: obtaining geometric objects corresponding to display objects; wherein, each geometric object is encapsulated by the rendering information of the corresponding display object, and the rendering information includes vertex data , texture information and rendering status; according to the rendering status and texture information of each geometric object, sort all the geometric objects to get the sorting result; among them, the geometric objects with the same rendering status in the sorting result are adjacent, the rendering status is the same and the texture information The same geometric objects are adjacent; according to the sorting result and the preset number of objects in a single batch, all geometric objects are grouped and packaged to obtain geometric object groups; each geometric object group is uploaded to the same vertex by all corresponding geometric objects The vertex data in the cache is encapsulated with texture information and rendering state; according to the number of required textures of each geometric object group and the preset maximum number of textures, a batch processing request is created and each batch processing request is rendered; among them, the required texture The quantity is the quantity of different texture information in the corresponding geometric object group;

It can be seen that, by sorting all the geometric objects according to the rendering state and texture information of each geometric object, the present invention can make the geometric objects with the same rendering state and need to use the same texture for rendering adjacent to each other, thereby ensuring the utilization of hardware rendering batch processing The rendering effect at the time of request improves rendering efficiency and rendering performance, and improves user experience. In addition, the present invention also provides a WebGL-based 2d engine rendering device, equipment and computer-readable storage medium, which also have the above beneficial effects.

Description of drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings that need to be used in the description of the embodiments or the prior art. Obviously, the accompanying drawings in the following description are only It is an embodiment of the present invention, and those skilled in the art can also obtain other drawings according to the provided drawings without creative work.

Fig. 1 is a flow chart of a WebGL-based 2d engine rendering method provided by an embodiment of the present invention;

FIG. 2 is a schematic flow diagram of another WebGL-based 2d engine rendering method provided by an embodiment of the present invention;

FIG. 3 is a structural block diagram of a WebGL-based 2d engine rendering device provided by an embodiment of the present invention;

FIG. 4 is a schematic structural diagram of a WebGL-based 2d engine rendering device provided by an embodiment of the present invention.

Detailed ways

In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments It is a part of embodiments of the present invention, but not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by persons of ordinary skill in the art without making creative efforts belong to the protection scope of the present invention.

Please refer to FIG. 1 . FIG. 1 is a flowchart of a WebGL-based 2d engine rendering method provided by an embodiment of the present invention. The method can include:

Step 101: Obtain geometric objects corresponding to the respective display objects; wherein, each geometric object is encapsulated by rendering information of the respective corresponding display objects, and the rendering information includes vertex data, texture information and rendering status.

It can be understood that a processor running a WebGL-based 2d engine (ie, a WebGL 2d engine) will perform multiple renderings per second at a fixed frame rate, and this embodiment uses the rendering of each frame of the processor as an example for demonstration.

Wherein, the geometry object (Geometry) in this step encapsulates information required for rendering of the corresponding display object (Sprite), that is, rendering information, such as vertex data, texture information, and rendering status.

Specifically, in this step, the processor may acquire geometric objects corresponding to all display objects corresponding to the rendering lock of the current frame. In this step, the specific way for the processor to obtain the corresponding geometric objects of the display objects can be set by the designer according to the usage scenario and user needs. For example, the processor can traverse all the display objects according to the root (Root) node container; The rendering information of each display object is encapsulated into their corresponding geometric objects. As long as the processor can acquire the geometric objects corresponding to all the display objects corresponding to the current frame rendering, this embodiment does not impose any limitation on this.

Step 102: According to the rendering state and texture information of each geometric object, sort all the geometric objects to obtain a sorting result; wherein in the sorting result, the geometric objects with the same rendering state and the same texture information are adjacent.

It can be understood that the purpose of this step can be to sort all the geometric objects so that geometric objects with the same rendering status and the same texture information are adjacent to each other after the sorting is completed, so that the rendering status of the geometric objects corresponding to subsequent rendering batch processing requests The geometric objects that are the same and need to use the same texture are adjacent to each other to ensure the rendering effect.

Specifically, in this step, the processor sorts all the geometric objects according to the rendering state and texture information of each geometric object, and the specific way to obtain the sorting results can be set by the designer, for example, all the geometric objects can be put into Go to the preset queue, that is, the display queue, and then arrange in the display queue according to the texture information of the rendering state of the geometric objects, so that the geometric objects with the same rendering state and the same texture information (that is, use the same texture when rendering) are adjacent; Correspondingly, geometric objects with the same rendering state in the display queue can also be adjacent, that is, geometric objects with the same rendering state are adjacent in the sorting result in this step, and geometric objects with the same rendering state and the same texture information are adjacent. That is to say, this step may include: according to the rendering state and texture information of each geometric object, sort all the geometric objects in the display list to obtain a sorted display list; wherein, the rendering state in the sorted display list The same geometric objects are adjacent, and the geometric objects with the same rendering state and the same texture information are adjacent.

Further, all the geometric objects in the sorted display list can be arranged in descending order according to the same number of rendering states, and the geometric objects with the same rendering state can be arranged in descending order of the same number of texture information.

Correspondingly, before this step, it may also include the step of setting the stage level value corresponding to each geometric object according to the level of the original stage corresponding to each display object, so as to ensure that after the subsequent rendering of the display object is completed, it can be based on the geometric object Each corresponding stage level value, put the rendering result corresponding to each display object back to the original stage level corresponding to the stage level value. As shown in Figure 2, when putting all geometric objects (Geometry) into the display queue, you can set different z values (that is, stage level values) according to the level of the original stage of the display object (Sprite) corresponding to each geometric object. .

Step 103: According to the sorting result and the preset number of objects in a single batch, group and package all geometric objects to obtain geometric object groups; wherein, each geometric object group is uploaded to the vertices in the same vertex buffer by all corresponding geometric objects Data is encapsulated with texture information and render state.

It can be understood that the preset number of single-batch objects in this step may be the preset maximum single-batch object data (BATCH_GEOMETRY) of the WebGL 2d engine. The purpose of this step can be to encapsulate all geometric objects into one or more geometric object groups (GeometryGroup) according to the number of objects in a preset single batch according to the sorting results; Objects are packaged into a geometry object group.

For example, when the sorting result in this step is a sorted display list, the processor can use the preset number of geometric objects in a single batch as a group according to the sorting order, and upload the vertex data of all geometric objects in each group to the corresponding In a vertex buffer, it is encapsulated into a geometric object group with texture information and rendering state.

Step 104: Create a batch processing request according to the required number of textures and the preset maximum number of textures for each geometric object group, and render each batch processing request; wherein, the required number of textures is different textures in the corresponding geometric object group the amount of information.

It should be noted that the preset maximum number of textures in this step may be the maximum number of textures (MAX_TEXTURE) supported by a single fragment shader supported by preset hardware (such as a graphics card GPU). The purpose of this step can be to encapsulate each geometric object group into one or more batch processing requests (BatchDrawCall) according to the preset maximum number of textures and the actual required texture number of each geometric object group, that is, each batch processing request corresponds to The number of all geometric objects is less than or equal to the preset number of objects in a single batch, and the number of textures required for all geometric objects corresponding to each batch processing request (that is, the number of different texture information) is less than or equal to the preset maximum number of textures; thus Render batch requests to achieve batch rendering, that is, to combine multiple objects that need to be rendered and submit them to the hardware for rendering at one time, thereby improving rendering performance.

It can be understood that, in this step, the processor can create a batch processing request according to the number of required textures of each geometric object group and the preset maximum number of textures, which can be set by the designer. For example, it is possible to traverse all geometric object groups , if the number of textures required by all geometric objects in the geometric object group exceeds the preset maximum number of textures, create a texture list with the preset maximum number of textures as a group, and create a batch processing request based on the texture list; Set the maximum number of textures, then put all the textures required by the geometric object group into the texture list and create a batch request.

That is to say, this step may include: judging whether the number of required textures corresponding to the remaining geometric objects in the current geometric object group is greater than the preset maximum number of textures; wherein, the current geometric object group is any geometric object group currently processed; if , according to the sorting order of the current geometric object group, select different texture information with a preset maximum number of textures from the remaining geometric objects in the current geometric object group to create the current texture list, and create the current batch processing request according to the current texture list, execute The step of judging whether the number of required textures corresponding to the remaining geometric objects in the current geometric object group is greater than the preset maximum number of textures, and continue to process the remaining geometric objects in the current geometric object group; if not, select all the remaining geometric objects in the current geometric object group The object's texture information creates the current texture list, and creates the current batch processing request based on the current texture list.

Specifically, the processor in this step renders each batch request, and the processor may use hardware such as a GPU to render each batch request. Correspondingly, this step may also include the step of uploading textures to the hardware for rendering. For example, the processor may traverse all batch processing requests, and before using the hardware to render each batch processing request, it may determine whether the batch processing has been uploaded to the hardware. Request the desired texture; if the texture has not been uploaded, upload the texture and render the batch request; if the texture has been uploaded, you can directly render the batch request to avoid repeated uploads.

In this embodiment, the embodiment of the present invention sorts all the geometric objects according to the rendering state and texture information of each geometric object, so that the geometric objects that have the same rendering state and need to use the same texture for rendering can be adjacent to each other, thus ensuring Utilize hardware to render the rendering effect of batch processing requests, improve rendering efficiency and rendering performance, and improve user experience.

Please refer to FIG. 3 , which is a structural block diagram of a WebGL-based 2d engine rendering device provided by an embodiment of the present invention. The device can include:

The acquiring module 10 is configured to acquire respective geometric objects corresponding to the display objects; wherein, each geometric object is encapsulated by rendering information of the respective corresponding display objects, and the rendering information includes vertex data, texture information and rendering state;

The sorting module 20 is used to sort all the geometric objects according to the rendering state and texture information of each geometric object to obtain a sorting result; wherein, in the sorting result, the geometric objects with the same rendering state and the same texture information are adjacent;

The encapsulation module 30 is used for grouping and encapsulating all geometric objects according to the sorting result and the number of preset single-batch objects to obtain geometric object groups; wherein, each geometric object group is uploaded to the same vertex buffer by all corresponding geometric objects The vertex data and texture information and rendering state in the package are encapsulated;

The rendering module 40 is configured to create a batch processing request according to the number of required textures and the preset maximum number of textures of each geometric object group, and render each batch processing request; wherein, the required texture number is the corresponding geometric object group The number of different texture information.

Optionally, the sorting module 20 can be specifically configured to put all the geometric objects into the display list; according to the rendering state and texture information of each geometric object, sort all the geometric objects in the display list to obtain a sorted display list; Among them, the geometric objects with the same rendering state are adjacent in the sorted display list, and the geometric objects with the same rendering state and the same texture information are adjacent.

Optionally, all the geometric objects in the sorted display list are arranged in descending order according to the same number of rendering states, and the geometric objects with the same rendering state are arranged in descending order according to the same number of texture information.

Optionally, the encapsulation module 30 can be specifically configured to upload the vertex data of all geometric objects in each group to the corresponding In a vertex buffer, it is encapsulated into a geometric object group with texture information and rendering state.

Optionally, the rendering module 40 may include:

The judging sub-module is used to judge whether the number of required textures corresponding to the remaining geometric objects in the current geometric object group is greater than the preset maximum number of textures;

The first creation sub-module is used to select different texture information with the preset maximum number of textures from the remaining geometric objects in the current geometric object group according to the sorting order of the current geometric object group to create the current map list, and create a current batch processing request according to the current map list, and send a start signal to the judging sub-module;

The first creation sub-module uses the texture information of all remaining geometric objects in the current geometric object group to create a current texture list if it is not greater than the preset maximum number of textures, and creates a current batch processing request based on the current texture list.

Optionally, the acquisition module 10 may include:

Traverse submodules, used to traverse all display objects according to the root node container;

The encapsulation sub-module is used to encapsulate the rendering information of each display object into their corresponding geometric objects.

Optionally, the device may also include:

The layer setting module is configured to set the stage layer value corresponding to each geometric object according to the original stage layer corresponding to each display object.

In this embodiment, the embodiment of the present invention uses the sorting module 20 to sort all the geometric objects according to the rendering state and texture information of each geometric object, so that the geometric objects that have the same rendering state and need to use the same texture for rendering can be adjacent to each other. In this way, the rendering effect when using the hardware to render the batch processing request is guaranteed, the rendering efficiency and rendering performance are improved, and the user experience is improved.

Please refer to FIG. 4, which is a schematic structural diagram of a WebGL-based 2d engine rendering device provided by an embodiment of the present invention; the device 1 may include:

The memory 11 is used to store a computer program; the processor 12 is used to implement the steps of the WebGL-based 2d engine rendering method provided by the above-mentioned embodiments when executing the computer program.

In this embodiment, the device 1 may be a PC (Personal Computer, personal computer), or may be a terminal device such as a tablet computer, a portable computer, or a server.

The device 1 may include a memory 11 , a processor 12 and a bus 13 .

Wherein, the memory 11 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (eg, SD or DX memory, etc.), magnetic memory, magnetic disk, optical disk, etc. The memory 11 may be an internal storage unit of the device 1 in some embodiments, such as a hard disk of the device 1 . In other embodiments, the memory 11 can also be an external storage device of the device 1, such as a plug-in hard disk equipped on the device 1, a smart memory card (SmartMedia Card, SMC), a secure digital (Secure Digital, SD) card, a flash memory Card (Flash Card), etc. Further, the storage 11 may also include both an internal storage unit of the device 1 and an external storage device. The memory 11 can not only be used to store application software and various data installed in the device 1, such as codes for executing a WebGL-based 2d engine rendering method, etc., but also can be used to temporarily store data that has been output or will be output.

In some embodiments, the processor 12 may be a central processing unit (Central Processing Unit, CPU), a controller, a microcontroller, a microprocessor, or other data processing chips for running program codes or processing stored in the memory 11. Data, such as the code of the program that executes the rendering method of the 2d engine based on WebGL.

The bus 13 may be a peripheral component interconnect standard (PCI for short) bus or an extended industry standard architecture (EISA for short) bus or the like. The bus can be divided into address bus, data bus, control bus and so on. For ease of representation, only one thick line is used in FIG. 4 , but it does not mean that there is only one bus or one type of bus.

Further, the device may also include a network interface 14, and the network interface 14 may optionally include a wired interface and/or a wireless interface (such as a WI-FI interface, a Bluetooth interface, etc.), and is usually used to communicate between the device 1 and other electronic devices. establish a communication connection between them.

Optionally, the device 1 may also include a user interface 15, which may include a display (Display), an input unit such as a keyboard (Keyboard), and the optional user interface 15 may also include a standard wired interface and a wireless interface. Optionally, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode, Organic Light-Emitting Diode) touch panel, and the like. Wherein, the display may also be appropriately referred to as a display screen or a display unit, and is used for displaying information processed in the device 1 and for displaying a visualized user interface.

Figure 4 only shows the device 1 with components 11-15, those skilled in the art can understand that the structure shown in Figure 4 does not constitute a limitation on the device 1, and may include fewer or more components, or combinations of certain components, or different arrangements of components.

In addition, the embodiment of the present invention also discloses a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the WebGL-based 2d engine provided by the above-mentioned embodiment is implemented. The steps of the render method.

Wherein, the storage medium may include: U disk, mobile hard disk, read-only memory (Read-Only Memory, ROM), random access memory (Random Access Memory, RAM), magnetic disk or optical disk, etc., which can store program codes. medium.

Each embodiment in the description is described in a progressive manner, each embodiment focuses on the difference from other embodiments, and the same and similar parts of each embodiment can be referred to each other. As for the device, equipment and computer-readable storage medium disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and for relevant details, please refer to the description of the method part.

Professionals can further realize that the units and algorithm steps of the examples described in conjunction with the embodiments disclosed herein can be implemented by electronic hardware, computer software or a combination of the two. In order to clearly illustrate the possible For interchangeability, in the above description, the composition and steps of each example have been generally described according to their functions. Whether these functions are executed by hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art may use different methods to implement the described functions for each specific application, but such implementation should not be regarded as exceeding the scope of the present invention.

A WebGL-based 2d engine rendering method, device, equipment, and computer-readable storage medium provided by the present invention are described above in detail. In this paper, specific examples are used to illustrate the principle and implementation of the present invention, and the descriptions of the above embodiments are only used to help understand the method and core idea of the present invention. It should be pointed out that for those skilled in the art, without departing from the principle of the present invention, some improvements and modifications can be made to the present invention, and these improvements and modifications also fall within the protection scope of the claims of the present invention.

Claims (10)

1. A 2d engine rendering method based on WebGL, characterized in that, comprising: Acquiring geometric objects corresponding to each of the display objects; wherein, each of the geometric objects is encapsulated by rendering information of the respective corresponding display objects, and the rendering information includes vertex data, texture information and rendering status; According to the rendering state and the texture information of each of the geometric objects, sort all the geometric objects to obtain a sorting result; wherein, in the sorting results, those with the same rendering state and the same texture information adjacent geometric objects; According to the sorting result and the preset number of objects in a single batch, all the geometric objects are grouped and packaged to obtain geometric object groups; wherein, each geometric object group is uploaded to the same vertex buffer by all corresponding geometric objects The vertex data in is encapsulated with the texture information and the rendering state; According to the number of required textures and the preset maximum number of textures of each geometric object group, a batch processing request is created, and each batch processing request is rendered; wherein, the number of required textures is different in the corresponding geometric object group The amount of texture information in question. 2. The WebGL-based 2d engine rendering method according to claim 1, characterized in that, according to the rendering state and the texture information of each of the geometric objects, all the geometric objects are sorted, Get sorted results, including: Put all said geometric objects into a display list; According to the rendering state and the texture information of each of the geometric objects, sort all the geometric objects in the display list to obtain a sorted display list; wherein, the rendering in the sorted display list Geometric objects with the same state are adjacent, and geometric objects with the same rendering state and the same texture information are adjacent. 3. The WebGL-based 2d engine rendering method according to claim 2, wherein all the geometric objects in the sorted display list are arranged from large to small according to the same number of rendering states, and the The geometric objects with the same rendering state are arranged in descending order according to the same number of texture information. 4. The WebGL-based 2d engine rendering method according to claim 2, characterized in that, according to the sorting result and the preset number of objects in a single batch, all the geometric objects are grouped and packaged to obtain the geometric objects group, including: According to the sort order of the sorted display list, the geometric objects with the preset number of objects in a single batch are used as a group, and the vertex data of all geometric objects in each group are uploaded to a corresponding vertex buffer, and shared with The texture information and the rendering state are encapsulated into the geometric object group. 5. The 2d engine rendering method based on WebGL according to claim 1, characterized in that, the creation of a batch processing request according to the demand texture quantity and the preset maximum texture quantity in each said geometric object group comprises: Judging whether the number of required textures corresponding to the remaining geometric objects in the current geometric object group is greater than the preset maximum number of textures; If so, according to the sorting order of the current geometric object group, select the different texture information of the preset maximum texture number from the remaining geometric objects in the current geometric object group to create a current texture list, and create a current texture list according to the current texture list. Batch processing requests, executing the step of judging whether the number of required textures corresponding to the remaining geometric objects in the current geometric object group is greater than the preset maximum number of textures; If not, select the texture information of all remaining geometric objects in the current geometric object group to create a current texture list, and create a current batch processing request according to the current texture list. 6. The WebGL-based 2d engine rendering method according to claim 1, wherein said acquiring geometric objects corresponding to each of the display objects comprises: According to the root node container, traverse all the display objects; Encapsulating the rendering information of each display object into respective corresponding geometric objects. 7. The WebGL-based 2d engine rendering method according to any one of claims 1 to 6, wherein, according to the rendering state and the texture information of each of the geometric objects, all the Geometry objects are sorted, and before the sorted results are obtained, it also includes: According to the level of the original stage corresponding to each of the display objects, the level value of the stage corresponding to each of the geometric objects is set. 8. A 2d engine rendering device based on WebGL, characterized in that, comprising: An acquisition module, configured to acquire geometric objects corresponding to each of the display objects; wherein, each of the geometric objects is encapsulated by rendering information of the respective corresponding display objects, and the rendering information includes vertex data, texture information and rendering status; A sorting module, configured to sort all the geometric objects according to the rendering state and the texture information of each geometric object, and obtain a sorting result; wherein, the rendering states in the sorting result are the same and all Geometric objects with the same texture information as described above are adjacent; An encapsulation module, configured to group and encapsulate all the geometric objects according to the sorting result and the preset number of objects in a single batch to obtain geometric object groups; wherein, each geometric object group consists of all corresponding geometric objects The vertex data uploaded to the same vertex buffer is packaged with the texture information and the rendering state; A rendering module, configured to create a batch processing request according to the required number of textures and a preset maximum number of textures for each geometric object group, and render each batch request; wherein, the required number of textures is the corresponding geometry The number of different said texture information in the object group. 9. A 2d engine rendering device based on WebGL, characterized in that, comprising: memory for storing computer programs; A processor configured to implement the steps of the WebGL-based 2d engine rendering method according to any one of claims 1 to 7 when executing the computer program. 10. A computer-readable storage medium, characterized in that, a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the method based on any one of claims 1 to 7 is implemented. The steps of WebGL's 2d engine rendering method.

Images