CN117710554A - 3D graph drawing method and device and electronic equipment - Google Patents

Abstract

The invention discloses a 3D graph drawing method and device and electronic equipment. Wherein the method comprises the following steps: receiving and responding to the 3D graph drawing instruction, and creating a preset canvas element provided with a preset identifier; calling a preset element through an identifier calling element method according to a preset identifier, and calling a context obtaining method to call a web graphic library; determining a rendering environment corresponding to the target graphic type, and determining a 3D graphic parameter corresponding to the target graphic type; under the condition that an antialiasing method is called in the rendering process, a Web graphic library application program interface is called to set a rendering environment, and a document object model application program interface is called to set the antialiasing method; and in a rendering environment, calling a web graphic library application program interface to draw the graphics processed by the antialiasing method according to the 3D graphics parameters, and obtaining the target 3D graphics. The invention solves the technical problem that the drawing of the 3D graph is inconvenient in the related art.

Description

3D graph drawing method and device and electronic equipment

Technical Field

The invention relates to the field of graph drawing, in particular to a 3D graph drawing method and device and electronic equipment.

Background

For the rapid development of modern technology, graphics drawing also has a 3D drawing requirement, but professional software is generally downloaded for drawing when 3D graphics drawing is performed at the present stage. This causes a problem that it is not convenient to draw 3D graphics.

In view of the above problems, no effective solution has been proposed at present.

Disclosure of Invention

The embodiment of the invention provides a 3D graph drawing method and device and electronic equipment, which are used for at least solving the technical problem that 3D graphs are not convenient to draw in the related technology.

According to an aspect of an embodiment of the present invention, there is provided a 3D graphics rendering method including: receiving a 3D graphic drawing instruction, wherein the 3D graphic drawing instruction carries a target graphic type; creating a predetermined canvas element provided with a predetermined identifier in hypertext markup language HTML in response to the 3D graphic drawing instruction; calling the preset canvas element through an identifier calling element getElementById method according to the preset identifier, and calling a acquired context method to call a Web graphic library WebGL; determining a rendering environment corresponding to the target graphic type, and determining a 3D graphic parameter corresponding to the target graphic type; under the condition that an antialiasing method is called in the rendering process, a Web graphic library application program interface (WebGL) API is called to set the rendering environment, and a document object model application program interface (DOM) API is called to set the antialiasing method; and in the rendering environment, calling the WebGL API to draw the graph processed by the antialiasing method according to the 3D graph parameters, and obtaining the target 3D graph after antialiasing processing.

Optionally, after the graphics rendering under the antialiasing method processing is performed by the WebGL API according to the 3D graphics parameter to obtain the antialiased target 3D graphics, the method further includes: receiving a graph modification instruction, wherein the graph modification instruction carries updated content, and the updated content comprises at least one of the following components: a target text element, a target graphic style; in response to the graphic modification instruction, calling an internal hypertext markup language (incerHTML) method to update an initial text element to the target text element under the condition that the updated content is the target text element; and calling a style attribute to modify an initial graphic style into the target graphic style under the condition that the updated content is the target graphic style.

Optionally, after the graphics rendering under the antialiasing method processing is performed by the WebGL API according to the 3D graphics parameter to obtain the antialiased target 3D graphics, the method further includes: receiving a graphic interaction instruction sent by a target user; responding to the graphic interaction instruction, and calling an addEventListener method of an added event monitor to monitor an indication event triggered by the indication equipment of the target user; and determining an interaction mode with the target 3D graph according to the indication event.

Optionally, after the graphics rendering under the antialiasing method processing is performed by the WebGL API according to the 3D graphics parameter to obtain the antialiased target 3D graphics, the method further includes: determining a deletable parameter, wherein the deletable parameter at least comprises: a deletable buffer, deletable texture; and calling a delete buffer method to delete the deletable buffer, and calling a delete texture method to delete the deletable texture.

Optionally, the method further comprises: calling an acquisition error getError method to acquire an error code; under the condition that the error code exists, calling a control console to output a control log method to output error information; and processing the error code according to the error information.

Optionally, the rendering environment includes at least one of: shader context, buffer context, texture context.

Optionally, the 3D graphics parameters include at least one of: setting matrix parameters, binding buffer parameters, enabling vertex attribute parameters and submitting vertex data parameters.

According to an aspect of an embodiment of the present invention, there is provided a 3D graphics rendering apparatus including: the receiving module is used for receiving a 3D graphic drawing instruction, wherein the 3D graphic drawing instruction carries a target graphic type; a creation module for creating a predetermined canvas element provided with a predetermined identifier in a hypertext markup language HTML in response to the 3D graphic drawing instruction; the acquisition module is used for calling the preset canvas element through an identifier calling element getElementById method and calling a Web graphic library WebGL through an acquisition context method according to the preset identifier; the determining module is used for determining a rendering environment corresponding to the target graphic type and determining a 3D graphic parameter corresponding to the target graphic type; the setting module is used for calling a Web graphic library application program interface (WebGL) API to set the rendering environment and calling a document object model application program interface (DOM) API to set the antialiasing method under the condition that the antialiasing method is called in the rendering process; and the drawing module is used for calling the WebGL API to draw the graph processed by the antialiasing method according to the 3D graph parameters in the rendering environment to obtain the target 3D graph after antialiasing processing.

According to an aspect of an embodiment of the present invention, there is provided an electronic apparatus including: a processor; a memory for storing the processor-executable instructions; wherein the processor is configured to execute the instructions to implement the 3D graphics rendering method of any one of the above.

According to an aspect of an embodiment of the present invention, there is provided a computer-readable storage medium, which when executed by a processor of an electronic device, causes the electronic device to perform any one of the above-described 3D graphics rendering methods.

In the embodiment of the invention, a 3D graphics drawing instruction is received, wherein the 3D graphics drawing instruction carries a target graphics type. In response to the 3D graphics rendering instruction, a predetermined canvas element is created in the hypertext markup language HTML with a predetermined identifier set. According to the preset identifier, calling the preset canvas element through the identifier calling element getElementById method, and calling the acquired context method to call the Web graphic library WebGL. A rendering environment corresponding to the target graphics type is determined, and rendering 3D graphics parameters corresponding to the target graphics type are determined. In the case of calling the antialiasing method in the rendering process, the Web graphic library application program interface WebGL API is called to set the rendering environment, and the document object model application program interface DOM API is called to set the antialiasing method. And in a rendering environment, calling a WebGL API to draw the graphics processed by the antialiasing method according to the 3D graphics parameters, and obtaining the target 3D graphics after antialiasing processing. Combining DOM and WebGL, controlling internal elements rendered by WebGL through DOM, and displaying or further operating changes of internal elements rendered by WebGL by DOM, namely enabling 3D graphics to be drawn directly on a webpage. And the antialiasing method uses DOM API to set, so that the antialiasing method can be further coupled with a webpage, and can more conveniently draw 3D graphics on the webpage, thereby solving the technical problem of inconvenient drawing of 3D graphics in the related art.

Drawings

The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this application, illustrate embodiments of the invention and together with the description serve to explain the invention and do not constitute a limitation on the invention. In the drawings:

FIG. 1 is a flow chart of a 3D graphics rendering method according to an embodiment of the present invention;

fig. 2 is a block diagram of a 3D graphic drawing apparatus according to an embodiment of the present invention.

Detailed Description

In order that those skilled in the art will better understand the present invention, a technical solution in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in which it is apparent that the described embodiments are only some embodiments of the present invention, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the present invention without making any inventive effort, shall fall within the scope of the present invention.

It should be noted that the terms "first," "second," and the like in the description and the claims of the present invention and the above figures are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate such that the embodiments of the invention described herein may be implemented in sequences other than those illustrated or otherwise described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

First, partial terms or terminology appearing in describing embodiments of the present application are applicable to the following explanation:

document object model application program interface DOM API (Document Object Model Application Programming Interface): is a set of interfaces that allow developers to programmatically access and manipulate HTML and XML documents. The DOM API provides a set of standard methods and properties for creating, modifying, deleting, and manipulating elements in a document, thereby enabling the construction and interaction of dynamic web pages. Developers can use the DOM APIs to implement operations such as adding new elements, modifying element styles, processing events, and performing document queries and traversals, thereby enabling rich web page interactions and user experiences. DOM APIs are a very important part of web development, providing a powerful tool for developers to help them build dynamic, interactive web page applications.

