CN111143018A

CN111143018A - Front-end image rendering method and device and electronic equipment

Info

Publication number: CN111143018A
Application number: CN201911417460.3A
Authority: CN
Inventors: 夏天晗; 姚晓谊; 谭家玮
Original assignee: Beijing Kuangshi Robot Technology Co Ltd
Current assignee: Beijing Kuangshi Robot Technology Co Ltd
Priority date: 2019-12-31
Filing date: 2019-12-31
Publication date: 2020-05-12

Abstract

The invention provides a front-end image rendering method, a front-end image rendering device and electronic equipment, wherein the method comprises the following steps: acquiring a frame image to be rendered, and splitting the frame image into drawing objects with the minimum granularity; combining a plurality of drawing objects with the same vertex information into an object class according to the vertex information of the drawing objects; the information of each object class comprises vertex information and a plurality of variable information; transmitting the information of the object class to a renderer; and the renderer generates a rendered frame image according to the information of the object class. In this way, the same vertex information is combined, so that the transmission times of the vertex information from JS to WebGL in the drawing or rendering process of the frame image can be reduced to the minimum, and the image rendering efficiency is greatly improved.

Description

Front-end image rendering method and device and electronic equipment

Technical Field

The invention relates to the technical field of image rendering, in particular to a front-end image rendering method and device and electronic equipment.

Background

In the specific display of a real image, a real scene and an entity are represented in a three-dimensional form, so that the real scene and the entity are convenient to manipulate and transform, most of graphic display devices are two-dimensional rasterization displays and dot matrix printers, and the representation of the three-dimensional entity scene by the N-dimensional rasterization and dot matrix is image rendering.

WebGL (Web Graphics library) is an important tool for image rendering, and is a 3D (three-dimensional) drawing protocol, the drawing technical standard allows JavaScript and OpenGL ES 2.0 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, so that 3D scenes and models can be displayed in a browser more smoothly by means of a system display card, and complex navigation and data visualization can be created. The WebGL technical standard avoids the trouble of developing a special rendering plug-in for a webpage, can be used for creating a website page with a complex 3D structure, and brings great convenience to the existing image rendering.

However, the existing rendering methods have the problem of insufficient rendering effect; when rendering objects with lower orders of magnitude, certain fluency can be maintained, but when rendering 2d rendering objects with thousands of orders of magnitude or more at the same time, frames can be seriously dropped, and when the whole view and mouth picture needs to be zoomed and moved, most frames have the problem of serious pause.

Therefore, a front-end image rendering method and device with high rendering efficiency are urgently needed.

Disclosure of Invention

The problem to be solved by the invention is how to efficiently render the front-end two-dimensional image.

To solve the above problem, an embodiment of the present invention first provides a front-end image rendering method, including:

acquiring a frame image to be rendered, and splitting the frame image into drawing objects with the minimum granularity;

combining a plurality of drawing objects with the same vertex information into an object class according to the vertex information of the drawing objects; the information of each object class comprises vertex information and a plurality of variable information, and the variable information is in one-to-one correspondence with a plurality of drawing objects in the object class;

transmitting the information of the object class to a renderer;

and the renderer generates a rendered frame image according to the information of the object class.

In this way, the same vertex information is combined, so that the transmission times of the vertex information from JS to WebGL in the drawing (or rendering) process of the frame image can be reduced to the minimum (originally, the times of hundreds of thousands of orders are reduced to 10 orders), and the image rendering efficiency is greatly increased (the minimization of information transmission brings about the improvement of the drawing efficiency).

Optionally, the drawing object includes vertex information and variable information, where the variable information includes at least one of an offset attribute, a scaling ratio, color information, material information, and side length information.

Optionally, before the merging, according to the vertex information of the drawing object, the plurality of drawing objects of the same vertex information into one object class, the method further includes:

opening up a storage space, wherein the storage space is used for storing the vertex information and the variable information respectively;

through opening up storage space, can not repeated the application and the destruction of taking place memory (storage space) many times for the in-process of drawing a plurality of figures, promote drawing efficiency by a wide margin, reduce the card pause problem that memory recovery leads to among the drawing process.

Optionally, the storage amount of the storage space is greater than the data amount of the drawing object. Therefore, the data updating operation at the later stage can be facilitated.

Optionally, the front-end image rendering method further includes:

after an updating instruction, a translation instruction or a zooming instruction of a frame image is received, acquiring updating information according to the updating instruction, the translation instruction or the zooming instruction;

transmitting the update information to a renderer;

and the renderer generates a rendered frame image according to the updating information.

Therefore, by updating the information, only the information of the object class needing to be updated is transmitted to the renderer in the program execution environment, and the information of the object class which is not changed is not transmitted, so that the data volume needing to be transmitted is greatly reduced, and frame dropping and pause phenomena during multi-level frame image rendering processing are avoided.

Optionally, the transmitting the update information to the renderer further includes:

and updating the information of the object class stored in the storage space according to the updating information.

Through updating the information, the information of the object class stored in the storage space is directly updated, the storage space can be utilized to the maximum extent, repeated application and destruction of a memory (storage space) are avoided, the drawing efficiency is greatly improved, and the problem of blockage caused by memory recovery in the drawing process is reduced.

Optionally, in the obtaining of the update information according to the update instruction, the pan instruction, or the zoom instruction, after receiving the pan instruction or the zoom instruction of the frame image, the obtained update information is used to update the viewport matrix.

Optionally, the information of the object class further includes a viewport matrix, and the viewport matrix is stored independently from the vertex information and the variable information.

Optionally, during the updating of the information of the object class stored in the storage space according to the update information, when the update information is used to update the viewport matrix, the viewport matrix in the information of the object class is updated according to the update information.

By adding the viewport matrix attribute, translation or zooming of visible content (frame image) can be described, so that the updated viewport matrix is transmitted independently, namely, data transmission operation of a translation instruction or a zooming instruction can be completed, the data volume needing to be transmitted is greatly reduced, the transmission data from JS to WebGL in the drawing (or rendering) process of the frame image is further reduced, and the image rendering efficiency is increased.

Secondly, an embodiment of the present invention further provides a front-end image rendering apparatus, including:

the device comprises an acquisition unit, a rendering unit and a processing unit, wherein the acquisition unit is used for acquiring a frame image to be rendered and splitting the frame image into drawing objects with the minimum granularity;

a merging unit, configured to merge a plurality of the rendering objects with the same vertex information into an object class according to the vertex information of the rendering objects; the information of each object class comprises vertex information and a plurality of variable information, and the variable information is in one-to-one correspondence with a plurality of drawing objects in the object class.

The transmission unit is used for transmitting the information of the object class to a renderer;

and the renderer is used for generating a rendered frame image according to the information of the object class.

In addition, an embodiment of the present invention further provides an electronic device, which includes a processor and a memory, where the memory stores a control program, and the control program is executed by the processor to implement the front-end image rendering method.

In addition, an embodiment of the present invention further provides a computer-readable storage medium, which stores instructions that are loaded and executed by a processor to implement the front-end image rendering method described above.

Drawings

FIG. 1 is a flow diagram of a front-end image rendering method according to one embodiment of the invention;

FIG. 2 is a flow chart of a front-end image rendering method according to another embodiment of the invention;

FIG. 3 is a flowchart of a front-end image rendering method according to yet another embodiment of the present invention;

FIG. 4 is a flow chart of a front-end image rendering method according to yet another embodiment of the present invention;

FIG. 5 is a block diagram of a front-end image rendering apparatus according to an embodiment of the present invention;

FIG. 6 is a block diagram of a front-end image rendering apparatus according to another embodiment of the present invention;

FIG. 7 is a block diagram of an electronic device according to an embodiment of the invention;

FIG. 8 is a block diagram of another electronic device according to an embodiment of the invention.

