WO2023010851A1 - 基于WebGL的图形渲染方法、装置及系统 - Google Patents

基于WebGL的图形渲染方法、装置及系统 Download PDF

Info

Publication number
WO2023010851A1
WO2023010851A1 PCT/CN2022/080390 CN2022080390W WO2023010851A1 WO 2023010851 A1 WO2023010851 A1 WO 2023010851A1 CN 2022080390 W CN2022080390 W CN 2022080390W WO 2023010851 A1 WO2023010851 A1 WO 2023010851A1
Authority
WO
WIPO (PCT)
Prior art keywords
rendering
data
webgl
format
preset
Prior art date
Application number
PCT/CN2022/080390
Other languages
English (en)
French (fr)
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 WO2023010851A1 publication Critical patent/WO2023010851A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T19/00—Manipulating 3D models or images for computer graphics
    • G06T19/20—Editing of 3D images, e.g. changing shapes or colours, aligning objects or positioning parts
    • 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/448—Execution paradigms, e.g. implementations of programming paradigms
    • G06F9/4482—Procedural
    • 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/448—Execution paradigms, e.g. implementations of programming paradigms
    • G06F9/4488—Object-oriented

Definitions

  • This application relates generally to the field of computer technology. More specifically, the present application relates to a WebGL-based graphics rendering method, device and system.
  • WebGL is a drawing technology standard that combines Javascript and OpenGL. The purpose is to open the underlying drawing capabilities to the web application layer. This standard is widely supported on browser platforms.
  • WebGL is a state machine. Through its drawing, it needs to maintain various complicated states such as vertex coordinates and texture coordinates. A little carelessness will lead to errors in rendering results, which makes it difficult to build a more complex rendering system on it. difficulty.
  • the solution of the present application provides a WebGL-based graphics rendering method, device and system.
  • the present application provides a WebGL-based graphics rendering method, wherein the method includes: acquiring initial rendering information; converting the initial rendering information according to a preset layer encapsulation format to obtain Layer rendering data; mapping the layer rendering data to a WebGL data format to obtain WebGL rendering data; calling a WebGL interface and performing rendering output according to the WebGL rendering data.
  • This application encapsulates the elements drawn by WebGL into layers, obtains the layer rendering data in the form of the preset layer packaging format, and then maps the layer rendering data to the WebGL data format, thereby opening the underlying drawing capabilities to the web
  • the application layer wherein the preset layer encapsulation format can be provided to the web application layer in the form of an interface.
  • the initial rendering information includes data of the element to be rendered and a linear transformation instruction to be performed on the element to be rendered.
  • the preset layer encapsulation format includes a preset data source format and a preset matrix format;
  • the layer rendering data includes pixel data of the element to be rendered and transformation matrix data of the element to be rendered;
  • the converting the initial rendering information according to the preset layer encapsulation format to obtain the layer rendering data includes: converting the element data to be rendered according to the preset data source format to obtain the pixel data;
  • the linear transformation instruction is converted according to the preset matrix format to obtain the transformation matrix data.
  • converting the element data to be rendered according to the preset data source format, and obtaining the pixel data includes: setting the element data to be rendered by setting texture pixels and/or directly setting frames The pixel data is obtained by converting items in a buffered manner.
  • converting the linear transformation instruction according to the preset matrix format, and obtaining the transformation matrix data includes: according to the linear transformation instruction and its corresponding preset matrix format, obtaining the data corresponding to the linear transformation instruction One-to-one corresponding linear transformation matrices, and then multiply the initial matrix with the corresponding linear transformation matrix in sequence according to the order of the linear transformation instructions to obtain the transformation matrix data.
  • the preset matrix format is preset according to the linear transformation instruction, and similar linear transformation instructions correspond to the same preset matrix format, wherein the type of the linear transformation instruction includes any of translation, rotation, and scaling. A sort of.
  • mapping the layer rendering data into a WebGL data format includes: mapping the pixel data into a WebGL texture; and mapping the transformation matrix data into attributes in a WebGL shader.
  • the initial rendering information includes global attribute data
  • the method further includes: before converting the initial rendering information according to a preset layer encapsulation format to obtain layer rendering data, according to the global Attribute data sets the WebGL context.
  • the WebGL context includes relevant data related to global attributes such as the width and height of the canvas.
  • the present application provides a WebGL-based graphics rendering method, wherein the method includes: using the above-mentioned WebGL-based graphics rendering method to obtain the first rendering element; judging whether to retain the first rendering element, if not, recycle the first rendering element; judge whether there is new initial rendering information, and if so, use the above-mentioned WebGL-based graphics rendering method to obtain the second rendering element.
  • the present application provides a WebGL-based graphics rendering device, wherein the device includes: an acquisition module for acquiring initial rendering information; a format conversion module for converting the initial rendering information Convert according to the preset layer encapsulation format to obtain layer rendering data; the data processing module is used to map the layer rendering data into WebGL data format to obtain WebGL rendering data; the rendering module is used to call the WebGL interface and according to The WebGL rendering data is rendered and outputted.
  • the device includes: an acquisition module for acquiring initial rendering information; a format conversion module for converting the initial rendering information Convert according to the preset layer encapsulation format to obtain layer rendering data; the data processing module is used to map the layer rendering data into WebGL data format to obtain WebGL rendering data; the rendering module is used to call the WebGL interface and according to The WebGL rendering data is rendered and outputted.
  • the obtaining module is used to obtain the following information: data of the element to be rendered and a linear transformation instruction to be performed on the element to be rendered.
  • the preset layer encapsulation format includes a preset data source format and a preset matrix format;
  • the layer rendering data includes pixel data of the element to be rendered and transformation matrix data of the element to be rendered;
  • the format conversion module is used to obtain the layer rendering data in the following manner: convert the element data to be rendered according to the preset data source format to obtain the pixel data; convert the linear transformation instruction according to the The preset matrix format is converted to obtain the transformation matrix data.
  • the format conversion module is configured to obtain the pixel data in the following manner: convert the element data to be rendered by setting texture pixels and/or directly setting frame buffers to obtain the pixel data .
  • the format conversion module is configured to obtain the transformation matrix data in the following manner: according to the linear transformation instruction and its corresponding preset matrix format, obtain a linear transformation matrix corresponding to the linear transformation instruction one-to-one , and then multiply the initial matrix and its corresponding linear transformation matrix sequentially according to the order of the linear transformation instructions to obtain the transformation matrix data.
  • the data processing module is configured to obtain the WebGL rendering data in the following manner: map the pixel data to a WebGL texture; map the transformation matrix data to attributes in a WebGL shader.
  • the initial rendering information includes global attribute data
  • the device further includes: a setting module, configured to set a WebGL context according to the global attribute data.
  • the present application provides a WebGL-based graphics rendering system, wherein the system includes: the above-mentioned WebGL-based graphics rendering device, used to obtain rendering elements; logic processing device, used to process logic judging; recycling means for recycling rendering elements according to the instruction of the logical processing means.
  • the logic processing device is used to process the following logic judgment: judge whether to keep the first rendering element, if not, instruct the recovery device Reclaiming the first rendering element; judging whether there is newly added initial rendering information, and if so, instructing the WebGL-based graphics rendering device to obtain a second rendering element according to the newly added initial rendering information.
  • the present application provides an electronic device, wherein the device includes a memory and a processor, a computer program is stored in the memory, and when the processor executes the computer program, the present invention is realized. Apply the above WebGL-based graphics rendering method.
  • the present application provides a computer-readable storage medium, wherein the storage medium stores a computer program, and when the computer program is executed, the above-mentioned WebGL-based graphics rendering method of the present application is implemented.
  • the WebGL-based graphics rendering method, device, and system of the present application encapsulate elements drawn with WebGL into layers, obtain layer rendering data in the form of preset layer packaging formats, and then map the layer rendering data to WebGL data format, thus opening the underlying drawing capability to the web application layer.
  • the WebGL-based graphics rendering method and device of the present application the understanding cost of the development of web application layer rendering is reduced, and it is no longer necessary to manually maintain various attributes in the state machine, and only need to intuitively operate layer attributes, which is simple and easy to operate .
  • Fig. 1 is a flowchart showing a WebGL-based graphics rendering method according to an embodiment of the present application
  • Fig. 2 is a flowchart illustrating a WebGL-based graphics rendering method according to another embodiment of the present application
  • Fig. 3 is a flowchart illustrating a WebGL-based graphics rendering method according to a specific embodiment of the present application
  • FIG. 4 is a schematic block diagram illustrating a WebGL-based graphics rendering device according to an embodiment of the present application
  • Fig. 5 is a schematic block diagram showing a WebGL-based graphics rendering system according to another embodiment of the present application.
  • An embodiment of the present application provides a WebGL-based graphics rendering method, as shown in FIG. 1 , the method includes the following steps S101-S104.
  • Step S101 Obtain initial rendering information
  • Step S102 Convert the initial rendering information according to the preset layer encapsulation format to obtain layer rendering data
  • Step S103 Map the layer rendering data to WebGL data format to obtain WebGL rendering data
  • step S104 call the WebGL interface and perform rendering output according to the WebGL rendering data.
  • This application encapsulates the elements drawn by WebGL into layers, obtains the layer rendering data in the form of the preset layer packaging format, and then maps the layer rendering data to the WebGL data format, thereby opening the underlying drawing capabilities to the web application layer.
  • step S101 initial rendering information is acquired.
  • initial rendering information should be obtained first.
  • the initial rendering information may be obtained through any appropriate means, for example, it may be from a gallery, uploaded or input by an operator, and so on.
  • the initial rendering information includes data of the element to be rendered and a linear transformation instruction to be performed on the element to be rendered.
  • the element data to be rendered may be pictures or image data in any format
  • the linear transformation instructions include instructions such as translation, rotation, and scaling.
  • step S102 the initial rendering information is converted according to a preset layer encapsulation format to obtain layer rendering data.
  • the preset layer encapsulation format includes a preset data source format and a preset matrix format
  • the layer rendering data includes the pixel data of the element to be rendered and the transformation matrix of the element to be rendered
  • converting the linear transformation instruction according to the preset matrix format, and obtaining the transformation matrix data includes: according to the linear transformation instruction and its corresponding preset matrix format, obtaining the The linear transformation matrix corresponding to the linear transformation instructions one by one, and then the initial matrix is multiplied by the corresponding linear transformation matrix according to the order of the linear transformation instructions to obtain the transformation matrix data.
  • the preset matrix format is preset according to the linear transformation instruction, and similar linear transformation instructions correspond to the same preset matrix format, wherein the type of the linear transformation instruction includes any one of translation, rotation, and scaling.
  • the preset data source format and the preset matrix format are respectively provided to the web application layer through corresponding interfaces.
  • the data of the element to be rendered is converted by setting the texture pixel and/or directly setting the frame buffer to obtain pixel data;
  • the linear transformation instruction of the element to be rendered is converted according to the preset matrix format to obtain a 3 ⁇ 3 matrix , which is the transformation matrix data.
  • the texel format is the way the image is stored in the GPU memory.
  • the texel setting method can be any applicable method in the prior art, and there is no special limitation here; each storage unit of the frame buffer corresponds to a pixel, and the entire frame buffer corresponds to For one frame of image, the setting method of the frame buffer can adopt any suitable method in the prior art, and there is no special limitation here.
  • the preset matrix format is a 3 ⁇ 3 matrix, including: an initial matrix format, a translation matrix format, a rotation matrix format, and a scaling matrix format, wherein,
  • the diagonal elements in the initial matrix are all 1, and the rest of the elements are 0.
  • the format of the initial matrix is as follows:
  • the format of the translation matrix is as follows:
  • x represents the displacement in the horizontal direction (x-axis direction)
  • y represents the displacement in the vertical direction (y-axis direction)
  • the displacement unit is a pixel point
  • the positive displacement of the x-axis or y-axis is expressed by a positive number
  • the x-axis or y-axis The displacement in the opposite direction of the axis is represented by a negative number;
  • ⁇ represents the clockwise rotation angle
  • the scaling matrix format is as follows:
  • m represents the scaling factor in the horizontal direction (x-axis direction)
  • Converting the linear transformation instruction of the element to be rendered according to the preset matrix format includes: according to the translation, rotation, scaling and other linear transformation instructions of the element to be rendered and the above-mentioned translation matrix format, rotation matrix format, and scaling matrix format, respectively obtain the translation matrix, rotation matrix format, and scaling matrix format.
  • Rotation matrix, scaling matrix and then multiply the initial matrix with the translation matrix, rotation matrix, and scaling matrix in the order of translation, rotation, and scaling to obtain the transformation matrix data. If a certain type of linear transformation instruction is not obtained, This type of matrix is skipped.
  • step S103 the layer rendering data is mapped to a WebGL data format to obtain WebGL rendering data.
  • mapping the layer rendering data to WebGL data format, and obtaining the WebGL rendering data includes: mapping the pixel data to a WebGL texture; mapping the transformation matrix data to attributes in a WebGL shader .
  • the initial rendering information includes global attribute data
  • the WebGL-based graphics rendering method of this embodiment further includes: before step S102, setting the WebGL context according to the global attribute data, wherein the global attribute Data includes any relevant data involving global properties, such as canvas width and height.
  • step 104 the WebGL interface is invoked to render and output according to the WebGL rendering data.
  • the above-mentioned embodiments of the present application can be used to render pictures or images, including rendering a single element or multiple elements in a picture or image, by encapsulating the elements to be rendered into layers, and providing the web application layer with settings data sources and The interface of linear transformation, obtain the pixel data and transformation matrix data of the element to be rendered through the corresponding interface, and then map the pixel data and transformation matrix data to the attributes in WebGL texture and WebGL shader respectively, and call the WebGL interface for rendering, so as to achieve In order to open the underlying drawing capability to the web application layer, and the understanding cost of the development of web application layer rendering is reduced, and there is no need to manually maintain various attributes in the state machine, which is simple and easy to operate.
  • Step S201 Using the above-mentioned WebGL-based graphics rendering method to obtain the first rendering element; Step S202: Judging whether to keep the first rendering element, if not, recycling the first rendering element; Step S203: judging whether there is new initial rendering information, if so, using the above-mentioned WebGL-based graphics rendering method to obtain the second rendering element .
  • the WebGL-based graphics rendering method of the present embodiment includes:
  • Step S301 Obtain initial rendering information, and set the WebGL context according to the global attribute data in the initial rendering information;
  • Step S302 Convert the element data to be rendered in the initial rendering information according to the preset data source format to obtain pixel data; convert the linear transformation instructions in the initial rendering information according to the preset matrix format to obtain transformation matrix data;
  • Step S303 Map the pixel data and the transformation matrix data to attributes in the WebGL texture and the WebGL shader respectively, and call the WebGL interface for rendering to obtain the first rendering element;
  • Step S304 judging whether to keep the first rendering element, if not, recycling the first rendering element
  • Step S305 Determine whether there is newly added initial rendering information, if yes, repeat steps S301-Step S303 to obtain a second rendering element; if not, output a rendering result.
  • step 304 first judges whether to retain the first rendering element, if not, recycles the first rendering element, releases storage space and processing threads, and then proceeds to step 305 to judge Whether there is new initial rendering information, the processing efficiency is higher.
  • the above embodiments of the present application can be used to render different elements to be rendered in multiple cycles, and different elements to be rendered can be included in different cycles, and the above method can realize effective management of element rendering in multiple cycles.
  • Another embodiment of the present application provides a WebGL-based graphics rendering device.
  • the device is used to execute the steps in the embodiment of the WebGL-based graphics rendering method described above in conjunction with FIG. 1 .
  • the device 100 includes an acquisition module 101, a format conversion module 102, a data processing module 103, and a rendering module 104, wherein the acquisition module 101 is used to acquire initial rendering information; the format conversion module 102 is used to convert the initial The rendering information is converted according to the preset layer encapsulation format to obtain layer rendering data; the data processing module 103 is used to map the layer rendering data into WebGL data format to obtain WebGL rendering data; the rendering module 104 is used to call the WebGL interface And perform rendering output according to the WebGL rendering data.
  • the obtaining module 101 is used to obtain the following information: the data of the element to be rendered and the linear transformation instruction to be performed on the element to be rendered; the preset layer encapsulation format includes a preset data source format and a preset matrix Format; layer rendering data includes pixel data of elements to be rendered and transformation matrix data of elements to be rendered; format conversion module 102 is used to obtain layer rendering data in the following manner: convert element data to be rendered according to a preset data source format , to obtain pixel data; convert the linear transformation command according to a preset matrix format to obtain transformation matrix data.
  • the format conversion module is used to obtain the pixel data in the following manner: convert the element data to be rendered by setting texture pixels and/or directly setting frame buffers to obtain the pixel data;
  • the format conversion module is used to obtain the transformation matrix data in the following manner: according to the linear transformation instruction and its corresponding preset matrix format, obtain a linear transformation matrix corresponding to the linear transformation instruction one by one, and then obtain the linear transformation matrix according to the linear transformation instruction
  • the order of the linear transformation instructions is to multiply the initial matrix with its corresponding linear transformation matrix in turn to obtain the transformation matrix data.
  • the format conversion module 102 includes a data processing unit, a data source interface, and a transformation matrix interface.
  • the linear transformation instructions such as translation, rotation, and scaling are converted according to the preset data source format and preset matrix format respectively, and the pixel data and transformation matrix data of the elements to be rendered are obtained;
  • the data source interface is connected with the data processing unit, and is used to The pixel data of the element to be rendered is obtained from the data processing unit;
  • the transformation matrix interface is connected with the data processing unit, and is used for obtaining the transformation matrix data of the element to be rendered from the data processing unit.
  • the data processing module 103 is configured to obtain WebGL rendering data in the following manner: mapping the pixel data to a WebGL texture; mapping the transformation matrix data to attributes in a WebGL shader.
  • the data processing module 103 is respectively connected to the data source interface and the transformation matrix interface, and obtains the pixel data and transformation matrix data of the elements to be rendered from the data source interface and the transformation matrix interface respectively, so as to map them into WebGL textures and WebGL shaders respectively middle attribute.
  • the initial rendering information further includes global attribute data
  • the WebGL-based graphics rendering device of this embodiment further includes: a setting module, configured to set the WebGL context according to the global attribute data.
  • Another embodiment of the present application also provides a WebGL-based graphics rendering system. As shown in FIG. , the WebGL-based graphics rendering device 100 is used to obtain rendering elements; the logic processing device 200 is used to process logic judgment;
  • the logic processing device 200 can be used to process any necessary logical judgment related to the process management of WebGL-based graphics rendering, including but not limited to: After rendering an element, determine whether to keep the first rendering element, if not, instruct the recovery device 300 to recycle the first rendering element; and/or determine whether there is new initial rendering information, if so, instruct the WebGL-based graphics rendering device 100 Obtain a second rendering element according to the newly added initial rendering information.
  • Another embodiment of the present application also provides an electronic device, wherein the device includes a memory and a processor, a computer program is stored in the memory, and when the processor executes the computer program, the following steps are implemented : Obtain initial rendering information; convert the initial rendering information according to the preset layer encapsulation format to obtain layer rendering data; map the layer rendering data to WebGL data format to obtain WebGL rendering data; call the WebGL interface and Perform rendering output according to the WebGL rendering data.
  • Another embodiment of the present application provides a computer-readable storage medium, wherein the storage medium stores a computer program, and when the computer program is executed, the following steps are implemented: acquiring initial rendering information; The rendering information is converted according to the preset layer encapsulation format to obtain layer rendering data; the layer rendering data is mapped to WebGL data format to obtain WebGL rendering data; the WebGL interface is called to render and output according to the WebGL rendering data.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Architecture (AREA)
  • Computer Graphics (AREA)
  • Computer Hardware Design (AREA)
  • Image Generation (AREA)

