CN109993838A - 基于WebGL和人脸重建的虚拟试发实现方法和系统 - Google Patents

Abstract

本发明公开了一种基于WebGL和人脸重建的虚拟试发实现方法和系统，包括步骤：将人脸模型和发型模型在WebGL框架下进行匹配；收集人脸数据集，训练脸型分类卷积神经网络模型；生成用于发型推荐的脸型‑发型映射表；输入单张用户正脸照片，由正脸照片识别出脸型，加载相应三维人脸模型并提供发型推荐；由用户正脸照片生成新的三维人脸纹理贴图；将三维人脸模型和新的三维人脸纹理贴图融合并按预置位置和比例渲染在WebGL框架下；根据发型模型对应的预览图，选择加载发型模型和调整发型颜色，并通过WebGL技术展示虚拟试发结果。本发明提供了多角度的三维试发结果展示，提升了虚拟试发的便捷性，响应快。

Description

基于WebGL和人脸重建的虚拟试发实现方法和系统

技术领域

本发明涉及三维仿真技术领域，具体涉及一种基于WebGL和人脸重建的虚拟试发实现方法和系统。

背景技术

目前在互联网+的时代背景下，美发市场仍然处于一种传统消费模式，客户在理发的过程中只能通过发型杂志或理发师的描述获得发型相关信息，同时，由于理发的不可逆性，客户无法提前观察不同发型的视觉效果，最终导致实际理发结果与客户预期不符，理发体验不佳的尴尬情况。虚拟试发系统是一种应用于美发电子商务的实时交互平台，对改善用户理发消费体验，促进美发行业发展具有很大作用。

然而，现有的虚拟试发技术并不成熟，系统尚不完善。国内的虚拟试发多为2D系统，通过把发型的平面贴图覆盖到用户的照片上来完成试发。此类系统缺乏真实性，很难达到理想的效果。为了解决这个问题，部分公司、研究机构也对虚拟试发进行了研究，现在市面上的虚拟试发系统主要分为两种：

1.基于2D图像的虚拟试发：

主要面向客户，因为软件小，便宜甚至免费，但是用户体验差。随着计算机技术的发展和生活节奏的不断加速，网络虚拟系统日趋成熟化和大众化，而顾客在理发前如果能通过网络试发平台选择自己合适的发型，便可改善顾客的理发体验。但是该类软件采用2D图片匹配人脸，未采用3D模型匹配技术，用户观测角度单一，体验性差。

2.基于增强现实的虚拟试发：

主要面向理发店，原因是性价比低，该系统需要价格数千的增强现实设备，如kinect，而普通顾客平均一个月理发一次，不需要经常使用。这种方式的试发能给用户更加直观的感受，但目前，技术上发型和人脸匹配效果不理想，试发动作限制较大。这种试发技术虽然先进，但却不适合平民个体，所以暂时市场较小，技术发展突破也比较迟缓。

综上所述，现有虚拟试发系统主要存在几个不足：

1.采用2D图片设计，真实感差；

2.人机交互还不够自然，系统不够稳定；

3.未提供专业的发型推荐功能。

发明内容

为解决现有技术中的不足，本发明提供一种基于WebGL(Web图形库)和人脸重建的虚拟试发实现方法，解决了现有虚拟试发系统真实感差、人机交互不自然、未提供专业的发型推荐功能的问题。

为了实现上述目标，本发明采用如下技术方案：一种基于WebGL和人脸重建的虚拟试发实现方法和系统，其特征在于：包括步骤：

步骤一，准备虚拟试发素材，将预置的人脸模型和发型模型在WebGL框架下进行匹配；收集人脸数据集，训练脸型分类卷积神经网络模型；生成用于发型推荐的脸型-发型映射表；

步骤二，输入单张用户正脸照片，根据正脸照片识别出脸型，加载预置的三维人脸模型并提供发型推荐；

