面向大规模定制的服装三维网络展示技术

王 巍， 董杭波， 张皋鹏

(四川大学 轻纺与食品学院，成都 610065)

研究与技术

面向大规模定制的服装三维网络展示技术

王 巍， 董杭波， 张皋鹏

(四川大学 轻纺与食品学院，成都 610065)

在目前的服装网络销售平台中，企业只能通过图片和文字的说明来呈现服装属性，服装网络展示技术尚存在着许多缺陷和不足。以服装的大规模定制为目标，通过CINEMA 4D虚拟人体关键部位的尺寸约束与调节来创建符合特定尺寸需要的人体模型；通过Marvelous Designer 5.5探索服装纸样与虚拟试衣效果之间相互转换的途径；通过服装面料属性的渲染及表现使服装展示的效果更接近现实；并将虚拟展示运用于互联网浏览器，使用户可以远程实时查看服装的穿着效果。实现了基于互联网浏览器的实时展示，为面向大规模定制的网络服装展示创造了技术基础和条件。

大规模定制；三维人体建模；虚拟试衣；网络；服装展示

服装大规模定制的生产模式综合了定制生产个性化程度高及大批量生产低成本、周期短的优势，消费者可以参与到服装的设计活动中，企业可以并根据消费者的不同体型，以大规模生产的低成本、高效率和高质量提供定制服装和服务[1]。为了实现服装的大规模定制，最有效的方式就是建立一个基于网络的、可用于设计师和客户交流的平台[2-3]。现有的服装网络销售平台中，消费者不能通过对服装的触感和试穿来感知面料的质感与服装的合体度。其存在的技术难题首先在于虚拟试衣功能的实现[4-5]，这是其一，其二在于三维服装展示技术和功能的缺陷[6]，其三在于服装二维纸样与三维展示效果之间相互转换的技术难题[7]。本研究试图运用计算机数字化技术来建立虚拟人体模型，设计与虚拟人体尺寸相匹配的服装二维纸样，再将二维纸样转化为三维服装来检测样板的合体度，最终通过虚拟现实技术实现基于互联网浏览器的远程交互展示功能。

1 三维虚拟人体模型

本研究采用CINEMA 4D的多边形建模技术来建立整个三维人体模型，并结合NURBS技术对后期模型进行优化调节，最后得到满足虚拟试衣和展示需要的三维人体模型。CINEMA 4D是德国MAXON Computer公司开发的三维动画软件，其内置的BodyPaint3D模块可以创建任意复杂的材质贴图，且与主流的绘图软件可以达到无缝的连接；另外，CINEMA 4D内部的MOCCA模块可以制作虚拟角色的三维动画，可运用于服装模特走秀的动画展示[8]。

多边形人体模型的建立遵循从主干到细节、从整体到局部、从简单到复杂的思路，按照人体测量统计数据的尺寸规格，参考人体骨骼结构及肌肉分布形态，通过控制人体关键部位的尺寸大小得到特定尺寸的人体草模，通过给草模添加NURBS功能，最终得到表面光滑的特定尺寸的人体模型[9]。

1.1 建立人体模型

1.1.1 确定人体尺寸

为了使虚拟模特展示的效果具有普遍的适用性，且具有一定的代表性，本研究依据GB/T 1335.2—2008《服装型号 女子》，以160/84A的女子体型为例来建立女子人体模型，主要数据为身高160 cm、胸围84 cm、腰围64 cm、臀围88 cm、背长38 cm。

1.1.2 建立身体躯干大致形体

建立人体的上半身躯干部分，通过胸围、腰围和臀围的尺寸控制来建立基本躯干形体，人体上半身躯干多边形拓扑结构如图1所示。

图1 人体上半身躯干多边形拓扑结构Fig.1 The polygon topology of upper torso of human body

1.1.3 建立四肢和头部大致形体

人体上半身躯干建立完成之后，根据160/84A的女子体型各部位尺寸的数据，通过CINEMA 4D测量工具的运用来建立人体的四肢。由于人体是对称的结构，所以可以只制作人体对称结构的一半，再采用镜像功能来得到一个完整的人体结构，这样可以节省大量的制作时间。人体躯干的布线需要按照人体的结构和肌肉走势来建立，使多边形的起伏符合人体表面的形态。布线拓扑结构如图2所示。