Description of reference numerals:

1-fetch unit, 2-merge unit, 3-transmit unit, 4-renderer, 5-storage unit, 12-electronic device, 14-external device, 16-processing unit, 18-bus, 20-network adapter, 22-input/output (I/O) interface, 24-display, 28-system memory, 30-random access memory, 32-cache memory, 34-storage system, 40-utility, 42-program module.

Detailed Description

In order to make the aforementioned objects, features and advantages of the present invention comprehensible, embodiments accompanied with figures are described in detail below.

It is to be understood that the embodiments described are only a few embodiments of the present invention, and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

For easy understanding, in the present invention, technical problems therein need to be elaborated.

In the existing WebGL, an attribute variable, a uniform variable, and a uniform variable are generally set; the attribute variable represents vertex-related data that stores data that is externally transmitted into the vertex shader. After the attribute variable is defined in the shader, the shader needs to be interacted with through JS. Through the rendering context variable of the WebGL, the storage address of the attribute variable can be obtained, and after the address is obtained, the JS can transmit the vertex position of the drawing point to the attribute variable. A uniform variable representing consistent (invariant) data transmitted by the JavaScript program to the vertex shader and the fragment shader; that is, such variables can be used in both vertex and fragment shaders. Similar to the attribute variable, the uniform variable is also used to obtain its address and then transfer its value. A varying variable, which represents a variable that flows from the vertex shader to the fragment shader.

Here, it is necessary to describe a drawing object, which is a unit with minimum granularity of JS layer abstraction and contains information including: vertex information for describing graphic shape information, offset attributes for describing graphic position information, zoom ratio, viewport matrix for describing matrix of three-dimensional transformation of graphic three-dimensional information from data to concrete presentation, color information, material information, side length information, and the like.

In this way, in the existing WebGL, the drawing object information is stored in the temporarily created storage space, and then the storage space transmits the stored information to the shader; the inventors have found that, in the prior art, drawing objects or drawing units of the same shape (it is necessary to be clear that the vertex information of the drawing objects of the same shape is the same) store the respective vertex information, and transmit the respective vertex information to the renderer at the time of rendering. According to the transmission mode, when frame images or rendering objects needing to be processed are few, the influence on the whole rendering mode is not great, but when thousands of orders of magnitude or more 2d rendering objects are rendered at the same time, the data volume needing to be transmitted is greatly increased, so that the transmission is not timely, and the problems of frame dropping and blocking are caused.

The embodiment of the disclosure provides a front-end image rendering method, which can be executed by a front-end image rendering device, and the front-end image rendering device can be integrated in electronic equipment such as a mobile phone, a notebook, a server, a PAD, and the like. FIG. 1 is a flowchart illustrating a front-end image rendering method according to an embodiment of the invention; the front-end image rendering method comprises the following steps:

step 10, obtaining a frame image to be rendered, and splitting the frame image into drawing objects with the minimum granularity;

the frame image to be rendered at least includes an image model and rendering information, that is, specific information of the frame image to be rendered includes necessary information required for generating a real rendering image, that is, after the frame image to be rendered is acquired, the rendering image can be directly generated by a renderer through splitting, transforming and processing, and no other necessary information needs to be additionally acquired. The frame image to be rendered may be stored in any form, such as a data matrix, an off-white image, or a data stream.

In this step, the minimum granularity refers to the minimum granularity abstracted at the JS layer. The split rendering object at least includes at least one of vertex information, offset attribute, scaling ratio, color information, material information, and side length information.

Step 20, combining a plurality of drawing objects with the same vertex information into an object class according to the vertex information of the drawing objects; the information of each object class comprises vertex information and a plurality of variable information, and the variable information is in one-to-one correspondence with a plurality of drawing objects in the object class;

vertex information of the drawing object, which is used for describing the graph shape information of the drawing object; the vertex information of the same-shaped rendering object is the same.

