WO2019238145A1

WO2019238145A1 - Webgl-based graphics rendering method, apparatus and system

Info

Publication number: WO2019238145A1
Application number: PCT/CN2019/100605
Authority: WO
Inventors: 谢成鸿
Original assignee: 搜游网络科技(北京)有限公司
Priority date: 2018-06-15
Filing date: 2019-08-14
Publication date: 2019-12-19
Also published as: CN110609677A

Abstract

Disclosed are a WebGL-based graphics rendering method, apparatus and system. The method comprises: a server receives a rendering request, for rendering target graphics in a JS project, sent by a terminal device via a network; the server analyses the rendering request, executes JS project code corresponding to the rendering request, and forms a WebGL-based graphics rendering rule command set; the server sends the graphics rendering rule command set in the form of a command flow to the terminal device for execution, in order to render the target graphics. The present technical solution solves the problem of low graphics rendering efficiency, increases compatibility, and expands the application range of JS projects.

Description

WebGL-based graphics drawing method, device and system

Technical field

The present application relates to the technical field of computer graphics rendering, and in particular, to a WebGL-based graphics rendering method, device, and system.

Background technique

In application scenarios such as online games and animation, terminal devices need to perform a large number of multi-dimensional graphics (such as 2D graphics or 3D graphics) drawing work. The speed of drawing graphics determines to a large extent the response speed of various applications and programs on the terminal device to user operations, which in turn affects the user usage of the application or program. In order to improve the efficiency of graphics drawing, without relying on the browser as a carrier, a specially developed runtime (RunTime) is generally used on the terminal device. As shown in Figure 1, the core components of the runtime include the JS parsing engine and the C ++ engine. Framework, the former is used to identify and parse the instruction set in a JS project, and the latter is used to call encapsulated C language functions to perform instructions. When the runner runs a JS project formed by JS code (code written in the JavaScript language), the JS parsing engine of the runner parses the instruction set in the JS code project, and then "parses" each parsed instruction in a "stack" manner. It is pushed to the C ++ engine framework for execution, and then rendered by OpenGLES, and finally completes the drawing of the predetermined graphics.

In most cases, the above method can successfully complete the graphics drawing work on the terminal device. However, based on the computing capabilities of the terminal device, the overall operating efficiency of the JS project is low and the resource consumption is large, resulting in short-term heating of the terminal device. Too large, especially when the terminal device is an iOS device, because the JIT function is disabled, the JavaScript performance of the iOS device is even lower. In addition, due to the differences in different terminal devices, the operating efficiency of JS projects is different, which restricts the widespread application of JS projects.

Summary of the Invention

The embodiments of the present application provide a method, a device, and a system for drawing graphics based on WebGL, so as to improve or improve the efficiency of drawing graphics, reduce heat generation, and promote the widespread application of JS projects.

In one aspect, the WebGL-based graphic drawing method provided by the embodiment of the present application includes:

The server receives a drawing request for drawing a target graphic in a JS project sent by a terminal device through a network;

The server parses the drawing request, executes a JS project code corresponding to the drawing request, and forms a WebGL-based graphic drawing rule instruction set;

The server sends the graphic drawing rule instruction set to the terminal device for execution in the form of an instruction stream through a network to implement drawing of a target graphic.

On the other hand, the embodiment of the present application also provides another method for drawing graphics based on WebGL. The method includes:

The terminal device sends a drawing request for drawing the target graphic in the JS project to the server through the network;

Receiving, by the terminal device, a WebGL-based graphic drawing rule instruction set formed by the server in the form of an instruction stream through a network, which parses the drawing request and executes a JS project code corresponding to the drawing request;

The terminal device executes the instruction flow to achieve drawing of a target graphic.

In another aspect, an embodiment of the present application provides a WebGL-based graphic drawing device, which is located on a server side and is characterized by including a request receiving unit, a parsing execution unit, and an instruction sending unit, where:

A request receiving unit, configured to receive a drawing request for drawing a target graphic in a JS project sent by a terminal device through a network;

A parsing execution unit, configured to parse the drawing request, execute a JS project code corresponding to the drawing request, and form a WebGL-based graphic drawing rule instruction set;

An instruction sending unit is configured to send the graphic drawing rule instruction set to the terminal device for execution through a network in order to implement drawing of a target graphic.

In another aspect, the embodiment of the present application further provides another WebGL-based graphic drawing device, which is located on the terminal device side, and is characterized by including a request sending unit, an instruction receiving unit, and an instruction execution unit, where:

A request sending unit, configured to send a drawing request for drawing a target graphic in a JS project to a server through a network;

An instruction receiving unit, configured to receive a WebGL-based graphic drawing rule instruction set formed by the server in the form of an instruction stream through a network, which parses the drawing request and executes a JS project code corresponding to the drawing request;

An instruction execution unit is configured to execute the instruction flow to achieve drawing of a target graphic.

In another aspect, a WebGL-based graphics rendering system provided by an embodiment of the present application includes: the system includes a server and a terminal device,

The server includes a request receiving unit, a parsing execution unit, and an instruction sending unit, where:

An instruction sending unit, configured to send the graphics drawing rule instruction set to the terminal device for execution through a network in order to implement drawing of a target graphic;

The terminal device includes a request sending unit, an instruction receiving unit, and an instruction execution unit, wherein:

In another aspect, an embodiment of the present application provides another WebGL-based graphics rendering system, including: a memory, a processor, and a computer program stored in the memory and executable on the processor. The computer program is The processor executes the steps of the method as described above when executed.

In another aspect, an embodiment of the present application provides a computer-readable storage medium, where the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, implements the steps of the method described above.

The at least one of the above technical solutions adopted in the embodiments of the present application can achieve the following beneficial effects:

In the technical solution provided in the embodiment of the present application, after the server receives a drawing request for drawing a target graphic in a JS project sent by a terminal device, the server parses the drawing request, executes a JS project code corresponding to the drawing request, and forms a WebGL-based The graphics drawing rule instruction set is then sent to the terminal device for execution to complete the drawing of the target graphics. Through this technical solution, because the WebGL-based graphics drawing rule instruction set is formed on the server side, the server has strong computing capabilities, which avoids overloading the terminal device and reduces its heat generation, which is beneficial to improving the user experience and graphics. Drawing efficiency. In addition, because the graphics drawing rule instructions are formed on the server, the underlying C ++ engine framework of the terminal device is only responsible for the "no difference" execution, which smoothes the differences between different terminal devices and facilitates the promotion and application of the JS project on various terminal devices. .

BRIEF DESCRIPTION OF THE DRAWINGS

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

Figure 1 is a schematic diagram of the framework structure of the Web engine end and the runner;

FIG. 2 is a schematic flowchart of an embodiment of a graphic drawing method based on WebGL of the present application; FIG.

3 is a signaling interaction diagram of an example of a WebGL-based graphic drawing method of the present application;

FIG. 4 is a schematic structural diagram of an embodiment of a graphic rendering device based on WebGL of the present application; FIG.

FIG. 5 is a schematic structural diagram of another embodiment of a WebGL-based graphic drawing device;

FIG. 6 is a schematic structural diagram of an embodiment of a graphic rendering system based on WebGL of the present application.

detailed description

Before the various embodiments of the present application are fully introduced, in order to facilitate understanding, some basic backgrounds are introduced first. With the development of computer technology, people's response speed to computer information processing is getting higher and higher, especially in some real-time application scenarios. For example, common online battle-type real-time online games, these games usually involve the rapid transformation of a large number of target object actions, scenes, characters, ability values, weapons and equipment, etc. In order to better present visual effects, they need to be played on terminal devices. The "hard task" of drawing graphics, the speed of drawing graphics has become a key bottleneck for attracting users of this type of software. The extensive and in-depth development of the HTML5 protocol in network display has put forward higher requirements for the appearance of network Web screens. In the early days, people realized the rich screen display through the standard drawing API provided by canvas. However, the effect of this method is limited, and the WebGL (English: Web) Graphics interface protocol has gradually appeared in the future. This interface protocol can directly control the graphics card GPU and provide hardware accelerated rendering for HTML5Canvas, which greatly improves the 2D or 3D. Display efficiency and display effect.

The WebGL interface is similar to the HTML5 protocol. On the project application layer, it is developed using JavaScript language (hereinafter referred to as JS language). When the JS project is imported into the runner when the web engine side of the terminal device (where the JS project downloaded from the server is located) is run, it will be parsed by the JS parser in the runner, and the parsed instructions will be executed according to the execution order Push the stack to the C ++ engine framework for execution. As mentioned earlier, this operation mode makes the JS project run at a low efficiency and high heat generation of terminal equipment. In addition, its compatibility is not strong, which restricts the promotion and application of JS projects on different terminal equipment.

In order to solve the foregoing problem, an embodiment of the present application provides a WebGL-based graphic drawing method. Referring to FIG. 2, the embodiment method shown in the figure includes: S201: The server receives a target graphic in a JS project sent by a terminal device through a network. Make a drawing request for drawing; S202: the server parses the drawing request, executes a JS item code corresponding to the drawing request, and forms a WebGL-based graphic drawing rule instruction set; S203: the server sends the graphic drawing rule instruction set through the network Sending it to the terminal device for execution in the form of an instruction stream to achieve drawing of a target graphic. In order to better understand this technical solution, based on the foregoing background introduction, some important information in this solution is explained:

The execution subject involved in each step in the above technical solution is a "server", and the terminal device and the runner on the terminal device are mentioned in the background art section, and a preliminary introduction is made here to reflect the similarities and differences between these concepts. As shown in Figure 1, in general, running a JS project is performed locally on the terminal device. The local terminal device includes the Web engine and the runner. The runner usually includes three parts: the first is JS parsing engine part, for example, V8 and JSC with this function. Although the code obtained from the Web engine side contains some content of the WebGL interface, it is still JS code. It needs to be parsed and identified by the JS parsing engine and converted into executable code that can be run by other parts of the runner. The second is the C ++ engine framework part. This part is the "main beam" of the runner. After the code is parsed by the JS parsing engine, this part will complete a large number of substantial operations. Because it is developed using the lower-level C ++ language, its operating efficiency is higher. Third, rendering The drawing part, such as OpenGLES, calls the OpenGLES function through C ++ code to complete the graphics drawing and submit the drawing result. In the embodiment of the present application, since some functions of the "runner" in the general knowledge have been creatively transferred to the "server" for implementation, if the concept of the "runner" is mentioned in the embodiment of the present application, It should be noted that this runner cannot be simply regarded as the same runner as in the prior art. To be precise, the runner in this embodiment is a modified runner and cooperates with the server to complete the purpose of the present invention. New runner. Of course, it is open to whether or not it is called "runner". In fact, with the above-mentioned capabilities, the name of "runner" does not constitute a limitation on understanding and application.

By transforming the traditional runner to obtain the technical solution of the present application, a brand new platform mode (which can be called a server mode) is actually set up. In this mode, the terminal device initiates a graphic drawing request to the server through the network. The server After receiving this request, it parses it, determines the JS project or the code segment in the JS project specified by the request, and then executes these project codes to form a WebGL-based graphic drawing rule instruction set. "WebGL-based" indicates the relationship between graphics drawing rule instructions and WebGL, which can be formed standard instructions based on the WebGL protocol, or extended instructions set by the user or a terminal according to the standard instructions of the WebGL protocol. The "correspondence" relationship between the drawing request and the JS item code is mentioned here. In fact, since the JS item is placed on the server side in the mode of the embodiment of the present application, the server side can contain an unlimited number of JS items. When running a JS project, the server should be informed of the address of the JS project (in whole or in part), so that the server can find the project for subsequent operations. From this perspective, the “correspondence” relationship can be understood according to different stages and scenarios: For the initial startup project phase, the drawing request should at least include the URL address of the overall JS project on the server. In this way, “the execution corresponds to the drawing request "JS project code" is actually to find and execute the JS project code corresponding to the URL address. For the project running phase, the user may perform certain operations on the terminal device's application client corresponding to the JS project, and then perform these operations. The result information is sent to the server through the drawing request. In this way, "executing the JS item code corresponding to the drawing request" is actually executing the piece of JS item code that can respond to user operation result information. Of course, this division is only an ideal state. In actual operation, even after starting the project, you may face "hanging up" and may not need to receive user operation result information and still need to run the JS project code segment. Therefore, the above two The situation may be mixed. In a word, the server forms the graphics drawing rule instruction set in response to the drawing request, and the information in the drawing request informs or triggers how the server should form the graphics drawing rule instruction set.

What needs to be explained here is that the server can be used to describe the technical solution of this application. Conversely, the technical solution of this application can also be better described from the perspective of the terminal device, that is, the terminal device sends the JS project to the server through the network. A drawing request for drawing a target graphic in the drawing; a terminal device receives a WebGL-based drawing of a drawing formed by a JS project code corresponding to the drawing request by parsing the drawing request and executing the drawing request sent by the server through a network A rule instruction set; then, the terminal device executes the instruction flow to achieve drawing of a target graphic.

In the above technical solution, the term "graphics" that is used for drawing graphics is understood in this embodiment from a broader perspective that conforms to industry habits. Generally speaking, "graphics" may be limited to some geometrical figures, but in fact, in this embodiment, not only regular graphics, images, etc. may be included. For example, drawing a graphic may be drawing a triangle, quadrilateral, etc. on the canvas. Moreover, it can also perform operations such as coloring and covering a completed figure. For example, coloring a triangle that has been drawn at a certain time. This process of coloring a triangle can still be independently called Graphic drawing. In other embodiments, it may even include processing for some non-graphics. For example, arranging countless discrete points on a canvas, although it may not eventually constitute a standard figure, this process can still be called graphics drawing. That is to say, the graphic drawing in the embodiment of the present application may include a specific graphic drawing process, or may perform a certain operation on an existing graphic or non-graphic. In a word, the graphic drawing process is a process of performing an operation on a target object to be displayed on a screen or a target object associated with an object displayed on a screen.

The term "graphic drawing rule instruction" mentioned in the above technical solution is not called "graphic drawing instruction" here, the main reason is that in this embodiment, the JS project can "make rules", and the runner side specifically "implements the rules" (Running rules) ", and then achieve less or no calculation at the JS code level, and leave a large amount of low-level calculation work to the runner to complete the graphics drawing performance from the perspective of the runner. In other words, the graphics drawing rule instruction can be a special "instruction" different from the conventional graphics drawing instruction, which is at least responsible for telling the runner "how to do it", rather than "in person" by itself. Specifically, in a graphics drawing rule instruction, the operation rule determined by the instruction and the data involved in the operation are specified. The former is called an operation type in the following embodiments, and the latter is called an operation object. When the runner obtains this information, After that, the operation object will be operated according to the requirements of the operation type. An example is as follows:

setGlobalValue (globalValueID, data, operateType)

In this instruction, the parameter "operateType" indicates the type of operation to be performed by this instruction. For example, it can be operations such as addition, subtraction, and assignment between data. The parameters "globalValueID" and "data" are the operation objects, and "globalValueID" It is an operation object specified in the form of a data index (which will be described in detail later), and "data" may be the operation data itself explicitly specified by the instruction. In this instruction, it is specified that the "globalValueID" and "data" are to be operated according to the operation type indicated by "operateType", that is, a drawing rule instruction for a graph, not the function itself (for example, setGlobalValue) is the operation type.

Although the "graphic drawing rule instruction" has been explained in text and examples, it is therefore an error to understand the "graphic drawing rule instruction" as not being a specific graphic drawing instruction. That is, in some cases, the graphic drawing rule instruction can be directly embodied as a specific graphic drawing instruction, that is, in the terminology used in this application, the graphic drawing rule instruction includes both the "graphics" in the form of a specified rule. “Drawing rule instructions” also includes graphics drawing instructions in the form of graphics drawing instructions directly, so it needs to be considered in conjunction with specific application scenarios. For example, when a clear operation is performed on data in a data area, the graphics drawing rule instruction can be directly expressed as a clear instruction. Therefore, when understanding the concept of "graphic drawing rule instructions", the emphasis is not on whether the rule instructions are embodied as a rule instruction or a specific instruction, but on the possibility of separating the formulation of rules from the implementation rules.

It should also be noted that, in this embodiment, based on the description needs, the "graphic drawing rule instruction" may be directly used in some places, while in other places, the "graphic drawing rule instruction and predetermined operations as its parameters may be used" "Type and operand", that is, the concept sometimes refers to the whole including its parameters, sometimes it refers to the part that does not include its parameters and only has a regular part. When the concept is understood in actual application, it is necessary to Comprehensive understanding in context.

After the graphic drawing rule instructions are introduced clearly above, what is associated with it is the concept of "graphic drawing rule instruction set". Following this concept, the following two aspects are emphasized: one is the content of the instruction set of graphics drawing rules; the other is the form of the instruction set of graphics drawing rules.

As far as the content of the graphics drawing rule instruction set is concerned, the graphics drawing rule instruction set is composed of graphics drawing rule instructions and usually means that there are at least two instructions. As will be mentioned later, in one embodiment, these instructions can be divided into two types: one is an instruction that operates on a register; and one is an instruction that does not operate on a register. According to this classification of instructions using "registers" as a standard, three types of "graphic drawing rule instruction sets" will be generated: one is that all instructions in the instruction set operate on registers; the other is that in the instruction set All are instructions that do not operate on registers; the third is that the instruction set contains both instructions that operate on registers and instructions that do not operate on registers. This application focuses on the first type and the third type. Since the two types of instruction sets contain at least one instruction to operate on a register, the technical effects of this application can be demonstrated "with ease" (more details will be described later).

As far as the form of the graphics drawing rule instruction set is concerned, the graphics drawing rule instruction set may be only the “dry” instructions themselves, or may include instructions including the instructions and the parameters corresponding to the instructions. In the former case, a possible situation is that some instructions have no operation object or operation type, and are just a non-functional instruction that is inserted to meet the needs of the current execution; the other may be the parameter corresponding to the instruction (Such as the operation object or operation type) is placed outside the instruction set, but contains instructions sent to the terminal device. That is to say, based on different forms of graphics drawing rule instructions and different treatment methods for the parameters of graphics drawing rule instructions, the existence form of the graphics drawing rule instruction set may be a true "instruction" set that contains only the graphics drawing instruction itself (first This form of existence) may also be a complete type of "instruction" set (the second form of existence) containing a drawing rule instruction and parameters corresponding to the instruction. Of course, it is also possible to include both the first form of existence and the second form of existence in an instruction set, which depends on the preset settings, as long as it does not prevent subsequent runners from drawing target graphics according to the instruction set of graphics drawing rules. can.

In describing the concept of the graphics drawing rule instruction set, as mentioned earlier, it involves "registers". Here we introduce the registers. In the embodiment of the present application, a register is operated, so that the register becomes an operation object. Operation data is stored in the register, and operations on the data in the register are implemented by operating the register. Registers in this application are temporary storage areas existing in memory. The "temporary" here is relative to the length of time that the memory itself exists. When an application (or program code segment) is running, a computing device usually needs to be opened. The memory area is used to store data and execute instructions. After the application finishes running (for example, the user closes or exits the application), this section of memory will be released (for new applications or code segments), and the entire area occupied by the memory During this period, the storage area where the data always exists can be called a "permanent" storage area, for example, a global data area set as required. The register in this application indicates that the data stored on it may be erased and re-stored at any time, so that it cannot exist permanently, so it is a temporary storage area. For the implementation of a technical solution, the number of registers required may be more or less, depending on the need to run the corresponding program code and implement the corresponding function itself. Too many preset registers may cause waste. If the preset number of registers is too small, it may be "unused" and the best technical effect of the mechanism of this application cannot be fully exerted.

In the above technical solution, it is mentioned that the terminal device draws the target graphics according to the graphics drawing rule instruction set in the form of an instruction stream. It needs to be explained here that the completion of the operation on the operation object by the terminal device does not necessarily mean that the drawing of the target graphic is completed. In fact, in most cases, a terminal device can only perform operations on the operation object to complete its core content. In addition, it may also have some other operations, such as the OpenGLES function to interface with the GPU. , Rendering, etc. (see the "OpenGLES Functions" section shown in Figure 1). However, the focus of this embodiment is to highlight the core differences between the new runner on the terminal device and the existing technology, and to briefly or even omit other operations. Those skilled in the art must read this step of this embodiment without fail. Double check also.

Through the above description of the technical solution, deviations in understanding of the embodiment should be eliminated. Compared with the prior art, this embodiment is a breakthrough invention, and its technical effects show the following significant features:

The first is to make full use of graphics card hardware to achieve drawing and display acceleration. The target object of this embodiment is a project formed by calling the WebGL interface from JS code. Since WebGL is developed based on OpenGLES, GPU instructions can be directly operated, and hardware acceleration can be achieved through a graphics card, which can greatly improve the efficiency of graphics drawing and display effects.

The second is to implement the "WebGL +" concept and successfully simulate canvas. The project running in the C ++ engine framework of the runner is no longer a canvas interface called through the JS language, but has been changed to call the WebGL interface and WebGLl extended function interface in the JS language. The underlying nature of WebGL is consistent with the C ++ engine framework in the runner. , Speeding up operation efficiency.

Third, the "complementary advantages" of the server and terminal devices can be achieved, and the overall performance can be significantly improved. On the one hand, after receiving the drawing request, the terminal device does not directly respond to the request, so that a large amount of computing processing work is transferred from the terminal device to the server, thereby fully utilizing the "computing advantage" of the server. On the other hand, the terminal device is no longer burdened with too many computing tasks, and the calculation rules can be specified at the upper layer, which will not cause a large amount of heat generation, smoothing the individual differences caused by different terminal devices running JS projects, thereby increasing the terminal device. The flexibility and extensibility of the terminal fully utilizes the "inclusive advantage" of the terminal equipment side for different engine vendors. Based on the “clear division of labor” between the server and the terminal, and “recovering the weaknesses of each other”, it greatly improves the graphics rendering performance based on WebGL.

In the above embodiment, the server receives the graphic drawing request sent from the terminal device through the network. In the request, as described above, the operation result of the user of the terminal device on the application (client) corresponding to the JS project is usually included. information. As shown in FIG. 3, after the user of the terminal device starts the application, the user operates the application, and the operation result information formed by the operation will be sent to the server, so that the server can form a WebGL based on the operation result information in the drawing request. Graphic drawing rule instruction set. The operation result information here may be operation result information of a gravity sensor, a touch (TOUCH) event, user account information, user status information, and the like. The operation here may be a direct operation in some cases, for example, clicking a button on the application client corresponding to a JS project, setting some parameters, etc. In other cases, it may also be an indirect operation, such as, The user shakes the entire terminal device, which causes the gravity sensor to capture different attitude information, which is also considered as a result of user operations.

In the foregoing embodiment, it was mentioned that the terminal device needs to send a graphic drawing request to the server through the network, and at the same time, the server needs to send the graphic drawing rule instruction set to the terminal device through the network after parsing the drawing request. Because data needs to be sent and received over the network, usually, the speed of data transmission will have a greater impact on the speed of drawing the target graphics. In the embodiment of the present application, because the computing process is moved from the terminal device to the server, although the computing advantage of the server is used to help improve the efficiency of graphics drawing, in the graphics drawing process, in terms of user experience, it is not only necessary to have Stronger calculations and faster calculation speeds should also have faster transmission speeds. For this reason, in other embodiments, there may be some requirements on the transmission speed of the network (that is, the duration of data transmission and reception). For example, a terminal device is required to send a drawing request to draw the target graphics in the JS project through the network. The length of time is less than or equal to a predetermined time, and the time required for the server to send graphics drawing rule instructions to the terminal device in the form of an instruction stream through the network is less than or equal to another predetermined time. The length of these two periods can be configured. The principle of configuration can be determined according to the operation requirements of the JS project by the terminal device. If the project is an online game with high real-time requirements, usually its users have high expectations for time (that is, the feedback speed after operation). In this case, the network speed should be fast enough and the scheduled time will be Set it more briefly. If the users of this project are not particularly sensitive to time, but are more concerned about the clarity of the picture, you can require that the network speed is not particularly slow. Of course, with the development of communication technology, it is undeniable that the network speed is getting faster and faster. In this case, for example, the network where the terminal device and the server are located is required to be a 5G network, and the transmission speed of the 5G network is usually high. For traditional 2G, 3G, 4G and other networks. Of course, in the 5G network environment, due to various factors, it may not necessarily be faster, but in order to implement the technical solution of this application, it may be required that during the implementation of this technical solution, the network transmission speed is greater than or Keep on the average speed of 5G network. From the perspective of the effect of the technical solution of this application, the faster the network speed required by this application is, the better, which not only utilizes the powerful computing power of the server, but also does not affect the feedback speed of the JS project to the user, thereby greatly improving the user experience. .

