CN111476858B - WebGL-based 2d engine rendering method, device and equipment - Google Patents
WebGL-based 2d engine rendering method, device and equipment Download PDFInfo
- Publication number
- CN111476858B CN111476858B CN202010279091.2A CN202010279091A CN111476858B CN 111476858 B CN111476858 B CN 111476858B CN 202010279091 A CN202010279091 A CN 202010279091A CN 111476858 B CN111476858 B CN 111476858B
- Authority
- CN
- China
- Prior art keywords
- geometric
- rendering
- objects
- map information
- webgl
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/001—Texturing; Colouring; Generation of texture or colour
Abstract
The invention discloses a WebGL-based 2d engine rendering method, a WebGL-based 2d engine rendering device, webGL-based 2d engine rendering equipment and a computer readable storage medium, wherein the method comprises the following steps of: acquiring geometric objects corresponding to the display objects respectively; sequencing all the geometric objects according to the rendering state and the map information of each geometric object to obtain a sequencing result; according to the sequencing result and the number of preset single batch objects, all geometric objects are packaged in groups to obtain a geometric object group; creating batch processing requests according to the required mapping number and the preset maximum mapping number of each geometric object group, and rendering each batch processing request; according to the method and the device, all the geometric objects are sequenced according to the rendering state and the map information of each geometric object, and the geometric objects which have the same rendering state and need to be rendered by using the same map can be adjacent, so that the rendering effect when the request is rendered in batch by using hardware is ensured, the rendering efficiency and the rendering performance are improved, and the user experience is improved.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a WebGL-based 2d engine rendering method, device and equipment and a computer readable storage medium.
Background
WebGL (Web Graphics Library) is a 3D drawing protocol, the drawing technical standard allows JavaScript (a scripting language) and OpenGL ES 2.0 (a graphical program interface) to be combined together, and by adding one JavaScript binding of OpenGL ES 2.0, webGL can provide hardware 3D accelerated rendering for HTML5 Canvas (used for drawing Graphics on a webpage), so that a Web developer can more smoothly display 3D scenes and models in a browser by means of a system display card, and complicated navigation and data visualization can be created. Obviously, the WebGL technical standard eliminates the trouble of developing web page-specific rendering plug-ins, can be used to create web site pages with complex 3D structures, can even be used to design 3D web games, and the like.
In the prior art, most of the WebGL-based 2d engines (i.e., webGL 2d engines) use hardware to render Sprite (display object), and a batch processing method is not adopted, so that rendering efficiency and performance are low, and user experience is not facilitated. Therefore, how to provide a batch processing rendering method of a WebGL 2d engine, improve rendering efficiency and performance, and improve user experience is a problem which needs to be solved urgently nowadays.
Disclosure of Invention
The invention aims to provide a WebGL-based 2d engine rendering method, a WebGL-based 2d engine rendering device, webGL-based 2d engine rendering equipment and a computer-readable storage medium, so that the rendering efficiency and the rendering performance of a hardware-rendered display object are improved, and the user experience is improved.
In order to solve the technical problem, the invention provides a 2d engine rendering method based on WebGL, which comprises the following steps:
acquiring geometric objects corresponding to the display objects respectively; each geometric object is packaged by rendering information of a corresponding display object, and the rendering information comprises vertex data, map information and a rendering state;
sequencing all the geometric objects according to the rendering state and the map information of each geometric object to obtain a sequencing result; wherein, the geometric objects with the same rendering state and the same mapping information in the sequencing result are adjacent;
according to the sorting result and the number of preset single batch objects, all the geometric objects are packaged in groups to obtain a geometric object group; wherein, each geometric object group is uploaded to the vertex data, the map information and the rendering state in the same vertex cache by all the corresponding geometric objects;
creating batch processing requests according to the required mapping number and the preset maximum mapping number of each geometric object group, and rendering each batch processing request; and the quantity of the required maps is the quantity of different map information in the corresponding geometric object group.
Optionally, the sorting all the geometric objects according to the rendering state and the map information of each geometric object to obtain a sorting result includes:
putting all the geometric objects into a display list;
according to the rendering state and the map information of each geometric object, all the geometric objects in the display list are sorted to obtain a sorted display list; and the geometric objects with the same rendering state in the sorted display list are adjacent, and the geometric objects with the same rendering state and the same map information are adjacent.
Optionally, all the geometric objects in the sorted display list are arranged from large to small according to the same number of the rendering states, and the geometric objects in the rendering states are arranged from large to small according to the same number of the map information.
Optionally, the grouping and encapsulating all the geometric objects according to the sorting result and the number of preset single batch objects to obtain a geometric object group includes:
and according to the sorting sequence of the sorted display list, taking the geometric objects with the preset single batch of objects as a group, uploading the vertex data of all the geometric objects in each group to a corresponding vertex cache, and packaging the vertex data, the map information and the rendering state into the geometric object group.
Optionally, the creating a batch request according to the number of required maps and the preset maximum number of maps in each geometric object group includes:
judging whether the quantity of the required maps corresponding to the residual geometric objects in the current geometric object group is greater than the preset maximum number of the maps;
if yes, selecting different map information with the preset maximum number of maps from the remaining geometric objects in the current geometric object group according to the sorting sequence of the current geometric object group to create a current map list, creating a current batch processing request according to the current map list, and executing the step of judging whether the number of required maps corresponding to the remaining geometric objects in the current geometric object group is larger than the preset maximum number of maps;
if not, selecting the mapping information of all the remaining geometric objects in the current geometric object group to create a current mapping list, and creating a current batch processing request according to the current mapping list.
Optionally, the obtaining geometric objects corresponding to the display objects includes:
traversing all the display objects according to the root node container;
and encapsulating the rendering information of each display object into a corresponding geometric object.
Optionally, before the sorting all the geometric objects according to the rendering state and the map information of each geometric object and obtaining a sorting result, the method further includes:
and setting a stage level value corresponding to each geometric object according to the level of the original stage corresponding to each display object.
The invention also provides a WebGL-based 2d engine rendering device, which comprises:
the acquisition module is used for acquiring the geometric objects corresponding to the display objects; each geometric object is packaged by rendering information of a corresponding display object, and the rendering information comprises vertex data, map information and a rendering state;
the sorting module is used for sorting all the geometric objects according to the rendering state and the map information of each geometric object to obtain a sorting result; geometric objects with the same rendering state and the same map information in the sequencing result are adjacent;
the packaging module is used for packaging all the geometric objects in groups according to the sorting result and the preset number of the single batch objects to obtain a geometric object group; wherein each geometric object group is packaged by the vertex data, the map information and the rendering state which are uploaded to the same vertex cache by all the corresponding geometric objects;
the rendering module is used for creating batch processing requests according to the required mapping number and the preset maximum mapping number of each geometric object group and rendering each batch processing request; and the quantity of the required maps is the quantity of different map information in the corresponding geometric object group.
The invention also provides a WebGL-based 2d engine rendering device, which comprises:
a memory for storing a computer program;
a processor for implementing 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 having stored thereon a computer program which, when executed by a processor, implements the steps of the WebGL-based 2d engine rendering method as described above.
The invention provides a WebGL-based 2d engine rendering method, which comprises the following steps: acquiring geometric objects corresponding to the display objects respectively; each geometric object is packaged by rendering information of a corresponding display object, and the rendering information comprises vertex data, map information and a rendering state; sequencing all the geometric objects according to the rendering state and the mapping information of each geometric object to obtain a sequencing result; geometric objects with the same rendering state in the sequencing result are adjacent, and geometric objects with the same rendering state and the same mapping information are adjacent; according to the sequencing result and the number of preset single batch objects, all geometric objects are packaged in groups to obtain a geometric object group; wherein, each geometric object group is packaged by the vertex data and the chartlet information and the rendering state which are uploaded to the same vertex cache by all the corresponding geometric objects; creating batch processing requests according to the required mapping number and the preset maximum mapping number of each geometric object group, and rendering each batch processing request; the quantity of the required maps is the quantity of different map information in the corresponding geometric object group;
therefore, according to the method and the device, all the geometric objects are sequenced according to the rendering state and the map information of each geometric object, the geometric objects which have the same rendering state and need to be rendered by using the same map can be adjacent, the rendering effect when the batch processing request is rendered by using hardware is ensured, the rendering efficiency and the rendering performance are improved, and the user experience is improved. In addition, the invention also provides a WebGL-based 2d engine rendering device, equipment and a computer-readable storage medium, and the WebGL-based 2d engine rendering device, equipment and computer-readable storage medium also have the beneficial effects.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the embodiments or the prior art descriptions will be briefly described below, it is obvious that the drawings in the following description are only embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the provided drawings without creative efforts.
Fig. 1 is a flowchart of a WebGL-based 2d engine rendering method according to an embodiment of the present invention;
fig. 2 is a schematic flowchart of another WebGL-based 2d engine rendering method according to an embodiment of the present invention;
fig. 3 is a block diagram of a structure of a WebGL-based 2d engine rendering apparatus according to an embodiment of the present invention;
fig. 4 is a schematic structural diagram of a WebGL-based 2d engine rendering device according to an embodiment of the present invention.
Detailed Description
In order to make the objects, 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 with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, but not all embodiments of the present invention. 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 invention.
Referring to fig. 1, fig. 1 is a flowchart of a WebGL-based 2d engine rendering method according to an embodiment of the present invention. The method can comprise the following steps:
step 101: acquiring geometric objects corresponding to the display objects respectively; and each geometric object is packaged by rendering information of the corresponding display object, and the rendering information comprises vertex data, map information and a rendering state.
It is understood that a processor running a WebGL-based 2d engine (i.e., a WebGL 2d engine) performs rendering multiple times per second at a fixed frame rate, which is exemplified by rendering each frame of the processor.
The geometric object (Geometry) in this step is packaged with information required for rendering of the corresponding display object (Sprite), that is, rendering information, such as vertex data, map information, rendering state, and the like.
Specifically, in this step, the processor may obtain geometric objects corresponding to all display objects corresponding to the current frame rendering lock. For the specific way in which the processor acquires the respective geometric objects corresponding to the display objects in this step, the specific way can be set by a designer according to a use scene and user requirements, for example, the processor can traverse all the display objects according to a Root node container; and encapsulating the rendering information of each display object into a corresponding geometric object. As long as the processor can obtain the geometric objects corresponding to all the display objects corresponding to the current frame rendering, this embodiment does not limit this.
Step 102: sequencing all the geometric objects according to the rendering state and the mapping information of each geometric object to obtain a sequencing result; and geometric objects with the same rendering state and the same mapping information in the sequencing result are adjacent.
It can be understood that, in the step, by sorting all the geometric objects, the geometric objects with the same rendering state and the same map information after sorting are adjacent to each other, so that the geometric objects corresponding to the batch processing request for subsequent rendering have the same rendering state and need to use the same map are adjacent to each other, and the rendering effect is ensured.
Specifically, the specific manner of the processor in this step of sorting all the geometric objects according to the rendering state and the map information of each geometric object to obtain a sorting result may be set by a designer, for example, all the geometric objects may be put into a preset queue, that is, a display queue, and then arranged in the display queue according to the map information of the rendering states of the geometric objects, so that the geometric objects in the same rendering state and with the same map information (that is, using the same map during rendering) are adjacent to each other; correspondingly, the geometric objects in the same rendering state in the display queue may also be adjacent, that is, the geometric objects in the same rendering state in the sorting result in this step are adjacent, and the geometric objects in the same rendering state and the same map information are adjacent. That is, the present step may include: according to the rendering state and the mapping information of each geometric object, sequencing all the geometric objects in the display list to obtain a display list which is sequenced; and the geometric objects with the same rendering state and the same mapping information in the sorted display list are adjacent.
Furthermore, all the geometric objects in the sorted display list can be arranged from large to small according to the same number of rendering states, and the geometric objects in the same rendering states can be arranged from large to small according to the same number of the tile information.
Correspondingly, 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 can be further included before the step, so that after the rendering of the display objects is finished subsequently, the rendering result corresponding to each display object can be put back to the level of the original stage corresponding to the stage level value according to the stage level value corresponding to each geometric object. As shown in fig. 2, when all the geometric objects (Geometry) are put into the display queue, different z values (i.e., stage level values) may be set according to the level of the display object (Sprite) corresponding to each geometric object in the original stage.
Step 103: according to the sequencing result and the number of preset single batch objects, all geometric objects are packaged in groups to obtain a geometric object group; and each geometric object group is packaged by vertex data, map information and rendering state uploaded to the same vertex cache by all the corresponding geometric objects.
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 _ mass) of the WebGL 2d engine. The purpose of this step may be to encapsulate all geometric objects into one or more geometric object groups (geotrygroups) according to the preset number of objects in a single batch according to the sorting result; namely, the geometric objects with preset single batch of object quantity are sequentially packaged into a geometric object group according to the sequencing result.
For example, when the sorting result in this step is a sorted display list, the processor may upload vertex data of all geometric objects in each group to a corresponding vertex cache according to a sorting order by using geometric objects of a preset single batch number as a group, and package the vertex data, the map information, and the rendering state into a geometric object group.
Step 104: creating batch processing requests according to the required mapping number and the preset maximum mapping number of each geometric object group, and rendering each batch processing request; the number of the required maps is the number of different map information in the corresponding geometric object group.
It should be noted that the preset maximum number of tiles in this step may be the maximum number of tiles (MAX _ TEXTURE) supported by a single fragment shader supported by preset hardware (e.g., graphics card GPU). The purpose of this step may be to encapsulate each geometric object group into one or more batch processing requests (batchdrawcalls) according to a preset maximum number of maps and an actual number of required maps of each geometric object group, that is, the number of all geometric objects corresponding to each batch processing request is less than or equal to the preset number of single batch objects, and the number of required maps of all geometric objects corresponding to each batch processing request (that is, the number of different map information) is less than or equal to the preset maximum number of maps; therefore, the batch processing request is rendered, the batch processing of rendering is realized, namely a plurality of objects to be rendered are merged and submitted to hardware for rendering at one time, and the rendering performance is improved.
It can be understood that, for the specific way in which the processor creates the batch request according to the required number of maps and the preset maximum number of maps of each geometric object group in this step, it may be set by the designer, for example, it may traverse all geometric object groups, if the number of maps needed to be used by all geometric objects in the geometric object groups exceeds the preset maximum number of maps, then create a map list for one group with the preset maximum number of maps, and create the batch request according to the map list; if the preset maximum number of maps is not exceeded, all the maps needed for the set of geometric objects are placed in the map list and a batch request is created.
That is, this step may include: judging whether the quantity of the required maps corresponding to the residual geometric objects in the current geometric object group is greater than the preset maximum number of the maps or not; wherein, the current geometric object group is any geometric object group currently processed; if yes, selecting different map information with preset maximum map number from the residual geometric objects in the current geometric object group according to the sorting sequence of the current geometric object group to create a current map list, creating a current batch processing request according to the current map list, executing a step of judging whether the required map number corresponding to the residual geometric objects in the current geometric object group is larger than the preset maximum map number, and continuously processing the residual geometric objects in the current geometric object group; if not, selecting the mapping information of all the remaining geometric objects in the current geometric object group to create a current mapping list, and creating a current batch processing request according to the current mapping list.
Specifically, the processor in this step renders each batch request, and may render each batch request by using hardware such as a GPU for the processor. Correspondingly, the step may further include a step of uploading a map to the hardware performing the rendering, for example, the processor may traverse all the batch processing requests, and before each batch processing request is rendered by using the hardware, may determine whether to upload the map required by the batch processing request to the hardware; if the map is not uploaded, uploading the map and rendering the batch processing request; if the map is uploaded, the batch processing request can be directly rendered, and repeated uploading is avoided.
In the embodiment of the invention, all the geometric objects are sequenced according to the rendering state and the map information of each geometric object, and the geometric objects which have the same rendering state and need to be rendered by using the same map can be adjacent, so that the rendering effect when the batch processing request is rendered by using hardware is ensured, the rendering efficiency and the rendering performance are improved, and the user experience is improved.
Referring to fig. 3, fig. 3 is a block diagram of a 2d engine rendering apparatus based on WebGL according to an embodiment of the present invention. The apparatus may include:
an obtaining module 10, configured to obtain geometric objects corresponding to display objects respectively; each geometric object is packaged by rendering information of a corresponding display object, and the rendering information comprises vertex data, map information and a rendering state;
the sorting module 20 is configured to sort all the geometric objects according to the rendering state and the map information of each geometric object, so as to obtain a sorting result; geometric objects with the same rendering state and the same mapping information in the sequencing result are adjacent;
the packaging module 30 is configured to package all geometric objects in groups according to the sorting result and the number of preset single batch objects, and acquire a geometric object group; each geometric object group is packaged by vertex data, map information and rendering state which are uploaded to the same vertex cache by all the corresponding geometric objects;
a rendering module 40, configured to create batch processing requests according to the number of required maps and a preset maximum number of maps of each geometric object group, and render each batch processing request; the number of the required maps is the number of different map information in the corresponding geometric object group.
Optionally, the sorting module 20 may be specifically configured to put all geometric objects into the display list; sequencing all the geometric objects in the display list according to the rendering state and the map information of each geometric object to obtain a display list after sequencing; and the geometric objects with the same rendering state and the same mapping information in the sorted display list are adjacent.
Optionally, 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 geometric objects in the same rendering states are arranged from large to small according to the same number of the tile information.
Optionally, the encapsulation module 30 may be specifically configured to, according to the sorting order of the sorted display list, take geometric objects with a preset number of single batch objects as a group, upload vertex data of all geometric objects in each group to a corresponding vertex cache, and encapsulate the vertex data, the map information, and the rendering state into a geometric object group.
Optionally, the rendering module 40 may include:
the judging submodule is used for judging whether the quantity of the required maps corresponding to the residual geometric objects in the current geometric object group is larger than the preset maximum map quantity or not;
the first creating sub-module is used for selecting different map information with the preset maximum number of maps from the residual geometric objects in the current geometric object group according to the sorting sequence of the current geometric object group to create a current map list if the number of maps is larger than the preset maximum number of maps, creating a current batch processing request according to the current map list, and sending a starting signal to the judging sub-module;
and the first creating sub-module is used for selecting the mapping information of all the residual geometric objects in the current geometric object group to create a current mapping list if the mapping number is not larger than the preset maximum mapping number, and creating the current batch processing request according to the current mapping list.
Optionally, the obtaining module 10 may include:
the traversing submodule is used for traversing all the display objects according to the root node container;
and the packaging sub-module is used for packaging the rendering information of each display object into a corresponding geometric object.
Optionally, the apparatus may further include:
and the level setting module is used for setting a stage level value corresponding to each geometric object according to the level of the original stage corresponding to each display object.
In this embodiment, in the embodiment of the present invention, all geometric objects are sorted by the sorting module 20 according to the rendering state and the map information of each geometric object, and the geometric objects that have the same rendering state and need to be rendered using the same map may be adjacent to each other, so that the rendering effect when a batch request is rendered by using hardware is ensured, the rendering efficiency and the rendering performance are improved, and the user experience is improved.
Referring to fig. 4, fig. 4 is a schematic structural diagram of a WebGL-based 2d engine rendering device according to an embodiment of the present invention; the device 1 may comprise:
a memory 11 for storing a computer program; a processor 12, configured to implement the steps of the WebGL-based 2d engine rendering method provided in the above embodiment when executing the computer program.
In the present embodiment, the device 1 may be a PC (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.
The memory 11 includes at least one type of readable storage medium, which includes a flash memory, a hard disk, a multimedia card, a card type memory (e.g., SD or DX memory, etc.), a magnetic memory, a magnetic disk, an optical disk, and the like. The memory 11 may in some embodiments be an internal storage unit of the device 1, e.g. a hard disk of the device 1. The memory 11 may also be an external storage device of the device 1 in other embodiments, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), etc. provided on the device 1. Further, the memory 11 may also comprise both internal memory units of the device 1 and external memory devices. The memory 11 can be used not only for storing application software installed in the device 1 but also various types of data, such as: the code of a program that executes the WebGL-based 2d engine rendering method, or the like, may also be used to temporarily store data that has been output or is to be output.
The processor 12 may be a Central Processing Unit (CPU), controller, microcontroller, microprocessor or other data Processing chip in some embodiments, and is used for running program codes or Processing data stored in the memory 11, such as codes of a program executing the WebGL-based 2d engine rendering method, and the like.
The bus 13 may be a Peripheral Component Interconnect (PCI) bus, an Extended Industry Standard Architecture (EISA) bus, or the like. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one thick line is shown in FIG. 4, but that does not indicate only one bus or one type of bus.
Further, the device may further comprise a network interface 14, and the network interface 14 may optionally comprise a wired interface and/or a wireless interface (such as a WI-FI interface, a bluetooth interface, etc.), which are generally used for establishing a communication connection between the device 1 and other electronic devices.
Optionally, the device 1 may further comprise a user interface 15, the user interface 15 may comprise a Display (Display), an input unit such as a Keyboard (Keyboard), and the optional user interface 15 may further comprise a standard wired interface, a wireless interface. Alternatively, 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) touch device, or the like. The display, which may also be referred to as a display screen or display unit, is suitable for displaying information processed in the device 1 and for displaying a visual user interface.
Fig. 4 only shows the device 1 with the components 11-15, and it will be understood by a person skilled in the art that the structure shown in fig. 4 does not constitute a limitation of the device 1, and may comprise fewer or more components than shown, or a combination of certain components, or a different arrangement of components.
In addition, the embodiment of the present invention further discloses a computer readable storage medium, where a computer program is stored, and when the computer program is executed by a processor, the computer program implements the steps of the WebGL-based 2d engine rendering method provided in the above embodiment.
Wherein the storage medium may include: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, an optical disk, or other various media capable of storing program codes.
The embodiments are described in a progressive mode in the specification, the emphasis of each embodiment is on the difference from the other embodiments, and the same and similar parts among the embodiments can be referred to each other. The device, the apparatus and the computer-readable storage medium disclosed in the embodiments correspond to the method disclosed in the embodiments, so that the description is simple, and the relevant points can be referred to the description of the method.
Those of skill would further appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both, and that the various illustrative components and steps have been described above generally in terms of their functionality in order to clearly illustrate this interchangeability of hardware and software. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.
The method, the device, the equipment and the computer-readable storage medium for rendering the 2d engine based on the WebGL provided by the invention are described in detail above. The principles and embodiments of the present invention are explained herein using specific examples, which are presented only to assist in understanding the method and its core concepts. It should be noted that, for those skilled in the art, it is possible to make various improvements and modifications to the present invention without departing from the principle of the present invention, and those improvements and modifications also fall within the scope of the claims of the present invention.
Claims (10)
1. A2 d engine rendering method based on WebGL is characterized by comprising the following steps:
acquiring geometric objects corresponding to the display objects respectively; wherein each geometric object is encapsulated by rendering information of a respectively corresponding display object, and the rendering information comprises vertex data, map information and a rendering state;
sequencing all the geometric objects according to the rendering state and the map information of each geometric object to obtain a sequencing result; geometric objects with the same rendering state and the same map information in the sequencing result are adjacent;
according to the sequencing result and the number of preset single batch objects, all the geometric objects are packaged in groups to obtain a geometric object group; wherein each geometric object group is packaged by the vertex data, the map information and the rendering state which are uploaded to the same vertex cache by all the corresponding geometric objects;
creating batch processing requests according to the required mapping number and the preset maximum mapping number of each geometric object group, and rendering each batch processing request; and the quantity of the required maps is the quantity of different map information in the corresponding geometric object group.
2. The WebGL-based 2d engine rendering method of claim 1, wherein the step of sorting all the geometric objects according to the rendering state and the map information of each geometric object to obtain a sorting result comprises the steps of:
putting all the geometric objects into a display list;
according to the rendering state and the map information of each geometric object, all the geometric objects in the display list are sorted to obtain a sorted display list; and the geometric objects with the same rendering state in the sorted display list are adjacent, and the geometric objects with the same rendering state and the same map information are adjacent.
3. The WebGL-based 2d engine rendering method of claim 2, wherein all the geometric objects in the sorted display list are arranged from large to small according to the same number of the rendering states, and the geometric objects in the rendering states are arranged from large to small according to the same number of the map information.
4. The WebGL-based 2d engine rendering method of claim 2, wherein the step of grouping and packaging all the geometric objects according to the sorting result and a preset number of single batch objects to obtain a geometric object group comprises the steps of:
and according to the sorting sequence of the sorted display list, taking the geometric objects with the preset single batch of object number as a group, uploading the vertex data of all the geometric objects in each group to a corresponding vertex cache, and packaging the vertex data, the map information and the rendering state into the geometric object group.
5. The WebGL-based 2d engine rendering method of claim 1, wherein the creating of the batch request according to the number of required maps and a preset maximum number of maps in each geometric object group comprises:
judging whether the quantity of the required maps corresponding to the residual geometric objects in the current geometric object group is greater than the preset maximum number of the maps;
if yes, selecting different map information with the preset maximum number of maps from the remaining geometric objects in the current geometric object group according to the sorting sequence of the current geometric object group to create a current map list, creating a current batch processing request according to the current map list, and executing the step of judging whether the number of required maps corresponding to the remaining geometric objects in the current geometric object group is larger than the preset maximum number of maps;
if not, selecting the map information of all the remaining geometric objects in the current geometric object group to create a current map list, and creating a current batch processing request according to the current map list.
6. The WebGL-based 2d engine rendering method of claim 1, wherein the obtaining of the geometric objects corresponding to the display objects comprises:
traversing all the display objects according to the root node container;
and packaging the rendering information of each display object into a corresponding geometric object.
7. The WebGL-based 2d engine rendering method as claimed in any one of claims 1 to 6, wherein the step of sorting all the geometric objects according to the rendering state and the map information of each geometric object and before obtaining a sorting result further comprises:
and setting a stage level value corresponding to each geometric object according to the level of the original stage corresponding to each display object.
8. A WebGL-based 2d engine rendering apparatus, comprising:
the acquisition module is used for acquiring the geometric objects corresponding to the display objects; wherein each geometric object is encapsulated by rendering information of a respectively corresponding display object, and the rendering information comprises vertex data, map information and a rendering state;
the sorting module is used for sorting all the geometric objects according to the rendering state and the map information of each geometric object to obtain a sorting result; wherein, the geometric objects with the same rendering state and the same mapping information in the sequencing result are adjacent;
the packaging module is used for grouping and packaging all the geometric objects according to the sequencing result and the number of preset single batch objects to obtain a geometric object group; wherein, each geometric object group is uploaded to the vertex data, the map information and the rendering state in the same vertex cache by all the corresponding geometric objects;
the rendering module is used for creating batch processing requests according to the required mapping number and the preset maximum mapping number of each geometric object group and rendering each batch processing request; and the quantity of the required maps is the quantity of different map information in the corresponding geometric object group.
9. A WebGL-based 2d engine rendering device, comprising:
a memory for storing a computer program;
a processor for implementing 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, having stored thereon a computer program which, when executed by a processor, implements the steps of the WebGL-based 2d engine rendering method of any of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010279091.2A CN111476858B (en) | 2020-04-10 | 2020-04-10 | WebGL-based 2d engine rendering method, device and equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010279091.2A CN111476858B (en) | 2020-04-10 | 2020-04-10 | WebGL-based 2d engine rendering method, device and equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111476858A CN111476858A (en) | 2020-07-31 |
| CN111476858B true CN111476858B (en) | 2023-03-14 |
Family
ID=71751795
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010279091.2A Active CN111476858B (en) | 2020-04-10 | 2020-04-10 | WebGL-based 2d engine rendering method, device and equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111476858B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112348962B (en) * | 2020-11-30 | 2022-05-27 | 久瓴(江苏)数字智能科技有限公司 | Model component clicking method and device, computer equipment and storage medium |
| CN112614041B (en) * | 2020-12-29 | 2022-10-25 | 完美世界(北京)软件科技发展有限公司 | Data driving method and device for sparse rendering, storage medium and electronic device |
Family Cites Families (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8325177B2 (en) * | 2008-12-29 | 2012-12-04 | Microsoft Corporation | Leveraging graphics processors to optimize rendering 2-D objects |
| US20180302468A1 (en) * | 2016-03-14 | 2018-10-18 | Ebay Inc. | System and method for delegating content processing |
| CN106504185B (en) * | 2016-10-26 | 2020-04-07 | 腾讯科技（深圳）有限公司 | Rendering optimization method and device |
| KR102651126B1 (en) * | 2016-11-28 | 2024-03-26 | 삼성전자주식회사 | Graphic processing apparatus and method for processing texture in graphics pipeline |
| CN107463398B (en) * | 2017-07-21 | 2018-08-17 | 腾讯科技（深圳）有限公司 | Game rendering intent, device, storage device and terminal |
| US10592242B2 (en) * | 2018-07-20 | 2020-03-17 | Cesium GS, Inc. | Systems and methods for rendering vector data on static and dynamic-surfaces using screen space decals and a depth texture |
| CN109509247A (en) * | 2018-09-21 | 2019-03-22 | 苏州蜗牛数字科技股份有限公司 | A method of support the geometry of light-maps instantiates to draw |
| CN110717963B (en) * | 2019-08-30 | 2023-08-11 | 杭州群核信息技术有限公司 | Mixed rendering display method, system and storage medium of replaceable model based on WebGL |
-
2020
- 2020-04-10 CN CN202010279091.2A patent/CN111476858B/en active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN111476858A (en) | 2020-07-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103678631B (en) | page rendering method and device | |
| CN110990516A (en) | Map data processing method and device and server | |
| CN112102437B (en) | Canvas-based radar map generation method and device, storage medium and terminal | |
| CN104966265B (en) | Graphics processing method and apparatus | |
| CN111476858B (en) | WebGL-based 2d engine rendering method, device and equipment | |
| CN108159693B (en) | Game scene construction method and device | |
| CN111259037A (en) | Data query method and device based on rule configuration, storage medium and terminal | |
| WO2023197762A1 (en) | Image rendering method and apparatus, electronic device, computer-readable storage medium, and computer program product | |
| US11157551B2 (en) | Method and device for image loading | |
| CN112711729A (en) | Rendering method and device based on page animation, electronic equipment and storage medium | |
| CN113256782B (en) | Three-dimensional model generation method and device, storage medium and electronic equipment | |
| CN112423111A (en) | Graphic engine and graphic processing method suitable for player | |
| CN112785676B (en) | Image rendering method, device, equipment and storage medium | |
| CN111967478B (en) | Feature map reconstruction method, system, storage medium and terminal based on weight overturn | |
| CN111460342B (en) | Page rendering display method and device, electronic equipment and computer storage medium | |
| CN113989442B (en) | Building information model construction method and related device | |
| CN116185545A (en) | Page rendering method and device | |
| CN115794400A (en) | Memory management method, device and equipment of deep learning model and storage medium | |
| CN113419806B (en) | Image processing method, device, computer equipment and storage medium | |
| CN111325816B (en) | Feature map processing method and device, storage medium and terminal | |
| CN112416489A (en) | Engineering drawing display method and related device | |
| CN109767379B (en) | Data normalization processing method and device, storage medium and electronic equipment | |
| CN112612427A (en) | Vehicle stop data processing method and device, storage medium and terminal | |
| CN115935863B (en) | Digital circuit load division processing method, device and computer equipment | |
| CN117788613A (en) | Graph rendering method and device based on graph layout |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |