WO2018050003A1

WO2018050003A1 - 3d canvas web page element rendering method and apparatus, and electronic device

Info

Publication number: WO2018050003A1
Application number: PCT/CN2017/100536
Authority: WO
Inventors: 黄刚; 潘华; 李�杰; 胡吉嵩
Original assignee: 阿里巴巴集团控股有限公司; 黄刚; 潘华; 李�杰; 胡吉嵩
Priority date: 2016-09-14
Filing date: 2017-09-05
Publication date: 2018-03-22
Also published as: CN107832108A; TW201812613A; CN107832108B; CN113282360A

Abstract

A 3D canvas web page element rendering method and apparatus and an electronic device, and a 2D canvas web page element rendering method and apparatus and an electronic device. The 3D canvas web page element rendering method comprises: intercepting a WebGL drawing instruction with respect to a 3D canvas web page element (S101); transmitting instruction information carried by the WebGL drawing instruction to a system framework layer (S103); according to the instruction information, generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction (S105); and drawing the OpenGL drawing instruction onto an OpenGL rendering window of the system, and forming a rendering result of the 3D canvas web page element (S107). The method can prevent the use of a system Webview to render and draw a 3D canvas web page element, thereby achieving the effect of improving the compatibility and coverage ratio supported by 3D Canvas.

Description

Rendering method, device and electronic device of 3D canvas webpage element

Technical field

The present application relates to the field of mobile Internet technologies, and in particular, to a method, an apparatus, and an electronic device for rendering a 3D canvas webpage element. The application also relates to a method, a device and an electronic device for rendering a 2D canvas webpage element.

Background technique

With the development of Web technologies and the landing of HTML5 standards, HTML5 development is getting hotter and hotter. HTML5 development has the advantages of cross-platform, low development cost, fast iteration, and easy dynamic release. It has a larger and larger proportion in mobile app development. As an important feature of HTML5, Canvas element plays an indispensable role in mobile development page display, especially in image processing and animation display.

In the mobile application, HTML5's 3D canvas relies on the system Webview to complete the rendering, which depends on whether the system Webview supports the WebGL interface. WebGL is a 3D drawing standard that allows JavaScript and OpenGL ES 2.0 to be combined. By adding a JavaScript binding to OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas, so that Web developers You can use the system graphics card to more smoothly display 3D scenes and models in the browser, as well as create complex navigation and data visualization. Obviously, the WebGL technology standard eliminates the hassle of developing web-specific rendering plug-ins, can be used to create website pages with complex 3D structures, and can even be used to design 3D web games.

However, WebGL in HTML5's 3D canvas is not supported until Android 5.0 and iOS 8.0, and the supported version is only WebGL 1.1, not the latest WebGL 2.0. In summary, the prior art has some problems that the mobile operating system does not support WebGL rendering.

Summary of the invention

The present application provides a method, a device, and an electronic device for rendering a 3D canvas webpage element to solve the problem that a part of the mobile operating system does not support WebGL rendering in the prior art. The application also provides a method, a device and an electronic device for rendering a 2D canvas webpage element.

The application provides a rendering method of a 3D canvas webpage element, including:

Intercepting WebGL drawing instructions for 3D canvas webpage elements;

Transmitting instruction information carried by the WebGL drawing instruction to a system framework layer;

Generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information;

The OpenGL drawing instruction is drawn to the OpenGL rendering window of the system to form a rendering result of the 3D canvas webpage element.

Optionally, the intercepting the WebGL drawing instruction for the 3D canvas webpage element is as follows:

The WebGL drawing instruction is intercepted by the replacement DOM object of the 3D canvas webpage element.

Optionally, it also includes:

The DOM object of the 3D canvas webpage element is replaced with the replacement DOM object.

Optionally, before the replacing the DOM object of the 3D canvas webpage element with the replacement DOM object, the method further includes:

Determining whether the operating system allows to perform the operation of DOM object replacement; if yes, proceeding to the next step; if not, using the Webview window to draw the 3D canvas webpage element.

Optionally, the transmitting the instruction information carried by the WebGL drawing instruction to the system framework layer includes:

Extracting the instruction information from the WebGL drawing instruction;

Generating, according to the first preset instruction conversion rule and the instruction information, a rendering command corresponding to the WebGL drawing instruction;

The rendering command is passed from the system framework layer.

Optionally, the instruction information carried by the WebGL drawing instruction is transmitted to the system framework layer by using the following manner:

The instruction information is transmitted to the system framework layer via a JS bridge or a JavaScript engine.

The instruction information is transmitted to the system framework layer according to a preset time interval.

Optionally, the generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction includes:

Transmitting the instruction information from the system framework layer to a system local layer;

In the system local layer, the OpenGL drawing instruction is generated according to the instruction information.

Optionally, the drawing the OpenGL drawing instruction to the OpenGL rendering window of the system includes:

Obtaining context information and a rendering target corresponding to the 3D canvas webpage element;

Performing graphics rendering on the rendering target according to the context information and the OpenGL drawing instruction;

The rendering target is input to an offscreen buffer of the system.

Optionally, the inputting the rendering target to the off-screen buffer of the system is as follows:

A plurality of the rendering targets are synthesized into the off-screen buffer by FBO technology; different rendering targets correspond to different 3D canvas webpage elements.

Optionally, before the acquiring the context information corresponding to the 3D canvas element and the rendering target, the method further includes:

Determining whether the context information and the rendering target are present; if not, creating the context information and the rendering target, and binding the context information and the rendering target.

Optionally, it also includes:

The OpenGL rendering window and the Webview window of the system are combined to form a rendering result of the webpage where the 3D canvas webpage element is located.

Optionally, the synthesizing the OpenGL rendering window and the webview window of the system are as follows:

The OpenGL rendering window and the Webview window are mixed by a window management mechanism of the system.

Optionally, the non-3D canvas webpage element in the webpage is drawn in the webview window.

Optionally, the system includes an Andriod system or an iOS system.

Correspondingly, the present application further provides a rendering device for a 3D canvas webpage element, including:

a WebGL instruction intercepting unit for intercepting a WebGL drawing instruction for a 3D canvas webpage element;

a WebGL instruction transfer unit, configured to transfer instruction information carried by the WebGL drawing instruction to a system framework layer;

An OpenGL instruction generating unit, configured to generate an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information;

An OpenGL instruction drawing unit is configured to draw the OpenGL drawing instruction into an OpenGL rendering window of the system to form a rendering result of the 3D canvas webpage element.

Optionally, the WebGL instruction intercepting unit is specifically configured to intercept the WebGL drawing instruction by using a replacement DOM object of the 3D canvas webpage element.

Optionally, the WebGL instruction delivery unit includes:

An instruction information extraction subunit, configured to extract the instruction information from the WebGL drawing instruction;

a rendering command generating subunit, configured to generate a rendering command corresponding to the WebGL drawing instruction according to the first preset instruction conversion rule and the instruction information;

