具体实施方式

为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述，所描述的实施例不应视为对本申请的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。

在以下的描述中，所涉及的术语“第一/第二”仅仅是是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一/第二”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

对本申请实施例进行进一步详细说明之前，对本申请实施例中涉及的名词和术语进行说明，本申请实施例中涉及的名词和术语适用于如下的解释。

1)Draw Call操作：是指CPU准备好需要绘制的元素(例如图片或字符(包括文字、标点、字母等))，对图形程序接口进行调用的过程。具体的，是指CPU调用图形程序接口，比如DirectX或OpenGL，来命令GPU进行渲染的操作。

2)图集(Atlas)：将多个纹理合并为一个组合纹理时，该组合纹理称之为图集。

3)着色器(Shader)：用于实现图像渲染，包括顶点着色器(Vertex Shader)和像素着色器(Pixel Shader)。其中，顶点着色器主要负责顶点的几何关系等的运算，像素着色器主要负责片源颜色等的计算。例如，当需要在图形界面上呈现一个三角形时，首先要绘制顶点，因为网格由顶点组成，此时就要用到顶点着色器，具体的，将顶点信息给顶点着色器，以显示顶点信息。其次是在这些顶点组成的区域之间填充颜色，此时用到像素着色器进行填充对应的颜色。

相关技术中针对图形界面的渲染主要包括两种方案，分别是静态图集法和动态图集法，参见图1A、图1B和图1C，图1A、图1B和图1C是相关技术提供的图形界面的渲染方法的原理示意图，下面将结合图1A、图1B和图1C详细说明。

静态图集法是指通过离线预先安排好图集的内容，使得在图形界面中使用尽可能少的图集，这是当前图形界面开发的主流手段。具体的，参见图1A，首先设计图形界面时要考虑元素的重用性，如一些边框、按钮等作为共享资源，放在1～3张大图集中，称为重用图集；然后将其它非重用元素按照功能模块进行划分，每个模块使用1～2张图集，称为功能图集；最后对于同时用到功能图集与重用图集的一些图形界面，如果功能图集剩下的“空位”较多，可以将用到的重用图集中的元素单独拎出来，合入功能图集中，从而通过一定的冗余来达到性能的提升。

静态图集法包括以下缺点：(1)开发中需要合理规划图集分配规则，后期的内容调整会对前期到规划带来较大影响，极端情况下图集要重新分配。(2)占用内存较高，因为要同时加载多张图集，并且图集上会有大量当时不需要用的资源。(3)无法实现图集合批，例如，图1C中，图中每一种颜色代表一个图集，图(a)中Draw Call操作的次数是4；图(b)中由于在右侧后面加入一个黑色图集，无法合批导致Draw Call操作的次数从4骤升到9；图(c)中由于在左侧和右侧后面同时加入一个黑色图集，因此Draw Call操作的次数从4升到5。(4)无法对文字和图片进行合批，当有大量文字和图片穿插的情况下，Draw Call操作的次数会变得很高。

动态图集法是指将各处用到的贴图(或称图片)在线统一到一张纹理上，来达到减少图集的效果。参见图1B，图1B是将500个图片放置在一张纹理中的示意图。

动态图集法包括以下缺点：(1)图片大小差别较大，导致动态图集填充率较低。(2)界面更新时暂时不用的图片空出来的空间，难以找到合适的图片替换进去。(3)需要2张甚至以上的动态图集。(4)无法对文字和图片进行合批，当有大量文字和图片穿插的情况下，Draw Call操作的次数会变得很高。

针对上述技术问题，本申请实施例提供一种图形界面的渲染方法，能够提高图形界面的渲染效率。下面说明本申请实施例提供的图形界面的渲染方法的示例性应用，本申请实施例提供的图形界面的渲染方法可以由各种电子设备实施，例如，可以由终端单独实施，还可以由终端和服务器协同实施。

接下来，以由终端和服务器协同实施为例说明本申请实施例，参见图2，图2是本申请实施例提供的图形界面的渲染系统100的架构示意图。其中，图形界面的渲染系统100包括有：服务器200、网络300、以及终端400，将分别进行说明。

在一些实施例中，服务器200用于向终端400发送图形界面数据。网络300用于作为服务器200和观众终端400之间通信的媒介，可以是广域网或者局域网，又或者是二者的组合。终端400用于接收服务器200发送的图形界面数据，并根据图形界面数据中的多个图片和多个字符渲染图形界面，具体的，将图形界面数据中的多个图片渲染至碎图纹理中，并将图形界面数据中的多个字符渲染至字符纹理中；分别对碎图纹理和字符纹理进行采样处理，对应得到图形界面中每个像素点对应的碎图纹理颜色值和字符纹理颜色值；根据碎图纹理和字符纹理的顶点信息，将每个像素点对应的碎图纹理颜色值和字符纹理颜色值进行融合处理，得到每个像素点的融合颜色值；根据每个像素点的融合颜色值，渲染形成图形界面。

作为示例，本申请实施例提供的图形界面的渲染方法也可以由终端400单独实施，如此，终端400无需接收服务器200发送的图形界面数据，可以直接根据终端400本地存储的图形界面数据实现图形界面的渲染。

在一些实施例中，可以应用于游戏界面渲染的场景，终端400可以运行网络游戏或单机游戏，当终端400运行网络游戏时，可以由终端400和服务器200协同实施，当终端400运行单机游戏时，可以由终端400单独实施。