Abstract

本申请涉及一种基于WebGL的图形渲染方法、装置及系统。所述方法包括：获取初始渲染信息；将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据；将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据；调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。本申请通过将采用WebGL绘制的元素封装成图层，并以预设图层封装格式的形式获取图层渲染数据，继而将图层渲染数据映射为WebGL数据格式，从而将底层绘图能力开放给web应用层。

Description

基于WebGL的图形渲染方法、装置及系统
本申请要求2021年8月5日提交至中国知识产权局的，申请号为202110896610.4，名称为“一种基于WebGL的图形渲染方法、装置及系统”的中国发明专利申请的优先权，其全部公开内容结合于此作为参考。
技术领域
本申请一般地涉及计算机技术领域。更具体地，本申请涉及一种基于WebGL的图形渲染方法、装置及系统。
背景技术
WebGL是一种将Javasrcipt和OpenGL结合在一起的绘图技术标准，目的是将底层绘图能力开放给web应用层，这一标准在浏览器平台上得到了广泛的支持。
但是WebGL的实现是一个状态机，通过其绘图需要维护顶点坐标、纹理坐标等各种繁杂的状态，稍有不慎就会导致渲染结果出错，这使在其上构建较为复杂的渲染系统变得困难。
基于以上技术问题，特提出本申请。
发明内容
为了至少部分地解决背景技术中提到的技术问题，本申请的方案提供了一种基于WebGL的图形渲染方法、装置及系统。
根据本申请的第一方面，本申请提供了一种基于WebGL的图形渲染方法，其中，所述方法包括：获取初始渲染信息；将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据；将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据；调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。本申请通过将采用WebGL绘制的元素封装成图层，并以预设图层封装格式的形式获取图层渲染数据，继而将图层渲染数据映射为WebGL数据格式，从而将底层绘图能力开放给web应用层，其中，预设图层封装格式可通过接口的形式对web应用层提供。
可选的，所述初始渲染信息包括待渲染元素数据和欲对待渲染元素进行的 线性变换指令。
可选的，所述预设图层封装格式包括预设数据源格式和预设矩阵格式；所述图层渲染数据包括所述待渲染元素的像素数据和所述待渲染元素的变换矩阵数据；所述将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据包括：将所述待渲染元素数据按照所述预设数据源格式进行转换，获得所述像素数据；将所述线性变换指令按照所述预设矩阵格式进行转换，获得所述变换矩阵数据。
可选的，所述将所述待渲染元素数据按照所述预设数据源格式进行转换，获得所述像素数据包括：将所述待渲染元素数据通过纹理像素设置的方式和/或直接设置帧缓存的方式进项转换，获得所述像素数据。
可选的，将所述线性变换指令按照所述预设矩阵格式进行转换，获得所述变换矩阵数据包括：根据所述线性变换指令及其对应的预设矩阵格式，获得与所述线性变换指令一一对应的线性变换矩阵，然后按照所述线性变换指令的顺序将初始矩阵依次与其对应的线性变换矩阵进行相乘，获得所述变换矩阵数据。
可选的，所述预设矩阵格式根据所述线性变换指令进行预先设置，同类线性变换指令对应相同的预设矩阵格式，其中，所述线性变换指令的类型包括平移、旋转、缩放中的任意一种。
可选的，所述将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据包括：将所述像素数据映射为WebGL纹理；将所述变换矩阵数据映射为WebGL着色器中属性。
可选的，所述初始渲染信息包括全局属性数据，所述方法还包括：在所述将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据之前，根据所述全局属性数据设置WebGL上下文。其中，WebGL上下文包括画布宽高等涉及全局属性的相关数据。
根据本申请的第二方面，本申请提供了一种基于WebGL的图形渲染方法，其中，所述方法包括：采用上述基于WebGL的图形渲染方法获得第一渲染元素；判断是否保留所述第一渲染元素，若否，则回收所述第一渲染元素；判断 是否存在新增初始渲染信息，若是，则采用上述基于WebGL的图形渲染方法获得第二渲染元素。
根据本申请的第三方面，本申请提供了一种基于WebGL的图形渲染装置，其中，所述装置包括：获取模块，用于获取初始渲染信息；格式转换模块，用于将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据；数据处理模块，用于将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据；渲染模块，用于调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。
可选的，所述获取模块用于获取如下信息：待渲染元素数据和欲对待渲染元素进行的线性变换指令。
可选的，所述预设图层封装格式包括预设数据源格式和预设矩阵格式；所述图层渲染数据包括所述待渲染元素的像素数据和所述待渲染元素的变换矩阵数据；所述格式转换模块用于采取如下方式获得所述图层渲染数据：将所述待渲染元素数据按照所述预设数据源格式进行转换，获得所述像素数据；将所述线性变换指令按照所述预设矩阵格式进行转换，获得所述变换矩阵数据。
可选的，所述格式转换模块用于采取如下方式获得所述像素数据：将所述待渲染元素数据通过纹理像素设置的方式和/或直接设置帧缓存的方式进行转换，获得所述像素数据。
可选的，所述格式转换模块用于采取如下方式获得所述变换矩阵数据：根据所述线性变换指令及其对应的预设矩阵格式，获得与所述线性变换指令一一对应的线性变换矩阵，然后按照所述线性变换指令的顺序将初始矩阵依次与其对应的线性变换矩阵进行相乘，获得所述变换矩阵数据。
可选的，所述数据处理模块用于采取如下方式获得所述WebGL渲染数据：将所述像素数据映射为WebGL纹理；将所述变换矩阵数据映射为WebGL着色器中属性。
可选的，所述初始渲染信息包括全局属性数据，所述装置还包括：设置模块，用于根据所述全局属性数据设置WebGL上下文。
根据本申请的第四方面，本申请提供了一种基于WebGL的图形渲染系统，其中，所述系统包括：上述基于WebGL的图形渲染装置，用于获得渲染元素；逻辑处理装置，用于处理逻辑判断；回收装置，用于根据所述逻辑处理装置的指示回收渲染元素。
可选的，在采用所述基于WebGL的图形渲染装置获得第一渲染元素后，所述逻辑处理装置用于处理如下逻辑判断：判断是否保留第一渲染元素，若否，则指示所述回收装置回收所述第一渲染元素；判断是否存在新增初始渲染信息，若是，则指示所述基于WebGL的图形渲染装置根据所述新增初始渲染信息获得第二渲染元素。
根据本申请的第五方面，本申请提供了一种电子装置，其中，所述装置包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时，实现本申请上述基于WebGL的图形渲染方法。
根据本申请的第六方面，本申请提供了一种计算机可读存储介质，其中，所述存储介质存储有计算机程序，所述计算机程序被执行时，实现本申请上述基于WebGL的图形渲染方法。
本申请的基于WebGL的图形渲染方法、装置及系统通过将采用WebGL绘制的元素封装成图层，并以预设图层封装格式的形式获取图层渲染数据，继而将图层渲染数据映射为WebGL数据格式，从而将底层绘图能力开放给web应用层。通过本申请的基于WebGL的图形渲染方法和装置，web应用层渲染的开发的理解成本降低，且不再需要手动维护状态机中的各种属性，只需直观地操作图层属性，简单易操作。
附图说明
通过参考附图阅读下文的详细描述，本申请示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本申请的若干实施方式，并且相同或对应的标号表示相同或对应的部分其中：
图1是示出根据本申请的一个实施方式的基于WebGL的图形渲染方法的 流程图；
图2是示出根据本申请的另一个实施方式的基于WebGL的图形渲染方法的流程图；
图3是示出根据本申请的一个具体实施例的基于WebGL的图形渲染方法的流程图；
图4是示出根据本申请的一个实施方式的基于WebGL的图形渲染装置的示意性框图；
图5是示出根据本申请的另一个实施方式的基于WebGL的图形渲染系统的示意性框图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
下面结合附图来详细描述本申请的具体实施方式。
本申请的一个实施方式，提供了一种基于WebGL的图形渲染方法，如图1所示，所述方法包括以下步骤S101-S104。步骤S101：获取初始渲染信息；步骤S102：将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据；步骤S103：将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据；步骤S104：调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。
本申请通过将采用WebGL绘制的元素封装成图层，并以预设图层封装格式的形式获取图层渲染数据，继而将图层渲染数据映射为WebGL数据格式，从而将底层绘图能力开放给web应用层。
在步骤S101中，获取初始渲染信息。
根据本申请的实施例，为了进行图形渲染，首先应获取初始渲染信息。该初始渲染信息可以是通过任何适当途径获取到的，例如可以来自于图库， 由操作者上传或输入等等。
作为一种优选的实施例，该初始渲染信息包括待渲染元素数据和欲对待渲染元素进行的线性变换指令。其中，待渲染元素数据可以是任意格式的图片或图像数据，线性变换指令包括平移、旋转、缩放等指令。
在步骤S102中，将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据。
作为一种优选的实施例，预设图层封装格式包括预设数据源格式和预设矩阵格式，所述图层渲染数据包括所述待渲染元素的像素数据和所述待渲染元素的变换矩阵数据；所述将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据包括：将所述待渲染元素数据按照所述预设数据源格式进行转换，获得所述像素数据；将所述线性变换指令按照所述预设矩阵格式进行转换，获得所述变换矩阵数据。
作为一种优选的实施例，将所述线性变换指令按照所述预设矩阵格式进行转换，获得所述变换矩阵数据包括：根据所述线性变换指令及其对应的预设矩阵格式，获得与所述线性变换指令一一对应的线性变换矩阵，然后按照所述线性变换指令的顺序将初始矩阵依次与其对应的线性变换矩阵进行相乘，获得所述变换矩阵数据。所述预设矩阵格式根据所述线性变换指令进行预先设置，同类线性变换指令对应相同的预设矩阵格式，其中，所述线性变换指令的类型包括平移、旋转、缩放中的任意一种。
作为一种具体的实施例，预设数据源格式及预设矩阵格式分别通过相应接口提供给web应用层。其中，待渲染元素数据通过纹理像素设置的方式和/或直接设置帧缓存的方式进行转换，获得像素数据；待渲染元素的线性变换指令按照预设矩阵格式进行转换，获得一3×3的矩阵，即变换矩阵数据。纹理像素格式是图像存储在GPU内存的方式，纹理像素设置的方式可采用现有技术中任何适用的方式，在此不做特别限定；帧缓存的每一存储单元对应一个像素，整个帧缓存对应一帧图像，帧缓存的设置方式可采用现有技术中任何适用的方式，在此不做特别限定。
本具体实施例中，预设矩阵格式为3×3的矩阵，包括：初始矩阵格式、平移矩阵格式、旋转矩阵格式、缩放矩阵格式，其中，
初始矩阵中对角线元素均为1，其余元素为0，初始矩阵格式如下：
Figure PCTCN2022080390-appb-000001
平移矩阵格式如下：
Figure PCTCN2022080390-appb-000002
其中，x表示水平方向(x轴方向)的位移，y表示垂直方向(y轴方向)的位移；位移单位为像素点；x轴或y轴正向的位移以正数表示，x轴或y轴反向的位移以负数表示；
旋转矩阵格式如下：
Figure PCTCN2022080390-appb-000003
其中，α表示顺时针旋转角度；
缩放矩阵格式如下：
Figure PCTCN2022080390-appb-000004
其中，m表示水平方向(x轴方向)缩放倍数，n表示垂直方向(y轴方向)的缩放倍数；例如，将待渲染元素沿水平方向和垂直方向均缩小一半，则m＝n＝0.5；
将待渲染元素的线性变换指令按照预设矩阵格式进行转换包括：根据待渲染元素的平移、旋转、缩放等线性变换指令及上述平移矩阵格式、旋转矩阵格式、缩放矩阵格式，分别获得平移矩阵、旋转矩阵、缩放矩阵，然后按照平移、旋转、缩放的顺序将初始矩阵依次与平移矩阵、旋转矩阵、缩放矩阵进行相乘，获得变换矩阵数据，若未获取到其中某个类型的线性变换指令，则略过该类型矩阵。
在步骤S103中，将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据。
作为一种优选的实施例，将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据包括：将所述像素数据映射为WebGL纹理；将所述变换矩阵数据映射为WebGL着色器中属性。
作为一种优选的实施例，所述初始渲染信息包括全局属性数据，本实施例的基于WebGL的图形渲染方法还包括：在步骤S102之前，根据所述全局属性数据设置WebGL上下文，其中，全局属性数据包括任何涉及全局属性的相关数据，例如画布宽高等。
在步骤104中，调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。
具体地，通过调用WebGL接口，并根据WebGL上下文、WebGL纹理、WebGL着色器中属性进行图形渲染，以获得所需的渲染元素。
本申请的上述实施方式可以用于对图片或图像进行渲染，包括对图片或图像中单元素或多元素进行渲染，通过将待渲染元素封装为图层，并对web应用层提供设置数据源和线性变换的接口，通过对应接口获取待渲染元素的像素数据及变换矩阵数据，进而通过将像素数据及变换矩阵数据分别映射为WebGL纹理和WebGL着色器中属性，并调用WebGL接口进行渲染，从而实现了将底层绘图能力开放给web应用层，且web应用层渲染的开发的理解成本降低，且无需手动维护状态机中的各种属性，简单易操作。
本申请的另一实施方式，提供了一种基于WebGL的图形渲染方法，如图2所示，所述方法包括：步骤S201：采用上述基于WebGL的图形渲染方法获得第一渲染元素；步骤S202：判断是否保留所述第一渲染元素，若否，则回收所述第一渲染元素；步骤S203：判断是否存在新增初始渲染信息，若是，则采用上述基于WebGL的图形渲染方法获得第二渲染元素。
作为一种具体的实施例，如图3所示，本实施例的基于WebGL的图形 渲染方法包括：
步骤S301：获取初始渲染信息，并根据初始渲染信息中的全局属性数据设置WebGL上下文；
步骤S302：将初始渲染信息中的待渲染元素数据按照预设数据源格式进行转换，获得像素数据；将初始渲染信息中的线性变换指令按照预设矩阵格式进行转换，获得变换矩阵数据；
步骤S303：将像素数据及变换矩阵数据分别映射为WebGL纹理和WebGL着色器中属性，并调用WebGL接口进行渲染，获得第一渲染元素；
步骤S304：判断是否保留该第一渲染元素，若否，则回收该第一渲染元素；
步骤S305：判断是否存在新增初始渲染信息，若是，则重复步骤S301-步骤S303，获得第二渲染元素；若否，则输出渲染结果。
本领域技术人员可以理解的是，步骤304中“判断是否保留该第一渲染元素”与步骤305中“判断是否存在新增初始渲染信息”的先后顺序可以互换，在此不做特别限定。需要说明的是，若按照上述实施例的顺序，先由步骤304判断是否保留该第一渲染元素，若否，则回收该第一渲染元素，释放存储空间及处理线程，然后再由步骤305判断是否存在新增初始渲染信息，处理效率更高。
本申请上述实施方式可以用于对多个周期不同待渲染元素进行渲染，不同周期内可包括不同的待渲染元素，通过上述方法可实现多周期元素渲染的有效管理。
本申请的另一实施方式，提供了一种基于WebGL的图形渲染装置。该装置用于执行以上结合图1所描述的基于WebGL的图形渲染方法实施例中的步骤。
如图4所示，该装置100包括获取模块101、格式转换模块102、数据处理模块103、渲染模块104，其中，获取模块101用于获取初始渲染信息；格式转换模块102用于将所述初始渲染信息按照预设图层封装格式进行转 换，获得图层渲染数据；数据处理模块103用于将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据；渲染模块104用于调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。
作为一种优选的实施例，获取模块101用于获取如下信息：待渲染元素数据和欲对该待渲染元素进行的线性变换指令；预设图层封装格式包括预设数据源格式和预设矩阵格式；图层渲染数据包括待渲染元素的像素数据和待渲染元素的变换矩阵数据；格式转换模块102用于采取如下方式获得图层渲染数据：将待渲染元素数据按照预设数据源格式进行转换，获得像素数据；将线性变换指令按照预设矩阵格式进行转换，获得变换矩阵数据。
优选地，所述格式转换模块用于采取如下方式获得所述像素数据：将所述待渲染元素数据通过纹理像素设置的方式和/或直接设置帧缓存的方式进行转换，获得所述像素数据；所述格式转换模块用于采取如下方式获得所述变换矩阵数据：根据所述线性变换指令及其对应的预设矩阵格式，获得与所述线性变换指令一一对应的线性变换矩阵，然后按照所述线性变换指令的顺序将初始矩阵依次与其对应的线性变换矩阵进行相乘，获得所述变换矩阵数据。
作为一种具体的实施例，格式转换模块102包括数据处理单元、数据源接口、变换矩阵接口，其中，数据处理单元用于将获取模块101获取的待渲染元素数据及欲对该待渲染元素所进行的平移、旋转、缩放等线性变换指令分别按照预设数据源格式及预设矩阵格式进行数据格式转换，获得待渲染元素的像素数据和变换矩阵数据；数据源接口与数据处理单元连接，用于从数据处理单元获取待渲染元素的像素数据；变换矩阵接口与数据处理单元连接，用于从数据处理单元获取待渲染元素的变换矩阵数据。
作为一种优选的实施例，数据处理模块103用于采取如下方式获得WebGL渲染数据：将所述像素数据映射为WebGL纹理；将所述变换矩阵数据映射为WebGL着色器中属性。具体地，数据处理模块103分别与数据源接口、变换矩阵接口连接，并分别从数据源接口、变换矩阵接口获取待 渲染元素的像素数据和变换矩阵数据，以分别映射为WebGL纹理和WebGL着色器中属性。
作为一种优选的实施例，初始渲染信息还包括全局属性数据，本实施例的基于WebGL的图形渲染装置还包括：设置模块，用于根据全局属性数据设置WebGL上下文。
可以理解的是，关于以上参照图4描述的实施方式中的基于WebGL的图形渲染装置，其中各个模块执行操作的具体方式已经在结合图1所描述的基于WebGL的图形渲染方法的实施例中进行了详细描述，此处将不做详细阐述说明。
本申请的另一实施方式，还提供了一种基于WebGL的图形渲染系统，如图5所示，所述系统包括：上述基于WebGL的图形渲染装置100、逻辑处理装置200、回收装置300，其中，基于WebGL的图形渲染装置100用于获得渲染元素；逻辑处理装置200用于处理逻辑判断；回收装置300用于根据逻辑处理装置200的指示回收渲染元素。
本领域技术人员可以理解的是，逻辑处理装置200可以用来处理任何与基于WebGL的图形渲染的流程管理相关的必要的逻辑判断，包括但不限于：在采用基于WebGL的图形渲染装置100获得第一渲染元素后，判断是否保留第一渲染元素，若否，则指示回收装置300回收该第一渲染元素；和/或判断是否存在新增初始渲染信息，若是，则指示基于WebGL的图形渲染装置100根据该新增初始渲染信息获得第二渲染元素。
可以理解的是，关于以上参照图5描述的实施方式中的基于WebGL的图形渲染系统，其中各个装置执行操作的具体方式已经在结合图1-3所描述的基于WebGL的图形渲染方法的实施例中进行了详细描述，此处将不做详细阐述说明。
本申请的另一实施方式，还提供了一种电子装置，其中，所述装置包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时，实现如下步骤：获取初始渲染信息；将所述初始渲染信 息按照预设图层封装格式进行转换，获得图层渲染数据；将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据；调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。
可以理解的是，所述处理器执行所述计算机程序时实现的步骤与上述方法中的各个步骤的实现方式基本一致，具体方式已经在有关基于WebGL的图形渲染方法的实施例中进行了详细描述，此处将不做详细阐述说明。
本申请的另一实施方式，提供了一种计算机可读存储介质，其中，所述存储介质存储有计算机程序，所述计算机程序被执行时，实现如下步骤：获取初始渲染信息；将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据；将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据；调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。
可以理解的是，所述处理器执行所述计算机程序时实现的步骤与上述方法中的各个步骤的实现方式基本一致，具体方式已经在有关基于WebGL的图形渲染方法的实施例中进行了详细描述，此处将不做详细阐述说明。
以上对本申请实施例进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。
应当理解，本申请的权利要求、说明书及附图中的术语“第一”和“第二”、等是用于区别不同对象，而不是用于描述特定顺序。本申请的说明书和权利要求书中使用的术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
还应当理解，在此本申请说明书中所使用的术语仅仅是出于描述特定实施例的目的，而并不意在限定本申请。如在本申请说明书和权利要求书 中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。还应当进一步理解，在本申请说明书和权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

Claims (20)

  1. 一种基于WebGL的图形渲染方法，其中，所述方法包括：
    获取初始渲染信息；
    将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据；
    将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据；
    调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。
  2. 根据权利要求1所述的基于WebGL的图形渲染方法，其中，所述初始渲染信息包括待渲染元素数据和欲对待渲染元素进行的线性变换指令。
  3. 根据权利要求2所述的基于WebGL的图形渲染方法，其中，所述预设图层封装格式包括预设数据源格式和预设矩阵格式；所述图层渲染数据包括所述待渲染元素的像素数据和所述待渲染元素的变换矩阵数据；所述将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据包括：
    将所述待渲染元素数据按照所述预设数据源格式进行转换，获得所述像素数据；
    将所述线性变换指令按照所述预设矩阵格式进行转换，获得所述变换矩阵数据。
  4. 根据权利要求3所述的基于WebGL的图形渲染方法，其中，所述将所述待渲染元素数据按照所述预设数据源格式进行转换，获得所述像素数据包括：
    将所述待渲染元素数据通过纹理像素设置的方式和/或直接设置帧缓存的方式进行转换，获得所述像素数据。
  5. 根据权利要求3所述的基于WebGL的图形渲染方法，其中，将所述线性变换指令按照所述预设矩阵格式进行转换，获得所述变换矩阵数据包括：
    根据所述线性变换指令及其对应的预设矩阵格式，获得与所述线性变换指令一一对应的线性变换矩阵，然后按照所述线性变换指令的顺序将初始矩阵依次与其对应的线性变换矩阵进行相乘，获得所述变换矩阵数据。
  6. 根据权利要求5所述的基于WebGL的图形渲染方法，其中，所述预 设矩阵格式根据所述线性变换指令进行预先设置，同类线性变换指令对应相同的预设矩阵格式。
  7. 根据权利要求3或4所述的基于WebGL的图形渲染方法，其中，所述将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据包括：
    将所述像素数据映射为WebGL纹理；
    将所述变换矩阵数据映射为WebGL着色器中属性。
  8. 根据权利要求1所述的基于WebGL的图形渲染方法，其中，所述初始渲染信息包括全局属性数据，所述方法还包括：
    在所述将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据之前，根据所述全局属性数据设置WebGL上下文。
  9. 一种基于WebGL的图形渲染方法，其中，所述方法包括：
    采用如权利要求1至8中任一项所述的基于WebGL的图形渲染方法获得第一渲染元素；
    判断是否保留所述第一渲染元素，若否，则回收所述第一渲染元素；
    判断是否存在新增初始渲染信息，若是，则采用如权利要求1至8中任一项所述的基于WebGL的图形渲染方法获得第二渲染元素。
  10. 一种基于WebGL的图形渲染装置，其中，所述装置包括：
    获取模块，用于获取初始渲染信息；
    格式转换模块，用于将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据；
    数据处理模块，用于将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据；
    渲染模块，用于调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。
  11. 根据权利要求10所述的基于WebGL的图形渲染装置，其中，所述获取模块用于获取如下信息：待渲染元素数据和欲对待渲染元素进行的线性变换指令。
  12. 根据权利要求11所述的基于WebGL的图形渲染装置，其中，所述预设图层封装格式包括预设数据源格式和预设矩阵格式；所述图层渲染数据包括所述待渲染元素的像素数据和所述待渲染元素的变换矩阵数据；所述格式转换模块用于采取如下方式获得所述图层渲染数据：
    将所述待渲染元素数据按照所述预设数据源格式进行转换，获得所述像素数据；
    将所述线性变换指令按照所述预设矩阵格式进行转换，获得所述变换矩阵数据。
  13. 根据权利要求12所述的基于WebGL的图形渲染装置，其中，所述格式转换模块用于采取如下方式获得所述像素数据：
    将所述待渲染元素数据通过纹理像素设置的方式和/或直接设置帧缓存的方式进行转换，获得所述像素数据。
  14. 根据权利要求12所述的基于WebGL的图形渲染装置，其中，所述格式转换模块用于采取如下方式获得所述变换矩阵数据：
    根据所述线性变换指令及其对应的预设矩阵格式，获得与所述线性变换指令一一对应的线性变换矩阵，然后按照所述线性变换指令的顺序将初始矩阵依次与其对应的线性变换矩阵进行相乘，获得所述变换矩阵数据。
  15. 根据权利要求12所述的基于WebGL的图形渲染装置，其中，所述数据处理模块用于采取如下方式获得所述WebGL渲染数据：
    将所述像素数据映射为WebGL纹理；
    将所述变换矩阵数据映射为WebGL着色器中属性。
  16. 根据权利要求10所述的基于WebGL的图形渲染装置，其中，所述初始渲染信息包括全局属性数据，所述装置还包括：
    设置模块，用于根据所述全局属性数据设置WebGL上下文。
  17. 一种基于WebGL的图形渲染系统，其中，所述系统包括：
    如权利要求10至16中任一项所述的基于WebGL的图形渲染装置，用于获得渲染元素；
    逻辑处理装置，用于处理逻辑判断；
    回收装置，用于根据所述逻辑处理装置的指示回收渲染元素。
  18. 根据权利要求17所述的基于WebGL的图形渲染系统，其中，在采用所述基于WebGL的图形渲染装置获得第一渲染元素后，所述逻辑处理装置还用于处理如下逻辑判断：
    判断是否保留所述第一渲染元素，若否，则指示所述回收装置回收所述第一渲染元素；和/或，
    判断是否存在新增初始渲染信息，若是，则指示所述基于WebGL的图形渲染装置对所述新增初始渲染信息进行处理，以获得第二渲染元素。
  19. 一种电子装置，其中，所述装置包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时，实现如权利要求1至9中任一项所述的方法。
  20. 一种计算机可读存储介质，其中，所述存储介质存储有计算机程序，所述计算机程序被执行时，实现如权利要求1至9中任一项所述的方法。
