掌桥专利:专业的专利平台
掌桥专利
首页

图片渲染方法、装置、设备和介质

文献发布时间:2024-01-17 01:21:27


图片渲染方法、装置、设备和介质

技术领域

本申请涉及图片渲染的技术领域,尤其涉及一种图片渲染方法、装置、设备和介质。

背景技术

在游戏中,通常会遇到需要对图片进行渲染显示的场景,该图片可以是游戏界面中需要显示的界面元素(如控件)的图片。现有应用中,需要加载图片的整个纹理,进而,基于该整个纹理来渲染并显示图片。可见,现有应用在对图片进行渲染显示的过程中,首先需要加载出图片的整个纹理,若图片的纹理的整体数据量较大,则会导致对图片的纹理的加载速度慢,进而导致对图片的渲染效率低。

发明内容

本申请提供了一种图片渲染方法、装置、设备和介质,可提高对目标图片进行渲染的效率。

本申请一方面提供了一种图片渲染方法,该方法包括:

获取待渲染的目标图片的规则性参数;规则性参数用于表征目标图片的规则性;

获取目标图片的第一局部纹理;目标图片的全局纹理按照目标图片的规则性被切分为多个局部纹理,第一局部纹理是多个局部纹理中的任一局部纹理;

基于规则性参数对第一局部纹理的局部网格进行映射处理,得到多个局部纹理中除第一局部纹理之外的各个局部纹理的局部网格;

基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染目标图片。

本申请一方面提供了一种图片渲染装置,该装置包括:

第一获取模块,用于获取待渲染的目标图片的规则性参数;规则性参数用于表征目标图片的规则性;

第二获取模块,用于获取目标图片的第一局部纹理;目标图片的全局纹理按照目标图片的规则性被切分为多个局部纹理,第一局部纹理是多个局部纹理中的任一局部纹理;

映射模块,用于基于规则性参数对第一局部纹理的局部网格进行映射处理,得到多个局部纹理中除第一局部纹理之外的各个局部纹理的局部网格;

渲染模块,用于基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染目标图片。

可选的,目标图片的规则性包括对称性,规则性参数包括目标图片的对称模式及对称模式下的对称参数;

对称模式包括以下任一种:二分对称模式、四分对称模式;

若对称模式为二分对称模式,则对称参数包括以下任一种:二分轴对称参数、二分中心对称参数;

若对称模式为四分对称模式,则对称参数包括以下任一种:四分轴对称参数、四分中心对称参数。

可选的,上述装置还用于:

基于第一局部纹理,生成第一局部纹理的局部网格;

其中,第一局部纹理的局部网格包含第一局部纹理的网格顶点,第一局部纹理的网格顶点具有在第一局部纹理上对应的纹理坐标。

可选的,对称模式为二分对称模式,目标图片的全局纹理被切分为第一局部纹理和第二局部纹理,第一局部纹理与第二局部纹理相互对称;

映射模块基于规则性参数对第一局部纹理的局部网格进行映射处理,得到多个局部纹理中除第一局部纹理之外的各个局部纹理的局部网格的方式,包括:

基于规则性参数,对第一局部纹理的局部网格进行二分对称映射处理,生成第二局部纹理的局部网格。

可选的,对称参数包括二分轴对称参数,且二分轴对称参数包括目标图片的目标对称轴;映射模块基于规则性参数,对第一局部纹理的局部网格进行二分对称映射处理,生成第二局部纹理的局部网格的方式,包括:

基于目标对称轴,对第一局部纹理的网格顶点进行轴对称处理,生成第二局部纹理的第一网格顶点;

将第一局部纹理的网格顶点的纹理坐标,设置为与第一局部纹理的网格顶点基于目标对称轴进行对称的第一网格顶点的纹理坐标;

基于第二局部纹理的具有纹理坐标的第一网格顶点,生成第二局部纹理的局部网格。

可选的,对称参数包括二分中心对称参数,且二分中心对称参数用于指示关联的第一中心对称角度;映射模块基于规则性参数,对第一局部纹理的局部网格进行二分对称映射处理,生成第二局部纹理的局部网格的方式,包括:

将第一局部纹理的网格顶点旋转第一中心对称角度,生成第二局部纹理的第二网格顶点;第一局部纹理的一个网格顶点进行旋转后用于生成对应的一个第二网格顶点;

将第一局部纹理的各个网格顶点的纹理坐标,设置为第一局部纹理的各个网格顶点对应的第二网格顶点的纹理坐标;

基于第二局部纹理的具有纹理坐标的第二网格顶点,生成第二局部纹理的局部网格。

可选的,对称模式为四分对称模式,目标图片的全局纹理被切分为第一局部纹理、第三局部纹理、第四局部纹理和第五局部纹理,且各个局部纹理相互对称;

映射模块基于规则性参数对第一局部纹理的局部网格进行映射处理,得到多个局部纹理中除第一局部纹理之外的各个局部纹理的局部网格的方式,包括:

基于规则性参数,对第一局部纹理的局部网格进行四分对称映射处理,生成第三局部纹理的局部网格、第四局部纹理的局部网格以及第五局部纹理的局部网格。

可选的,对称参数包括四分轴对称参数,且四分轴对称参数包括目标图片的第一对称轴和第二对称轴;映射模块基于规则性参数,对第一局部纹理的局部网格进行四分对称映射处理,生成第三局部纹理的局部网格、第四局部纹理的局部网格以及第五局部纹理的局部网格的方式,包括:

基于第一对称轴,对第一局部纹理的网格顶点进行对称处理,生成第三局部纹理的第三网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为与第一局部纹理的网格顶点基于第一对称轴进行对称的第三网格顶点的纹理坐标;

基于第二对称轴,对第一局部纹理的网格顶点进行对称处理,生成第四局部纹理的第四网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为与第一局部纹理的网格顶点基于第二对称轴进行对称的第四网格顶点的纹理坐标;

基于第一对称轴以及第二对称轴对第一局部纹理的网格顶点进行对称处理,生成第五局部纹理的第五网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为与第一局部纹理的网格顶点基于第一对称轴以及第二对称轴均进行对称的第五网格顶点的纹理坐标;

基于第三局部纹理的具有纹理坐标的第三网格顶点,生成第三局部纹理的局部网格,并基于第四局部纹理的具有纹理坐标的第四网格顶点,生成第四局部纹理的局部网格,以及基于第五局部纹理的具有纹理坐标的第五网格顶点,生成第五局部纹理的局部网格。

可选的,对称参数包括四分中心对称参数,且四分中心对称参数用于指示关联的第二中心对称角度、第三中心对称角度和第四中心对称角度;映射模块基于规则性参数,对第一局部纹理的局部网格进行四分对称映射处理,生成第三局部纹理的局部网格、第四局部纹理的局部网格以及第五局部纹理的局部网格的方式,包括:

将第一局部纹理的网格顶点旋转第二中心对称角度,生成第三局部纹理的第六网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为将第一局部纹理的网格顶点进行旋转后所生成的第六网格顶点的纹理坐标;

将第一局部纹理的网格顶点旋转第三中心对称角度,生成第四局部纹理的第七网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为将第一局部纹理的网格顶点进行旋转后所生成的第七网格顶点的纹理坐标;

将第一局部纹理的网格顶点旋转第四中心对称角度,生成第五局部纹理的第八网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为将第一局部纹理的网格顶点进行旋转后所生成的第八网格顶点的纹理坐标;

基于第三局部纹理的具有纹理坐标的第六网格顶点,生成第三局部纹理的局部网格,并基于第四局部纹理的具有纹理坐标的第七网格顶点,生成第四局部纹理的局部网格,以及基于第五局部纹理的具有纹理坐标的第八网格顶点,生成第五局部纹理的局部网格。

可选的,多个局部纹理中各个局部纹理的局部网格中分别包含该各个局部纹理的网格顶点;多个局部纹理中各个局部纹理的网格顶点的纹理坐标,均属于第一局部纹理上的纹理坐标;

渲染模块基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染目标图片的方式,包括:

基于多个局部纹理中各个局部纹理的网格顶点的纹理坐标,分别在第一局部纹理中进行颜色采样,得到多个局部纹理中各个局部纹理的网格顶点的像素颜色;

基于多个局部纹理中各个局部纹理的网格顶点的像素颜色,对多个局部纹理中各个局部纹理的网格顶点进行上色处理,以渲染显示多个局部纹理中各个局部纹理所属的局部图片;

其中,目标图片是由多个局部纹理中各个局部纹理所属的局部图片构成。

可选的,全局纹理是收缩图片的纹理,收缩图片是对目标图片的中心位置处的图片进行收缩处理后得到的;

渲染模块基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染目标图片的方式,包括:

基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染收缩图片;

对渲染的收缩图片的中心位置处的图片进行拉伸处理,得到目标图片。

可选的,上述装置还用于:

获取游戏中需引用全局纹理进行渲染显示的目标游戏控件;

将目标游戏控件的渲染显示方式,更新为基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格进行渲染显示的方式;

其中,目标图片是需渲染显示的目标游戏控件的图片。

本申请一方面提供了一种计算机设备,包括存储器和处理器,存储器存储有计算机程序,计算机程序被处理器执行时,使得处理器执行本申请中一方面中的方法。

本申请一方面提供了一种计算机可读存储介质,该计算机可读存储介质存储有计算机程序,该计算机程序被处理器执行时使该处理器执行上述一方面中的方法。

根据本申请的一个方面,提供了一种计算机程序产品,该计算机程序产品包括计算机程序,该计算机程序存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机程序,处理器执行该计算机程序,使得该计算机设备执行上述一方面等各种可选方式中提供的方法。

本申请可以获取待渲染的目标图片的规则性参数;规则性参数用于表征目标图片的规则性;获取目标图片的第一局部纹理;目标图片的全局纹理按照目标图片的规则性被切分为多个局部纹理,第一局部纹理是多个局部纹理中的任一局部纹理;基于规则性参数对第一局部纹理的局部网格进行映射处理,得到多个局部纹理中除第一局部纹理之外的各个局部纹理的局部网格;基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染目标图片。基于此,本申请提出的方法,可以基于目标图片所具有的规则性将目标图片的全局纹理切分为多个局部纹理,并可以通过第一局部纹理的局部网格来映射得到其他各个局部纹理的局部网格,进而,通过第一局部纹理以及各个局部纹理的局部网格,即可实现对目标图片的渲染,可见,本申请在渲染目标图片时,只需加载目标图片的一个局部纹理(如第一局部纹理)进行渲染,而无需加载目标图片的全局纹理,提升了对目标图片进行渲染时的纹理加载速度,从而也提升了对目标图片进行渲染的效率;此外,由于仅需存储图片的局部纹理,因此,可降低针对图片的纹理的内存存储压力,实现对内存的有效优化。

附图说明

为了更清楚地说明本申请或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。

图1是本申请提供的一种图片渲染的场景示意图;

图2是本申请提供的一种图片渲染方法的流程示意图;

图3是本申请提供的另一种图片渲染的场景示意图;

图4是本申请提供的一种图像裁剪的场景示意图;

图5是本申请提供的一种针对网格的二分对称映射方法的流程示意图;

图6a-图6c是本申请提供的一种生成局部网格的场景示意图;

