WO2018050003A1 - Procédé et appareil de restitution d'élément de page web par 3d canvas et dispositif électronique - Google Patents

Procédé et appareil de restitution d'élément de page web par 3d canvas et dispositif électronique Download PDF

Info

Publication number
WO2018050003A1
WO2018050003A1 PCT/CN2017/100536 CN2017100536W WO2018050003A1 WO 2018050003 A1 WO2018050003 A1 WO 2018050003A1 CN 2017100536 W CN2017100536 W CN 2017100536W WO 2018050003 A1 WO2018050003 A1 WO 2018050003A1
Authority
WO
WIPO (PCT)
Prior art keywords
canvas
rendering
instruction
webpage element
opengl
Prior art date
Application number
PCT/CN2017/100536
Other languages
English (en)
Chinese (zh)
Inventor
黄刚
潘华
李�杰
胡吉嵩
Original Assignee
阿里巴巴集团控股有限公司
黄刚
潘华
李�杰
胡吉嵩
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 阿里巴巴集团控股有限公司, 黄刚, 潘华, 李�杰, 胡吉嵩 filed Critical 阿里巴巴集团控股有限公司
Publication of WO2018050003A1 publication Critical patent/WO2018050003A1/fr

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs

Definitions

  • 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.
  • 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.
  • Canvas element plays an indispensable role in mobile development page display, especially in image processing and animation display.
  • 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.
  • 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.
  • 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.
  • the prior art has some problems that the mobile operating system does not support WebGL rendering.
  • 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:
  • 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.
  • 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.
  • it also includes:
  • the DOM object of the 3D canvas webpage element is replaced with the replacement DOM object.
  • the method before the replacing the DOM object of the 3D canvas webpage element with the replacement DOM object, the method further includes:
  • the transmitting the instruction information carried by the WebGL drawing instruction to the system framework layer includes:
  • the rendering command is passed from the system framework layer.
  • 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 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 according to a preset time interval.
  • the generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction includes:
  • the OpenGL drawing instruction is generated according to the instruction information.
  • the drawing the OpenGL drawing instruction to the OpenGL rendering window of the system includes:
  • the rendering target is input to an offscreen buffer of the system.
  • 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.
  • the method 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.
  • 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.
  • 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 non-3D canvas webpage element in the webpage is drawn in the webview window.
  • the system includes an Andriod system or an iOS system.
  • 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.
  • 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 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.
  • 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.
  • an electronic device including:
  • 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.
  • the present application further provides a method for rendering a 2D canvas webpage element, including:
  • 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.
  • 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 transmitting the instruction information carried by the drawing instruction of the 2D canvas webpage element to the system framework layer including:
  • the rendering command is passed from the system framework layer.
  • the generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element includes:
  • the OpenGL drawing instruction is generated according to the instruction information.
  • the drawing the OpenGL drawing instruction to the OpenGL rendering window of the system includes:
  • the rendering target is input to an offscreen buffer of the system.
  • 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.
  • 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.
  • 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 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
  • a rendering command transfer subunit is configured to transfer the rendering command from the system framework layer.
  • 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
  • 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 including:
  • 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.
  • 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.
  • 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
  • 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.
  • FIG. 1 is a flowchart of an embodiment of a method for rendering a 3D canvas webpage element provided by the present application
  • FIG. 2 is a schematic structural diagram of an embodiment of a method for rendering a 3D canvas webpage element provided by the present application
  • FIG. 3 is a specific flowchart of an embodiment of a method for rendering a 3D canvas webpage element provided by the present application
  • FIG. 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
  • FIG. 7 is a schematic structural diagram of an embodiment of a method for rendering a 2D canvas webpage element provided by the present application.
  • FIG. 8 is a specific flowchart of an embodiment of a method for rendering a 2D canvas webpage element provided by the present application
  • FIG. 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.
  • the basic idea of the rendering method of the 3D canvas webpage element 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.
  • FIG. 1 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 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.
  • the JavaScript drawing code for the element Can be as follows:
  • Var c document.getElementById("myCanvas");
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • the WebGL drawing instruction for the 3D canvas webpage element can be intercepted by replacing the DOM object.
  • the method 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.
  • the 3D canvas webpage element can be drawn through the default Webview window of the system, thereby improving the user.
  • 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 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • a GCanvas class is set, and the class includes the instruction conversion program code corresponding to the second step described above as follows:
  • the drawing instruction of WebGL is: WebGLRenderingContext.uniform4f(location, x, y, z, w).
  • 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.
  • 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.
  • 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.
  • the system framework layer is a program layer developed by the Java language
  • the system framework layer is the program layer developed by the Object-C language.
  • the instruction information may be transmitted from the client script layer to the system framework layer in a real-time manner.
  • 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.
  • 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.
  • the instruction information is transmitted to the system framework layer through a JS bridge or a 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • the original WebGL drawing instruction can be finally converted into a corresponding OpenGL drawing instruction.
  • 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.
  • this embodiment has the problem of low rendering efficiency.
  • 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.
  • this step and the next step are implemented at the local layer of the system.
  • 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.
  • 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.
  • 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:
  • the instruction is the OpenGL drawing instruction that the WebGL drawing instruction actually corresponds to.
  • 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.
  • 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.
  • 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.
  • 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.
  • the render target is a surface, and the graphics API can "draw" things up.
  • 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.
  • 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.
  • the present step 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.
  • 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.
  • 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.
  • this step uses the off-screen rendering mode to input the rendered rendering target into the off-screen buffer of the system.
  • the input of the rendering target to the offscreen buffer of the system may be as follows: FBO (Frame Buffer)
  • FBO Framework Buffer
  • the rendering effect of the canvas page element's rendering effect is blended together.
  • 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.
  • 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.
  • 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.
  • HybridViewController class inherited from ViewController
  • WebView and GCanvasView are added to the ViewGroup of the original element, and some of the source code is as follows:
  • 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.
  • FIG. 2 is a schematic structural diagram of an embodiment of a method for rendering a 3D canvas webpage element of the present application.
  • 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.
  • 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.
  • 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.
  • 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.
  • the JS bridge scheme is used in the upper layer (bridge module layer)
  • 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.
  • 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.
  • this layer it is also responsible for managing rendering targets that are rendered to multiple render layers for different canvases.
  • multiple rendering targets are synthesized into off-screen rendering buffers by FBO technology in OpenGL.
  • FIG. 3 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.
  • the synthesizer 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.
  • a rendering method of a 3D canvas webpage element is provided.
  • the present application further provides a rendering apparatus for a 3D canvas webpage element.
  • the device corresponds to an embodiment of the above method.
  • FIG. 4 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;
  • 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.
  • 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.
  • the WebGL instruction transfer unit 103 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.
  • the OpenGL instruction generating unit 105 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.
  • FIG. 5 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • the prior art has a problem that the rendering performance of the 2D canvas webpage element is low.
  • FIG. 6 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • FIG. 7 is a schematic structural diagram of an embodiment of a method for rendering a 2D canvas webpage element of the present application.
  • 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.
  • 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.
  • 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.
  • 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.
  • the JS bridge scheme is used in the upper layer (bridge module layer)
  • 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.
  • 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.
  • this layer it is also responsible for managing rendering targets that are rendered to multiple render layers for different canvases.
  • multiple rendering targets are synthesized into off-screen rendering buffers by FBO technology in OpenGL.
  • FIG. 8 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.
  • the synthesizer 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.
  • a rendering method of a 2D canvas webpage element is provided.
  • the present application further provides a rendering apparatus for a 2D canvas webpage element.
  • the device corresponds to an embodiment of the above method.
  • FIG. 9 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.
  • 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.
  • the instruction transmitting unit 103 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
  • a rendering command transfer subunit is configured to transfer the rendering command from the system framework layer.
  • the OpenGL instruction generating unit 105 includes:
  • 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.
  • FIG. 10 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.
  • 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
  • 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 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.
  • a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
  • processors CPUs
  • input/output interfaces network interfaces
  • memory volatile and non-volatile 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.
  • RAM random access memory
  • ROM read only memory
  • Memory is an example of a computer readable medium.
  • 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.
  • computer readable media does not include non-transitory computer readable media, such as modulated data signals and carrier waves.
  • embodiments of the present application can be provided as a method, system, or computer program product.
  • 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.
  • 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.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)
  • Image Generation (AREA)

Abstract

L'invention concerne un procédé et un appareil de restitution d'élément de page Web par 3D Canvas et un dispositif électronique, ainsi qu'un procédé et un appareil de restitution d'élément de page Web par 2D Canvas et un dispositif électronique. Le procédé de restitution d'élément de page Web par 3D Canvas consiste : à intercepter une instruction de dessin WebGL par rapport à un élément de page Web par 3D Canvas (S101) ; à transmettre des informations d'instruction acheminées par l'instruction de dessin WebGL à une couche d'infrastructure de système (S103) ; en fonction des informations d'instruction, à générer une instruction de dessin OpenGL correspondant à l'instruction de dessin WebGL (S105) ; à dessiner l'instruction de dessin OpenGL sur une fenêtre de restitution OpenGL du système et à former un résultat de restitution de l'élément de page Web par 3D Canvas (S107). Le procédé permet d'empêcher l'utilisation d'un système Webview pour la restitution et le dessin d'un élément de page Web par 3D Canvas , ce qui permet d'obtenir l'effet d'une amélioration du rapport de compatibilité et de couverture pris en charge par 3D Canvas.
PCT/CN2017/100536 2016-09-14 2017-09-05 Procédé et appareil de restitution d'élément de page web par 3d canvas et dispositif électronique WO2018050003A1 (fr)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201610827353.8A CN107832108B (zh) 2016-09-14 2016-09-14 3D canvas网页元素的渲染方法、装置及电子设备
CN201610827353.8 2016-09-14

Publications (1)

Publication Number Publication Date
WO2018050003A1 true WO2018050003A1 (fr) 2018-03-22

Family

ID=61619759

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/100536 WO2018050003A1 (fr) 2016-09-14 2017-09-05 Procédé et appareil de restitution d'élément de page web par 3d canvas et dispositif électronique

Country Status (3)

Country Link
CN (2) CN107832108B (fr)
TW (1) TW201812613A (fr)
WO (1) WO2018050003A1 (fr)

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109544653A (zh) * 2018-10-26 2019-03-29 深圳点猫科技有限公司 一种基于教育操作系统的WebGL独立进程渲染方法及电子设备
CN109636885A (zh) * 2018-11-28 2019-04-16 广东智合创享营销策划有限公司 一种用于h5页面的序列帧动画制作方法和系统
CN110322532A (zh) * 2018-03-27 2019-10-11 优酷网络技术（北京）有限公司 动态图像的生成方法及装置
EP3623938A1 (fr) * 2018-09-12 2020-03-18 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Procédé et appareil de rendu de jeu et support d'enregistrement lisible par ordinateur non transitoire
EP3627318A1 (fr) * 2018-09-12 2020-03-25 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Procédé et appareil de rendu de jeu, terminal et support d'enregistrement lisible par ordinateur non transitoire
CN111581564A (zh) * 2020-05-10 2020-08-25 青岛希望鸟科技有限公司 一种应用Canvas实现的网页同步交流方法
CN112269575A (zh) * 2020-11-18 2021-01-26 安徽四创电子股份有限公司 一种canvas绘制动态二维场景的方法
CN112540815A (zh) * 2020-11-23 2021-03-23 深圳晶泰科技有限公司 多Web 3D场景离屏渲染方法
CN112947916A (zh) * 2021-02-05 2021-06-11 北京百度网讯科技有限公司 用于实现在线画布的方法、装置、设备以及存储介质
CN115474074A (zh) * 2022-08-29 2022-12-13 咪咕文化科技有限公司 一种视频背景替换方法、装置、计算设备和存储介质
CN115937380A (zh) * 2021-08-24 2023-04-07 荣耀终端有限公司 图形渲染方法、装置及存储介质
CN116700694A (zh) * 2023-08-07 2023-09-05 深圳凡泰极客科技有限责任公司 小程序引擎

