Web3D虚拟人捏脸

1. 淘宝人生里的虚拟人像渲染技术

1. 换装：动态加载道具模型的思路解决，并做了隐藏与显示的优化。
2. 美颜：动态合并贴图，充分利用了管线灵活性的能力。
3. 捏脸技术实现：骨骼蒙皮和顶点变形
   a. 骨骼蒙皮：
   ⅰ. 设置好哪些顶点会受到“关节”（也称为“骨骼”）的影响，从而让“关节”带动对应的顶点运动（施加某种“变换”：位移，旋转，缩放三种影响的一组数学公式，从而获得新位置），这个技术我们称为“蒙皮”。
   ⅱ. 优点：简单高效，便于理解和控制。
   ⅲ. 缺点：不够灵活，骨骼只能表达位移、旋转、缩放的一种或组合，无法进行逐顶点变化操作。例如，让嘴角上扬，就需要每个顶点有不同程度的变化。
   b. 顶点变形：
   ⅰ. 也就是直接修改顶点。一般来说我们会给顶点准备一个基准位置，再提供一个“极端变化”后的最大位置，那么乘以一定的权重比例，就能让这个顶点在基准位置和极端位置中的任一位置。这种技术称为“Morph Target”或“Blend Shape”，都是指顶点变形的意思。
   ⅱ. 优点：弥补“骨骼蒙皮”方法的不足，能更容易做出灵活，活泼的顶点动画。
   ⅲ. 缺点：不便控制，很吃资源，成本高，对实时计算压力不小。
   在实际开发中，哪些用骨骼，哪些用顶点变形，这是一个权衡“效果”和“效率”的工作，需要具体去看，反复拿捏。这些调整与上游的美术制作成果结合的非常紧密，需要程序员与艺术家一起去看。

2. 想做Web 3D捏脸？看了这篇文章你就会！

1. 通过修改骨骼点来进行捏脸，美术同学会在3DS Max设置骨骼点并标注对应的名称。当这些模型文件通过Three.js加载动网页中，这些骨骼点会通过对象的形式返回，通过traverse方法遍历模型的所有对象元素，并筛选类型为骨骼，可以找出所有的骨骼对象，通过对position,rotation,scale等这些属性的修改，就可以调节面部细节了。
2. 面部元素的皮肤合成：
   a. 根据用户所选加载不同形状的部件图片，如“眉毛样式.png”,“胡须样式.png”等
   b. 根据用户所选颜色，利用Canvas对部件图片进行像素着色。
   c. 将所有部件通过Canvas拼合到一起并附加到3D模型上。

3. 楚留香的捏脸系统如何实现的？

几个方向：

1. 基于骨骼：骨骼蒙皮
2. 基于Mesh差值：顶点变形
3. 基于材质：在网格不修改的情况下，都可以通过材质中的贴图或者参数更改来改变肤色、瞳孔颜色、唇色、纹身图案等等。
4. 新的Mesh：对于程序来说最为简单，对美术来说工作量最大的部分，用于发型、时装、多余的饰品挂件等等。
   二：参考工具和源码
5. Kalidokit
   Kalidokit 是用于 Mediapipe/Tensorflow.js 面部、眼睛、姿势和手部跟踪模型的 blendshape 和运动学求解器，与Facemesh、Blazepose、Handpose和Holistic兼容。它采用预测的 3D 地标并计算简单的欧拉旋转和 blendshape 面值。专为装配 3D VRM 模型和 Live2D 头像而设计。
6. *VRoid Studio*（VRM 3D 角色创作软件）
   用来制作vrm格式的3D模型。
7. three-vrm
   一个用于读取人形 3D 模型格式“VRM”并将其显示在浏览器上的库。该库可用于促进 Web 上 3DCG 应用程序开发的库“Three.js”。这使开发人员可以更轻松地在 Web 上显示 3D 化身并控制姿势和面部表情。
8. https://github.com/suchipi/arkit-face-blendshapes
9. Headshot插件（3D头部生成器）
10. 网易伏羲-有灵虚拟人