2D 动画制作的第一步不是直接补间，也不是马上画骨骼，而是先把角色拆成可以独立移动、独立修正、独立导出的资产层。一个人物图片如果仍然是单张像素图，后续无论用关键帧、骨骼还是表情替换，都会很难控制局部运动。
因此我在实用功能页加入了一个浏览器端工具：动画资产生成器。它把输入的人物或动漫角色图片转成 SVG、分层 PNG 和资产清单。处理过程只在浏览器里发生，不上传文件，也不占用服务器存储。
一、为什么先做分割与分层
动画资产的核心目标是把“整张角色图”改造成“可操作的结构”。常见图层包括头发、脸、眼睛、衣服、手臂、腿、阴影和高光。分层之后，动画系统才能对每一层设置锚点、旋转中心、遮罩关系和关键帧。
如果用数学方式描述，原图可以看成像素函数：
I(x, y) = [R, G, B, A]分割的目标是给每个像素分配一个图层标签：
L(x, y) in {0, 1, 2, ..., K - 1}理想情况下，同一块头发或衣服应该落在同一个标签里，相邻但语义不同的区域应该分开。这个标签图就是后续 SVG 矢量化、PNG 图层导出和动画绑定的基础。
二、浏览器工具采用的本地管线
网站上的第一版工具不调用云端 AI，也不加载大型模型。它使用的是轻量浏览器管线：
- 用 Canvas 在本地解码图片。
- 进行边缘保留上采样，尽量保留动漫赛璐璐硬边。
- 用 RGB 颜色聚类近似分割角色区域。
- 把小碎块合并到空间相邻且颜色最接近的区域，避免独立白点。
- 为每个图层生成透明 PNG。
- 提取闭合轮廓并加入少量接缝重叠，再写成 SVG path。
- 导出
manifest.json，记录尺寸、颜色、图层面积和分块数量。
这不是 SAM 的替代品，而是一个不消耗服务器算力的快速草稿工具。它适合干净角色图、透明背景、硬边线稿和赛璐璐上色。对于复杂背景、半透明发丝、渐变阴影或真实照片，离线 SAM 管线更可靠。
三、生产级离线管线：ComfyUI + Grounded-SAM + vtracer
如果要获得更接近生产资产的结果，推荐在本机跑离线脚本，而不是把图片上传到服务器。基础脚本是 sam_vtracer_pipeline.py；更完整的生产脚本是 comfyui_grounded_sam_vtracer_pipeline.py。
生产级流程可以拆成三层：
多角度角色参考图
-> ComfyUI: IP-Adapter 锁定角色特征
-> ComfyUI: ControlNet OpenPose 强制拆件排版
-> Grounded-SAM: 用文本 prompt 抠出语义部件
-> vtracer: 透明 PNG 部件转 SVG
-> Python: 注入稳定 id，合并为 character-rig-layered.svg3.1 角色特征锁定：IP-Adapter
IP-Adapter 的作用不是简单“参考风格”，而是把正脸、侧脸、服饰细节和局部特写编码成图像条件。对于动画资产，它解决的是角色一致性问题：发色、瞳孔、耳朵形状、刀疤、饰品和服装轮廓应该在每张生成图里保持同一套视觉身份。
离线模板 comfyui_exploded_character_workflow.template.json 使用占位符，让脚本把参考图上传到本机 ComfyUI 后替换为 __REFERENCE_IMAGE_1__。实际节点名会因 ComfyUI 插件版本不同而变化，所以模板是可编辑的 API 工作流，而不是服务器端固定服务。
3.2 姿态剥离：OpenPose Exploded View
传统立绘经常有手臂压住胸口、头发盖住肩膀、武器挡住腿的问题。这样的图即使画得漂亮，也不适合作为可绑定资产。拆件排版的目标是让头、躯干、左臂、右臂、腿、尾巴和饰品互不遮挡。
我放了一个 拆件 OpenPose 骨架参考图。你可以把它导出成 PNG，然后喂给 ControlNet OpenPose。这样 ComfyUI 生成的不是“完整站姿角色”，而是一张纯色背景上的“散装角色部件板”。
3.3 语义级抠图：Grounding DINO + SAM
坐标裁剪不可靠，因为生成图里的部件大小和位置会随 seed 变化。Grounded-SAM 更适合自动化：Grounding DINO 先根据文本找框，例如 left arm、wolf head、headband；SAM 再把框内真实轮廓变成 alpha mask。
下载的 part_prompts.example.json 给出了默认部件清单。脚本会为每个部件输出透明 PNG，并在 manifest 中记录文本 prompt、检测分数和边界框。
3.4 SVG 装配：稳定 ID 与骨骼资产库
vtracer 负责把每个透明 PNG 部件转成干净 SVG path。最后 Python 会把这些路径合并进一个 SVG，并给每个组写入稳定 ID：
<g id="left-arm">...</g>
<g id="right-arm">...</g>
<g id="wolf-head">...</g>这一步非常关键。没有稳定 ID，后续动画软件或网页运行时就无法可靠地找到左臂、右臂、头部和饰品；有了稳定 ID，才可以继续写锚点、父子层级、骨骼绑定和关键帧。
四、超分辨率为什么放在矢量化前
很多动漫图像在缩放后会出现锯齿、断线和颜色混合。矢量化算法看到这些噪声后，会生成大量短路径，导致 SVG 变大、边缘变脏。
所以超分辨率或边缘保留上采样应该放在矢量化之前。目标不是凭空生成细节，而是让轮廓更稳定，让同色区域更连贯。浏览器工具采用轻量的硬边上采样和锐化；离线工作流可以替换成本机 anime upscaler，例如 Real-ESRGAN 动漫模型或其他本地超分工具。
五、资产包应该怎样复核
生成资产后，不要只看 SVG 是否好看。更重要的是检查它是否适合动画：
- 头发、脸、衣服和手臂是否被拆成可操作层。
- SVG 是否过大，是否包含过多碎片。
- 图层 PNG 是否保留透明背景。
- manifest 中的面积和分块数量是否合理。
- 后续绑定时是否能找到旋转锚点。
如果图层过碎，可以提高细节阈值或减少目标图层数。如果角色结构混在一起，可以先用离线 SAM 分割，再用 vtracer 单独矢量化每个 mask。关节处仍有白点时，应继续检查共享边界、透明像素 RGB 和蒙皮权重，而不是只增加描边。
「好看」不是验收标准，可动性才是
上一节的检查清单偏定性。实际用下来，判断一套资产能不能用，最有效的是三个可以直接算出来的量——它们都不看图好不好看，只看它能不能动。
第一，关节处有没有被切断。这是最致命的问题，而且最容易被漏掉。矢量化会沿颜色边界切分，而肘、肩、膝这些地方两个部件颜色往往是连续的（同一件衣袖），于是切出来的边界可能落在关节的任意位置——甚至把上臂和前臂切成了一整块。
检验方法是把每个部件的包围盒和预期的骨骼位置对照：每根骨骼的两个端点应该分别落在相邻两个部件里。如果某根骨骼的两端落在同一个部件里，说明这个关节根本没被分开，后面无论怎么绑都动不了。
反过来，如果两个相邻部件在关节处完全没有重叠，旋转之后一定会露缝。重叠面积应当大于零而小于较小部件面积的约 15%——太小会露缝，太大说明切分位置偏了，旋转时会看到明显的双层边缘。
第二，路径复杂度是否失控。矢量化的输出质量不能只看视觉，因为噪声产生的碎路径在缩略图上看不出来，却会让运行时性能和后续编辑都变得困难。
有用的量是每个部件的节点数除以它的轮廓周长。干净的赛璐璐轮廓大约是每 20 到 40 像素一个节点；如果降到每 3 到 5 像素一个节点，说明矢量化在追踪抗锯齿产生的噪声，应该回到上游提高平滑或降低细节阈值，而不是在 SVG 上做简化——后者会同时抹掉真实的轮廓特征。
density = node_count / path_length_px
# 正常 0.025 ~ 0.05 噪声 > 0.2第三，图层数量的分布是否合理。不是总数，是分布。健康的分层里，最大的几个部件（躯干、头发、衣服）应该占掉总面积的大部分，剩下是少量小部件。如果面积分布很平均，通常意味着聚类把一个语义部件切成了很多块。一个简单的判据是最大的三个图层应当覆盖 60% 以上的非透明面积；达不到就该减少目标图层数重跑。
为什么这些检查要在绑定之前做
上面三项都可以在生成 manifest 的时候顺便算出来，成本几乎为零。值得强调的是它们必须在绑定之前跑。
原因是这类缺陷在绑定阶段的表现是误导性的。关节没切开，表现出来是「这根骨骼转了但图没动」——第一反应会去查绑定关系、查锚点、查权重，查一圈都是对的，因为问题在更上游。路径碎裂表现为编辑器卡顿或导出文件异常大，同样不会让人想到矢量化参数。
更根本的是返工成本的不对称：资产有问题，重跑一次管线是几分钟；等到绑定、画权重、做完关键帧之后才发现，前面所有工作都要重做。越靠上游的缺陷，越要在上游拦下来——这条在任何多阶段管线里都成立，但在资产管线里格外明显，因为下游的人工投入远大于上游的机器时间。
顺带一提，这三个数应该写进 manifest.json 一起导出，而不是只在生成时打印一次。资产会被复制、被修改、被别人接手，把验收数据和资产放在一起，后面的人才有办法判断手上这份东西的状态。
六、这篇文章在 2D 动画专栏中的位置
这篇是 2D 动画原理专栏的第一步：资产生成。后续可以继续写锚点、父子层级、骨骼绑定、关键帧、缓动曲线、补间、遮罩和镜头运动。只有先把角色拆成干净资产，后面的动画原理才有落地对象。
直接使用入口：动画资产生成器。它适合在浏览器里快速验证一个角色图是否能拆层；真正要做作品时，再把离线脚本、人工修图和动画软件结合起来。下一步进入2D 动画原理系列，继续建立骨骼、IK、蒙皮和关键帧。