In an embodiment of the present application, the graphics drawing rule instruction set includes at least one instruction for operating a register. As mentioned before, this will make the graphics drawing rule instruction set divided into three categories: one is the instruction set that contains instructions that operate on registers; the other is the instruction set that does not include operations on registers; The three types are instruction sets that mix the above two instructions. In fact, by introducing the concept of registers, at least the following technical effects can be achieved: First, it can support judgmental statements and improve code reuse. Because the graphics rule instruction set contains instructions for register operations, this type of instructions can support judgment statements and operate on registers at the assembly language level, so that the instructions can be pushed directly to the runner by pushing the stack (that is, in the form of instruction streams). Partial execution of the C ++ framework. During the specific execution, whether to jump to the statement is determined according to the operation of the register, so that the branch of the judgment statement is not pushed separately, which greatly improves code reuse and is beneficial to improving graphics drawing. s efficiency. The second is to support more complicated scene applications. In the prior art, due to the fixed mode of executing code, there is a lack of flexibility. In the embodiment of the present application, because there are instructions for operating the register, the register serves as a temporary data storage place and can store intermediate data in different data calculation processes. Multiple registers can be used to operate on multiple data at the same time, so when facing complex application scenarios, it has greater flexibility and adaptability. These technical effects also enhance the scalability of the terminal device (runner) from another aspect.

Based on this, the following describes the further optimization technical solutions from two major directions, that is, when the graphics drawing rule instruction is an instruction to operate on a register, and when the graphics drawing rule instruction is to operate on a register The case of instructions other than instructions will be described from the latter direction first.

In the foregoing embodiment, when the graphics drawing rule instruction is an instruction other than an instruction to operate a register, although the operation object can be directly reflected in the graphics drawing request, this will make the graphics drawing request “bloated”, especially When the operation object is represented by "large volume and complex structure" data, it is even more "overwhelmed", and when the graphics drawing rule instructions need to be modified, the operation object needs to be re-designated, which adds unnecessary overhead to the system. To this end, a mechanism for separating graphics drawing rule instructions from its operating objects can be adopted, that is, the index of the operating object is included in the graphics drawing request, and the data corresponding to the index is performed in the data storage area temporarily or permanently opened in the runner Storage, so that when changing (increasing or adjusting) the graphics drawing rule instruction, as long as the index of the operation object does not change, the instruction does not change, and only the data in the data storage area needs to be modified. The specific method is: specify the index of the operation object in the graphics drawing request, and the runner obtains the corresponding specific operation data from the data area according to the operation object index, and then the operator operates the operation data according to the predetermined operation type. Then complete graphics drawing. Take the following examples to illustrate:

Assume that the graphics drawing request contains the following:

SetValueByShareData (offset, operateType)

In this content, "SetValueByShareData" is a graphic drawing rule instruction, and "offset" and "operateType" are parameters of the graphic drawing rule instruction. The former indicates the position of the object to be operated in the data area, and the latter indicates what to do for the operation object Type of operation. In this case, if offset = 10 and operateType is an erase operation, when the runner runs the rule instruction, it first obtains the data corresponding to the offset value 10 from the data area according to the offset as the operation object, and then Data is erased. Through this mechanism of separation of data and instructions, the convenience of operation can be improved, and technical guarantee is provided for other further improvements.

In the aforementioned scenario of separating the operation objects (instruction and data) of the graphics drawing rule instruction and the graphics drawing rule instruction, maintaining the data in the data area becomes very important. The data area can be divided into different types according to the actual situation and different division criteria. For example, it can be divided into a global data area and a local data area. The former is used to store global data or intermediate results, and the latter is used to store local data. Of course, in the actual application process, these two data areas can be physically adjacent storage locations or different physical storage locations separated by “thousands of mountains and rivers”. Regardless of whether it is a global data area or a local data area, the data in it can be configured on the Web engine side, such as defining it during initialization, and then synchronizing these configured data to or before receiving a graphics drawing request. In the data area that the runner can access. For example, you can configure global data in the data area as follows:

varvalueID = GL.addValueDefine (modifyType, type, size, defaultData)

Define alpha data: type = float, size = 1, defaultData = [1]

Define matrix data: type = float, size = 6, defaultData = [1,0,0,1,0,0]

Since in some cases there is a difference between the global data area and the local data area, there may be operations performed only on the data in the global data area or the local data area, or there may be a part of the data from the global data area and another part of the data from Local data area, a case where the two perform some operation. In other words, you can operate only on the data in the same type of data area, and you can also perform data operations on data areas of different properties, such as matrix calculations and vertex calculations involved in graphics drawing. When multiple data are operated, there may be multiple operation objects (operation object index) included in the graphics drawing request. In the following, matrix calculation is performed on one data in the global data area and one data in the local data area as an example:

The graphics drawing request includes the following:

setValueByShareData (id, offset, operateType)

The id of the instruction content represents the global index of the global data area, assuming its value is 2, and offset represents the local index of the local data area, assuming its value is 4, if the currently scheduled operation type is matrix operation, the runner will first According to the position indicated by the global index id of the global data area, the first operation data is obtained from the position of the global data area id = 2, and according to the position indicated by the local index offset of the local data area, the first operation data is obtained from the position of the local data area offset = 4. Two operation data, and then perform matrix operations on the first operation data and the second operation data according to the operation type indicated by the operateType. It should be emphasized that these calculations are completed in the runner, and the runner contains the C ++ engine framework, and the calculation efficiency is much higher than that in the prior art on the Web engine side. In the actual application process, a large number of matrix operations are involved in graphic drawing, and processing resources can be greatly saved by calculating in the runner.

In fact, in addition to matrix operations, the types of operations involved in the graphics drawing process include conventional addition, subtraction, multiplication, division, and vertex deformation types. For example, for a large amount of vertex data in graphic drawing, one of the above operations can be adopted to complete the operation. Examples are as follows:

modifyMesh (valueID, vdoPosID, operatorType)

