CN113223133A - 三维模型换色方法和装置 - Google Patents

Abstract

本申请提供了一种三维模型换色方法和装置。该方法包括：接收针对三维模型的换色指令，换色指令中携带有颜色指示信息和区域指示信息，颜色指示信息用于指示选定的目标颜色，区域指示信息用于指示选定的目标区域，基于三维模型的零件分布，生成用于区分目标区域与三维模型中其他区域的蒙版图片；基于目标颜色和目标区域，确定蒙版图片的蒙版颜色；将蒙版颜色填充在蒙版图片中，并将填充后的蒙版图片叠加在三维模型上，得到换色后的三维模型，换色后的三维模型相比于换色前的三维模型只改变了目标区域颜色，不会改变目标区域纹理图案，也不会改变其他区域的颜色和纹理图案。

Description

三维模型换色方法和装置

技术领域

本申请涉及计算机及通信技术领域，特别涉及一种三维模型换色方法和装置。

背景技术

为了增加用户的使用乐趣，可以将用户在应用程序中使用的虚拟形象设置成可更换皮肤的虚拟形象。

现有技术中，更换皮肤的操作通常是将皮肤预先加载在客户端，加载后的皮肤才能被使用，当换肤前皮肤和换肤后皮肤的差别只在于颜色时，也需要重新加载换肤后皮肤，十分浪费网络资源。

发明内容

本申请旨在提供一种三维模型换色方法和装置，其能够实现对三维模型进行换色，能够在一定程度上节约网络资源。

根据本申请实施例的一个方面，提供了一种三维模型换色方法，包括：接收针对三维模型的换色指令，所述换色指令中携带有颜色指示信息和区域指示信息，所述颜色指示信息用于指示选定的目标颜色，所述区域指示信息用于指示选定的目标区域，基于所述三维模型的零件分布，生成用于区分所述目标区域与所述三维模型中其他区域的蒙版图片；基于所述目标颜色和所述目标区域，确定所述蒙版图片的蒙版颜色；将所述蒙版颜色填充在所述蒙版图片中，并将填充后的蒙版图片叠加在所述三维模型上，得到换色后的三维模型。

根据本申请实施例的一个方面，提供了一种三维模型换色装置，包括：接收模块，配置为接收针对三维模型的换色指令，所述换色指令中携带有颜色指示信息和区域指示信息，所述颜色指示信息用于指示选定的目标颜色，所述区域指示信息用于指示选定的目标区域；生成模块，配置为基于所述三维模型的零件分布，生成用于区分所述目标区域与所述三维模型中其他区域的蒙版图片；确定模块，配置为基于所述目标颜色和所述目标区域，确定所述蒙版图片的蒙版颜色；叠加模块，配置为将所述蒙版颜色填充在所述蒙版图片中，并将填充后的蒙版图片叠加在所述三维模型上，得到换色后的三维模型。

在本申请的一个实施例中，基于前述方案，所述确定模块配置为：获取所述蒙版图片中各个蒙版像素点对应于所述三维模型的位置；若所述蒙版像素点对应于所述三维模型的位置在所述目标区域中，则将所述蒙版像素点的像素颜色确定为所述目标颜色；若所述蒙版像素点对应于所述三维模型的位置在所述其他区域中，则将所述蒙版像素点的像素颜色确定为白色；将所述蒙版像素点的像素颜色按照所述蒙版像素点在所述蒙版图片中的位置进行组合，得到所述蒙版颜色。

在本申请的一个实施例中，基于前述方案，所述生成模块配置为：将所述三维模型在二维平面上展开，得到所述三维模型的模型贴图；获取所述目标区域对应的零件在所述模型贴图中的分布；基于所述目标区域对应的零件在所述模型贴图中的分布边界，将所述三维模型的蒙版图片分割成所述目标区域与所述其他区域；对所述目标区域和所述其他区域进行区分处理，得到所述蒙版图片。

在本申请的一个实施例中，基于前述方案，所述叠加模块配置为：将所述蒙版图片导入至片段着色器中；通过所述片段着色器遍历所述蒙版图片中的各个蒙版像素点；基于各个蒙版像素点对应的区分处理结果，确定各个蒙版像素点的像素颜色；将所述蒙版像素点的像素颜色填充在所述蒙版像素点处。

在本申请的一个实施例中，基于前述方案，所述叠加模块配置为：若所述蒙版像素点对应的区分处理结果为所述目标区域对应的区分处理结果，则通过坐标对照表查找顶点着色器确定所述蒙版像素点的像素颜色；若所述蒙版像素点对应的区分处理结果为所述其他区域对应的区分处理结果，则将所述蒙版像素点的像素颜色确定为白色。

在本申请的一个实施例中，基于前述方案，所述叠加模块配置为：获取所述蒙版像素点在所述蒙版图片中的位置；基于所述蒙版像素点在所述蒙版图片中的位置，通过所述坐标对照表查找所述顶点着色器中对应所述蒙版像素点的目标颜色和法线方向；获取所述三维模型的光照分布；基于所述目标颜色、所述法线方向和所述光照分布，确定所述蒙版像素点的像素颜色。

在本申请的一个实施例中，基于前述方案，所述叠加模块配置为：将所述模型贴图导入至所述片段着色器中；获取所述模型贴图中贴图像素点在换色前的待换颜色对应的第一颜色参数组；获取所述贴图像素点对应的蒙版像素点的像素颜色对应的第二颜色参数组；将所述第一颜色参数组与所述第二颜色参数组中对应于同一参数的参数值相乘，得到显示参数组，将所述第一颜色参数组替换为所述显示参数组；将替换后的模型贴图转换成三维图形，得到所述换色后的三维模型。

在本申请的一个实施例中，基于前述方案，在接收针对三维模型的换色指令之前所述接收模块还配置为：获取所述三维模型；获取针对所述三维模型的分区指令；基于所述零件在所述三维模型中的分布位置，确定所述零件所属区域。

在本申请的一个实施例中，基于前述方案，在将填充后的蒙版图片叠加在所述三维模型上之前，所述叠加模块还配置为：若所述颜色指示信息用于指示换色后的显示颜色，则将所述目标区域进行灰度处理。

根据本申请实施例的一个方面，提供了一种计算机可读程序介质，其存储有计算机程序指令，当所述计算机程序指令被计算机执行时，使计算机执行上任一项所述的方法。

根据本申请实施例的一个方面，提供了一种电子设备，包括：处理器；存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如上任一项所述的方法。

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

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

在本申请的一些实施例所提供的技术方案中，通过接收针对三维模型的换色指令，换色指令中携带有颜色指示信息和区域指示信息，颜色指示信息用于指示选定的目标颜色，区域指示信息用于指示选定的目标区域，基于三维模型的零件分布，生成用于区分目标区域与三维模型中其他区域的蒙版图片；基于目标颜色和目标区域，确定蒙版图片的蒙版颜色；将蒙版颜色填充在蒙版图片中，并将填充后的蒙版图片叠加在三维模型上，得到换色后的三维模型，换色后的三维模型相比于换色前的三维模型只改变了目标区域颜色，不会改变目标区域纹理图案，也不会改变其他区域的颜色和纹理图案，能够实现当换肤前皮肤和换肤后皮肤的差别只在于颜色时，不必重新加载后皮肤，节约了网络资源。

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

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并于说明书一起用于解释本申请的原理。

图1示出了可以应用本申请实施例的技术方案的示例性系统架构的示意图；

图2示意性示出了根据本申请的一个实施例的三维模型换色方法的流程图；

图3示意性示出了本申请的一个实施例的点击模型编辑界面中出现的待选颜色的界面示意图；

图4A示意性示出了本申请的一个实施例的车辆模型的示意图；

图4B示意性示出了图4A中的车辆模型对应的模型贴图的示意图；

图4C示意性示出了本申请的图4A中的车辆模型对应的目标区域为主色区域的蒙版图片示意图；

图4D示意性示出了本申请的图4A中的车辆模型对应的目标区域为辅色区域的蒙版图片示意图；

图4E示意性示出了本申请的图4A中的车辆模型对应的目标区域为细节区域的蒙版图片示意图；

图5A示意性示出了本申请的一个实施例的对车辆模型换色前车辆模型示意图；

图5B示意性示出了本申请的一个实施例的对图5A中的车辆模型主色区域换色后车辆模型示意图；

图5C示意性示出了本申请的一个实施例的对图5A中的车辆模型辅色区域换色后车辆模型示意图；

图5D示意性示出了本申请的一个实施例的对图5A中的车辆模型细节区域换色后车辆模型示意图；

图5E示意性示出了本申请的一个实施例的对图5A中的车辆模型多个区域换色后车辆模型示意图；

图6示意性示出了应用本申请的三维模型进行web3d实时炫彩皮肤操作的流程图；

图7A示意性示出了本申请一个实施例的模型贴图示意图；

图7B示意性示出了本申请一个实施例的蒙版图片示意图；

图7C示意性示出了本申请一个实施例的将图7A中的模型贴图和图7B中的蒙版图片正片叠底后的示意图；

图7D示意性示出了本申请一个实施例的图7C对应的三维模型的示意图；

图8示意性示出了根据本申请的一个实施例的三维模型换色装置的框图；

图9是根据一示例性实施例示出的一种电子设备的硬件图。

具体实施方式

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

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

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

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/ 步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

人工智能(Artificial Intelligence,AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。换句话说，人工智能是计算机科学的一个综合技术，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。人工智能也就是研究各种智能机器的设计原理与实现方法，使机器具有感知、推理与决策的功能。

人工智能技术是一门综合学科，涉及领域广泛，既有硬件层面的技术也有软件层面的技术。人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

计算机视觉技术(Computer Vision,CV)计算机视觉是一门研究如何使机器“看”的科学，更进一步的说，就是指用摄影机和电脑代替人眼对目标进行识别、跟踪和测量等机器视觉，并进一步做图形处理，使电脑处理成为更适合人眼观察或传送给仪器检测的图像。作为一个科学学科，计算机视觉研究相关的理论和技术，试图建立能够从图像或者多维数据中获取信息的人工智能系统。计算机视觉技术通常包括图像处理、图像识别、图像语义理解、图像检索、光学字符识别(Optical Character Recognition，OCR)、视频处理、视频语义理解、视频内容/行为识别、三维物体重建、3D技术、虚拟现实、增强现实、同步定位与地图构建等技术，还包括常见的人脸识别、指纹识别等生物特征识别技术。

随着人工智能技术研究和进步，人工智能技术在多个领域展开研究和应用，例如常见的智能家居、智能穿戴设备、虚拟助理、智能音箱、智能营销、无人驾驶、自动驾驶、无人机、机器人、智能医疗、智能客服等，相信随着技术的发展，人工智能技术将在更多的领域得到应用，并发挥越来越重要的价值。

本申请实施例提供的方案涉及人工智能领域中的计算机视觉技术技术，通过使用计算机视觉技术执行本申请的三维模型换色方法，能够极大地提高换色效率，具体通过如下实施例进行说明:

图1示出了可以应用本申请实施例的技术方案的示例性系统架构100的示意图。

如图1所示，系统架构100可以包括客户端101、网络102和服务器103。网络102用以在客户端101和服务器103之间提供通信链路的介质。网络102 可以包括各种连接类型，例如有线通信链路、无线通信链路等等，本申请在此不做限制。

应该理解，图1中的客户端101、网络102和服务器103的数目仅仅是示意性的。根据实现需要，可以具有任意数目的客户端101、网络102和服务器 103。比如服务器103可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、 CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。客户端101可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等，但并不局限于此。

在本申请的一个实施例中，服务器103通过接收用户或机器通过客户端 101发送的针对三维模型的换色指令，换色指令中携带有颜色指示信息和区域指示信息，颜色指示信息用于指示选定的目标颜色，区域指示信息用于指示选定的目标区域，基于三维模型的零件分布，生成用于区分目标区域与三维模型中其他区域的蒙版图片；基于目标颜色和目标区域，确定蒙版图片的蒙版颜色；将蒙版颜色填充在蒙版图片中，并将填充后的蒙版图片叠加在三维模型上，得到换色后的三维模型，换色后的三维模型相比于换色前的三维模型只改变了目标区域颜色，不会改变目标区域纹理图案，也不会改变其他区域的颜色和纹理图案，能够实现当换肤前皮肤和换肤后皮肤的差别只在于颜色时，不必重新加载后皮肤，节约了网络资源。

需要说明的是，本申请实施例所提供的三维模型换色方法一般由服务器 103执行，相应地，三维模型换色装置一般设置于服务器103中。但是，在本申请的其它实施例中，客户端101也可以与服务器103具有相似的功能，从而执行本申请实施例所提供的三维模型换色方法。

以下对本申请实施例的技术方案的实现细节进行详细阐述：

图2示意性示出了根据本申请的一个实施例的三维模型换色方法的流程图，该三维模型换色方法的执行主体可以是服务器，比如可以是图1中所示的服务器103。

参照图2所示，该三维模型换色方法至少包括步骤S210至步骤S250，详细介绍如下：

在步骤S210中，接收针对三维模型的换色指令，换色指令中携带有颜色指示信息和区域指示信息，颜色指示信息用于指示选定的目标颜色，区域指示信息用于指示选定的目标区域。

在本申请的一个实施例中，三维模型可以是客户端应用程序中的三维模型，在本申请的其他实施例中，三维模型可以是web端应用程序中的三维模型，比如，可以是网页游戏中的虚拟形象或虚拟道具，还可以是三维模型开发程序中的虚拟形象。

在本申请的一个实施例中，在接收针对三维模型的换色指令之前，可以先获取三维模型，若三维模型是web端中的三维模型，则可以通过应用程序中的模型渲染接口获取三维模型。若web端应用程序是运行在浏览器中的开发引擎Three.js中的虚拟形象，则可以通过Three.js中封装的模型渲染接口 (WebGL)获取三维模型，其中，WebGL可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。

在本申请的一个实施例中，可以通过监测用户或机器在浏览器的模型编辑界面中针对三维模型的换色操作，以接收针对三维模型的换色指令。换色操作可以包括点击模型编辑界面中三维模型或区域选择按钮的模型点击操作，点击模型编辑界面中出现的待选颜色的颜色点击操作，或向模型编辑界面中输入颜色参数值的输入操作。通过识别模型编辑界面中模型点击操作的点击位置对应于三维模型的区域生成区域指示信息；通过识别模型编辑界面中的颜色点击操作对应的待选颜色或输入的颜色参数值生成颜色指示信息。图3示意性示出了本申请的一个实施例的点击模型编辑界面中出现的待选颜色的界面示意图。

在本申请的一个实施例中，模型编辑界面可以是应用程序的运行界面如游戏中界面，以实现在游戏的过程中实时换肤，可以让玩家实时查看游戏内真实呈现的皮肤效果，提高游戏体验。

在本申请的一个实施例中，在获取三维模型之后，在接收针对三维模型的换色指令之前，还可以获取分区指令，基于三维模型中的零件在三维模型中的分布位置，确定各个零件所属区域，以通过识别模型编辑界面中三维模型的点击位置，确定点击位置对应的目标区域，其中，点击位置可以是三维模型或区域选择按钮。例如，当三维模型是游戏角色时，可以将游戏角色分为武器区域、上衣区域等；当三维模型是车辆模型时，可以将车辆模型分为主色区域、辅色区域及细节区域等，其中，主色区域可以包括车前盖、车顶盖及车后盖，辅色区域可以包括车辆轮毂盖，细节区域可以包括车上装饰图案等。

在本申请的一个实施例中，在获取分区指令之前，各个零件或模型各个位置对应的区域可以预先设定，可以在模型编辑界面中选择，也可以是系统预先配置。

继续参照图2，在步骤S220中，基于三维模型的零件分布，生成用于区分目标区域与三维模型中其他区域的蒙版图片。

在本申请的一个实施例中，可以将三维模型在二维平面上展开，得到三维模型的模型贴图；获取目标区域对应的零件在模型贴图中的分布；基于目标区域对应的零件在模型贴图中的分布边界，将三维模型的蒙版图片分割成目标区域与其他区域；对目标区域和其他区域进行区分处理，得到蒙版图片，图4A示意性示出了本申请的一个实施例的车辆模型的示意图，图4B示意性示出了图4A中的车辆模型对应的模型贴图的示意图；图4C示意性示出了本申请的图4A中的车辆模型对应的目标区域为主色区域的蒙版图片示意图；图 4D示意性示出了本申请的图4A中的车辆模型对应的目标区域为辅色区域的蒙版图片示意图；图4E示意性示出了本申请的图4A中的车辆模型对应的目标区域为细节区域的蒙版图片示意图。

在本申请的一个实施例中，可以通过坐标对照表将三维模型在二维平面上展开，坐标对照表中记录的可以是三维模型的纹理贴图坐标(UV坐标)。

在本申请的一个实施例中，可以沿着目标区域对应的零件在模型贴图中的分布边界描绘，以将三维模型的蒙版图片分割成目标区域与其他区域，可以在绘图工具中进行边界描绘。在本申请的其他实施例中，可以根据需要自定义描绘方式。

在本申请的一个实施例中，对目标区域和其他区域进行区分处理可以包括：对目标区域和其他区域进行了不同处理，只对目标区域进行了处理，或只对其他区域进行了处理。被执行了区分处理后的目标区域中的像素点和其他区域中的像素点不同，以实现无需获取像素点在蒙版图片中的位置，只通过识别区分处理后的像素点自身，即可确定像素点所属区域。例如，区分处理可以是将目标区域和其他区域处理成不同透明度或不同颜色。

在步骤S230中，基于目标颜色和目标区域，确定蒙版图片的蒙版颜色。

在本申请的一个实施例中，可以获取蒙版图片中各个蒙版像素点对应于三维模型的位置；若蒙版像素点对应于三维模型的位置在目标区域中，则将蒙版像素点的像素颜色确定为目标颜色；若蒙版像素点对应于三维模型的位置在其他区域中，则将蒙版像素点的像素颜色确定为白色；将蒙版像素点的像素颜色按照蒙版像素点在蒙版图片中的位置进行组合，得到蒙版颜色。被确定为目标颜色的蒙版像素点被叠加在三维模型上对应的模型像素点时，叠加后的模型像素点的颜色被改变，比如，蒙版像素点为红色，模型像素点为黄色，则叠加后的模型像素点的颜色为绿色；被确定为白色的蒙版像素点被叠加在三维模型上对应的模型像素点时，叠加后的模型像素点的颜色不变，仍为模型像素点本来的颜色。

在步骤S240中，将蒙版颜色填充在蒙版图片中。

在本申请的一个实施例中，可以将蒙版图片导入至片段着色器中；通过片段着色器遍历蒙版图片中的各个蒙版像素点；基于各个蒙版像素点对应的区分处理结果，确定各个蒙版像素点的像素颜色；将蒙版像素点的像素颜色填充在蒙版像素点处。

在该实施例中，使用图形处理器(Graphics Processing Unit，GPU)中的着色器(Shader)处理蒙版图片，利用GPU加速实时更新着色器并同步到模型呈现，用WebGL的计算可进入GPU加速的特性将图像计算转移到GPU中，大大提高web端的计算效率，能够解决web端算力低下的问题，同时保留了 web端随时打开无需下载的优点，以实现对web端的三维模型实时换肤，可以在模型编辑界面实时观看到三维模型的皮肤变化。

在本申请的一个实施例中，基于各个蒙版像素点对应的区分处理结果，确定各个蒙版像素点的像素颜色的过程可以包括：若蒙版像素点对应的区分处理结果为目标区域对应的区分处理结果，则通过坐标对照表查找顶点着色器确定蒙版像素点的像素颜色；若蒙版像素点对应的区分处理结果为其他区域对应的区分处理结果，则将蒙版像素点的像素颜色确定为白色。通过识别蒙版像素点自身确定各个蒙版像素点的像素颜色，不必获取各个蒙版像素点的位置，节约了计算资源。同时，该实施例针对对应于其他区域对应的区分处理结果的蒙版像素点，没有查找蒙版像素点的像素颜色，而是直接把对应于区分处理结果的蒙版像素点确定为白色，进一步节约了计算资源。

在本申请的一个实施例中，通过坐标对照表查找顶点着色器确定蒙版像素点的像素颜色的过程可以包括：获取蒙版像素点在蒙版图片中的位置；基于蒙版像素点在蒙版图片中的位置，通过坐标对照表查找顶点着色器中对应蒙版像素点的目标颜色和法线方向，其中，法线方向用于表示蒙版像素点的倾斜程度；获取三维模型的光照分布；基于目标颜色、法线方向和光照分布，确定蒙版像素点的像素颜色，以确定目标区域中凹凸程度不同的各个像素点的像素颜色，使获得的像素颜色更加准确。

在本申请的一个实施例中，可以根据三维模型所处的显示环境和三维模型的显示角度，确定三维模型的光照分布。

在步骤S250中，将填充后的蒙版图片叠加在三维模型上，得到换色后的三维模型。

在本申请的一个实施例中，可以将填充后的蒙版图片以正片叠底的方式叠加在三维模型上。

在本申请的一个实施例中，可以将模型贴图导入至片段着色器中；获取模型贴图中贴图像素点在换色前的待换颜色对应的第一颜色参数组；获取贴图像素点对应的蒙版像素点的像素颜色对应的第二颜色参数组；将第一颜色参数组与第二颜色参数组中对应于同一参数的参数值相乘，得到显示参数组，将第一颜色参数组替换为显示参数组；将替换后的模型贴图转换成三维图形，得到换色后的三维模型。

在本申请的一个实施例中，若颜色指示信息用于指示换色后的显示颜色，则可以将目标区域进行灰度处理，填充后的蒙版图片叠加在灰度处理后的三维模型上，以实现换色后的目标区域的颜色是显示颜色。

在本申请的一个实施例中，若识别到换色指令的点击位置对应于精准换色按钮，则可以生成携带用于指示换色后的显示颜色的颜色指示信息。

在图2的实施例中，通过接收针对三维模型的换色指令，换色指令中携带有颜色指示信息和区域指示信息，颜色指示信息用于指示选定的目标颜色，区域指示信息用于指示选定的目标区域，基于三维模型的零件分布，生成用于区分目标区域与三维模型中其他区域的蒙版图片；基于目标颜色和目标区域，确定蒙版图片的蒙版颜色；将蒙版颜色填充在蒙版图片中，并将填充后的蒙版图片叠加在三维模型上，得到换色后的三维模型，换色后的三维模型相比于换色前的三维模型只改变了目标区域颜色，不会改变目标区域纹理图案，也不会改变其他区域的颜色和纹理图案，能够实现当换肤前皮肤和换肤后皮肤的差别只在于颜色时，不必重新加载后皮肤，节约了网络资源。

本申请的三维模型换色方法实时换皮的玩法扩展性强，不仅可以应用在游戏内，如表现游戏角色生气时脸部模型实时涨红。同时在web模型编辑领域也可以换取很多益处，由于web端3d渲染与模型编辑软件效果不同，因此常常出现模型师不停修改颜色，导入web查看再更新的情况，本方案可以 web端内直接进行最佳配色的调试而无需每次导入操作。

在本申请的一个实施例中，可以使用本申请的三位模型换色方法对车辆模型换色，图5A示意性示出了本申请的一个实施例的对车辆模型换色前车辆模型示意图，图5A中的车辆模型的主色区域、辅色区域和细节区域在换色前均为白色。图5B示意性示出了本申请的一个实施例的对图5A中的车辆模型主色区域换色后车辆模型示意图；图5C示意性示出了本申请的一个实施例的对图5A中的车辆模型辅色区域换色后车辆模型示意图；图5D示意性示出了本申请的一个实施例的对图5A中的车辆模型细节区域换色后车辆模型示意图；

图5E示意性示出了本申请的一个实施例的对图5A中的车辆模型多个区域换色后车辆模型示意图。

图6示意性示出了应用本申请的三维模型进行web3d实时炫彩皮肤操作的流程图，该三维模型换色方法的执行主体可以是服务器，比如可以是图1 中所示的服务器103。

参照图6所示，开始web3d实时炫彩皮肤操作后，使用三维模型换色方法至少包括步骤S610至步骤S670，详细介绍如下：

在步骤S610中，创建web3d场景；

在步骤S620中，导入web3d模型；

在步骤S630中，创建shader材质；

在步骤S640中，创建目标区域蒙版图片；

在步骤S650中，将蒙版图片导入shader材质；

在步骤S660中，替换蒙版颜色并与材质进行正片叠底；

在步骤S670中，新纹理更新到模型上，以实现实时炫彩换皮。

在图6的实施例中，材质可以包括图像的图案、纹理等图像信息，材质可以是上述实施例中记载的模型贴图。

在本申请的一个实施例中，在步骤S630中，可以通过以下代码创建 shader材质：“

然后，将顶点着色器每个点输出导入到片段着色器fragmentShader。

在步骤S650中，将蒙版图片导入shader材质的代码可以包括：

片段着色器会获取uniforms里的参数。上述代码中，texture为模型贴图颜色，mask为蒙版颜色，r,g,b为自定义颜色色值。

在步骤S660中，材质可以是上述实施例中记载的模型贴图，替换蒙版颜色并与材质进行正片叠底的步骤可以包括：

在fragShader中进行颜色计算处理：

这个main函数为着色器执行函数，这段函数中着色器shader会将所有的片段着色器进行处理，相当于遍历图像上每个像素点，然后对像素点的颜色进行处理再输出新的图像。

步骤S660中的代码通过判断蒙版每个像素的透明度(因为本案例使用的是目标区域涂白，其他区域透明的蒙版图片)，如果当前像素不透明说明这个像素点需要换色，于是将传入的目标颜色替换掉蒙版上不透明的部分(在本案例中这些不透明部分为白色)，而透明区域统一改成白色。最后将这个蒙版图片与材质进行正片叠底效果叠加。由于白色区域正片叠底不改变原纹理颜色，而目标区域将会在保留原纹理图案的前提下进行换色。新的目标区域是模型贴图的shader颜色与蒙版颜色进行叠加，如模型贴图的当前片段着色器颜色是灰色vec4(0.5，0.5，0.5，1.0)，蒙版颜色为蓝色vec4(0.1，0.1， 1.0，1.0)，叠加后则获取新的颜色vec4(0.05，0.05，0.5，1.0)。

在上述代码中，dataMask＝vec4(r，g，b，1.)；为蒙版颜色，4个参数分别为颜色的r,g,b,a(红，绿，蓝，透明度)4个值，范围为0-1，如将 dataMask设为(1.0，0.0，0.0，1.0)，则蒙版颜色变为红色；将dataMask设为(0.0，1.0，0.0，1.0)，则蒙版颜色变为绿色。在代码中实时修改 dataMasks的rgb值即可实时的替换当前蒙版图片的蒙版颜色，并叠加到模型贴图上，进行换色。

图7A示意性示出了本申请一个实施例的模型贴图示意图，图7B示意性示出了本申请一个实施例的蒙版图片示意图，图7C示意性示出了本申请一个实施例的将图7A中的模型贴图和图7B中的蒙版图片正片叠底后的示意图，图7D示意性示出了本申请一个实施例的图7C对应的三维模型的示意图。

以下介绍本申请的装置实施例，可以用于执行本申请上述实施例中的三维模型换色方法。对于本申请装置实施例中未披露的细节，请参照本申请上述的三维模型换色方法的实施例。

图8示意性示出了根据本申请的一个实施例的三维模型换色装置的框图。

参照图8所示，根据本申请的一个实施例的三维模型换色装置800，包括接收模块801、生成模块802、确定模块803和叠加模块804。

根据本申请实施例的一个方面，基于前述方案，接收模块801配置为接收针对三维模型的换色指令，换色指令中携带有颜色指示信息和区域指示信息，颜色指示信息用于指示选定的目标颜色，区域指示信息用于指示选定的目标区域；生成模块802配置为基于三维模型的零件分布，生成用于区分目标区域与三维模型中其他区域的蒙版图片；确定模块803配置为基于目标颜色和目标区域，确定蒙版图片的蒙版颜色；叠加模块804配置为将蒙版颜色填充在蒙版图片中，并将填充后的蒙版图片叠加在三维模型上，得到换色后的三维模型。

在本申请的一个实施例中，基于前述方案，确定模块803配置为：获取蒙版图片中各个蒙版像素点对应于三维模型的位置；若蒙版像素点对应于三维模型的位置在目标区域中，则将蒙版像素点的像素颜色确定为目标颜色；若蒙版像素点对应于三维模型的位置在其他区域中，则将蒙版像素点的像素颜色确定为白色；将蒙版像素点的像素颜色按照蒙版像素点在蒙版图片中的位置进行组合，得到蒙版颜色。

在本申请的一个实施例中，基于前述方案，生成模块802配置为：将三维模型在二维平面上展开，得到三维模型的模型贴图；获取目标区域对应的零件在模型贴图中的分布；基于目标区域对应的零件在模型贴图中的分布边界，将三维模型的蒙版图片分割成目标区域与其他区域；对目标区域和其他区域进行区分处理，得到蒙版图片。

在本申请的一个实施例中，基于前述方案，叠加模块804配置为：将蒙版图片导入至片段着色器中；通过片段着色器遍历蒙版图片中的各个蒙版像。

Claims (10)

1.一种三维模型换色方法，其特征在于，包括：

接收针对三维模型的换色指令，所述换色指令中携带有颜色指示信息和区域指示信息，所述颜色指示信息用于指示选定的目标颜色，所述区域指示信息用于指示选定的目标区域，

基于所述三维模型的零件分布，生成用于区分所述目标区域与所述三维模型中其他区域的蒙版图片；

基于所述目标颜色和所述目标区域，确定所述蒙版图片的蒙版颜色；

将所述蒙版颜色填充在所述蒙版图片中，并将填充后的蒙版图片叠加在所述三维模型上，得到换色后的三维模型。

2.根据权利要求1所述的三维模型换色方法，其特征在于，所述基于所述目标颜色和所述目标区域，确定所述蒙版图片的蒙版颜色，包括：

获取所述蒙版图片中各个蒙版像素点对应于所述三维模型的位置；

若所述蒙版像素点对应于所述三维模型的位置在所述目标区域中，则将所述蒙版像素点的像素颜色确定为所述目标颜色；

若所述蒙版像素点对应于所述三维模型的位置在所述其他区域中，则将所述蒙版像素点的像素颜色确定为白色；

将所述蒙版像素点的像素颜色按照所述蒙版像素点在所述蒙版图片中的位置进行组合，得到所述蒙版颜色。

3.根据权利要求1所述的三维模型换色方法，其特征在于，所述基于所述三维模型的零件分布，生成用于区分所述目标区域与所述三维模型中其他区域的蒙版图片，包括：

将所述三维模型在二维平面上展开，得到所述三维模型的模型贴图；

获取所述目标区域对应的零件在所述模型贴图中的分布；

基于所述目标区域对应的零件在所述模型贴图中的分布边界，将所述三维模型的蒙版图片分割成所述目标区域与所述其他区域；

对所述目标区域和所述其他区域进行区分处理，得到所述蒙版图片。

4.根据权利要求3所述的三维模型换色方法，其特征在于，所述将所述蒙版颜色填充在所述蒙版图片中，包括：

将所述蒙版图片导入至片段着色器中；

通过所述片段着色器遍历所述蒙版图片中的各个蒙版像素点；

基于各个蒙版像素点对应的区分处理结果，确定各个蒙版像素点的像素颜色；

将所述蒙版像素点的像素颜色填充在所述蒙版像素点处。

5.根据权利要求4所述的三维模型换色方法，其特征在于，所述基于各个蒙版像素点对应的区分处理结果，确定各个蒙版像素点的像素颜色，包括：

若所述蒙版像素点对应的区分处理结果为所述目标区域对应的区分处理结果，则通过坐标对照表查找顶点着色器确定所述蒙版像素点的像素颜色；

若所述蒙版像素点对应的区分处理结果为所述其他区域对应的区分处理结果，则将所述蒙版像素点的像素颜色确定为白色。

6.根据权利要求5所述的三维模型换色方法，其特征在于，所述通过坐标对照表查找顶点着色器确定所述蒙版像素点的像素颜色，包括：

获取所述蒙版像素点在所述蒙版图片中的位置；

基于所述蒙版像素点在所述蒙版图片中的位置，通过所述坐标对照表查找所述顶点着色器中对应所述蒙版像素点的目标颜色和法线方向；

获取所述三维模型的光照分布；

基于所述目标颜色、所述法线方向和所述光照分布，确定所述蒙版像素点的像素颜色。

7.根据权利要求4所述的三维模型换色方法，其特征在于，所述将填充后的蒙版图片叠加在所述三维模型上，得到换色后的三维模型，包括：

将所述模型贴图导入至所述片段着色器中；

获取所述模型贴图中贴图像素点在换色前的待换颜色对应的第一颜色参数组；

获取所述贴图像素点对应的蒙版像素点的像素颜色对应的第二颜色参数组；

将所述第一颜色参数组与所述第二颜色参数组中对应于同一参数的参数值相乘，得到显示参数组，将所述第一颜色参数组替换为所述显示参数组；

将替换后的模型贴图转换成三维图形，得到所述换色后的三维模型。

8.根据权利要求1所述的三维模型换色方法，其特征在于，在接收针对三维模型的换色指令之前，所述方法还包括：

获取所述三维模型；

获取针对所述三维模型的分区指令；

基于所述零件在所述三维模型中的分布位置，确定所述零件所属区域。

9.根据权利要求1所述的三维模型换色方法，其特征在于，在将填充后的蒙版图片叠加在所述三维模型上之前，所述方法还包括：

若所述颜色指示信息用于指示换色后的显示颜色，则将所述目标区域进行灰度处理。

10.一种三维模型换色装置，其特征在于，包括：

接收模块，配置为接收针对三维模型的换色指令，所述换色指令中携带有颜色指示信息和区域指示信息，所述颜色指示信息用于指示选定的目标颜色，所述区域指示信息用于指示选定的目标区域；

生成模块，配置为基于所述三维模型的零件分布，生成用于区分所述目标区域与所述三维模型中其他区域的蒙版图片；

确定模块，配置为基于所述目标颜色和所述目标区域，确定所述蒙版图片的蒙版颜色；

叠加模块，配置为将所述蒙版颜色填充在所述蒙版图片中，并将填充后的蒙版图片叠加在所述三维模型上，得到换色后的三维模型。

Images