The drawing object includes vertex information and variable information, the variable information including at least one of an offset attribute, a scaling ratio, color information, material information, and side length information. In this way, information of the rendering objects is divided into vertex information and variable information, and the rendering objects of the same shape are merged into one object class by the vertex information, so that the information of each object class (information of the object class) includes one vertex information (that is, the vertex information of all the rendering objects of the same shape is merged into one) and a plurality of variable information (the number of the variable information is the same as the number of the merged rendering objects); thus, information for characterizing N rendering objects is converted from N vertex information and N variable information into one vertex information and N variable information.

Step 40, transmitting the information of the object class to a renderer;

the information of the object class is information contained in the merged object class; by merging the drawing objects into an object class, the information for representing the N drawing objects is converted into one vertex information and N variable information from the N vertex information and the N variable information; thus, by transmitting the information of the object class to the renderer, the transmission of the N pieces of vertex information and the N pieces of variable information is converted into the transmission of one piece of vertex information and the N pieces of variable information, thereby greatly reducing the amount of transmitted information.

Wherein the transmission is the information transmission from the JS code environment to the WebGL renderer.

And step 50, the renderer generates a rendered frame image according to the information of the object class.

Here, it should be noted that the webgl is a rendering engine of a browser standard, and the renderer in this step may be a webgl renderer. The Webgl rendering engine has great influence on the rendering efficiency of the Webgl rendering engine due to the design problem of the Webgl rendering engine, wherein the transmission of vertex information; that is, vertex information of different magnitudes needs to be transmitted, and the influence on the rendering efficiency of the rendering engine is not proportional to the magnitude of the vertex information, but increases exponentially.

Through the steps 10-50, the same vertex information is merged, so that the transmission frequency of the vertex information from JS to WebGL in the drawing (or rendering) process of the frame image can be reduced to the minimum (originally, the frequency of hundreds of thousands of orders is reduced to 10 orders), and the image rendering efficiency is greatly increased (the drawing efficiency is improved due to the minimization of the information transmission).

Optionally, as shown in fig. 2, in step 20, before merging a plurality of the drawing objects with the same vertex information into one object class according to the vertex information of the drawing object, the method further includes:

step 30, opening up a storage space, wherein the storage space is used for respectively storing the vertex information and the variable information;

the storage space may be created in advance, or may be created after the object classes are merged, and the storage space is created in the JS code environment (memory in the code environment).

It should be noted that, in the existing rendering method, each time a graph is drawn, a storage space is requested from a memory in a code environment, and each time a drawn graph is deleted, the storage space occupied by the graph is destroyed and recycled.

The storing of the vertex information and the variable information separately means that the vertex information and the variable information of the rendering object (object class) are stored separately.

It should be noted that, in the existing rendering method, the information of the drawing objects is stored together, and transmitted together; thus, once the data stored together changes, retransmission is required; in the step, the vertex information and the variable information are stored separately and transmitted separately; in this way, because the vertex information is not changed generally, the vertex information can be prevented from being retransmitted due to the change of the variable data, so that the transmission frequency of the vertex information of JS to WebGL in the drawing (or rendering) process of the frame image is further reduced, and the image rendering efficiency is increased.

Wherein the storage amount of the storage space is larger than the data amount of the drawing object. Therefore, the data updating operation at the later stage can be facilitated.

Optionally, as shown in fig. 3, the front-end image rendering method further includes:

step 60, after receiving an update instruction, a translation instruction or a zoom instruction of the frame image, acquiring update information according to the update instruction, the translation instruction or the zoom instruction;

the update instruction refers to an instruction generated by changing the variable information of each drawing object in the visible content (frame image), that is, an instruction for expressing the change of the variable information of each drawing object in the visible content (frame image); the translation instruction refers to an instruction generated by translation of the visible content (frame image), that is, an instruction for expressing translation of the visible content (frame image); the zoom instruction refers to an instruction generated by zooming out or zooming in the visible content (frame image), that is, an instruction for expressing the zooming out or zooming in of the visible content (frame image); for each drawing object in the frame image to be rendered, translating the frame image means performing the same translation operation on each drawing object in the frame image, and scaling the frame image means performing the same reduction or enlargement operation on each drawing object in the frame image.