图7是本申请提供的另一种针对网格的二分对称映射方法的流程示意图;

图8是本申请提供的另一种图像裁剪的场景示意图;

图9是本申请提供的一种针对网格的四分对称映射方法的流程示意图;

图10a-图10b是本申请提供的另一种生成局部网格的场景示意图;

图11是本申请提供的另一种针对网格的四分对称映射方法的流程示意图;

图12a-图12b是本申请提供的又一种生成局部网格的场景示意图;

图13是本申请提供的一种纹理集的界面示意图;

图14是本申请提供的一种图片渲染装置的结构示意图;

图15是本申请提供的一种计算机设备的结构示意图。

具体实施方式

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

首先,需要进行说明的是,本申请所采集的所有数据(如目标图片、目标图片的纹理以及纹理的网格等相关数据)都可以是在该数据所属对象(如用户、机构或者企业)同意并授权的情况下进行采集的,且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。

此处,对本申请涉及到的相关概念进行说明:

Unity3D:一种游戏引擎。

UI:用户界面(User Interface),是指对软件的人机交互、操作逻辑、界面美观的整体设计。

UGUI:UGUI是Unity3D的一套UI组件,可以便捷地实现UI界面的可视化操作。

顶点 (Vertex):也可以称为网格顶点,表示网格中的顶点,包含顶点位置(Position)、顶点颜色 (Color)、法线 (Normal) 和纹理坐标 (UV坐标) 等属性。

三角形 (Triangle):网格中的一个面,由三个顶点构成。在计算机图形学中,三角形是最基本的图形单元。

UV:顶点的纹理坐标,表示顶点在纹理上的位置。

示意性的,请参见图1,图1是本申请提供的一种图片渲染的场景示意图。如图1所示,终端设备100中可以安装有游戏应用,该游戏应用的安装包中可以包含游戏应用中需进行渲染显示的图片(如需在游戏界面中进行渲染显示的任意界面元素的图片)的所有纹理(也可以称为纹理贴图),因此,终端设备100在安装该游戏应用后,可以拿到该游戏应用中进行界面渲染时需使用到的所有纹理。

可选的,上述终端设备100可以是:智能手机、平板电脑、笔记本电脑、桌上型电脑、智能电视、便携式设备、车载终端等智能终端。

此处,目标图片可以是指游戏应用中,需要在游戏界面中进行渲染显示的任意对象的图片,如目标图片可以是整个游戏界面的图片,目标图片还可以是游戏界面中某个UI元素(如游戏控件)的图片,等等,具体可以根据实际应用场景确定。

其中,目标图片具有规则性(如对称性),目标图片还具有全局纹理,该全局纹理是用于渲染显示目标图片的整个纹理,目标图片的全局纹理可以按照目标图片的规则性被切分为多个部分,该多个部分可以称之为是目标图片的多个局部纹理。如图1所示的第一局部纹理就可以是该多个局部纹理中的任意一个局部纹理。

因此,本申请中的终端设备中可以只存储有目标图片的全局纹理的第一局部纹理,当需要渲染显示目标图片时,也可以只加载(如从终端设备的磁盘中加载)目标图片的该第一局部纹理,并可以基于该第一局部纹理以及目标图片的规则性,来实现第一局部纹理针对目标图片的渲染效果、以及上述多个局部纹理中除第一局部纹理之外的局部纹理针对目标图片的渲染效果,从而通过第一局部纹理就实现了对整个目标图片的渲染,该具体过程也可以参见下述图2对应实施例中的相关描述。

采用本申请提供的方法,对于具有规则性的图片(如上述目标图片)的全局纹理而言,终端设备中可以只存储该全局纹理的一部分(如上述第一局部纹理),因此,减少了纹理对终端设备中内存的占用;并且,由于终端设备在渲染该规则性的图片时,也只需加载出该图片的部分纹理,来实现对该图片的整体渲染,由于加载部分纹理相较于加载全局纹理,提升了对于纹理的加载速度,因此,也提升了基于加载的纹理对图片的渲染效率。

请参见图2,图2是本申请提供的一种图片渲染方法的流程示意图。本申请实施例中的执行主体可以是图片渲染设备(可以简称为渲染设备),该渲染设备可以是一个计算机设备或者是多个计算机设备构成的计算机设备集群,该计算机设备可以是服务器,也可以是终端设备,或者是其他设备,对此不做限制。如图2所示,该方法可以包括:

步骤S101,获取待渲染的目标图片的规则性参数;规则性参数用于表征目标图片的规则性。

具体的,目标图片可以是应用界面中待渲染显示的任意界面元素(如UI元素)的图片。如该应用界面可以是游戏界面,待渲染显示的界面元素可以是游戏中待渲染显示的游戏控件,因此,目标图片就可以是游戏界面待渲染显示的该游戏控件的图片。目标图片具体是哪个界面元素的图片,可以根据实际应用场景确定,对此不做限制。

其中,目标图片可以是具备规则性的图像,目标图片的规则性参数可以是基于目标图片的规则性,对目标图片所设置的参数,因此,该规则性参数也可以用于表征(或者是反映)目标图片的规则性。换句话说,通过目标图片的规则性参数可以用于描述目标图片包含的图像内容具备哪种具体的分布规则。

可选的,目标图片的规则性参数可以是预先设置的,例如,目标图片是游戏界面中需要渲染显示的对象的图片,渲染设备中可以包含该游戏(如安装有该游戏),则目标图片的规则性参数可以是被设置在渲染设备的游戏引擎中的。因此,渲染设备可以获取到(如从游戏引擎中获取)目标图片的规则性参数。

可选的,目标图片的规则性可以包括对称性,即目标图片可以是一个对称的图片,因此,目标图片的规则性参数可以包括目标图片的对称模式以及目标图片在该对称模式下的对称参数。目标图片的对称模式可以用于指示目标图片中的图像内容的对称方式。

可选的,目标图片的对称模式可以包括以下任一种:二分对称模式、四分对称模式。若目标图片的对称模式是二分对称模式,则表明目标图片可以包含相互对称的两个部分的图片,即目标图片可以是基于该相互对称的两个部分的图片构成的;而若目标图片的对称模式是四分对称模式,则表明目标图片可以包含相互对称的四个部分的图片,即目标图片可以是基于该相互对称的四个部分的图片构成的。

更多的,若目标图片的对称模式是上述二分对称模式,则该对称模式下的对称参数可以包括以下任一种:二分轴对称参数、二分中心对称参数。

其中,若对称参数是二分轴对称参数,则表明目标图片可以是基于平面坐标系(也可以称为参考坐标系)的一个坐标轴进行对称的,即二分轴对称参数用于指示目标图片是基于轴对称的二分图片,该二分轴对称参数就可以包含目标图片的对称轴(数量为1),可以将目标图片的对称轴称为是目标对称轴。

其中,参考坐标系可以包含两个坐标轴,该两个坐标轴可以包括x轴(横轴)和y轴(纵轴),可以将x轴称之为是第一坐标轴,并可以将y轴称之为是第二坐标轴。

若目标图片是二分对称模式且对称参数是二分轴对称参数,则目标图片的上述目标对称轴就可以是第一坐标轴,或者是第二坐标轴,即目标图片可以是基于x轴对称的(如可以是基于x轴的方向进行对称的,也可以理解为是目标图片是基于自己的与x轴平行的中心线对称的,目标图片的该中心线的方向与x轴的方向一致,是横向的),或者是基于y轴对称的(如可以是基于y轴的方向进行对称的,也可以理解为是目标图片是基于自己的与y轴平行的中心线对称的,目标图片的该中心线的方向与y轴的方向一致,是纵向的)。

此外,若对称参数是上述二分中心对称参数,则表明目标图片的一半图片可以通过将目标图片的另一半图片旋转180度后得到(可以是基于目标图片的中心点进行旋转),即二分中心对称参数用于指示目标图片是中心对称的二分图片,在二分中心对称的模式下,旋转的该180度可以称之为是二分中心对称参数关联的中心对称角度(可以称为第一中心对称角度),即二分中心对称参数可以用于指示所关联的该第一中心对称角度。

更多的,若目标图片的对称模式是上述四分对称模式,则该对称模式下的对称参数可以包括以下任一种:四分轴对称参数、四分中心对称参数。

若对称参数是上述四分轴对称参数,则表明目标图片可以是基于上述参考坐标系的两个坐标轴都进行对称的,即四分轴对称参数用于指示目标图片是基于轴对称的四分图片,该四分轴对称参数就可以包含目标图片的两个对称轴,该两个对称轴可以包括上述第一坐标轴和第二坐标轴,可以将该第一坐标轴称之为是目标图片的第一对称轴,可以将该第二坐标轴称之为是目标图片的第二对称轴。即若对称参数是上述四分轴对称参数,则可以理解为目标图片既基于x轴的方向进行对称,也基于y轴的方向进行对称。

此外,若对称参数是上述四分中心对称参数,则表明可以对目标图片的1/4的图片分别旋转不同的角度,得到另外3个1/4的图片,即四分中心对称参数用于指示目标图片是中心对称的四分图片。例如,可以对目标图片的1/4的图片旋转90度,得到另一个1/4的图片,还可以旋转180度,得到又一个1/4的图片,以及可以旋转270度,得到又一个1/4的图片。

其中,可以将旋转的该90度、180度和270均称之为是四分中心对称参数关联的中心对称角度,可以将四分中心对称参数关联的90度的旋转角度称之为是第二中心对称角度,将四分中心对称参数关联的180度的旋转角度称之为是第三中心对称角度,将四分中心对称参数关联的270度的旋转角度称之为是第四中心对称角度,即四分中心对称参数可以用于指示所关联的该第二中心对称角度、第三中心对称角度以及第四中心对称角度。

其中,需要进行说明的是,本申请中的目标图片的对称模式主要可以是上述二分对称模式和四分对称模式。在一些扩展场景下,目标图片还可以是八分对称模式(即目标图片可以被切分为8个部分,通过目标图片的1/8图片可以转换得到目标图片的其他7个1/8的图片)、十六分对称模式(即目标图片可以被切分为16个部分,通过目标图片的1/16图片可以转换得到目标图片的其他15个1/16的图片)或者其他更多分的对称模式。需注意的是,在这些高于四分的对称模式中,可能会导致后续通过局部纹理渲染整个目标图片的计算量过大,以及会导致渲染的目标图片中各个部分之间会有锯齿状出现,因为在高于2分和4分的对称模式中,目标图片的各个部分之间会有斜线出现,而斜线部分也是由若干像素堆叠形成的,因此,目标图片的各个部分之间的斜线若是不重合,就会呈现出锯齿状的效果,导致对目标图片的渲染效果并不理想。因此,若使用高于四分的对称模式,需综合考量渲染计算量及渲染效果。

本申请实施例中,以对称模式为二分对称模式或四分对称模式为例来详细阐述对目标图片的渲染处理过程。

步骤S102,获取目标图片的第一局部纹理;目标图片的全局纹理按照目标图片的规则性被切分为多个局部纹理,第一局部纹理是多个局部纹理中的任一局部纹理。

