虽然目前的3D显示已经能满足一些商家进行选款的需求，但还是有些商家希望在此基础上，提供一些的定制化能力，比如更换面料、添加商家Logo这样上手难度比较低的功能。而这些简易功能其实就赋予了商家快速设计和快速出品的能力。不过目前线上平台中尚未开放定制化服务，为了要进一步实现定制化功能，我们对现有一些的3D服装设计产品进行了调研。
3D服装设计软件，简单的理解就是将一件衣服从CAD版片→模拟成仿真衣服→渲染真实感效果，从而诞生一件3D数字服装。目前全球最有影响力的3D服装设计软件主要是韩国的CLO虚拟服饰公司开发的两款软件：MarvelousDesigner和CLO3D，国内比较成熟的软件是由凌迪科技公司推出的Style3D。
MarvelousDesigner是于2009年开发的，三维服装设计行业中最知名的软件，可以实现非常精美、逼真的服装模拟效果，主要面向游戏和动画行业，很多大型游戏公司比如EA、Ubisoft中的不少工作室都是采用的这款软件进行服装设计的。
这家公司之后在2010年发布了第一代CLO3D，目的是更加精准地实现虚拟服装在外观和功能上与物理服装的无缝转换。虽然和MarverlosDesigner的核心是相同的，但MarvelousDesigner主要用于动画和游戏行业，而CLO3D更专注于时尚和服装行业，面向服装设计的整个链路。有一个很大的区别就是CLO3D导入和导出的生产资料可以直接发送给生产厂商。
国内目前比较成熟3D服装设计软件，是目前和我们合作的凌迪科技公司推出Style3D。Style3D主要有两款应用，一款是大型桌面软件Style3Dstudio，另一款是基于Web端的Style3DCloud。
个人觉得Cloud并不同于Studio主要面向设计师，而更多是面向商家和消费者进行预览、选款，其不提供服装动态建模的能力，但提供了线上的3D显示和简易的定制化能力，比如在静态模型上的面料替换、添加图案等功能。
上述几款产品的对比如下表所示：
从价格上看，可以看出几款软件的使用成本是相对比较高的，所以相当于还是拉高了用户的门槛，而我们业务的需求是希望通过低门槛的产品来让更多用户体验到易上手的定制化功能，让更多的中小商家能够参与到设计的环节中来。
但以我们目前的基础，要实现这样的能力仍需要面对一些难点挑战，目前调研下来，将难点和挑战大致分为三类：
要实现逼真的服装模拟，首先要实现布料的仿真，而布料仿真一直以来都是计算机图形学中比较难的研究方向，对其需要的理论知识要求也比较高。相比于刚体，柔体布料内部作用力更复杂，并且产生碰撞时各部分形态情况都是不同的，所以分析和模拟起来就更难。
仿真过程可以大致分为两部分：
柔性布料的三维动态仿真自1980年以来就有大量学者为此研究，从学术历史上，研究模型大概分为三类：几何模型、物理模型、混合模型。
质点-弹簧模型是将布料看作离散的指点，质点之间用弹簧相连，将织物的运动划分为拉伸压缩变形、相邻弹簧的剪切变形和弯曲变形，用不同类型的弹簧去约束质点各个方向的受力状态。
质点-弹簧模型动态仿真的过程简单来说就是：初始时刻在屏幕上画出所有质点和弹簧的位置状态，下一个时刻再计算所有质点和弹簧位置状态，以此类推逐时刻计算，连续起来实现动态效果。其中获得每个点的位置状态，是通过对受力、速度、加速度分析，构建对应微分方程组，再通过欧拉法等方式求解微分方程得到的。
完成了布料的自身建模，还需要考虑布料运动碰撞检测。因为每时刻计算大量的图元状态计算量很高，所以一般会采用两阶段检测的方法，通过多个规则的几何体如球体，立方体将布料包围起来（也称作包围盒），只有当碰撞体进入到包围盒中时，才对包围盒中的布料进行逐点分析。因为简单的物体比较容易检查相互之间的重叠，所以通过用简单的包围盒形状来近似代替复杂几何体的形状，很大程度地降低了计算量。
布料模拟只是实现来对于服装局部的模拟，而要实现对完整服装的模拟还涉及到很多关键技术，例如：
完成了技术难题后，要构建一款完整的产品，还需要考虑建立和收集物料。比如：
如果仅考虑满足上述两点需求的话，其实暂时不需要提供3D服装的动态建模的功能。因为考虑到易用性，用户可以直接对建模好的模型进行操作（通过其他3D建模软件完成建模），所以需要做的只是从外部加载模型，再对模型的材质进行修改就可以了。这么分析下来其实工作量就少了很多，那接下来就说说怎么去开发一个满足上面需求的demo。
目前参考了市面上的一些线上3D服装展示的平台，梳理出简化的技术结构图大致如下：
首先是下载模型，浏览器从服务器下载建模好的模型文件和贴图文件。3D模型文件的格式选择的是glTF（GraphicsLanguageTransmissionFormat）格式，也是Web上的3D模型标准格式（glTF基本上成为了3D模型的JPG格式），glTF由json和外部数据构成，构成如下三部分：
接下来就采用上面的技术结构，基于Three.js框架来完成一个3D服装渲染的demo，下文会对重点功能进行分析，并给出一些关键功能的代码实现。
服装模型加载后如何通过Three.js渲染出来的（以下是个人的理解，不会太深入的去说），这里要先说下three.js中的基本单位：顶点，三个顶点可以构建一个三角面。在Three.js中的几何体geometry除了点、和线以外基本都是由一系列的顶点和三角面构成的.其中顶点具有两个重要的属性：
位置坐标决定了顶点在三维空间中的位置；而纹理坐标决定了三维空间中的点与二维的纹理图的映射关系，也就是决定了纹理图是怎么映射到模型上的，如下图：
Geometry只是决定了几何体的空间位置和结构，而几何体最终呈现在屏幕上的状态是还需要加上另外一个重要的材质Material共同决定，材质的设置会影响几何体在光照下的效果，比如透明程度，反光程度等等。材质除了通过参数设置外，也可以导入外部的Texture纹理文件来设置，通常纹理文件会分成颜色纹理、法向纹理等等。Geometry和Material组成了Mesh网格模型，再由多个Mesh组成完整的模型。最后再加上背景环境、光照等元素一起组成为场景Scene，场景在相机Camera的拍摄下最终呈现在用户的屏幕上。
通过刚才分析，面料替换功能实现其实比较简单，因为纹理映射关系是存在模型的Geometry中的，所以如果模型是已经建模好了的就不需要手动去设置映射关系，只需要替换纹理图片就可以实现面料替换，并且Three.js提供的函数可以实现对纹理进行一些变换，比如重复、旋转等。
添加图案功能相对来说复杂一些，因为图案根据鼠标位置来添加的，所以首先需要建立屏幕上的鼠标位置和模型三维坐标对应关系；Three.js中提供了光线投射THREE.Raycaster的方法来捕捉我们鼠标选择的模型的点和面。获得了鼠标选中的模型的点面，还需要把图案添加到模型上去，如果这里采用原生实现，需要自己写计算相交算法取相交面，会比较麻烦；好在Three.js封装了这个过程，提供了一个叫THREE.DecalGeometry（贴花几何体）的类，只需要传入相交的面、相交的位置、贴花的大小和方向就能创建贴合在模型上的图案。