Example 1

According to an embodiment of the present invention, there is provided an embodiment of a 3D graphics rendering method, it being noted that the steps shown in the flowchart of the drawings may be performed in a computer system such as a set of computer executable instructions, and, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in an order different from that herein.

Fig. 1 is a flowchart of a 3D graphic drawing method according to an embodiment of the present invention, as shown in fig. 1, the method including the steps of:

step S102, receiving a 3D graphics drawing instruction, wherein the 3D graphics drawing instruction carries a target graphics type;

in the present application providing step S102, a 3D graphics drawing instruction is received, so that a 3D graphic of a target graphic type is drawn. The 3D graphics rendering instruction may be triggered in response to a rendering operation by a user, which is not limited herein, and may be set in a customized manner according to an actual application and a scene.

Step S104, in response to the 3D graphic drawing instruction, creating a predetermined canvas element provided with a predetermined identifier in the hypertext markup language HTML;

in the present application, step S104 is provided, in HTML, a < canvas > element is used to draw graphics on a web page. Unlike traditional text-based rendering, the < canvas > element provides a mechanism for drawing graphics using script (typically JavaScript, a JavaScript language). This means that the < canvas > element of HTML5 and JavaScript can be used to dynamically generate and manipulate images. Wherein one < canvas > element has the following basic components: canvas element: a drawing area is defined. Width and height properties: the size of the canvas is defined. Script: the content is drawn using JavaScript. In this scenario, an adaptive setting may be performed.

Step S106, calling a preset canvas element through an identifier calling element getElementById method and calling a context obtaining method to call a Web graphic library WebGL according to a preset identifier;

in the present application provides step S106, invoking the call to the predetermined canvas element through the identifier call element getElementById method may call the canvas to draw the 3D graphic thereon. By calling the get context method to call the web graphics library WebGL, the user can enjoy 3D experience in the browser without installing any plug-in. But also provides a smoother, more realistic 3D effect than traditional 2D rendering. The method also has cross-platform compatibility, provides richer visual effect and interactivity, and enables a user to obtain more immersive experience when the webpage draws the 3D graphics.

For example, a WebGL rendering context may be created using canvas elements. A canvas element is added in the HTML, and the getContext method is used to obtain the WebGL rendering context. For example:

html

<canvas id＝"myCanvas"></canvas>

javascript

const canvas＝document.getElementById("myCanvas")；

const gl＝canvas.getContext("WebGL")；

step S108, determining a rendering environment corresponding to the target graphic type and determining a 3D graphic parameter corresponding to the target graphic type;

in the present application providing step S108, a rendering environment corresponding to the target graphics type is determined, optionally, the rendering environment includes at least one of: shader context, buffer context, texture context. That is, when the rendering environment is set using the WebGL API, the rendering environment includes at least one of: shader context, buffer context, texture context. Including creating specific types of shaders, buffers, textures, etc.

For example, a shader is created using a create shader createshifter method, a buffer is created using a create buffer createsuffer method, and a texture is created using a create texture createsubsxture method.

Determining a 3D graphics parameter corresponding to the target graphics type, optionally the 3D graphics parameter comprising at least one of: setting matrix parameters, binding buffer parameters, enabling vertex attribute parameters and submitting vertex data parameters. That is, the WebGL API is used to set parameters of rendering 3D graphics, such as how to set the matrix, bind buffers, enable vertex attributes, submit vertex data, etc.

For example, a matrix is set using a floating point vector uniportmatrix 4fv method of setting a unified matrix 4x4, a buffer is bound using a binding buffer bind buffer method, a vertex attribute is enabled using a data format and offset vertextribpointer method of setting a vertex attribute array, and vertex data is submitted using a buffer object bufferSubData method of copying a subset of data.

Step S110, under the condition that an antialiasing method is called in the rendering process, a Web graphic library application program interface WebGL API is called to set a rendering environment, and a document object model application program interface DOM API is called to set the antialiasing method;

in the providing step S110, that is, the rendering environment is set through the corresponding WebGL API, it should be noted that it is determined whether to call the antialiasing method.

Antialiasing is a graphics rendering technique that is used to eliminate or reduce jagged edges in an image. In 3D graphics, antialiasing can ensure that edges are smoother, making objects look more natural and realistic.