以终端400和服务器200协同实施为例，终端400接收服务器200发送的游戏界面数据，并将游戏界面数据中的多个游戏图片渲染至碎图纹理中，并将游戏界面数据中的多个字符渲染至字符纹理中；分别对碎图纹理和字符纹理进行采样处理，对应得到游戏界面中每个像素点对应的碎图纹理颜色值和字符纹理颜色值；根据碎图纹理和字符纹理的顶点信息，将每个像素点对应的碎图纹理颜色值和字符纹理颜色值进行融合处理，得到每个像素点的融合颜色值；根据每个像素点的融合颜色值，渲染形成游戏界面。

游戏界面通常由很多分散的图片和字符组成，会有大量Draw Call操作，终端400每一次进行Draw Call操作前，终端400的CPU需要进行很多准备工作。当Draw Call操作过多，终端400的CPU就需要增加很多额外开销用于准备工作，CPU本身负载过多会导致游戏帧率下降。同时由于游戏界面中的字符和图片可能相互重叠，会出现增加Draw Call操作、以及批次打断(即无法合批处理)的问题。对此，本申请实施例能够提高渲染过程中合批处理的可能性，减少渲染过程中的Draw Call操作，从而降低CPU的负载，提高游戏界面的渲染效率，进而提高游戏帧率。

本申请实施例可以借助于云技术(Cloud Technology)实现，云技术是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来，实现数据的计算、储存、处理和共享的一种托管技术。

云技术是基于云计算商业模式应用的网络技术、信息技术、整合技术、管理平台技术、以及应用技术等的总称，可以组成资源池，按需所用，灵活便利。云计算技术将变成重要支撑。技术网络系统的后台服务需要大量的计算、存储资源。

作为示例，服务器200可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。

接下来说明图2中的终端400的结构。参见图3，图3是本申请实施例提供的终端400的结构示意图，图3所示的终端400包括：至少一个处理器410、存储器450、至少一个网络接口420和用户接口430。终端400中的各个组件通过总线系统440耦合在一起。可理解，总线系统440用于实现这些组件之间的连接通信。总线系统440除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图3中将各种总线都标为总线系统440。

处理器410可以是一种集成电路芯片，具有信号的处理能力，例如通用处理器、数字信号处理器(DSP，Digital Signal Processor)，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其中，通用处理器可以是微处理器或者任何常规的处理器等。

用户接口430包括使得能够呈现媒体内容的一个或多个输出装置431，包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口430还包括一个或多个输入装置432，包括有助于用户输入的用户接口部件，比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。

存储器450可以是可移除的，不可移除的或其组合。示例性的硬件设备包括固态存储器，硬盘驱动器，光盘驱动器等。存储器450可选地包括在物理位置上远离处理器410的一个或多个存储设备。

存储器450包括易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM，Read Only Me mory)，易失性存储器可以是随机存取存储器(RAM，Random Access Memor y)。本申请实施例描述的存储器450旨在包括任意适合类型的存储器。

在一些实施例中，存储器450能够存储数据以支持各种操作，这些数据的示例包括程序、模块和数据结构或者其子集或超集，下面示例性说明。

操作系统451，包括用于处理各种基本系统服务和执行硬件相关任务的系统程序，例如框架层、核心库层、驱动层等，用于实现各种基础业务以及处理基于硬件的任务。

网络通信模块452，用于经由一个或多个(有线或无线)网络接口420到达其他电子设备，示例性的网络接口420包括：蓝牙、无线相容性认证(WiFi)、和通用串行总线(USB，Universal Serial Bus)等。

呈现模块453，用于经由一个或多个与用户接口430相关联的输出装置431(例如，显示屏、扬声器等)使得能够呈现信息(例如，用于操作外围设备和显示内容和信息的用户接口)。

输入处理模块454，用于对一个或多个来自一个或多个输入装置432之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。

在一些实施例中，本申请实施例提供的图形界面的渲染装置可以采用软件方式实现，图3示出了存储在存储器450中的图形界面的渲染装置455，其可以是程序和插件等形式的软件，包括以下软件模块：纹理渲染模块4551、采样模块4552、融合模块4553和界面渲染模块4554，这些模块是逻辑上的，因此根据所实现的功能可以进行任意的组合或进一步拆分。将在下文中说明各个模块的功能。

下面，以由图2中的终端400单独执行本申请实施例提供的图形界面的渲染方法为例说明。参见图4，图4是本申请实施例提供的图形界面的渲染方法的流程示意图，将结合图4示出的步骤进行说明。

在步骤S101中，将图形界面数据中的多个图片渲染至碎图纹理中，并将图形界面数据中的多个字符渲染至字符纹理中。

在一些实施例中，通过终端400的处理器410中的CPU将图形界面数据中的多个图片渲染至碎图纹理中，并将图形界面数据中的多个字符渲染至字符纹理中。

在一些实施例中，将图形界面数据中的多个图片渲染至碎图纹理中可以包括：去除图形界面数据中的每个图片的透明区域；针对去除透明区域的每个图片执行以下处理：将图片沿着第一参考方向切割为多个碎图，并将多个碎图按照第二参考方向依次渲染至碎图纹理中；其中，第一参考方向和第二参考方向相互垂直。

作为示例，当图片是矩形时，第一参考方向和第二参考方向对应与图片中邻接的两条边平行；将图片沿着第一参考方向切割为多个碎图，并将多个碎图按照第二参考方向依次渲染至碎图纹理中可以包括：将图片沿着第一参考方向等距切割为高度相同的多个碎图，并将多个碎图，沿着第二参考方向依次渲染至碎图纹理中。

