WO2019238145A1 - Procédé, appareil, et système de rendu de graphiques basé webgl - Google Patents

Procédé, appareil, et système de rendu de graphiques basé webgl Download PDF

Info

Publication number
WO2019238145A1
WO2019238145A1 PCT/CN2019/100605 CN2019100605W WO2019238145A1 WO 2019238145 A1 WO2019238145 A1 WO 2019238145A1 CN 2019100605 W CN2019100605 W CN 2019100605W WO 2019238145 A1 WO2019238145 A1 WO 2019238145A1
Authority
WO
WIPO (PCT)
Prior art keywords
instruction
terminal device
request
graphic
graphics
Prior art date
Application number
PCT/CN2019/100605
Other languages
English (en)
Chinese (zh)
Inventor
谢成鸿
Original Assignee
搜游网络科技(北京)有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 搜游网络科技(北京)有限公司 filed Critical 搜游网络科技(北京)有限公司
Publication of WO2019238145A1 publication Critical patent/WO2019238145A1/fr

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T1/00—General purpose image data processing
    • G06T1/60—Memory management

Definitions

  • 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.
  • 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.
  • a specially developed runtime (RunTime) is generally used on the terminal device.
  • 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.
  • 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.
  • the above method can successfully complete the graphics drawing work on 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.
  • the operating efficiency of JS projects is different, which restricts the widespread application of JS projects.
  • 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.
  • 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.
  • 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;
  • the terminal device executes the instruction flow to achieve drawing of a target graphic.
  • 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.
  • 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.
  • 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:
  • 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.
  • 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.
  • 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 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.
  • 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. .
  • 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. 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.
  • 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).
  • JS JavaScript language
  • this operation mode makes the JS project run at a low efficiency and high heat generation of terminal equipment.
  • its compatibility is not strong, which restricts the promotion and application of JS projects on different terminal equipment.
  • an embodiment of the present application provides a WebGL-based graphic drawing method.
  • 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.
  • 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
  • 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.
  • 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.
  • rendering The drawing part such as OpenGLES, calls the OpenGLES function through C ++ code to complete the graphics drawing and submit the drawing result.
  • 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.
  • 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.
  • a brand new platform mode (which can be called a server mode) is actually set up.
  • 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.
  • the server side can contain an unlimited number of JS items.
  • the server 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.
  • 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.
  • "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.
  • 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.
  • 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.
  • the server can be used to describe the technical solution of this application.
  • 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.
  • graphics that is used for drawing graphics is understood in this embodiment from a broader perspective that conforms to industry habits.
  • graphics may be limited to some geometrical figures, but in fact, in this embodiment, not only regular graphics, images, etc. may be included.
  • drawing a graphic may be drawing a triangle, quadrilateral, etc. on the canvas.
  • 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.
  • 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.
  • 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.
  • graphics 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.
  • 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.
  • 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.
  • 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.
  • "operateType" that is, a drawing rule instruction for a graph, not the function itself (for example, setGlobalValue) is the operation type.
  • 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.
  • 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.
  • 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.
  • 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).
  • 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.
  • 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.
  • 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.
  • 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.
  • first 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.
  • 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.
  • registers In describing the concept of the graphics drawing rule instruction set, as mentioned earlier, it involves "registers".
  • 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.
  • an application or program code segment
  • a computing device usually needs to be opened. The memory area is used to store data and execute instructions.
  • 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.
  • 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.
  • 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.
  • 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.
  • the "complementary advantages" of the server and terminal devices can be achieved, and the overall performance can be significantly improved.
  • 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.
  • 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.
  • the server receives the graphic drawing request sent from the terminal device through the network.
  • the operation result of the user of the terminal device on the application (client) corresponding to the JS project is usually included. information.
  • the operation result 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.
  • 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.
  • 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.
  • 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.
  • 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).
  • 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.
  • 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.
  • the network transmission speed is greater than or Keep on the average speed of 5G network.
  • 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.
  • the graphics drawing rule instruction set includes at least one instruction for operating a register.
  • 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.
  • 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.
  • the graphics drawing rule instruction is an instruction other than an instruction to operate a register
  • the operation object can be directly reflected in the graphics drawing request, this will make the graphics drawing request “bloated”, especially
  • 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.
  • 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:
  • 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”.
  • 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.
  • the data area that the runner can access 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)
  • the graphics drawing request includes the following:
  • the types of operations involved in the graphics drawing process include conventional addition, subtraction, multiplication, division, and vertex deformation types.
  • one of the above operations can be adopted to complete the operation. Examples are as follows:
  • 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.
  • 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 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 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.
  • 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.
  • 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 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.
  • 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.
  • 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
  • loadInt (dataID, offset, reg [0]); // Set the value to the 0th register
  • arithmetic operations are operations such as addition, subtraction, multiplication, division, and matrix operations on the data in a register.
  • 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.
  • 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.
  • 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.
  • loadData (dataID, offset, reg [0]);
  • loadData (dataID, offset, reg [1]);
  • loadData (dataID, offset, reg [2]);
  • loadData (dataID, offset, reg [3]);
  • 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.
  • 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.
  • 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 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.
  • 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.
  • 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.
  • instruction set A may correspond to data area 1 and data area 2.
  • the target figure A1 may be drawn.
  • 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.
  • 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.
  • 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.
  • 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.
  • the first predetermined duration or the second predetermined duration may be the same or different, and needs to be determined according to actual conditions.
  • 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 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, 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.
  • 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.
  • this 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.
  • computer-usable storage media including, but not limited to, disk storage, CD-ROM, optical storage, etc.
  • 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.
  • a computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory.
  • processors CPUs
  • input / output interfaces output interfaces
  • network interfaces network interfaces
  • memory volatile and non-volatile 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.
  • RAM random access memory
  • ROM read-only memory
  • flash RAM flash memory
  • 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.
  • computer-readable media does not include temporary computer-readable media, such as modulated data signals and carrier waves.
  • this 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.
  • computer-usable storage media including, but not limited to, disk storage, CD-ROM, optical storage, etc.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computing Systems (AREA)
  • Image Generation (AREA)