A rendering command transfer subunit is configured to transfer the rendering command from the system framework layer.

Optionally, the OpenGL instruction generating unit includes:

An instruction information transmitting subunit, configured to transfer the instruction information from the system framework layer to a system local layer;

The OpenGL instruction generation subunit is configured to generate the OpenGL drawing instruction according to the instruction information in the local layer of the system.

Correspondingly, the present application further provides an electronic device, including:

monitor;

Processor;

a program for storing a rendering method for implementing a 3D canvas webpage element. After the device is powered on and runs the program of the rendering method of the 3D canvas webpage element by the processor, the following steps are performed: intercepting the 3D canvas webpage element a WebGL drawing instruction; transmitting instruction information carried by the WebGL drawing instruction to a system framework layer; generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information; and drawing the OpenGL drawing instruction to a system OpenGL Rendering a window to form a rendering result of the 3D canvas webpage element.

Correspondingly, the present application further provides a method for rendering a 2D canvas webpage element, including:

Intercepting drawing instructions for 2D canvas webpage elements;

Transmitting instruction information carried by the drawing instruction of the 2D canvas webpage element to the system framework layer;

Generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element according to the instruction information;

The OpenGL drawing instruction is drawn to the OpenGL rendering window of the system to form a rendering result of the 2D canvas webpage element.

Optionally, the intercepting the WebGL drawing instruction for the 2D canvas webpage element is as follows:

Drawing instructions of the 2D canvas webpage element are intercepted by the replacement DOM object of the 2D canvas webpage element.

Optionally, the transmitting the instruction information carried by the drawing instruction of the 2D canvas webpage element to the system framework layer, including:

Extracting the instruction information from a drawing instruction of the 2D canvas webpage element;

Generating, according to the first preset instruction conversion rule and the instruction information, a rendering command corresponding to the drawing instruction of the 2D canvas webpage element;

The rendering command is passed from the system framework layer.

Optionally, the generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element includes:

Obtaining context information and a rendering target corresponding to the 2D canvas webpage element;

The rendering target is input to an offscreen buffer of the system.

Optionally, it also includes:

The OpenGL rendering window and the Webview window of the system are combined to form a rendering result of the webpage where the 2D canvas webpage element is located.

Correspondingly, the present application further provides a rendering apparatus for a 2D canvas webpage element, including:

An instruction intercepting unit, configured to intercept a drawing instruction for a 2D canvas webpage element;

An instruction transmitting unit, configured to transmit instruction information carried by the drawing instruction of the 2D canvas webpage element to a system framework layer;

An OpenGL instruction generating unit, configured to generate an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element according to the instruction information;

An OpenGL instruction drawing unit is configured to draw the OpenGL drawing instruction to an OpenGL rendering window of the system to form a rendering result of the 2D canvas webpage element.

Optionally, the instruction intercepting unit is configured to intercept a drawing instruction of the 2D canvas webpage element by using a replacement DOM object of the 2D canvas webpage element.

Optionally, the instruction transmission unit includes:

An instruction information extraction subunit, configured to extract the instruction information from a drawing instruction of the 2D canvas webpage element;

a rendering command generating subunit, configured to generate a rendering command corresponding to the drawing instruction of the 2D canvas webpage element according to the first preset instruction conversion rule and the instruction information;

Optionally, the OpenGL instruction generating unit includes:

An OpenGL instruction generation subunit is configured to generate the OpenGL drawing instruction according to the instruction information in the system local layer.

monitor;

Processor;

a program for storing a rendering method for implementing a 2D canvas webpage element. After the device is powered on and runs the program of the rendering method of the 2D canvas webpage element by the processor, the following steps are performed: intercepting the 2D canvas webpage element a drawing instruction; transmitting instruction information carried by the drawing instruction of the 2D canvas webpage element to the system framework layer; and generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element according to the instruction information; The drawing instructions are drawn to the OpenGL rendering window of the system to form a rendering result of the 2D canvas web page element.

Compared with the prior art, the method provided by the present application intercepts a WebGL drawing instruction for a 3D canvas webpage element; transmits instruction information carried by the WebGL drawing instruction to a system framework layer; and generates and coordinates according to the instruction information. An OpenGL drawing instruction corresponding to the WebGL drawing instruction; the OpenGL drawing instruction is drawn to an OpenGL rendering window of the system to form a rendering result of the 3D canvas webpage element.

Using the rendering method of the 3D canvas webpage element provided by the present application, the intercepted instruction information carried by the WebGL drawing instruction for the 3D canvas webpage element is transmitted from the client script layer to the system framework layer, and corresponding to the WebGL drawing instruction according to the instruction information. OpenGL drawing instructions, then draw OpenGL drawing instructions into the system's OpenGL rendering window to form the rendering result of the 3D canvas web page elements; this way, avoid using the system Webview to render the 3D canvas web page elements; therefore, can improve the movement The compatibility and coverage of HTML5 3D Canvas in web applications enables applications in mobile devices that do not support WebGL or support WebGL to be animated using WebGL.

The rendering method of the 3D canvas webpage element provided by the present application fully removes the dependence on the operating system by introducing the JavaScript bridge layer and the system framework layer, and is compatible with the existing released mobile operating system, and has strong compatibility, so that Achieve cross-platform technical effects.

DRAWINGS

1 is a flowchart of an embodiment of a method for rendering a 3D canvas webpage element provided by the present application;

2 is a schematic structural diagram of an embodiment of a method for rendering a 3D canvas webpage element provided by the present application;

3 is a specific flowchart of an embodiment of a method for rendering a 3D canvas webpage element provided by the present application;

4 is a schematic diagram of an embodiment of a rendering apparatus for a 3D canvas webpage element provided by the present application;

FIG. 5 is a schematic diagram of an embodiment of an electronic device provided by the present application; FIG.

6 is a flowchart of an embodiment of a method for rendering a 2D canvas webpage element provided by the present application;

7 is a schematic structural diagram of an embodiment of a method for rendering a 2D canvas webpage element provided by the present application;

8 is a specific flowchart of an embodiment of a method for rendering a 2D canvas webpage element provided by the present application;

9 is a schematic diagram of an embodiment of a rendering device of a 2D canvas webpage element provided by the present application;

FIG. 10 is a schematic diagram of an embodiment of an electronic device provided by the present application.

detailed description

Numerous specific details are set forth in the description below in order to provide a thorough understanding of the application. However, the present application can be implemented in many other ways than those described herein, and those skilled in the art can make similar promotion without departing from the scope of the present application, and thus the present application is not limited by the specific embodiments disclosed below.

In the present application, a method, a device, and an electronic device for rendering a 3D canvas webpage element are provided. Detailed description will be made one by one in the following embodiments.

The basic idea of the rendering method of the 3D canvas webpage element provided by the present application is: intercepting the WebGL drawing instruction of the 3D canvas webpage element, and transmitting the instruction information carried by the intercepted WebGL drawing instruction from the client script layer to the system framework. Layer, and according to the instruction information, obtain the OpenGL drawing instruction corresponding to the WebGL drawing instruction, and then draw the OpenGL drawing instruction into the OpenGL rendering window of the system to form a rendering result of the 3D canvas webpage element. By avoiding the use of the system Webview to render and render 3D canvas webpage elements, the compatibility and coverage of HTML5 3D Canvas support in mobile web applications can be improved.

Please refer to FIG. 1 , which is a flowchart of an embodiment of a method for rendering a 3D canvas webpage element of the present application. The method includes the following steps:

Step S101: intercepting a WebGL drawing instruction for the 3D canvas webpage element.

The canvas tag appears in HTML5. The first to support 2D graphics rendering, now with WebGL-based 3D rendering. The canvas element is a rectangular area that controls each pixel in it. The canvas element itself has no drawing capabilities, and all drawing work must be done inside JavaScript, ie the canvas element uses JavaScript to draw an image on a web page.

WebGL is a set of 3D graphics API based on OpenGL ES 2.0 that allows 3D rendering to be implemented in web pages using OpenGL-like WebGL. WebGL perfectly solves two problems of existing Web interactive 3D animation: First, it implements Web interactive 3D animation through HTML script itself, without any browser plug-in support; Second, it utilizes the underlying graphics. Graphics rendering with hardware acceleration is achieved through a unified, standard, cross-platform OpenGL interface.

WebGL's graphics API is used by the HTML 5 3D canvas tag. This application refers to a drawing operation instruction for a 3D canvas webpage element in a JavaScript code, which is called a WebGL drawing instruction.

For example, the code for a canvas element is <canvas id="myCanvas"width="200"height="100"></canvas>, which includes the id attribute, the width attribute, and the height attribute; the JavaScript drawing code for the element Can be as follows:

Var c=document.getElementById("myCanvas");

Var cxt=c.getContext("3d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

As can be seen from the above code, JavaScript uses the id to find the canvas element, and then creates the context object. The getContext("3d") object is a built-in HTML5 object with a variety of methods for drawing 3D graphics; among them, cxt.fillRect(0, The 0, 150, 75) instruction is a WebGL drawing instruction; through the above code, a red rectangle can be drawn in the canvas element.

In the default case of the system, the 3D canvas webpage element is drawn through the webview window of the system; and the method provided by the present application intercepts the WebGL drawing instruction of the 3D canvas webpage element, and draws the 3D canvas webpage element in the system. OpenGL rendering in the window.

The method provided by the present application does not limit the interception manner of the WebGL drawing instruction, and the WebGL drawing instruction for the 3D canvas webpage element can be intercepted by any technique.

As an optional solution, the step may be implemented by intercepting the WebGL drawing instruction by replacing the DOM object of the 3D canvas webpage element.

The DOM (Document Object Model) of the webpage where the 3D canvas webpage element is located includes a DOM object corresponding to the 3D canvas webpage element, and the DOM can be accessed through JavaScript (and other programming languages).

The replacement DOM object refers to a replacement object of the DOM object of the 3D canvas webpage element. To intercept the WebGL drawing instruction by the replacement DOM object, firstly, the DOM object of the 3D canvas webpage element in the DOM tree of the webpage where the 3D canvas webpage element is located needs to be replaced with the replacement DOM object.

In a specific implementation, the 3D canvas webpage element may be first obtained by the getElementById(id) method, and then the replacement DOM object of the 3D canvas webpage element is inserted by the appendChild(node) method, and the replacement DOM object may be a customized sub-object. Node, and finally, remove the 3D canvas page element by the removeChild(node) method. After the above processing, the WebGL drawing instruction for the 3D canvas webpage element can be intercepted by replacing the DOM object.

As an optional solution, before the replacing the DOM object of the 3D canvas webpage element with the replacement DOM object, the method further includes: determining whether the operating system allows an operation of performing DOM object replacement; If the result of the determination is yes, the step of replacing the DOM object of the 3D canvas webpage element with the replacement DOM object is performed; otherwise, the 3D canvas webpage element is drawn using a Webview window.

In this way of judging processing, if the setting process that does not allow DOM object replacement is performed in advance in order to ensure the security of the operating system, the 3D canvas webpage element can be drawn through the default Webview window of the system, thereby improving the user. Experience.

After intercepting the WebGL drawing instruction for the 3D canvas webpage element, the next step is taken to transfer the instruction information carried by the intercepted WebGL drawing instruction from the client script layer to the system framework layer.

Step S103: Transfer the instruction information carried by the WebGL drawing instruction to the system framework layer.

The instruction information carried by the WebGL drawing instruction includes, but is not limited to, an instruction name and an instruction parameter. For example, the drawCircle (200, 300, 5) is a name of the instruction carried by the WebGL drawing instruction, and the instruction parameter is: the x coordinate is 200. The y coordinate is 300 and the radius is 5.

In this step S103, the instruction information carried by the WebGL drawing instruction may be transmitted from the client script layer to the system framework layer in a form of directly transmitting the instruction information, and the following preferred solution may also be adopted as a specific implementation.

As a preferred solution, the step S103 may include the following specific steps: 1) extracting the instruction information from the WebGL drawing instruction; 2) generating a UI according to the first preset instruction conversion rule and the instruction information. a rendering command corresponding to the WebGL drawing instruction; 3) transmitting the rendering command to the system framework layer.

Through the second step, the various instruction information may be spliced according to the first preset instruction conversion rule to form a preset form of the rendering command (ie, the normalized expression form of the instruction information), and then the third step is used to render The command form transfers the instruction information from the client script layer to the system framework layer; this processing method makes it easy for the subsequent links to parse the command, and then obtains the OpenGL drawing instruction corresponding to the WebGL drawing instruction.

In this embodiment, a GCanvas class is set, and the class includes the instruction conversion program code corresponding to the second step described above as follows:

For example, the drawing instruction of WebGL is: WebGLRenderingContext.uniform4f(location, x, y, z, w). After the above code processing, the instruction is converted into a rendering command (command string): "17, 3, 100, 200, 300, 400;"; where "17" refers to the instruction ID of the uniform4f method in GCanvas, "3" refers to the ID of the location object, "100, 200, 300" represents the position "x, y, z", "400" Represents the width "w", the comma "," is a variable separator in GCanvas, and the semicolon ";" indicates the command terminator in GCanvas.

It should be noted that both the step S103 and the previous step S101 are run in the client script layer. The client script layer may include the following functions: 1) finding whether there is a replaceable 3D canvas element in the HTML5 page, and if it can be successfully replaced, a new replacement DOM object is inserted into the original DOM tree, and the original The 3D canvas element is deleted, all subsequent calls and operations on the original 3D canvas element will be hosted by the newly inserted DOM object; 2) the WebGL drawing instruction for the original 3D canvas webpage element is intercepted, and the instruction information carried by the drawing instruction is The client script layer is passed to the system framework layer. In addition, the client script layer is further configured to respond to a user's interaction instruction to a webpage element, a response callback function, calculate a size and location of a canvas webpage element, and layer management of a plurality of canvas webpage elements.

The system framework layer refers to an application framework layer that uses an operating system native language development program. For example, when the method of the present application is applied in an Android system, the system framework layer is a program layer developed by the Java language; When the method is applied in the iOS system, the system framework layer is the program layer developed by the Object-C language.

In a specific implementation, the instruction information may be transmitted from the client script layer to the system framework layer in a real-time manner. However, since this method requires a rendering process of the system frame layer for each intercepted instruction, this processing method has a problem of degrading system performance.

In order to avoid negative impact on system performance, as a preferred solution, the step may be implemented by transmitting the instruction information from the client script layer to the system framework layer according to a preset time interval. In this way, a certain image frame rate can be guaranteed, thereby satisfying the user's visual experience and avoiding degrading system performance.

In addition, in order to be able to transfer the instruction information from the client script layer to the system framework layer, the following technology may be implemented: the instruction information is transmitted to the system framework layer through a JS bridge or a JavaScript engine.

Through the JS bridge or JavaScript engine, the interaction between the JavaScript code and the system framework layer code can be implemented, thereby transferring the instruction information from the client script layer to the system framework layer.

If you use the JS bridge method to pass information, you can apply a more mature solution such as cordova. If the information is transmitted using the JavaScript engine method, the V8 engine may be employed when the method of the present application is applied to the Android system; the JavaScriptCore engine may be employed when the method of the present application is applied to the iOS system.

It should be noted that if the JS bridge solution is used, for the selected JS bridge, an adaptation plug-in of the JS bridge needs to be implemented in the system framework layer, and the adaptation plug-in is used to receive the JS bridge to be passed to the JS bridge. Interactive instructions or rendering instructions (ie, instruction information) of the system framework layer, and processed or forwarded as needed.

It should be noted that the method provided by the present application fully removes the dependence on the operating system by introducing a JavaScript bridging layer and a system framework layer, and is compatible with the existing released mobile operating system, and has strong compatibility, thereby achieving Cross-platform technical effects.

After the instruction information carried by the WebGL drawing instruction is transmitted to the system framework layer, the process proceeds to the next step, and an OpenGL drawing instruction corresponding to the WebGL drawing instruction is generated according to the instruction information.

Step S105: Generate an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information.

This step generates an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the received instruction information. Through the processing of this step and the above steps, the original WebGL drawing instruction can be finally converted into a corresponding OpenGL drawing instruction.

It should be noted that this step and the next step can be directly implemented in the system framework layer. For example, the Android system framework layer provides two classes for application development to implement support for the 3D graphics API OpenGL ES, namely GLSurfaceView and GLSurfaceView.Renderer; through these two interface classes, you can develop 3D graphics based on OpenGL ES. However, this embodiment has the problem of low rendering efficiency.

As a preferred solution, this step and the next step can be implemented in the local layer of the system (for example, NDK of the Android system, Native Development Kit). The system local layer is also known as the C++ engine layer. This method is similar to the above method. Taking the Android system as an example, the difference between the method and the above method is mainly: the implementation part of the GLSurfaceView.Renderer is implemented locally, and then the communication between the Java end and the C end is realized through the JNI.

In this embodiment, this step and the next step are implemented at the local layer of the system. To this end, the first step is to transfer the instruction information from the system framework layer to the system local layer, and then, in the system local layer, generate the OpenGL drawing instruction according to the instruction information. Higher rendering performance can be achieved by generating and executing the OpenGL drawing instructions at the system local level.

In a specific implementation, the step S105 may be implemented by: generating the OpenGL drawing instruction according to the second preset instruction conversion rule and the instruction information.

The second preset instruction conversion rule is related to the first preset instruction conversion rule, and converts the WebGL drawing instruction into a rendering command according to the first preset instruction conversion rule; according to the second preset instruction, The instruction information in the form of a rendering command is converted into an OpenGL drawing instruction corresponding to the WebGL drawing instruction.

For example, the client-side script layer converts the WebGL drawing instruction into a rendering command "B, 1", which is passed to the system local layer (C++ engine layer) after being passed through the system framework layer, and is processed by the following code:

After processing by the above code, "1" is converted to the enumeration value "kEJCompositeOperationSourceOver", and then continues processing in the SetGlobalCompositeOperation method, the method code is as follows:

After the above code parses out "glBlendFunc", the instruction is the OpenGL drawing instruction that the WebGL drawing instruction actually corresponds to.

After generating the OpenGL drawing instruction corresponding to the WebGL drawing instruction, the process proceeds to the next step, and the 3D canvas webpage element is drawn according to the OpenGL drawing instructions.

Step S107: Drawing the OpenGL drawing instruction to an OpenGL rendering window of the system to form a rendering result of the 3D canvas webpage element.

In this step, the OpenGL drawing instruction generated in the previous step is drawn into the OpenGL rendering window of the system to form a rendering result of the 3D canvas webpage element.

The OpenGL rendering window for drawing OpenGL drawing instructions to the system is a public technical technique in the technical field, and the present application does not limit the specific drawing manner. An optional specific implementation method is given below.

In a specific implementation, the step may include the following steps: 1) acquiring context information and a rendering target corresponding to the 3D canvas webpage element; 2) performing graphics rendering on the rendering target according to the context information and the OpenGL drawing instruction. ; 3) Input the render target into the off-screen buffer of the system.

1) Obtain context information and a rendering target corresponding to the 3D canvas webpage element.

To implement the processing of drawing OpenGL drawing instructions into the OpenGL rendering window of the system, the system local layer needs to have the following functions: 1) create, manage, and destroy the 3D canvas entity and the context entity of the 3D canvas, wherein The context entity stores the context information of the canvas element, the canvas entity holds the attribute information of the canvas element, and 2) manages the rendering of different canvas elements to the render target of the render layer; ) Combine multiple render targets into off-screen render buffers via FBO techniques in OpenGL.

To put it simply, the render target is a surface, and the graphics API can "draw" things up. In essence, the render target is a contiguous memory area. Such a memory area can exist multiple times at the same time, that is, multiple render targets. In this embodiment, different 3D canvas webpage elements correspond to different rendering targets.

The context information and the rendering target are generated when the 3D canvas webpage element is drawn for the first time. Therefore, before the acquiring the context information corresponding to the 3D canvas element and the rendering target, the method further includes: determining the location Descriptive context information and whether the rendering target exists; if not, the context information and the rendering target need to be created, and the context information and the rendering target are bound. The 3D canvas element, the context information, and the render target are associated by binding the newly created context information to the render target.

2) performing graphics rendering on the render target according to the context information and the OpenGL drawing instruction.

After the context information and the rendering target corresponding to the 3D canvas webpage element are obtained, the present step performs graphics rendering on the rendering target according to the context information and the OpenGL drawing instruction generated in step S105 to form a rendering result of the 3D canvas webpage element.