Families Citing this family (29)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TWI682291B (zh) * 2018-05-23 2020-01-11 中華電信股份有限公司 網頁之動態生成方法、網頁生成裝置及電腦程式產品
CN108959392B (zh) * 2018-05-31 2020-11-10 创新先进技术有限公司 在3d模型上展示富文本的方法、装置及设备
CN110609677A (zh) * 2018-06-15 2019-12-24 搜游网络科技(北京)有限公司 一种基于WebGL的图形绘制方法、装置及系统
CN110609682B (zh) * 2018-06-15 2023-09-19 北京蓝亚盒子科技有限公司 一种基于WebGL的图形绘制方法、装置及系统
CN109271155A (zh) * 2018-09-11 2019-01-25 Oppo广东移动通信有限公司 游戏平台的能力调用方法及相关产品
CN110929201B (zh) * 2018-09-20 2022-06-28 中国科学院信息工程研究所 一种基于Web的复杂网络拓扑编辑及可视化系统
CN109343774B (zh) * 2018-10-29 2021-04-20 广东明星创意动画有限公司 一种快速文件预处理渲染系统
CN109614563B (zh) * 2018-12-05 2021-06-08 北京达佳互联信息技术有限公司 显示网页的方法、装置、设备及存储介质
CN109658250B (zh) * 2018-12-29 2021-11-12 深圳源中瑞科技有限公司 一种基于网页的股票交易k线处理方法和存储介质
CN111506841B (zh) * 2019-01-30 2023-06-09 阿里巴巴集团控股有限公司 网页展示方法、装置、设备及可读存储介质
CN110083231B (zh) * 2019-03-12 2022-04-08 杭州电子科技大学 一种面向安卓VR一体式头显的WebGL全景显示方法
CN111796812B (zh) * 2019-04-04 2022-11-04 厦门雅基软件有限公司 图像渲染的方法、装置、电子设备及计算机可读存储介质
CN110347463B (zh) * 2019-06-25 2022-04-08 荣耀终端有限公司 图像处理方法、相关设备及计算机存储介质
CN110413914A (zh) * 2019-07-25 2019-11-05 中南民族大学 基于WebGL的渲染方法、装置、设备及存储介质
CN112351222B (zh) * 2019-08-09 2022-05-24 北京字节跳动网络技术有限公司 图像特效处理方法、装置、电子设备和计算机可读存储介质
CN110727481A (zh) * 2019-09-06 2020-01-24 平安国际智慧城市科技股份有限公司 图片编辑方法、装置、计算机设备和存储介质
CN111275782B (zh) * 2020-01-17 2023-09-08 广州图匠数据科技有限公司 一种图形绘制方法、装置、终端设备及存储介质
CN111354063B (zh) * 2020-03-10 2023-09-08 深信服科技股份有限公司 一种三维元素渲染方法、桌面云服务端及桌面云系统
CN111562962B (zh) * 2020-04-29 2023-07-04 百度在线网络技术（北京）有限公司 画面渲染方法、装置、电子设备和存储介质
CN114064017A (zh) * 2020-08-04 2022-02-18 腾讯科技（深圳）有限公司 一种绘制方法及相关设备
WO2022104786A1 (fr) * 2020-11-23 2022-05-27 深圳晶泰科技有限公司 Procédé de rendu hors écran de multiples scénarios web 3d
CN112380296A (zh) * 2020-11-23 2021-02-19 北京明略软件系统有限公司 一种er图生成方法、系统、电子设备及存储介质
CN112947969B (zh) * 2021-03-10 2022-12-16 支付宝(杭州)信息技术有限公司 一种页面离屏渲染方法、装置、设备和可读介质
CN113570733A (zh) * 2021-08-05 2021-10-29 稿定（厦门）科技有限公司 一种基于WebGL的图形渲染方法、装置及系统
CN113694523A (zh) * 2021-08-30 2021-11-26 上海哔哩哔哩科技有限公司 基于移动端app的h5游戏显示方法、装置及计算机设备
CN115525852A (zh) * 2021-10-28 2022-12-27 北京字节跳动网络技术有限公司 网页的渲染方法、装置、设备及存储介质
CN114222149A (zh) * 2021-11-17 2022-03-22 武汉斗鱼鱼乐网络科技有限公司 一种推流方法、装置、介质及计算机设备
CN116402937A (zh) * 2023-03-30 2023-07-07 中国舰船研究设计中心 一种基于web的复杂数据3D可视化简化开发方法
CN117093793B (zh) * 2023-08-25 2024-05-28 江西格如灵科技股份有限公司 一种网页3d场景二维显示方法及系统

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102087598A (zh) * 2011-02-22 2011-06-08 深圳市同洲电子股份有限公司 一种3d界面展示方法、装置及浏览装置
CN102254292A (zh) * 2010-05-20 2011-11-23 盛乐信息技术（上海）有限公司 远程3d指令渲染系统及方法
CN103336816A (zh) * 2013-06-28 2013-10-02 广州市动景计算机科技有限公司 安卓系统上基于GPU实现的Canvas元素渲染方法及装置
CN103713891A (zh) * 2012-10-09 2014-04-09 阿里巴巴集团控股有限公司 一种在移动设备上进行图形渲染的方法和装置
US20150286739A1 (en) * 2012-11-06 2015-10-08 Layabox Inc. Html5-protocol-based webpage presentation method and device

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102591651B (zh) * 2011-12-26 2015-02-11 Tcl集团股份有限公司 一种网页3d渲染和控制方法及装置
CN104978357B (zh) * 2014-04-10 2018-08-24 阿里巴巴集团控股有限公司 一种数据可视化展现方法和装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102254292A (zh) * 2010-05-20 2011-11-23 盛乐信息技术（上海）有限公司 远程3d指令渲染系统及方法
CN102087598A (zh) * 2011-02-22 2011-06-08 深圳市同洲电子股份有限公司 一种3d界面展示方法、装置及浏览装置
CN103713891A (zh) * 2012-10-09 2014-04-09 阿里巴巴集团控股有限公司 一种在移动设备上进行图形渲染的方法和装置
US20150286739A1 (en) * 2012-11-06 2015-10-08 Layabox Inc. Html5-protocol-based webpage presentation method and device
CN103336816A (zh) * 2013-06-28 2013-10-02 广州市动景计算机科技有限公司 安卓系统上基于GPU实现的Canvas元素渲染方法及装置

