DragonBones-based rendering optimization method, device, equipment and storage medium

Abstract

The present invention relates to a rendering optimization method, device, electronic device, and storage medium based on DragonBones. The method comprises: adding local structure variables and a structure object pool for target interfaces whose object creation frequency is greater than a first preset threshold; merging multiple images whose rendering batches are greater than a second preset threshold and caching them as target bitmaps; performing WebGL rendering based on the local structure variables and the structure object pool, and playing a sequence frame animation formed by the multiple target bitmaps through DragonBones. Through this application, the creation frequency of vertex and rectangular temporary objects is reduced, and by merging bitmaps, GPU upload data is reduced, reducing real-time rendering pressure, and solving the problem of poor performance caused by device heating and reduced frame rate in real-time rendering.

Description

Technical Field

[0001] The present invention relates to the field of real-time rendering technology, and in particular to a rendering optimization method, device, equipment and storage medium based on DragonBones. Background Art

[0002] For mobile HTML5 (H5) web pages, WebGL allows 3D content to be rendered directly on the canvas, objects to be manipulated through scripts, and objects to be drawn and rendered on the canvas. WebGL rendering requires playing sequential frame animations through DragonBones to display the rich and colorful visual textures of H5. In related technologies, due to the excessive number of DrawCalls (drawing objects) per frame, objects are frequently created during real-time rendering, requiring a large amount of JavaScript computing overhead and GPU rendering computing overhead. This causes mobile devices to heat up and the frame rate to drop during operation, resulting in poor performance.

[0003] Regarding related technologies, real-time rendering has the problem of device heating and reduced frame rate leading to poor performance, and no effective solution has been proposed yet. Summary of the Invention

[0004] The embodiments of the present application provide a rendering optimization method, device, and storage medium based on DragonBones to at least solve the problem in the related art that real-time rendering has poor performance due to device heating and reduced frame rate.

[0005] In a first aspect, an embodiment of the present application provides a rendering optimization method based on DragonBones, the method comprising:

[0006] For a target interface whose object creation frequency is greater than a first preset threshold, adding a local structure variable and a structure object pool;

[0007] Merge multiple images whose rendering batches are larger than a second preset threshold and cache them as a target bitmap;

[0008] WebGL is rendered based on the local structure variables and the structure object pool, and a sequence frame animation formed by multiple target bitmaps is played through DragonBones.

[0009] In some embodiments, for a target interface whose object creation frequency is greater than a first preset threshold, before adding a local structure variable and a structure object pool, the method further includes: adding a log file to obtain the target interface.

[0010] In some embodiments, the local structure variables include local point variables and local rectangle variables, and the structure object pool includes a collection of point objects and rectangle objects.

[0011] In some embodiments, a Texture Merger is used to merge the multiple images.

[0012] In a second aspect, an embodiment of the present application provides a rendering optimization device based on DragonBones, the device comprising: an object creation optimization module, a rendering image merging module, and a real-time rendering module;

[0013] The object creation optimization module is used to add a local structure variable and a structure object pool for a target interface whose frequency of creating objects is greater than a first preset threshold;

[0014] The rendering image merging module is used to merge multiple images whose rendering batch is larger than a second preset threshold and cache them as a target bitmap;

[0015] The real-time rendering module is used for WebGL rendering based on the local structure variables and the structure object pool, and plays a sequence frame animation formed by multiple target bitmaps through DragonBones.

[0016] In some embodiments, the device further includes: a target interface acquisition module, configured to add a log file to acquire the target interface.

[0017] In some embodiments, the local structure variables include local point variables and local rectangle variables, and the structure object pool includes a collection of point objects and rectangle objects.

[0018] In some embodiments, a Texture Merger is used to merge the multiple images.

[0019] In a third aspect, an embodiment of the present application provides a computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the rendering optimization method as described in the first aspect above when executing the computer program.

[0020] In a fourth aspect, an embodiment of the present application provides a computer storage medium on which a computer program is stored. When the program is executed by a processor, the rendering optimization method described in the first aspect above is implemented.