具体的,目标图片可以具有全局纹理,该全局纹理可以是用于渲染目标图片的整个完整的纹理。其中,该全局纹理可以按照目标图片的规则性,被切分为多个局部纹理,这多个局部纹理之间可以基于图片的规则性进行相互转换,即通过该多个局部纹理中的任一局部纹理,也可以转换得到其他各个局部纹理。示意性的,该多个局部纹理中的各个局部纹理的尺寸可以是相同的。

可以理解为,目标图片的全局纹理也可以具有目标图片的规则性。如下述内容描述。

若目标图片的对称模式是上述二分对称模式,则全局纹理可以按照目标图片的规则性,被切分为相互对称的两个局部纹理(一个局部纹理就为全局纹理的一半),该两个局部纹理中的任一个局部纹理可以通过轴对称的方式或者通过中心旋转的方式,得到另一个局部纹理。此处,一个局部纹理就可以是目标图片中一半图片的纹理,该一半图片可以是指目标图片在二分对称模式下的最小对称单元,另一半图片可以通过对该半图片进行对称(轴对称或者中心对称)得到。

而若目标图片的对称模式是上述四分对称模式,则全局纹理可以按照目标图片的规则性,被切分为相互对称的四个局部纹理(一个局部纹理就为全局纹理的1/4),该四个局部纹理中的任一局部纹理也可以通过轴对称的方式或者中心旋转的方式,得到其他三个局部纹理。此处,一个局部纹理就可以是目标图片中1/4图片的纹理,该1/4图片可以是指目标图片在四分对称模式下的最小对称单元,其他3个1/4图片可以通过对该1/4图片进行对称(轴对称或者中心对称)得到。

可选的,上述所描述的目标图片中的最小对称单元,可以是指能够还原出目标图片的最小部分的图片。

其中,可以将上述多个局部纹理中的任一个局部纹理,作为第一局部纹理(具体选取哪个局部纹理作为第一局部纹理,可以根据实际应用场景确定),该第一局部纹理可以是后续渲染设备用于渲染目标图片的局部纹理,渲染设备中可以只存储有该第一局部纹理,而可以不存储目标图片的全局纹理,也可以不存储该全局纹理中除该第一局部纹理之外的其他各个局部纹理;这样,可以减少渲染设备针对需渲染的目标图片的纹理的存储压力。

可选的,目标图片的全局纹理的多个局部纹理可以是预先切分得到的,该过程可以是由渲染设备执行的,或者也可以是由其他设备来做的(如游戏的后台设备),下述以由渲染设备执行该过程为例进行说明,该过程可以包括:

渲染设备可以获取到图集,该图集中可以包含待渲染的多个图片,如该图集可以包含游戏中可以进行渲染的全部UI元素的图片。渲染设备可以从该图集中检测并筛选(可以理解为定位)出具备规则性(如对称性)的图片,作为上述目标图片,筛选出的目标图片的数量可以根据实际应用场景确定。

在一种实施方式中,本申请可以采用余弦相似度算法从图集中检测并筛选出具备规则性的图片,以对图集中的一个图片进行检测的过程为例进行说明,该过程可以包括:渲染设备可以对该图片进行切分,切分为4个部分,如可以通过该图片横向的中心线以及纵向的中心线将该图片均匀切分为4个部分(可以包括左上部分的1/4图片、左下部分的1/4图片、右上部分的1/4图片以及右下部分的1/4图片)。例如,下述图10a中,目标图片c1就可以包括左上部分的1/4图片、左下部分的1/4图片、右上部分的1/4图片以及右下部分的1/4图片,对目标图片c1裁剪得到的局部图片c3就可以是目标图片中左上部分的1/4图片。

进而,渲染设备可以计算该4个部分的图片之间的余弦相似度,任两个部分的图片之间可以具有一个余弦相似度,若该4个部分的图片之间的余弦相似度都比较高(如高于相似度阈值),则可以认为该图片是具有对称性(即规则性)的,该对称性的对称模式可以是四分对称模式;若该4个部分的图片中,左上部分的图片与右上部分的图片之间的余弦相似度高于相似度阈值,且左下部分的图片与右下部分的图片之间的余弦相似度高于相似度阈值,而左上部分的图片与左下部分的图片之间的余弦相似度低于相似度阈值,以及右上部分的图片与右下部分的图片之间的余弦相似度低于相似度阈值,则可以认为该图片是具有对称性的,该对称性的对称模式可以是二分对称模式。

更多的,若该4个部分的图片中,左上部分的图片与左下部分的图片之间的余弦相似度高于相似度阈值,且右上部分的图片与右下部分的图片之间的余弦相似度高于相似度阈值,而左上部分的图片与右上部分的图片之间的余弦相似度低于相似度阈值,以及左下部分的图片与右下部分的图片之间的余弦相似度低于相似度阈值,则也可以认为该图片是具有对称性的,该对称性的对称模式可以是二分对称模式。

步骤S103,基于规则性参数对第一局部纹理的局部网格进行映射处理,得到多个局部纹理中除第一局部纹理之外的各个局部纹理的局部网格。

可选的,渲染设备可以通过第一局部纹理,直接生成第一局部纹理的网格(Mesh),可以将局部纹理的网格称之为是局部网格,即可以将第一局部纹理的网格称之为是第一局部纹理的局部网格。或者,第一局部纹理的局部网格也可以是预先对第一局部纹理生成的网格。可选的,可以调用相应的网格生成方法快速生成第一局部纹理的局部网格。任一局部纹理的局部网格可以用于渲染目标图片中需要基于该局部纹理进行渲染显示的局部图片。

其中,第一局部纹理的局部网格可以包含网格三角形(可以简称三角形)以及第一局部纹理的网格顶点(即三角形的顶点),即第一局部纹理的局部网格可以是由若干三角形以及三角形的顶点构成的,可以将第一局部纹理的局部网格中的网格顶点称之为是第一局部纹理的网格顶点,该网格顶点具有在第一局部纹理上对应的纹理坐标(UV坐标),即可以理解为,第一局部纹理的一个网格顶点的纹理坐标可以用于指示第一局部纹理上对应的一个纹理位置,该纹理位置也可以称之为是像素位置,即该纹理位置可以是在第一局部纹理上的一个像素位置。

其中,局部纹理的局部网格可以是矩形的,而由于至少需要两个三角形形成一个矩形,因此,第一局部纹理的局部网格可以是至少由两个三角形构成的。

若目标图片的对称模式可以是上述二分对称模式,则目标图片的全局纹理的多个局部纹理可以是指相互对称(可以是轴对称或中心对称)的两个局部纹理,可以将该两个局部纹理中除上述第一局部纹理之外的另一个局部纹理称之为是第二局部纹理;即目标图片的全局纹理可以被切分为第一局部纹理和第二局部,第一局部纹理与第二局部纹理之间是相互对称的。

因此,渲染设备可以对第一局部纹理的局部网格进行二分对称映射处理,即可生成第二局部纹理的局部网格。该二分对称映射处理可以是指,对第一局部纹理的局部网格按照相应的对称方式(如轴对称或者中心对称)进行一次(因为二分里的一分可以用于表示第一局部纹理本身)对称以及映射处理,可以生成另一半局部纹理(即第二局部纹理)的局部网格。该具体过程也可以参见下述图5和图7对应实施例中的具体描述。

更多的,若目标图片的对称模式是上述四分对称模式,则目标图片的全局纹理的多个局部纹理可以是指相互对称的四个局部纹理,该四个局部纹理中除上述第一局部纹理之外的三个局部纹理,可以分别称之为是第三局部纹理、第四局部纹理以及第五局部纹理;即目标图片的全局纹理可以被切分为第一局部纹理、第三局部纹理、第四局部纹理和第五局部纹理,该第一局部纹理、第三局部纹理、第四局部纹理和第五局部纹理之间相互对称。

因此,渲染设备可以对第一局部纹理的局部网格进行四分对称映射处理,即可生成上述第三局部纹理的局部网格、第四局部纹理的局部网格以及第五局部纹理的局部网格。该四分对称映射处理可以是指,对第一局部纹理的局部网格按照相应的对称方式(如轴对称或者中心对称)进行三次(因为四分里的一分可以用于表示第一局部纹理本身)对称以及映射处理,可以分别生成另外三个局部纹理的局部网格。该具体过程也可以参见下述图9和图11对应实施例中的具体描述。

步骤S103,基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染目标图片。

可选的,可以将任一局部纹理的局部网格中的网格顶点称之为是该任一局部纹理的网格顶点。其中,由于上述多个局部纹理中除第一局部纹理之外的各个局部纹理的网格顶点是基于第一局部纹理的网格顶点进行对称映射而来的,且第一局部纹理的网格顶点的纹理坐标是属于第一局部纹理上的纹理坐标,因此,该多个局部纹理中除第一局部纹理之外的各个局部纹理的网格顶点的纹理坐标也是均属于第一局部纹理上的纹理坐标。

因此,本申请可以只通过第一局部纹理来实现对各个局部纹理的局部网格的渲染,以实现对整个目标图片的渲染,而无需使用除第一局部纹理之外的其他局部纹理来参与目标图片的渲染,如下述内容描述。

渲染设备可以通过多个局部纹理中的各个局部纹理的网格顶点的纹理坐标,分别在第一局部纹理中进行颜色采样,即可得到该多个局部纹理中各个局部纹理的网格顶点的像素颜色(该像素颜色即为采样得到的颜色)。可以将第一局部纹理中任一局部纹理的网格顶点的纹理坐标所指示的像素位置处的像素颜色,作为是对该任一局部纹理的网格顶点所采样得到的像素颜色,一个网格顶点可以具有一个纹理坐标,因此,一个网格顶点可以对应采样得到的一个像素颜色。

进而,渲染设备即可通过多个局部纹理中各个局部纹理的网格顶点的像素颜色,对该多个局部纹理中各个局部纹理的网格顶点进行上色处理,以渲染显示出各个局部纹理所属的局部图片,各个局部纹理所属的局部图片均属于目标图片中的局部图片,渲染显示的各个局部纹理所属的局部图片就构成了渲染显示的整体的目标图片。

请参见图3,图3是本申请提供的另一种图片渲染的场景示意图。如图3所示,渲染设备可以通过第一局部纹理对第一局部纹理的局部网格进行渲染处理,以实现对第一局部纹理所属局部图片的渲染显示,并可以通过第一局部纹理对除第一局部纹理之外的其他各个局部纹理的局部网格进行渲染处理,以实现对该其他各个局部纹理所属局部图片的渲染显示,渲染显示的第一局部纹理所属的局部图片以及渲染显示的其他各个局部纹理所属的局部图片,就共同构成了渲染显示的目标图片。

更多的,在一种可行的实施方式中,上述全局纹理还可以是收缩图片的纹理,该收缩图片可以是对目标图片的中心位置处的图片进行收缩处理后得到的,该收缩图片也可以具有目标图片的对称模式以及对称参数,此种情况下,渲染设备可以采用上述所描述的方式,先通过第一局部纹理以及各个局部纹理的局部网格,渲染显示出该收缩图片,进而,对该收缩图片的中心位置处的图片进行拉伸处理,即可恢复出目标图片,实现对目标图片的渲染显示。

