gltf-avatar-threejs 加载器、查看器、导出器

基于 glTF 的动态头像系统，支持：

• 可切换的皮肤（衣服、头发、配饰）共享骨架
• 像素颗粒度皮肤可见性控制
  • ThreeJS 实时渲染
  • 烘焙到合并的 glTF/glb
• 皮肤文件中的子骨架和动画（头发骨架、面部表情绑定）
• 节点刚性绑定
• 合并并输出为有效的标准 glTF（无需扩展支持加载器）
  • 节点
  • 浏览器导出 glb
• TODO：头发、衣服物理（MMD？

• 具有共享骨架或刚性绑定的皮肤组合

• 皮肤的可见性控制，在实时渲染器或烘焙中

带能见度控制	没有能见度控制

• 子骨架和动画INS皮肤（头发）文件

• mixamo 动画

• 合并并导出为 GLB，能够加载到 Facebook、SketchFab、Godot 等…

• 骨架文件中的 glTF 头像特征示例

{
    "extensionsUsed": [
        "gl_avatar"
    ],
    "extensions": {
        "gl_avatar": {
            "type": "skeleton",
            "skins": {
                "main": 2
            },
            "nodes": {
                "head": 8,
                "head-end": 9
            }
        }
    },
    "materials": [
        {
            "name": "saber-pure-body",
            "...": "...",
            "extensions": {
                "gl_avatar": {
                    "bodyIdLUT": 2
                }
            }
        },
        "..."
    ],
    "nodes": [
        {
            "mesh": 0,
            "name": "F010_Saber_Body",
            "skin": 0,
            "extensions": {
                "gl_avatar": {
                    "skin": 2
                }
            }
        },
        "..."
    ],
    "...": "..."
}

• extensions.gl_avatar
  • type: or . Theoretically file can contain no mesh but only joints. However usually glTF exporters will ignore joints not used by any skinned mesh. So does the threejs glTF loader. So the literal skin of a character is ususally included in a file. We currently recommend standard 65 joints from mixamo as the general skeleton for the character.skeletonskinskeletonskeleton
  • skin: a dictionary mapping skeleton name to skin id. Other clothes files will use skeleton name to reference a joint list of the skeleton file.
  • nodes: a dictionary mapping node name to node id. Similiar to the skin map. This can be used by sub-skeleton or rigid bind, that needs to attach to certain node as a child.
• materials[i].extensions.gl_avatar.bodyIdLUT : bodyIdLUT is the texture id of a body id look up table texture. This texture is now a normal png file. Of which the red channel value indicates the body id.
• node[i].extensions.gl_avatar.skin : this is used for threejs gltf loader to pick up this skin, if this skin is not used by this skeleton file

• An example of glTF avatar features in a skin file

{
    "extensionsUsed": [
        "gl_avatar"
    ],
    "extensions": {
        "gl_avatar": {
            "visibility": [
                0, 
                1, 1, 1, 0, 0, 
                0, 0, 1, 1, 1, 
                1, 1, 1, 1, 1,
                1, 1, 1, 1, 1,
                1, 1, 1, 0, 0,
                0, 0, 0, 0, 0,
                0, 0, 0, 1, 1,
                0, 0, 1, 1, 1,
                0, 0, 0, 0, 0,
                0, 0, 0, 0, 0,
                0, 0, 0, 0, 0,
                0, 0, 0, 0
            ],
            "type": "skin",
            "linkedSkeletons": [
                {
                    "inverseBindMatrices": 174,
                    "name": "Saber_maid_dress",
                    "skeleton": "main"
                }
            ]
        }
    },
    "meshes": [
        {
            "name": "F010_Saber.003",
            "primitives": [
                {
                    "...": "...",
                    "extensions": {
                        "gl_avatar": {
                            "attributes": {
                                "JOINTS_0": 159,
                                "WEIGHTS_0": 173
                            }
                        }
                    }
                }
            ]
        }
    ],
    "nodes": [
        {
            "name": "Saber_maid_dress",
            "...": "...",
            "extensions": {
                "gl_avatar": {
                    "skin": 0
                }
            }
        },
        {
            "name": "Hair_bone",
            "...": "...",
            "extensions": {
                "gl_avatar": {
                    "root": "head-end"
                }
            }
        }
    ],
    "...": "..."
}

• extensions.gl_avatar
  • type：或。skeletonskin
  • visibility：这是这件衣服的可见状态的数组。 表示对于此正文 ID 不可见。对于实时渲染器，此可见性数组将通过纹理或统一缓冲区发送到 gpu。主角骨架的着色器将丢弃其 .对于烘焙的 glTF 文件，此数组会影响主要角色骨架的输出纹理。那些片段将具有零 alpha 通道。当设置为 和 a 设置为 0.5 时，角色皮肤上的这些碎片将不可见。0visibility[bodyId] == 0visibility[bodyId] == 0alphaModeMASKalphaCutoff
  • linkedSkin：对应文件中的共享皮肤。skeleton
• meshes[i].primitives[i].extensions.gl_avatar.attributes：在此处存储和 skinnedmesh。JOINTWEIGHT
• nodes[i].extensions.gl_avatar.skin：指 中的皮肤 ID 。extensions.gl_avatar.linkedSkin
• nodes[i].extensions.gl_avatar.root：刚性绑定/子骨架

感谢@zen85推动我完成这部分（这应该一开始就完成，但我太懒了…… -_-）。

我们使用的 GLTF 出口商：https://github.com/Kupoman/blendergltf（主）

• 首先，您应该在 Blender 中以 T 形姿势安装一个基础骨架。在添加任何动画之前，为此保存一个单独的文件（我们稍后会调用它）。你将使用此文件来绑定其他皮肤（衣服、头发、鞋子等）base.blend
  • 我们这样做是因为如果您在带有动画的混合器文件中绑定您的衣服 （）。你的服装文件将包含动画数据，这不是我们想要的。（不过 https://blender.stackexchange.com/questions/36129/can-not-delete-actions-in-action-editor-even-with-shift-x/38718，您仍然可以通过删除动画及其孤立数据来摆脱动画）。似乎在 blender 文件中导出带有其他绑定网格的基础骨架对于我正在使用的 gltf 导出器插件会有问题。skin
• 要控制蒙皮可见性，你需要有一个名为 身体ID贴图（body id map） 的额外纹理，它在R通道（0-255）中为骨架网格体的每个部分标记一个ID号。您可以通过在 Blender 中进行纹理绘画来生成此内容，或在 Photoshop、GIMP 等中导出 uv 快照和绘画。
• 要添加动画和导出，您可以按照精彩的教程进行@donmccurdy：https://www.donmccurdy.com/2017/11/06/creating-animated-gltf-characters-with-mixamo-and-blender/
• 此时，您应该有一个导出的带有动画的 glTF 基本骨架。它将与纹理图像一起位于一个文件夹中（我们将称之为 ）。.binskeleton.gltf
• 跑（这个工具很蹩脚，此刻需要手工制作…… 不好意思。 将来考虑使用 https://github.com/Microsoft/glTF-SDK）node tools/glavatar-pipeline.js path/to/skeleton.gltf --skeleton -o path/to/skeleton-avatar.gltf
  • 替换为（保存原件的副本）skeleton.gltfskeleton-avatar.gltf
  • TODO：手工能见度信息

• 把你的衣服装在 .base.blend
• 导出为 gltf（我们称之为 ）。clothing.gltf
• 跑node tools/glavatar-pipeline.js path/to/clothing.gltf --skin -o path/to/clothing-avatar.gltf
  • 替换为（保存原件的副本）clothing.gltfclothing-avatar.gltf
• 手工（对不起）：
  • 将下面的复制到 ，内部数组。{...}extensions.gl_avatar.linkedSkeletonsskeleton-avatar.gltfskins
    • 这是因为 blender 和导出器只写入 cur 网格权重非零的关节。因此，即使你只有一组骨骼，骨架也可能不同。
    • 节点 ID 也可能不同。通常它只是每个节点 id 的偏移量joints
    • 强烈推荐 Microsoft 的 VScode gltf 调试插件
      • 
  • TODO