In a specific implementation, the canvas context entity invokes an API corresponding to the renderer according to the generated OpenGL drawing instruction, and the renderer calls the corresponding OpenGL ES API and renders the result to the rendering target.

3) Input the render target into the off-screen buffer of the system.

In OpenGL, GPU screen rendering can be done in two ways: 1) current screen rendering (On-Screen Rendering); 2) off-screen rendering. The current screen rendering means that the GPU performs a rendering operation in the screen buffer currently used for display; off-screen rendering means that the GPU newly opens a buffer for rendering operations outside the current screen buffer.

Since the rendering result of the 3D canvas webpage element finally needs to be merged into the system webview window, this step uses the off-screen rendering mode to input the rendered rendering target into the off-screen buffer of the system.

It should be noted that if the webpage where the 3D canvas webpage element is located includes multiple 3D canvas webpage elements, the input of the rendering target to the offscreen buffer of the system may be as follows: FBO (Frame Buffer) The technique of synthesizing a plurality of the rendering targets into the off-screen buffer; in this case, different rendering targets correspond to different 3D canvas webpage elements, and the off-screen buffer includes multiple 3Ds The rendering effect of the canvas page element's rendering effect is blended together.

The specific implementations of the above steps 1, 2 and 3 in this embodiment are as follows: for the canvas of the 3D canvas webpage element and the corresponding webgl context, the corresponding two classes "GCanvas" and "GCanvasContext" are created inside the GCanvas. Corresponding; according to the context information, using FBO technology, the corresponding graphics will be drawn to the texture specified by the FBO, and finally rendered to the screen by the system's EGL swap buffer mechanism.

After the rendering effects of the 3D canvas webpage element are input into the off-screen buffer of the system through the steps 1, 2 and 3 above, in the specific implementation, the data of the off-screen buffer needs to be copied to the OpenGL rendering window of the system framework layer ( For example, in the GlSurfaceView of the Android system, the system framework layer synthesizes the OpenGL rendering window and the Webview window of the system to form an overall rendering effect of the webpage where the 3D canvas webpage element is located.

In a specific implementation, the OpenGL rendering window and the Webview window may be mixed by a window management mechanism of the system. The non-3D canvas webpage element in the webpage is drawn in the webview window.

In this embodiment, through the HybridViewController class (inherited from ViewController), WebView and GCanvasView (inherited from GLSurfaceView) are added to the ViewGroup of the original element, and some of the source code is as follows:

In summary, the traditional method uses WebView to render 3D canvas webpage elements, and the method provided by the present application first renders the animation content of the 3D canvas webpage element in the OpenGL rendering window of the system, and then opens the OpenGL rendering window and the WebView. Window fusion, the overall rendering effect of the web page.

Please refer to FIG. 2 , which is a schematic structural diagram of an embodiment of a method for rendering a 3D canvas webpage element of the present application. In this embodiment, the rendering method of the 3D canvas webpage element of the present application has a four-layer structure, namely: a JavaScript hosting module layer, a bridge module layer, an operating system adaptation module layer, and an engine module layer. These levels are briefly described below.

1) JavaScript escrow module layer: mainly used to host HTML5 3D canvas API (WebGL drawing instruction) and implement this scheme for these APIs. The functions of this layer include but are not limited to: canvas element replacement, rendering instruction splicing and passing, interactive instruction Response, response of the callback function, calculation of the size and position of the canvas element, layer management of multiple canvases, etc.

2) Bridge module layer: mainly used for JavaScript and operating system layer (ie: the above system frame layer) code (android: Java / iOS: OC) to interact, there are two ways to achieve JavaScript and the underlying code interaction, respectively : JS bridge, JS engine.

3) operating system adaptation module layer: mainly used to implement a custom rendering window (ie: the above OpenGL rendering window), the custom rendering window is used to display the rendering output of the HTML5 3D canvas; and, manage multiple windows Use (custom rendering windows and rendering windows for other HTML5 elements) to synthesize the final rendering results. If the JS bridge scheme is used in the upper layer (bridge module layer), then for the selected JS bridge, the JS bridge adapter plugin is also needed to receive the interaction or rendering instructions passed by the JS bridge to the system layer. And process or forward as needed.

4) Engine module layer: The system local layer is mainly used to create, manage, and destroy the canvas entity (entity) and the canvas 3d context entity. The corresponding OpenGL ES API is called according to the received rendering instruction. In this layer, it is also responsible for managing rendering targets that are rendered to multiple render layers for different canvases. Finally, multiple rendering targets are synthesized into off-screen rendering buffers by FBO technology in OpenGL.

Please refer to FIG. 3 , which is a specific flowchart of an embodiment of a method for rendering a 3D canvas webpage element of the present application. The flowchart shown in FIG. 3 corresponds to the specific processing procedure of the foregoing solution, and the processing procedure of the foregoing scheme can be more intuitively understood in conjunction with FIG. 3. The specific flow chart shown in FIG. 3 will be briefly described below with reference to FIG.

1) JavaScript hosting module layer

Find whether there is a 3D canvas element to replace in the HTML5 page. If it can be successfully replaced, create a new custom DOM element and insert it into the original DOM tree, and delete the original canvas element. All subsequent to the original canvas element. Calls and operations will be hosted by the newly inserted DOM element. After receiving the call to the 3D canvas, the API call is converted into a set of internally implemented commands and passed to the system adaptation layer via a timer.

2) Bridge module layer

Responsible for passing commands generated by the JavaScript escrow module layer to the system adaptation layer.

3) Operating system adaptation module layer

After receiving the command, assemble the view for rendering the 3D canvas view with other HTML5 elements and pass the command to the engine module layer.

4) Engine module layer

After receiving the command, parse it to get the corresponding 3D canvas context (if not new); the synthesizer gets a render target (created if not) and assigns it to the 3D canvas context; it is called by the 3D canvas context based on the parsed command result The renderer corresponds to the API, the renderer calls the corresponding OpenGL ES API and renders the result to the render target; the synthesizer combines multiple render targets through the FBO technique and inputs them into the system's off-screen buffer.

At this time, the main work of the rendering method of the 3D canvas webpage element provided by the present application is completed, and the operating system will obtain rendering control and display the rendering result to the screen.

In the above embodiment, a rendering method of a 3D canvas webpage element is provided. Correspondingly, the present application further provides a rendering apparatus for a 3D canvas webpage element. The device corresponds to an embodiment of the above method.

Please refer to FIG. 4 , which is a schematic diagram of an embodiment of a rendering apparatus for a 3D canvas webpage element of the present application. Since the device embodiment is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiment. The device embodiments described below are merely illustrative.

The rendering device of the 3D canvas webpage element of the embodiment includes: a WebGL instruction intercepting unit 101, configured to intercept a WebGL drawing instruction for the 3D canvas webpage element; and a WebGL instruction transmitting unit 103, configured to carry the WebGL drawing instruction The instruction information is transmitted to the system framework layer; the OpenGL instruction generating unit 105 is configured to generate an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information; and an OpenGL instruction drawing unit 107, configured to use the OpenGL drawing instruction Draws into the OpenGL rendering window of the system to form the rendering result of the 3D canvas web page element.