其中,对收缩图片的中心位置处的图片(即目标图片的中心位置处的图片进行收缩处理后的图片)进行拉伸处理的尺度(即幅度),与上述对目标图片的中心位置处的图片进行收缩处理的尺度(即幅度)是相同的,以此可以通过渲染的收缩图片准确地还原出原尺寸的目标图片。

可选的,上述情况适用于目标图片是目标框的图片时,对目标图片的渲染场景,该目标框的中心位置处的图片处处都可以是相同的(如目标图片的中心位置处的图片就是由上下两条直线框构成),因此可以对该中心位置处的图片进行收缩(以进一步减少存储的纹理的数据量),且该目标框的4个边角不属于中心位置处的图片,因此该4个边角不会被进行拉伸,目标框的该4个边角的形状也就不会发生形变。

请参见图4,图4是本申请提供的一种图像裁剪的场景示意图。如图4所示,目标图片的对称模式可以是四分对称模式,且对称参数是四分轴对称参数,本申请中,可以对目标图片的中心位置处的图片进行收缩处理,即可得到目标图片的收缩图片,该收缩图片也是四分对称模式的,因此,可以对该收缩图片进行四分轴对称裁剪,即可得到收缩图片的局部图片,此处,该局部图片可以是收缩图片中左上角的1/4的图片,上述第一局部纹理可以是该收缩图片的局部图片的纹理,采用本申请提供的方法,通过该收缩图片的局部图片的纹理也可以实现对整个目标图片的渲染处理。

在另一些特定的场景下,若目标图片中的目标框的左上角与右上角是相同的,目标框的左下角与右下角是相同的,左上角与左下角是不同的,右上角与右下角是不同的,表明目标图片以及目标图片的收缩贴图可以是二分对称模式的,且对称参数为二分轴对称参数(基于y轴对称),则可以对收缩贴图基于x轴的方向进行二分对称裁剪处理,此时,第一局部纹理可以是收缩图片中上半部分的1/2图片的纹理或者是收缩图片中下半部分的1/2图片的纹理。

更多的,渲染设备还可以获取游戏中需引用(即调用)目标图片的全局纹理进行渲染显示的游戏控件,可以将该需引用全局纹理进行渲染显示的游戏控件称之为是目标游戏控件,并可以将该目标游戏控件原有的渲染显示方式(即原有的需要通过全局纹理以及全局纹理的网格实现对目标游戏控件的渲染显示的方式),更新为本申请中所提供的,可以基于第一局部纹理以及各个局部纹理的局部网格来进行渲染显示的方式,渲染显示出的该目标游戏控件的在游戏界面上的图片就可以是上述目标图片。

本申请中,由于可以通过目标图片的局部纹理(如第一局部纹理)来渲染显示目标图片,因此,渲染设备在需要渲染显示目标图片之前,可以只存储目标图片的局部纹理,而无需存储整个目标图片的全局纹理,因此,减少了纹理贴图对渲染设备的内存的占用。并且,渲染设备在需要渲染显示目标图片时,也只需加载目标图片的局部纹理(如第一局部纹理),可以实现对纹理的快速加载,进而,就可以通过加载的该局部纹理来渲染和显示出目标图片,因此,也提升了对目标图片进行渲染显示的效率,减少了对目标图片进行渲染显示的耗时。

本申请可以获取待渲染的目标图片的规则性参数;规则性参数用于表征目标图片的规则性;获取目标图片的第一局部纹理;目标图片的全局纹理按照目标图片的规则性被切分为多个局部纹理,第一局部纹理是多个局部纹理中的任一局部纹理;基于规则性参数对第一局部纹理的局部网格进行映射处理,得到多个局部纹理中除第一局部纹理之外的各个局部纹理的局部网格;基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染目标图片。基于此,本申请提出的方法,可以基于目标图片所具有的规则性将目标图片的全局纹理切分为多个局部纹理,并可以通过第一局部纹理的局部网格来映射得到其他各个局部纹理的局部网格,进而,通过第一局部纹理以及各个局部纹理的局部网格,即可实现对目标图片的渲染,可见,本申请在渲染目标图片时,只需加载目标图片的一个局部纹理(如第一局部纹理)进行渲染,而无需加载目标图片的全局纹理,提升了对目标图片进行渲染时的纹理加载速度,从而也提升了对目标图片进行渲染的效率;此外,由于仅需存储图片的局部纹理,因此,可降低针对图片的纹理的内存存储压力,实现对内存的有效优化。

请参见图5,图5是本申请提供的一种针对网格的二分对称映射方法的流程示意图。本申请实施例中描述了,当目标图片的对称模式是二分对称模式,且对称参数是二分轴对称参数,以及二分轴参数包括目标图片的上述目标对称轴时,通过第一局部纹理的局部网格生成第二局部纹理的局部网格的过程。如图5所示,该方法可以包括:

步骤S201,基于目标对称轴,对第一局部纹理的网格顶点进行对称处理,生成第二局部纹理的第一网格顶点。

可选的,渲染设备可以通过目标对称轴,对第一局部纹理的网格顶点进行轴对称处理,可以生成第二局部纹理的网格顶点,可以将该网格顶点称之为是第一网格顶点,该第一网格顶点与第一局部纹理的网格顶点之间是基于目标对称轴的方向对称的。

其中,第一局部纹理的一个网格顶点可以用于生成一个第一网格顶点,该第一网格顶点与第一局部纹理的该网格顶点之间就是基于目标对称轴的方向进行对称的,可以将该第一网格顶点称之为是第一局部纹理的该个网格顶点对应的第一网格顶点。

步骤S202,将第一局部纹理的网格顶点的纹理坐标,设置为与第一局部纹理的网格顶点基于目标对称轴进行对称的第一网格顶点的纹理坐标。

可选的,渲染设备可以将第一局部纹理的各个网格顶点的纹理坐标,分别设置为第一局部纹理的各个网格顶点对应的第一网格顶点的纹理坐标。

换句话说,可以将第一局部纹理的任一网格顶点的纹理坐标,设置为该网格顶点对应的第一网格顶点的纹理坐标。

步骤S203,基于第二局部纹理的具有纹理坐标的第一网格顶点,生成第二局部纹理的局部网格。

可选的,渲染设备可以通过第二局部纹理的具有纹理坐标的第一网格顶点,生成第二局部纹理的局部网格。其中,确定了第二局部纹理的各个第一网格顶点,即可基于该各个第一网格顶点生成对应的网格三角形(可以简称三角形),该网格三角形的顶点也就是第二局部纹理的各个第一网格顶点,第二局部纹理的局部纹理就可以包含第二局部纹理的各个第一网格顶点以及顶点为该各个第一网格顶点的三角形。

请参见图6a-图6c,图6a-图6c是本申请提供的一种生成局部网格的场景示意图。如图6a所示,目标图片可以是此处的图片a1,框a2中包含对目标图片配置的相关对称属性参数(如上述对称参数),此处,目标图片的对称模式可以是二分对称模式,对称参数可以是二分轴对称参数,二分轴对称参数中的目标对称轴可以是y轴。

因此,可以以y轴的方向对目标图片进行二分对称裁剪,得到目标图片的局部图片a3,局部图片a3可以是目标图片的左半部分的图片,上述第一局部纹理就可以是该局部图片a3的纹理,渲染设备中可以只存储该局部图片a3的纹理。

再如图6b所示,第一局部纹理(如此处的局部图片a3的纹理)的局部网格中的网格顶点,可以包含此处的网格顶点b1、网格顶点b2、网格顶点b3以及网格顶点b4。其中,网格顶点b1的纹理坐标为(0,1),网格顶点b2的纹理坐标为(0,0),网格顶点b3的纹理坐标为(1,0),网格顶点b4的纹理坐标为(1,1)。

由于第一局部纹理与第二局部纹理之间是基于y轴的方向进行对称的,因此,渲染设备可以生成与网格顶点b1基于y轴的方向进行对称的网格顶点b5,生成与网格顶点b2基于y轴的方向进行对称的网格顶点b6,生成的与网格顶点b4基于y轴的方向进行对称的网格顶点还是网格顶点b4自己,以及生成的与网格顶点b3基于y轴的方向进行对称的网格顶点还是网格顶点b3自己。即上述第二局部纹理的多个第一网格顶点,可以包括此处的网格顶点b3、网格顶点b4、网格顶点b5以及网格顶点b6。

因此,纹理设备可以将网格顶点b1的纹理坐标(0,1)设置为是网格顶点b5的纹理坐标,并可以将网格顶点b2的纹理坐标(0,0)设置为是网格顶点b6的纹理坐标,即与第一局部纹理的网格顶点基于y轴方向进行对称的第一网格顶点可以具有相同的纹理坐标。第二局部纹理的局部网格包含上述网格顶点b3、网格顶点b4、网格顶点b5、网格顶点b6以及顶点为该网格顶点b3、网格顶点b4、网格顶点b5和网格顶点b6的两个三角形。

通过上述过程,即通过第一局部纹理的局部网格生成了第二局部纹理的局部网格,第一局部纹理的局部网格和第二局部纹理的局部网格之间共用了网格顶点b4以及网格顶点b3这两个网格顶点。

可以理解的是,第一局部纹理和第二局部纹理实际上可以具有非常多的网格顶点,上述可以是以网格顶点b1~网格顶点b6为例进行举例说明的,但是不管第一局部纹理和第二局部纹理有多少个网格顶点,都可以按照上述的原理基于第一局部纹理的各个网格顶点的纹理坐标,生成第二局部纹理的各个网格顶点以及第二局部纹理的各个网格顶点的纹理坐标。

在另一种可行的实施方式中,再如图6c所示,图6c示出了目标图片是基于x轴的方向进行对称的情况下(即目标对称轴是x轴的情况下),如何通过第一局部纹理的局部网格生成第二局部纹理的局部网格的原理。

此处,第一局部纹理的网格顶点可以包括网格顶点b7、网格顶点b8、网格顶点b9以及网格顶点b10,网格顶点b7的纹理坐标可以是(0,1),网格顶点b8的纹理坐标可以是(1,1),网格顶点b9的纹理坐标可以是(1,0),网格顶点b10的纹理坐标可以是(0,0)。

因此,同理,渲染设备可以生成与网格顶点b7基于x轴的方向进行对称的网格顶点b11,生成与网格顶点b8基于x轴的方向进行对称的网格顶点12,生成的与网格顶点b10基于x轴的方向进行对称的网格顶点还是网格顶点b10自己,以及生成的与网格顶点b9基于x轴的方向进行对称的网格顶点还是网格顶点b9自己。即上述第二局部纹理的多个第一网格顶点,可以包括此处的网格顶点b9、网格顶点b10、网格顶点b11以及网格顶点b12。

因此,纹理设备可以将网格顶点b7的纹理坐标(0,1)设置为是网格顶点b11的纹理坐标,并可以将网格顶点b8的纹理坐标(1,1)设置为是网格顶点b12的纹理坐标,即与第一局部纹理的网格顶点基于x轴方向进行对称的第一网格顶点可以具有相同的纹理坐标。第二局部纹理的局部网格包含上述网格顶点b9、网格顶点b10、网格顶点b11以及网格顶点b12以及顶点为该网格顶点b9、网格顶点b10、网格顶点b11以及网格顶点b12的两个三角形。