Abstract

L'invention concerne un procédé, un appareil, et un système de rendu de graphiques basés WebGL. Le procédé comprend les étapes suivantes : un serveur reçoit une demande de rendu, pour rendre des graphiques cible dans un projet JS, envoyée par un dispositif terminal via un réseau ; le serveur analyse la demande de rendu, exécute un code de projet JS correspondant à la demande de rendu, et forme un ensemble d'instructions de règles de rendu de graphiques basé WebGL ; le serveur envoie l'ensemble d'instructions de règles de rendu de graphiques sous la forme d'un flux d'instructions au dispositif terminal pour leur exécution, en vue du rendu des graphiques cible. La solution technique de la présente invention résout le problème lié au peu d'efficacité du rendu de graphiques, améliore la compatibilité, et élargit la portée d'application de projets JS.
PCT/CN2019/100605 2018-06-15 2019-08-14 Procédé, appareil, et système de rendu de graphiques basé webgl WO2019238145A1 (fr)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201810627271.8 2018-06-15
CN201810627271.8A CN110609677A (zh) 2018-06-15 2018-06-15 一种基于WebGL的图形绘制方法、装置及系统

Publications (1)

Publication Number Publication Date
WO2019238145A1 true WO2019238145A1 (fr) 2019-12-19

Family

ID=68841799

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2019/100605 WO2019238145A1 (fr) 2018-06-15 2019-08-14 Procédé, appareil, et système de rendu de graphiques basé webgl

Country Status (2)