Wherein the viewport matrix is a matrix for describing three-dimensional transformation of the three-dimensional information of the graph from data to a specific presentation process. In this way, the rendered object can be positioned (in conjunction with vertex information) by the offset attribute, zoom ratio, and viewport matrix.

It should be noted that, for each rendered object in the frame image, the same operation will be generated due to the panning and zooming operations, which are reflected in the information of the object class, that is, the same operation can be described only by changing the viewport matrix; that is, when the information of the object class further includes the viewport matrix, if the frame image is translated or zoomed, the viewport matrix in the information of the object class only needs to be updated.

In the prior art, when a user processes a view (i.e. zooming and moving of visible content), the position attributes and the zoom ratio attributes of all drawing objects in a picture need to be modified in batch, and then redrawing needs to be performed, so that a large amount of data operation needs to be performed; in this step, the viewport matrix is stored separately from the vertex information and the variable information, and transmitted separately; in this way, for the panning or zooming operation, since the vertex information and the variable information are not generally changed, the vertex information and the variable information can be prevented from being retransmitted due to the change of the viewport matrix, so that the transmission data of JS to WebGL during the drawing (or rendering) of the frame image is further reduced, and the image rendering efficiency is increased.

The obtained updating information is different according to different received instructions; after the update instruction of the frame image is received, the acquired update information is used for updating variable information; after receiving the panning or zooming instruction of the frame image, the acquired update information is used to update a viewport matrix.

Step 80, transmitting the updating information to a renderer;

the update information is information which is changed compared with the information of the original object class; only the update information is transmitted, that is, only the information of the object class that has changed is transmitted, and the information of the object class that has not changed is not transmitted.

In the conventional rendering method, once the variable information or other information of the drawing object is changed, vertex information and variable information of the whole drawing object (and other information of the drawing object except the vertex information and the variable information) are retransmitted, which requires a large amount of data to be transmitted, resulting in frame dropping and a pause phenomenon during multi-frame processing.

And step 90, the renderer generates a rendered frame image according to the updating information.

In addition, by adding the viewport matrix attribute, translation or scaling of visible content (frame image) can be described, so that an updated viewport matrix is transmitted independently, that is, data transmission operation on a translation instruction or a scaling instruction can be completed, the data volume needing to be transmitted is greatly reduced, the transmission data from JS to WebGL in the drawing (or rendering) process of the frame image is further reduced, and the image rendering efficiency is increased.

Optionally, as shown in fig. 4, the step 80 of transmitting the update information to the renderer further includes:

and step 70, updating the information of the object class stored in the storage space according to the updating information.

When the update information is used for updating variable information, updating the variable information in the information of the object class according to the update information; and when the updating information is used for updating the viewport matrix, updating the viewport matrix in the information of the object class according to the updating information.

When the variable information is updated, only one of the variable information (offset attribute, scaling ratio, color information, material information, and side length information) may be updated according to actual operation requirements, or the entire variable information may be updated.

By the front-end image rendering method, 60fps drawing of a hundred thousand-level 2D graphic object can be finally realized in a computer with 8GB memory and 1.5GB video memory centralized display, and frame dropping can not occur when the viewport is zoomed and moved.

The embodiment of the present disclosure provides a front-end image rendering device, which is used for executing the front-end image rendering method according to the above contents of the present disclosure, and the front-end image rendering device is described in detail below.

As shown in fig. 5, a front-end image rendering apparatus includes:

an obtaining unit 1, configured to obtain a frame image to be rendered, and split the frame image into drawing objects with a minimum granularity;

