文本信息的渲染方法和装置、存储介质、电子装置与流程

文档序号:15833521发布日期:2018-11-07 07:35阅读:164来源:国知局
文本信息的渲染方法和装置、存储介质、电子装置与流程

本发明涉及互联网领域,具体而言,涉及一种文本信息的渲染方法和装置、存储介质、电子装置。

背景技术

文字描边是绘制于文字周围的一条轮廓线,位于文字边框边缘的外围,在视觉上可以起到突出文字的作用,在游戏、电影、动漫、直播等场景中,经常运用文字描边以突出文本所承载的信息内容。

在相关技术中,可以通过ugui(unity引擎推出的一种ui系统)自带的组件实现文本描边,使用该组件,可在原顶点的基础上,在左上、右上、左下、右下四个偏移方向上各绘制一次与原文字相同的图形,最后叠加原文字以在视觉上形成描边的效果,如图1所示。

通过查看ugui已经公开的源码,可知该组件的实现方式是:在原顶点的基础上,在(x,y),(x,-y),(-x,y),(-x,-y)四个偏移方向上运用4次shadow组件在x轴上移动距离x、在y轴上移动距离y实现的,如图2所示的4个较浅颜色的“a”(即用于描边的文字),而shadow组件是在指定偏移处,以指定颜色绘制一个与原文字一样的文字模拟阴影效果,如图2中所示的较浅颜色的“a”,亦即outline组件是在shadow组件的基础上实现的,outline相当于4个不同偏移方向上的shadow,如图2所示是outline组件在较大描边值时的实现原理图。

采用ugui自带的组件来实现文本描边主要存在如下缺点:1)描边效果不连贯、不均匀,在上、下、左、右四个方向上描边存在断开的情况;2)顶点数量大幅增加,1个不描边的文字顶点数量为6个,运用这种方案后的文字顶点数量是30个(即相当于重复渲染了5次原文字),在文字较多的情况下会对移动设备的cpu及gpu造成较大性能压力;3)描边大小仅支持较小值,描边过大会导致断裂明显,不能从视觉上形成连贯的描边效果。

针对上述的问题,目前尚未提出有效的解决方案。



技术实现要素:

本发明实施例提供了一种文本信息的渲染方法和装置、存储介质、电子装置,以至少解决相关技术中对文字进行描边需要消耗较多终端运算资源的技术问题。

根据本发明实施例的一个方面,提供了一种文本信息的渲染方法,包括:获取到指示信息,指示信息用于指示在目标图像中渲染出具有描边的目标文本信息;响应于指示信息,通过对第一贴图进行采样得到第二贴图,第一贴图用于表示目标文本信息的笔画纹理,第二贴图用于表示目标文本信息的描边纹理;使用第二贴图在目标图像中渲染出具有描边的目标文本信息。

根据本发明实施例的另一方面,还提供了一种文本信息的渲染装置,包括:获取单元,用于获取到指示信息,指示信息用于指示在目标图像中渲染出具有描边的目标文本信息;采样单元,用于响应于指示信息,通过对第一贴图进行采样得到第二贴图,第一贴图用于表示目标文本信息的笔画纹理,第二贴图用于表示目标文本信息的描边纹理;渲染单元,用于使用第二贴图在目标图像中渲染出具有描边的目标文本信息。

根据本发明实施例的另一方面,还提供了一种存储介质,该存储介质包括存储的程序,程序运行时执行上述的方法。

根据本发明实施例的另一方面,还提供了一种电子装置,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,处理器通过计算机程序执行上述的方法。

在本发明实施例中,获取到指示信息,指示信息用于指示在目标图像中渲染出具有描边的目标文本信息;通过对第一贴图进行采样得到第二贴图,第一贴图用于表示目标文本信息的笔画纹理,第二贴图用于表示目标文本信息的描边纹理;使用第二贴图在目标图像中渲染出具有描边的目标文本信息,换言之,在本申请的实施例中,可以仅对第二贴图渲染一次,而不是相关技术中的五次,运用这种方案后的文字顶点数量大量减少,可以解决相关技术中对文字进行描边需要消耗较多终端运算资源的技术问题,进而达到降低进行描边需要消耗的终端运算资源的技术效果。

附图说明

此处所说明的附图用来提供对本发明的进一步理解,构成本申请的一部分,本发明的示意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。在附图中:

图1是一种可选的文本信息的描边渲染效果的示意图;

图2是一种可选的文本信息的描边渲染效果的示意图;

图3是根据本发明实施例的文本信息的渲染方法的硬件环境的示意图;

图4是根据本发明实施例的一种可选的文本信息的渲染方法的流程图;

图5是根据本发明实施例的一种可选的游戏界面的示意图;

图6是根据本发明实施例的一种可选的游戏界面的示意图;

图7是根据本发明实施例的一种可选的文字的像素点的示意图;

图8是根据本发明实施例的一种可选的文字的纹理贴图的示意图;

图9是根据本发明实施例的一种可选的文字的纹理贴图的示意图;

图10是根据本发明实施例的一种可选的文字的纹理贴图的示意图;

图11是根据本发明实施例的一种可选的文字的纹理贴图的示意图;

