基于WebGL的面辅料三维虚拟展示系统设计

马晓彤,祝双武,陈梦琦

(西安工程大学 纺织科学与工程学院,陕西 西安 710048)

随着经济全球化和互联网的高速发展,纺织行业的生产销售形式发生了巨大的变化,各类企业尝试通过虚拟化、数字化产品打通产业链,降低各自的经营成本,提升抗风险能力以应对剧烈的市场竞争[1]。如何减少生产成本、增加用户数量及黏性,从而提升纺织企业的竞争力,无疑是现在的一个热点问题。

针对纺织面料而言,线下展示和选购可以触摸到面料的真实质感,但如果要查看最终效果必须要制作服装样品,制样时间长、原料浪费等问题会增加企业生产成本。除面料外,辅料也是扩展服装功能、发挥装饰点缀作用的关键元素,设计师对纺织服装辅料的合理搭配可以起到画龙点睛的效果。随着纺织CAD、电子商务、虚拟时装等领域的崛起,为了让相关人员更方便、快捷、直观地看到面料的颜色、样式及质感,构建基于三维模型的面辅料虚拟展示系统十分必要,它可以辅助传统的展示及服装设计过程。国内面料和服装的个性定制及展示技术也已经获得了一些成果,华柄宇等[2]基于平面服装款式图进行了多身位的面料映射,使用图像二值化等方法对模拟出来的面料效果图进行了展示,但不能与用户实时交互;宋莹[3]基于旗袍的款式特征和要素进行了旗袍个性定制和展示系统的研发;林俊聪等[4]利用三维人体重建,进行了基于服装自适应变形的个性化虚拟展示,但这些都侧重于服装款式的设计和调整。目前对于服装面辅料及其搭配效果的三维虚拟展示系统鲜有介绍和应用。

开发出基于Web GL的多功能面辅料虚拟展示系统,采用Unity3D引擎进行场景渲染并通过对着色器(Shader)的调整保留面料纹理的鲜明色彩与清晰度。系统中包含T恤、卫衣、冲锋衣等多个运动装模型,用户可自定义模型整体或侧边带等局部位置的面辅料花纹及颜色,结合虚拟现实、三维展示及交互技术来全方位观察面料的色彩、样式及上身效果,具有广阔的市场前景。同时系统还具有场景光源调整、背景切换、上下衣搭配等辅助功能,进一步增强了虚拟展示系统的真实感。

1 系统设计流程

三维虚拟展示系统的核心要素即交互设计和虚拟展示技术,从建立三维模型、准备纹理贴图、渲染三维场景、设计和完善交互界面等方面依次进行面辅料三维展示系统的开发。系统开发流程如图1所示。

图1 系统开发流程

1.1 三维模型建立

图2 T恤三维模型的建立

由于客户对产品具有个性化展示的需求,在三维建模时,需要划分模型区域,考虑每个区域图案衔接处三维模型贴图的参数设置[5],方便面辅料在模型的不同区域进行展示。因此模型的建立是分块逐步搭建的,依次建立前后衣片、袖子、袖口、双肋、腰带、后领带等,初步建立好模型之后打磨衣物模型的细节和纹理,使模型渲染后的效果更加逼真[6]。按照这种方法分别建立了T恤、卫衣、冲锋衣、长裤、短裤5个运动装模型。

1.2 纹理贴图准备

要将面辅料在三维模型的不同部位进行展示,关键是要为模型创建UV贴图以便在3D模型上包裹二维面辅料纹理。如图3所示,UV[7]即二维空间的水平、垂直坐标轴,它可以将图片上的点精确对应到三维模型的表面,确定模型各部位纹理贴图的大小,防止拉伸变形,使其更好地贴合到衣物模型的局部位置上。

图3 T恤模型各部位UV展开图

在进行面辅料的三维展示之前,设计人员使用织物仿真CAD系统进行面辅料的设计与仿真,或直接进行面辅料的扫描获得效果图,然后将设计好的原始面料效果图导入系统数据库中。原始面料效果图所应用的模型部位不同,其大小没有固定的数值,对比发现原始面料效果图与模型的UV贴图通常大小不一致,所以在使用面料图之前要先根据模型各部位大小对其进行拼接、裁剪、镜像等操作,以确保与模型的UV贴图大小一致,将调整好的面料图保存到特定文件夹里以备后续调用。

1.3 三维场景渲染

完成模型的建立后,将所有衣物模型转换为FBX格式导入到Unity3D引擎中,进行模型的加载和三维场景的渲染。Unity3D是包含三维游戏、建筑可视化、实时三维动画等类型内容的多平台专业游戏引擎,可一键完成系统的多平台开发和部署。因此在众多图形引擎中[8]选用Unity3D进行系统开发。

场景Scene主要用于加载天空盒、光源、材质等基本条件并保存、跟踪所要渲染的模型。摄像机决定了场景的视野范围,可根据模型调整相机的位置、数量和视口的大小,方便用户选取更合适的角度来观察整个三维世界。同时光源也是非常重要的[9],系统中选用了平行光及环境光,环境光是维持场景基础亮度的元素,平行光则可以照亮场景中的所有对象并且光线强度不会受距离的影响而发生改变,通常用于模仿阳光等远距离光源。