[0021] Compared to related technologies, the DragonBones-based rendering optimization method provided in the embodiments of this application adds local structure variables and a structure object pool to target interfaces whose object creation frequency is greater than a first preset threshold; merges multiple images whose rendering batches are greater than a second preset threshold and caches them as target bitmaps; WebGL renders based on the local structure variables and the structure object pool, and plays a sequence frame animation formed by multiple target bitmaps through DragonBones. By adding local structure variables and the structure object pool, the creation frequency of temporary vertex and rectangular objects is reduced, and by merging bitmaps, the GPU upload data is reduced, which can reduce the pressure of real-time rendering and solve the problem of poor performance caused by device heating and reduced frame rate in real-time rendering. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0023] Figure 1 is a flowchart of a rendering optimization method based on DragonBones according to an embodiment of the present application;

[0024] Figure 2 is a structural diagram of a rendering optimization device based on DragonBones according to an embodiment of the present application;

[0025] Figure 3 is a structural diagram of another rendering optimization device based on DragonBones according to an embodiment of the present application;

[0026] Figure 4 Schematic diagram of the internal structure of an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0027] In order to make the purpose, technical solutions and advantages of this application more clearly understood, the present application is described and illustrated below in conjunction with the accompanying drawings and examples. It should be understood that the specific embodiments described herein are merely used to explain this application and are not intended to limit this application. Based on the embodiments provided in this application, all other embodiments obtained by those of ordinary skill in the art without making any creative efforts are within the scope of protection of this application.

[0028] Obviously, the drawings described below are merely examples or embodiments of the present application. Those skilled in the art can, without inventive effort, apply the present application to other similar scenarios based on these drawings. Furthermore, it is also understood that, although the effort involved in such a development process may be complex and lengthy, for those skilled in the art related to the content disclosed in this application, changes in design, manufacturing, or production based on the technical content disclosed in this application are merely conventional technical means and should not be construed as an insufficiency of the content disclosed in this application.

[0029] References to "embodiments" in this application mean that a particular feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the application. The appearance of this phrase in various places in the specification does not necessarily refer to the same embodiment, nor does it refer to independent or alternative embodiments that are mutually exclusive of other embodiments. It is understood, both explicitly and implicitly, by those skilled in the art that the embodiments described in this application may be combined with other embodiments unless there is a conflict.

[0030] Unless otherwise defined, the technical or scientific terms used in this application should have the ordinary meaning understood by a person of ordinary skill in the technical field to which this application belongs. The words "one", "a", "the" and the like used in this application do not indicate a limit on quantity and may indicate the singular or plural. The terms "include", "comprise", "have" and any variations thereof used in this application are intended to cover non-exclusive inclusions; for example, a process, method, system, product or device that includes a series of steps or modules (units) is not limited to the listed steps or units, but may also include steps or units that are not listed, or may also include other steps or units that are inherent to these processes, methods, products or devices. The words "connect", "connected", "coupled" and the like used in this application are not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. The word "multiple" used in this application refers to two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships can exist. For example, "A and / or B" can mean: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the objects before and after are in an "or" relationship. The terms "first", "second", "third", etc. involved in this application are only used to distinguish similar objects and do not represent a specific order for the objects.

[0031] In WebGL, the rendering mode for mobile H5 web pages, DragonBones is needed to play sequential frame animations to showcase the rich and colorful visual textures of H5. WebGL allows 3D content to be rendered directly on canvas without the need for any plug-ins. Like the canvas 2D API, WebGL manipulates objects through scripts, and the steps are essentially the same: preparing the working context, preparing data, drawing objects on canvas, and rendering. DragonBones is used to create and play skeletal animations. Due to the excessive number of DrawCalls (drawing objects) per frame and the frequent object creation, mobile devices can overheat, experience reduced frame rates, and suffer from poor performance.

[0032] To solve the above problems, this embodiment provides a rendering optimization method based on DragonBones. Figure 1 Flowchart of the DragonBones-based rendering optimization method according to an embodiment of the present application. Figure 1 As shown, the process includes the following steps:

[0033] S110 : For a target interface whose frequency of creating objects is greater than a first preset threshold, add a local structure variable and a structure object pool.

[0034] Before step S110, the interface that frequently creates objects is checked by adding a log file, that is, the target interface whose frequency of creating objects is greater than the first preset threshold. For the point (point) and matrix (Rectangle) that frequently create temporary objects in the target interface, local structure variables and structure object pools are added to reduce the creation of temporary objects, reduce the frequency of temporary object creation, and thus reduce the high computational complexity brought by rendering. It can also save the real-time rendering process, save computing overhead, and reduce heating. Preferably, the local structure variables include local point variables and local matrix variables, and the structure object pool includes collections of types such as point objects and matrix objects. Point objects and rectangle objects are commonly used types of objects in rendering. Optimizing the creation frequency of point objects and matrix objects can greatly reduce the computational complexity.

[0035] S120 , merging multiple images whose rendering batches are larger than a second preset threshold and caching them as a target bitmap.

[0036] A DrawCall is a call from the CPU to the underlying graphics drawing interface, instructing the GPU to perform rendering operations. The rendering process is pipelined, with the CPU and GPU working in parallel. They are connected via a command buffer, to which the CPU sends rendering commands, and the GPU receives and executes them. The main reason DrawCalls affect rendering is that the CPU must call a DrawCall for each rendering operation. Each DrawCall requires extensive preparation, including checking the rendering status, submitting rendering data, and submitting the rendering status. GPUs, however, possess significant computing power and can quickly complete rendering tasks. However, excessive DrawCalls incur significant CPU overhead for preparation, burdening the CPU and potentially leaving the GPU idle. Excessive DrawCalls can cause device overheating and create CPU performance bottlenecks. By comparing and identifying images that can be merged, multiple images with a rendering batch size greater than a second preset threshold are merged and cached into a single target bitmap. This reduces the amount of data uploaded to the GPU and alleviates rendering pressure. Preferably, Texture Merger is used to combine the scattered textures of the above multiple images into a whole image, and at the same time parse SWF and GIF animations, create bitmap text, and export usable configuration files, which can reduce the program package size during design and development.

[0037] S130 , WebGL rendering based on the local structure variables and the structure object pool, and playing a sequence frame animation formed by multiple target bitmaps through DragonBones.

[0038] The above embodiment adds a log file to view the interface for frequently creating objects. For Point (point) and Rectangle (rectangle) that frequently create temporary objects, local variables Point, Rectangle and object pool (a collection of types such as Point, Rectangle) are added to reduce the creation of objects, solving the problem of high JavaScript computing overhead and GPU rendering computing overhead. By comparing and judging the pictures that can be merged, and using Texture Merger to manually merge the pictures that need to be rendered in multiple batches, they are cached as a target bitmap, thereby reducing the GPU uploading data and reducing the rendering pressure. The frame rate can be guaranteed to be stable during the real-time rendering process, which greatly alleviates the problem of equipment heating and solves the problem of poor real-time rendering performance.

[0039] An embodiment of the present application provides a rendering optimization device based on DragonBones. Figure 2 is a structural diagram of a rendering optimization device based on DragonBones according to an embodiment of the present application, such as Figure 2As shown, the device includes an object creation optimization module 210, a rendering image merging module 220 and a real-time rendering module 230. The object creation optimization module 210 is used to add local structure variables and a structure object pool for a target interface whose frequency of object creation is greater than a first preset threshold. Preferably, the local structure variables include local point variables and local rectangle variables, and the structure object pool includes a collection of point objects and rectangle objects. The rendering image merging module 220 is used to merge multiple images whose rendering batches are greater than a second preset threshold and cache them as a target bitmap. Preferably, Texture Merger is used to merge the multiple images. The real-time rendering module 230 is used for WebGL rendering based on the local structure variables and the structure object pool, and to play a sequence frame animation formed by multiple target bitmaps through DragonBones.

[0040] In some other embodiments, Figure 3 is a structural diagram of another rendering optimization device based on DragonBones according to an embodiment of the present application, such as Figure 3 As shown, the device further includes a target interface acquisition module 340, which is used to add a log file to obtain the target interface.

[0041] For the specific definition of the DragonBones-based rendering optimization device, please refer to the definition of the DragonBones-based rendering optimization method above, which will not be repeated here. The various modules in the above-mentioned DragonBones-based rendering optimization device can be implemented in whole or in part by software, hardware, and a combination thereof. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0042] In addition, in conjunction with the DragonBones-based rendering optimization method in the above embodiments, the present application embodiment may provide a storage medium for implementation. The storage medium stores a computer program; when the computer program is executed by a processor, it implements any one of the DragonBones-based rendering optimization methods in the above embodiments.

[0043] In one embodiment, Figure 4 is a schematic diagram of the internal structure of an electronic device according to an embodiment of the present application, such as Figure 4 As shown, an electronic device is provided, which may be a server, and its internal structure diagram may be as shown in FIG. Figure 4As shown. The electronic device includes a processor, a memory, a network interface and a database connected via a system bus. The processor of the electronic device is used to provide computing and control capabilities. The memory of the electronic device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and computer program in the non-volatile storage medium. The database of the electronic device is used to store data. The network interface of the electronic device is used to communicate with an external terminal via a network connection. When the computer program is executed by the processor, a rendering optimization method is implemented.

[0044] Those skilled in the art will understand that Figure 4 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the electronic device to which the solution of the present application is applied. The specific electronic device may include more or fewer components than shown in the figure, or combine certain components, or have a different component arrangement.

[0045] Those skilled in the art will appreciate that all or part of the processes in the above-mentioned embodiment methods can be implemented by instructing the relevant hardware through a computer program, which can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0046] Those skilled in the art should understand that the various technical features of the above-described embodiments can be combined arbitrarily. In order to make the description concise, not all possible combinations of the various technical features in the above-described embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0047] The above-described embodiments merely represent several implementation methods of the present application. While the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the present invention. It should be noted that a person skilled in the art could make various modifications and improvements without departing from the spirit of the present application, all of which fall within the scope of protection of the present application. Therefore, the scope of protection of the present patent application shall be determined by the appended claims.

Claims

1. A rendering optimization method based on DragonBones, characterized in that: The method comprises: Add a log file acquisition target interface, and for a target interface whose object creation frequency is greater than a first preset threshold, add a local structure variable and a structure object pool, wherein the local structure variable includes a local point variable and a local matrix variable, and the structure object pool includes a collection of point objects and matrix objects; Use Texture Merger to merge multiple images whose rendering batch is larger than the second preset threshold and cache them as the target bitmap; WebGL is rendered based on the local structure variables and the structure object pool, and a sequence frame animation formed by multiple target bitmaps is played through DragonBones.

2. The rendering optimization method according to claim 1, characterized in that: The local structure variables include local point variables and local rectangle variables, and the structure object pool includes a collection of point objects and rectangle objects.

3. A rendering optimization device based on DragonBones, characterized in that: The device includes: an object creation optimization module, a rendering image merging module and a real-time rendering module; The object creation optimization module is used to add a log file acquisition target interface, and for a target interface whose object creation frequency is greater than a first preset threshold, add a local structure variable and a structure object pool, wherein the local structure variable includes a local point variable and a local matrix variable, and the structure object pool includes a collection of point objects and matrix objects; The rendering image merging module is used to use Texture Merger to merge multiple images whose rendering batch is larger than a second preset threshold and cache them as a target bitmap; The real-time rendering module is used for WebGL rendering based on the local structure variables and the structure object pool, and plays a sequence frame animation formed by multiple target bitmaps through DragonBones.

4. The device according to claim 3, characterized in that The local structure variables include local point variables and local rectangle variables, and the structure object pool includes a collection of point objects and rectangle objects.

5. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the DragonBones-based rendering optimization method according to any one of claims 1 to 2 is implemented.

6. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, a rendering optimization method based on DragonBones as claimed in any one of claims 1 to 2 is implemented.

Images