CN106548392A

CN106548392A - 一种基于webGL技术的虚拟试衣实现方法

Info

Publication number: CN106548392A
Application number: CN201610956727.6A
Authority: CN
Inventors: 江超群; 童晶; 杨语晨; 卢光宏
Original assignee: Changzhou Campus of Hohai University
Current assignee: Changzhou Campus of Hohai University
Priority date: 2016-10-27
Filing date: 2016-10-27
Publication date: 2017-03-29
Anticipated expiration: 2036-10-27
Also published as: CN106548392B

Abstract

本发明公开了一种基于webGL技术的虚拟试衣实现方法，当用户给定体型特征参数时，做到使人体模型的体型逼近用户给定的体型；当用户选择服饰时，给定方案来消除服饰模型与人体模型的穿透问题；给定方案使用户可以改变人体模型的姿势或动作；本发明所提及的方案，能够实现webGL平台下的虚拟试衣，且复杂度较低，可以表现出优秀的试衣效果。

Description

一种基于webGL技术的虚拟试衣实现方法

技术领域

本发明涉及一种基于webGL技术的虚拟试衣实现方法，属于三维仿真技术领域。

背景技术

在网络通信日益发达的今天，电子商务已经成为我们生活中不可分割的一部分，并且服装在电子商务交易中扮演着很重要的角色。但是，由于网购的局限性，购买者买到的服装经常会出现不合适的情况，导致购衣体验差、退货率极高等问题。由此推动了网上虚拟试衣系统的研究，虚拟试衣系统是一种应用于服装电子商务的实时交互平台，对促进服饰行业、鞋类、箱包以及化妆品等行业发展具有很大作用。

但是，目前来说，大部分的虚拟试衣系统因为使用了三维场景，需要下载独立的软件，有的软件需要安装在电脑上，有的需要安装在手机上，使用起来不够方便。

目前网页端的虚拟试衣系统大部分需要使用其他的插件进行支持，用户第一次使用前需要在本机上安装指定的插件，之后才可以使用，甚至有些不擅长使用电脑的人不知道如何安装，难以使用。

WebGL(全写Web Graphics Library)是一种三维绘图标准，这种绘图技术标准可以为网页内容中的三维场景绘制提供硬件三维加速渲染。目前从全球范围来看，WebGL技术应用越来越广泛，而现在还缺少一种较为系统的基于WebGL平台的虚拟试衣解决方案。

发明内容

目的：为了克服现有技术中存在的不足，本发明提供一种基于webGL技术的虚拟试衣实现方法。

技术方案：为解决上述技术问题，本发明采用的技术方案为：

本发明效果基于WebGL平台，使用B/S架构。WebGL平台因为它能够调用系统底层的显卡，可以不借助任何插件在网页端很好的进行三维渲染，呈现出越来越火热的趋势。同时，越来越多的开发者投身于WebGL的开发，也使得网页端三维内容越来越丰富。

本发明中主要提及了三部分技术方案，分别是：体型调整，服装更换，动作变化。在实际实施时，三部分应该是相互关联的。

一种基于webGL技术的虚拟试衣实现方法，包括步骤如下：

步骤一：准备虚拟试衣的素材，包括：三维人体模型、服饰模型、服装模型对应的黑白透明贴图；

步骤二：对三维人体模型进行骨架蒙皮操作，为三维人体模型中的骨架建立一个模型，B_i＝(T_x,y_,T_z,R_x,R_y,R_z,S_x,S_y,S_z),i＝1、2…n_b，骨架模型包含n_b个骨骼，并将所有骨骼B_i中的S_x、S_y、S_z三个值设置为1，作为三维人体模型的初始值；

步骤三：通过调节三维人体模型的骨架B_i,i＝1、2…n_b中每个骨骼的S_x、S_y、S_z三个值，来调节三维人体模型的体型；通过获得用户的体型特征参数，来确定S_x、S_y、S_z的调整值；

3a：根据体型特征参数：身高、体重、胸围、腰围、臀围，分别调节出n₁组体型特征参数不同的人体模型，即n₁＝5；提取出n₁组骨架的B_i,i＝1、2…n_b中的S_x、S_y、S_z三个值，作为缩放序列P_ij＝(S_x,S_y,S_z),i＝1、2…n_b,j＝1、2…n₁，称P_ij＝(S_x,S_y,S_z),i＝1、2…n_b,j∈[1,n₁]为第j组缩放序列，并为每组缩放序列设置一个权重W_j；

3b：设体型特征参数为Feature(种类)，求权重W_j：

用户输入的种类为Type1的体型特征参数的值为Feature_用户输入(Type1)，假设三维人体模型的原始体型特征参数的值为Feature_原始(Type1)；步骤三中设置的Type1的体型特征参数的值为Feature_大(Type1)；则权重W_j计算的公式为：

3c：根据权重W_j来调整骨架的缩放值，设d_ji＝p_ji-B_i,i＝1、2…n_b,j＝1、2…n₁，使q_i＝B_i,i＝1、2…n_b来备份骨架B_i,i＝1、2…n_b的初始数据；操作时，设M_ji＝(S_x,S_y,S_z)i＝1、2…n_b,j＝1、2…n₁作为临时变量用来存储中间计算结果，计算公式如下：

M_ji＝w_j×d_ji+q_i,i＝1、2…n_b,j＝1、2…n₁w_j∈[0,1]

分别计算S_x、S_y、S_z三个值叠加值公式如下：

将骨架B_i,i＝1、2…n_b中每个骨骼的S_x、S_y、S_z三个值分别更换成x_i、y_i、z_i，完成三维人体模型的体型调节；

步骤四：通过调节三维人体模型的骨架B_i,i＝1、2…n_b中的T_x、T_y、T_z、R_x、R_y、R_z六个值，对三维人体模型进行动作设置，改变三维人体模型的姿态；设立n₂组静态动作，通过提取骨架B_i,i＝1、2…n_b中的T_x、T_y、T_z、R_x、R_y、R_z值，获得n₂组骨架动作序列Q_ij＝(T_x,T_y,T_z,R_x,R_y,R_z),i＝1、2…n_b,j＝1、2…n₂，用来控制人体的静态动作变换；

步骤五：根据多个静态动作构成动态动作，设立n₃组动态动作，其中每一个静态动作称为一个关键帧；设某个动态动作有n₄个关键帧，其中t_k为第k个关键帧的时间,从骨架B_i,i＝1、2…n_b中提取T_x、T_y、T_z、R_x、R_y、R_z值，并设置如下序列：

步骤六：用户选择一件服饰模型，此时三维人体模型身上已经穿着了n_cloth件服饰模型(n_cloth≥0)；加载用户选择的服饰模型及服饰模型对应的透明贴图设q(x,y)表示新生成的透明贴图的(x,y)处的像素值，设p_i(x,y)为第i个透明贴图的(x,y)处的像素值；用a表示黑色像素点，b表示白色像素点；设立运算符∩含义为“与”，运算规则如下

则新合成的透明贴图公式如下：

多张透明贴图合成后，将三维人体模型上的透明贴图更换为新合成的透明贴图，再将用户选择的服饰模型加载出来；

步骤七：三维人体模型的静态动作切换、动态动作切换、动态动作播放；在静态动作切换时，如果用户选择第j个动作Q_ij＝(T_x,T_y,T_z,R_x,R_y,R_z),i＝1、2…n_bj∈[1,n₂]

在更换动作时，将骨架B_i,i＝1、2…n_b中的T_x、T_y、T_z、R_x、R_y、R_z值替换为Q_ij中的T_x、T_y、T_z、R_x、R_y、R_z，表示如下：

B_i(T_x,T_y,T_z,R_x,R_y,R_z)＝Q_ij,i＝1、2…n_bj∈[1,n₂]；

在动态动作切换时，设某个动态动作共有n₄个关键帧，t_l代表这个动作动画的总时长，则设如下：

其中t_k为第k个关键帧的时间；在任意t时刻，通过公式t_c≤t mod t_l≤t_c+1找到相临t_c和t_c+1的关键帧；之后，通过线性插值运算，获得任意给定时刻t的骨骼位移值缩放值序列：

可以通过将骨架B_i,i＝1、2…n_b中的T_x、T_y、T_z、R_x、R_y、R_z值替换为Q_{任意时刻t}中的T_x、T_y、T_z、R_x、R_y、R_z，从而实现三维人体模型的动态动作切换；

在动态动作播放时，循环地执行上述获取时间t，找到相邻关键帧t_c和t_c+1，计算Q_{任意时刻t}，改变骨架动作的操作，从而实现了动态动作的播放，三维人体模型也就呈现出动态的效果。

本发明所达到的有益技术效果：

本发明提出了一种基于WebGL平台的虚拟试衣解决方案，使得浏览器端的虚拟试衣可以不通过插件来完成，极大的提升了虚拟试衣的便捷性。

本发明的人体体型调整部分，用了骨骼蒙皮技术，利用三维动画技术来解决人体模型变形问题，能够兼顾多种细节，实现人体模型的细节调整。而且可以实现对人体模型的细节调整，可以做到调整身高、腰围、胸围、臀围、上臂围等等。

而本发明的试衣部分透明贴图算法相较于现存方式，能够解决载webGL平台下模型相互穿透的问题，使得webGL平台的虚拟试衣的显示效果大大提升。化复杂的三维模型相交判断为黑白的透明贴图操作，优化了计算速度，性能较差的机器也能够较好执行。将透明区域渲染交由webGL底层操作，可以减少虚拟试衣系统复杂的工作量，提升渲染效果，使得系统运行的更加流畅。

本发明的动作部分明显的优点是，使衣服完全跟随人体变动，提升了仿真效果。同时，衣服不需要存储关键帧数据，减小了对计算机空间的消耗。并且关键帧动画技术的应用，使得动画流畅，没有卡顿，并且动画的播放速率只与时间t有关，与计算机性能和渲染帧率无关。

附图说明

图1为三维人体模型及与绑定的骨架示意图；

图2为基于WebGL平台虚拟试衣实现方法的操作流程图；

图3为试衣前期准备工作流程图；

图4为服饰模型穿透问题解决方法流程总图；

图5为服饰模型穿透问题解决方法流程分步图。

具体实施方式

下面结合附图对本发明作更进一步的说明。

如图1、图2所示，一种基于webGL技术的虚拟试衣实现方法，包括步骤如下：

在体型调整方面：

如图3所示，设初始人体模型与一套骨架绑定，用B_i＝(T_x,T_y,T_z,R_x,R_y,R_z,S_x,S_y,S_z)表示骨架中的第i根骨骼的位移值T、旋转值R和缩放值S在x轴、y轴、z轴方向的数值。从图1中可以看到这是一个人体模型与人体模型绑定的骨架的示意图，同时该示意图的上方的箭头演示了人体模型体型调整，下方的箭头演示了人体模型姿势的调整。如果骨架共有n_b根骨骼，则使用B_i＝(T_x,T_y,T_z,R_x,R_y,R_z,S_x,S_y,S_z),i＝1、2…n_b这样一组式子来表示整个骨架。初始时骨架中的所有骨骼的缩放值均为(1,1,1)。

例：我们通过在建模软件上调节人体模型的骨架B_i,i＝1、2…n_b中的每个骨骼的S_x、S_y、S_z三个值，使人体模型的体型发生改变，做到仅将模型的身高调整。然后从骨架B_i,i＝1、2…n_b中提取出每个骨骼的S_x、S_y、S_z三个值，得到了一组新的骨骼缩放数据，表示为P_i＝(S_x,S_y,S_z),i＝1、2…n_b。

我们为身高调节的骨骼缩放数据设置一个权重W，采用线性插值算法，使用q_i＝B_i(S_x,S_y,S_z),i＝1、2…n_b来备份骨架B_i(S_x,S_y,S_z),i＝1、2…n_b的初始缩放值数据，其中B_i(S_x,S_y,S_z)表示只使用骨骼B_i中的S_x、S_y、S_z三个值。设d_i＝p_i-q_i,i＝1、2…n_b用d_i表示身材高的骨架缩放数据和骨架初始缩放数据之差。操作时，使用如下公式:

B_i(S_x,S_y,S_z)＝w×d_i+q_i,i＝1、2…n_bw∈[0,1]

通过该公式可以使用W控制人体模型的身高在它的初始高度和较高的高度之间进行线性变化。

由此原理，可以设立更多组缩放数据。比如，p_1i,i＝1、2…n_b表示控制身高的一组缩放数据，p_2i,i＝1、2…n_b表示控制腰围得一组缩放数据，p_3i,i＝1、2…n_b表示控制胸围得一组缩放数据等，假设共有n₁组缩放数据即最后一组缩放数据为＝1、2…n_b。并为每组缩放数据置一个权重w_j,j∈[1,n₁]。故可以用p_ji,i＝1、2…n_b,j∈[1,n₁]表示第j组缩放数据，w_j表示对应第j组的权重。仿照上例使用q_i＝B_i(S_x,S_y,S_z),i＝1、2…n_b来备份骨架B_i(S_x,S_y,S_z),i＝1、2…n_b的初始数据。使用d_jii＝1、2…n_b j＝1、2…n₁,记录这n₁组缩放数据和骨架初始缩放值之间的差d_ji＝p_ji-B_i(S_x,S_y,S_z),i＝1、2…n_b j＝1、2…n₁。

操作时，为了将各组的效果相互叠加，设M_ji＝(S_x,S_y,S_z),i＝1、2…n_b,j＝1、2…n₁，用来暂时存储中间的计算结果，如下公式：

M_ji＝w_j×d_ji+q_i,i＝1、2…n_b,j＝1、2…n₁ w_j∈[0,1]

将骨架B_i,i＝1、2…n_b中每个骨骼的的S_x、S_y、S_z三个值分别更换成x_i、y_i、z_i。通过修改w_i,i＝1、2…n_b的值，就可以控制人体模型的体型。

在服装更换方面：

如图4、图5所示，服装更换方面主要采取将服装模型重叠在人体模型上对应的位置，仿真出一种衣服穿在人身上的效果。然而实际操作中经常会碰到这样的情况，服装模型与人体过于接近，导致出现人体的部分皮肤穿透了服装模型，影响了三维仿真体验。

为了解决服装更换方面出现的服装模型穿透现象，这部分我们采用如下的解决方案。

提出一种透明贴图概念，该贴图实际为一张图片，包含纯黑纯白两种颜色。借助模型的uv纹理贴图坐标，模型上的每一个点可以在透明贴图上找到一个对应的点。模型在渲染时，模型上点对应贴图上的黑色点代表模型该点透明，对应贴图上的白色代表模型该点不透明。通过这张透明贴图，可以使模型在实际渲染中，看起来有一部分是透明的。

多张透明贴图合并算法:

设q(x,y)代表新生成的透明贴图的(x,y)的像素值。设p_i(x,y)为第i个透明贴图的(x,y)的像素值，假设共有n_cloth+1张透明贴图。用a表示黑色像素点，用b表示白色像素点。设立运算符∩含义为“与”，运算规则如下

则多张透明贴图合并算法如下：

试穿单件服饰时透明贴图解决方案：

为所有容易发生与三维人体模型穿透的服饰模型，做一张应用于人体的透明贴图。这张贴图将人体模型被服饰模型覆盖住的部分设为透明，人体模型不被服饰模型覆盖住的部分设为不透明。在加载服装模型时，将该服饰模型对应的透明贴图加载并应用于人体模型上，使人体模型不会发生穿透。

试穿多件服装时透明贴图解决方案：

为所有容易发生与人体模型穿透的服饰模型，做一张应用于人体的透明贴图。加载多件服饰模型时，先加载这些服饰模型的对应的透明贴图，对他们的透明贴图进行多张透明贴图的合并操作，将黑色区域叠加，合成出一张新的透明贴图，然后加载这些服饰模型，把三维人体模型上的透明贴图替换为新生成的透明贴图。将多件衣服覆盖的部分都变成了透明，而没覆盖的部分依旧为不透明。

在动作变化方面：

人们在现实中试衣时，都会在镜子前摆出多种姿势，来判断衣服是否好看，与自己是否足够搭配。所以虚拟试衣方法也有相应的解决方案。

使用骨骼蒙皮的关键帧动画技术，可以概括为，在骨骼控制下，通过顶点混合动态计算蒙皮网络的顶顶点，而骨骼的运动相对于其父骨骼，并由动画关键帧数据驱动。一个骨骼动画，通常包括骨骼层次结构数据，网格(Mesh)数据，网格蒙皮(Skin)数据和骨骼的动画(关键帧)数据。

动作变化可以分为两个部分，一是静态的动作，二是动态的动作。静态的动作可以理解为是静态的pose，比如说立正的动作或扎马步的动作。动态的动作则是一个动态的过程，比如说是走猫步或跑步。

在这里将分开展示，关于静态动作的解决方案。

骨骼蒙皮动画主要与骨骼的位移值(Transition)与旋转值(Rotation)有关，我们使用B_i(T_x,T_y,T_z,R_x,R_y,R_z),i＝1、2…n_b表示选用了骨架B_i＝(T_x,T_y,T_z,R_x,R_y,R_z,S_x,S_y,S_z),i＝1、2…n_b中每个骨骼的位移值和旋转值信息T_x、T_y、T_z、R_x、R_y、R_z。

为人体模型设置动作。在建模软件上通过调节人体模型的骨架B_i,i＝1、2…n_b中的T_x、T_y、T_z、R_x、R_y、R_z几个值，改变人体模型的姿态，可以设置人体模型的静态动作。我们从调节过静态姿势的人体模型的骨架B_i,i＝1、2…n_b中提取每个骨骼的位移值和旋转值信息T_x、T_y、T_z、R_x、R_y、R_z，得到一组新的人体模型姿态数据：

Q_i＝(T_x,T_y,T_z,R_x,R_y,R_z),i＝1、2…n_b

那么我们在更换新的静态动作时，可以通过如下公式来实现

B_i(T_x,T_y,T_z,R_x,R_y,R_z)＝Q_i,i＝1、2…n_b

上述解法可以使人体在各种不同的姿势之间切换，而且储存的只有一组骨骼位移值和旋转值，占用的储存空间小。

关于动态动作的解决方案：

动态动作是一个动态的过程，采用骨架蒙皮关键帧技术。如果非常快的在很多变化微小的静态动作间切换，就会产生一种动画的效果。我们继续使用B_i(T_x,T_y,T_z,R_x,R_y,R_z),i＝1、2…n_b表示选用骨架B_i＝(T_x,T_y,T_z,R_x,R_y,R_z,S_x,S_y,S_z),i＝1、2…n_b中的每个骨骼的位移值和旋转值信息。而动画需要有个时间的概念。设t为从动作开始播放计算的时间，即播放一个新的动画时时间从0开始算。设某个动态动作由n₄个静态动作(也可称关键帧)组成，设t_k表示第k个关键帧的时间点，使用如下式子表示全部关键帧的姿态数据，即每一个关键帧时刻骨架中的所有骨骼的位移值和旋转值信息，组成下面一组动画的姿态数据。

有如下数表示所有关键帧对应的时间点t_k,k＝1、2…n₄。

我们有了全部关键帧的姿态数据之后，播放时，在任意t时刻，有如下方式选取关键帧。设t_l代表这个动作动画的总时长，t求余t_l得到的结果就是动画应该放到哪个时刻，然后就去找到这个时刻在哪两个关键帧之间，假设这个时刻在t_c与t_c+1之间，即t_c≤t mod t_l≤t_c+1。这样给定的任意时刻t可得到对它有影响的两个关键帧t_c和t_c+1。

之后通过如下的线性插值运算，获得任意给定时刻t的骨骼位移值缩放值序列。

上式意思是用线性插值得到的结果修改骨架B_i,i＝1、2…n_b中每个骨骼的T_x、T_y、T_z、R_x、R_y、R_z值。

故此解法可以解决人体模型动态动作时的任意时刻动作问题，能够较为流畅的描述动态动作，没有间断的地方。而且通过修改t的变化速度，还能够改变动画的播放速度。

在此之后，将衣服与人体联动起来，不然会出现人体的姿势改变了而服装的姿态未改变的情况。为了解决这类问题，我们提出了如下解决方案，为每一个服饰模型绑定一个与人体模型同样的骨架，为了使服饰模型与人体模型的姿态完全相同，我们需要保证服饰模型骨架的位移值(Transition)、旋转值(Rotation)、缩放值(Scale)与人体模型骨架的完全一致。

用B_i＝(T_x,T_y,T_z,R_x,R_y,R_z,S_x,S_y,S_z),i＝1、2…n_b代表人体模型骨架所有骨骼的位移值、旋转值、缩放值。设共有n₅件已经穿着的服饰，用Cloth_ji＝(T_x,T_y,T_z,R_x,R_y,R_z,S_x,S_y,S_z),i＝1、2…n_bj∈[1,n₅]表示第j件服饰的骨架，联动播放动画时，Cloth_ji＝B_i,i＝1、2…n_bj＝1、2…n₅则所有服饰会跟着人体模型的动作，做出相应的动作。

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

Claims

1.一种基于webGL技术的虚拟试衣实现方法，其特征在于：包括步骤如下：

步骤二：对三维人体模型进行骨架蒙皮操作，为三维人体模型中的骨架建立一个模型，B_i＝(T_x,T_y,T_z,R_x,R_y,R_z,S_x,S_y,S_z),i＝1、2…n_b，骨架模型包含n_b个骨骼，并将所有骨骼B_i中的S_x、S_y、S_z三个值设置为1，作为三维人体模型的初始值；

3b：设体型特征参数为Feature(种类)，求权重W_j：

3c：根据权重W_j来调整骨架的缩放值，设d_ji＝p_ji-B_i,i＝1、2…n_b,j＝1、2…n₁，使q_i＝B_i,i＝1、2…n_b来备份骨架B_i,i＝1、2…n_b的初始数据；操作时，设M_ji＝(S_x,S_y,S_z)＝1、2…n_b,j＝1、2…n₁作为临时变量用来存储中间计算结果，计算公式如下：

M_ji＝w_j×d_ji+q_i,i＝1、2…n_b,j＝1、2…n₁ w_j∈[0,1]

分别计算S_x、S_y、S_z三个值叠加值公式如下：

\begin{matrix} x_{i} = Π_{j = 1}^{n_{1}} M_{j i} (S_{x}) & i = 1, 2 ... n_{b} \end{matrix}

\begin{matrix} y_{i} = Π_{j = 1}^{n_{1}} M_{j i} (S_{y}) & i = 1, 2 ... n_{b} \end{matrix}

\begin{matrix} z_{i} = Π_{j = 1}^{n_{1}} M_{j i} (S_{z}) & i = 1, 2 ... n_{b} \end{matrix}

E_{t_{k} i} = (T_{x}, T_{y}, T_{z}, R_{x}, R_{y}, R_{z}), k = 1, 2 ... n_{4}, i = 1, 2 ... n_{b};

则新合成的透明贴图公式如下：

q (x, y) = p_{1} (x, y) \cap ... \cap p_{n_{c l o t h}} (x, y) \cap p_{n_{c l o t h} + 1} (x, y)

步骤七：三维人体模型的静态动作切换、动态动作切换、动态动作播放；在静态动作切换时，如果用户选择第j个动作Q_ij＝(T_x,T_y,T_z,R_x,R_y,R_z),i＝1、2…n_b j∈[1,n₂]

B_i(T_x,T_y,T_z,R_x,R_y,R_z)＝Q_ij,i＝1、2…n_b j∈[1,n₂]；

\begin{matrix} E_{t_{k} i} = (T_{x}, T_{y}, T_{z}, R_{x}, R_{y}, R_{z}), k = 1, 2 ... n_{4} & i = 1, 2 ... n_{b} \end{matrix}