PCT/CN2022/080390 2021-08-05 2022-03-11 基于WebGL的图形渲染方法、装置及系统 WO2023010851A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202110896610.4A CN113570733A (zh) 2021-08-05 2021-08-05 一种基于WebGL的图形渲染方法、装置及系统
CN202110896610.4 2021-08-05

Publications (1)

Publication Number Publication Date
WO2023010851A1 true WO2023010851A1 (zh) 2023-02-09

Family

ID=78170514

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/080390 WO2023010851A1 (zh) 2021-08-05 2022-03-11 基于WebGL的图形渲染方法、装置及系统

Country Status (2)

Country Link
CN (1) CN113570733A (zh)
WO (1) WO2023010851A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116416399A (zh) * 2023-04-24 2023-07-11 北京和德宇航技术有限公司 一种地图生成方法、装置、设备和存储介质
CN117036532A (zh) * 2023-10-10 2023-11-10 杭州芯翼科技有限公司 晶圆图生成方法、装置、电子设备和存储介质

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113570733A (zh) * 2021-08-05 2021-10-29 稿定（厦门）科技有限公司 一种基于WebGL的图形渲染方法、装置及系统
CN114491351B (zh) * 2022-04-18 2022-08-23 北京航空航天大学杭州创新研究院 可适配WebGIS平台的格点数据可视化方法和系统

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110216069A1 (en) * 2010-03-08 2011-09-08 Gary Keall Method And System For Compressing Tile Lists Used For 3D Rendering
CN103713891A (zh) * 2012-10-09 2014-04-09 阿里巴巴集团控股有限公司 一种在移动设备上进行图形渲染的方法和装置
CN108648249A (zh) * 2018-05-09 2018-10-12 歌尔科技有限公司 一种图像渲染方法、装置及智能穿戴设备
CN111737621A (zh) * 2020-06-17 2020-10-02 友虹(北京)科技有限公司 基于wasm的ofd渲染方法、系统及装置
CN112559647A (zh) * 2019-09-10 2021-03-26 成都鼎桥通信技术有限公司 一种地图图层数据的更新方法和装置
CN113570733A (zh) * 2021-08-05 2021-10-29 稿定（厦门）科技有限公司 一种基于WebGL的图形渲染方法、装置及系统

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103678631B (zh) * 2013-12-19 2016-10-05 华为技术有限公司 页面渲染方法及装置
CN107832108B (zh) * 2016-09-14 2021-05-07 阿里巴巴集团控股有限公司 3D canvas网页元素的渲染方法、装置及电子设备
CN106990961B (zh) * 2017-03-28 2023-10-27 北京航天联智科技有限公司 一种WebGL图形渲染引擎的建立方法
CN111127608B (zh) * 2018-10-31 2024-04-19 百度在线网络技术（北京）有限公司 渲染方法、装置和存储介质
CN112862940A (zh) * 2021-03-10 2021-05-28 广州南方卫星导航仪器有限公司 一种地图渲染方法、装置、设备和存储介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110216069A1 (en) * 2010-03-08 2011-09-08 Gary Keall Method And System For Compressing Tile Lists Used For 3D Rendering
CN103713891A (zh) * 2012-10-09 2014-04-09 阿里巴巴集团控股有限公司 一种在移动设备上进行图形渲染的方法和装置
CN108648249A (zh) * 2018-05-09 2018-10-12 歌尔科技有限公司 一种图像渲染方法、装置及智能穿戴设备
CN112559647A (zh) * 2019-09-10 2021-03-26 成都鼎桥通信技术有限公司 一种地图图层数据的更新方法和装置
CN111737621A (zh) * 2020-06-17 2020-10-02 友虹(北京)科技有限公司 基于wasm的ofd渲染方法、系统及装置
CN113570733A (zh) * 2021-08-05 2021-10-29 稿定（厦门）科技有限公司 一种基于WebGL的图形渲染方法、装置及系统

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116416399A (zh) * 2023-04-24 2023-07-11 北京和德宇航技术有限公司 一种地图生成方法、装置、设备和存储介质
CN117036532A (zh) * 2023-10-10 2023-11-10 杭州芯翼科技有限公司 晶圆图生成方法、装置、电子设备和存储介质
CN117036532B (zh) * 2023-10-10 2024-01-19 杭州芯翼科技有限公司 晶圆图生成方法、装置、电子设备和存储介质