创建好场景之后导入外部模型及材质,将其添加到场景中,可自由定义模型的位置、角度以及与相机的距离等,到此时已经满足了面料展示的基本条件。

1.4 WebGL发布及交互

WebGL技术是将JavaScript和OpenGL ES结合在一起的3D绘图标准,可以在所有兼容WebGL的浏览器中流畅地展示三维场景和模型。目前简化开发出了很多优秀的Web GL框架,它们封装了底层的图形接口,例如Three.js[10]、Babylon.js、PlayCanvas等。系统选择在Unity中构建WebGL项目,它支持大部分桌面主流浏览器以及部分移动设备浏览器。

经过上述分析，发现IEC 61375标准中存在矛盾之处，如果T_LI小于T_ST(如果RPT与源设备距离较近，可忽略线路延时)，将导致RPT在某些特定工况下无法正常转发数据帧，而T_LI由t_source决定。通过简单计算可得知，t_source应大于4 μs，那么其取值范围将变为4 μs

将Unity WebGL项目发布到网页中使得三维模型动画成为其中一部分,使用Unity内部定义的函数与JavaScript方法交互即可实现命令和信息的实时传递。首先在网页代码的头部使用＜script＞标签来初始化Unity WebGL程序,使用gameInstance.Send Message()方法可以实现JavaScript向Unity中的物体发送命令。而实现Unity调用JavaScript中的方法则需要建立Plugins文件夹,将所有的JavaScript函数以jslib文件类型存放进去,使用Library Manager.library类库对其进行调用。这样保证Web GL程序可以嵌入到任何网页上而不会与页面本身的代码发生冲突。

1.5 面料纹理映射

将WebGL程序发布到网页中后,即可进行交互界面功能的调用。关于面料的纹理映射问题,Unity中的Unity Web Request对象提供了一个模块化系统,用于构建HTTP请求和处理HTTP响应,它的主要目的是让Unity游戏与Web浏览器后端进行交互,所以使用Unity Web Request对象将修改好的面料图加载到场景中,作为一个texture2D对象。

接下来获取要进行纹理映射的模型子物体,将texture2D对象赋值给其Mesh Renderer组件的material属性,其背后含义是在场景中创建了一个新的材质球,并修改其Albedo贴图为该面料图。同时修改material属性的渲染模式Render Mode为Cutout,确保只显示面料图的纹理部分,忽略其透明部分,使得面辅料与模型整体或局部位置更加贴合,色彩更加鲜明。这样就完成了纹理映射的基础过程,效果如图4所示。

图4 面辅料纹理映射

2 系统功能实现

使用Unity3D、Eclipse、SQL Server作为面辅料三维展示系统的开发工具,分为主要功能及辅助功能两大模块对系统进行设计和实现。系统的功能结构如图5所示。

图5 系统功能结构

2.1 系统界面设计

面料三维展示系统的交互界面设计是十分重要的,它是用户与系统交换信息、传达指令的媒介,实现了系统内部信息与用户之间的语言转换[11]。管理员或普通用户登录账号后即可进入面辅料三维展示系统初始主界面,如图6所示。

图6 系统初始主界面

2.2 三维展示系统的主要功能

系统的初始主界面中包含侧边菜单栏及位于摄像机视口正中央的T恤模型。运动风格的表达趋于多样性,无法具体定义,因此系统向用户提供了基本款的T恤、连帽卫衣、冲锋衣、运动长裤、短裤模型。在侧边菜单栏中点击“工具栏”按钮后页面上方会出现下拉工具栏,用户可根据需要随意切换衣物模型。

当用户点击侧边菜单栏中的“设计”按钮时,界面中会出现带有“袖口”“袖带”“肋带”“后颈带”等局部位置字样的侧边工具栏,如图6所示。考虑到服装的功能性以及整体设计效果,系统对不同模型的面辅料展示区域进行了区分。系统在数据库中对面料纹理和辅料纹理分别进行了存储,用户选择模型后点击“衣服面料”按钮弹出面料列表,在列表中选择图片即可进行模型整体区域的面料纹理映射。除衣服整体面料展示外,还包括以下辅料的展示。

(1)袖带、袖口、肋带、后颈带、腰带、脚踝带等局部位置织带。点击“带子图样”按钮后界面右侧会弹出织带列表,为了方便用户快速查找所需要的织带,系统中设置了产品类别、产品条宽、产品材质、料品编码、录入年份等查询条件。因为织带种类和功能的不同,在设计数据库时为其设置了多个字段以作区分,用户可根据所选模型部位以及所需织带类型进行针对性的搜索,以获得最佳展示效果,如图7所示。

图7 T恤面料及侧边带展示

(2)卫衣帽绳、腰部抽绳、帽绳束头。抽绳除了具有实用性之外还可以为衣服增添装饰性和设计感。系统中设置了9种不同尺寸的抽绳束头,针对每种尺寸用户可选择金属、塑料、镀金、磨砂等不同材质与帽绳进行搭配。Unity提供的标准着色器(Standard Shader)可以非常出色地处理金属、塑料、玻璃等材质,本系统在着色器中为抽绳束头添加了颜色贴图、金属度贴图、粗糙度贴图及法线贴图。同时使用了HDR全景图作为场景的天空盒,与一般图片不同的是,它具有较高的分辨率并且每个像素中保存有该点的亮度信息,可以渲染出更接近现实环境亮度的场景,与上述贴图相结合以呈现更真实的抽绳头材质效果,如图8所示。

图8 帽绳束头的虚拟展示效果

(3)魔术贴、袖标、拉链等。魔术贴、拉链等辅料产品在服装行业的应用范围非常广泛,对于服装的完整性、功能性、均衡性而言具有重要意义。系统在冲锋衣模型的袖口处设置了魔术贴,开襟处设置了拉链。用户可根据冲锋衣整体面料风格及效果,在数据库中选择合适的魔术贴样式贴合到模型上并随意改变拉链颜色。

(4)商标。鉴于Logo对品牌而言意义重大,本系统在数据库中设置了“用户名称”字段,对用户来源进行了区分,赋予不同使用者商标的使用权限。系统在T恤模型上设置了多处常用的Logo位置以作备选,同时对于每个品牌,商标列表中包含大中小等不同尺寸的Logo图片供用户设计和切换,效果如图9所示。

图9 商标的虚拟展示效果

当用户想要查看某部位辅料展示效果时,点击侧边菜单栏中“袖口”“袖带”等不同按钮即可将摄像机拉近到当前模型的对应位置,并在织带列表中选择合适的纹理贴图,点击对应图片进行辅料的更换。用户可使用鼠标控制模型的移动、旋转和缩放,从不同角度和距离查看面辅料的展示效果。系统中设置有分栏功能,在页面中克隆出原始视角的三维模型,如图10所示,设计人员可以分别在两个视口上对同一模型进行面辅料切换,以实现不同效果的对比观察。除多视口观察之外,系统中还设置了模型搭配预览功能,可以实现不同上装模型与长裤、短裤模型的搭配,帮助设计人员进行成套运动装的面料搭配选择和上身效果的查看。

图10 分栏视图展示

2.3 三维展示系统的辅助功能

为了辅助面料在三维模型上的展示,系统中增加了背景图选项以改变页面背景,在数据库中存放了多张不同色调和光线强度的场景图供用户自由挑选,效果如图11所示;同时点击下拉工具栏中的“光源”按钮即可进行场景光源设置,可根据需要手动调整环境光、平行光等不同方向的灯光亮度及光源颜色,配合页面场景来增强面料虚拟展示的真实感;为了搭配面辅料样式及场景色调,系统中还设置了调色盘功能,颜色值在Javascript和Unity之间经过了RGBA和16进制的转换,方便用户为衣物模型的整体或局部位置挑选合适的面辅料颜色。进行面辅料的展示或对比时还可以点击开启模型的360°自动旋转功能,方便设计人员全方位查看面料的展示效果。除此之外,管理员账户可以管理普通用户的账号信息,并且赋予用户使用不同商标的权限,有助于三维展示系统的规范管理。

图11 模型搭配、背景图切换及灯光亮度调整

3 系统内存利用率测试

在网页中进行三维展示会占用较多的浏览器内存,内存利用率过高会使得网页卡顿,在移动端甚至会出现崩溃等问题导致系统无法正常使用。因此在三维模型面数、纹理图片分辨率、三维场景资源、数据库信息、系统功能及操作步骤等完全相同的条件下,分别使用Three.js和Unity Web GL进行了面辅料三维展示系统的构建,在PC端和移动端进行了测试。

分别测试了在系统中按同样顺序连续切换5次模型、在相同模型的相同部位连续切换10款面料图两种情况下,不同三维展示构建方式的浏览器内存占用量。由表1可见,使用Unity WebGL方式建立三维展示系统,浏览器运行时内存占用量大大降低,且始终维持在较为稳定的水平,在移动端优势更为明显,避免了页面刷新、崩溃等问题的出现。

表1 两种构建方式内存占用量对比 单位:MB

4 结束语

介绍了基于WebGL的面辅料三维展示系统,依托浏览器实现了面辅料在不同运动装模型上的虚拟展示,此外系统中还设置了多种辅助功能来进一步增强立体展示的真实效果。该系统分别使用了3DMax和Unity3D进行三维衣物模型的构建和场景渲染,适用于PC端所有支持WebGL技术的主流浏览器及部分移动端浏览器,用户可以方便快速地在网页中进行场景、模型的加载以及纹理的切换,保留面料的鲜明色彩与清晰度,并且不会出现卡顿、颜色失真等问题。该系统已经应用到部分企业,取得了良好的使用效果和反馈。