The content of this instruction indicates that a certain data specified by valueID in the global data area is used to modify some data in the graphics card vertex buffer specified by vdoPosID in the vertex buffer data area, and calculation is performed according to the operation type specified by operatorType.

Assume that the data corresponding to valueID = 2 in the global data area is used to modify the data corresponding to vdoPosID = 0 (the x and y coordinates of the vertices) in the vertex buffer data area. The operation mode is to transform the vertex data in a matrix. This operation is performed in the code in the C ++ of the runner, which greatly improves the efficiency.

The optimization scheme is described below from the situation when the graphics drawing rule instruction is an instruction to operate a register. Similar to the foregoing reason, in the parameters of the graphics drawing rule instruction, the register as an operation object usually exists in the form of a register index, that is, when the data is manipulated, the graphics drawing rule instruction passes the register index (for example, regID ) Indicates which register to operate on, as long as the data is stored in the register, the corresponding operation may be completed. The data sources in the register can include the following two sources: First, when the graphics drawing rule instruction is executed, the predetermined data is written into the register through a predetermined function, so that the register has the corresponding data and can be completed. The corresponding data operation, of course, from the perspective of time, the data writing operation in the register can be completed before the graphics drawing rule instruction is executed, and the operation can be performed directly after the index number of the register of the operation is specified. Second, when executing the graphics drawing rule instruction, the operation object index is also specified in the instruction, then the operation data corresponding to the operation object index can be obtained from the data area according to the operation object index, and then the data is written to Corresponding register. When the operation data is successfully filled in the register either in the first or second way, the runner can operate the operation data in the register according to the predetermined operation type according to the graphics drawing rule instructions to complete the target image. Drawing work.

The following uses two specific types of predetermined operations as examples to describe the operation of the register.

(1) For the case where the predetermined operation type is a judgment operation.

The so-called judgment-type operation is a conditional statement, which judges whether a certain condition is satisfied. When it is satisfied, a certain judgment branch is executed; when it is not satisfied, another judgment branch is executed, which can be embodied as an IF statement, a WHILE statement, and the like. For example, in order to achieve a statement jump, you can determine whether the data in the register has reached a predetermined condition, and if it is, jump to a certain graphics drawing rule instruction (in specific implementation, it can directly specify the target graphics drawing rule instruction for the jump To jump directly to the instruction execution, or just specify the number of instructions that need to be jumped, and the instruction that arrives after the jump is the target instruction), if not, it will be executed in the original order. As the following example, by judging the data in the register, execute the statement jump:

loadInt (dataID, offset, reg [0]); // Set the value to the 0th register

ifE0 (regID, skipStatementN); // If the reg value == 0, skip the statement execution

ifNE0 (regID, skipStatementN); // If the reg value! = 0, skip statement execution

ifGE0 (regID, skipStatementN); // If reg value> = 0, skip statement execution

ifG0 (regID, skipStatementN); // If the reg value is> 0, skip the statement execution

ifL0 (regID, skipStatementN); // If the reg value is <0, skip the statement execution

ifLE0 (regID, skipStatementN); // If the reg value is <= 0, skip the statement execution

The situation of the loop sentence is the complication of the judgment sentence, the reason is the same, and it will not be described here again.

(2) For a case where the predetermined operation is an arithmetic operation.

The so-called arithmetic operations are operations such as addition, subtraction, multiplication, division, and matrix operations on the data in a register. Specifically, operations on data in a register (such as power, increment, decrement, etc.), The data in multiple registers can also be operated, and the data stored in the data area specified by the data in the registers and the operation object index can also be directly operated. When operating on multiple registers, the predetermined first data or the first data obtained from the data area may be written into the first register corresponding to the first register index, and the predetermined second data or from The second data obtained in the data area is written into a second register corresponding to the second register index, or before the runner operates the operation object according to the graphic drawing rule instruction and the predetermined operation type, Write predetermined first data or first data obtained from the data area into the first register corresponding to the first register index, and write predetermined second data or second data obtained from the data area into the first register The second register index corresponds to the second register. Then, an operation is performed on the operation data in the first register and the second register. As shown in the following example, the register is first filled with data by a function, and then the data in the register is operated according to a predetermined operation type. The following example fully demonstrates the above.

function setXXX ()

{

// The first parameter dataID, offset value, is placed in the register corresponding to the register index;

loadData (dataID, offset, reg [0]);

loadData (dataID, offset, reg [1]);

loadData (dataID, offset, reg [2]);

loadData (dataID, offset, reg [3]);

// Operate the registers with the register index numbers 0 and 3, and store the value of the operation into the register with the register index number 2, and type is the specific predetermined operation operation type;

operate (2,0,3, type);

operate (1,0,3, type);

}

After introducing the two major directions, the following is an optimized technical solution that may coexist regardless of whether the graphics drawing rule instruction is an instruction that operates a register or an instruction that does not operate a register.

One of the optimization directions: use the drawing rule instruction index as the positioning drawing instruction rule. Similar to the previous discussion of operating objects, the graphics drawing rule instructions formed after parsing the graphics drawing request and executing the JS project code may include the graphics drawing rule instruction itself or the index of the graphics drawing rule instruction. In this way, the terminal device or The server may determine the graphics drawing rule instruction set corresponding to the graphics drawing rule instruction index based on the graphics drawing rule instruction index, specifically:

The terminal device (runner) finds the instruction set corresponding to the graphic drawing rule instruction index from the storage device according to the graphic drawing rule instruction index. The storage device stores different graphic drawing rule instruction indexes and different graphic drawing rules. The instruction set corresponding to the instruction index. It should be noted that the storage device here can be located on the server or on the terminal device side. If it is on the terminal device side, after the terminal device receives the instruction stream sent by the server, it parses the instruction stream from the terminal. The storage device of the device searches for a corresponding instruction set according to the graphics drawing rule instruction index.

In the embodiment of the present application, in order to facilitate drawing of different target graphics, multiple rule instruction sets for drawing different target graphics may be determined according to the method described above, and the multiple rule instruction sets and graphics drawing rules may be determined. The instruction index is correspondingly stored in a storage device. In this way, when drawing different target graphics, an instruction set corresponding to a different drawing instruction instruction index can be obtained from the storage device.