举例来说，参见图13A，图13A是本申请实施例提供的图形界面的渲染方法的原理示意图，图13A中，第一参考方向和矩形图片131的a边平行，第二参考方向和矩形图片131的b边平行，将矩形图片131沿着第一参考方向等距切割为高度(或称宽度)相同的4个碎图132，并将这4个碎图132沿着第二参考方向从上至下依次渲染至碎图纹理133中，当然也可以是将这4个碎图132沿着第二参考方向从下至上依次渲染至碎图纹理133中，图13A中仅示出将这4个碎图132沿着第二参考方向从上至下依次渲染至碎图纹理133中，以此类推。

举例来说，参见图13B，图13B是本申请实施例提供的图形界面的渲染方法的原理示意图，图13B中，第一参考方向和矩形图片131的b边平行，第二参考方向和矩形图片131的a边平行，将矩形图片131沿着第一参考方向等距切割为高度(或称宽度)相同的4个碎图132，并将这4个碎图132沿着第二参考方向从左至右依次渲染至碎图纹理133中，当然也可以是将这4个碎图132沿着第二参考方向从右至左依次渲染至碎图纹理133中，图13B中仅示出将这4个碎图132沿着第二参考方向从左至右依次渲染至碎图纹理133中，以此类推。

相关技术通常是将整张图片渲染至纹理中，这样结构相对简单，处理方便，但是在将多张图片合入一张大的碎图纹理(例如动态图集法)时很难有效利用空间，导致资源利用率较低。本申请实施例将碎图的高度进行统一并依次渲染至碎图纹理中，相对于动态图集法来说，不仅能够更充分地填充和利用碎图纹理的空间，节约碎图纹理的数量，而且当图形界面更新时也能够提高图片替换的成功率。并且本申请实施例将所有图片渲染至一张碎图纹理中，不仅能够避免需要针对多张碎图纹理进行图片分配和规划的资源的浪费，还能够减少碎图纹理的加载次数，节约终端的占用内存，从而提高合批处理的成功率。

作为示例，在去除图形界面数据中的每个图片的透明区域之前还可以包括：将图形界面数据中的多个图片进行拼接处理，得到拼接图片；确定拼接图片中间隔最远的两个顶点之间的距离；当拼接图片中间隔最远的两个顶点之间的距离大于碎图纹理中间隔最远的两个顶点之间的距离时，确定将执行去除图形界面数据中的每个图片的透明区域的操作。

举例来说，将图形界面数据中的多个图片进行拼接处理可以是将多个图片沿着每个图片的边界线进行拼接，得到拼接图片。当碎图纹理是矩形时，碎图纹理中间隔最远的两个顶点之间的距离是矩形对角线的长度。当拼接图片中间隔最远的两个顶点之间的距离大于碎图纹理中间隔最远的两个顶点之间的距离时，表征无法将所有的图片渲染至一张碎图纹理中，此时考虑到图形界面的渲染过程中图片的透明区域不需要进行渲染，因此可以通过去除图片的透明区域节约碎图纹理中的填充空间，从而提高图形界面的渲染效率。

作为示例，在去除图形界面数据中的每个图片的透明区域之前还可以包括：确定碎图纹理的面积；确定图形界面数据中的每个图片的面积，并将每个图片的面积进行加和处理，得到总图面积；当碎图纹理的面积小于总图面积时，确定将执行去除图形界面数据中的每个图片的透明区域的操作。

举例来说，当碎图纹理的面积小于总图面积时，表征即使将所有的图片按照拼接面积最小的原则进行拼接时依旧无法将所有图片渲染至一张碎图纹理中，此时可以通过去除图片的透明区域节约碎图纹理中的填充空间，从而提高图形界面的渲染效率。本申请实施例相较于上述根据碎图纹理中间隔最远的两个顶点之间的距离来确定是否执行去除图片的透明区域的操作来说，计算过程更简单，能够节约计算资源。

在一些实施例中，在将图形界面数据中的多个图片渲染至碎图纹理中之后可以包括：针对碎图纹理中的每个碎图执行以下处理：确定碎图中用于在图形界面中渲染的区域，并将区域划分为多个具备特定形状(例如三角形、矩形等)的子区域；确定用于渲染每个子区域的顶点信息；将多个子区域对应的顶点信息进行组合，得到用于渲染碎图的顶点信息。

作为示例，顶点信息包括以下至少之一：顶点位置、纹理坐标(或称UV坐标)。其中，顶点位置用于界定碎图在图形界面中所要渲染的位置，UV坐标用于界定碎图上每个点的位置的信息，这些点可以决定表面纹理贴图的位置。

作为示例，图10A中，左边是利用矩形的遮罩(Mask)对碎图进行部分遮挡，只让部分未遮挡的碎图在渲染后的图形界面中显示出来；右边是通过矩形剪裁精确计算碎图中的每个三角形(即上述的子区域)在渲染后的图形界面中的显示位置(即上述的顶点信息)，将多个三角形对应的顶点信息进行组合，得到用于渲染碎图的顶点信息。

在一些实施例中，在将图形界面数据中的多个图片渲染至碎图纹理中之后可以包括：在碎图纹理中选取多个碎图进行拼接处理，得到拼接组图；确定拼接组图的中心位置，并确定拼接组图中用于在图形界面中渲染的区域；以中心位置为顶点绘制扇形区域，其中，扇形区域包括拼接组图中用于在图形界面中渲染的区域；针对拼接组图中的每个碎图执行以下处理：确定扇形区域的半径和碎图之间的交点，并将交点的顶点信息作为用于渲染碎图的顶点信息。