图12是根据本发明实施例的一种可选的文字的像素点的示意图;

图13是根据本发明实施例的一种可选的文字的纹理贴图的示意图;

图14是根据本发明实施例的一种可选的文字的纹理贴图的示意图;

图15是根据本发明实施例的一种可选的文字信息的示意图;

图16是根据本发明实施例的一种可选的文字的纹理贴图的示意图;

图17是根据本发明实施例的一种可选的文本信息的渲染装置的示意图;以及,

图18是根据本发明实施例的一种终端的结构框图。

具体实施方式

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

需要说明的是,本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

首先,在对本发明实施例进行描述的过程中出现的部分名词或者术语适用于如下解释:

ugui:是指游戏引擎unity中加入的一套ui系统,包含有一系列基本的ui控件,定义了常用的ui控件规范。

片元着色器:fragmentshader,是渲染流水线中一个重要的可编程着色器阶段,这一阶段可以完成纹理采样(是渲染过程中的阶段之一)。

根据本发明实施例的一方面,提供了一种文本信息的渲染方法的方法实施例。

可选地,在本实施例中,上述文本信息的渲染方法可以应用于如图3所示的由服务器301和终端303所构成的硬件环境中。如图3所示,服务器301通过网络与终端303进行连接,可在服务器301上或独立于服务器301设置数据库305,用于为服务器301提供数据存储服务,上述网络包括但不限于:广域网、城域网或局域网,终端303并不限定于pc、手机、平板电脑等。

本发明实施例的文本信息的渲染方法可以由终端303来执行。图4是根据本发明实施例的一种可选的文本信息的渲染方法的流程图,如图4所示,该方法可以包括以下步骤:

步骤s402,终端获取到指示信息,指示信息用于指示在目标图像中渲染出具有描边的目标文本信息。

上述的指示信息可以是在渲染时由系统或应用底层配置触发的,也可以是用户在系统或应用中的配置触发的。目标文本信息即待绘制出的文本,包括但不局限于各种语言的文字、数字。

步骤s404,响应于指示信息,终端通过对第一贴图进行采样得到第二贴图,第一贴图用于表示目标文本信息的笔画纹理,第二贴图用于表示目标文本信息的描边纹理,如图1中“华”字周围的描边线条。

步骤s406,终端使用第二贴图在目标图像中渲染出具有描边的目标文本信息。

本发明实施例的文本信息的渲染方法还可以由服务器301来执行,与上述实施例的区别在于,步骤s402至步骤s406的执行主体由终端变换为服务器;本发明实施例的文本信息的渲染方法还可以是由服务器301和终端303共同执行。其中,终端303执行本发明实施例的文本信息的渲染方法也可以是由安装在其上的客户端来执行。

通过上述步骤s402至步骤s406,获取到指示信息,指示信息用于指示在目标图像中渲染出具有描边的目标文本信息;通过对第一贴图进行采样得到第二贴图,第一贴图用于表示目标文本信息的笔画纹理,第二贴图用于表示目标文本信息的描边纹理;使用第二贴图在目标图像中渲染出具有描边的目标文本信息,换言之,在本申请的实施例中,可以仅对第二贴图渲染一次,而不是相关技术中的五次,运用这种方案后的文字顶点数量大量减少,可以解决相关技术中对文字进行描边需要消耗较多终端运算资源的技术问题,进而达到降低进行描边需要消耗的终端运算资源的技术效果。

本申请介绍了一种在unity等引擎中利用文字组件等,通过在片元着色器等组件的纹理采样阶段对文字纹理多次采样形成文字描边效果的技术方案,借助该技术方案,可以在游戏、电影、动漫、直播等场景中高效地实现文字描边效果,减轻移动设备、电脑等的运算资源(如中央处理器cpu和图像处理器gpu)的压力。下面结合图4所示的步骤,以将本申请的技术方案应用于游戏场景为例进一步详述本申请的实施例,对于电影、直播等其他场景,实施方式与下述描述类似,不再赘述。

如图5所示,在多人同屏自由战斗的rpg手游、第一人称射击游戏fps、第三人称射击游戏tps等游戏中,同屏玩家数量巨大,从性能角度出发,玩家形象可以有选择地省略,但是头顶文字作为同屏其他玩家最后的象征不能省略;另外,某些手游的背景建立于中国古代神话著作的基础上,游戏整体美术风格偏向古典与厚重,大范围使用的羊皮纸图案需要描边文字才能突出显示,如图6所示。可见,游戏对文字描边的应用场景较多,当存在这样的需求时,可以在游戏客户端(可安装在上述终端上)中进行配置,如配置需要进行文字描边时,触发本申请的技术方案。

当在客户端中配置之后,在需要进行文字描边时,该配置就会触发指示信息,在步骤s402提供的技术方案中,终端会接收到客户端底层逻辑触发的指示信息,底层逻辑通过指示信息指示在目标图像中渲染出具有描边的目标文本信息。

在步骤s404提供的技术方案中,响应于指示信息,终端通过对第一贴图进行采样得到第二贴图,第一贴图用于表示目标文本信息的笔画纹理,第二贴图用于表示目标文本信息的描边纹理。