Second optimization direction: In this embodiment, for an instruction set, the instruction set may correspond to a data area, and the combination of the data area and the instruction set may be used to draw a target graphic; moreover, all The instruction set can also correspond to multiple data areas. After each of the data areas and the instruction set are combined, they can be used to draw different target graphics, that is, multiple different target graphics can be shared using one instruction set. The drawing of the target graphics. In this way, since multiple target graphics can be drawn according to the same instruction set, the number of stored instruction sets can be effectively reduced, thereby effectively reducing the storage space occupied by the instruction sets.

For example, instruction set A may correspond to data area 1 and data area 2. According to the operation object data in instruction set A and data area 1, the target figure A1 may be drawn. According to the operation object data in instruction set A and data area 2, The target figure A2 can be drawn. Because the target graphics A1 and A2 can both be drawn according to the instruction set A, the number of instruction sets can be reduced, thereby reducing the storage space occupied by the instruction set.

The above description focuses on the description from the perspective of graphics drawing methods. In fact, the embodiments of the present application also provide corresponding device embodiments. FIG. 4 is a schematic structural diagram of a graphic drawing device according to an embodiment of the present application. The trunk is located on the server side and includes: a request receiving unit 41, a parsing execution unit 42, and an instruction sending unit 43, where:

The request receiving unit 41 is configured to receive a drawing request for drawing a target graphic in a JS project sent by a terminal device through a network;

The parsing execution unit 42 is configured to parse the drawing request, execute a JS project code corresponding to the drawing request, and form a WebGL-based graphic drawing rule instruction set;

The instruction sending unit 43 is configured to send the graphic drawing rule instruction set to the terminal device for execution through a network in order to implement drawing of a target graphic.

The above device can obtain the same technical effects as the foregoing method embodiments. To avoid repetition, details are not repeated here.

Optionally, the drawing request sent by the terminal device for drawing the target graphic in the JS project through the network includes the operation result information of the user of the terminal device operating the application corresponding to the JS project, then: the analysis execution unit 42, Specifically used to parse the drawing request, execute the JS project code corresponding to the operation result information, and form a WebGL-based graphic drawing rule instruction set. The operation result information here may be one or more of the following: operation result information on the gravity sensor; touch (TOUCH) event information; user account information; user status information.

In the above device embodiment, the terminal device sends a drawing request time for drawing a target graphic in a JS project through a network, which is less than or equal to a first predetermined duration; and the server sends the graphic drawing rule instruction set through the network. The time period sent to the terminal device in the form of an instruction stream is less than or equal to a second predetermined time period. Here, the first predetermined duration or the second predetermined duration may be the same or different, and needs to be determined according to actual conditions.

Referring to FIG. 5, corresponding to the above-mentioned device on the server side, in the embodiment of the present application, another device may be deployed on the terminal device side. The device includes a request sending list 51, an instruction receiving unit 52, and an instruction execution unit 53, where:

A request sending unit 51, configured to send a drawing request for drawing a target graphic in a JS project to a server through a network;

An instruction receiving unit 52 is configured to receive a WebGL-based graphic drawing rule instruction set formed by the server in the form of an instruction stream through a network, which parses the drawing request and executes a JS project code corresponding to the drawing request;

The instruction execution unit 53 is configured to execute the instruction flow to implement drawing of a target graphic.

The above-mentioned devices located on the server side and the terminal side may be implemented as a system in some cases. Such a system includes services and terminal equipment, of which:

The terminal device includes: a request sending unit, an instruction receiving unit, and an instruction execution unit, where:

FIG. 6 is a schematic structural diagram of another embodiment of a system based on WebGL drawing in the present application. The system 60 includes a memory 61, a processor 62, and a memory 61 that can be run on the processor 62. A computer program that, when executed by the processor 62, implements the steps of the graphics drawing method described above.

An embodiment of the present application further provides a computer-readable storage medium. A computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the steps of the graphics drawing method described above are implemented.

Those skilled in the art should understand that the embodiments of the present application may be provided as a method, a system, or a computer program product. Therefore, this application may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware aspects. Moreover, this application may take the form of a computer program product implemented on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

This application is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present application. It should be understood that each process and / or block in the flowcharts and / or block diagrams, and combinations of processes and / or blocks in the flowcharts and / or block diagrams can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing device to produce a machine, so that the instructions generated by the processor of the computer or other programmable data processing device are used to generate instructions Means for implementing the functions specified in one or more flowcharts and / or one or more blocks of the block diagrams.

These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to work in a specific manner such that the instructions stored in the computer-readable memory produce a manufactured article including an instruction device, the instructions The device implements the functions specified in one or more flowcharts and / or one or more blocks of the block diagram.

These computer program instructions can also be loaded onto a computer or other programmable data processing device, so that a series of steps can be performed on the computer or other programmable device to produce a computer-implemented process, which can be executed on the computer or other programmable device. The instructions provide steps for implementing the functions specified in one or more flowcharts and / or one or more blocks of the block diagrams.

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

Memory may include non-persistent memory, random access memory (RAM), and / or non-volatile memory in computer-readable media, such as read-only memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.

Computer-readable media includes permanent and non-persistent, removable and non-removable media. Information storage can be accomplished by any method or technology. Information may be computer-readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), and read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, read-only disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, Magnetic tape cartridges, magnetic tape storage or other magnetic storage devices or any other non-transmitting medium may be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include temporary computer-readable media, such as modulated data signals and carrier waves.

It should also be noted that the terms "including", "comprising" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, product, or device that includes a series of elements includes not only those elements, but also Other elements not explicitly listed, or those that are inherent to such a process, method, product, or device. Without more restrictions, the elements defined by the sentence "including a ..." do not exclude the existence of other identical elements in the process, method, product or equipment including the elements.

The above are only examples of the present application and are not intended to limit the present application. For those skilled in the art, this application may have various modifications and changes. Any modification, equivalent replacement, and improvement made within the spirit and principle of this application shall be included in the scope of claims of this application.

Claims

A method for drawing graphics based on WebGL, including:

The server receives a drawing request for drawing a target graphic in a JS project sent by a terminal device through a network;

The server parses the drawing request, executes a JS project code corresponding to the drawing request, and forms a WebGL-based graphic drawing rule instruction set;