作为示例，图10B中，左边是利用扇形的Mask对多个碎图拼成的图形(即上述的拼接组图)进行合并显示；右边是通过扇形剪裁精确计算扇形的两条半径和拼接组图之间的交点，并将交点的顶点信息作为用于渲染碎图的顶点信息。

本申请实施例提供多种剪裁方式确定碎图的顶点信息，能够提高计算碎图的顶点信息的准确性，不仅能够保证图片的正确显示，而且能够减少不必要的Mask，避免打断合批处理，减少Draw Call操作的次数。

在一些实施例中，将图形界面数据中的多个字符渲染至字符纹理中可以包括：从图形界面数据中提取字符文件，其中，字符文件中包括多个字符；对字符文件进行解析处理，得到与多个字符一一对应的多个点阵字符；将字符纹理划分为多个字符区域，其中，多个字符区域的数量大于或等于多个点阵字符的数量；将多个点阵字符依次渲染至多个字符区域中，其中，每个字符区域中至多包括一个点阵字符。

作为示例，点阵字符是用于显示字符信息的一种方式，其中，每个字符(例如文字、字母、数字、标点符号等)都以一组二维像素信息表示，字符笔画经过的区域存储为1，否则存储为0。点阵字符的处理和显示速度较快，通常点阵字符都用16进制表示。

作为示例，图12中，将字符纹理分割成如图12所示的多个小块121(相当于上述的字符区域)，将多个点阵字符依次渲染至多个小块121中，其中，每个小块121中至多包括一个点阵字符。

以点阵字符是10个为例，可以将字符纹理划分为4×4＝16个字符区域，从而可以将所有点阵字符渲染至字符纹理中，每个字符区域中最多包括一个点阵字符，这样可以剩下4个未被填充的字符区域。也可以将字符纹理划分为2×5＝10个字符区域，从而可以将所有点阵字符渲染至字符纹理中，不包括未被填充的字符区域。

本申请实施例将字符纹理划分为多个字符区域，再针对划分后的字符区域进行填充，相较于不划分字符区域直接填充字符来说，本申请实施例能够提高字符纹理的填充率和计算效率。

在步骤S102中，分别对碎图纹理和字符纹理进行采样处理，对应得到图形界面中每个像素点对应的碎图纹理颜色值和字符纹理颜色值。

在一些实施例中，通过终端400的处理器410中的CPU调用处理器410中的GPU的着色器分别对碎图纹理和字符纹理进行采样处理，对应得到图形界面中每个像素点对应的碎图纹理颜色值和字符纹理颜色值。

在一些实施例中，针对图形界面中的每个像素点执行以下处理：通过纹理采样函数，在碎图纹理中对应像素点的位置进行采样处理，得到像素点的碎图纹理坐标；通过纹理采样函数，在字符纹理中对应像素点的位置进行采样处理，得到像素点的字符纹理坐标；根据像素点的碎图纹理坐标确定像素点对应的碎图纹理颜色值；根据像素点的字符纹理坐标确定像素点对应的字符纹理颜色值。

作为示例，碎图纹理的面积和字符纹理的面积可以相同，并且在图形界面的渲染过程中碎图纹理的面积和字符纹理的面积可以始终保持不变。界面渲染过程中打断批次的原因有很多，纹理内存变化这个原因占有很高的比例，本申请实施例中，碎图纹理和字符纹理的面积相同、且固定不变，即碎图纹理和字符纹理的内存固定不变，能够避免因为纹理内存的改变导致合批失败的问题，从而能够提高合批的成功率。

作为示例，根据像素点的碎图纹理坐标确定像素点对应的碎图纹理颜色值可以包括：将像素点的碎图纹理坐标转化为碎图数组下标，并将对应碎图数组下标的碎图纹理颜色值作为像素点的碎图纹理颜色值。

举例来说，碎图数组下标和碎图纹理颜色值之间一一对应，且存在映射关系，如此可以通过查找映射关系确定对应碎图数组下标的碎图纹理颜色值。

作为示例，根据像素点的字符纹理坐标确定像素点对应的字符纹理颜色值可以包括：将像素点的字符纹理坐标转化为字符数组下标，并将对应字符数组下标的字符纹理颜色值作为像素点的字符纹理颜色值。

举例来说，字符数组下标和字符纹理颜色值之间一一对应，且存在映射关系，如此可以通过查找映射关系确定对应字符数组下标的字符纹理颜色值。

本申请实施例同时对碎图纹理和字符纹理分别进行采样处理，对应得到图形界面中每个像素点对应的碎图纹理颜色值和字符纹理颜色值，能够将图形界面中的字符渲染和图片渲染进行合批处理，从而减少Draw Call操作的次数，提高渲染的效率。

在步骤S103中，根据碎图纹理和字符纹理的顶点信息，将每个像素点对应的碎图纹理颜色值和字符纹理颜色值进行融合处理，得到每个像素点的融合颜色值。

在一些实施例中，通过终端400的处理器410中的CPU调用处理器410中的GPU的着色器根据碎图纹理和字符纹理的顶点信息，将每个像素点对应的碎图纹理颜色值和字符纹理颜色值进行融合处理，得到每个像素点的融合颜色值。

在一些实施例中，参见图5，图5是本申请实施例提供的图形界面的渲染方法的流程示意图，基于图4，步骤S103可以包括步骤S1031至步骤S1033，需要说明的是，步骤S1031至步骤S1033是针对图形界面中的每个像素点所执行的操作。