可选地,在通过对第一贴图进行采样得到第二贴图之前,可以按照如下方式创建纹理贴图:从目标文本信息的字体文件(如font文件)中获取目标文本信息的笔画纹理;创建包括目标文本信息的笔画纹理和第一位置信息的第一贴图,第一位置信息(如uv坐标)用于表示目标文本信息的笔画纹理映射在目标图像中的第一区域。

在本申请的实施例中,通过对第一贴图进行采样得到第二贴图可包括如下步骤:

步骤1,通过对第一贴图进行采样获取第一贴图中像素点的纹理像素值。

可选地,通过对第一贴图进行采样获取第一贴图中像素点的纹理像素值,可以逐个获取第一贴图中每个像素点的纹理像素值,但是,这样会存在问题,如图15所示,当文字比较密集(文字朝向可以是任意方向、文字大小不一、文字相互交叉排列)时,文字之间可能存在交叉的区域,如图16所示,会存在脏像素点,即不属于“文字”的像素点。

可选地,此时可以按照如下方式进行过滤,在第一贴图中像素点为映射在第一区域内的像素点的情况下,获取第一贴图中像素点的纹理像素值;若该像素点不为映射在第一区域内的像素点,则直接将其配置为一个固定数值,即第二阈值,如为白色的像素值,如8位的255。

步骤2,根据第一贴图中像素点的纹理像素值确定第三贴图中像素点的纹理像素值,得到第二贴图,其中,第二贴图中包括用于表示目标文本信息的描边纹理的像素点。

可选地,上述的第三贴图可以是第一贴图的副本,换言之,可以直接对第一贴图进行采样得到第二贴图,第三贴图也可以为空白贴图,可以将对第一贴图的采样结果直接保存在第二贴图中。

上述的指示信息还用于指示目标文本信息需要描边的目标方向和用于表示目标文本信息的描边范围的第一阈值(可以理解为所渲染的像素点范围或宽度,如仅渲染紧邻字符纹理的一个像素点,第一阈值记为1个像素点(或记为像素点的直径或半径r的两倍),如可渲染距离字符纹理两个像素点及以内的,第一阈值记为2个像素点,根据第一贴图中像素点的纹理像素值确定第三贴图中像素点的纹理像素值可包括以下步骤:

步骤21,获取第一参数和第二参数,其中,第一参数为第一贴图中第一像素点的纹理像素值的之和,第一像素点位于第一贴图中第二像素点的目标方向上且与第二像素点相距第一阈值,第二参数为与第二像素点相距第一阈值的像素点的个数。

可选地,在上述实施例中,目标方向可以包括如图7中箭头所示的方向,如编号为44的像素点的左右前后四个方向,在上述实施例中,获取第一参数可包括:

1)在目标方向包括一个方向的情况下,确定位于第二像素点的目标方向上且与第二像素点相距第一阈值的第一像素点,并将所有第一像素点的纹理像素值之和作为第一参数,第一阈值相当于渲染范围;若渲染范围为n个像素点,那么第一阈值可以理解为n*2*r,其中,r表示像素点的半径,如图7中编号为44的像素点(即第二像素点)的中心到该像素点的任意一个角顶点的距离。

如渲染范围为1个像素点,目标方向为向右,第一像素点为编号为35、45、55的像素点,若目标方向为向上,第一像素点为编号为33、34、35的像素点,渲染范围为2个像素点,若目标方向为向下,第一像素点为编号为63、64、65的像素点,以此类推。

2)在目标方向包括多个方向的情况下,确定位于第二像素点的多个方向中任意一个方向上且与第二像素点相距第一阈值的第一像素点,并将所有第一像素点的纹理像素值之和作为第一参数。

例如,若目标方向包括上下左右四个方向,渲染范围为1个像素点,那么编号为33、34、35、45、55、54、53、43的像素点为第一像素点。

步骤22,根据目标比值和第二像素点的纹理像素值确定第三贴图中第三像素点的纹理像素值,其中,目标比值为第一参数与第二参数之间的比值,第三像素点在第三贴图中的位置与第二像素点在第一贴图中的位置相同。

可选地,根据目标比值和第二像素点的纹理像素值确定第三贴图中第三像素点的纹理像素值包括:获取第二像素点的纹理像素值与第一权重之间的第一乘积,并获取目标比值与第二权重之间的第二乘积,其中,第一权重为根据第二像素点的透明度确定的,可选地,若透明度为二进制数据,那么第一参数可以为透明度归一化后的数值,如用n位二进制数表示,那么透明度α归一化后的数值为α/28,第一权重与第二权重之和为一,换言之,第二权重为(1-α/28);将第一乘积与第二乘积之和作为第三贴图中第三像素点的纹理像素值。

在上述实施例中,通过对第一贴图进行采样得到第二贴图包括按照如下方式确定第二位置信息(第二位置信息用于表示第二贴图中目标文本信息的笔画纹理映射在目标图像中的第二区域):确定用于表示第二区域的第三参数、第四参数、第五参数以及第六参数,第三参数为第一区域在第一方向上的最大值与第一阈值之和,第四参数为第一区域在第二方向上的最大值与第一阈值之和,第五参数为第一区域在第一方向上的最小值与第一阈值之差,第六参数为第一区域在第二方向上的最小值与第一阈值之差,第一方向和第二方向为目标图像所在二维坐标系下的两个方向。