Also Published As

Publication number Publication date
CN113570733A (zh) 2021-10-29

Similar Documents

Publication Publication Date Title
WO2023010851A1 (zh) 基于WebGL的图形渲染方法、装置及系统
US5909219A (en) Embedding a transparency enable bit as part of a resizing bit block transfer operation
EP2047431B1 (en) Graphics processing unit with extended vertex cache
KR101952983B1 (ko) 콘텐트의 타일-기반 렌더링을 위한 방법 및 콘텐트를 렌더링하기 위한 시스템
CN109785417B (zh) 一种实现OpenGL累积操作的方法及装置
CN102999946B (zh) 一种3d图形数据处理方法、装置及设备
US20080030512A1 (en) Graphics processing unit with shared arithmetic logic unit
US10319068B2 (en) Texture not backed by real mapping
WO2010000126A1 (zh) 交互信息生成方法及系统
WO2016133730A1 (en) Systems and methods for reducing memory bandwidth using low quality tiles
CN115934383B (zh) Wayland合成器下多显卡渲染方法
CN102436669A (zh) 二维矢量地图绘制方法
WO2011035568A1 (zh) 实现图像层在视频层上半透明效果的方法、装置和机顶盒
KR100860673B1 (ko) 3차원 이미지 생성을 위한 이미지 생성 장치 및 방법
US6445386B1 (en) Method and apparatus for stretch blitting using a 3D pipeline
KR20100103703A (ko) 그래픽스 프로세싱 시스템에서 표면 생성을 위한 멀티-포맷 지원
CN111145074B (zh) 全液晶仪表图像渲染方法
CN111563929B (zh) 一种基于浏览器的2.5d网页开发方法
CN102740025B (zh) 屏幕菜单色彩的处理方法及装置
US20090174722A1 (en) Method for assisting in data calculation by using display card
CN109803163B (zh) 图像展示方法及其装置、存储介质
CN113301411B (zh) 视频处理方法、装置及系统和视频处理设备
WO2023202365A1 (zh) 图形处理器、系统、装置、设备及方法
US20120120197A1 (en) Apparatus and method for sharing hardware between graphics and lens distortion operation to generate pseudo 3d display
CN118096492A (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: 22851576

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE