Mesh Avatar Studio 是一个基于 TypeScript/WebGL 的本地 2D 网格头像制作与直播工具。它可以把一张正面半身插画转换成可眨眼、说话、转头、呼吸、头发摆动的 2D mesh avatar。项目的核心流程依赖 Claude Code 或 Codex 等 coding agent 自动从图片生成工程、切图分层和初始 rig，开发者再通过本地可视化编辑器微调网格点、轮廓、眼睛和嘴型，并可通过摄像头/麦克风驱动头像用于 OBS 直播。
适用领域
2D 动画 / 虚拟形象 / Avatar / VTuber / 虚拟主播 / WebGL 图形渲染 / Mesh deformation 网格变形 / AI 辅助内容制作 / 本地创作工具 / 直播工具链
配置难度
中等。仅运行示例比较简单，具备 Node.js/npm 基础即可；但要制作高质量自定义头像，需要理解 agent 工作流、2D 分层、rig 控制点、嘴型/眼型变体、OBS 配置和一定的前端调试能力。
商业价值
商业价值较高，尤其适合虚拟主播、AI 伴侣、数字人直播、互动内容创作和低成本头像生成工具方向。它把原本需要专业 Live2D 绑定师的部分流程转化为 AI agent + 本地编辑器的半自动流程，可降低制作成本并缩短交付时间。对于国内开发者，可作为二次开发基础，扩展中文创作者工作流、接入国产大模型、增加模板市场、头像 SaaS、直播插件或企业数字人定制服务。
01
技术亮点
- 把单张插画转换成可动 2D mesh avatar，降低传统 Live2D 类制作门槛。
- Agent-first 工作流清晰：让 Claude Code 或 Codex 完成坐标识别、分层、rig 初稿和固定姿势检查。
- 本地编辑器支持实时预览，拖动控制点即可看到头像变化。
- 支持眨眼、说话、头部转动、呼吸、头发摆动等基础虚拟头像动效。
- 支持摄像头人脸追踪和麦克风口型同步，适合直播场景。
- OBS 集成方便，可生成透明背景或绿幕背景的 Browser Source URL。
- 隐私友好：摄像头视频和麦克风音频留在本机，只把数值化的头像运动参数发送到 stream view。
- MIT 许可证，代码可自由使用、修改和二次开发。
- 文档较完整，包含 agent guide、reference、rig fields 等资料。
- 适合研究 AI agent 与创作工具结合的工作流。
02
目标用户
- 希望制作 2D 虚拟形象的独立开发者
- VTuber、虚拟主播和直播创作者
- 需要低成本头像动效方案的内容团队
- 想用 Claude Code / Codex 自动化美术切图与 rig 的 AI 工具开发者
- 熟悉前端、WebGL 或 TypeScript 的创意编码开发者
- 希望在 OBS 中使用自定义 2D 头像的主播
03
配置要求
- Node.js 版本要求：22.17+。
- 需要本地运行 npm run dev，编辑器和直播视图都依赖本地开发服务器。
- 推荐输入图片为正面、头肩半身、PNG 格式、透明背景，效果最好。
- 自定义头像生成流程需要 Claude Code 或 Codex 这类 coding agent。
- README 推荐模型：Claude Code 使用 Claude Opus 5.5，Codex 使用 GPT-6.1 Sol。
- 如果需要自动生成闭眼、元音嘴型等绘制变体，Codex 可使用内置图像生成；Claude Code 不能直接生成图片，只能准备 mask 和 prompt。
- 直播功能需要浏览器摄像头权限；麦克风口型同步需要麦克风权限。
- OBS 使用时需要添加 Browser Source，并粘贴项目生成的 OBS URL，建议尺寸示例为 1080×1080。
- Windows 下建议手动在当前用户账号下创建 projects/ 目录，避免 agent 或沙箱创建目录后导致权限问题。
- 项目包含 MediaPipe Face Landmarker 模型用于本地人脸追踪。
04
适用场景
- 从单张透明背景插画生成可动 2D 头像
- 为 VTuber 直播制作轻量级本地虚拟形象
- 用摄像头进行脸部追踪，驱动眨眼、头部转动、表情变化
- 用麦克风或预设嘴型实现口型同步
- 在本地编辑器中调整眼睛、嘴巴、头发、手部等部件的网格控制点
- 生成 OBS Browser Source URL，用于透明背景或绿幕直播
- 结合 Codex 图像生成能力补充闭眼图、元音嘴型等绘制变体
- 作为 AI agent 辅助数字人制作流程的参考项目
05
部署与配置
- 安装 Node.js 22.17 或更高版本。
- 使用 git clone 下载仓库，Windows 用户优先避免直接使用 ZIP；如果使用 ZIP，需要在文件属性中选择 Unblock 后再解压。
- 进入项目目录。
- 执行 npm install 安装依赖。
- 执行 npm run dev 启动本地开发服务器。
- 打开终端输出的本地地址，例如 http://127.0.0.1:5173/。
- 首次可直接打开内置示例 Miko 进行体验；修改示例时需要选择 Copy and keep editing 创建自己的副本。
- 若要创建自定义头像，在仓库目录中打开 Claude Code 或 Codex，并输入类似：Create an avatar from this image following docs/agent-guide.md: /path/to/your-image.png。
- 生成的头像项目会保存到 projects/<name>/，然后在编辑器中通过 Open project 打开并微调。
06
风险与注意事项
- 项目强依赖 coding agent 的能力，头像生成质量取决于模型对图像坐标、分层和 rig 的理解能力。
- README 中推荐的模型名称可能较前沿或环境依赖较强，国内开发者实际可用性需要确认。
- 单张图自动生成复杂 2D 动画天然存在质量上限，复杂发型、手部遮挡、非正面姿势可能效果不稳定。
- 与成熟 Live2D 制作流程相比，可控性、物理效果、专业级绑定能力可能有限。
- 需要 Node.js 22.17+，对旧环境不友好。
- Windows 权限问题需要特别注意，尤其是 projects/ 目录由 agent 或沙箱创建时。
- 示例角色 Miko 不属于 MIT 许可证，不能作为独立素材集合再分发，商业使用前需要阅读其角色使用条款。
- 直播追踪依赖浏览器、摄像头、MediaPipe 和页面前台状态，窗口隐藏时可能出现追踪停止或变慢。
- 如果用于商业直播或产品化，需要额外确认生成素材、输入插画、第三方模型和角色版权。
2026-10-08
第22名
新收录 · github_search