在步骤s406提供的技术方案中,终端使用第二贴图在目标图像中渲染出具有描边的目标文本信息。

可选地,目标图像包括游戏帧动画,其中,使用第二贴图在目标图像中渲染出具有描边的目标文本信息可包括:使用第二贴图在游戏帧动画中渲染出具有描边的目标文本信息,可选地,渲染过程中可以将描边纹理按照指示信息指示的颜色上色。

采用本申请的技术方案,能解决以下问题:相关技术中是按照指定方向对原字符进行移动然后重叠,文字描边效果不连贯且不均匀,本申请是采用采样的方式,能够使得文字描边效果连贯且均匀,与美术效果图一致,实现效果较好;相关技术中需要多次渲染,需要处理较多的顶点数据,而本申请的顶点数量与不描边时的文字顶点数量一致,不会额外增加顶点数量,降低了对终端的硬件要求;本申请的描边大小支持范围大(具体可以通过调整第一阈值的数值实现),既能提供正常应用范围的较小描边效果,又能提供特殊应用环境下的加粗描边效果。

作为一种可选的实施例,下面以将本申请的技术方案应用于游戏为例进一步像素本申请的技术方案。

在游戏引擎unity中渲染文字,以下是在unity引擎中渲染一个文字的基本步骤:

步骤1,根据字体文件(font)中文字的信息,生成6个顶点,其中这6个顶点构成2个三角形,所形成的记为第一贴图,如图8所示,2个文字共4个三角形和12个顶点。

步骤2,根据用户在文字组件中的设置,生成mesh信息,mesh信息中包括顶点坐标、顶点颜色、纹理坐标(用于表示映射到第一区域)等。

步骤3,在渲染流水线的几何阶段(geometrystage)对顶点信息进行处理,将顶点坐标变换到屏幕空间中。

步骤4,在光栅化阶段(rasterizerstage)逐顶点插值纹理坐标及顶点颜色等,然后逐像素输出需要渲染的文字。

在相关技术中,ugui描边效果实现方案如下:ugui自带的描边效果相当于在绘制原始文字的基础上,额外重复4次绘制操作得到描边效果,描边文字顶点数量是不描边文字顶点数量的5倍。如图9所示,为应用了ugui自带的描边组件,可以看出1个文字共有10个三角形和30个顶点。

不同于相关技术中的技术方案,本申请的步骤1中描边效果实现方案如下,以渲染一个描边文字为例:

步骤11,根据字体文件(font)中文字的信息,生成6个顶点,其中这6个顶点构成2个三角形。

此步骤可在unity引擎中实现,对于其余类型的游戏引擎,与此类似,在unity引擎中实现此功能时,可进行的操作步骤是:新建一个空的游戏对象gameobject;为gameobject添加text组件;修改text组件的字体属性及内容,此时unity引擎即为此text组件生成了对应的顶点信息。

步骤12,根据用户在文字组件中的设置,生成mesh信息,即第一贴图,mesh信息中包括顶点坐标、顶点颜色、纹理坐标等。

此步骤可在unity引擎中实现,在unity引擎中实现此功能时,可进行的操作步骤与步骤11中类似,unity引擎在生成text组件顶点信息的同时,生成了文字的mesh信息,也即第一贴图。

步骤13,根据用户在描边组件中的设置,修改mesh信息,主要记录原始文字的uv区域(即第一区域),根据描边大小扩大文字的uv区域,扩大之后的区域记为第二区域。

uv坐标即纹理坐标,指示了顶点对应的纹理范围,这个范围往往是包含整个文字的最小范围,在本方案中不增加顶点数量的前提下,可扩大uv范围以容纳描边的结果,避免描边的结果被裁切。

如图10中左图中“文字”是没有修改mesh时的uv范围,如图10中右图中“文字”是修改了mesh之后的uv范围,修改mesh的依据是描边的大小,可以看出右图的范围大于左图的范围。

为了更直观的对比修改前后的uv范围,如图11所示,红色框(即“a”示出的框)内为修改前的原始uv范围,黄色框(即“b”示出的框)内为修改后的uv范围。

将修改前的uv和修改之后的uv存储在uivertex结构体中的tangent变量中,用于将参数传递给shader作数据来源。

上述步骤可在unity引擎中实现,使用unity中修改text组件的mesh信息的接口,在生成了文字的mesh后,会同时检测text组件对应的gameobject上是否还有继承了basemesheffect的组件,如有则会调用basemesheffect组件中用于进行重写的modifymesh方法。

步骤13的方案中需要做的步骤是:

1)实现一个继承自basemesheffect的组件,类名取名为textmodmesh,并将此组件添加至text组件所在的gameobject;