Optionally, the WebGL instruction intercepting unit 101 is specifically configured to intercept the WebGL drawing instruction by using a replacement DOM object of the 3D canvas webpage element.

Optionally, the WebGL instruction transfer unit 103 includes:

Optionally, the OpenGL instruction generating unit 105 includes:

Please refer to FIG. 5 , which is a schematic diagram of an embodiment of an electronic device of the present application. Since the device embodiment is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiment. The device embodiments described below are merely illustrative.

An electronic device of the embodiment, the electronic device includes: a display 101; a processor 102; and a memory 103, configured to store a program for implementing a rendering method of a 3D canvas webpage element, the device is After executing the program of the rendering method of the 3D canvas webpage element by the processor, performing the following steps: intercepting a WebGL drawing instruction for the 3D canvas webpage element; and transmitting the instruction information carried by the WebGL drawing instruction to the system framework And generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information; and drawing the OpenGL drawing instruction into an OpenGL rendering window of the system to form a rendering result of the 3D canvas webpage element.

Corresponding to the above method, the present application also provides a rendering method of a 2D canvas webpage element. The following is a brief description of the rendering method and existing problems of the 2D canvas webpage elements in the prior art.

In the prior art, the HTML5 2D canvas relies on the system Webview to complete the rendering and drawing in the mobile app, and the performance depends on the system Webview. However, the performance of the HTML5 canvas element on the mobile side is not good, especially in some high-interaction pages such as games and animations. The performance of the canvas is more obvious, and the picture will appear stuck and slow. Among them, due to the numerous Android system versions of Android phones, various mobile phone manufacturers have different support and serious customization. The performance bottleneck of HTML5 canvas is particularly prominent on Android phones. In summary, the prior art has a problem that the rendering performance of the 2D canvas webpage element is low.

Please refer to FIG. 6 , which is a flowchart of a method for rendering a 2D canvas webpage element provided by the present application. The same parts of the first embodiment are not described again. Please refer to the corresponding example in the first embodiment. section. A rendering method of a 2D canvas webpage element provided by the present application includes:

Step S101: Intercepting a drawing instruction to the 2D canvas webpage element.

This step corresponds to the step S101 of the first embodiment, and the difference is that the processing object of the first embodiment is a 3D canvas webpage element, and the processing object of the method is a 2D canvas webpage element; correspondingly, the above implementation Example 1 intercepts the WebGL drawing instruction, and the method intercepts the drawing instruction for the 2D canvas.

The rendering method of the 2D canvas webpage element provided by the present application is completely consistent with the core idea and processing steps of the above-mentioned 3D canvas webpage element rendering method. Therefore, the specific steps are not specifically described in this embodiment. For the corresponding part, refer to the first embodiment. The related descriptions are not repeated here. The method embodiments described below are merely illustrative.

As a preferred solution, the step may be performed by capturing a drawing instruction of the 2D canvas webpage element by using a replacement DOM object of the 2D canvas webpage element.

Step S103: Transfer instruction information carried by the drawing instruction of the 2D canvas webpage element to the system framework layer.

As a preferred solution, the step may include the following steps: 1) extracting the instruction information from a drawing instruction of the 2D canvas webpage element; 2) converting the rule and the instruction information according to the first preset instruction, Generating a rendering command corresponding to the drawing instruction of the 2D canvas webpage element; 3) transferring the rendering command from the system framework layer.

Step S105: Generate an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element according to the instruction information.

As a preferred solution, the step may include the following specific steps: 1) transmitting the instruction information from the system framework layer to a system local layer; 2) in the system local layer, according to the instruction information The OpenGL drawing instruction is generated.

Step S107: Drawing the OpenGL drawing instruction to an OpenGL rendering window of the system to form a rendering result of the 2D canvas webpage element.

As a preferred solution, the step may include the following steps: 1) acquiring context information corresponding to the 2D canvas webpage element and a rendering target; 2) rendering the rendering according to the context information and the OpenGL drawing instruction. The target is rendered graphically; 3) the rendering target is input to the off-screen buffer of the system.

In addition, the method provided by the present application further includes synthesizing the OpenGL rendering window and the Webview window of the system to form a rendering result of the webpage where the 2D canvas webpage element is located.

Please refer to FIG. 7 , which is a schematic structural diagram of an embodiment of a method for rendering a 2D canvas webpage element of the present application. In this embodiment, the rendering method for implementing the 2D canvas webpage element of the present application has a four-layer structure: a JavaScript hosting module layer, a bridge module layer, an operating system adaptation module layer, and an engine module layer. These levels are briefly described below.

1) JavaScript escrow module layer: mainly used to host HTML5 2D canvas API (drawing instructions) and implement the program for these APIs. The functions of this layer include but are not limited to: canvas element replacement, rendering instruction splicing and delivery, interactive command response , the response of the callback function, the calculation of the size and position of the canvas element, and the layer management of multiple canvases.

3) operating system adaptation module layer: mainly used to implement a custom rendering window (ie: the above OpenGL rendering window), the custom rendering window is used to display the rendering output of the HTML5 2D canvas; and, manage multiple windows Use (custom rendering windows and rendering windows for other HTML5 elements) to synthesize the final rendering results. If the JS bridge scheme is used in the upper layer (bridge module layer), then for the selected JS bridge, the JS bridge adapter plugin is also needed to receive the interaction or rendering instructions passed by the JS bridge to the system layer. And process or forward as needed.

4) Engine module layer: The system local layer is mainly used to create, manage, and destroy the canvas entity (entity) and the canvas 2d context entity. The corresponding OpenGL ES API is called according to the received rendering instruction. In this layer, it is also responsible for managing rendering targets that are rendered to multiple render layers for different canvases. Finally, multiple rendering targets are synthesized into off-screen rendering buffers by FBO technology in OpenGL.

Please refer to FIG. 8 , which is a specific flowchart of an embodiment of a method for rendering a 2D canvas webpage element of the present application. The flowchart shown in FIG. 8 corresponds to the specific processing procedure of the above solution, and the processing procedure of the above scheme can be more intuitively understood in conjunction with FIG. 8. The specific flowchart shown in FIG. 8 will be briefly described below with reference to FIG.

1) JavaScript hosting module layer

Find out if there is a 2D canvas element to replace in the HTML5 page. If it can be successfully replaced, create a new custom DOM element and insert it into the original DOM tree, and delete the original canvas element. All subsequent to the original canvas element. Calls and operations will be hosted by the newly inserted DOM element. After receiving the 2D canvas call, the API call is converted into an internally implemented set of commands and passed to the system adaptation layer via a timer.

2) Bridge module layer

3) Operating system adaptation module layer

After receiving the command, assemble the view for rendering the 2D canvas view with other HTML5 elements and pass the command to the engine module layer.