a merging unit 2, configured to merge a plurality of the drawing objects with the same vertex information into an object class according to the vertex information of the drawing objects; the information of each object class comprises vertex information and a plurality of variable information, and the variable information is in one-to-one correspondence with a plurality of drawing objects in the object class.

A transmission unit 3, configured to transmit the information of the object class to a renderer;

and the renderer 4 is used for generating a rendered frame image according to the information of the object class.

Optionally, as shown in fig. 6, the front-end image rendering apparatus further includes:

and the storage unit 5 is used for opening up storage spaces, and the storage spaces are used for respectively storing the vertex information and the variable information.

Optionally, the storage amount of the storage space is greater than the data amount of the drawing object.

Optionally, the obtaining unit 1 is further configured to: after an updating instruction, a translation instruction or a zooming instruction of a frame image is received, acquiring updating information according to the updating instruction, the translation instruction or the zooming instruction;

the transmission unit 3 is further configured to: transmitting the update information to a renderer;

and the renderer 4 generates a rendered frame image according to the update information.

Optionally, the storage unit 5 is further configured to: and updating the information of the object class stored in the storage space according to the updating information.

Optionally, the obtaining unit 1 is further configured to: after receiving the panning or zooming instruction of the frame image, the acquired update information is used to update a viewport matrix.

Optionally, the storage unit 5 is further configured to: and when the updating information is used for updating the viewport matrix, updating the viewport matrix in the information of the object class according to the updating information.

Having described the internal functions and structure of the front-end image rendering apparatus as described above, as shown in fig. 7, in practice, the front-end image rendering apparatus may be implemented as an electronic device including: the image rendering device comprises a processor and a memory, wherein the memory stores a control program, and the control program realizes the front-end image rendering method when being executed by the processor.

Fig. 8 is a block diagram illustrating another electronic device according to an embodiment of the present invention. The electronic device 12 shown in fig. 8 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present application.

As shown in fig. 8, the electronic device 12 may be implemented in the form of a general-purpose electronic device. The components of electronic device 12 may include, but are not limited to: one or more processors or processing units 16, a system memory 28, and a bus 18 that couples various system components including the system memory 28 and the processing unit 16.

Bus 18 represents one or more of any of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, and a processor or local bus using any of a variety of bus architectures. These architectures include, but are not limited to, Industry Standard Architecture (ISA) bus, Micro Channel Architecture (MAC) bus, enhanced ISA bus, Video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect (PCI) bus, to name a few.

Electronic device 12 typically includes a variety of computer system readable media. Such media may be any available media that is accessible by electronic device 12 and includes both volatile and nonvolatile media, removable and non-removable media.

Memory 28 may include computer system readable media in the form of volatile Memory, such as Random Access Memory (RAM) 30 and/or cache Memory 32. The electronic device 12 may further include other removable/non-removable, volatile/nonvolatile computer-readable storage media. By way of example only, storage system 34 may be used to read from and write to non-removable, nonvolatile magnetic media (not shown, but commonly referred to as a "hard drive"). Although not shown in FIG. 8, a disk drive for reading from and writing to a removable, nonvolatile magnetic disk (e.g., a "floppy disk") and an optical disk drive for reading from or writing to a removable, nonvolatile optical disk (e.g., a Compact disk Read Only memory (CD-ROM), a Digital versatile disk Read Only memory (DVD-ROM), or other optical media) may be provided. In these cases, each drive may be connected to bus 18 by one or more data media interfaces. Memory 28 may include at least one program product having a set (e.g., at least one) of program modules that are configured to carry out the functions of embodiments of the application.

A program/utility 40 having a set (at least one) of program modules 42 may be stored, for example, in memory 28, such program modules 42 including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each of which examples or some combination thereof may comprise an implementation of a network environment. Program modules 42 generally perform the functions and/or methodologies of the embodiments described herein.