2)在textmodmesh重写的modifymesh方法中修改mesh,具体的修改方法为:使用unity引擎中的vertexthelper.getuivertextstream()方法获取mesh顶点信息,相邻的3个顶点构成1个三角形,取这个三角形中x方向(或称第一方向)及y方向(或称第二方向)的最大值xmax,ymax及最小值xmin,ymin即为原始uv区域,读取textmodmesh上用户设置的描边大小outlinesize属性(也即第一阈值),xmax,ymax加上outlinesize即得新的newxmax(即第三参数),newymax(即第四参数),xmin,ymin减去outlinesize即得新的newxmin(即第五参数),newymin(即第六参数)。此步骤获取的值就是添加了描边区域的新uv范围。

上述计算步骤公式如下

xmax=math.max(vertex1.x,vertex2.x,vertex3.x);

ymax=math.max(vertex1.y,vertex2.y,vertex3.y);

xmin=math.min(vertex1.x,vertex2.x,vertex3.x);

ymin=math.min(vertex1.y,vertex2.y,vertex3.y);

函数math.max用于获取括号()中若干个参数的最大值,math.min用于获取括号()中若干个参数的最小值,vertex1至vertex3分别表示三角形的三个顶点,vertex1.x表示三角形顶点1的x坐标,其余如vertex2.x的含义与此类似。

(xmin,ymin)和(xmax,ymax)为原始uv区域;

newxmax=xmax+outlinesize;

newymax=ymax+outlinesize;

newxmin=xmin–outlinesize;

newymin=ymin–outlinesize;

(newxmin,newymin)和(newxmax,newymax)为添加了描边区域后的uv区域(即第二区域)。

将(xmin,ymin)和(xmax,ymax),(newxmin,newymin)和(newxmax,newymax)通过unity提供的接口vertexhelper.adduivertextrianglestream()传递给shader。

步骤14,在渲染流水线的几何阶段(geometrystage)对顶点信息进行处理,将顶点坐标变换到屏幕空间中。

此步骤可基于对unity引擎中textshader进行修改实现,在shader的第一个渲染通道pass中,将传入shader的各个顶点坐标与当前模型视图投影矩阵相乘,即得顶点对应的屏幕空间坐标。

计算公式为:float4vertexpos=mul(unity_matrix_mvp,input.vertex),float4表示一种数据类型,vertexpos表示顶点对应的屏幕空间坐标,mul表示相乘,unity_matrix_mvp表示当前模型视图投影矩阵,input.vertex表示顶点坐标。

步骤15,在光栅化阶段(rasterizerstage)逐顶点插值纹理坐标及顶点颜色等,逐像素输出时,采样当前像素的左上、右上、左下、右下、上、下、左、右共8方向的原始纹理色值,将平均后得到的色值与当前像素的纹理色值融合得到最终输出结果,也即第二贴图。

在逐像素处理及输出时,在光栅化阶段(rasterizerstage)的逐像素处理阶段,如图12中箭头所示,采样每个像素的左上、右上、左下、右下、上、下、左、右共8方向的原始纹理色值(或称纹理像素值)的和,8个方向的采样矩阵如下所示,实际采样坐标为采样矩阵中的值乘以描边大小,描边大小的单位为像素。

{-0.7,0.7}{0,1}{0.7,0.7}

{-1,0}{1,0}

{-0.7,-0.7}(0,-1}(0.7,-0.7}

将上一步得到的值取平均值后得到当前像素色值的中间结果,将上一步得到的中间结果,与当前像素采样得到的原始纹理色值融合,得到当前像素的最终输出结果,融合过程可考虑原始纹理的alpha值(即α值),因为原始纹理是要覆盖在描边之上的,融合时的计算公式如下所示,其中colorresult为输出结果,colororigin为原始纹理色值,color为上一步得到的中间结果。

此步骤可继续基于unity引擎中textshader进行修改后实现,在shader的第2个渲染通道pass中,可定义一个采样矩阵如下所示:

float2sampleoffsets[8]=

{{-0.7,-0.7},{0,-1},{0.7,-0.7},{-1,0},{1,0},{-0.7,0.7},{0,1},{0.7,0.7}}

采样结果为sampleoffsets[8],得到的数据类型为float2,逐像素对上述采样矩阵逐像素采样,每像素包含当前position在内共采样9次。

针对采样矩阵的采样可使用一个循环进行,将采样得到的值相加求和。

colorresult+=(tex2d(_maintex,curpos)+_texturesampleadd)*_outlinecolor;

上述公式中,colorresult为求和的结果,tex2d方法为unity引擎中的对纹理贴图取样的方法,_maintex为当前字体对应的纹理贴图,curpos为循环遍历采样矩阵_sampleoffsets得到的坐标值,_texturesampleadd为unity引擎采样时的默认参数,_outlinecolor是传入shader的用户设置的描边颜色色值。

逐像素针对采样矩阵采样后,将取得的求和结果colorresult取平均值colorresult=colorresult/8.这样处理之后就得到了文字的描边结果。

最后将文字的描边结果与原始纹理相融合,由于原始纹理需要覆盖在描边结果之上,所以采样如下公式进行融合:

colorresult.rgb=colororigin.rgb*colororigin.a+colorresult.rgb*(1-colororigin.a),

其中colorresult即为描边结果,colororigin为原始纹理,rgb为颜色的rgb值,a(也即α)为颜色的alpha通道值,需要说明的是针对红色通道r值、绿色通道值g值、蓝色通道值b值可以按照上述公式分别进行计算。

在本申请的实施例中,分步输出结果可以包括:可对8个方向上数据进行取样后取平均值得到的中间结果输出,得到的一种可选地纹理贴图如图13所示;将中间结果与原始纹理色值融合后的输出,如图14所示。

可选地,对于第一贴图中边缘处的脏像素,可以按照如下方式进行处理过滤:

采样上述技术方案,已经得到文字的描边效果,但在实际运行时还有可能存在脏像素的问题,由于ugui是将所有的文字贴图汇集在一起放在一张大的贴图上的,文字与文字之间是紧密排布的,并且这种排布是随机的,如图15所示为某次运行时的临时贴图(即第一贴图),可以包括大量的文字,且文字布局比较紧密,文字之间并无绝对的独立空间。

在本申请的上述实施例中,扩大了文字的描边区域,这样会出现采样越界到旁边字符的问题,在进一步的描边计算中没有排除不属于这个字符区域内的纹理,因此出现了脏像素的问题,如图16所示。

这样的脏像素是不可预见及随机的,所以在计算描边结果的时候,需要在逐像素处理阶段将脏像素剔除,剔除的方法是,在扩大uv范围的过程中,传入了扩大后的uv范围的同时,也传入了原始的uv范围,可以通过判断当前像素坐标是否在原始uv范围之内,超出此范围的像素直接置0且不参与后续计算,以此来屏蔽脏像素的产生。

可选地,此处可用函数isinrect()判断是否在原始的uv范围之内,isinrect()函数使用step方法计算是否在范围之内,floatinside=step(xy,fpoint)*step(fpoint,zw),即分别判断当前像素的x坐标、y坐标是否在某个范围内(用fpoint表示),若是step返回的值为1,否则为0。采样该方法去除脏像素后即可得到最终的描边文字输出结果;增加了去除脏像素的步骤。

可选地,在逐像素处理阶段,可以减少透明像素的冗余判断,例如一个像素的原始纹理是全0的情况下,左上、左下、右上、右下4个方向也是0时,可以得到这个像素是远离有效纹理的点,此时可以减少采样次数。

本申请的技术方案解决了在unity引擎开发的游戏内使用字体描边效果效率较低的问题,缩小了实现效果与美术效果图之间的差异问题,提升了游戏美术品质的同时,优化了游戏的性能,大大提升了玩家的游戏体验。

需要说明的是,对于前述的各方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本发明并不受所描述的动作顺序的限制,因为依据本发明,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本发明所必须的。

通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质(如rom/ram、磁碟、光盘)中,包括若干指令用以使得一台终端设备(可以是手机,计算机,服务器,或者网络设备等)执行本发明各个实施例所述的方法。

根据本发明实施例的另一个方面,还提供了一种用于实施上述文本信息的渲染方法的文本信息的渲染装置。图17是根据本发明实施例的一种可选的文本信息的渲染装置的示意图,如图17所示,该装置可以包括:

获取单元1701,用于获取到指示信息,其中,指示信息用于指示在目标图像中渲染出具有描边的目标文本信息;

采样单元1703,用于响应于指示信息,通过对第一贴图进行采样得到第二贴图,其中,第一贴图用于表示目标文本信息的笔画纹理,第二贴图用于表示目标文本信息的描边纹理;

渲染单元1705,用于使用第二贴图在目标图像中渲染出具有描边的目标文本信息。

需要说明的是,该实施例中的获取单元1701可以用于执行本申请实施例中的步骤s402,该实施例中的采样单元1703可以用于执行本申请实施例中的步骤s404,该实施例中的渲染单元1705可以用于执行本申请实施例中的步骤s406。

此处需要说明的是,上述模块与对应的步骤所实现的示例和应用场景相同,但不限于上述实施例所公开的内容。需要说明的是,上述模块作为装置的一部分可以运行在如图3所示的硬件环境中,可以通过软件实现,也可以通过硬件实现。

通过上述模块,获取到指示信息,指示信息用于指示在目标图像中渲染出具有描边的目标文本信息;通过对第一贴图进行采样得到第二贴图,第一贴图用于表示目标文本信息的笔画纹理,第二贴图用于表示目标文本信息的描边纹理;使用第二贴图在目标图像中渲染出具有描边的目标文本信息,换言之,在本申请的实施例中,可以仅对第二贴图渲染一次,而不是相关技术中的五次,运用这种方案后的文字顶点数量大量减少,可以解决相关技术中对文字进行描边需要消耗较多终端运算资源的技术问题,进而达到降低进行描边需要消耗的终端运算资源的技术效果。

本申请介绍了一种在unity等引擎中利用文字组件等,通过在片元着色器等组件的纹理采样阶段对文字纹理多次采样形成文字描边效果的技术方案,借助该技术方案,可以在游戏、电影、动漫、直播等场景中高效地实现文字描边效果,减轻移动设备、电脑等的运算资源(如中央处理器cpu和图像处理器gpu)的压力。

在上述实施例中,采样单元可包括:采样模块,用于通过对第一贴图进行采样获取第一贴图中像素点的纹理像素值;确定模块,用于根据第一贴图中像素点的纹理像素值确定第三贴图中像素点的纹理像素值,得到第二贴图,其中,第二贴图中包括用于表示目标文本信息的描边纹理的像素点。

可选地,指示信息还用于指示目标文本信息需要描边的目标方向和用于表示目标文本信息的描边范围的第一阈值,其中,确定模块可包括:获取子模块,用于获取第一参数和第二参数,其中,第一参数为第一贴图中第一像素点的纹理像素值的之和,第一像素点位于第一贴图中第二像素点的目标方向上且与第二像素点相距第一阈值,第二参数为与第二像素点相距第一阈值的像素点的个数;确定子模块,用于根据目标比值和第二像素点的纹理像素值确定第三贴图中第三像素点的纹理像素值,其中,目标比值为第一参数与第二参数之间的比值,第三像素点在第三贴图中的位置与第二像素点在第一贴图中的位置相同。

上述的确定子模块还可用于:获取第二像素点的纹理像素值与第一权重之间的第一乘积,并获取目标比值与第二权重之间的第二乘积,其中,第一权重为根据第二像素点的透明度确定的,第一权重与第二权重之和为一;将第一乘积与第二乘积之和作为第三贴图中第三像素点的纹理像素值。

上述的获取子模块还可用于:在目标方向包括一个方向的情况下,确定位于第二像素点的目标方向上且与第二像素点相距第一阈值的第一像素点,并将所有第一像素点的纹理像素值之和作为第一参数;在目标方向包括多个方向的情况下,确定位于第二像素点的多个方向中任意一个方向上且与第二像素点相距第一阈值的第一像素点,并将所有第一像素点的纹理像素值之和作为第一参数。

可选地,本申请的装置还可包括,纹理获取单元,用于在通过对第一贴图进行采样得到第二贴图之前,从目标文本信息的字体文件中获取目标文本信息的笔画纹理;创建单元,用于创建包括目标文本信息的笔画纹理和第一位置信息的第一贴图,其中,第一位置信息用于表示目标文本信息的笔画纹理映射在目标图像中的第一区域。

上述的采样模块还可用于:在第一贴图中像素点为映射在第一区域内的像素点的情况下,获取第一贴图中像素点的纹理像素值;在第一贴图中像素点不为映射在第一区域内的像素点的情况下,将第二阈值作为第一贴图中像素点的纹理像素值。

上述采样单元在通过对第一贴图进行采样得到第二贴图包括按照如下方式确定第二位置信息,第二位置信息用于表示第二贴图中目标文本信息的笔画纹理映射在目标图像中的第二区域:确定用于表示第二区域的第三参数、第四参数、第五参数以及第六参数,其中,第三参数为第一区域在第一方向上的最大值与第一阈值之和,第四参数为第一区域在第二方向上的最大值与第一阈值之和,第五参数为第一区域在第一方向上的最小值与第一阈值之差,第六参数为第一区域在第二方向上的最小值与第一阈值之差,第一方向和第二方向为目标图像所在二维坐标系下的两个方向。

可选地,目标图像包括游戏帧动画,其中,渲染单元还可用于:使用第二贴图在游戏帧动画中渲染出具有描边的目标文本信息。

采用本申请的技术方案,能解决以下问题:相关技术中是按照指定方向对原字符进行移动然后重叠,文字描边效果不连贯且不均匀,本申请是采用采样的方式,能够使得文字描边效果连贯且均匀,与美术效果图一致,实现效果较好;相关技术中需要多次渲染,需要处理较多的顶点数据,而本申请的顶点数量与不描边时的文字顶点数量一致,不会额外增加顶点数量,降低了对终端的硬件要求;本申请的描边大小支持范围大(具体可以通过调整第一阈值的数值实现),既能提供正常应用范围的较小描边效果,又能提供特殊应用环境下的加粗描边效果。

此处需要说明的是,上述模块与对应的步骤所实现的示例和应用场景相同,但不限于上述实施例所公开的内容。需要说明的是,上述模块作为装置的一部分可以运行在如图3所示的硬件环境中,可以通过软件实现,也可以通过硬件实现,其中,硬件环境包括网络环境。

根据本发明实施例的另一个方面,还提供了一种用于实施上述文本信息的渲染方法的服务器或终端。

图18是根据本发明实施例的一种终端的结构框图,如图18所示,该终端可以包括:一个或多个(图18中仅示出一个)处理器1801、存储器1803、以及传输装置1805,如图18所示,该终端还可以包括输入输出设备1807。

其中,存储器1803可用于存储软件程序以及模块,如本发明实施例中的文本信息的渲染方法和装置对应的程序指令/模块,处理器1801通过运行存储在存储器1803内的软件程序以及模块,从而执行各种功能应用以及数据处理,即实现上述的文本信息的渲染方法。存储器1803可包括高速随机存储器,还可以包括非易失性存储器,如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中,存储器1803可进一步包括相对于处理器1801远程设置的存储器,这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

上述的传输装置1805用于经由一个网络接收或者发送数据,还可以用于处理器与存储器之间的数据传输。上述的网络具体实例可包括有线网络及无线网络。在一个实例中,传输装置1805包括一个网络适配器(networkinterfacecontroller,nic),其可通过网线与其他网络设备与路由器相连从而可与互联网或局域网进行通讯。在一个实例中,传输装置1805为射频(radiofrequency,rf)模块,其用于通过无线方式与互联网进行通讯。

其中,具体地,存储器1803用于存储应用程序。

处理器1801可以通过传输装置1805调用存储器1803存储的应用程序,以执行下述步骤:

获取到指示信息,其中,指示信息用于指示在目标图像中渲染出具有描边的目标文本信息;

响应于指示信息,通过对第一贴图进行采样得到第二贴图,其中,第一贴图用于表示目标文本信息的笔画纹理,第二贴图用于表示目标文本信息的描边纹理;

使用第二贴图在目标图像中渲染出具有描边的目标文本信息。

处理器1801还用于执行下述步骤:

获取第一参数和第二参数,其中,第一参数为第一贴图中第一像素点的纹理像素值的之和,第一像素点位于第一贴图中第二像素点的目标方向上且与第二像素点相距第一阈值,第二参数为与第二像素点相距第一阈值的像素点的个数;

根据目标比值和第二像素点的纹理像素值确定第三贴图中第三像素点的纹理像素值,其中,目标比值为第一参数与第二参数之间的比值,第三像素点在第三贴图中的位置与第二像素点在第一贴图中的位置相同。

采用本发明实施例,获取到指示信息,指示信息用于指示在目标图像中渲染出具有描边的目标文本信息;通过对第一贴图进行采样得到第二贴图,第一贴图用于表示目标文本信息的笔画纹理,第二贴图用于表示目标文本信息的描边纹理;使用第二贴图在目标图像中渲染出具有描边的目标文本信息,换言之,在本申请的实施例中,可以仅对第二贴图渲染一次,而不是相关技术中的五次,运用这种方案后的文字顶点数量大量减少,可以解决相关技术中对文字进行描边需要消耗较多终端运算资源的技术问题,进而达到降低进行描边需要消耗的终端运算资源的技术效果。

可选地,本实施例中的具体示例可以参考上述实施例中所描述的示例,本实施例在此不再赘述。

本领域普通技术人员可以理解,图18所示的结构仅为示意,终端可以是智能手机(如android手机、ios手机等)、平板电脑、掌上电脑以及移动互联网设备(mobileinternetdevices,mid)、pad等终端设备。图18其并不对上述电子装置的结构造成限定。例如,终端还可包括比图18中所示更多或者更少的组件(如网络接口、显示装置等),或者具有与图18所示不同的配置。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成,该程序可以存储于一计算机可读存储介质中,存储介质可以包括:闪存盘、只读存储器(read-onlymemory,rom)、随机存取器(randomaccessmemory,ram)、磁盘或光盘等。

本发明的实施例还提供了一种存储介质。可选地,在本实施例中,上述存储介质可以用于执行文本信息的渲染方法的程序代码。

可选地,在本实施例中,上述存储介质可以位于上述实施例所示的网络中的多个网络设备中的至少一个网络设备上。

可选地,在本实施例中,存储介质被设置为存储用于执行以下步骤的程序代码:

s12,获取到指示信息,其中,指示信息用于指示在目标图像中渲染出具有描边的目标文本信息;

s14,响应于指示信息,通过对第一贴图进行采样得到第二贴图,其中,第一贴图用于表示目标文本信息的笔画纹理,第二贴图用于表示目标文本信息的描边纹理;

s16,使用第二贴图在目标图像中渲染出具有描边的目标文本信息。

可选地,存储介质还被设置为存储用于执行以下步骤的程序代码:

s22,获取第一参数和第二参数,其中,第一参数为第一贴图中第一像素点的纹理像素值的之和,第一像素点位于第一贴图中第二像素点的目标方向上且与第二像素点相距第一阈值,第二参数为与第二像素点相距第一阈值的像素点的个数;

s24,根据目标比值和第二像素点的纹理像素值确定第三贴图中第三像素点的纹理像素值,其中,目标比值为第一参数与第二参数之间的比值,第三像素点在第三贴图中的位置与第二像素点在第一贴图中的位置相同。

可选地,本实施例中的具体示例可以参考上述实施例中所描述的示例,本实施例在此不再赘述。

可选地,在本实施例中,上述存储介质可以包括但不限于:u盘、只读存储器(rom,read-onlymemory)、随机存取存储器(ram,randomaccessmemory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

上述本发明实施例序号仅仅为了描述,不代表实施例的优劣。

上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在上述计算机可读取的存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在存储介质中,包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。

在本发明的上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中,应该理解到,所揭露的客户端,可通过其它的方式实现。其中,以上所描述的装置实施例仅仅是示意性的,例如所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,单元或模块的间接耦合或通信连接,可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。

以上所述仅是本发明的优选实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本发明原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本发明的保护范围。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1