Country Link
CN (1) CN110609677A (fr)
WO (1) WO2019238145A1 (fr)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111598988A (zh) * 2020-05-19 2020-08-28 北京海致星图科技有限公司 一种基于d3的知识图谱数据节点渲染方法及系统

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111275782B (zh) * 2020-01-17 2023-09-08 广州图匠数据科技有限公司 一种图形绘制方法、装置、终端设备及存储介质
CN111737618A (zh) * 2020-06-24 2020-10-02 广联达科技股份有限公司 用于Web端的矢量图显示方法、装置和计算机设备
CN112416489A (zh) * 2020-11-06 2021-02-26 万翼科技有限公司 工程图纸显示方法及相关装置
CN112614210B (zh) * 2020-12-23 2024-03-19 深圳市万翼数字技术有限公司 工程图纸显示方法、系统及相关装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102254292A (zh) * 2010-05-20 2011-11-23 盛乐信息技术（上海）有限公司 远程3d指令渲染系统及方法
CN102799636A (zh) * 2012-06-26 2012-11-28 北京奇虎科技有限公司 移动终端显示网页的方法及系统
CN103677951A (zh) * 2013-12-11 2014-03-26 北京掌中经纬技术有限公司 一种JavaScript脚本的执行过程控制方法和系统
US20150347198A1 (en) * 2014-05-29 2015-12-03 Apple Inc. Web browser for spoofing supported features
CN107832108A (zh) * 2016-09-14 2018-03-23 阿里巴巴集团控股有限公司 3D canvas网页元素的渲染方法、装置及电子设备

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8799357B2 (en) * 2010-11-08 2014-08-05 Sony Corporation Methods and systems for use in providing a remote user interface
US10062141B2 (en) * 2012-10-24 2018-08-28 Nubo Software Server-based fast remote display on client devices
JP6265337B2 (ja) * 2014-06-03 2018-01-24 株式会社スクウェア・エニックス プログラム、記録媒体及び描画装置決定方法
CN107506517B (zh) * 2017-07-04 2022-04-26 网易（杭州）网络有限公司 建筑模型显示、数据处理方法、装置、介质、设备和系统

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102254292A (zh) * 2010-05-20 2011-11-23 盛乐信息技术（上海）有限公司 远程3d指令渲染系统及方法
CN102799636A (zh) * 2012-06-26 2012-11-28 北京奇虎科技有限公司 移动终端显示网页的方法及系统
CN103677951A (zh) * 2013-12-11 2014-03-26 北京掌中经纬技术有限公司 一种JavaScript脚本的执行过程控制方法和系统
US20150347198A1 (en) * 2014-05-29 2015-12-03 Apple Inc. Web browser for spoofing supported features
CN107832108A (zh) * 2016-09-14 2018-03-23 阿里巴巴集团控股有限公司 3D canvas网页元素的渲染方法、装置及电子设备

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111598988A (zh) * 2020-05-19 2020-08-28 北京海致星图科技有限公司 一种基于d3的知识图谱数据节点渲染方法及系统
CN111598988B (zh) * 2020-05-19 2022-01-25 北京海致星图科技有限公司 一种基于d3的知识图谱数据节点渲染方法及系统

Also Published As

Publication number Publication date
CN110609677A (zh) 2019-12-24

Similar Documents

Publication Publication Date Title
WO2019238145A1 (fr) Procédé, appareil, et système de rendu de graphiques basé webgl
TWI808393B (zh) 頁面處理方法、裝置、設備及儲存媒體
CN111881401B (zh) 基于WebAssembly的浏览器深度学习方法及系统
TW201812613A (zh) ３Ｄ ｃａｎｖａｓ網頁元素的渲染方法、裝置及電子設備
US9069549B2 (en) Machine processor
EP2840497A1 (fr) Procédé, système et morceau de code exécutable pour virtualiser une ressource matérielle associée à un système informatique
US10719970B2 (en) Low latency firmware command selection using a directed acyclic graph
US11094036B2 (en) Task execution on a graphics processor using indirect argument buffers
WO2016200558A1 (fr) Moteur graphique et environnement pour le rendu efficace en temps réel de graphiques qui ne sont pas connus au préalable
US20230403437A1 (en) Graphics engine and graphics processing method applicable to player
US20130198325A1 (en) Provision and running a download script
US20190080017A1 (en) Method, system, and device that invokes a web engine
WO2016200738A1 (fr) Processeur graphique et environnement d'encapsulation de bibliothèques graphiques et de matériel
CN111625290B (zh) 一种Android平台下布局文件预加载方法、装置及电子设备
US20170329622A1 (en) Shared virtual data structure of nested hypervisors
CN110443880B (zh) 图像渲染方法、装置、存储介质及电子设备
US20130176320A1 (en) Machine processor
US20130103931A1 (en) Machine processor
US9448823B2 (en) Provision of a download script
US10620980B2 (en) Techniques for native runtime of hypertext markup language graphics content
CN115131470A (zh) 一种图文素材合成方法、装置、电子设备和存储介质
Zhang et al. A webpage offloading framework for smart devices
CN110609682B (zh) 一种基于WebGL的图形绘制方法、装置及系统
US20240033625A1 (en) Rendering method and apparatus for virtual scene, electronic device, computer-readable storage medium, and computer program product
WO2023245369A1 (fr) Procédé et appareil de démarrage d'applications, dispositif électronique, et support de stockage

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 19819462

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 19819462

Country of ref document: EP

Kind code of ref document: A1