Electronic device 12 may also communicate with one or more external devices 14 (e.g., keyboard, pointing device, display 24, etc.), with one or more devices that enable a user to interact with the computer system/server 12, and/or with any devices (e.g., network card, modem, etc.) that enable the computer system/server 12 to communicate with one or more other electronic devices. Such communication may be through an input/output (I/O) interface 22. Also, the electronic device 12 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public Network such as the Internet) via the Network adapter 20. As shown, the network adapter 20 communicates with other modules of the electronic device 12 via the bus 18. It is noted that although not shown, other hardware and/or software modules may be used in conjunction with electronic device 12, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, among others.

The processing unit 16 executes various functional applications and data processing, for example, implementing the methods mentioned in the foregoing embodiments, by executing programs stored in the system memory 28.

The electronic device of the invention can be a server or a terminal device with limited computing power, and the lightweight network structure of the invention is particularly suitable for the latter. The base body implementation of the terminal device includes but is not limited to: intelligent mobile communication terminal, unmanned aerial vehicle, robot, portable image processing equipment, security protection equipment etc.. The embodiment of the disclosure provides a computer-readable storage medium, which stores instructions, and when the instructions are loaded and executed by a processor, the instructions implement the front-end image rendering method.

The technical solution of the embodiment of the present invention essentially or partially contributes to the prior art, or all or part of the technical solution may be embodied in the form of a software product, which is stored in a storage medium and includes several instructions to enable a computer device (which may be a personal computer, a server, or a network device, etc.) or a processor (processor) to execute all or part of the steps S of the method according to the embodiment of the present invention. And the aforementioned storage medium includes: various media capable of storing program codes, such as a U disk, a removable hard disk, a ROM, a RAM, a magnetic disk, or an optical disk.

Although the present disclosure has been described above, the scope of the present disclosure is not limited thereto. Various changes and modifications may be effected therein by one of ordinary skill in the pertinent art without departing from the spirit and scope of the present disclosure, and these changes and modifications are intended to be within the scope of the present disclosure.

Claims

1. A front-end image rendering method, comprising:

transmitting the information of the object class to a renderer;

2. The front-end image rendering method according to claim 1, wherein the drawing object includes vertex information and variable information, the variable information including at least one of an offset attribute, a scaling ratio, color information, material information, and side length information.

3. The front-end image rendering method according to claim 1, wherein before said merging, into one object class, a plurality of said drawing objects of the same vertex information according to the vertex information of said drawing objects, said method further comprises:

and opening up a storage space, wherein the storage space is used for storing the vertex information and the variable information respectively.

4. The front-end image rendering method according to any one of claims 1 to 3, further comprising:

transmitting the update information to a renderer;

5. The front-end image rendering method of claim 4, wherein the transmitting the update information to a renderer further comprises:

6. The front-end image rendering method of claim 4, wherein the information of the object class further comprises a viewport matrix, and the viewport matrix is stored independently of the vertex information and the variable information.

7. The front-end image rendering method according to claim 6, wherein, in the obtaining of the update information according to the update instruction, the pan instruction or the zoom instruction, after receiving the pan instruction or the zoom instruction of the frame image, the obtained update information is used for updating the viewport matrix.

8. A front-end image rendering apparatus, comprising:

the device comprises an acquisition unit (1) for acquiring a frame image to be rendered and splitting the frame image into drawing objects with minimum granularity;

a merging unit (2) for merging a plurality of the drawing objects of the same vertex information into one object class according to the vertex information of the drawing objects; the information of each object class comprises vertex information and a plurality of variable information, and the variable information is in one-to-one correspondence with a plurality of drawing objects in the object class;

a transmission unit (3) for transmitting the information of the object class to a renderer;

and the renderer (4) is used for generating a rendered frame image according to the information of the object class.

9. An electronic device comprising a processor and a memory, wherein the memory stores a control program which, when executed by the processor, implements a front-end image rendering method as claimed in any one of claims 1 to 7.

10. A computer readable storage medium storing instructions which, when loaded and executed by a processor, carry out a front-end image rendering method according to any one of claims 1 to 7.