When the antialiasing method is called, the DOM API can be set for antialiasing processing, instead of the WebGL API, the DOM API can directly interact with the HTML elements, which makes it easier to integrate 3D graphics with other content of the web page. Also, using the DOM API, 3D graphics may be updated and rendered using JavaScript. Also, since WebGL needs to process a large amount of graphics data and a complicated shader program, setting antialiasing processing through DOM API is simpler than setting antialiasing processing using WebGL API.

And step S112, calling a WebGL API to draw the graph processed by the antialiasing method according to the 3D graph parameters in the rendering environment, and obtaining the target 3D graph after antialiasing processing.

In the providing step S112, in the rendering environment, the WebGL API is called to perform graphics rendering under the antialiasing method according to the 3D graphics parameters, so as to achieve the purpose of obtaining the target 3D graphics after antialiasing.

Through the steps S102-S112, a 3D graphics drawing instruction is received, where the 3D graphics drawing instruction carries a target graphics type. In response to the 3D graphics rendering instruction, a predetermined canvas element is created in the hypertext markup language HTML with a predetermined identifier set. According to the preset identifier, calling the preset canvas element through the identifier calling element getElementById method, and calling the acquired context method to call the Web graphic library WebGL. A rendering environment corresponding to the target graphics type is determined, and rendering 3D graphics parameters corresponding to the target graphics type are determined. In the case of calling the antialiasing method in the rendering process, the Web graphic library application program interface WebGL API is called to set the rendering environment, and the document object model application program interface DOM API is called to set the antialiasing method. And in a rendering environment, calling a WebGL API to draw the graphics processed by the antialiasing method according to the 3D graphics parameters, and obtaining the target 3D graphics after antialiasing processing. Combining DOM and WebGL, controlling internal elements rendered by WebGL through DOM, and displaying or further operating changes of internal elements rendered by WebGL by DOM, namely enabling 3D graphics to be drawn directly on a webpage. And the antialiasing method uses DOM API to set, so that the antialiasing method can be further coupled with a webpage, and can more conveniently draw 3D graphics on the webpage, thereby solving the technical problem of inconvenient drawing of 3D graphics in the related art.

As an optional embodiment, after the graphics drawing under the antialiasing method processing is performed by calling the WebGL API according to the 3D graphics parameter to obtain the target 3D graphics after the antialiasing processing, the method further includes: receiving a graph modification instruction, wherein the graph modification instruction carries updated content, and the updated content comprises at least one of the following components: a target text element, a target graphic style; in response to the graphic modification instruction, calling an internal hypertext markup language (innerHTML) method to update the initial text element to a target text element under the condition that the updated content is the target text element; and calling the style attribute to modify the initial graphic style into the target graphic style under the condition that the updated content is the target graphic style.

In this embodiment, the graphics modification instructions are received, typically by changing the WebGL rendering content, typically because some variables or states have changed, such as the position, color, or other attributes of the 3D model. To ensure that other portions of the web page remain synchronized with the changes, the other portions on the web page may be updated by the API to reflect the changes. For example, the content of a text element is updated using the innerHTML method, the style of the element is modified using style attributes, and so on. The property of the incerrhtml allows the internal HTML content of one HTML element to be obtained or set. It can be used to update the content of the text element to reflect changes in WebGL rendering content. For example, if there is a text element showing the game count, the content of this element may be updated using incerhtml as the game score changes. The style attribute allows direct access to and modification of the cascading style sheet CSS style for an element. It can be used to modify the style of an element in response to changes in WebGL rendering content. For example, assuming there is one element that displays the 3D model color, the style attribute may be used to dynamically change its background color to reflect the color change of the model.

As an optional embodiment, after the graphics drawing under the antialiasing method processing is performed by calling the WebGL API according to the 3D graphics parameter to obtain the target 3D graphics after the antialiasing processing, the method further includes: receiving a graphic interaction instruction sent by a target user; responding to the graphic interaction instruction, and calling an addEventListener method of an added event monitor to monitor an indication event triggered by an indication device of a target user; and determining the interaction mode with the target 3D graph according to the indication event.

In this embodiment, the case when the user interacts with the UI of the web page is illustrated, the user's mouse or keyboard event may be listened to through JavaScript. These events may include mouse clicks, movements, keyboard keys, etc. By using the addEventListener method, a callback function can be specified that will be called when a particular event occurs. And determining the interaction mode with the target 3D graph by monitoring the indication event.

For example, a user may rotate and scale a 3D object in a scene via a mouse. When the user clicks the left mouse button, he may listen to a "mouse down" event and then adjust the position or scale of the 3D object according to the position of the mouse and the state of the mouse when pressed.

That is, when a user interacts with the UI of the web page, information input by the user may be acquired, and then the rendered contents of WebGL may be updated according to the information. For example, the addeventlist method is used to monitor a user's mouse or keyboard event, and then adjust rendering contents according to the event information.

As an optional embodiment, after the graphics drawing under the antialiasing method processing is performed by calling the WebGL API according to the 3D graphics parameter to obtain the target 3D graphics after the antialiasing processing, the method further includes: determining a deletable parameter, wherein the deletable parameter comprises at least: a deletable buffer, deletable texture; and calling a delete buffer method to delete the deletable buffer, and calling a delete texture method to delete the deletable texture.

In this embodiment, memory and resource management is very important in WebGL and other graphics rendering techniques. This involves efficient use of computer memory and processor resources to ensure faster and smoother application operation. Releasing or deleting resources that are no longer needed is important in graphics rendering because browsers typically have some limitation on the memory that can be used by a single page. If a page continues to accumulate resources without freeing it, it may cause the page to slow down, the browser to crash, or be forced to perform memory cleanup.

Here, a deleteBuffer may refer to a buffer (e.g., a vertex buffer) that may be deleted using the deleteBuffer method when it is no longer needed. In this way, the system can reclaim the memory occupied by this buffer and reuse it in the future. If the buffer area which is not needed is not deleted in time, the memory can be used too much, so that the rendering performance is affected.

Here, the deleteTexture means that when a texture is not required any more, it can be deleted using the deleteTexture method. Again, this allows the system to reclaim the memory occupied by the texture for future use.

In addition to the above methods, other resource management and optimization techniques may be employed, such as: texture compression is used: compressing textures may reduce memory usage and improve rendering performance. Reasonably managing shader resources: shaders are programs for rendering graphics, ensuring that only the necessary shaders are created and loaded, and that they are deleted when no longer needed. Using buffering and multiplexing: for reusable resources, such as textures or buffers, it is possible to multiplex them instead of creating new resources each time it is needed. Limiting memory usage: the amount of memory used by the application is intentionally controlled and limited to avoid unnecessary memory usage, etc.

As an alternative embodiment, further comprising: calling an acquisition error getError method to acquire an error code; under the condition that an error code exists, calling a control console to output a control log method to output error information; and processing the error code according to the error information.

In this embodiment, in 3D graphics rendering, errors are common due to the complexity of the browser environment and graphics rendering. To ensure the stability and reliability of the program, it is desirable to be able to capture and handle these errors.

Among them, the getError method, getError is a method provided by WebGL API for acquiring the last error in the current context. This method returns an enumerated value that indicates the particular error code. For example, if gl. Invalid_operation is returned, this indicates that an invalid OPERATION has occurred. Log is a console logging method of a browser, and can be used to output debug information. In WebGL development, it can be used to output error information and help diagnose problems.

That is, various errors may occur in the process of using the WebGL API. An API may be used to capture and process these errors. For example, error codes are acquired using the getError method, error information is output using the control. Ensuring that the program can handle in time when it encounters an error, rather than crashing or causing unpredictable behavior.

By the alternative embodiments, at least the following advantages can be achieved:

(1) Rich interactivity: webGL may create complex 3D graphics, while DOM may be used to handle user input and interactions. Combining the two, a 3D webpage application with rich interactivity can be created;

(2) WebGL can generate highly realistic 3D effects, combined with the interactive functionality of the DOM, can provide a more immersive experience for the user, such as 3D games, virtual reality or augmented reality applications;

(3) Both WebGL and DOM are part of the Web standard and therefore can run on any browser that supports these standards, including desktops and mobile devices.