通过上述过程,即通过第一局部纹理的局部网格生成了第二局部纹理的局部网格,第一局部纹理的局部网格和第二局部纹理的局部网格之间共用了网格顶点b9以及网格顶点b10这两个网格顶点。

请参见图7,图7是本申请提供的另一种针对网格的二分对称映射方法的流程示意图。本申请实施例中描述了,当目标图片的对称模式是二分对称模式,且对称参数是二分中心对称参数时,通过第一局部纹理的局部网格生成第二局部纹理的局部网格的过程。如图7所示,该方法可以包括:

步骤S301,将第一局部纹理的网格顶点旋转第一中心对称角度,生成第二局部纹理的第二网格顶点;第一局部纹理的一个网格顶点进行旋转后用于生成对应的一个第二网格顶点。

可选的,在目标图片是二分中心对称的图片时,二分中心对称参数可以用于指示上述第一中心对称角度,该第一中心对称角度可以是180度。此时,第一局部纹理可以是目标图片的一半图片的纹理。

渲染设备可以将第一局部纹理的网格顶点旋转该第一中心对称角度,即可生成此时第二局部纹理的网格顶点,可以将该网格顶点称之为是第二网格顶点,第一局部纹理的一个网格顶点进行旋转后用于生成对应的一个第二网格顶点。

步骤S302,将第一局部纹理的各个网格顶点的纹理坐标,设置为第一局部纹理的各个网格顶点对应的第二网格顶点的纹理坐标。

可选的,渲染设备可以将第一局部纹理的各个网格顶点的纹理坐标,分别设置为是第一局部纹理的各个网格顶点对应的第二网格顶点的纹理坐标。

换句话说,可以将第一局部纹理的任一网格顶点的纹理坐标,设置为是该任一网格顶点通过旋转180度后所生成的第二网格顶点的纹理坐标。

步骤S303,基于第二局部纹理的具有纹理坐标的第二网格顶点,生成第二局部纹理的局部网格。

可选的,渲染设备可以通过第二局部纹理的具有纹理坐标的第二网格顶点,生成第二局部纹理的局部网格。其中,确定了第二局部纹理的各个第二网格顶点,即可基于该各个第二网格顶点生成对应的网格三角形(可以简称三角形),该网格三角形的顶点也就是第二局部纹理的各个第二网格顶点,第二局部纹理的局部纹理就可以包含第二局部纹理的各个第二网格顶点以及顶点为该各个第二网格顶点的三角形。

请参见图8,图8是本申请提供的另一种图像裁剪的场景示意图。如图8所示,此处目标图片g1的对称模式可以是二分对称模式,对称参数可以是二分中心对称参数,即目标图片g1为二分中心对称的图片。

可以对目标图片g1的上半部分的图片进行裁剪处理,得到目标图片g1的局部图片g2,该局部图片g2即可以为目标图片g1的上半部分的图像,对该局部图片g2旋转180度,即可得到目标图片g2的另一半图片(即目标图片g2的下半部分的图片)。上述第一局部纹理就可以是该局部图片g2的纹理,因此,可以理解的是,对该局部图片g2的局部纹理中的网格顶点旋转180度,即可生成目标图片g2的另一半图片的纹理(即第二局部纹理)的网格顶点(如上述第二网格顶点)。

通过上述过程,即通过第一局部纹理的局部网格生成了第二局部纹理的局部网格,第二局部纹理的局部网格中的网格顶点可以是对第一局部纹理的局部网格中的网格顶点旋转第一中心对称角度后得到的。

请参见图9,图9是本申请提供的一种针对网格的四分对称映射方法的流程示意图。本申请实施例中描述了,当目标图片的对称模式是四分对称模式,且对称参数是四分轴对称参数时,通过第一局部纹理的局部网格生成第二局部纹理的局部网格的过程。如图9所示,该方法可以包括:

步骤S401,基于第一对称轴,对第一局部纹理的网格顶点进行对称处理,生成第三局部纹理的第三网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为与第一局部纹理的网格顶点基于第一对称轴进行对称的第三网格顶点的纹理坐标。

具体的,此种场景下,目标图片可以具有第一对称轴和第二对称轴两个对称轴,第一对称轴可以是上述第一坐标轴(即x轴),第二对称轴可以是上述第二坐标轴(即y轴)。目标图片可以基于该第一对称轴的方向以及该第二对称轴的方向被均衡地分为4个部分。

可选的,四分轴对称参数还可以包含第一局部纹理在全局纹理中的分布信息,由于目标图片可以被进行四分,因此目标图片的全局纹理也可以被四分,分为四个局部纹理,因此,可以理解为该四个局部纹理分布在4个象限(包括第一象限、第二象限、第三象限以及第四象限)中,目标图片中右上部分的1/4局部图片的纹理可以理解为是分布在第一象限的,目标图片中左上部分的1/4局部图片的纹理可以理解为是分布在第二象限的,目标图片中左下部分的1/4局部图片的纹理可以理解为是分布在第三象限的,目标图片中右下部分的1/4局部图片的纹理可以理解为是分布在第四象限的。因此,第一局部纹理的分布信息可以用于指示第一局部纹理分布在全局纹理中的哪个象限。

渲染设备可以通过第一对称轴,对第一局部纹理的网格顶点进行对称处理,以生成相应的网格顶点,可以将通过第一对称轴对第一局部纹理的网格顶点进行对称处理所生成的网格顶点作为是上述第三局部纹理的网格顶点,可以将该网格顶点称之为是第三网格顶点。

其中,第一局部纹理的一个网格顶点用于基于第一对称轴进行对称处理,以生成一个第三网格顶点,该第三网格顶点就与第一局部纹理的该网格顶点之间基于第一对称轴的方向进行对称。

渲染设备还可以将第一局部纹理的网格顶点的纹理坐标,设置为是与该第一局部纹理的网格顶点基于第一对称轴进行对称的第三网格顶点的纹理坐标。换句话说,渲染设备可以将第一局部纹理的任一网格顶点的纹理坐标,设置为是对该任一网格顶点基于第一对称轴进行对称处理所得到的第三网格顶点的纹理坐标。

其中,若第一局部纹理分布在第二象限,则渲染设备可以基于第一对称轴(如x轴),对第一局部纹理的网格顶点进行向下对称处理,以生成第三局部纹理的第三网格顶点,此种情况下,第三局部纹理就可以分布在第三象限(即第三局部纹理所属局部图片为目标图片的左下1/4部分的图片)。

步骤S402,基于第二对称轴,对第一局部纹理的网格顶点进行对称处理,生成第四局部纹理的第四网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为与第一局部纹理的网格顶点基于第二对称轴进行对称的第四网格顶点的纹理坐标。

同理,渲染设备还可以通过第二对称轴,对第一局部纹理的网格顶点进行对称处理,以生成相应的网格顶点,可以将通过第二对称轴对第一局部纹理的网格顶点进行对称处理所生成的网格顶点,作为是上述第四局部纹理的网格顶点,可以将该网格顶点称之为是第四网格顶点。

其中,第一局部纹理的一个网格顶点用于基于第二对称轴进行对称处理,以生成一个第四网格顶点,该第四网格顶点就与第一局部纹理的该个网格顶点之间基于第二对称轴的方向进行对称。

渲染设备还可以将第一局部纹理的网格顶点的纹理坐标,设置为是与该第一局部纹理的网格顶点基于第二对称轴进行对称的第四网格顶点的纹理坐标。换句话说,渲染设备可以将第一局部纹理的任一网格顶点的纹理坐标,设置为是对该任一网格顶点基于第二对称轴进行对称处理所得到的第四网格顶点的纹理坐标。

其中,若第一局部纹理分布在第二象限,则渲染设备可以基于第二对称轴(如y轴),对第一局部纹理的网格顶点进行向右对称处理,以生成第四局部纹理的第四网格顶点,此种情况下,第四局部纹理就可以分布在第一象限(即第四局部纹理所属局部图片为目标图片的右上1/4部分的图片)。

步骤S403,基于第一对称轴以及第二对称轴对第一局部纹理的网格顶点进行对称处理,生成第五局部纹理的第五网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为与第一局部纹理的网格顶点基于第一对称轴以及第二对称轴均进行对称的第五网格顶点的纹理坐标。

进一步地,渲染设备还可以通过上述第一对称轴以及第二对称轴,对第一局部纹理的网格顶点进行对称处理,以生成相应的网格顶点,可以将通过第一对称轴以及第二对称轴对第一局部纹理的网格顶点进行对称处理所生成的网格顶点,作为是上述第五局部纹理的网格顶点,可以将该网格顶点称之为是第五网格顶点。

其中,第一局部纹理的一个网格顶点用于基于第一对称轴以及第二对称轴进行对称处理,以生成一个第五网格顶点,该第五网格顶点就是对第一局部纹理的该个网格顶点基于第一对称轴进行轴对称处理的基础上再基于第二对称轴进行轴对称处理后所得到的,或者该第五网格顶点也可以是对第一局部纹理的该个网格顶点基于第二对称轴进行轴对称处理的基础上再基于第一对称轴进行轴对称处理后所得到的。

渲染设备还可以将第一局部纹理的网格顶点的纹理坐标,设置为基于第一对称轴和第二对称轴对第一局部纹理的网格顶点进行对称处理后所生成的第五网格顶点的纹理坐标。换句话说,渲染设备可以将第一局部纹理的任一网格顶点的纹理坐标,设置为是对该任一网格顶点基于第一对称轴以及第二对称轴进行对称处理所得到的第五网格顶点的纹理坐标。

其中,若第一局部纹理分布在第二象限,则渲染设备可以对第一局部纹理的网格顶点基于第一对称轴进行向下的对称处理后,再基于第二对称轴进行向右的对称处理后,以生成第五局部纹理的第五网格顶点,或者,渲染设备也可以对第一局部纹理的网格顶点基于第二对称轴进行向右的对称处理后,再基于第一对称轴进行向下的对称处理后,以生成第五局部纹理的第五网格顶点。此种情况下,第五局部纹理就可以分布在第四象限(即第五局部纹理所属局部图片为目标图片的右下1/4部分的图片)。

步骤S404,基于第三局部纹理的具有纹理坐标的第三网格顶点,生成第三局部纹理的局部网格,并基于第四局部纹理的具有纹理坐标的第四网格顶点,生成第四局部纹理的局部网格,以及基于第五局部纹理的具有纹理坐标的第五网格顶点,生成第五局部纹理的局部网格。

可选的,渲染设备可以通过第三局部纹理的具有纹理坐标的第三网格顶点,生成第三局部纹理的局部网格,第三局部纹理的局部网格就可以包含具有纹理坐标的各个第三网格顶点以及以各个第三网格顶点作为顶点的三角形。

渲染设备还可以通过第四局部纹理的具有纹理坐标的第四网格顶点,生成第四局部纹理的局部网格,第四局部纹理的局部网格就可以包含具有纹理坐标的各个第四网格顶点以及以各个第四网格顶点作为顶点的三角形。

同理,渲染设备还可以通过第五局部纹理的具有纹理坐标的第五网格顶点,生成第五局部纹理的局部网格,第五局部纹理的局部网格就可以包含具有纹理坐标的各个第五网格顶点以及以各个第五网格顶点作为顶点的三角形。