在步骤S1031中，根据碎图纹理的顶点信息确定对应像素点的第一权重。

在一些实施例中，在碎图纹理中确定像素点对应的目标碎图的顶点信息，并确定目标碎图的顶点信息中的纹理坐标；将纹理坐标中的目标分量确定为对应像素点的第一权重。

作为示例，纹理坐标中包括多个类型，例如横坐标分量(或称x分量)、纵坐标分量(或称y分量)。目标碎图的顶点信息中的纹理坐标中的目标分量可以是纹理坐标中的横坐标分量或纵坐标分量。

在步骤S1032中，根据字符纹理的顶点信息确定对应像素点的第二权重。

在一些实施例中，在字符纹理中确定像素点对应的目标字符的顶点信息，并确定目标字符的顶点信息中的纹理坐标；将纹理坐标中的目标分量确定为对应像素点的第二权重。

作为示例，目标字符的顶点信息中的纹理坐标中的目标分量可以是纹理坐标中的横坐标分量或纵坐标分量。具体的，当目标碎图的顶点信息中的纹理坐标中的目标分量是纹理坐标中的横坐标分量时，目标字符的顶点信息中的纹理坐标中的目标分量是纹理坐标中的横坐标分量；当目标碎图的顶点信息中的纹理坐标中的目标分量是纹理坐标中的纵坐标分量时，目标字符的顶点信息中的纹理坐标中的目标分量是纹理坐标中的纵坐标分量，从而能够保证确定像素点颜色值的统一性，提高图形界面渲染的准确性。

在步骤S1033中，根据第一权重和第二权重，对像素点对应的碎图纹理颜色值和像素点对应的字符纹理颜色值进行加权求和处理，得到像素点的融合颜色值。

在一些实施例中，将第一权重和像素点对应的碎图纹理颜色值进行乘积处理，得到第一乘积结果；将第二权重和像素点对应的字符纹理颜色值进行乘积处理，得到第二乘积结果；将第一乘积结果和第二乘积结果进行加和处理，得到像素点的融合颜色值。

在步骤S104中，根据每个像素点的融合颜色值，渲染形成图形界面。

在一些实施例中，终端400的处理器410中的GPU将图形界面中的每个像素点的融合颜色值发送至输出装置431(例如显示屏)，以在输出装置431中渲染形成图形界面。

在一些实施例中，在步骤S101之前，还可以包括：确定图形界面数据中的每个图片的面积，并将面积大于面积阈值的图片渲染至背景纹理中；如此，在步骤S103之前可以包括：对背景纹理进行采样处理，得到图形界面中每个像素点对应的背景纹理颜色值；步骤S103可以包括：根据碎图纹理、字符纹理和背景纹理的顶点信息，将每个像素点对应的碎图纹理颜色值、字符纹理颜色值和背景纹理颜色值进行融合处理，得到每个像素点的融合颜色值。

作为示例，面积阈值可以是缺省值，也可以是用户、终端或服务器设定的值。

作为示例，对背景纹理进行采样处理，得到图形界面中每个像素点对应的背景纹理颜色值可以包括：针对图形界面中的每个像素点执行以下处理：通过纹理采样函数，在背景纹理中对应像素点的位置进行采样处理，得到像素点的背景纹理坐标；根据像素点的背景纹理坐标确定像素点对应的背景纹理颜色值。

举例来说，根据像素点的背景纹理坐标确定像素点对应的背景纹理颜色值可以包括：将像素点的背景纹理坐标转化为背景数组下标，并将对应背景数组下标的背景纹理颜色值作为像素点的背景纹理颜色值。

例如，背景数组下标和背景纹理颜色值之间一一对应，且存在映射关系，如此可以通过查找映射关系确定对应背景数组下标的背景纹理颜色值。

作为示例，根据碎图纹理、字符纹理和背景纹理的顶点信息，将每个像素点对应的碎图纹理颜色值、字符纹理颜色值和背景纹理颜色值进行融合处理，得到每个像素点的融合颜色值可以包括：针对每个像素点执行以下处理：根据碎图纹理的顶点信息确定对应像素点的第一权重，根据字符纹理的顶点信息确定对应像素点的第二权重，根据背景纹理的顶点信息确定对应像素点的第三权重；根据第一权重、第二权重和第三权重，对像素点对应的碎图纹理颜色值、像素点对应的字符纹理颜色值和像素点对应的背景纹理颜色值进行加权求和处理，得到像素点的融合颜色值。

举例来说，确定第一权重和第二权重的过程和上述实施例相同，不再进行赘述。根据背景纹理的顶点信息确定对应像素点的第三权重可以包括：在背景纹理中确定像素点对应的目标背景的顶点信息，并确定目标背景的顶点信息中的纹理坐标；将纹理坐标中的目标分量确定为对应像素点的第三权重。

举例来说，根据第一权重、第二权重和第三权重，对像素点对应的碎图纹理颜色值、像素点对应的字符纹理颜色值和像素点对应的背景纹理颜色值进行加权求和处理，得到像素点的融合颜色值可以包括：将第一权重和像素点对应的碎图纹理颜色值进行乘积处理，得到第一乘积结果；将第二权重和像素点对应的字符纹理颜色值进行乘积处理，得到第二乘积结果；将第三权重和像素点对应的背景纹理颜色值进行乘积处理，得到第三乘积结果；将第一乘积结果、第二乘积结果和第三乘积结果进行加和处理，得到像素点的融合颜色值。