The server sends the graphic drawing rule instruction set to the terminal device for execution in the form of an instruction stream through a network to implement drawing of a target graphic.
The method according to claim 1, wherein the drawing request sent by the terminal device for drawing the target graphics in the JS project through the network comprises a user of the terminal device operating the application corresponding to the JS project. The operation result information, the server parses the drawing request, executes the JS project code corresponding to the drawing request, and forms a WebGL-based graphic drawing rule instruction set, including:

The server parses the drawing request, executes a JS item code corresponding to the operation result information, and forms a WebGL-based graphic drawing rule instruction set.
The method according to claim 2, wherein the operation result information of the operation of the application corresponding to the JS project by the user of the terminal device includes one or more of the following information:

Information on the operation results of the gravity sensor;

Touch event information;

User account information;

User status information.
The method according to claim 1, wherein the duration of the drawing request for drawing the target graphics in the JS project sent by the terminal device through the network is less than or equal to a first predetermined duration; and the server sends all The duration of sending the graphics drawing rule instruction set to the terminal device in the form of instruction stream is less than or equal to the second predetermined duration.
The method according to claim 4, wherein the first predetermined duration and / or the second predetermined duration are determined according to a requirement of a user of the terminal device for the duration of drawing the graphic.
The method according to any one of claims 1 to 5, wherein the network is a 5G network, and a network transmission speed determined based on the first predetermined duration and the second predetermined duration is equal to or greater than an average of the 5G network. speed.
A method for drawing graphics based on WebGL, including:

The terminal device sends a drawing request for drawing the target graphic in the JS project to the server through the network;

Receiving, by the terminal device, a WebGL-based graphic drawing rule instruction set formed by the server in the form of an instruction stream through a network, which parses the drawing request and executes a JS project code corresponding to the drawing request;

The terminal device executes the instruction flow to achieve drawing of a target graphic.
The method according to claim 7, wherein the graphics drawing rule instruction set includes at least one instruction for operating a register, and the register is a temporary storage area in a memory.
The method according to claim 8, wherein the graphic drawing rule instruction set includes the graphic drawing rule instruction, and a predetermined operation type and operation object as parameters of the graphic drawing rule instruction;

The execution of the instruction flow by the terminal device to achieve a target graphic drawing includes:

The terminal device operates the operation object according to an instruction in the instruction stream and the predetermined operation type to draw the target graphic.
The method according to claim 9, wherein when the graphics drawing rule instruction is an instruction to operate a register,

The operation object includes an operation object index and a register index, and the terminal device operates the operation object according to the graphic drawing rule instruction and the predetermined operation type, including:

Obtaining, by the terminal device, operation data corresponding to the operation object index from a data area according to the operation object index, and writing the operation data to a register corresponding to the register index;

The terminal device operates the operation data in the register according to the predetermined drawing type instruction according to the graphic drawing rule instruction;

Alternatively, the operation object includes a register index, and the terminal device operates the operation object according to the graphic drawing rule instruction and the predetermined operation type, including:

The terminal device writes predetermined data in a register corresponding to the register index, or, before the terminal device operates the operation object according to the graphic drawing rule instruction and the predetermined operation type, Write into a register corresponding to the register index;

The terminal device operates the operation data in the register according to the graphic drawing rule instruction according to the predetermined operation type.
A WebGL-based graphic drawing device is located on a server side and is characterized by including a request receiving unit, a parsing execution unit, and an instruction sending unit, wherein:

A request receiving unit, configured to receive a drawing request for drawing a target graphic in a JS project sent by a terminal device through a network;

A parsing execution unit, configured to parse the drawing request, execute a JS project code corresponding to the drawing request, and form a WebGL-based graphic drawing rule instruction set;

An instruction sending unit is configured to send the graphics drawing rule instruction set to the terminal device for execution through a network in order to implement drawing of a target graphic.
The device according to claim 11, wherein the drawing request for drawing the target graphics in the JS project sent by the terminal device through the network comprises a user of the terminal device operating the application corresponding to the JS project. Operation result information, then:

The analysis execution unit is specifically configured to parse the drawing request, execute a JS item code corresponding to the operation result information, and form a WebGL-based graphic drawing rule instruction set.
The apparatus according to claim 11, wherein the duration of the drawing request for drawing the target graphics in the JS project sent by the terminal device through the network is less than or equal to a first predetermined duration; and the server sends all The duration of sending the graphics drawing rule instruction set to the terminal device in the form of instruction stream is less than or equal to the second predetermined duration.
A device for drawing graphics based on WebGL. The device is located on a terminal device side, and is characterized by including a request sending unit, an instruction receiving unit, and an instruction execution unit, wherein:

A request sending unit, configured to send a drawing request for drawing a target graphic in a JS project to a server through a network;

An instruction receiving unit, configured to receive a WebGL-based graphic drawing rule instruction set formed by the server in the form of an instruction stream through a network, which parses the drawing request and executes a JS project code corresponding to the drawing request;

An instruction execution unit is configured to execute the instruction flow to achieve drawing of a target graphic.
A WebGL-based graphics rendering system, characterized in that the system includes a server and a terminal device,

The server includes a request receiving unit, a parsing execution unit, and an instruction sending unit, where:

A request receiving unit, configured to receive a drawing request for drawing a target graphic in a JS project sent by a terminal device through a network;

A parsing execution unit, configured to parse the drawing request, execute a JS project code corresponding to the drawing request, and form a WebGL-based graphic drawing rule instruction set;

An instruction sending unit, configured to send the graphics drawing rule instruction set to the terminal device for execution through a network in order to implement drawing of a target graphic;

The terminal device includes a request sending unit, an instruction receiving unit, and an instruction execution unit, wherein:

A request sending unit, configured to send a drawing request for drawing a target graphic in a JS project to a server through a network;

An instruction receiving unit, configured to receive a WebGL-based graphic drawing rule instruction set formed by the server in the form of an instruction stream through a network, which parses the drawing request and executes a JS project code corresponding to the drawing request;

An instruction execution unit is configured to execute the instruction flow to achieve drawing of a target graphic.
A WebGL-based graphics rendering system, characterized in that the system includes: a memory, a processor, and a computer program stored on the memory and executable on the processor, and the computer program is processed by the processor. The implementation of the method implements the steps of the method according to any one of claims 1 to 10.
A computer-readable storage medium, characterized in that a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the method according to any one of claims 1 to 10 is implemented step.