CN107038060B - Debugging method and device for page shader codes - Google Patents
Debugging method and device for page shader codes Download PDFInfo
- Publication number
- CN107038060B CN107038060B CN201610866146.3A CN201610866146A CN107038060B CN 107038060 B CN107038060 B CN 107038060B CN 201610866146 A CN201610866146 A CN 201610866146A CN 107038060 B CN107038060 B CN 107038060B
- Authority
- CN
- China
- Prior art keywords
- shader
- debugging
- code
- page
- original
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
- G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/005—General purpose rendering architectures
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Computer Graphics (AREA)
- Debugging And Monitoring (AREA)
Abstract
The application provides a method and a device for debugging a page shader code. The method comprises the following steps: when a debugging mode is triggered, loading an analog shader of an original shader; debugging the code parameters of the original shader at the web end in the simulation shader; in the debugging process, original shader code parameters debugged in the analog shader are converted into character strings corresponding to the original shader according to a preset conversion rule. According to the embodiments of the application, a solution for debugging the shader at the web end is provided, and the debugging effect of the shader can be greatly improved.
Description
Technical Field
The application belongs to the technical field of page data processing, and particularly relates to a method and a device for debugging a page shader code.
Background
With the rapid development of computer technology and the continuous increase of user demand, the web page 3D display technology is now more and more focused by developers.
The web end generally refers to various page browsers on terminal devices such as a PC, a mobile phone, a tablet and the like, and can browse pages in a webpage through the web end. At present, various 3D page effects can be realized at a web end, page display contents can be enriched, and the display effect is improved. The development of 3D graphics on the web side in the current state of the art requires the use of webGL technology. WebGL is a 3D drawing standard, and can provide hardware 3D accelerated rendering for HTML5Canvas, so that a Web developer can more smoothly display 3D scenes and models in a browser by means of a system display card, and complex navigation and data visualization can be created. In the webGL technology, shaders are provided that can run code supported by the webGL shader (which may be referred to herein as webGL shader code) for implementing various 3D effects. When developing 3D graphics using webGL, the code that needs to write shaders is exemplified by:
the webGL shader codes need to be written by character strings, and the codes are loaded into a GPU to be executed in the development process, so that the shader codes cannot be debugged.
Obviously, in the development process of the web page, the webGL shader codes in the operation cannot be debugged, so that the development efficiency of the web page is reduced.
Disclosure of Invention
The application aims to provide a method and a device for debugging a page shader code, a solution for debugging a shader at a web end is provided, the debugging efficiency of the shader and the 3D page development effect can be greatly improved, and powerful technical support is provided for 3D development and VR/AR development.
The method and the device for debugging the page shader code are realized as follows:
a method of page shader code debugging, the method comprising:
loading an analog shader of a primitive shader when debugging shader codes of a triggering page, wherein the analog shader is set to adopt a preset programming design language and simulate the running environment of the primitive shader for compiling and generating;
debugging shader codes of a page in the simulation shader;
and translating shader codes debugged in the analog shader into character strings corresponding to the original shader according to a preset conversion rule, and embedding the character strings into corresponding code positions in the original shader.
A page shader debugging device, the device comprising:
the debugging and loading module is used for loading an analog shader of the original shader when the shader code of the page is debugged, and the analog shader is set to adopt a preset programming language and simulate the running environment of the original shader for compiling and generating;
the debugging processing module is used for debugging the shader codes of the page in the simulation shader;
and the code conversion module is used for translating the shader codes debugged in the analog shader into character strings corresponding to the original shader according to a preset conversion rule and embedding the character strings into corresponding code positions in the original shader.
The application provides a debugging method and a debugging device for a page shader code, and provides an analog shader, wherein JS codes which can be debugged and programmed can be used for writing the code of the analog shader, the JS codes can work together with an original shader during debugging, and then the debugging of the original shader code is carried out in the analog shader. When debugging is not performed, the ordinary JS code can be translated into a character string of the original shader, and then the character string is embedded into a code corresponding to the original shader. According to the debugging method and device, the page shader can be provided with the simulation shader when the page shader is debugged at the web end, operating personnel can debug shader codes in the simulation shader, then the debugged content can be converted into real webGL shader character strings, the real webGL shader character strings are embedded into the real webGL shader codes to run, and debugging of an original webGL shader is achieved. The problem that the shader cannot be debugged by the web end is solved, the debugging efficiency of the shader can be remarkably improved by changing the performance effect, and powerful technical support is provided for 3D development and VR/AR development of the web end in the future.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, it is obvious that the drawings in the following description are only some embodiments described in the present application, and for those skilled in the art, other drawings can be obtained according to the drawings without any creative effort.
FIG. 1 is a flowchart of a method of one embodiment of a method for debugging page shader code provided herein;
FIG. 2 is a schematic diagram of the flow of data between shaders when the JS code is used to write an analog shader in the present application;
FIG. 3 is a flowchart illustrating a method of another implementation of a method for debugging page shader code provided herein;
FIG. 4 is a flowchart illustrating a method of another embodiment of a method for debugging page shader code as provided herein;
FIG. 5 is a block diagram illustrating an exemplary embodiment of a page shader debugging apparatus according to the present disclosure;
FIG. 6 is a block diagram illustrating an exemplary embodiment of a page shader debugging apparatus according to the present application;
FIG. 7 is a block diagram illustrating an exemplary embodiment of a page shader debugging apparatus according to the present application;
FIG. 8 is a block diagram of an implementation of 3D graphics rendering of a page using the method or apparatus aspects provided herein.
Detailed Description
In order to make those skilled in the art better understand the technical solutions in the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
FIG. 1 is a flowchart of a method of debugging a page shader code according to an embodiment of the present application. Although the present application provides the method operation steps or apparatus structures as shown in the following embodiments or figures, more or less operation steps or module units after partial combination may be included in the method or apparatus based on conventional or non-inventive labor. In the case of steps or structures which do not logically have the necessary cause and effect relationship, the execution sequence of the steps or the module structure of the apparatus is not limited to the execution sequence or the module structure shown in the embodiment or the drawings of the present application. When the described method or module structure is applied to a practical device or an end product, the method or module structure according to the embodiment or the figures may be executed sequentially or executed in parallel (for example, in the environment of parallel processors or multi-thread processing, or even in the environment of distributed processing).
In an implementation scheme provided for solving the problem that the web end in the prior art cannot debug the shader, a certain programming design language can be adopted in advance to write the simulation shader, and the simulation shader is generated by simulating the running environment of a primitive shader used for drawing the 3D image according to the page. The simulation shader can be compiled and generated when a project is generated in the debugging process of the web-end shader, and the simulation shader can be loaded and operated when the debugging of the page shader code is needed. The simulation shader of the embodiment of the application can be written and generated by a debuggable page design language used by an operator, so that the simulation shader can be run during debugging, and codes running in the original shader can be debugged in the simulation shader. Specifically, as shown in fig. 1, an embodiment of a page shader code debugging method provided in the present application may include:
s1: loading an analog shader of a primitive shader when debugging shader codes of a triggering page, wherein the analog shader is set to adopt a preset programming design language and simulate the running environment of the primitive shader for compiling and generating;
s2: debugging shader codes of a page in the simulation shader;
s3: and translating shader codes debugged in the analog shader into character strings corresponding to the original shader according to a preset conversion rule, and embedding the character strings into corresponding code positions in the original shader.
The shader is a program that runs on a GPU (Graphics Processing Unit, GPU, image processor), and can be understood as instructions and data that run in a Graphics card. Shaders used in general page 3D graphics development typically include vertex shaders and fragment shaders. The vertex shader mainly has the task of receiving the coordinates of the middle point in the three-dimensional space, processing the coordinates into the coordinates in the two-dimensional space of the page and outputting the coordinates; the main task of the fragment shader is to output a color value for each pixel on the screen that needs to be processed. The vertex shader receives mainly an attribute variable and a uniform variable. The attribute variable stores data about the point itself, which is primarily the location of the point. The data stored by the unifonm variables can be used to help the shader accomplish tasks, in other words, the shader needs the unifonm variables and does not typically process them. The vertex shader needs to output the varying variable to the fragment shader. Generally, in the webGL shader, the attribute, uniform and varying mainly describe the role of the variable in the shader.
In the application scenario of the embodiment of the application, which specifically adopts the webGL shader to carry out 3D image development and design, the original shader is the webGL shader. The simulation shader can be written and generated by adopting a plurality of programming languages. Since webGL is mainly used to provide hardware 3D accelerated rendering for HTML5Canvas, Web developers can use the system graphics card to more smoothly display 3D scenes and models in the browser and create complex navigation and data visualization. Therefore, in an embodiment, the analog shader may be written by JS (Javascript, JS, a scripting language) code, and is mainly used for debugging and processing the 3D image of the page. In one embodiment, therefore, provided by the present application,
s101: the original shader is a webGL shader, and the simulation shader is generated by adopting JS codes.
FIG. 2 is a schematic diagram of data flow between shaders when the JS code is used to write an analog shader in the present application. As shown in fig. 2, in the application scenario of this embodiment, when the WebGL draws a graph, two shaders are adopted: vertex shaders and fragment shaders. As shown in the figure, the vertex shader may read vertex information from a cache, and the javascript code sets a uniform variable and an attribute variable. The vertex shader reads the attribute variable and the uniform variable and outputs a varying variable, and the output varying variable can automatically calculate the difference value according to the vertex; the fragment shader can calculate the color of the current point according to the unifonm variable and the varying variable.
When the shader is written and uses the Javascript code, a series of conversion rules can be preset to realize the conversion of the Javascript code to the original shader character string, the variable communication of the original webGL and the shader can be compatible, and the difference value calculation of the varying variable can be realized. A specific example is as follows:
code of the original shader:
in this embodiment, javascript codes in the analog shader written with JS:
shader codes debugged in the analog shader can translate and generate character strings corresponding to the original shaders used at the beginning of the 3D page according to the preset conversion rules. The specific conversion rule of codes between the analog shader and the original shader, the communication mode, the function loading call and the like can be set according to the adopted preset programming design language and the specific application environment design requirement. In an embodiment of the page shader code debugging method provided by the present application, the preset conversion rule may be set to include:
s301: and translating the debugged shader codes into character strings of the original shader according to the prefix information of the variables, wherein the communication execution and calling functions among the variables are the same as those of the original shader.
In the application scenario of this embodiment, when the javascript code debugged in the analog shader is translated into the WebGL shader code, the translation may be performed only according to the prefix of the variable. For example:
var vec4_ a _ Position is translated into: attribute vect4a _ Position
The var vec4_ v _ Color is translated into a varying vec4v _ Color;
then, when debugging is started, switching to the simulated webGL environment (i.e. the simulated shader) written in the embodiment of the present application, and handling communication between the attribute variable and the uniform variable, for example:
webGL environment:
var gl＝initContext('webgl')；
debug environment:
var gl＝initContext(‘debug’)；
the communication mode and calling/loading function of the attribute variable and the uniform variable are unchanged:
var u_xformMatrix＝gl.getUniformLocation(gl.program,'u_xformMatrix')；
gl.uniformMatrix4fv(u_matrix,false,projMatrix.elements)；
in actual operation, switching different code operating environments can be realized through calling parameters of a user, for example, for shader codes written by operating personnel, the shader codes can be directly compiled into webGL codes locally, and whether a simulation shader or an original webGL shader is loaded to operate the shader codes is determined according to the called parameters during debugging. The above-mentioned problem of context switching can be added to the code at the beginning in some computer design languages. In the application scenario of the embodiment, the JS code is used to write the simulation shader, which may be defined as "debug environment" (debug environment), and the following codes are shown:
// webGL environment:
var gl＝initContext('webgl')；
// debug Environment:
var gl＝initContext(‘debug’)；
when a page debugging service item is generated, 2 files can be compiled and generated, wherein one file is a JS version and the other file is a webGL version. And loading the corresponding file according to different modes switched by the user. Therefore, in another implementation of a page shader code debugging method provided by the present application, before triggering shader code debugging, the method may further include:
s0: compiling and generating a code file of an original shader and a code file of a simulated shader, wherein the code files of the original shader and the code file of the simulated shader are provided with corresponding starting and calling parameters;
correspondingly, loading the analog shader of the primitive shader when the shader code of the trigger page is debugged comprises determining the analog shader loading the primitive shader according to the incoming startup debugging parameters.
Fig. 3 is a flowchart illustrating a method of another implementation of a page shader code debugging method provided in the present application. In a specific implementation process, for example, in the application scenario in which the "debug environment" (debug environment) is defined, when a user passes 'webgl' to the inside of the initContext function, it is called that the browser generates a wbgl object. When the 'debug' parameter is passed in, the webgl object in the simulation shader written in this application is returned. The following image rendering process can then be handed over to the JS code in the simulation shader for processing. The user can adjust parameters according to the image result of the simulation shader, and debug the shader codes of the page. Of course, the JS code for debugging the webgl object in the analog shader written in the present application may be processed by a CPU (Central Processing Unit). The shader codes debugged by the CPU are translated into character strings of a primary shader required by the GPU for executing according to the preset conversion rule, and the debugged shaders can be embedded into the corresponding code positions of the primary shader. The specific code location may also be determined according to the incoming parameters or the set debugging node, etc.
Furthermore, after debugging the shader code of the page in the analog shader and converting the shader code into the character string required by the original shader, the shader code including the character string corresponding to the converted original shader can be loaded into the GPU for running. If debugging of the shader codes is carried out in the debug environment through parameter calling, after debugging is completed, the JS codes can be automatically translated into character strings needed by an original shader in the webGL environment, then the original shader codes comprising the debugged character strings are loaded to a GPU for running, and the 3D running effect of the debugged page is checked. Fig. 4 is a flowchart illustrating a method of another embodiment of a page shader code debugging method provided in the present application, and as shown in fig. 4, the method may further include:
s4: and loading shader codes of the page in the original shader into a graphics processor.
Thus, the embodiment of the present application can determine whether to start writing the simulated webGL environment or the original webGL operating environment through different input parameters. When debugging is needed, the JS codes can be used in the provided analog shaders to debug the shader codes normally. And when debugging is not performed, the character strings required by the JS code translation member shaders which are debugged can be embedded into the real webGL code for the GPU to run. By the adoption of the scheme, the problem that the shader is debugged when the 3D page cannot be debugged at the web end can be effectively solved, and the debugging efficiency and the page development effect of the shader are effectively improved.
According to the debugging method and device, the page shader can be provided with the simulation shader when the page shader is debugged at the web end, operating personnel can debug shader codes in the simulation shader, then the debugged content can be converted into real webGL shader character strings, the real webGL shader character strings are embedded into real webGL shader codes to run, and debugging of an original webGL shader is achieved. The problem that the shader cannot be debugged by the web end is solved, the debugging efficiency of the shader can be remarkably improved by changing the performance effect, and powerful technical support is provided for 3D development and VR/AR development of the web end in the future.
Based on the debugging method of the page shader, the application also provides a debugging device of the page shader. The device can adopt a simulation shader which can be edited and debugged at one end of the CPU to realize debugging of webGL shader codes when 3D graphics are developed on the web. Fig. 5 is a block diagram illustrating an exemplary page shader debugging apparatus according to the present application, where the apparatus may include:
the debugging and loading module 101 may be configured to load an analog shader of a primitive shader when debugging a shader code of a trigger page, where the analog shader is configured to be compiled and generated by using a preset programming design language and simulating an operating environment of the primitive shader;
the debugging processing module 102 may be configured to debug shader codes of a page in the analog shader;
the code conversion module 103 may be configured to translate shader codes debugged in the analog shader into character strings corresponding to the source shader according to a preset conversion rule, and embed the character strings into corresponding code positions in the source shader.
The embodiment of the application provides a page shader code debugging device, which can use, for example, a JS code with programmable debugging to write an analog shader, can work together with an original shader during debugging, and then carry out debugging on the original shader code in the analog shader. And then, the ordinary JS codes can be translated into character strings of the original shader, and the character strings are embedded into codes corresponding to the original shader, so that debugging of the original webGL shader is realized. The problem that the shader cannot be debugged by the web end is solved, the performance is changed, the debugging effect and the debugging efficiency of the shader can be remarkably improved, and powerful technical support is provided for 3D development and VR/AR development of the web end in the future.
The original shader described in the present application mainly refers to a shader that cannot be debugged during the page development and operation process, and the analog shader can be written in a programming design language that can be directly compiled and debugged by a local CPU. Aiming at a shader used by a 3D drawing identification webGL of a target mainstream, in one embodiment provided by the application, the original shader is the webGL shader, and the simulation shader is generated by adopting JS codes. Of course, as described in the foregoing method embodiment, in another embodiment of the present application, the preset transformation rule may include: and translating the debugged shader codes into character strings of the original shader according to the prefix information of the variables, wherein the communication execution and calling functions among the variables are the same as those of the original shader.
In actual operation, switching different code operating environments can be realized through calling parameters of a user, for example, for shader codes written by operating personnel, the shader codes can be directly compiled into webGL codes locally, and whether a simulation shader or an original webGL shader is loaded to operate the shader codes is determined according to the called parameters during debugging. The above-mentioned problem of context switching can be added to the code at the beginning in some computer design languages. In the specific implementation process, 2 files can be compiled, one is a JS version, and the other is a webGL version. And loading the corresponding file according to different modes switched by the user. Fig. 6 is a block diagram illustrating an exemplary embodiment of a page shader debugging apparatus according to the present application, and as shown in fig. 6, the apparatus may further include:
the compiling module 100 may be configured to compile and generate a code file of a source shader and a code file of a simulated shader, where the code file of the source shader and the code file of the simulated shader have corresponding start-up invocation parameters;
accordingly, the debug load module 101 loads the analog shader of the primitive shader when triggering the debugging of the shader code of the page includes determining to load the analog shader of the primitive shader according to the incoming startup debugging parameters.
Furthermore, after debugging the shader code of the page in the analog shader and converting the shader code into the character string required by the original shader, the shader code including the character string corresponding to the converted original shader can be loaded into the GPU for running. If debugging of the shader codes is carried out in the debug environment through parameter calling, after debugging is completed, the JS codes can be automatically translated into character strings needed by an original shader in the webGL environment, then the original shader codes comprising the debugged character strings are loaded to a GPU for running, and the 3D running effect of the debugged page is checked. Fig. 7 is a block diagram illustrating an exemplary embodiment of a page shader debugging apparatus according to the present application, and as shown in fig. 7, the apparatus may further include:
and the code loading module 104 may be configured to load shader codes of the page in the raw shader into the image processor for execution.
FIG. 8 is a block diagram of an implementation of 3D graphics rendering of a page using the method or apparatus aspects provided herein. As shown in fig. 8, the method and apparatus for debugging a page shader code according to the embodiment of the present application may provide an analog shader using, for example, a JS code that can be debugged and programmed, and the debugging runtime may work together with a source shader, and then perform debugging of the source shader code in the analog shader. When debugging is not performed, the ordinary JS code can be translated into a character string of the original shader, and then the character string is embedded into a code corresponding to the original shader. According to the debugging method and device, the page shader can be provided with the simulation shader when the page shader is debugged at the web end, operating personnel can debug shader codes in the simulation shader, then the debugged content can be converted into real webGL shader character strings, the real webGL shader character strings are embedded into the real webGL shader codes to run, and debugging of an original webGL shader is achieved. The problem that the shader cannot be debugged by the web end is solved, the debugging efficiency of the shader can be remarkably improved by changing the performance effect, and powerful technical support is provided for 3D development and VR/AR development of the web end in the future.
Although the present application refers to the description of the page design language, rule definition, message interaction, etc. such as writing the simulation shader with the JS code, the communication and numerical calculation between the variables of the shader, the conversion rules of the code between the simulation shader and the original shader, the parameter calling method, etc., the present application is not limited to the case where the description of the page design language, the message passing, the parameter calling, or the embodiment is necessarily in compliance with the industry standard. Certain industry standards, or implementations modified slightly from those described using custom modes or examples, may also achieve the same, equivalent, or similar, or other, contemplated implementations of the above-described examples. Examples obtained by applying these modified or modified judgment and processing methods may still fall within the scope of the alternative embodiments of the present application.
Although the present application provides method steps as described in an embodiment or flowchart, more or fewer steps may be included based on conventional or non-inventive means. The order of steps recited in the embodiments is merely one manner of performing the steps in a multitude of orders and does not represent the only order of execution. When an actual apparatus or end product executes, it may execute sequentially or in parallel (e.g., parallel processors or multi-threaded environments, or even distributed data processing environments) according to the method shown in the embodiment or the figures. The terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, the presence of additional identical or equivalent elements in a process, method, article, or apparatus that comprises the recited elements is not excluded.
The units, devices, modules, etc. set forth in the above embodiments may be implemented by a computer chip or an entity, or by a product with certain functions. For convenience of description, the above devices are described as being divided into various modules by functions, and are described separately. Of course, in implementing the present application, the functions of each module may be implemented in one or more software and/or hardware, or a module implementing the same function may be implemented by a combination of a plurality of sub-modules or sub-units, and the like. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one logical division, and other divisions may be realized in practice, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the communication connections shown or discussed may be indirect couplings or communication connections between devices or units through interfaces, and may be electrical, mechanical or other forms.
Those skilled in the art will also appreciate that, in addition to implementing the controller as pure computer readable program code, the same functionality can be implemented by logically programming method steps such that the controller is in the form of logic gates, switches, application specific integrated circuits, programmable logic controllers, embedded microcontrollers and the like. Such a controller may therefore be considered as a hardware component, and the means included therein for performing the various functions may also be considered as a structure within the hardware component. Or even means for performing the functions may be regarded as being both a software module for performing the method and a structure within a hardware component.
The application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, classes, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.
From the above description of the embodiments, it is clear to those skilled in the art that the present application can be implemented by software plus necessary general hardware platform. Based on such understanding, the technical solutions of the present application may be embodied in the form of a software product, which may be stored in a storage medium, such as a ROM/RAM, a magnetic disk, an optical disk, or the like, and includes several instructions for enabling a computer device (which may be a personal computer, a mobile terminal, a server, or a network device) to execute the method according to the embodiments or some parts of the embodiments of the present application.
The embodiments in the present specification are described in a progressive manner, and the same or similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. The application is operational with numerous general purpose or special purpose computing system environments or configurations. For example: personal computers, server computers, hand-held or portable devices, tablet-type devices, multiprocessor systems, microprocessor-based systems, set top boxes, programmable electronic devices, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like.
While the present application has been described with examples, those of ordinary skill in the art will appreciate that there are numerous variations and permutations of the present application without departing from the spirit of the application, and it is intended that the appended claims encompass such variations and permutations without departing from the spirit of the application.
Claims (6)
1. A method for debugging page shader code, the method comprising:
loading an analog shader of a primitive shader when debugging shader codes of a triggering page, wherein the analog shader is set to adopt a preset programming design language and simulate the running environment of the primitive shader for compiling and generating;
debugging shader codes of a page in the simulation shader;
translating shader codes debugged in the analog shader into character strings corresponding to the original shader according to a preset conversion rule, and embedding the character strings into corresponding code positions in the original shader;
the original shader is a webGL shader, and the simulation shader is generated by adopting JS codes;
before triggering shader code debugging, the method further comprises:
compiling and generating a code file of an original shader and a code file of a simulated shader, wherein the code files of the original shader and the code file of the simulated shader are provided with corresponding starting and calling parameters;
correspondingly, the loading the analog shader of the original shader when the shader code of the trigger page is debugged includes: and determining the simulated shader which loads the original shader according to the incoming startup debugging parameters.
2. The method for debugging page shader code as claimed in claim 1, wherein the predetermined transformation rules include:
and translating the debugged shader codes into character strings of the original shader according to the prefix information of the variables, wherein the communication execution and calling functions among the variables are the same as those of the original shader.
3. The method of claim 1, wherein after embedding the string into the corresponding code location in the native shader, the method further comprises:
loading shader code for a page in the primitive shader into an image processor.
4. A page shader debugging apparatus, the apparatus comprising:
the debugging and loading module is used for loading an analog shader of the original shader when the shader code of the page is debugged, and the analog shader is set to adopt a preset programming language and simulate the running environment of the original shader for compiling and generating; the original shader is a webGL shader, and the simulation shader is generated by adopting JS code writing;
the debugging processing module is used for debugging the shader codes of the page in the simulation shader;
a code conversion module, configured to translate shader codes debugged in the analog shader into character strings corresponding to the original shader according to a preset conversion rule, and embed the character strings into corresponding code positions in the original shader;
the system comprises a compiling module, a judging module and a judging module, wherein the compiling module is used for compiling and generating a code file of a primitive shader and a code file of a simulation shader, and the code file of the primitive shader and the code file of the simulation shader are provided with corresponding starting and calling parameters;
correspondingly, the debugging and loading module loads the analog shader of the primitive shader when the debugging of the shader codes of the page is triggered comprises the step of determining to load the analog shader of the primitive shader according to the incoming starting and debugging parameters.
5. The page shader debugging apparatus as claimed in claim 4, wherein the predetermined conversion rule includes:
and translating the debugged shader codes into character strings of the original shader according to the prefix information of the variables, wherein the communication execution and calling functions among the variables are the same as those of the original shader.
6. The page shader debugging apparatus of claim 4, wherein the apparatus further comprises:
and the code loading module is used for loading the shader codes of the page in the original shader into the image processor.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610866146.3A CN107038060B (en) | 2016-09-29 | 2016-09-29 | Debugging method and device for page shader codes |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610866146.3A CN107038060B (en) | 2016-09-29 | 2016-09-29 | Debugging method and device for page shader codes |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107038060A CN107038060A (en) | 2017-08-11 |
| CN107038060B true CN107038060B (en) | 2021-02-23 |
Family
ID=59532836
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610866146.3A Active CN107038060B (en) | 2016-09-29 | 2016-09-29 | Debugging method and device for page shader codes |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107038060B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110018952B (en) * | 2018-01-10 | 2022-12-27 | 武汉斗鱼网络科技有限公司 | JS code testing method, JS code storage medium, JS code testing equipment and JS code testing system |
| CN110287100A (en) * | 2019-05-21 | 2019-09-27 | 北京达佳互联信息技术有限公司 | Adjustment method, device, electronic equipment and the storage medium of shader code |
| CN110287106B (en) * | 2019-05-24 | 2023-09-26 | 北京达佳互联信息技术有限公司 | Method and device for debugging shader code, electronic equipment and storage medium |
| CN110543620A (en) * | 2019-09-03 | 2019-12-06 | 武汉中海庭数据技术有限公司 | method and system for drawing graphics primitives based on OpenGL ES2.0 |
| CN112559437A (en) * | 2019-09-25 | 2021-03-26 | 阿里巴巴集团控股有限公司 | Debugging unit and processor |
| CN110928610B (en) * | 2020-02-07 | 2020-05-19 | 南京芯瞳半导体技术有限公司 | Method, device and computer storage medium for verifying shader function |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102930564A (en) * | 2011-09-08 | 2013-02-13 | 微软公司 | Visual shader designer |
| US20130181999A1 (en) * | 2012-01-13 | 2013-07-18 | Microsoft Corporation | Para-virtualized domain, hull, and geometry shaders |
| CN103309786A (en) * | 2012-03-09 | 2013-09-18 | 辉达公司 | Methods and apparatus for interactive debugging on a non-pre-emptible graphics processing unit |
| CN104488001A (en) * | 2012-07-20 | 2015-04-01 | 微软公司 | Customized image filters |
| CN105912655A (en) * | 2016-04-11 | 2016-08-31 | 东南大学 | WebGL-based three-dimensional model display method and corresponding Web-BIM engineering information integration management system |
-
2016
- 2016-09-29 CN CN201610866146.3A patent/CN107038060B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102930564A (en) * | 2011-09-08 | 2013-02-13 | 微软公司 | Visual shader designer |
| US20130181999A1 (en) * | 2012-01-13 | 2013-07-18 | Microsoft Corporation | Para-virtualized domain, hull, and geometry shaders |
| CN103309786A (en) * | 2012-03-09 | 2013-09-18 | 辉达公司 | Methods and apparatus for interactive debugging on a non-pre-emptible graphics processing unit |
| CN104488001A (en) * | 2012-07-20 | 2015-04-01 | 微软公司 | Customized image filters |
| CN105912655A (en) * | 2016-04-11 | 2016-08-31 | 东南大学 | WebGL-based three-dimensional model display method and corresponding Web-BIM engineering information integration management system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107038060A (en) | 2017-08-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107038060B (en) | Debugging method and device for page shader codes | |
| CN109976761B (en) | Software development kit generation method and device and terminal equipment | |
| Anttonen et al. | Transforming the web into a real application platform: new technologies, emerging trends and missing pieces | |
| Anyuru | Professional WebGL programming: developing 3D graphics for the Web | |
| CN111381852A (en) | Application dynamic updating method and device based on Flutter, storage medium and electronic equipment | |
| CN113918195A (en) | Application interface updating method and device, electronic equipment and readable storage medium | |
| CN113168312A (en) | Method for generating binding between C/C + + library and interpreted language, and executing the method to convert three-dimensional (3D) model | |
| CN113031932A (en) | Project development method and device, electronic equipment and storage medium | |
| CN115761082A (en) | Method and apparatus for rendering three-dimensional graphics, electronic device, and storage medium | |
| CN111045707A (en) | Method and device for updating small program, computer equipment and storage medium | |
| CN111971655B (en) | Native runtime techniques for hypertext markup language graphics content | |
| CN110018831B (en) | Program processing method, program processing apparatus, and computer-readable storage medium | |
| Taivalsaari et al. | Web User Interface Implementation Technologies: An Underview. | |
| Kosarevsky et al. | 3D Graphics Rendering Cookbook: A comprehensive guide to exploring rendering algorithms in modern OpenGL and Vulkan | |
| US8856760B2 (en) | Streaming programming generator | |
| CN109815142B (en) | Product testing method and device | |
| JP2007080049A (en) | Built-in program generation method, built-in program development system and information table section | |
| Prasannakumar | A scheme for accelerating image processing algorithms using SIMD for ARM Cortex A based systems | |
| Joshi et al. | Graphics programming for the web | |
| CN114391133A (en) | System and method for GUI development and deployment in real-time systems | |
| Eimandar | DirectX 11.1 Game Programming | |
| CN111240676A (en) | Method and device for generating code of skeleton screen | |
| JP2015069332A (en) | Object range extractor, static verification system, object range extraction method, and object range extraction program for extracting object range to be subjected to static verification by static verification device | |
| Son et al. | Design and implementation of the smart virtual machine on iOS platform for the mobile game portability | |
| CN117472336B (en) | Code generating device based on program API, method, equipment and medium thereof |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20201015 Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands Applicant after: Innovative advanced technology Co.,Ltd. Address before: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands Applicant before: Advanced innovation technology Co.,Ltd. Effective date of registration: 20201015 Address after: Cayman Enterprise Centre, 27 Hospital Road, George Town, Grand Cayman Islands Applicant after: Advanced innovation technology Co.,Ltd. Address before: Greater Cayman, British Cayman Islands Applicant before: Alibaba Group Holding Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |