CN110196746B - 交互界面渲染方法及装置、电子设备、存储介质 - Google Patents

Abstract

本发明提供了一种交互界面渲染方法及装置、电子设备、存储介质，涉及计算机技术领域。该交互界面渲染方法包括：获取二维交互界面的颜色贴图；根据预生成的渲染数据对所述颜色贴图进行动态渲染处理，生成所述颜色贴图对应的三维渲染效果图；根据所述三维渲染效果图生成所述二维交互界面对应的拟三维交互界面。本发明实施例的技术方案不仅能够将二维的交互界面转变生成拟三维的交互界面，而且能够减少交互界面所在场景的渲染资源，提高系统的处理效率。

Description

交互界面渲染方法及装置、电子设备、存储介质

技术领域

本发明涉及计算机技术领域，具体而言，涉及一种交互界面渲染方法、交互界面渲染装置、电子设备以及计算机可读存储介质。

背景技术

随着科学技术的发展，人们对游戏的体验要求越来越高。传统游戏场景中的交互界面大都是二维平面的，仅覆盖于游戏画面的最上层，而且效果被美术定制的样式所限制，与游戏场景内部的事物的交互较少。

目前，一种技术方案中，将交互界面的渲染直接作用到游戏场景中三维模型的表面以达到三维立体效果的交互界面，或者直接通过美术定制手段，设计更加立体化的二维交互界面。一方面，将交互界面的渲染直接作用到游戏场景中三维模型的表面，会导致三维模型参与场景渲染时需要额外消耗运算量，交互界面容易与三维模型出现穿插和渲染排序的问题，降低了场景的渲染处理效率；而且三维模型需要额外占用存储空间，增大了安装包的容量，降低了用户的使用体验；另一方面，直接通过美术手段将交互界面的样式设计得更立体化，会导致交互界面的样式固定，无法实时调整修改，难以和游戏场景产生较好的互动，降低用户的使用体验。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本发明实施例的目的在于提供一种交互界面渲染方法、交互界面渲染装置、电子设备以及计算机可读存储介质，进而至少在一定程度上克服将交互界面的渲染直接作用到游戏场景中三维模型的表面导致的运算资源消耗大，以及直接通过美术手段将交互界面的样式设计得更立体化，从而导致无法与场景实时互动的问题。

本发明的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本发明的实践而习得。

根据本发明实施例的第一方面，提供了一种交互界面渲染方法，包括：获取二维交互界面的颜色贴图；根据预生成的渲染数据对所述颜色贴图进行动态渲染处理，生成所述颜色贴图对应的三维渲染效果图；根据所述三维渲染效果图生成所述二维交互界面对应的拟三维交互界面。

在本发明的一些示例实施例中，基于前述方案，根据所述三维渲染效果图生成所述二维交互界面对应的拟三维交互界面包括：获取预生成的渲染数据；其中所述渲染数据包括所述拟三维交互界面对应的高度图、目标法线贴图和高光渲染数据；根据所述高度图对所述二维交互界面的颜色贴图进行扭曲处理生成所述颜色贴图对应的高度还原图；基于所述目标法线贴图，对所述高度还原图进行漫反射处理生成所述颜色贴图对应的漫反射还原图；通过所述高光渲染数据对所述漫反射还原图进行高光渲染处理生成所述颜色贴图对应的三维渲染效果图。

在本发明的一些示例实施例中，基于前述方案，根据所述高度图对所述二维交互界面的颜色贴图进行扭曲处理生成所述颜色贴图对应的高度还原图包括：将所述颜色贴图对应的原始屏幕纹理坐标进行偏移处理以确定所述原始屏幕纹理坐标的原点偏移到屏幕中心后的中心屏幕纹理坐标；基于偏移到屏幕中心的所述中心屏幕纹理坐标以及所述高度图，确定纹理坐标偏移量；将所述纹理坐标偏移量累加到所述颜色贴图上，以确定所述颜色贴图在所述原始屏幕纹理坐标下对应的所述高度还原图。

在本发明的一些示例实施例中，基于前述方案，将所述纹理坐标偏移量累加到偏移前的所述屏幕纹理坐标上，以确定所述颜色贴图对应的所述高度还原图之后，所述方法还包括：获取初始法线贴图的红绿通道值；获取预设的法线强度调整值，并通过所述法线强度调整值调整所述红绿通道值以使所述调整后的所述红绿通道值与所述初始法线贴图的蓝通道值结合生成所述目标法线贴图。

在本发明的一些示例实施例中，基于前述方案，所述基于所述目标法线贴图，对所述高度还原图进行漫反射处理生成所述颜色贴图对应的漫反射还原图包括：根据所述目标法线贴图的向量以及渲染引擎中的光源向量计算所述颜色贴图对应的光暗值；基于所述光暗值，分别计算所述颜色贴图对应的光部颜色以及暗部颜色；将所述光部颜色和所述暗部颜色叠加到所述高度还原图以生成所述颜色贴图对应的漫反射还原图。

在本发明的一些示例实施例中，基于前述方案，所述通过所述高光渲染数据对所述漫反射还原图进行高光渲染处理生成所述颜色贴图对应的三维渲染效果图包括：通过所述目标法线贴图的向量以及所述光源向量确定镜面反射光源向量，以根据所述目标法线贴图的向量、所述光源向量以及所述镜面反射光源向量计算所述高光渲染数据；或者根据所述目标法线贴图的向量以及所述光源向量计算所述高光渲染数据。

在本发明的一些示例实施例中，基于前述方案，获取预生成的渲染数据之前，所述方法还包括：从安装包中获取所述拟三维交互界面对应的颜色贴图；通过预设算法对所述颜色贴图进行处理生成所述拟三维交互界面对应的渲染数据。

根据本发明实施例的第二方面，提供了一种交互界面渲染装置，包括：贴图获取单元，用于获取二维交互界面的颜色贴图；贴图渲染单元，用于根据预生成的渲染数据对所述颜色贴图进行动态渲染处理，生成所述颜色贴图对应的三维渲染效果图；交互界面生成单元，用于根据所述三维渲染效果图生成所述二维交互界面对应的拟三维交互界面。

在本发明的一种示例性实施例中，基于前述方案，贴图渲染单元还包括：渲染数据获取单元，用于获取预生成的渲染数据；其中所述渲染数据包括所述拟三维交互界面对应的高度图、目标法线贴图和高光渲染数据；高度还原单元，用于根据所述高度图对所述二维交互界面的颜色贴图进行扭曲处理生成所述颜色贴图对应的高度还原图；漫反射还原单元，用于基于所述目标法线贴图，对所述高度还原图进行漫反射处理生成所述颜色贴图对应的漫反射还原图；高光渲染单元，用于通过所述高光渲染数据对所述漫反射还原图进行高光渲染处理生成所述颜色贴图对应的三维渲染效果图。

在本发明的一种示例性实施例中，基于前述方案，高度还原单元被配置为：将所述颜色贴图对应的原始屏幕纹理坐标进行偏移处理以确定所述原始屏幕纹理坐标的原点偏移到屏幕中心后的中心屏幕纹理坐标；基于偏移到屏幕中心的所述中心屏幕纹理坐标以及所述高度图，确定纹理坐标偏移量；将所述纹理坐标偏移量累加到所述颜色贴图上，以确定所述颜色贴图在所述原始屏幕纹理坐标下对应的所述高度还原图。

在本发明的一种示例性实施例中，基于前述方案，交互界面渲染装置还包括法线贴图调整单元，法线贴图调整单元被配置为：获取初始法线贴图的红绿通道值；获取预设的法线强度调整值，并通过所述法线强度调整值调整所述红绿通道值以使所述调整后的所述红绿通道值与所述初始法线贴图的蓝通道值结合生成所述目标法线贴图。

在本发明的一种示例性实施例中，基于前述方案，漫反射还原单元被配置为：根据所述目标法线贴图的向量以及渲染引擎中的光源向量计算所述颜色贴图对应的光暗值；基于所述光暗值，分别计算所述颜色贴图对应的光部颜色以及暗部颜色；将所述光部颜色和所述暗部颜色叠加到所述高度还原图以生成所述颜色贴图对应的漫反射还原图。

在本发明的一种示例性实施例中，基于前述方案，高光渲染单元被配置为：通过所述目标法线贴图的向量以及所述光源向量确定镜面反射光源向量，以根据所述目标法线贴图的向量、所述光源向量以及所述镜面反射光源向量计算所述高光渲染数据；或者根据所述目标法线贴图的向量以及所述光源向量计算所述高光渲染数据。

在本发明的一种示例性实施例中，基于前述方案，交互界面渲染装置还包括渲染数据生成单元，渲染数据生成单元被配置为：从安装包中获取所述拟三维交互界面对应的颜色贴图；通过预设算法对所述颜色贴图进行处理生成所述拟三维交互界面对应的渲染数据。

根据本发明实施例的第三方面，提供了一种电子设备，包括：处理器；以及存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现上述任意一项所述的交互界面渲染方法。

根据本发明实施例的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据上述任意一项所述的交互界面渲染方法。

本发明实施例提供的技术方案可以包括以下有益效果：

本发明的示例实施例中的交互界面渲染方法，从安装包中获取二维交互界面的颜色贴图，并根据预生成的渲染数据对颜色贴图进行动态渲染处理，生成颜色贴图对应的三维渲染效果图；通过三维渲染效果图生成二维交互界面对应的拟三维交互界面。一方面，根据预生成的渲染数据直接渲染二维交互界面的颜色贴图生成拟三维交互界面，不仅能够将二维的交互界面渲染成三维立体效果的交互界面，减少生成三维效果交互界面的资源消耗，提高场景渲染效率，而且能够避免交互界面出现穿插以及渲染排序的问题；另一方面，通过预生成的渲染数据动态渲染二维交互界面的颜色贴图，以使生成的拟三维交互界面适配实时变化的场景，提高拟三维交互界面的真实感，提高用户的使用体验。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1示意性示出了根据本发明的一些实施例的交互界面渲染方法的示意图；

图2示意性示出了根据本发明的一些实施例的通过渲染数据处理二维交互界面的颜色贴图流程的示意图；

图3示意性示出了根据本发明的一些实施例的通过渲染数据处理二维交互界面的颜色贴图的示意图；

图4示意性示出了根据本发明的一些实施例的屏幕纹理坐标转视场角原理的示意图；

图5示意性示出了根据本发明的一些实施例的基于深度还原后屏幕纹理坐标的原点在屏幕中心的平铺交互界面的示意图；

图6示意性示出了根据本发明的一些实施例的通过扭曲处理、漫反射处理及高光处理后的颜色贴图效果的示意图；

图7示意性示出了根据本发明的一些实施例的颜色贴图对应的光暗面的示意图；

图8示意性示出了根据本发明的一些实施例的计算得到的光暗面对应光部和暗部的颜色的示意图；

图9示意性示出了根据本发明的一些实施例的根据反射定理确定高光渲染数据原理的示意图；

图10示意性示出了根据本发明的一些实施例的通过高光渲染数据控制高光锐度以及颜色的示意图；

图11示意性示出了根据本发明的一些实施例的不同条件的高光处理后的颜色贴图效果的示意图；

图12示意性示出了根据本发明的一些实施例的渲染数据生成的示意图；

图13示意性示出了根据本发明的一些实施例的交互界面渲染装置的示意图；

图14示意性示出了根据本发明的一些实施例的电子设备的计算机系统的结构示意图；

图15示意性示出了根据本发明的一些实施例的计算机可读存储介质的示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本发明将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本发明的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本发明的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本发明的各方面。

此外，附图仅为示意性图解，并非一定是按比例绘制。附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

在本示例实施例中，首先提供了一种交互界面渲染方法，该交互界面渲染方法可以应用于终端设备，例如手机、电脑等电子设备。该交互界面渲染方法也可以于执行前通过终端设备的硬件指令在GPU（图形处理器）进行解算或通过终端设备的操作系统核心来解算贴图，本发明对此不做特殊限定。图1示意性示出了根据本发明的一些实施例的交互界面渲染方法的示意图。参考图1所示，该交互界面渲染方法可以包括以下步骤：

步骤S110，获取二维交互界面的颜色贴图；

步骤S120，根据预设的渲染数据对所述颜色贴图进行动态渲染处理，生成所述颜色贴图对应的三维渲染效果图；

步骤S130，根据所述三维渲染效果图生成所述二维交互界面对应的拟三维交互界面。

根据本示例实施例中的交互界面渲染方法，一方面，根据预生成的渲染数据直接渲染二维交互界面的颜色贴图生成拟三维交互界面，不仅能够将二维的交互界面渲染成三维立体效果的交互界面，减少生成三维效果交互界面的资源消耗，提高场景渲染效率，而且能够避免交互界面出现穿插以及渲染排序的问题；另一方面，通过预生成的渲染数据动态渲染二维交互界面的颜色贴图，使生成的拟三维交互界面适配实时变化的场景，增加拟三维交互界面的真实感，提高用户的使用体验。

下面，将对本示例实施例中的交互界面渲染方法进行进一步的说明。

在步骤S110中，获取二维交互界面的颜色贴图。

在本发明的一个示例实施例中，二维交互界面（User Interface，UI）可以是指视觉上以及空间上呈现为二维平面的人机交互界面。颜色贴图可以是指二维空间中用于渲染二维交互界面像素颜色的数据。终端设备解压安装包，从安装包中获取二维交互界面对应的的颜色贴图。

可选的，终端设备从安装包中获取拟三维交互界面对应的颜色贴图，通过预设算法对颜色贴图进行处理生成拟三维交互界面对应的渲染数据。拟三维交互界面可以是指基于二维空间生成具有三维视觉效果的交互界面，拟三维交互界面对应的颜色贴图即二维交互界面的颜色贴图。预设算法可以是指开发人员预先设计的、能够根据基础贴图生成其他复杂贴图（可以包括但不限于法线贴图、OA贴图、次表面散射贴图，本发明对此不做特殊限定）的计算公式或者算法。在拟三维交互界面对应的安装包安装过程中，通过颜色贴图以及预设算法在本地得到其他复杂贴图，能够降低安装包的容量，改善安装包的下载效率，提高用户的使用体验。

可选的，本示例实施例中，安装包中的颜色贴图也可以是其他基础贴图，例如其他基础贴图可以是拟三维交互界面对应的高度图（或者也可以是拟三维交互界面对应的法线贴图），通过解压安装包得到的高度图（或者法线贴图）计算得到拟三维交互界面对应的颜色贴图以及法线贴图等（或者颜色贴图以及高度图等），具体情况根据安装包所服务的终端设备的运算能力大小而定，本发明对此不做特殊限定。通过安装包所服务的终端设备的运算能力大小确定安装包中压缩的贴图数据，能够进一步优化了系统性能，提升用户的使用体验。

在步骤S120中，根据预生成的渲染数据对颜色贴图进行动态渲染处理，生成颜色贴图对应的三维渲染效果图。

在本发明的一个示例实施例中，预生成的渲染数据可以是通过安装包中提供的基础贴图以及预设算法计算得到的、对二维交互界面的颜色贴图进行渲染处理的数据。例如预生成的渲染数据可以是指待生成的拟三维交互界面对应的高度图，也可以是法线贴图，当然，还可以是高光渲染数据，本发明对此不做特殊限定。动态渲染处理可以是指当颜色贴图所在的场景空间进行变化时，根据预生成的渲染数据实时对颜色贴图进行动态处理以使所述颜色贴图适配场景变化的过程。三维渲染效果图可以是指通过预生成的渲染数据处理颜色贴图后生成的贴图数据，通过该三维渲染效果图覆盖颜色贴图即可得到拟三维交互界面对应的颜色贴图。

图2示意性示出了根据本发明的一些实施例的通过渲染数据处理二维交互界面的颜色贴图流程的示意图。

参考图2所示，在步骤S210中，获取预生成的渲染数据；其中渲染数据包括拟三维交互界面对应的高度图、目标法线贴图和高光渲染数据。

在本发明的一个示例实施例中，终端设备从安装包中获取开发人员提供的基础贴图以预设算法，通过基础贴图以预设算法计算得到对应的渲染数据。渲染数据可以包括但不限于拟三维交互界面对应的高度图、目标法线贴图和高光渲染数据。其中目标法线贴图可以是指通过预设算法调整得到的、用于生成拟三维交互界面的法线贴图，相对于初始法线贴图。初始法线贴图可以是指根据高度图进行计算直接得到的法线贴图，通过预设算法对该初始法线贴图进行调整得到目标法线贴图。

图3示意性示出了根据本发明的一些实施例的通过渲染数据处理二维交互界面的颜色贴图的示意图。

参考图3所示，步骤S310，获取二维交互界面对应的颜色贴图301；

步骤S320，通过拟三维交互界面对应的高度图302对颜色贴图301进行扭曲处理，使颜色贴图的纹理扭曲产生纵深感生成高度还原图303；

步骤S330，基于高度图302及原始法线304，通过预设算法得到新的法线306；

步骤S340，通过新的法线306对高度还原图303进行漫反射处理得到漫反射还原图305；

步骤S350，基于新的法线306对漫反射还原图305进行高光还原处理，得到三维渲染效果图307。

继续参考图2所示，在步骤S220中，根据高度图对二维交互界面的颜色贴图进行扭曲处理生成颜色贴图对应的高度还原图。

在本发明的一个示例实施例中，扭曲处理可以是指通过高度图修改二维交互界面的颜色贴图的显示效果以及屏幕纹理坐标的显示效果、使颜色贴图具备从深感的处理过程。高度还原图可以是指对颜色贴图进行扭曲处理后生成的具备纵深感的贴图。

具体的，终端设备将颜色贴图对应的原始屏幕纹理坐标进行偏移处理以确定原始屏幕纹理坐标的原点偏移到屏幕中心后的中心屏幕纹理坐标；基于偏移到屏幕中心的中心屏幕纹理坐标以及高度图，确定纹理坐标偏移量；将纹理坐标偏移量累加到颜色贴图上，以确定颜色贴图在原始屏幕纹理坐标下对应的高度还原图。原始屏幕纹理坐标可以是指以屏幕左上角为原点的屏幕空间坐标系对应的坐标。中心屏幕纹理坐标可以是指将原始屏幕纹理坐标的原点偏移到屏幕中心的屏幕空间坐标系对应的坐标。通常三维立体效果是通过BumpOffset算法还原，BumpOffset算法需要摄像机方向向量调整图像UV。但是由于屏幕空间是二维的，无法通过BumpOffset算法直接还原，因此在本示例实施例中，通过屏幕纹理坐标转视场角（Field of view，FOV）的方法对摄像机向量进行映射处理，使颜色贴图显示三维立体效果。输出显示到屏幕上的颜色贴图的纹理坐标值计算公式可以表示为如式（1）所示：

UV=TexCoord + [(0.5-ScreenUV)×Ratio×HightMap] （1）

其中，TexCoord可以表示颜色贴图原始的纹理坐标（UV）值，ScreenUV可以表示屏幕的纹理坐标值，Ratio可以表示预设设定的调整权重值，HightMap可以表示颜色贴图原始的纹理坐标值对应高度图上的数值。

需要说明的是，本示例实施例中的公式、算法或者关系式等仅是示意性说明，并不代表本发明最终实际应用中设定使用的公式、算法或者关系式，因此不应对本发明造成任何限制。

图4示意性示出了根据本发明的一些实施例的屏幕纹理坐标转视场角原理的示意图。

参考图4所示，步骤S410，将当前以左上角为原始点（0,0）的原始屏幕纹理坐标，通过偏移处理确定原始屏幕纹理坐标的原始点（0,0）偏移至屏幕中心后的中心屏幕纹理坐标；

步骤S420，将中心屏幕纹理坐标与高度图相乘得到纹理坐标偏移量，并将纹理坐标偏移量累加到处于原始屏幕纹理坐标下的颜色贴图上。

在贴图渲染的过程中，一般硬件屏幕的扫描以左上角作为原点（渲染处理一般基于屏幕左上角是因为图片不一定覆盖全屏，在屏幕遍历刷新数据时一般从左上开始，当遍历点扫描至屏幕上图片左上角时开始把屏幕UV坐标映射至图片UV坐标来进行颜色取值及赋予屏幕像素数据）。而为了进行3D化计算，需要将屏幕纹理坐标转为视场角：首先要把坐标原点映射至屏幕中心，在基于原点处于屏幕中心的算术空间通过高度图计算出立体偏移量（纹理坐标偏移量），再将立体偏移量叠加到在基于左上角为原点的原屏幕空间坐标对应的颜色贴图上。屏幕纹理坐标转视场角的原理可以通过图4中的示意图400简单表示：假设屏幕图像401需要显示一个视觉上高于（0，0）点且突出的半球402。未扭曲前屏幕坐标（0，0.5）处显示的是半球中间的颜色值403，取视场角404角度空间下的（0，0.5）坐标处的射线405，扭曲后的（0，0.5）坐标读到的应该是取视场角404角度空间下（0，0.5）坐标处的射线405与半球球体402表面相交点的颜色，即虚线405对应在半球球体402处的颜色值406。

参考图5所示，图5示意性示出了根据本发明的一些实施例的基于深度还原后屏幕纹理坐标的原点在屏幕中心的平铺交互界面的示意图，通过屏幕纹理坐标转视场角的处理（即高度还原处理）之后，使颜色贴图初步具备了三维立体感。

在步骤S230中，基于所述目标法线贴图，对所述高度还原图进行漫反射处理生成所述颜色贴图对应的漫反射还原图。

在本发明的一个示例实施例中，漫反射处理可以是指根据法线贴图处理颜色贴图，使颜色贴图具备贴近真实光照效果的过程。参考图6所示，图6示意性示出了根据本发明的一些实施例的通过扭曲处理、漫反射处理及高光处理后的颜色贴图效果的示意图，通过对颜色贴图进行漫反射处理，使颜色贴图与当前场景更加匹配，而且使颜色贴图的三维立体效果真实感更强，提高用户的使用体验。

具体的，获取初始法线贴图的红绿通道值；获取预设的法线强度调整值，并通过法线强度调整值调整红绿通道值以使调整后的红绿通道值与初始法线贴图的蓝通道值结合生成目标法线贴图。初始法线贴图可以是指根据高度图进行计算直接得到的法线贴图，通过预设算法对该初始法线贴图进行调整得到目标法线贴图。红绿通道值可以是指贴图对应的RGB色彩值中的RG值，对应的，蓝通道值可以是指贴图对应的RGB色彩值中的B值。法线强度调整值可以是指开发人员提前设定好的用于调整法线贴图的值，该值可以根据具体情况设定，本发明对此不做特殊限定。法线贴图调整公式可以表示为如式（2）所示：

Normal=Normalize[Append

(NormalMap(UV).RG×Hight，NormalMap(UV).B)] （2）

其中， NormalMap(UV).RG可以表示初始法线贴图的RG值，Hight可以表示法线强度调整值，NormalMap(UV).B可以表示初始法线贴图的B值，Append（x，y）可以表示将x的维度插入y的维度，Normalize可以表示对计算得到的目标法线强度值进行标量化，以使计算得到的目标法线贴图对应的法线符合法线的标准。

需要说明的是，本示例实施例中的公式、算法或者关系式等仅是示意性说明，并不代表本发明最终实际应用中设定使用的公式、算法或者关系式，因此不应对本发明造成任何限制。

进一步的，根据目标法线贴图的向量以及渲染引擎中的光源向量计算颜色贴图对应的光暗值；基于光暗值，分别计算颜色贴图对应的光部颜色以及暗部颜色；将光部颜色和所述暗部颜色叠加到高度还原图以生成颜色贴图对应的漫反射还原图。光源向量可以是指场景中设定的光源对颜色贴图产生影响的向量。光部可以是指颜色贴图确定为光亮的部分（区域），暗部可以是指颜色贴图确定为黑暗（阴影）的部分（区域）。叠加可以是指累加处理，也可以是指正片叠底（乘）、强光或柔光等处理，本发明对此不做特殊限定。具体计算公式可以表示为如式（3）到（6）所示：

LeapAlpha=Normal Dot LightVector （3）

Light=Min[1，Max(0，LeapAlpha)]×LightColor （4）

Shadow=Min[0，Max(-1，LeapAlpha)]×ShadowColor （5）

DiffuseColor=Texture(UV)+Light+Shadow （6）

其中，Normal 可以表示式（2）中计算得到的目标法线贴图值，Dot 可以表示点乘计算，LeapAlpha可以表示颜色贴图对应的光暗值，Light可以表示对应在颜色贴图上的光部颜色，Shadow可以表示对应在颜色贴图上的暗部（阴影）颜色，Texture（UV）可以表示式（1）中得到的纹理坐标对应的颜色值，LightVector、LightColor以及ShadowColor既可以取定值，也可以通过取环境光的值以达到交互界面与环境光互动的效果。

参考图7所示，图7示意性示出了根据本发明的一些实施例的颜色贴图对应的光暗面的示意图。首先通过目标法线贴图的向量以及渲染引擎中的光源向量计算颜色贴图对应位置的光暗值，进而通过得到的颜色贴图的光暗值分别确定是光亮部分的颜色以及阴影部分的颜色。参考图8所示，图8示意性示出了根据本发明的一些实施例的计算得到的光暗面对应光部和暗部的颜色的示意图，其中801表示最终确定的光部的颜色， 802表示最终确定的暗部的颜色。将光部颜色801和暗部颜色802叠加到步骤S220中得到的高度还原图确定颜色贴图对应的漫反射贴图。

在步骤S240中，通过所述高光渲染数据对所述漫反射还原图进行高光渲染处理生成所述颜色贴图对应的三维渲染效果图。

在本发明的一个示例实施例中，高光渲染数据可以是指通过新的法线向量以及游戏场景中的光源向量计算得到的渲染数据（也可以是指通过新的法线向量以及光源向量计算得到镜面反射光源向量，根据新的法线向量、光源向量以及镜面反射光源向量计算得到的渲染数据），根据高光渲染数据能够准确还原二维交互界面在游戏场景中的伪三维的光照效果。三维渲染效果图可以是指根据高光渲染数据对漫反射贴图进行渲染处理得到模拟三维效果的贴图。

具体的，终端设备通过目标法线贴图的向量以及光源向量确定镜面反射向量，以根据目标法线贴图的向量、光源向量以及镜面反射向量计算高光渲染数据；或者根据目标法线贴图向量以及所述光源向量计算高光渲染数据。本公开中可以通过两种方式确定高光渲染数据，一种方法是根据反射定理确定的计算公式，参考图9所示，图9示意性示出了根据本发明的一些实施例的根据反射定理确定高光渲染数据原理的示意图，因此根据反射定理确定的计算公式可以表示为式（7）所示：

Specular=(RefactionVector Dot Normal)^SpecularPower （7）

其中，Specular可以表示高光渲染数据，Normal可以表示法线向量901，RefactionVector可以表示镜面反射向量902，Dot可以表示点乘运算， SpecularPower可以表示预设的控制高光锐利度的参数。在本公开中，法线贴图向量Normal具体可以通过（0,0,1）代替，以增强渲染效果，镜面反射向量RefactionVector具体可以通过目标法线贴图向量以及光源向量计算得到，例如可以表示为式（8）所示：

RefactionVector= NVector- LightVector

=Normal×2×(Normal Dot LightVector)-LightVector （8）

因此，式（7）也可以表示为式（9）：

Specular=[Normalize(Normal×2×(Normal Dot LightVector)

-LightVector)Dot(0，0，1)]^SpecularPower （9）

另一种方法是基于屏幕空间聚拢光线的公式，可以表示为式（10）所示：

Specular=( Normal Dot LightVector)^SpecularPower （10）

其中，RefactionVector可以表示镜面反射向量902，Specular可以表示高光渲染数据，Normal可以表示法线贴图向量901，Dot可以表示点乘运算，LightVector可以表示光源向量903，NVector 可以表示向量904。由于高光效果是镜面反射的一种现象，高光值较高的区域集中在镜面反射光源附近，因此通过LightVector代替式（7）中的RefactionVector计算高光渲染数据，不仅可以减少计算RefactionVector时的计算量，而且可以实现接近真实高光的效果。根据本公开中的公式不仅能够使得到的伪高光效果正确还原三维高光的效果，使伪高光效果更具风格化，而且能够减少计算资源，提升渲染效率。

参考图10所示，图10示意性示出了根据本发明的一些实施例的通过高光渲染数据控制高光锐度以及颜色的示意图，1001和1002分别表示不同锐利度的高光效果图，1001和1003分别表示不同颜色的高光效果图。参考图11所示，图11示意性示出了根据本发明的一些实施例的不同条件的高光处理后的颜色贴图效果的示意图，1101可以表示将（0,0,1）作为法线向量计算得到的高光效果示意图，1102可以表示通过新的法线贴图向量计算得到的高光效果示意图，1103可以表示通过LightVector代替RefactionVector后计算得到的高光效果示意图。

在步骤S130中，根据三维渲染效果图生成二维交互界面对应的拟三维交互界面。

在本发明的一个示例实施例中，系统获取计算得到三维渲染效果图，并通过三维渲染效果图渲染到终端设备的屏幕上，生成二维交互界面对应的拟三维交互界面（即二维空间下模拟三维效果的交互界面）。

可选的，系统通过预设算法对基础贴图进行处理生成拟三维交互界面对应的动态渲染数据。本示例实施例中，系统能够根据玩家在游戏场景中的修改操作修改高度图数据，并通过高度图数据实时计算对应的法线贴图数据，进而根据得到的法线贴图数据实现玩家实时改变游戏场景中物质表面显示效果的功能，即玩家能够和游戏场景中的交互界面进行互动。例如本公开中通过高度图数据动态运算出法线贴图数据的表达式可以是式（11）所示：

Normal=Normalize

[Cross((1，0， (HightMap(TexCoord+HightMapUVOffset)-HightMap)，(HightMap×(HightMap(TexCoord-HightMapUVOffset)-HightMap))] （11）

其中，HightMap 可以表示原高度图对应的数值，TexCoord可以表示颜色贴图原始的纹理坐标（UV）值，HightMapUVOffset可以表示高度图对应的UV补偿值，Normalize可以表示对计算得到的向量值进行标量化，以使计算得到的新的向量值符合法线数据的标准。

参考图12所示，图12示意性示出了根据本发明的一些实施例的渲染数据生成的示意图，在步骤S1210中，游戏场景中玩家的修改操作会实时改变原高度图数据，系统根据修改后的高度图数据实时计算生成法线贴图数据，并基于生成的法线贴图生成新的三维效果渲染图，即能够实现玩家和游戏场景中的交互界面进行互动操作。

需要说明的是，尽管在附图中以特定顺序描述了本发明中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。

此外，在本示例实施例中，还提供了一种交互界面渲染装置。参照图13所示，该交互界面渲染装置1300包括：贴图获取单元1310用于获取二维交互界面的颜色贴图；贴图渲染单元1320用于根据预生成的渲染数据对所述颜色贴图进行动态渲染处理，生成所述颜色贴图对应的三维渲染效果图；交互界面生成单元1330用于根据所述三维渲染效果图生成所述二维交互界面对应的拟三维交互界面。

在本发明的一种示例性实施例中，基于前述方案，贴图渲染单元1320还包括：渲染数据获取单元，用于获取预生成的渲染数据；其中所述渲染数据包括所述拟三维交互界面对应的高度图、目标法线贴图和高光渲染数据；高度还原单元，用于根据所述高度图对所述二维交互界面的颜色贴图进行扭曲处理生成所述颜色贴图对应的高度还原图；漫反射还原单元，用于基于所述目标法线贴图，对所述高度还原图进行漫反射处理生成所述颜色贴图对应的漫反射还原图；高光渲染单元，用于通过所述高光渲染数据对所述漫反射还原图进行高光渲染处理生成所述颜色贴图对应的三维渲染效果图。

在本发明的一种示例性实施例中，基于前述方案，高度还原单元被配置为：将所述颜色贴图对应的原始屏幕纹理坐标进行偏移处理以确定所述屏幕纹理坐标的原点偏移到屏幕中心的中心屏幕纹理坐标；基于偏移到屏幕中心的所述中心屏幕纹理坐标以及所述高度图，确定纹理坐标偏移量；将所述纹理坐标偏移量累加到所述颜色贴图上，以确定所述颜色贴图在所述原始屏幕纹理坐标下对应的所述高度还原图。

在本发明的一种示例性实施例中，基于前述方案，交互界面渲染装置1300还包括法线贴图调整单元，法线贴图调整单元被配置为：获取初始法线贴图的红绿通道值；获取预设的法线强度调整值，并通过所述法线强度调整值调整所述红绿通道值以使所述调整后的所述红绿通道值与所述初始法线贴图的蓝通道值结合生成所述目标法线贴图。

在本发明的一种示例性实施例中，基于前述方案，漫反射还原单元被配置为：根据所述目标法线贴图的向量以及渲染引擎中的光源向量计算所述颜色贴图对应的光暗值；基于所述光暗值，分别计算所述颜色贴图对应的光部颜色以及暗部颜色；将所述光部颜色和所述暗部颜色叠加到所述高度还原图以生成所述颜色贴图对应的漫反射还原图。

在本发明的一种示例性实施例中，基于前述方案，高光渲染单元被配置为：通过所述目标法线贴图的向量以及所述光源向量确定镜面反射光源向量，以根据所述目标法线贴图的向量、所述光源向量以及所述镜面反射光源向量计算所述高光渲染数据；或者根据所述目标法线贴图的向量以及所述光源向量计算所述高光渲染数据。

在本发明的一种示例性实施例中，基于前述方案，交互界面渲染装置1300还包括渲染数据生成单元，渲染数据生成单元被配置为：从安装包中获取所述拟三维交互界面对应的颜色贴图；通过预设算法对所述颜色贴图进行处理生成所述拟三维交互界面对应的渲染数据。

上述中交互界面渲染装置各模块的具体细节已经在对应的交互界面渲染方法中进行了详细的描述，因此此处不再赘述。

应当注意，尽管在上文详细描述中提及了交互界面渲染装置的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

此外，在本公开的示例性实施例中，还提供了一种能够实现上述交互界面渲染方法的电子设备。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施例、完全的软件实施例（包括固件、微代码等），或硬件和软件方面结合的实施例，这里可以统称为“电路”、“模块”或“系统”。

下面参照图14来描述根据本发明的这种实施例的电子设备1400。图14所示的电子设备1400仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图14所示，电子设备1400以通用计算设备的形式表现。电子设备1400的组件可以包括但不限于：上述至少一个处理单元1410、上述至少一个存储单元1420、连接不同系统组件（包括存储单元1420和处理单元1410）的总线1430、显示单元1440。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元1410执行，使得所述处理单元1410执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施例的步骤。例如，所述处理单元1410可以执行如图1中所示的步骤S110，获取二维交互界面的颜色贴图；步骤S120，根据预生成的渲染数据对所述颜色贴图进行动态渲染处理，生成所述颜色贴图对应的三维渲染效果图；步骤S130，根据所述三维渲染效果图生成所述二维交互界面对应的拟三维交互界面。

存储单元1420可以包括易失性存储单元形式的可读介质，例如随机存取存储单元（RAM）1421和/或高速缓存存储单元1422，还可以进一步包括只读存储单元（ROM）1423。

存储单元1420还可以包括具有一组（至少一个）程序模块1425的程序/实用工具1424，这样的程序模块1425包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线1430可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备1400也可以与一个或多个外部设备1470（例如键盘、指向设备、蓝牙设备等）通信，还可与一个或者多个使得用户能与该电子设备1400交互的设备通信，和/或与使得该电子设备1400能与一个或多个其它计算设备进行通信的任何设备（例如路由器、调制解调器等等）通信。这种通信可以通过输入/输出（I/O）接口1450进行。并且，电子设备1400还可以通过网络适配器1460与一个或者多个网络（例如局域网（LAN），广域网（WAN）和/或公共网络，例如因特网）通信。如图所示，网络适配器1460通过总线1430与电子设备1400的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备1400使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质（可以是CD-ROM，U盘，移动硬盘等）中或网络上，包括若干指令以使得一台计算设备（可以是个人计算机、服务器、终端装置、或者网络设备等）执行根据本公开实施例的方法。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施例中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施例的步骤。

参考图15所示，描述了根据本发明的实施例的用于实现上述交互界面渲染方法的程序产品1500，其可以采用便携式紧凑盘只读存储器（CD-ROM）并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子（非穷举的列表）包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器（RAM）、只读存储器（ROM）、可擦式可编程只读存储器（EPROM或闪存）、光纤、便携式紧凑盘只读存储器（CD-ROM）、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网（LAN）或广域网（WAN），连接到用户计算设备，或者，可以连接到外部计算设备（例如利用因特网服务提供商来通过因特网连接）。

此外，上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质（可以是CD-ROM，U盘，移动硬盘等）中或网络上，包括若干指令以使得一台计算设备（可以是个人计算机、服务器、触控终端、或者网络设备等）执行根据本公开实施例的方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施例。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (8)

1.一种交互界面渲染方法，其特征在于，包括：

从安装包中获取二维交互界面的颜色贴图；

根据预生成的渲染数据对所述颜色贴图进行动态渲染处理，生成所述颜色贴图对应的三维渲染效果图；

根据所述三维渲染效果图生成所述二维交互界面对应的拟三维交互界面：包括：通过预设算法对所述颜色贴图进行处理生成所述拟三维交互界面对应的渲染数据；获取预生成的渲染数据；其中所述渲染数据包括所述拟三维交互界面对应的高度图、目标法线贴图和高光渲染数据；根据所述高度图对所述二维交互界面的颜色贴图进行扭曲处理生成所述颜色贴图对应的高度还原图；基于所述目标法线贴图，对所述高度还原图进行漫反射处理生成所述颜色贴图对应的漫反射还原图；通过所述高光渲染数据对所述漫反射还原图进行高光渲染处理生成所述颜色贴图对应的三维渲染效果图。

2.根据权利要求1所述的方法，其特征在于，根据所述高度图对所述二维交互界面的颜色贴图进行扭曲处理生成所述颜色贴图对应的高度还原图包括：

将所述颜色贴图对应的原始屏幕纹理坐标进行偏移处理以确定所述原始屏幕纹理坐标的原点偏移到屏幕中心后的中心屏幕纹理坐标；

基于偏移到屏幕中心的所述中心屏幕纹理坐标以及所述高度图，确定纹理坐标偏移量；

将所述纹理坐标偏移量累加到所述颜色贴图上，以确定所述颜色贴图在所述原始屏幕纹理坐标下对应的所述高度还原图。

3.根据权利要求2所述的方法，其特征在于，将所述纹理坐标偏移量累加到偏移前的所述屏幕纹理坐标上，以确定所述颜色贴图对应的所述高度还原图之后，所述方法还包括：

获取初始法线贴图的红绿通道值；

获取预设的法线强度调整值，并通过所述法线强度调整值调整所述红绿通道值以使所述调整后的所述红绿通道值与所述初始法线贴图的蓝通道值结合生成所述目标法线贴图。

4.根据权利要求3所述的方法，其特征在于，所述基于所述目标法线贴图，对所述高度还原图进行漫反射处理生成所述颜色贴图对应的漫反射还原图包括：

根据所述目标法线贴图的向量以及渲染引擎中的光源向量计算所述颜色贴图对应的光暗值；

基于所述光暗值，分别计算所述颜色贴图对应的光部颜色以及暗部颜色；

将所述光部颜色和所述暗部颜色叠加到所述高度还原图以生成所述颜色贴图对应的漫反射还原图。

5.根据权利要求4所述的方法，其特征在于，所述通过所述高光渲染数据对所述漫反射还原图进行高光渲染处理生成所述颜色贴图对应的三维渲染效果图包括：

通过所述目标法线贴图的向量以及所述光源向量确定镜面反射光源向量，以根据所述目标法线贴图的向量、所述光源向量以及所述镜面反射光源向量计算所述高光渲染数据；或者

根据所述目标法线贴图的向量以及所述光源向量计算所述高光渲染数据。

6.一种交互界面渲染装置，其特征在于，包括：

贴图获取单元，用于从安装包中获取二维交互界面的颜色贴图；

贴图渲染单元，用于根据预生成的渲染数据对所述颜色贴图进行渲染处理，生成所述颜色贴图对应的三维渲染效果图；

交互界面生成单元，用于根据所述三维渲染效果图生成所述二维交互界面对应的拟三维交互界面；包括：通过预设算法对所述颜色贴图进行处理生成所述拟三维交互界面对应的渲染数据；获取预生成的渲染数据；其中所述渲染数据包括所述拟三维交互界面对应的高度图、目标法线贴图和高光渲染数据；根据所述高度图对所述二维交互界面的颜色贴图进行扭曲处理生成所述颜色贴图对应的高度还原图；基于所述目标法线贴图，对所述高度还原图进行漫反射处理生成所述颜色贴图对应的漫反射还原图；通过所述高光渲染数据对所述漫反射还原图进行高光渲染处理生成所述颜色贴图对应的三维渲染效果图。

7.一种电子设备，其特征在于，包括：

处理器；以及

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现如权利要求1至5中任一项所述的交互界面渲染方法。

8.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至5中任一项所述的交互界面渲染方法。

Images