图2 开启镜像前后的布线拓扑结构Fig.2 Routing topology before and after opening mirror

1.1.4 调节人体多边形基本拓扑结构

运用切割命令，通过对多边形进行环形切割，在人体模型需要细化的部分增加拓扑线。并通过移动工具，对多边形的点进行位置调整，获得基本的人体拓扑结构，接着通过增加拓扑线和移动点的位置来细化拓扑结构、丰富人体模型细节。如图3所示为调节后的模型拓扑。

图3 细化之后的人体基本拓扑结构Fig.3 The basic human body topology after subdivision

1.1.5 再次细分多边形人体模型并完善

人体的基本拓扑结构建立完成之后需要对模型的几何面进行再次细分，目的是为了提高模型的精度，使模型结构更符合人体的实际形体形状。选择人体多边形模型所有的面，执行细分命令，使模型更符合人体的真实结构特征。在每次细分之后都需要对人体模型多边形的点进行一定的位置调整，从而使拓扑线分布更加均匀、更加符合人体表面形态走向。如图4所示为经过两次细分后的人体拓扑结构。

图4 经过再次细分调整之后的人体模型Fig.4 The human model after secondary subdivision and adjustment

1.1.6 为细分后的模型添加HypNURBS功能并导出模型

为了平滑多边形表面，使模型表面结构符合人体表面形态，经过为细分调整之后的模型需要添加HypNURBS功能。在添加HypNURBS功能之前需要先统一模型几何面的法线方向(图5)，法线代表了多边形的方向，其所指的方向代表多边形的正面，几何面法线均朝外可被视为正常状态[10]。添加了HypNURBS功能后的人体模型不再处于多边形状态，所以需要运用塌陷功能将其转化为多边形物体后再导出，导出保存格式为OBJ，保持原始尺寸大小设置。

图5 统一多边形几何面的法线方向Fig.5 Unifying normal direction of polygon geometric surface

1.2 建立多边形人体模型的要点

对人体模型的五官等细节进行仔细刻画，并渲染成要使用的最终人体模型。在建立多边形人体模型时需要做到以下四点：

1)精简拓扑结构：建立基本拓扑结构的关键是用尽量少的多边形点线面来表达尽可能完整的形体，这样可以保持模型的简洁性，在深入调整过程中才不会复杂。2)维持四边面拓扑：构造的多边形需要保持四边形，因为用四边形构造的模型在添加HypNURBS功能之后对原始模型的扭曲影响程度会比较小。3)拓扑线均匀分布：多边形模型整体的拓扑线分布需要保持均匀，这样不仅有利于模型后续的细分操作，也有利于人体形态的正常表现。4)统一法线方向：在建模的过程中，难免会出现一些面的方向被无意修改的情况，几何面法线均朝外为正常状态，在模型完成细分操作后需要对其进行整体统一，否则在添加HypNURBS功能之后会出现破面等情况。

2 虚拟试衣的实现及纸样的修正

2.1 实现虚拟试衣的思路

本研究中虚拟穿着效果的实现是在最新版本的Marvelous Designer 5.5中完成的, Marvelous Designer(以下简称MD)是韩国CLO Virtual Fashion公司开发的三维服装设计软件，其原理是通过其面料仿真系统，以及高效的仿真速度和多重控制窗口模拟各服装裁片的缝纫关系，将二维纸样转化为三维服装[11-12]。本研究以一件简洁连衣裙为例，将完成的人体模型和事先设计好的服装纸样结构，以及参数关系的位图导入到MD中，指定各裁片之间的缝纫关系，将裁片放置于人体模型各安排点的对应位置，通过设置面料的模拟属性就可以将服装的色彩、悬垂效果、省道、褶皱，以及面料的厚薄、纹理等效果模拟出来。

2.2 导入人体模型

将在CINEMA 4D建立的OBJ格式人体模型文件导入到MD。MD内部的默认单位是mm，而在CINEMA 4D中建立人体模型时采用的单位是cm，在导入之前需要调整模型缩放参数，设置缩放参数为1 000.000%，并勾选“作为新的模型导入”选项，导入的模型即可作为软件内新的参考人体模型。

默认的MD人体模型有一套完整的安排板和安排点，当要使用自定义模型时，需要创建新的安排板和安排点。安排板是围绕着虚拟人体模型各部位的绿色缸体，当把服装裁片放置在人体模型周围的时候，要设置将其根据安排板的曲面放置还是根据平面放置，通过这种方法可以保证在模拟穿戴效果的时候服装裁片不会从人体模型上脱落；安排点分布在安排板的表面或者前后位置，显示为蓝色，通过选择正确的安排点可以更高效、更准确地将服装裁片放置到对应的人体模型各部位周围。

图6 分布在人体模型的安排板和安排点Fig.6 Bounding volumes and arrangement points around the human body model

2.3 MD中绘制样板并确定对应缝合线

导入人体模型以后，在MD的2D窗口会显示人体模型正立面的剖面，这给绘制服装样板提供了一个参考依据，但是MD缺少精确绘制样板的工具和相应的精确坐标参考体系，绘制样板的准确性和灵活性不如Auto CAD和专业的服装制版软件。另外，MD无法导入标准的DXF格式服装制版文件，但是可导入纹理图片，所以在建立裁片的时候可以将在Auto CAD或专业的服装制版软件中绘制的适合人体尺寸的样板导出为JPG等位图格式，然后将样板的位图图片作为面料的图案导入MD内作为临时的参考体系；接着，通过MD提供的样板绘制工具在临时参考样板上绘制裁片，并参考人体正剖面绘制一条加过松量后的样板围度参考线，最后将绘制的服装样板根据参考线统一缩放成为相对准确的适合人体模型大小的尺寸。

使用MD提供的缝合线工具，将要缝合的裁片边线相互对应起来。此时需要明确服装各裁片的空间位置，在添加缝合线的过程中对应的裁片边缘会显示出相同的颜色，如图7所示。另外，在制版过程中样板上的对位点对指导缝合起到非常关键的作用，当两条对应的缝合边线不等长时，通过缝合对位点的对应可以确定裁片的缩缝量，使缝合效果更加精确。

图7 添加对应缝合线后的裁片Fig.7 Garment pattern after sewing

图8 样板的放置和模拟过程Fig.8 Process of arranging and simulating the sample plate

2.4 放置样板并模拟效果

在这个过程中，导入人体模型后创建的安排点将起到非常关键的作用。分别选择需要放置的各裁片，并点击人体周围对应的安排点，裁片便可准确地以曲面形式自动放置于人体模型周围(图8)。在这个过程中需要切换不同的视角以保证在各裁片之间、各裁片与人体模型之间都不能相互交叉，一旦发生这种情况就会在后续模拟计算的过程中出现问题，以致模拟的效果不理想。放置完之后进行模拟试穿，模拟的结果可能会出现一些不理想的情况，比如服装与人体相互穿插、服装在模拟过程中滑落等情况，这时可以在初次模拟的基础上，通过拖曳局部裁片和固定裁片局部点的位置来完善模拟效果。

2.5 服装纸样的逆向修正及模型的导出

在模拟的过程中会出现服装纸样与人体尺寸不匹配的情况，本研究通过MD的应力分析功能来评价服装纸样的合体度并进行修正。通过应力分析，可以分析出服装纸样穿着在虚拟人体模型上后对人体的压力大小，如果某些部位压力过大，就会显示为红色的区域。出现了这种情况，可以在二维窗口修改服装纸样，在三维窗口中可以实时观察到修改后的模拟结果，并通过红色区域的增减来判定纸样的合体度(图9)。

图9 应力分析结果Fig.9 The result of strain analysis

MD中可以显示各裁片上直线和曲线的长度，这些信息可以用来指导纸样的修正。当最终的合体纸样确定之后，可以通过MD二维窗口中显示的各裁片部位的数据，用相同的数据在制版软件中修改纸样，从而使用于生产的纸样更加适合人体尺寸。

MD为服装的三维模拟提供了完善的属性编辑器，用户可以对已经在廓形和结构方面模拟成功的服装模型上编辑服装的色彩、图案、织物特征、透明度等属性，通过这些属性的设计可以得到几乎接近现实的立体服装效果(图10)。最后，将理想模拟状态下的服装模型导出为OBJ格式，导出时需要保持模型的原始尺寸，以便在后续工作中与人体模型的尺寸相匹配。

图10 适合人体模型尺寸的服装模型Fig.10 The final garment model suitable for human model

3 三维网络展示技术的实现

3.1 展示技术实现的思路

本研究以大规模定制的理念为指导，在服装产品相似性、通用性法则的指导下，采用三维模拟展现的方法，利用创建的三维人体模型和与之匹配的服装任务模型开发出“三维交互式服装大规模定制设计系统”。系统的建立可以为服装的数字化网络展示提供技术手段；与此同时，用户通过系统可以在线参与到服装的设计活动中，与服装企业共同交互完成服装的定制和交易，并可以通过系统提供的三维服装试衣界面体验到在实体店购买服装的真实感；企业可以根据消费者的不同体型，以大批量生产低成本、高效率和高质量的服务生产出消费者定制的服装。

本研究首先对系统作了详尽的需求分析，明确了系统使用者(客户和管理员)的各项需求；运用面向对象的设计思想，采用B/S的架构设计方法，设计出了系统的技术路线、体系结构、运作流程及各模块功能[13-14]。其中系统的三维服装试衣功能技术的实现，可以依靠基于WebGL的CubicVR技术来实现系统中服装模型的加载、显示及整个场景的360°自由旋转操作；使用Struts作为Web和数据库相应的中间件，可以最大限度地保证数据传输过程中的及时性和准确性；系统的前端使用CSS来控制Web页面的外观；使用JavaScript来与用户进行动态交互；使用AJAX通过多种技术来实现Web的前端和后台之间的交互。

3.2 系统的体系结构

系统采用的是基于Web的B/S三层架构，这样既可以使用Java强大的基础功能，同时又减轻了系统维护的成本和工作量。采用Struts框架的MVC模型进行开发，可以使用于所有操作系统和应用平台。系统的体系分为三层架构，分别是模型层、视图层和控制器层。

1)模型层：主要使用JSP技术实现，主要有系统首页、用户登录页面、用户试衣页面、查看详情页面、加入购物车页面(服装预览)、输入尺寸页面、保存结算页面、订单查询页面、管理员操作页面。这样就可以为用户提供交互良好的页面，通过与用户页面的交互，模型层数据和控制器层数据可以相互传送。

2)视图层：使用业务逻辑类实现，可以为模型层提供服务，与控制器层进行数据交互。为系统提供查看服装类别和款式、订购、预览、订单查询等功能；同时为管理员提供商品款式的添加和删除、商品属性的修改、商品材质的添加和删除、用户订单查询审核与发货等功能。

3)控制器层：进行数据的处理。在系统的运行过程中，会生成大量的图片、订单、面料等资源信息，在这里可以将这些资源持久化到数据库中。

3.3 三维展示模块设计的方法

为了达到更好的三维网络展示效果，本研究使用CubicVR来渲染服装及人体模型。CubicVR是一个基于WebGL的开源三维图形引擎，它对WebGL进行了一系列的封装，为开发者呈现了一套非常容易使用的接口，从而大大降低了在浏览器上进行三维图形程序开发的难度[15]。WebGL是一项在网页浏览器体现三维画面的技术，有别于其他技术需加装浏览器插件，通过WebGL的技术，只需要编写网页代码即可实现三维图像的展示。基于OpenGL ES 2.0的WebGL为三维图像提供了程序接口，它使用HTML5中的canvas元素并允许调用文档对象模型接口[16]。

由于CubicVR仅支持DAE类型的文件格式，所以需要使用3DMax将模型文件夹转换成DAE文件格式。DAE文件是一种通用的基于XML的交互式3D文件格式，这种文件格式可以方便地在不同平台、不同的软件之间使用而无需转换。

首先，定义一个canvas标签元素。canvas元素拥有多种绘制路径、矩形、圆形、字符及添加图像的方法，但canvas元素本身没有绘图能力，所有的绘制工作必须在JavaScript内部完成，并且可以根据id得到canvas的对象。系统中定义的canvas元素的id名为dressing_place，宽为344、高为480，如图11右边矩形区域所示。

图11 三维试衣界面及canvas元素区域Fig.11 3D fitting room interface and region of canvas element

通过CubicVR提供的函数init初始化canvas元素区域，代码如下：

vargl=CubicVR.init(document.getElementById("dressing_place"));

通过id得到dressing_place的区域后，需要在这个区域创建一个CubicVR自定义的场景，场景的宽、高需与canvas元素一致，代码如下：

scene=newCubicVR.Scene(canvas.width, canvas.height, 60);

接着，调用CubicVR的loadCollada方法，初始化场景，加载body.dae模型对象，如对应的纹理图片在/3DCloth/2d_cloth路径下，代码如下：

varbodyScene=CubicVR.loadCollada("body.dae","/3DCloth/2d_cloth");

再通过以下三步将模型绑定到场景中，代码如下：

varbodyMesh=bodyScene.getSceneObject("Body").obj;

varbodyObject=newCubicVR.SceneObject(bodyMesh);

scene.bindSceneObject(bodyObject);

场景和模型布置就绪后，可以调用CubicVR内部的函数来调整身体模型的大小和角度。当用户选择试衣按钮时，可以根据按钮绑定的参数来判断用户的选择、加载不同的模型和纹理。

用户可以选择同一款式但不同色彩的服装进行试穿，如果系统中有同一件款式、但不同色彩和纹理的服装，系统会根据用户的选择参数加载不同的纹理图片。

另外，在试装和三维展现的过程中，会出现上衣和下衣之间任意搭配组合，以及需要移除上衣或下衣并加载连身装的情况，因此需要通过逻辑流程来判断服装模型和纹理的加载过程。当用户点击脱衣按钮时，系统会调用scene.removeSceneObject方法，从当前场景中移除已经加载的服装对象。

4 结 论

本研究运用多边形建模与NURBS技术相结合的方法来建立所设定尺寸的人体模型，充分利用了多边形建模的简易性、灵活性，运用NURBS技术可建立曲面模型的优点，有效地克服了多边形模型的不平滑性，从而适应了人体体表的曲面特征；通过使用软件Marvelous Designer实现了虚拟仿真试衣的功能，并且可以通过三维试衣结果逆向修改二维纸样；依靠基于WebGL的CubicVR技术实现了在系统中服装模型的加载、显示及整个场景的360°自由旋转，实现了通过网络展示仿真三维虚拟人体模型和服装模型功能，解决了消费者不能在网购过程中体验真实试穿的问题。本研究以大规模定制的思想提出解决方案并创建平台，但是该研究在大规模定制的实现上仍然存在着不足，目前的研究结果中还不能实现人体、服装模型及服装纸样的参数化修改。在接下来的研究过程中，希望根据三维人体扫描设备获取人体尺寸并创建定制化人体模型，通过人体数据可以同步更新服装纸样库和三维服装模型的尺寸，并根据本研究中服装网络展示技术的方法实现更为理想化的服装大规模定制。

[1]王巍,张皋鹏.基于网络的交互式服装定制设计系统的开发[J].丝绸,2015,52(5):47-51. WANG Wei, ZHANG Gaopeng. Development of interactive garment customization design system based on network[J]. Journal of Silk,2015,52(5):47-51.

[2]吴迪冲,顾新建.服装大规模定制及其结构体系研究[J].纺织学报,2004,25(5):139-141. WU Dichong, GU Xinjian. Mass-customization of clothing and structural system research[J]. Journal of Textile Research,2004,25(5):39-141.

[3]LEE S E, CHEN J C. Mass-customization methodology for an apparel industry with a future[J]. Journal of Industrial Technology,2000,16(1):1-8.

[4]许才国,刘晓刚.服装大规模定制产品开发模式的现状与对策[J].纺织学报,2009,30(10):143-148. XU Caiguo, LIU Xiaogang. Current status and proposed measures on product development mode of apparel mass customization [J]. Journal of Textile Research,2009,30(10):143-148.

[5]CHOI K J, KO H S. Research problems in clothing simulation[J]. Computer-Aided Design,2005,37(6):585-592.

[6]许才国,刘晓刚.影响服装大规模定制产品开发的关键技术[J].纺织导报,2009(2):90-92. XU Caiguo, LIU Xiaogang.The key technologies impacting the apparel mass customization production[J]. China Textile Leader,2009(2):90-92.

[7]LEE S E, KUNZ G I, FIORE A M, et al. Acceptance of mass customization of apparel: merchandising issues associated with preference for product, process, and place[J]. Clothing and Textiles Research Journal,2002,20(3):138-146.

[8]KERSTEN T, STALLMANN D. Automatic texture mapping of architectural and archaeological 3d models[J]. The International Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences,2012,39(5):273-278.

[9]孙守迁,徐爱国.三维服装仿真中的参数化人体建模技术[J].纺织学报,2007,28(12):89-93. SUN Shouqian, XU Aiguo. Study on parameterized mannequin modeling in 3D garment simulation[J]. Journal of Textile Research,2007,28(12):89-93.

[10]MCHENRY K, BAJCSY P. An overview of 3D data content, file formats and viewers[R]. National Center for Supercomputing Applications,2008:1205.

[11]KOZAR T, RUDOLF A, CUPAR A, et al. Designing an adaptive 3D body model suitable for people with limited body abilities[J]. Journal of Textile Science & Engineering,2014,4:165.

[12]SPAHIU T, SHEHI E, PIPERI E. Advanced CAD/CAM systems for garment design and simulation[C]// 6th International Conference of Textile, At Tirana, Albania.2014:1-6.

[13]王晓利,韦鹏.基于B/S结构的服装销售管理系统的设计与实现[J].信息技术,2008(10):130-134. WANG Xiaoli, WEI Peng. Design and realization of clothing sales management system based on B/S structure [J]. Information Technology,2008(10):130-134.

[14]周力杰,李治洪,李翠.一种基于Web前端的在线空间数据管理技术方法[J].计算机科技与应用,2016,6(1):30.ZHOU Lijie, LI Zhihong, LI Cui. A technical method of online spatial attribute data management based on web font end[J]. Computer Science and Application,2016,6(1):30.

[15]MANFERDINI A M, REMONDINO F. A review of reality-based 3D model generation, segmentation and web-based visualization methods[J]. International Journal of Heritage in the Digital Era,2012,1(1):103-123.

[16]NAZAROV R, GALLETLY J. Native browser support for 3D rendering and physics using WebGL, HTML5 and JavaScript[C]// Balkan Conference in Informatics, Thessaloniki, Greece.2013:21-24.

Three-dimensional garment web display technology oriented mass customization

WANG Wei, DONG Hangbo, ZHANG Gaopeng

(College of Light Industry, Textile and Food Engineering, Sichuan University, Chengdu 610065, China)

On current garment web selling platform, enterprises can present garment attributes only through pictures and texts. Garment web display technology has many defects and shortcomings. This research takes mass garment customization as the objective and attempts to set up the human model which meets the specific size demands through CINEMA 4D software. Besides, Marvelous Designer 5.5 is applied to explore the way to transform garment pattern and virtual fitting effect mutually. The garment display effect is further close to the real effect through rendering and displaying garment fabric attributes. In addition, virtual display is applied in internet browser so that users can check garment wearing effect. This research achieves real-time display based on internet browser and creates technical foundation and conditions for mass customization.

mass customization; 3D human modeling; virtual fitting; web; garment display

10.3969/j.issn.1001-7003.2016.12.006

2016-05-15;

2016-11-07 基金项目: 国家留学基金资助项目(201406245035)；四川大学实验技术立项项目(2015149) 作者简介: 王巍(1986_)，男，实验师，硕士，主要从事计算机辅助服装设计的研究。通信作者：张皋鹏，副教授，wang wei0728@scu.edu.cn。

TS941.2

A

1001-7003(2016)12-0029-07 引用页码: 121105