It should be noted that, for simplicity of description, the foregoing method embodiments are all described as a series of acts, but it should be understood by those skilled in the art that the present invention is not limited by the order of acts described, as some steps may be performed in other orders or concurrently in accordance with the present invention. Further, those skilled in the art will also appreciate that the embodiments described in the specification are all preferred embodiments, and that the acts and modules referred to are not necessarily required for the present invention.

From the description of the above embodiments, it will be clear to a person skilled in the art that the method according to the above embodiments may be implemented by means of software plus the necessary general hardware platform, but of course also by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) comprising several instructions for causing a terminal device (which may be a mobile phone, a computer, a server, or a network device, etc.) to perform the method of the various embodiments of the present invention.

Example 2

According to an embodiment of the present invention, there is also provided an apparatus for implementing the above 3D graphics rendering method, and fig. 2 is a block diagram of a 3D graphics rendering apparatus according to an embodiment of the present invention, as shown in fig. 2, including: the device is described in detail below as a receiving module 202, a creating module 204, an obtaining module 206, a determining module 208, a setting module 210 and a drawing module 212.

A receiving module 202, configured to receive a 3D graphics drawing instruction, where the 3D graphics drawing instruction carries a target graphics type;a creation module 204, coupled to the receiving module 202, for creating a predetermined canvas element with a predetermined identifier in the hypertext markup language HTML in response to the 3D graphics rendering instruction; an obtaining module 206, coupled to the creating module 204, for calling a predetermined canvas element by calling an element getElementById method according to a predetermined identifier, and calling a web graphic library WebGL by calling an obtaining context method; a determining module 208, coupled to the obtaining module 206, for determining a rendering environment corresponding to the target graphics type, and determining a 3D graphics parameter corresponding to the target graphics type; the setting module 210 is connected to the determining module 208, and is configured to call a web graphics library application program interface WebGL API to set a rendering environment and call a document object model application program interface DOM API to set an antialiasing method when the antialiasing method is called in the rendering process; and the drawing module 212 is connected to the setting module 210, and is configured to call the WebGL API to draw the graphics under the antialiasing method according to the 3D graphics parameters in the rendering environment, so as to obtain the antialiased target 3D graphics.

It should be noted that the above-mentioned receiving module 202, creating module 204, obtaining module 206, determining module 208, setting module 210 and drawing module 212 correspond to steps S102 to S112 in implementing the 3D graphics drawing method, and the plurality of modules are the same as the examples and application scenarios implemented by the corresponding steps, but are not limited to those disclosed in the above-mentioned embodiment 1.

Example 3

According to another aspect of the embodiment of the present invention, there is also provided an electronic device including: a processor; a memory for storing processor-executable instructions, wherein the processor is configured to execute the instructions to implement the 3D graphics rendering method of any of the above.

Example 4

According to another aspect of embodiments of the present invention, there is also provided a computer-readable storage medium, which when executed by a processor of an electronic device, causes the electronic device to perform the 3D graphics rendering method of any one of the above.

The foregoing embodiment numbers of the present invention are merely for the purpose of description, and do not represent the advantages or disadvantages of the embodiments.

In the foregoing embodiments of the present invention, the descriptions of the embodiments are emphasized, and for a portion of this disclosure that is not described in detail in this embodiment, reference is made to the related descriptions of other embodiments.

In the several embodiments provided in the present application, it should be understood that the disclosed technology content may be implemented in other manners. The above-described embodiments of the apparatus are merely exemplary, and the division of the units, for example, may be a logic function division, and may be implemented in another manner, for example, a plurality of units or components may be combined or may be integrated into another system, or some features may be omitted, or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed with each other may be through some interfaces, units or modules, or may be in electrical or other forms.

The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

In addition, each functional unit in the embodiments of the present invention may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit. The integrated units may be implemented in hardware or in software functional units.

The integrated units, if implemented in the form of software functional units and sold or used as stand-alone products, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied essentially or in part or all of the technical solution or in part in the form of a software product stored in a storage medium, including instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a removable hard disk, a magnetic disk, or an optical disk, or other various media capable of storing program codes.

The foregoing is merely a preferred embodiment of the present invention and it should be noted that modifications and adaptations to those skilled in the art may be made without departing from the principles of the present invention, which are intended to be comprehended within the scope of the present invention.

Claims (10)

1. A 3D graphics rendering method, comprising:

receiving a 3D graphic drawing instruction, wherein the 3D graphic drawing instruction carries a target graphic type;

creating a predetermined canvas element provided with a predetermined identifier in hypertext markup language HTML in response to the 3D graphic drawing instruction;

calling the preset canvas element through an identifier calling element getElementById method according to the preset identifier, and calling a acquired context method to call a Web graphic library WebGL;

determining a rendering environment corresponding to the target graphic type, and determining a 3D graphic parameter corresponding to the target graphic type;

under the condition that an antialiasing method is called in the rendering process, a Web graphic library application program interface (WebGL) API is called to set the rendering environment, and a document object model application program interface (DOM) API is called to set the antialiasing method;

and in the rendering environment, calling the WebGL API to draw the graph processed by the antialiasing method according to the 3D graph parameters, and obtaining the target 3D graph after antialiasing processing.

2. The method of claim 1, wherein the calling the WebGL API performs graphics rendering under the antialiasing method according to the 3D graphics parameters, and further comprises, after obtaining the antialiased target 3D graphics:

receiving a graph modification instruction, wherein the graph modification instruction carries updated content, and the updated content comprises at least one of the following components: a target text element, a target graphic style;

in response to the graphic modification instruction, calling an internal hypertext markup language (incerHTML) method to update an initial text element to the target text element under the condition that the updated content is the target text element;

and calling a style attribute to modify an initial graphic style into the target graphic style under the condition that the updated content is the target graphic style.

3. The method of claim 1, wherein the calling the WebGL API performs graphics rendering under the antialiasing method according to the 3D graphics parameters, and further comprises, after obtaining the antialiased target 3D graphics:

receiving a graphic interaction instruction sent by a target user;

responding to the graphic interaction instruction, and calling an addEventListener method of an added event monitor to monitor an indication event triggered by the indication equipment of the target user;

and determining an interaction mode with the target 3D graph according to the indication event.

4. The method of claim 1, wherein the calling the WebGL API performs graphics rendering under the antialiasing method according to the 3D graphics parameters, and further comprises, after obtaining the antialiased target 3D graphics:

determining a deletable parameter, wherein the deletable parameter at least comprises: a deletable buffer, deletable texture;

and calling a delete buffer method to delete the deletable buffer, and calling a delete texture method to delete the deletable texture.

5. The method as recited in claim 1, further comprising:

calling an acquisition error getError method to acquire an error code;

under the condition that the error code exists, calling a control console to output a control log method to output error information;

and processing the error code according to the error information.

6. The method of claim 1, wherein the rendering environment comprises at least one of: shader context, buffer context, texture context.

7. The method according to any one of claims 1 to 6, wherein the 3D graphics parameters include at least one of: setting matrix parameters, binding buffer parameters, enabling vertex attribute parameters and submitting vertex data parameters.

8. A 3D graphics rendering apparatus, comprising:

the receiving module is used for receiving a 3D graphic drawing instruction, wherein the 3D graphic drawing instruction carries a target graphic type;

a creation module for creating a predetermined canvas element provided with a predetermined identifier in a hypertext markup language HTML in response to the 3D graphic drawing instruction;

the acquisition module is used for calling the preset canvas element through an identifier calling element getElementById method and calling a Web graphic library WebGL through an acquisition context method according to the preset identifier;

the determining module is used for determining a rendering environment corresponding to the target graphic type and determining a 3D graphic parameter corresponding to the target graphic type;

the setting module is used for calling a Web graphic library application program interface (WebGL) API to set the rendering environment and calling a document object model application program interface (DOM) API to set the antialiasing method under the condition that the antialiasing method is called in the rendering process;

and the drawing module is used for calling the WebGL API to draw the graph processed by the antialiasing method according to the 3D graph parameters in the rendering environment to obtain the target 3D graph after antialiasing processing.

9. An electronic device, comprising:

a processor;

a memory for storing the processor-executable instructions;

wherein the processor is configured to execute the instructions to implement the 3D graphics rendering method of any one of claims 1 to 7.

10. A computer readable storage medium, characterized in that instructions in the computer readable storage medium, when executed by a processor of an electronic device, enable the electronic device to perform the 3D graphics rendering method of any one of claims 1 to 7.