4) Engine module layer

After receiving the command, parse and obtain the corresponding 2D canvas context (if not new); the synthesizer acquires a render target (if not created) and assigns it to the 2D canvas context; the 2D canvas context is called according to the parsed command result Renderer corresponding to the renderer The corresponding OpenGL ES API is called and the result is rendered into the render target; the synthesizer combines multiple render targets through the FBO technique and inputs them into the system's off-screen buffer.

At this time, the main work of the rendering method of the 2D canvas webpage element provided by the present application is completed, and the operating system will obtain rendering control and display the rendering result to the screen.

In the above embodiment, a rendering method of a 2D canvas webpage element is provided. Correspondingly, the present application further provides a rendering apparatus for a 2D canvas webpage element. The device corresponds to an embodiment of the above method.

Please refer to FIG. 9 , which is a schematic diagram of an embodiment of a rendering apparatus for a 2D canvas webpage element of the present application. Since the device embodiment is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiment. The device embodiments described below are merely illustrative.

The apparatus for rendering a 2D canvas webpage element of the embodiment includes: an instruction intercepting unit 101, configured to intercept a drawing instruction for a 2D canvas webpage element; an instruction transmitting unit 103, configured to draw a drawing instruction of the 2D canvas webpage element The command information carried is transmitted to the system framework layer; the OpenGL instruction generating unit 105 is configured to generate an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element according to the instruction information; and an OpenGL instruction drawing unit 107, configured to The OpenGL drawing instruction is drawn to an OpenGL rendering window of the system to form a rendering result of the 2D canvas webpage element.

Optionally, the instruction intercepting unit 101 is configured to intercept a drawing instruction of the 2D canvas webpage element by using a replacement DOM object of the 2D canvas webpage element.

Optionally, the instruction transmitting unit 103 includes:

Optionally, the OpenGL instruction generating unit 105 includes:

Please refer to FIG. 10 , which is a schematic diagram of an embodiment of an electronic device of the present application. Since the device embodiment is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiment. The device embodiments described below are merely illustrative.

An electronic device of the embodiment, the electronic device includes: a display 1101; a processor 1102; and a memory 1103, configured to store a program for implementing a rendering method of a 2D canvas webpage element, the device is powered on and runs by the processor After the program of the rendering method of the 2D canvas webpage element, the following steps are performed: intercepting the drawing instruction of the 2D canvas webpage element; transmitting the instruction information carried by the drawing instruction of the 2D canvas webpage element to the system framework layer; according to the instruction And generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element; drawing the OpenGL drawing instruction to an OpenGL rendering window of the system to form a rendering result of the 2D canvas webpage element.

The method, device and electronic device for rendering a 2D canvas webpage element provided by the present application transmit the instruction information carried by the drawing instruction of the 2D canvas webpage element to the system framework layer by intercepting the drawing instruction of the 2D canvas webpage element on the mobile App level. And generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element according to the instruction information; and drawing the OpenGL drawing instruction into an OpenGL rendering window of the system to form a rendering result of the 2D canvas webpage element. By adopting the method provided by the present application, the rendering of the 2D canvas webpage element through the Webview of the system can be avoided, thereby improving the rendering performance.

The present application is disclosed in the above preferred embodiments, but it is not intended to limit the present application, and any person skilled in the art can make possible changes and modifications without departing from the spirit and scope of the present application. The scope of protection should be based on the scope defined by the claims of the present application.

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

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

1. Computer readable media including both permanent and non-persistent, removable and non-removable media may be implemented by any method or technology. The information can be computer readable instructions, data structures, modules of programs, or other data. Examples of storage media for a computer include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), Other types of random access memory (RAM), read only memory (ROM), electrically erasable programmable read only memory (EEPROM), flash memory or other memory technology, CD-ROM (CD-ROM) ), a digital versatile disc (DVD) or other optical storage, magnetic cassette, magnetic tape storage or other magnetic storage device or any other non-transportable medium that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include non-transitory computer readable media, such as modulated data signals and carrier waves.

2. Those skilled in the art will appreciate that embodiments of the present application can be provided as a method, system, or computer program product. Thus, the present application can take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment in combination of software and hardware. Moreover, the application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) including computer usable program code.

Claims

A method for rendering a 3D canvas webpage element, comprising:

Intercepting WebGL drawing instructions for 3D canvas webpage elements;

Transmitting instruction information carried by the WebGL drawing instruction to a system framework layer;

Generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information;

The OpenGL drawing instruction is drawn to the OpenGL rendering window of the system to form a rendering result of the 3D canvas webpage element.
The method for rendering a 3D canvas webpage element according to claim 1, wherein the intercepting the WebGL drawing instruction for the 3D canvas webpage element is as follows:

The WebGL drawing instruction is intercepted by the replacement DOM object of the 3D canvas webpage element.
The method for rendering a 3D canvas webpage element according to claim 2, further comprising:

The DOM object of the 3D canvas webpage element is replaced with the replacement DOM object.
The method for rendering a 3D canvas webpage element according to claim 3, further comprising: before the replacing the DOM object of the 3D canvas webpage element with the replacement DOM object,

Determining whether the operating system allows to perform the operation of DOM object replacement; if yes, proceeding to the next step; if not, using the Webview window to draw the 3D canvas webpage element.
The method for rendering a 3D canvas webpage element according to claim 1, wherein the transmitting the instruction information carried by the WebGL drawing instruction to the system framework layer comprises:

Extracting the instruction information from the WebGL drawing instruction;

Generating, according to the first preset instruction conversion rule and the instruction information, a rendering command corresponding to the WebGL drawing instruction;

The rendering command is passed from the system framework layer.
The method for rendering a 3D canvas webpage element according to claim 1, wherein the instruction information carried by the WebGL drawing instruction is transmitted to a system framework layer in the following manner:

The instruction information is transmitted to the system framework layer via a JS bridge or a JavaScript engine.
The method for rendering a 3D canvas webpage element according to claim 1, wherein the instruction information carried by the WebGL drawing instruction is transmitted to a system framework layer in the following manner:

The instruction information is transmitted to the system framework layer according to a preset time interval.
The method for rendering a 3D canvas webpage element according to claim 1, wherein the generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction comprises:

Transmitting the instruction information from the system framework layer to a system local layer;

In the system local layer, the OpenGL drawing instruction is generated according to the instruction information.
The method for rendering a 3D canvas webpage element according to claim 8, wherein the drawing the OpenGL drawing instruction to an OpenGL rendering window of the system comprises:

Obtaining context information and a rendering target corresponding to the 3D canvas webpage element;

Performing graphics rendering on the rendering target according to the context information and the OpenGL drawing instruction;

The rendering target is input to an offscreen buffer of the system.
The method for rendering a 3D canvas webpage element according to claim 9, wherein the inputting the rendering target to an off-screen buffer of the system is as follows:

A plurality of the rendering targets are synthesized into the off-screen buffer by FBO technology; different rendering targets correspond to different 3D canvas webpage elements.
The method for rendering a 3D canvas webpage element according to claim 9, wherein before the acquiring the context information corresponding to the 3D canvas element and the rendering target, the method further includes:

Determining whether the context information and the rendering target are present; if not, creating the context information and the rendering target, and binding the context information and the rendering target.
The method for rendering a 3D canvas webpage element according to claim 1, further comprising:

The OpenGL rendering window and the Webview window of the system are combined to form a rendering result of the webpage where the 3D canvas webpage element is located.
The method for rendering a 3D canvas webpage element according to claim 12, wherein the synthesizing the OpenGL rendering window and the webview window of the system are as follows:

The OpenGL rendering window and the Webview window are mixed by a window management mechanism of the system.
The method for rendering a 3D canvas webpage element according to claim 12, wherein the non-3D canvas webpage element in the webpage is drawn in the webview window.
The method for rendering a 3D canvas webpage element according to claim 1, wherein the system comprises an Andriod system or an iOS system.
A rendering device for a 3D canvas webpage element, comprising:

a WebGL instruction intercepting unit for intercepting a WebGL drawing instruction for a 3D canvas webpage element;

a WebGL instruction transfer unit, configured to transfer instruction information carried by the WebGL drawing instruction to a system framework layer;

An OpenGL instruction generating unit, configured to generate an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information;

An OpenGL instruction drawing unit is configured to draw the OpenGL drawing instruction into an OpenGL rendering window of the system to form a rendering result of the 3D canvas webpage element.
The apparatus for rendering a 3D canvas webpage element according to claim 16, wherein the WebGL instruction intercepting unit is specifically configured to intercept the WebGL drawing instruction by using a replacement DOM object of the 3D canvas webpage element.
The apparatus for rendering a 3D canvas webpage element according to claim 16, wherein the WebGL instruction transfer unit comprises:

An instruction information extraction subunit, configured to extract the instruction information from the WebGL drawing instruction;

a rendering command generating subunit, configured to generate a rendering command corresponding to the WebGL drawing instruction according to the first preset instruction conversion rule and the instruction information;

A rendering command transfer subunit is configured to transfer the rendering command from the system framework layer.
The apparatus for rendering a 3D canvas webpage element according to claim 16, wherein the OpenGL instruction generating unit comprises:

An instruction information transmitting subunit, configured to transfer the instruction information from the system framework layer to a system local layer;

The OpenGL instruction generation subunit is configured to generate the OpenGL drawing instruction according to the instruction information in the local layer of the system.
An electronic device, comprising:

monitor;

Processor;

a program for storing a rendering method for implementing a 3D canvas webpage element. After the device is powered on and runs the program of the rendering method of the 3D canvas webpage element by the processor, the following steps are performed: intercepting the 3D canvas webpage element a WebGL drawing instruction; transmitting instruction information carried by the WebGL drawing instruction to a system framework layer; generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information; and drawing the OpenGL drawing instruction to a system OpenGL Rendering a window to form a rendering result of the 3D canvas webpage element.
A method for rendering a 2D canvas webpage element, comprising:

Intercepting drawing instructions for 2D canvas webpage elements;

Transmitting instruction information carried by the drawing instruction of the 2D canvas webpage element to the system framework layer;

Generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element according to the instruction information;

The OpenGL drawing instruction is drawn to the OpenGL rendering window of the system to form a rendering result of the 2D canvas webpage element.
The method for rendering a 2D canvas webpage element according to claim 21, wherein the intercepting the WebGL drawing instruction for the 2D canvas webpage element is as follows:

Drawing instructions of the 2D canvas webpage element are intercepted by the replacement DOM object of the 2D canvas webpage element.
The method for rendering a 2D canvas webpage element according to claim 21, wherein the transmitting the instruction information carried by the drawing instruction of the 2D canvas webpage element to the system framework layer comprises:

Extracting the instruction information from a drawing instruction of the 2D canvas webpage element;

Generating, according to the first preset instruction conversion rule and the instruction information, a rendering command corresponding to the drawing instruction of the 2D canvas webpage element;

The rendering command is passed from the system framework layer.
The method for rendering a 2D canvas webpage element according to claim 21, wherein the generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element comprises:

Transmitting the instruction information from the system framework layer to a system local layer;

In the system local layer, the OpenGL drawing instruction is generated according to the instruction information.
The method for rendering a 2D canvas webpage element according to claim 24, wherein the drawing the OpenGL drawing instruction to an OpenGL rendering window of the system comprises:

Obtaining context information and a rendering target corresponding to the 2D canvas webpage element;

Performing graphics rendering on the rendering target according to the context information and the OpenGL drawing instruction;

The rendering target is input to an offscreen buffer of the system.
The method for rendering a 2D canvas webpage element according to claim 21, further comprising:

The OpenGL rendering window and the Webview window of the system are combined to form a rendering result of the webpage where the 2D canvas webpage element is located.
A rendering device for a 2D canvas webpage element, comprising:

An instruction intercepting unit, configured to intercept a drawing instruction for a 2D canvas webpage element;

An instruction transmitting unit, configured to transmit instruction information carried by the drawing instruction of the 2D canvas webpage element to a system framework layer;

An OpenGL instruction generating unit, configured to generate an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element according to the instruction information;

An OpenGL instruction drawing unit is configured to draw the OpenGL drawing instruction to an OpenGL rendering window of the system to form a rendering result of the 2D canvas webpage element.
The apparatus for rendering a 2D canvas webpage element according to claim 27, wherein the instruction intercepting unit is configured to intercept a drawing instruction of the 2D canvas webpage element by using a replacement DOM object of the 2D canvas webpage element. .
The apparatus for rendering a 2D canvas webpage element according to claim 27, wherein the instruction transmitting unit comprises:

An instruction information extraction subunit, configured to extract the instruction information from a drawing instruction of the 2D canvas webpage element;

a rendering command generating subunit, configured to generate a rendering command corresponding to the drawing instruction of the 2D canvas webpage element according to the first preset instruction conversion rule and the instruction information;

A rendering command transfer subunit is configured to transfer the rendering command from the system framework layer.
The rendering device of the 2D canvas webpage element according to claim 27, wherein the OpenGL instruction generating unit comprises:

An instruction information transmitting subunit, configured to transfer the instruction information from the system framework layer to a system local layer;

An OpenGL instruction generation subunit is configured to generate the OpenGL drawing instruction according to the instruction information in the system local layer.
An electronic device, comprising:

monitor;

Processor;

a program for storing a rendering method for implementing a 2D canvas webpage element. After the device is powered on and runs the program of the rendering method of the 2D canvas webpage element by the processor, the following steps are performed: intercepting the 2D canvas webpage element a drawing instruction; transmitting instruction information carried by the drawing instruction of the 2D canvas webpage element to the system framework layer; and generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element according to the instruction information; The drawing instructions are drawn to the OpenGL rendering window of the system to form a rendering result of the 2D canvas web page element.