步骤三，由用户正脸照片生成新的三维人脸纹理贴图；

步骤四，将步骤二的三维人脸模型和步骤三生成的新的三维人脸纹理贴图融合成最终的三维人脸模型并按预置位置和比例显示在WebGL框架下；

步骤五，选择并加载发型模型和调整发型颜色，并通过WebGL展示虚拟试发结果；

步骤六，根据用户操作指令实时调整试发观测位置。

前述的一种基于WebGL和人脸重建的虚拟试发实现方法，其特征是：所述将预置的人脸模型和发型模型在WebGL框架下进行匹配，具体方法包括：

(1)准备虚拟试发素材：试发素材包括不同脸型的三维人脸模型、预置的人脸模型的纹理贴图、发型模型；

(2)将人脸模型和发型模型在WebGL框架下进行显示，使得发型与人脸模型恰好匹配。

前述的一种基于WebGL和人脸重建的虚拟试发实现方法，其特征是：所述收集人脸数据集，训练脸型分类卷积神经网络模型，具体方法包括：

(1)将人脸识别数据集作为原始数据集，筛选出其中正脸照片判断脸型并加入人脸数据集中；

(2)利用收集的人脸数据集训练脸型分类卷积神经网络模型，输出为脸型类型。

前述的一种基于WebGL和人脸重建的虚拟试发实现方法，其特征是：所述生成用于发型推荐的脸型-发型映射表，具体方法为：

(1)利用爬虫脚本，以名人为关键字在网络上爬取名人的照片；

(2)利用训练的脸型分类卷积神经网络模型对爬取的照片进行脸型分类，并保存到不同文件夹下；

(3)提取不同文件夹下照片的发型样式，按照脸型-发型出现次数统计所有照片的数据，得到脸型-发型映射表。

前述的一种基于WebGL和人脸重建的虚拟试发实现方法，其特征是：所述步骤二具体为：将用户正脸照片输入已训练好的脸型分类卷积神经网络模型中，输出脸型类别，从脸型-发型映射表中找到推荐的发型信息；同时，按照脸型类别加载相应的预置人脸模型。

前述的一种基于WebGL和人脸重建的虚拟试发实现方法，其特征是：所述步骤三具体方法为：对输入的正面人脸照片进行特征点识别；基于人脸特征点对照片人脸进行缩放、平移、旋转，使照片人脸和uv平面下的人脸网格初步重合，所述人脸网格指加载的三维人脸模型，然后使用滑动最小二乘变换，使得用户输入照片的人脸和uv人脸完全重合，最后提取重合后的人脸特征区域，与预置的人脸模型纹理贴图进行泊松融合，生成新的三维人脸纹理贴图，u、v分别指三维人脸模型的纹理贴图的水平坐标、垂直坐标，uv人脸指加载的三维人脸模型的纹理贴图，在照片人脸和uv人脸完全重合后，uv坐标将照片上的每一个点精确对应到人脸模型的表面。

前述的一种基于WebGL和人脸重建的虚拟试发实现方法，其特征是：所述步骤六，根据用户操作指令实时调整试发观测位置，具体方法为：在WebGL框架下创建透视相机，控制相机移动，实时获取用户对相机的控制信息，更改相机的观察位置与角度，从而实现用户多角度观察三维虚拟试发结果。

一种基于WebGL和人脸重建的虚拟试发实现系统，其特征在于：包括浏览器端、数据库服务器以及应用服务器；

所述浏览器端，用于获取人脸重建所需用户正脸照片，并将获取的照片发送给应用服务器，接收并显示所述应用服务器返回的信息与数据；并用于通过浏览器交互按钮获取用户操作指令；

所述数据库服务器，用于存储系统中所需的三维人脸模型、预置的人脸模型的纹理贴图、发型模型；

所述应用服务器，用于接收浏览器端发送的用户正脸照片，从所述数据库服务器中获取三维人脸模型和纹理贴图，结合用户正脸照片，计算出用户个性化人脸三维模型，最后将个性化人脸三维模型数据发送给浏览器端；并用于响应浏览器交互按钮发出的用户操作指令。

前述的一种基于WebGL和人脸重建的虚拟试发实现系统，其特征在于，所述用户操作指令包括照片上传与人脸重建、发型选择、发色修改、试发结果的观测角度调整，并将操作指令发送给应用服务器；并用于接收并显示所述应用服务器返回的信息与数据。

前述的一种基于WebGL和人脸重建的虚拟试发实现系统，其特征在于，所述响应浏览器交互按钮发出的用户操作指令具体包括：接收发型选择指令，从数据库服务器中获取发型三维模型，并将发型三维模型数据发送给浏览器客户端；接收发色修改指令，并利用WebGL框架重新显示发色至指定颜色；接收试发结果的观测角度调整指令，并通过调整相机观察位置和角度调整试发显示结果。

本发明所达到的有益效果：本发明打破了现有的二维试发技术局限，避免用户试发过程的观测死角，提供给用户更好的试发体验；

本发明的人脸重建部分，使用快速人脸重建方法，提取用户照片特征点泊松融合到预置三维人脸贴图中；通过脸型分类神经网络获取用户脸型，加载预置脸型模型；在快速响应的前提下保证了重建人脸对于用户相貌的还原度；

本发明的发型推荐部分，通过在网络上爬取大量明星照片，解析明星脸型和发型种类，提前制成发型-脸型映射表，在此基础上进行的发型推荐具有专业化和时代性的特点；同时，利用深度学习的分类网络完成脸型分类，具有响应速度快，准确率高的优点；

本发明的试发部分，将渲染交由webGL底层操作，可以减少虚拟试发系统复杂的工作量，提升渲染效果，使得系统运行的更加流畅。

附图说明

图1为基于WebGL和人脸重建的虚拟试发实现方法流程图；

图2为试发前期准备工作流程图；

图3为脸型-发型映射表概念图。

具体实施方式

下面结合附图对本发明作进一步描述。以下实施例仅用于更加清楚地说明本发明的技术方案，而不能以此来限制本发明的保护范围。

如图1所示，一种基于WebGL和人脸重建的虚拟试发实现方法，包括步骤：

一、完成对于虚拟试发的所有准备工作：准备虚拟试发素材并保存在数据库服务器，将人脸模型和发型模型在浏览器端的WebGL框架下进行匹配；收集人脸数据集，训练脸型分类卷积神经网络；生成用于发型推荐的脸型-发型映射表；

所述数据库服务器，用于存储系统中所需的三维人脸模型、预置的人脸模型的纹理贴图、发型模型、发型模型对应的预览图；所述浏览器端，用于获取人脸重建所需用户人脸照片，并将获取的照片发送给应用服务器；并用于通过浏览器交互按钮获取用户操作指令，包括照片上传与人脸重建、发型选择、发色修改、试发结果的观测角度调整，并将操作指令发送给应用服务器；并用于接收并显示所述应用服务器返回的信息与数据；

所述应用服务器，用于接收浏览器端发送的用户正脸照片，从所述数据库服务器中获取三维人脸模型和纹理贴图，结合用户正脸照片，计算出用户个性化人脸三维模型，最后将个性化人脸三维模型数据发送给浏览器端；并用于响应浏览器交互按钮发出的用户操作指令。

所述准备虚拟试发素材，将人脸模型和发型模型在WebGL框架下进行匹配，具体方法包括：

(1)准备虚拟试发素材并保存在数据库服务器：包括五种不同脸型的三维人脸模型、预置的五种人脸模型的纹理贴图、发型模型、发型模型对应的预览图；五种脸型包括：心形脸，方形脸，长方形脸，椭圆形脸，圆脸；

(2)将人脸模型和发型模型在浏览器端的WebGL框架下进行渲染，调整三维人脸模型坐标为(x,y,z)，使人脸模型呈现在渲染空间的中心处；设s1,s2,s3分别为人脸模型在三维空间x,y,z方向的大小，且比例满足约束，s1:s2:s3＝1:1:1，调整(s1,s2,s3)，使人脸模型大小适合用户观测；调整发型位置偏移参数(xi,yi,zi)，使发型模型位置为(x+xi,y+yi,z+zi)，且发型与人脸模型恰好匹配，不出现人脸和发型模型相互穿透的现象。

所述收集人脸数据集，训练脸型分类卷积神经网络，具体方法包括：

(1)收集人脸数据集，具体方法为：将人脸识别数据集LWF作为原始数据集，人工筛选出其中正脸照片；对于每张人脸照片，至少10人对其脸型进行判断，该实施例取20人；统计每张照片的脸型标签分布，若对于该照片，被选择最多次的脸型标签占所有标签数量的70％及以上，则选择该脸型为此照片标签，否则认定该人脸脸型不可分辨，不加入人脸数据集中；

(2)将MTCNN和VGG神经网络(MTCNN和VGG均为现有卷积神经网络模型的名字)作为脸型分类卷积神经网络模型的结构；MTCNN用于人脸检测，MTCNN将检测到的照片人脸区域作为VGG的输入；VGG用于脸型分类，修改VGG输出层为1*5的向量，该向量对应人脸照片是五种不同脸型的概率；利用处理后的人脸数据集训练脸型分类卷积神经网络模型。

所述生成用于发型推荐的脸型-发型映射表，具体方法包括：

(1)利用爬虫脚本，以名人为关键字在网络上爬取名人的照片至少10000张，该实施例取50000张；

(2)利用训练的脸型分类卷积神经网络模型对爬取的照片进行脸型分类，并保存到以脸型为文件名的文件夹下；

(3)人工提取不同文件夹下照片的发型样式，按照脸型-发型出现次数的映射关系，统计所有照片的数据；发型共三组标签：长发，长中发，短发，超短发；直发，卷发；有刘海，无刘海；每张照片下的发型样式从三组标签的每一组中提取一个，举例说明发型样式格式为：(长发，直发，有刘海)；共4*2*2种发型种类；

如图3所示，按照统计的数据，对每一种脸型，根据不同发型种类出现次数对发型种类推荐度进行排序，对应数字1～16，数字越小优先度越高，生成脸型-发型推荐映射表，映射表为5*16的python字典格式。

二、浏览器端输入单张用户正脸照片，由正脸照片识别出脸型，加载相应三维人脸模型并提供发型推荐，具体为：在浏览器端输入用户正脸照片并发送至应用服务器，应用服务器将照片输入已训练好的脸型分类卷积神经网络模型中，输出脸型类别，从预置的脸型-发型推荐表中找到推荐度为1～6的推荐发型信息；同时，按照脸型类别从数据库服务器加载相应的预置人脸模型；

所述应用服务器，用于接收浏览器端发送的用户正脸照片，同时从所述数据库服务器中获取三维人脸模型和纹理贴图，结合用户正脸照片，计算出用户个性化人脸三维模型，最后将个性化人脸三维模型数据发送给浏览器客户端；用于接收发型选择指令，从数据库服务器中获取发型三维模型，并将发型三维模型数据发送给浏览器客户端；用于接收发色修改指令，并利用WebGL框架重新渲染发色至指定颜色；

三、应用服务器由用户正脸照片生成个性化三维人脸贴图；具体方法为：通过opencv库dlib人脸识别技术对输入的正面人脸照片进行特征点识别；基于人脸特征点对照片人脸进行缩放、平移、旋转，使照片人脸和uv(u、v分别指三维人脸模型的纹理贴图的水平坐标，垂直坐标)平面下的人脸网格初步重合，该人脸网格指加载的三维人脸模型，然后使用滑动最小二乘变换，使得用户输入照片的人脸和uv人脸完全重合，uv人脸指上述加载的三维人脸模型的纹理贴图，在照片人脸和uv人脸完全重合后，uv坐标可以将照片上的每一个点精确对应到人脸模型的表面；最后提取重合后的人脸特征区域，与预置的纹理贴图进行泊松融合，生成新的纹理贴图；

四、应用服务器将步骤二的三维人脸模型和步骤三生成的新的三维人脸纹理贴图发送给浏览器端，浏览器通过WebGL技术将三维人脸模型和纹理贴图融合并按预置位置参数(x,y,z)(x+xi,y+yi,z+zi)，比例参数(s1,s2,s3)渲染在WebGL框架下；

五、浏览器端实时获取用户试发指令并发送给应用服务器，应用服务器从数据库服务器选择加载发型模型并调整发型颜色，重新将数据返回给浏览器端，浏览器端通过WebGL技术展示虚拟试发结果。具体为：用户更换发型模型时，以发型模型对应的预览图作为交互接口，触发点击事件，浏览器端获取用户的发型选择信息，然后加载对应的发型模型，三维人脸模型的坐标为(x,y,z)，发型模型的坐标为(x+xi,y+yi,z+zi)，其中xi,yi,zi为可预设的可调整的参数，使得发型模型贴合到人脸模型上；调整发型颜色时，浏览器端获取用户选择的发型颜色，将颜色转化为rgb十六进制表示法，即#xxxxxx，x为0～9的数字或A～F的字母；获取当前渲染场景的发型模型的贴图，根据所得rgb值重新调用WebGL着色器渲染；

六、浏览器端根据用户操作指令实时调整试发观测位置，具体为：在WebGL框架下创建透视相机，编写脚本控制相机移动；浏览器端以用户鼠标点击，滑动事件作为交互接口，实时获取用户对相机的控制信息，通过脚本更改相机的观察位置与角度，从而实现用户多角度观察三维虚拟试发结果。

将试发记录保存到数据服务器，用户可在以后随时提取记录进行虚拟试发；用户保存记录时，将用户信息，人脸模型信息，选中发型信息和发色信息作为一条记录保存到数据服务器上的数据库中，用户可以随时读取数据库中存储的数据快速还原试发效果。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

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

Claims (10)

1.一种基于WebGL和人脸重建的虚拟试发实现方法，其特征在于：包括步骤：

步骤一，准备虚拟试发素材，将预置的人脸模型和发型模型在WebGL框架下进行匹配；收集人脸数据集，训练脸型分类卷积神经网络模型；生成用于发型推荐的脸型-发型映射表；

步骤二，输入单张用户正脸照片，根据正脸照片识别出脸型，加载预置的三维人脸模型并提供发型推荐；

步骤三，由用户正脸照片生成新的三维人脸纹理贴图；

步骤四，将步骤二的三维人脸模型和步骤三生成的新的三维人脸纹理贴图融合成最终的三维人脸模型并按预置位置和比例显示在WebGL框架下；

步骤五，选择并加载发型模型和调整发型颜色，并通过WebGL展示虚拟试发结果；

步骤六，根据用户操作指令实时调整试发观测位置。

2.根据权利要求1所述的一种基于WebGL和人脸重建的虚拟试发实现方法，其特征是：所述将预置的人脸模型和发型模型在WebGL框架下进行匹配，具体方法包括：

(1)准备虚拟试发素材：试发素材包括不同脸型的三维人脸模型、预置的人脸模型的纹理贴图、发型模型；

(2)将人脸模型和发型模型在WebGL框架下进行显示，使得发型与人脸模型恰好匹配。

3.根据权利要求1所述的一种基于WebGL和人脸重建的虚拟试发实现方法，其特征是：所述收集人脸数据集，训练脸型分类卷积神经网络模型，具体方法包括：

(1)将人脸识别数据集作为原始数据集，筛选出其中正脸照片判断脸型并加入人脸数据集中；

(2)利用收集的人脸数据集训练脸型分类卷积神经网络模型，输出为脸型类型。

4.根据权利要求1所述的一种基于WebGL和人脸重建的虚拟试发实现方法，其特征是：所述生成用于发型推荐的脸型-发型映射表，具体方法为：

(1)利用爬虫脚本，以名人为关键字在网络上爬取名人的照片；

(2)利用训练的脸型分类卷积神经网络模型对爬取的照片进行脸型分类，并保存到不同文件夹下；

(3)提取不同文件夹下照片的发型样式，按照脸型-发型出现次数统计所有照片的数据，得到脸型-发型映射表。

5.根据权利要求1所述的一种基于WebGL和人脸重建的虚拟试发实现方法，其特征是：所述步骤二具体为：将用户正脸照片输入已训练好的脸型分类卷积神经网络模型中，输出脸型类别，从脸型-发型映射表中找到推荐的发型信息；同时，按照脸型类别加载相应的预置人脸模型。

6.根据权利要求1所述的一种基于WebGL和人脸重建的虚拟试发实现方法，其特征是：所述步骤三具体方法为：对输入的正面人脸照片进行特征点识别；基于人脸特征点对照片人脸进行缩放、平移、旋转，使照片人脸和uv平面下的人脸网格初步重合，所述人脸网格指加载的三维人脸模型，然后使用滑动最小二乘变换，使得用户输入照片的人脸和uv人脸完全重合，最后提取重合后的人脸特征区域，与预置的人脸模型纹理贴图进行泊松融合，生成新的三维人脸纹理贴图，u、v分别指三维人脸模型的纹理贴图的水平坐标、垂直坐标，uv人脸指加载的三维人脸模型的纹理贴图，在照片人脸和uv人脸完全重合后，uv坐标将照片上的每一个点精确对应到人脸模型的表面。

7.根据权利要求1所述的一种基于WebGL和人脸重建的虚拟试发实现方法，其特征是：所述步骤六，根据用户操作指令实时调整试发观测位置，具体方法为：在WebGL框架下创建透视相机，控制相机移动，实时获取用户对相机的控制信息，更改相机的观察位置与角度，从而实现用户多角度观察三维虚拟试发结果。

8.一种基于WebGL和人脸重建的虚拟试发实现系统，其特征在于：包括浏览器端、数据库服务器以及应用服务器；

所述浏览器端，用于获取人脸重建所需用户正脸照片，并将获取的照片发送给应用服务器，接收并显示所述应用服务器返回的信息与数据；并用于通过浏览器交互按钮获取用户操作指令；

所述数据库服务器，用于存储系统中所需的三维人脸模型、预置的人脸模型的纹理贴图、发型模型；

所述应用服务器，用于接收浏览器端发送的用户正脸照片，从所述数据库服务器中获取三维人脸模型和纹理贴图，结合用户正脸照片，计算出用户个性化人脸三维模型，最后将个性化人脸三维模型数据发送给浏览器端；并用于响应浏览器交互按钮发出的用户操作指令。

9.根据权利要求8所述的一种基于WebGL和人脸重建的虚拟试发实现系统，其特征在于，所述用户操作指令包括照片上传与人脸重建、发型选择、发色修改、试发结果的观测角度调整，并将操作指令发送给应用服务器。

10.根据权利要求8所述的一种基于WebGL和人脸重建的虚拟试发实现系统，其特征在于，所述响应浏览器交互按钮发出的用户操作指令具体包括：接收发型选择指令，从数据库服务器中获取发型三维模型，并将发型三维模型数据发送给浏览器客户端；接收发色修改指令，并利用WebGL框架重新显示发色至指定颜色；接收试发结果的观测角度调整指令，并通过调整相机观察位置和角度调整试发显示结果。