Cited By (22)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110322532A (zh) * 2018-03-27 2019-10-11 优酷网络技术（北京）有限公司 动态图像的生成方法及装置
EP3623938B1 (fr) * 2018-09-12 2021-06-16 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Procédé et appareil de rendu de jeu et support de stockage non transitoire lisible par ordinateur
EP3623938A1 (fr) * 2018-09-12 2020-03-18 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Procédé et appareil de rendu de jeu et support d'enregistrement lisible par ordinateur non transitoire
EP3627318A1 (fr) * 2018-09-12 2020-03-25 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Procédé et appareil de rendu de jeu, terminal et support d'enregistrement lisible par ordinateur non transitoire
US10866818B2 (en) 2018-09-12 2020-12-15 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Game rendering method, terminal device, and non-transitory computer-readable storage medium
US10991151B2 (en) 2018-09-12 2021-04-27 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Game rendering method, terminal, and non-transitory computer-readable storage medium
CN109544653A (zh) * 2018-10-26 2019-03-29 深圳点猫科技有限公司 一种基于教育操作系统的WebGL独立进程渲染方法及电子设备
CN109544653B (zh) * 2018-10-26 2023-05-16 深圳点猫科技有限公司 一种基于教育操作系统的WebGL独立进程渲染方法及电子设备
CN109636885A (zh) * 2018-11-28 2019-04-16 广东智合创享营销策划有限公司 一种用于h5页面的序列帧动画制作方法和系统
CN109636885B (zh) * 2018-11-28 2023-07-04 广东智合创享营销策划有限公司 一种用于h5页面的序列帧动画制作方法和系统
CN111581564A (zh) * 2020-05-10 2020-08-25 青岛希望鸟科技有限公司 一种应用Canvas实现的网页同步交流方法
CN111581564B (zh) * 2020-05-10 2023-12-12 青岛希望鸟科技有限公司 一种应用Canvas实现的网页同步交流方法
CN112269575A (zh) * 2020-11-18 2021-01-26 安徽四创电子股份有限公司 一种canvas绘制动态二维场景的方法
CN112540815B (zh) * 2020-11-23 2023-05-05 深圳晶泰科技有限公司 多Web 3D场景离屏渲染方法
CN112540815A (zh) * 2020-11-23 2021-03-23 深圳晶泰科技有限公司 多Web 3D场景离屏渲染方法
CN112947916A (zh) * 2021-02-05 2021-06-11 北京百度网讯科技有限公司 用于实现在线画布的方法、装置、设备以及存储介质
CN112947916B (zh) * 2021-02-05 2023-09-19 北京百度网讯科技有限公司 用于实现在线画布的方法、装置、设备以及存储介质
CN115937380A (zh) * 2021-08-24 2023-04-07 荣耀终端有限公司 图形渲染方法、装置及存储介质
CN115474074A (zh) * 2022-08-29 2022-12-13 咪咕文化科技有限公司 一种视频背景替换方法、装置、计算设备和存储介质
CN115474074B (zh) * 2022-08-29 2024-05-07 咪咕文化科技有限公司 一种视频背景替换方法、装置、计算设备和存储介质
CN116700694A (zh) * 2023-08-07 2023-09-05 深圳凡泰极客科技有限责任公司 小程序引擎
CN116700694B (zh) * 2023-08-07 2024-01-26 深圳凡泰极客科技有限责任公司 小程序引擎

Also Published As

Publication number Publication date
CN107832108B (zh) 2021-05-07
TW201812613A (zh) 2018-04-01
CN113282360A (zh) 2021-08-20
CN107832108A (zh) 2018-03-23

Similar Documents

Publication Publication Date Title
WO2018050003A1 (fr) Procédé et appareil de restitution d'élément de page web par 3d canvas et dispositif électronique
US11902377B2 (en) Methods, systems, and computer program products for implementing cross-platform mixed-reality applications with a scripting framework
US10026147B1 (en) Graphics scenegraph rendering for web applications using native code modules
US11036345B2 (en) System and method for on-screen graphical user interface encapsulation and reproduction
US10545749B2 (en) System for cloud computing using web components
US10013157B2 (en) Composing web-based interactive 3D scenes using high order visual editor commands
US9122657B2 (en) Webpage display system leveraging OSGI
US10207190B2 (en) Technologies for native game experience in web rendering engine
CN111966354A (zh) 一种页面显示方法、装置及计算机可读存储介质
CN110309451A (zh) 一种web预加载页面的生成方法及装置
CN108304239B (zh) 用于远程操作的快速界面交互方法及装置
CN109558323B (zh) 用于调试页面的系统、方法和装置
US8854368B1 (en) Point sprite rendering in a cross platform environment
WO2019228013A1 (fr) Procédé, appareil et dispositif pour afficher un texte riche sur un modèle 3d
CN114741081B (zh) 一种基于异构缓存访问的跨运行环境显示输出共享方法
WO2022033131A1 (fr) Procédé de rendu d'animation basé sur un format de données json
KR20130017337A (ko) 하이브리드 앱 개발 플랫폼 구조 및 그 테스트 방법, 그리고 프로그램을 기록한 컴퓨터로 읽을 수 있는 기록매체.
US11758016B2 (en) Hosted application as web widget toolkit
JP2022536058A (ja) 動的に同期した画像テキストのローカライゼーション方法、システム、プログラム
CN109582580B (zh) 用于调试页面的系统、方法和装置
CN109144655B (zh) 图像动态展示的方法、装置、系统及介质
US10347043B2 (en) Core animation portals
CN113419806B (zh) 图像处理方法、装置、计算机设备和存储介质
CN115131470A (zh) 一种图文素材合成方法、装置、电子设备和存储介质
CN115391692A (zh) 视频处理方法和装置

Legal Events

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

Ref document number: 17850205

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 17850205

Country of ref document: EP

Kind code of ref document: A1