作为示例，目标背景的顶点信息中的纹理坐标中的目标分量可以是纹理坐标中的横坐标分量或纵坐标分量。具体的，当目标碎图的顶点信息中的纹理坐标中的目标分量和目标字符的顶点信息中的纹理坐标中的目标分量是纹理坐标中的横坐标分量时，目标背景的顶点信息中的纹理坐标中的目标分量是纹理坐标中的横坐标分量；当目标碎图的顶点信息中的纹理坐标中的目标分量和目标字符的顶点信息中的纹理坐标中的目标分量是纹理坐标中的纵坐标分量时，目标背景的顶点信息中的纹理坐标中的目标分量是纹理坐标中的纵坐标分量，从而能够保证确定像素点颜色值的统一性，提高图形界面渲染的准确性。

举例来说，图11中，将背景中用到的大面积的图片(或称大图)从碎图纹理中分离开来，能够避免碎图纹理过早的被填充满。

本申请实施例将一些背景中用到的大面积的图片，单独以背景纹理的方式保存，能够避免碎图纹理因为大面积的图片而过早地将负荷撑满而需要将其余碎图分配到第二张碎图纹理，从而导致增加Draw Call操作。

下面，以游戏界面渲染为例说明本申请实施例提供的图形界面的渲染方法。

本申请实施例通过将当前游戏界面用到的所有图片和字符分别渲染到属于各自的一张纹理中(即，将当前用到的所有图片渲染到碎图纹理中，将当前用到的所有字符渲染到字符纹理中)的方式，能够实现合批处理，提高运行效率，极限情况下，静态界面的DrawCall操作的次数可以达到1。

在一些实施例中，首先通过离线对图形界面(以下简称为界面)上用到的所有图片处理成Smash格式，即，将每个图片切割成等高像素的多个碎图；然后利用相同屏幕下显示的图片不会超过终端(例如手机、平板电脑等)分辨率的特性，将多个碎图动态组装到一张2048×2048(例如，RGBA32格式)的碎图纹理上；再将界面上用到的字符，渲染到独立的2048×2048(R8格式)的字符纹理上；最后通过顶点信息上的标志位，Shader计算时分别在两张纹理(即碎图纹理和字符纹理)上针对界面的每个像素点进行采样，加权合成输出渲染界面。

作为示例，顶点信息上的标志位借用了UV2坐标中的x变量，其中，x变量的值是0或者1(即权重)。Shader通过顶点信息上的标志位分别在两张纹理上采样，加权合成输出渲染界面的过程可以是：Shader针对界面的每个像素点同时从碎图纹理和字符纹理中进行采样，得到每个像素点的碎图纹理颜色值和字符纹理颜色值，然后通过顶点信息上的标志位中的x变量对碎图纹理颜色值和字符纹理颜色值进行加权合成输出，得到渲染的界面。如此，由于Shader中加权计算的速度比分支计算的速度更快，能够提高渲染效率。

作为示例，碎图纹理的内存占用2048×2048×32位(RGBA32格式)＝16MB，字符纹理的内存占用2048×2048×8位(R8格式)＝4MB，界面纹理(包括碎图纹理和字符纹理)的内存固定在16M+4M＝20M。界面渲染过程中打断批次的原因有很多，主要是渲染状态，其中贴图内存变化这个原因占有很高的比例，本申请实施例中，碎图纹理和字符纹理的内存固定不变，能够避免因为纹理内存的改变导致合批失败的问题，从而能够提高合批的成功率。

举例来说，参见图6A和图6B，图6A和图6B是本申请实施例提供的图形界面的渲染方法的应用场景示意图。图6A中，区域601中的“Batches”表征每帧有多少次Draw Call操作，“Tris”表征该帧使用了848个三角形，并且可以在一个Draw Call操作中描绘出来。图6B中，通过将图片和字符一起渲染，能够将Draw Call操作的次数602从21降低至15，本申请实施例能够节约至少50％的内存、以及降低至少50％的Draw Call操作。

下面结合图7说明本申请实施例提供的图形界面的渲染方法的具体实现方式，图7是本申请实施例提供的图形界面的渲染方法的原理示意图。

(1)图片处理

在一些实施例中，将不同宽高的原始图片，统一处理成高为32像素的多个碎图，同时去掉多余的全透明区域，以自定义格式的方式将多个碎图以RGBA32格式进行数据存储，其中，用户界面(UI，User Interface)压缩存储的话质量较差。每个X(即碎图的宽度)×32的碎图是以WebP格式无损压缩的，相对压缩率较高。在运行时，从磁盘读取数据文件(即碎图)后，将碎图动态复制到2048×2048的碎图纹理上，由于将碎图的高度进行统一，相对于常规动态图集法来说，能够更充分地填充和利用碎图纹理的空间，在替换的成功率上也大大提高。

作为示例，将多个碎图填充至碎图纹理后，可以精确计算碎图的顶点位置，UV坐标等，并根据顶点位置和UV坐标将多个碎图拼出一个三角形带，从而在界面正确的位置上显示图片。

举例来说，参见图8，图8是本申请实施例提供的图形界面的渲染方法的应用场景示意图。图8中，一张完整的图片801是由多个矩形(其实是三角形)严密拼接而成，每个矩形的碎图在碎图纹理中是分散的，碎图纹理802在运行过程中会由下而上逐渐填满，无效的区域也会有新的碎图替入，相关技术中通常是显示整张图片，显示区域是一个矩形，这样结构相对简单，处理方便，但是在将多张图片合入一张大的碎图纹理时很难有效利用空间，而且会有更多的全透明像素，导致资源利用率较低。

