具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

下面结合附图来详细描述本申请的具体实施方式。

本申请的一个实施方式，提供了一种基于WebGL的图形渲染方法，如图1所示，所述方法包括以下步骤S101-S104。步骤S101：获取初始渲染信息；步骤S102：将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据；步骤S103：将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据；步骤S104：调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。

本申请通过将采用WebGL绘制的元素封装成图层，并以预设图层封装格式的形式获取图层渲染数据，继而将图层渲染数据映射为WebGL数据格式，从而将底层绘图能力开放给web应用层。

在步骤S101中，获取初始渲染信息。

根据本申请的实施例，为了进行图形渲染，首先应获取初始渲染信息。该初始渲染信息可以是通过任何适当途径获取到的，例如可以来自于图库，由操作者上传或输入等等。

作为一种优选地实施例，该初始渲染信息包括待渲染元素数据和欲对待渲染元素进行的线性变换指令。其中，待渲染元素数据可以是任意格式的图片或图像数据，线性变换指令包括平移、旋转、缩放等指令。

在步骤S102中，将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据。

作为一种优选的实施例，预设图层封装格式包括预设数据源格式和预设矩阵格式，所述图层渲染数据包括所述待渲染元素的像素数据和所述待渲染元素的变换矩阵数据；所述将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据包括：将所述待渲染元素数据按照所述预设数据源格式进行转换，获得所述像素数据；将所述线性变换指令按照所述预设矩阵格式进行转换，获得所述变换矩阵数据。

作为一种具体的实施例，预设数据源格式及预设矩阵格式分别通过相应接口提供给web应用层。其中，待渲染元素数据通过纹理像素设置的方式和/或直接设置帧缓存的方式进行转换，获得像素数据；待渲染元素的线性变换指令按照预设矩阵格式进行转换，获得一3×3的矩阵，即变换矩阵数据。

本具体实施例中，预设矩阵格式为3×3的矩阵，包括：初始矩阵格式、平移矩阵格式、旋转矩阵格式、缩放矩阵格式，其中，

初始矩阵中对角线元素均为1，其余元素为0，初始矩阵格式如下：

平移矩阵格式如下：

其中，x表示水平方向(x轴方向)的位移，y表示垂直方向(y轴方向)的位移；位移单位为像素点；x轴或y轴正向的位移以正数表示，x轴或y轴反向的位移以负数表示；

旋转矩阵格式如下：

其中，α表示顺时针旋转角度；

缩放矩阵格式如下：

其中，m表示水平方向(x轴方向)缩放倍数，n表示垂直方向(y轴方向)的缩放倍数；例如，将待渲染元素沿水平方向和垂直方向均缩小一半，则m＝n＝0.5；

将待渲染元素的线性变换指令按照预设矩阵格式进行转换包括：根据待渲染元素的平移、旋转、缩放等线性变换指令及上述平移矩阵格式、旋转矩阵格式、缩放矩阵格式，分别获得平移矩阵、旋转矩阵、缩放矩阵，然后按照平移、旋转、缩放的顺序将初始矩阵依次与平移矩阵、旋转矩阵、缩放矩阵进行相乘，获得变换矩阵数据，若未获取到其中某个类型的线性变换指令，则略过该类型矩阵。

在步骤S103中，将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据。

作为一种优选的实施例，将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据包括：将所述像素数据映射为WebGL纹理；将所述变换矩阵数据映射为WebGL着色器中属性。

作为一种优选的实施例，所述初始渲染信息包括全局属性数据，本实施例的基于WebGL的图形渲染方法还包括：在步骤S102之前，根据所述全局属性数据设置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着色器中属性。

作为一种优选的实施例，初始渲染信息还包括全局属性数据，本实施例的基于WebGL的图形渲染装置还包括：设置模块，用于根据全局属性数据设置WebGL上下文。

可以理解的是，关于以上参照图4描述的实施方式中的基于WebGL的图形渲染装置，其中各个模块执行操作的具体方式已经在结合图1所描述的基于WebGL的图形渲染方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本申请的另一实施方式，还提供了一种基于WebGL的图形渲染系统，如图5所示，所述系统包括：上述基于WebGL的图形渲染装置100、逻辑处理装置200、回收装置300，其中，基于WebGL的图形渲染装置100用于获得渲染元素；逻辑处理装置200用于处理逻辑判断；回收装置300用于根据逻辑处理装置200的指示回收渲染元素。

本领域技术人员可以理解的是，逻辑处理装置200可以用来处理任何与基于WebGL的图形渲染的流程管理相关的必要的逻辑判断，包括但不限于：判断是否保留第一渲染元素，若否，则指示回收装置300回收该第一渲染元素；和/或判断是否存在新增初始渲染信息，若是，则指示基于WebGL的图形渲染装置100根据该新增初始渲染信息获得第二渲染元素。

可以理解的是，关于以上参照图5描述的实施方式中的基于WebGL的图形渲染系统，其中各个装置执行操作的具体方式已经在结合图1-3所描述的基于WebGL的图形渲染方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本申请的另一实施方式，还提供了一种电子装置，其中，所述装置包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时，实现如下步骤：获取初始渲染信息；将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据；将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据；调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。

可以理解的是，所述处理器执行所述计算机程序时实现的步骤与上述方法中的各个步骤的实现方式基本一致，具体方式已经在有关基于WebGL的图形渲染方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本申请的另一实施方式，提供了一种计算机可读存储介质，其中，所述存储介质存储有计算机程序，所述计算机程序被执行时，实现如下步骤：获取初始渲染信息；将所述初始渲染信息按照预设图层封装格式进行转换，获得图层渲染数据；将所述图层渲染数据映射为WebGL数据格式，获得WebGL渲染数据；调用WebGL接口并依据所述WebGL渲染数据进行渲染输出。

可以理解的是，所述处理器执行所述计算机程序时实现的步骤与上述方法中的各个步骤的实现方式基本一致，具体方式已经在有关基于WebGL的图形渲染方法的实施例中进行了详细描述，此处将不做详细阐述说明。

以上对本申请实施例进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

应当理解，本申请的权利要求、说明书及附图中的术语“第一”和“第二”、等是用于区别不同对象，而不是用于描述特定顺序。本申请的说明书和权利要求书中使用的术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在此本申请说明书中所使用的术语仅仅是出于描述特定实施例的目的，而并不意在限定本申请。如在本申请说明书和权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。还应当进一步理解，在本申请说明书和权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。