请参见图10a-图10b,图10a-图10b是本申请提供的另一种生成局部网格的场景示意图。如图10a所示,此处,框c2中配置了目标图片的相关类型参数(如对称类型相关的参数),该参数可以用于指示目标图片c1的对称模式可以是四分对称模式,对称参数可以是四分轴对称参数,即目标图片c1可以是四分轴对称的图片,可以对目标图片c1进行裁剪处理,得到目标图片c1的局部图片c3,该局部图片c3可以是目标图片中左上1/4部分的局部图片,可以将该局部图片c3的纹理作为是上述第一局部纹理,即第一局部纹理可以是分布在第二象限的。

再如图10b所示,第一局部纹理的局部网格可以包含网格顶点d1、网格顶点d2、网格顶点d3以及网格顶点d4。其中,网格顶点d1的纹理坐标可以是(1,1),网格顶点d2的纹理坐标可以是(1,0),网格顶点d3的纹理坐标可以是(0,0),网格顶点d4的纹理坐标可以是(0,1)。

其中,基于第一对称轴,对网格顶点d1进行对称处理,生成的第三网格顶点可以是网格顶点d5,因此,网格顶点d5的纹理坐标可以与网格顶点d1的纹理坐标是相同的;基于第一对称轴,对网格顶点d4进行对称处理,生成的第三网格顶点可以是网格顶点d6,因此,网格顶点d6的纹理坐标可以与网格顶点d4的纹理坐标是相同的;基于第一对称轴,对网格顶点d2进行对称处理,生成的第三网格顶点还是网格顶点d2自己,基于第一对称轴,对网格顶点d3进行对称处理,生成的第三网格顶点也是网格顶点d3自己。

通过上述过程,就生成了第三局部纹理的各个第三网格顶点(包括网格顶点d2、网格顶点d3、网格顶点d5、网格顶点d6),第三局部纹理与第一局部纹理共用网格顶点d2以及网格顶点d3这两个网格顶点。

同理,基于第二对称轴,对网格顶点d1进行对称处理,生成的第四网格顶点可以是网格顶点d8,因此,网格顶点d8的纹理坐标可以与网格顶点d1的纹理坐标是相同的;基于第二对称轴,对网格顶点d2进行对称处理,生成的第四网格顶点可以是网格顶点d9,因此,网格顶点d9的纹理坐标可以与网格顶点d2的纹理坐标是相同的;基于第二对称轴,对网格顶点d3进行对称处理,生成的第四网格顶点还是网格顶点d3自己,基于第二对称轴,对网格顶点d4进行对称处理,生成的第四网格顶点也是网格顶点d4自己。

通过上述过程,就生成了第四局部纹理的各个第四网格顶点(包括网格顶点d3、网格顶点d4、网格顶点d8、网格顶点d9),第四局部纹理与第一局部纹理共用网格顶点d3以及网格顶点d4这两个网格顶点。

更多的,渲染设备基于第一对称轴以及第二对称轴,对网格顶点d1进行对称处理,生成的第五网格顶点可以是网格顶点d7,因此,网格顶点d7的纹理坐标可以与网格顶点d1的纹理坐标是相同的;渲染设备基于第一对称轴以及第二对称轴,对网格顶点d2进行对称处理,生成的第五网格顶点可以是网格顶点d9(因为通过第一对称轴进行对称处理后的位置是网格顶点d2处的位置,再基于第二对称轴对网格顶点d2处的位置进行对称处理,可以得到网格顶点d9的位置),因此,网格顶点d9的纹理坐标可以与网格顶点d2的纹理坐标是相同的。

同理,渲染设备基于第一对称轴以及第二对称轴,对网格顶点d4进行对称处理,生成的第五网格顶点可以是网格顶点d6,因此,网格顶点d6的纹理坐标可以与网格顶点d4的纹理坐标是相同的;渲染设备基于第一对称轴以及第二对称轴,对网格顶点d3进行对称处理,生成的第五网格顶点可以是网格顶点d3自己。

通过上述过程,即生成了第五局部纹理的各个第五网格顶点(包括网格顶点d3、网格顶点d6、网格顶点d7、网格顶点d9),第五局部纹理与第一局部纹理共用网格顶点d3这一个网格顶点。

通过上述过程,即通过第一局部纹理的局部网格准确且快速地生成了其他各个局部纹理的局部网格。

请参见图11,图11是本申请提供的另一种针对网格的四分对称映射方法的流程示意图。本申请实施例中描述了,当目标图片的对称模式是四分对称模式,且对称参数是四分中心对称参数时,通过第一局部纹理的局部网格生成第二局部纹理的局部网格的过程。如图11所示,该方法可以包括:

步骤S501,将第一局部纹理的网格顶点旋转第二中心对称角度,生成第三局部纹理的第六网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为将第一局部纹理的网格顶点进行旋转后所生成的第六网格顶点的纹理坐标。

具体的,第二中心对称角度可以是90度。渲染设备可以将第一局部纹理的网格顶点旋转该第二中心对称角度,以生成相应的网格顶点,此处,可以将对第一局部纹理的网格顶点旋转该第二中心对称角度后所生成的网格顶点作为是第三局部纹理的网格顶点,可以将该网格顶点称之为是第六网格顶点。

其中,第一局部纹理的任一网格顶点用于旋转该第二中心对称角度后,生成对应的一个第六网格顶点。

渲染设备可以将第一局部纹理的各个网格顶点的纹理坐标,分别作为是第一局部纹理的各个网格顶点对应的第六网格顶点的纹理坐标。换句话说,渲染设备可以将第一局部纹理的任一网格顶点的纹理坐标,作为是对该任一网格顶点旋转第二中心对称角度后所生成的第六网格顶点的纹理坐标。

可选的,四分中心对称参数也可以包含第一局部纹理在全局纹理中的分布信息,由于目标图片可以被进行四分,因此目标图片的全局纹理也可以被四分,分为四个局部纹理,因此,可以理解为该四个局部纹理分布在4个象限(包括第一象限、第二象限、第三象限以及第四象限)中,目标图片中右上部分的1/4局部图片的纹理可以理解为是分布在第一象限的,目标图片中左上部分的1/4局部图片的纹理可以理解为是分布在第二象限的,目标图片中左下部分的1/4局部图片的纹理可以理解为是分布在第三象限的,目标图片中右下部分的1/4局部图片的纹理可以理解为是分布在第四象限的。因此,第一局部纹理的分布信息可以用于指示第一局部纹理分布在全局纹理中的哪个象限。

若第一局部纹理分布在第二象限,则可以对第一局部纹理的网格顶点向右旋转90度后(如可以理解为是以第一局部纹理的右下角的位置进行旋转的,第一局部纹理的右下角的位置可以是全局纹理的中心位置),生成第三局部纹理的第六网格顶点,第三局部纹理此时可以分布在第一象限。

步骤S502,将第一局部纹理的网格顶点旋转第三中心对称角度,生成第四局部纹理的第七网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为将第一局部纹理的网格顶点进行旋转后所生成的第七网格顶点的纹理坐标。

可选的,第二中心对称角度可以是180度。渲染设备可以将第一局部纹理的网格顶点旋转该第三中心对称角度,以生成相应的网格顶点,此处,可以将对第一局部纹理的网格顶点旋转该第三中心对称角度后所生成的网格顶点作为是第四局部纹理的网格顶点,可以将该网格顶点称之为是第七网格顶点。

其中,第一局部纹理的任一网格顶点用于旋转该第三中心对称角度后,生成对应的一个第七网格顶点。

渲染设备可以将第一局部纹理的各个网格顶点的纹理坐标,分别作为是第一局部纹理的各个网格顶点对应的第七网格顶点的纹理坐标。换句话说,渲染设备可以将第一局部纹理的任一网格顶点的纹理坐标,作为是对该任一网格顶点旋转第三中心对称角度后所生成的第七网格顶点的纹理坐标。

若第一局部纹理分布在第二象限,则可以对第一局部纹理的网格顶点向右旋转180度后(如也可以理解为是以第一局部纹理的右下角的位置点为旋转点进行旋转的),生成第四局部纹理的第七网格顶点,第四局部纹理此时可以分布在第四象限。

步骤S503,将第一局部纹理的网格顶点旋转第四中心对称角度,生成第五局部纹理的第八网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为将第一局部纹理的网格顶点进行旋转后所生成的第八网格顶点的纹理坐标。

可选的,第四中心对称角度可以是270度。渲染设备可以将第一局部纹理的网格顶点旋转该第四中心对称角度,以生成相应的网格顶点,此处,可以将对第一局部纹理的网格顶点旋转该第四中心对称角度后所生成的网格顶点作为是第五局部纹理的网格顶点,可以将该网格顶点称之为是第八网格顶点。

其中,第一局部纹理的任一网格顶点用于旋转该第四中心对称角度后,生成对应的一个第八网格顶点。

渲染设备可以将第一局部纹理的各个网格顶点的纹理坐标,分别作为是第一局部纹理的各个网格顶点对应的第八网格顶点的纹理坐标。换句话说,渲染设备可以将第一局部纹理的任一网格顶点的纹理坐标,作为是对该任一网格顶点旋转第四中心对称角度后所生成的第八网格顶点的纹理坐标。

若第一局部纹理分布在第二象限,则可以对第一局部纹理的网格顶点向右旋转270度后(如也可以理解为是以第一局部纹理的右下角的位置点为旋转点进行旋转的),生成第五局部纹理的第八网格顶点,第五局部纹理此时可以分布在第三象限。

步骤S504,基于第三局部纹理的具有纹理坐标的第六网格顶点,生成第三局部纹理的局部网格,并基于第四局部纹理的具有纹理坐标的第七网格顶点,生成第四局部纹理的局部网格,以及基于第五局部纹理的具有纹理坐标的第八网格顶点,生成第五局部纹理的局部网格。

可选的,渲染设备可以通过第三局部纹理的具有纹理坐标的第六网格顶点,生成第三局部纹理的局部网格,第三局部纹理的局部网格就可以包含具有纹理坐标的各个第六网格顶点以及以各个第六网格顶点作为顶点的三角形。

渲染设备还可以通过第四局部纹理的具有纹理坐标的第七网格顶点,生成第四局部纹理的局部网格,第四局部纹理的局部网格就可以包含具有纹理坐标的各个第七网格顶点以及以各个第七网格顶点作为顶点的三角形。

同理,渲染设备还可以通过第五局部纹理的具有纹理坐标的第八网格顶点,生成第五局部纹理的局部网格,第五局部纹理的局部网格就可以包含具有纹理坐标的各个第八网格顶点以及以各个第八网格顶点作为顶点的三角形。

请参见图12a-图12b,图12a-图12b是本申请提供的又一种生成局部网格的场景示意图。如图12a所示,此处,框e2中配置了目标图片的相关类型参数(如对称类型相关的参数),该参数可以用于指示目标图片e1的对称模式可以是四分对称模式,对称参数可以是四分中心对称参数,即目标图片e1可以是四分中心对称的图片,可以对目标图片e1进行裁剪处理,得到目标图片e1的局部图片e3,该局部图片e3可以是目标图片中左下1/4部分的局部图片,可以将该局部图片e3的纹理作为是上述第一局部纹理,即第一局部纹理可以是分布在第三象限(Third)的。

再如图12b所示,第一局部纹理的局部网格可以包含网格顶点f1、网格顶点f2、网格顶点f3以及网格顶点f4。其中,该网格顶点f1的纹理坐标可以是(1,0),该网格顶点f2的纹理坐标可以是(0,0),该网格顶点f3的纹理坐标可以是(0,1),该网格顶点f4的纹理坐标可以是(1,1)。

其中,对网格顶点f1向右旋转第二中心对称角度后,生成的第六网格顶点可以是网格顶点f6,因此,网格顶点f6的纹理坐标可以与网格顶点f1的纹理坐标是相同的;对网格顶点f2向右旋转第二中心对称角度后,生成的第六网格顶点是网格顶点f2自己;对网格顶点f3向右旋转第二中心对称角度后,生成的第六网格顶点可以是网格顶点f7,因此,网格顶点f7的纹理坐标可以与网格顶点f3的纹理坐标是相同的;对网格顶点f4向右旋转第二中心对称角度后,生成的第六网格顶点可以是网格顶点f5,因此,网格顶点f5的纹理坐标可以与网格顶点f4的纹理坐标是相同的。

通过上述过程,即生成了第三局部纹理的各个第六网格顶点,第三局部纹理可以与第一局部纹理共用网格顶点f2这一个网格顶点。

同理,对网格顶点f1向右旋转第三中心对称角度后,生成的第七网格顶点可以是网格顶点f10,因此,网格顶点f10的纹理坐标可以与网格顶点f1的纹理坐标是相同的;对网格顶点f2向右旋转第三中心对称角度后,生成的第七网格顶点是网格顶点f2自己;对网格顶点f3向右旋转第三中心对称角度后,生成的第七网格顶点可以是网格顶点f8,因此,网格顶点f8的纹理坐标可以与网格顶点f3的纹理坐标是相同的;对网格顶点f4向右旋转第三中心对称角度后,生成的第七网格顶点可以是网格顶点f9,因此,网格顶点f9的纹理坐标可以与网格顶点f4的纹理坐标是相同的。

通过上述过程,即生成了第四局部纹理的各个第七网格顶点,第四局部纹理可以与第一局部纹理共用网格顶点f2这一个网格顶点。

更多的,对网格顶点f1向右旋转第四中心对称角度后,生成的第八网格顶点可以是网格顶点f13,因此,网格顶点f13的纹理坐标可以与网格顶点f1的纹理坐标是相同的;对网格顶点f2向右旋转第四中心对称角度后,生成的第八网格顶点是网格顶点f2自己;对网格顶点f3向右旋转第四中心对称角度后,生成的第八网格顶点可以是网格顶点f11,因此,网格顶点f11的纹理坐标可以与网格顶点f3的纹理坐标是相同的;对网格顶点f4向右旋转第四中心对称角度后,生成的第八网格顶点可以是网格顶点f12,因此,网格顶点f12的纹理坐标可以与网格顶点f4的纹理坐标是相同的。

通过上述过程,即生成了第五局部纹理的各个第八网格顶点,第五局部纹理可以与第一局部纹理共用网格顶点f2这一个网格顶点。

其中,还可以对基于上述过程所生成的各个局部纹理的局部网格进行组合放置,组合放置后,同一个位置可以具有一个或者两个纹理坐标(分别属于不同的局部纹理)。

通过上述过程,即通过第一局部纹理的局部网格准确且快速地生成了其他各个局部纹理的局部网格。

请参见图13,图13是本申请提供的一种纹理集的界面示意图。如图13所示,对于规则性的纹理(即属于规则性的图片的全局纹理),均可以在纹理集中存在该纹理的部分纹理(如1/2或者1/4),这大大减少了纹理集的数据量。

通过本申请提供的上述方法,即可实现通过目标图片的局部纹理快速渲染并显示出目标图片的过程。本申请中,通过采用纹理对称剪裁的方法成倍缩小纹理尺寸,进而缩小图集(如纹理所在的纹理集)的尺寸,在不降低贴图(即纹理贴图)质量(使得渲染显示的目标图片不会失真)的前提下提高了游戏中UI的加载速度,减小了UI打开时的内存(共享显存)占用,前端运行的游戏包体也会相应减小,因此,还可以提升前端游戏运行的性能。此外,本申请提供的方法还具有良好的易用性,通过一些简单的设置(如对目标图片的一些对称模式以及对称参数的设置、以及通过目标图片的局部纹理的局部网格生成其他各个局部纹理的局部网格的相关逻辑配置)即可启用该方法,而无需编写复杂的代码或使用额外的渲染插件来实现。

更多的,本申请中提供的上述贴图渲染的方法,可以是通过上述Unity3D实现的,Unity3D的UGUI可以具有Image组件,该Image组件可以是一个用于显示图片的基本UI元素,该Image 组件可以继承自MaskableGraphic类(一种图像处理的抽象类),用于处理图片的显示、渲染,以及网格(Mesh)的生成以及渲染。

本申请可以在Unity3D中额外复写(即新增)两种需要渲染的图片类型,一种是二分对称模式的(包括二分轴对称和二分中心对称)的图片类型,一种是四分对称模式(包括四分轴对称和四分中心对称)的图片类型,进而,可以为不同类型的图片设置不同的对称参数,后续就可以通过各种类型的图片不同的对称参数,实现对各种类型的图片的相应渲染。

本申请中,首先,可以通过Unity3D中的OnPopulateMesh方法(一种钩子函数)生成Mesh(如生成目标图片的各个局部纹理的局部网格),生成的该Mesh会在Graphic(图案)的Rebuild方法(一种重建方法)被调用,为CanvasRenderer(渲染器)的Mesh提供了顶点(包括各个局部纹理的网格顶点)的顶点位置、顶点颜色、UV坐标以及三角形信息(如网格三角形)。其中,在OnPopulateMesh方法中,可以根据对图片设置的不同类型(如不同对称模式的类型),来基于加载的局部纹理(如第一局部纹理)生成其他各个局部纹理相应的顶点、顶点颜色、UV和三角形信息。最终,可以由CanvasRenderer通过上述生成的Mesh来负责Image(如目标图片) 的渲染,以渲染显示完整的目标图片。

本申请中,可以重写Unity3D中的上述OnPopulateMesh方法,来自定义添加顶点以及三角形等(如自定义通过第一局部纹理的网格顶点以及三角形生成其他局部纹理的网格顶点以及三角形的方法),从而实现Symmetry(二分对称模式)和Sector(四分对称模式)的自定义UI元素的显示方式。

此外,本申请还可以修改Unity UGUI的原生代码,以使得对图片的相关配置(如对称参数的配置)可以基于相应的配置界面进行可视化显示,通过该配置界面可以提供对图片相关参数进行配置的选择项(如对称模式的选择项、对称方法(如轴对称还是中心对称)的选择项以及对称方法下的具体对称参数(如对称轴)的选择项,等等)以及对裁剪后的图片的效果预览(如对第一局部纹理所属局部图片的预览),如该配置界面可以显示上述图8、图10a以及图12a中所示的内容,因此,使得相关技术人员对图片进行相关参数配置的过程也会更加便捷。

请参见图14,图14是本申请提供的一种图片渲染装置的结构示意图。如图14所示,该图片渲染装置140可以包括:第一获取模块1401、第二获取模块1402、映射模块1403和渲染模块1404。

第一获取模块1401,用于获取待渲染的目标图片的规则性参数;规则性参数用于表征目标图片的规则性;

第二获取模块1402,用于获取目标图片的第一局部纹理;目标图片的全局纹理按照目标图片的规则性被切分为多个局部纹理,第一局部纹理是多个局部纹理中的任一局部纹理;

映射模块1403,用于基于规则性参数对第一局部纹理的局部网格进行映射处理,得到多个局部纹理中除第一局部纹理之外的各个局部纹理的局部网格;

渲染模块1404,用于基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染目标图片。

可选的,目标图片的规则性包括对称性,规则性参数包括目标图片的对称模式及对称模式下的对称参数;

对称模式包括以下任一种:二分对称模式、四分对称模式;

若对称模式为二分对称模式,则对称参数包括以下任一种:二分轴对称参数、二分中心对称参数;

若对称模式为四分对称模式,则对称参数包括以下任一种:四分轴对称参数、四分中心对称参数。

可选的,上述装置140还用于:

基于第一局部纹理,生成第一局部纹理的局部网格;

其中,第一局部纹理的局部网格包含第一局部纹理的网格顶点,第一局部纹理的网格顶点具有在第一局部纹理上对应的纹理坐标。

可选的,对称模式为二分对称模式,目标图片的全局纹理被切分为第一局部纹理和第二局部纹理,第一局部纹理与第二局部纹理相互对称;

映射模块1403基于规则性参数对第一局部纹理的局部网格进行映射处理,得到多个局部纹理中除第一局部纹理之外的各个局部纹理的局部网格的方式,包括:

基于规则性参数,对第一局部纹理的局部网格进行二分对称映射处理,生成第二局部纹理的局部网格。

可选的,对称参数包括二分轴对称参数,且二分轴对称参数包括目标图片的目标对称轴;映射模块1403基于规则性参数,对第一局部纹理的局部网格进行二分对称映射处理,生成第二局部纹理的局部网格的方式,包括:

基于目标对称轴,对第一局部纹理的网格顶点进行轴对称处理,生成第二局部纹理的第一网格顶点;

将第一局部纹理的网格顶点的纹理坐标,设置为与第一局部纹理的网格顶点基于目标对称轴进行对称的第一网格顶点的纹理坐标;

基于第二局部纹理的具有纹理坐标的第一网格顶点,生成第二局部纹理的局部网格。

可选的,对称参数包括二分中心对称参数,且二分中心对称参数用于指示关联的第一中心对称角度;映射模块1403基于规则性参数,对第一局部纹理的局部网格进行二分对称映射处理,生成第二局部纹理的局部网格的方式,包括:

将第一局部纹理的网格顶点旋转第一中心对称角度,生成第二局部纹理的第二网格顶点;第一局部纹理的一个网格顶点进行旋转后用于生成对应的一个第二网格顶点;

将第一局部纹理的各个网格顶点的纹理坐标,设置为第一局部纹理的各个网格顶点对应的第二网格顶点的纹理坐标;

基于第二局部纹理的具有纹理坐标的第二网格顶点,生成第二局部纹理的局部网格。

可选的,对称模式为四分对称模式,目标图片的全局纹理被切分为第一局部纹理、第三局部纹理、第四局部纹理和第五局部纹理,且各个局部纹理相互对称;

映射模块1403基于规则性参数对第一局部纹理的局部网格进行映射处理,得到多个局部纹理中除第一局部纹理之外的各个局部纹理的局部网格的方式,包括:

基于规则性参数,对第一局部纹理的局部网格进行四分对称映射处理,生成第三局部纹理的局部网格、第四局部纹理的局部网格以及第五局部纹理的局部网格。

可选的,对称参数包括四分轴对称参数,且四分轴对称参数包括目标图片的第一对称轴和第二对称轴;映射模块1403基于规则性参数,对第一局部纹理的局部网格进行四分对称映射处理,生成第三局部纹理的局部网格、第四局部纹理的局部网格以及第五局部纹理的局部网格的方式,包括:

基于第一对称轴,对第一局部纹理的网格顶点进行对称处理,生成第三局部纹理的第三网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为与第一局部纹理的网格顶点基于第一对称轴进行对称的第三网格顶点的纹理坐标;

基于第二对称轴,对第一局部纹理的网格顶点进行对称处理,生成第四局部纹理的第四网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为与第一局部纹理的网格顶点基于第二对称轴进行对称的第四网格顶点的纹理坐标;

基于第一对称轴以及第二对称轴对第一局部纹理的网格顶点进行对称处理,生成第五局部纹理的第五网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为与第一局部纹理的网格顶点基于第一对称轴以及第二对称轴均进行对称的第五网格顶点的纹理坐标;

基于第三局部纹理的具有纹理坐标的第三网格顶点,生成第三局部纹理的局部网格,并基于第四局部纹理的具有纹理坐标的第四网格顶点,生成第四局部纹理的局部网格,以及基于第五局部纹理的具有纹理坐标的第五网格顶点,生成第五局部纹理的局部网格。

可选的,对称参数包括四分中心对称参数,且四分中心对称参数用于指示关联的第二中心对称角度、第三中心对称角度和第四中心对称角度;映射模块1403基于规则性参数,对第一局部纹理的局部网格进行四分对称映射处理,生成第三局部纹理的局部网格、第四局部纹理的局部网格以及第五局部纹理的局部网格的方式,包括:

将第一局部纹理的网格顶点旋转第二中心对称角度,生成第三局部纹理的第六网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为将第一局部纹理的网格顶点进行旋转后所生成的第六网格顶点的纹理坐标;

将第一局部纹理的网格顶点旋转第三中心对称角度,生成第四局部纹理的第七网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为将第一局部纹理的网格顶点进行旋转后所生成的第七网格顶点的纹理坐标;

将第一局部纹理的网格顶点旋转第四中心对称角度,生成第五局部纹理的第八网格顶点,并将第一局部纹理的网格顶点的纹理坐标,设置为将第一局部纹理的网格顶点进行旋转后所生成的第八网格顶点的纹理坐标;

基于第三局部纹理的具有纹理坐标的第六网格顶点,生成第三局部纹理的局部网格,并基于第四局部纹理的具有纹理坐标的第七网格顶点,生成第四局部纹理的局部网格,以及基于第五局部纹理的具有纹理坐标的第八网格顶点,生成第五局部纹理的局部网格。

可选的,多个局部纹理中各个局部纹理的局部网格中分别包含该各个局部纹理的网格顶点;多个局部纹理中各个局部纹理的网格顶点的纹理坐标,均属于第一局部纹理上的纹理坐标;

渲染模块1404基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染目标图片的方式,包括:

基于多个局部纹理中各个局部纹理的网格顶点的纹理坐标,分别在第一局部纹理中进行颜色采样,得到多个局部纹理中各个局部纹理的网格顶点的像素颜色;

基于多个局部纹理中各个局部纹理的网格顶点的像素颜色,对多个局部纹理中各个局部纹理的网格顶点进行上色处理,以渲染显示多个局部纹理中各个局部纹理所属的局部图片;

其中,目标图片是由多个局部纹理中各个局部纹理所属的局部图片构成。

可选的,全局纹理是收缩图片的纹理,收缩图片是对目标图片的中心位置处的图片进行收缩处理后得到的;

渲染模块1404基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染目标图片的方式,包括:

基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染收缩图片;

对渲染的收缩图片的中心位置处的图片进行拉伸处理,得到目标图片。

可选的,上述装置140还用于:

获取游戏中需引用全局纹理进行渲染显示的目标游戏控件;

将目标游戏控件的渲染显示方式,更新为基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格进行渲染显示的方式;

其中,目标图片是需渲染显示的目标游戏控件的图片。

根据本申请的一个实施例,图2所示的图片渲染方法所涉及的步骤可由图14所示的图片渲染装置140中的各个模块来执行。例如,图2中所示的步骤S101可由图14中的第一获取模块1401来执行,图2中所示的步骤S102可由图14中的第二获取模块1402来执行;图2中所示的步骤S103可由图14中的映射模块1403来执行;图2中所示的步骤S104可由图14中的映射模块1404来执行。

本申请可以获取待渲染的目标图片的规则性参数;规则性参数用于表征目标图片的规则性;获取目标图片的第一局部纹理;目标图片的全局纹理按照目标图片的规则性被切分为多个局部纹理,第一局部纹理是多个局部纹理中的任一局部纹理;基于规则性参数对第一局部纹理的局部网格进行映射处理,得到多个局部纹理中除第一局部纹理之外的各个局部纹理的局部网格;基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染目标图片。基于此,本申请提出的装置,可以基于目标图片所具有的规则性将目标图片的全局纹理切分为多个局部纹理,并可以通过第一局部纹理的局部网格来映射得到其他各个局部纹理的局部网格,进而,通过第一局部纹理以及各个局部纹理的局部网格,即可实现对目标图片的渲染,可见,本申请在渲染目标图片时,只需加载目标图片的一个局部纹理(如第一局部纹理)进行渲染,而无需加载目标图片的全局纹理,提升了对目标图片进行渲染时的纹理加载速度,从而也提升了对目标图片进行渲染的效率;此外,由于仅需存储图片的局部纹理,因此,可降低针对图片的纹理的内存存储压力,实现对内存的有效优化。

根据本申请的一个实施例,图14所示的图片渲染装置140中的各个模块可以分别或全部合并为一个或若干个单元来构成,或者其中的某个(些)单元还可以再拆分为功能上更小的多个子单元,可以实现同样的操作,而不影响本申请的实施例的技术效果的实现。上述模块是基于逻辑功能划分的,在实际应用中,一个模块的功能也可以由多个单元来实现,或者多个模块的功能由一个单元实现。在本申请的其它实施例中,图片渲染装置140也可以包括其它单元,在实际应用中,这些功能也可以由其它单元协助实现,并且可以由多个单元协作实现。

根据本申请的一个实施例,可以在通用计算机设备(该计算机设备可以包含中央处理单元(CPU)、随机存取存储介质(RAM)、只读存储介质(ROM)等处理元件和存储元件)上,运行能够执行本申请各实施例中所示的相应方法所涉及的各步骤的计算机程序,来构造如图14中所示的图片渲染装置140。上述计算机程序可以记载于如计算机可读记录介质上,且可以通过该计算机可读记录介质装载于上述计算机设备中,并在其中运行。

请参见图15,图15是本申请提供的一种计算机设备的结构示意图。如图15所示,计算机设备1000可以包括:处理器1001,网络接口1004和存储器1005,此外,在一些实施例中,计算机设备1000还可以包括:用户接口1003,和至少一个通信总线1002。其中,通信总线1002用于实现这些组件之间的连接通信。其中,用户接口1003可以包括显示屏(Display)、键盘(Keyboard),可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器,也可以是非不稳定的存储器(non-volatile memory),例如至少一个磁盘存储器。存储器1005可选的还可以是至少一个位于远离前述处理器1001的存储装置。如图15所示,作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及设备控制应用程序。

在图15所示的计算机设备1000中,网络接口1004可提供网络通讯功能;而用户接口1003主要用于为用户提供输入的接口;而处理器1001可以用于调用存储器1005中存储的设备控制应用程序,以实现:

获取待渲染的目标图片的规则性参数;规则性参数用于表征目标图片的规则性;

获取目标图片的第一局部纹理;目标图片的全局纹理按照目标图片的规则性被切分为多个局部纹理,第一局部纹理是多个局部纹理中的任一局部纹理;

基于规则性参数对第一局部纹理的局部网格进行映射处理,得到多个局部纹理中除第一局部纹理之外的各个局部纹理的局部网格;

基于第一局部纹理和多个局部纹理中各个局部纹理的局部网格,渲染目标图片。

应当理解,本申请实施例中所描述的计算机设备1000可执行本申请各实施例中对上述图片渲染方法的描述,也可执行前文图14所对应实施例中对上述图片渲染装置140的描述,在此不再赘述。另外,对采用相同方法的有益效果描述,也不再进行赘述。

此外,这里需要指出的是:本申请还提供了一种计算机可读存储介质,且计算机可读存储介质中存储有计算机程序,当处理器执行该计算机程序时,能够执行本申请各实施例中对图片渲染方法的描述,因此,这里将不再进行赘述。另外,对采用相同方法的有益效果描述,也不再进行赘述。对于本申请所涉及的计算机存储介质实施例中未披露的技术细节,请参照本申请方法实施例的描述。

作为示例,上述计算机程序可被部署在一个计算机设备上执行,或者被部署位于一个地点的多个计算机设备上执行,又或者,在分布在多个地点且通过通信网络互连的多个计算机设备上执行,分布在多个地点且通过通信网络互连的多个计算机设备可以组成区块链网络。

上述计算机可读存储介质可以是上述计算机设备的内部存储单元,例如计算机设备的硬盘或内存。该计算机可读存储介质也可以是该计算机设备的外部存储设备,例如该计算机设备上配备的插接式硬盘,智能存储卡(smart media card,SMC),安全数字(securedigital,SD)卡,闪存卡(flash card)等。进一步地,该计算机可读存储介质还可以既包括该计算机设备的内部存储单元也包括外部存储设备。该计算机可读存储介质用于存储该计算机程序以及该计算机设备所需的其他程序和数据。该计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的数据。

本申请提供了一种计算机程序产品,该计算机程序产品包括计算机程序,该计算机程序存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机程序,处理器执行该计算机程序,使得该计算机设备执行本申请各实施例中对上述图片渲染方法的描述,因此,这里将不再进行赘述。另外,对采用相同方法的有益效果描述,也不再进行赘述。对于本申请所涉及的计算机可读存储介质实施例中未披露的技术细节,请参照本申请方法实施例的描述。

本申请实施例的说明书和权利要求书及附图中的术语“第一”、“第二”等是用于区别不同对象,而非用于描述特定顺序。此外,术语“包括”以及它们任何变形,意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、装置、产品或设备没有限定于已列出的步骤或模块,而是可选地还包括没有列出的步骤或模块,或可选地还包括对于这些过程、方法、装置、产品或设备固有的其他步骤单元。

本领域普通技术人员可以意识到,结合本文中所公开的实施例描述的各示例的单元及算法步骤,能够以电子硬件、计算机软件或者二者的结合来实现,为了清楚地说明硬件和软件的可互换性,在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本申请的范围。

以上所揭露的仅为本申请较佳实施例而已,当然不能以此来限定本申请之权利范围,因此依本申请权利要求所作的等同变化,仍属本申请所涵盖的范围。

相关技术
  • 小程序的界面渲染方法、装置、电子设备和存储介质
  • 渲染立体图形线框的方法、装置、计算机设备和存储介质
  • 一种页面渲染方法、装置、设备和存储介质
  • 页面渲染方法、装置、计算机设备及存储介质
  • 在canvas中渲染数据的方法、装置、电子设备及存储介质
  • 一种图片渲染方法及图片渲染设备
  • 一种图片渲染方法及图片渲染设备
技术分类

06120116157191