作为示例，参见图9，图9是本申请实施例提供的图形界面的渲染方法的流程示意图。图9中，显示一张图片时，首先从磁盘读取自定义格式文件(步骤S901)，然后获得多个碎图(步骤S902)，再从动态图集中申请空间(步骤S903)，再依次向动态图集填入碎图(步骤S904)，最后计算碎图的顶点位置和在图集中的UV坐标，正确显示(步骤S905)。

在一些实施例中，在计算碎图的顶点位置时，还可以对碎图增加裁剪方式的支持，从而不仅能够提高计算碎图的顶点位置的准确性，保证图片的正确显示，还能够减少不必要的Mask(因为每增加一个Mask，至少增加3个Draw Call操作)，以避免打断合批。

作为示例，参见图10A，图10A是本申请实施例提供的对碎图进行矩形裁剪的原理示意图。图10A中，左边是利用Mask(矩形)对碎图进行部分遮挡，只让部分碎图显示出来；右边是通过矩形剪裁精确计算碎图中三角形的显示位置，以便后续渲染碎图。

作为示例，参见图10B，图10B是本申请实施例提供的对碎图进行扇形裁剪的原理示意图。图10B中，左边是利用Mask(扇形)对多个碎图拼成的图形(即上述的拼接组图)进行合并显示；右边是通过扇形剪裁精确计算三角形的显示位置(即求出扇形两条边和碎图带的交点)，以便后续渲染碎图。

在一些实施例中，将一些背景中用到的大面积的图片，单独以图集(即上述的背景纹理)的方式保存，以避免碎图纹理因为大图而过早地将负荷撑满而需要将其余碎图分配到第二张碎图纹理，从而导致增加Draw Call操作，参见图11，图11是本申请实施例提供的图形界面的渲染方法的应用场景示意图，图11中在碎图纹理分离大图，能够避免碎图纹理过早的被填充满。

如果一张碎图纹理放不下所有碎图，则需要至少2张碎图纹理，例如，一张碎图纹理是A，一张碎图纹理是B，这样在描绘的时候，就有可能出现ABA BAB的显示顺序，由于不同碎图纹理之间不好合批操作，这样就会大大提高Draw Call操作的数量，因此，本申请实施例将所有碎图全部放置在一张碎图纹理中可以减小Draw Call操作的数量。

(2)文字处理

在一些实施例中，由于原始引擎会把不同字符渲染到不同纹理上，比如游戏中用到了2种字符，就会有2张字符纹理，因此需要修改引擎，具体的，利用一张2048×2048的字符纹理来渲染所有字符，统一管理。参见图12，图12是本申请实施例提供的图形界面的渲染方法的原理示意图，图12中容纳了近4000个文字，并且使用了优化填充算法，使得全图更新一次的耗时在0.5s以内，并且可以利用加载过程一起完成。其中，上述的优化填充算法是指将字符纹理分割成如图12所示的多个小块121(相当于上述的字符区域)，兼顾填充率和计算效率。相较于相关技术(例如MaxRects算法)取得了更好且更稳定的计算效率，同时整图填充率保持在80％左右。

(3)图片与文字合批显示

通过顶点信息上的额外标志位，Shader计算时分别在两张纹理(即碎图纹理和字符纹理)上采样，加权合成输出颜色，画面的渲染效果保持不变。本申请实施例会稍微增加一些计算负荷到GPU，但由于游戏中大部分时间消耗在CPU，因此通过降低Draw Call操作来减轻CPU的负担，能够较大提高画面的渲染效率，从而提高游戏的帧率，减少发热，改善用户体验。

下面结合图3说明本申请实施例提供的图形界面的渲染装置的实施为软件模块的示例性结构。

在一些实施例中，如图3所示，存储在存储器450的图形界面的渲染装置455中的软件模块可以包括：纹理渲染模块4551，用于将图形界面数据中的多个图片渲染至碎图纹理中，并将图形界面数据中的多个字符渲染至字符纹理中；采样模块4552，用于分别对碎图纹理和字符纹理进行采样处理，对应得到图形界面中每个像素点对应的碎图纹理颜色值和字符纹理颜色值；融合模块4553，用于根据碎图纹理和字符纹理的顶点信息，将每个像素点对应的碎图纹理颜色值和字符纹理颜色值进行融合处理，得到每个像素点的融合颜色值；界面渲染模块4554，用于根据每个像素点的融合颜色值，渲染形成图形界面。

在上述方案中，纹理渲染模块4551，还用于去除图形界面数据中的每个图片的透明区域；针对去除透明区域的每个图片执行以下处理：将图片沿着第一参考方向切割为多个碎图，并将多个碎图按照第二参考方向依次渲染至碎图纹理中；其中，第一参考方向和第二参考方向相互垂直。

在上述方案中，当图片是矩形时，第一参考方向和第二参考方向对应与图片中邻接的两条边平行；纹理渲染模块4551，还用于将图片沿着第一参考方向等距切割为高度相同的多个碎图，并将多个碎图，沿着第二参考方向依次渲染至碎图纹理中。

在上述方案中，纹理渲染模块4551，还用于将图形界面数据中的多个图片进行拼接处理，得到拼接图片；确定拼接图片中间隔最远的两个顶点之间的距离；当拼接图片中间隔最远的两个顶点之间的距离大于碎图纹理中间隔最远的两个顶点之间的距离时，确定将执行去除图形界面数据中的每个图片的透明区域的操作。

在上述方案中，纹理渲染模块4551，还用于从图形界面数据中提取字符文件，其中，字符文件中包括多个字符；对字符文件进行解析处理，得到与多个字符一一对应的多个点阵字符；将字符纹理划分为多个字符区域，其中，多个字符区域的数量大于或等于多个点阵字符的数量；将多个点阵字符依次渲染至多个字符区域中，其中，每个字符区域中至多包括一个点阵字符。

在上述方案中，采样模块4552，还用于针对图形界面中的每个像素点执行以下处理：通过纹理采样函数，在碎图纹理中对应像素点的位置进行采样处理，得到像素点的碎图纹理坐标；通过纹理采样函数，在字符纹理中对应像素点的位置进行采样处理，得到像素点的字符纹理坐标；根据像素点的碎图纹理坐标确定像素点对应的碎图纹理颜色值；根据像素点的字符纹理坐标确定像素点对应的字符纹理颜色值；其中，碎图纹理的面积和字符纹理的面积相同。

在上述方案中，采样模块4552，还用于将像素点的碎图纹理坐标转化为碎图数组下标，并将对应碎图数组下标的碎图纹理颜色值作为像素点的碎图纹理颜色值；将像素点的字符纹理坐标转化为字符数组下标，并将对应字符数组下标的字符纹理颜色值作为像素点的字符纹理颜色值。

在上述方案中，融合模块4553，还用于针对每个像素点执行以下处理：根据碎图纹理的顶点信息确定对应像素点的第一权重，并根据字符纹理的顶点信息确定对应像素点的第二权重；根据第一权重和第二权重，对像素点对应的碎图纹理颜色值和像素点对应的字符纹理颜色值进行加权求和处理，得到像素点的融合颜色值。

在上述方案中，融合模块4553，还用于在碎图纹理中确定像素点对应的目标碎图的顶点信息，并确定目标碎图的顶点信息中的纹理坐标；将纹理坐标中的目标分量确定为对应像素点的第一权重；在字符纹理中确定像素点对应的目标字符的顶点信息，并确定目标字符的顶点信息中的纹理坐标；将纹理坐标中的目标分量确定为对应像素点的第二权重。

在上述方案中，纹理渲染模块4551，还用于针对碎图纹理中的每个碎图执行以下处理：确定碎图中用于在图形界面中渲染的区域，并将区域划分为多个具备特定形状的子区域；确定用于渲染每个子区域的顶点信息；将多个子区域对应的顶点信息进行组合，得到用于渲染碎图的顶点信息。

在上述方案中，纹理渲染模块4551，还用于在碎图纹理中选取多个碎图进行拼接处理，得到拼接组图；确定拼接组图的中心位置，并确定拼接组图中用于在图形界面中渲染的区域；以中心位置为顶点绘制扇形区域，其中，扇形区域包括拼接组图中用于在图形界面中渲染的区域；针对拼接组图中的每个碎图执行以下处理：确定扇形区域的半径和碎图之间的交点，并将交点的顶点信息作为用于渲染碎图的顶点信息。

在上述方案中，纹理渲染模块4551，还用于确定图形界面数据中的每个图片的面积，并将面积大于面积阈值的图片渲染至背景纹理中；采样模块4552，还用于对背景纹理进行采样处理，得到图形界面中每个像素点对应的背景纹理颜色值；融合模块4553，还用于根据碎图纹理、字符纹理和背景纹理的顶点信息，将每个像素点对应的碎图纹理颜色值、字符纹理颜色值和背景纹理颜色值进行融合处理，得到每个像素点的融合颜色值。

以电子设备是计算机设备为例，本申请实施例提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行本申请实施例上述的图形界面的渲染方法。

本申请实施例提供一种存储有计算机可执行指令的计算机可读存储介质，其中存储有计算机可执行指令，当计算机可执行指令被处理器执行时，将引起处理器执行本申请实施例提供的图形界面的渲染方法，例如，图4和图5示出的图形界面的渲染方法，计算机包括智能终端和服务器在内的各种计算设备。

在一些实施例中，计算机可读存储介质可以是FRAM、ROM、PROM、EP ROM、EEPROM、闪存、磁表面存储器、光盘、或CD-ROM等存储器；也可以是包括上述存储器之一或任意组合的各种设备。

在一些实施例中，计算机可执行指令可以采用程序、软件、软件模块、脚本或代码的形式，按任意形式的编程语言(包括编译或解释语言，或者声明性或过程性语言)来编写，并且其可按任意形式部署，包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。

作为示例，计算机可执行指令可以但不一定对应于文件系统中的文件，可以可被存储在保存其它程序或数据的文件的一部分，例如，存储在超文本标注语言文档中的一个或多个脚本中，存储在专用于所讨论的程序的单个文件中，或者，存储在多个协同文件(例如，存储一个或多个模块、子程序或代码部分的文件)中。

作为示例，计算机可执行指令可被部署为在一个计算设备上执行，或者在位于一个地点的多个计算设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个计算设备上执行。

综上所述，本申请实施例将图形界面数据中的图片和字符分别渲染至不同的纹理中，并根据碎图纹理和字符纹理的顶点信息，对采样得到的每个像素点的碎图纹理颜色值和字符纹理颜色值进行融合处理，以渲染形成图形界面，能够提高渲染过程中合批处理的可能性，减少渲染过程中的Draw Call操作，从而降低CPU的负载，提高图形界面的渲染效率，进而提高用户终端的显示帧率。

以上所述，仅为本申请的实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和范围之内所作的任何修改、等同替换和改进等，均包含在本申请的保护范围之内。