江苏龙网

  1. 首页 > 资讯 > 科技 > >

谷歌|谷歌小姐姐开源姿势动画师项目，只需一张SVG图片便可配置


梅宁航 发自 凹非寺
量子位 报道 | 公众号 QbitAI
姿势动画师 ， 自己做动作就可以生成矢量角色动画 。
打开摄像头 ， 你的姿态随之摇摆 ， 一道道线、一个个点 ， 刻画你的面部轮廓和完美身材 。
谷歌|谷歌小姐姐开源姿势动画师项目，只需一张SVG图片便可配置
本文插图

△效果图1
是不是很有趣？！
当然这个有点恐怖 ， 把多余的配置都去掉看看效果 。
谷歌|谷歌小姐姐开源姿势动画师项目，只需一张SVG图片便可配置
本文插图

△效果图2
姿势动画师项目 ， 虽然不是TensorFlow.js官方产品 ， 但效果依旧够slay 。
并且可直接嵌入网页 ， 一键配置开发 ， 简洁优雅 ， 值得上手 。
操作步骤
作者提供了两种方式去制作姿势动画 ， 一种是打开摄像头实时生成 ， 还有一种是上传静态图像 。
以摄像头制作为例 ， 步骤如下：
1、打开网址（见文末链接） ， 随后打开摄像头 ， 动作捕捉 ， 进行参数配置 。
谷歌|谷歌小姐姐开源姿势动画师项目，只需一张SVG图片便可配置
本文插图

△参数配置项
2、摇摆起来 ， 男女皆可哟~
谷歌|谷歌小姐姐开源姿势动画师项目，只需一张SVG图片便可配置
本文插图

△动作捕捉实时生成
3、站起来效果更佳 ， 站起来可以捕捉身体动作 。
谷歌|谷歌小姐姐开源姿势动画师项目，只需一张SVG图片便可配置
本文插图

△身体动作姿态识别
有没有很神奇的感觉 。
作者在GitHub上发布短短一个多月 ， 已经4.8k星 。
谷歌|谷歌小姐姐开源姿势动画师项目，只需一张SVG图片便可配置
本文插图

并且上手简易 ， 所以大神是怎么实现的？
技术原理
姿势动画师项目 ， 作者主要使用TensorFlow.js制作 。
作者主要使用两个模型 ， 由PoseNet和FaceMesh组合而来 ， 前者负责姿态识别 ， 后者负责人脸3D建模 。
1、 FaceMesh面部建模
FaceMesh可以识别486个人脸标记点 ， 从而拟合出人脸的几何形状 ， 用于识别人脸实时姿态 。
2、PoseNet识别身体姿势
PoseNet可以用来估计一个身体姿态 ， 也可以用来估计多个身体姿态 。
这意味着算法可以检测到一个图像/视频中的一个人 ， 另外一个版本可以检测到多个人的身体姿态 。
在这个项目中 ， 作者使用PoseNet来拟合人的身体姿态 。
动手试试
还是以摄像头实时生成为例 ， 静态图流程大同小异
克隆项目GitHub文件夹至本地 ， 打开项目中的skeleton文件 。
并对其进行编辑 ， 控制骨架移动参数 。
你可以自行控制参数变化 ， 编辑完成后存入工作文件夹中 。
但是请注意 。 不要在这个组中添加、删除或重命名circle部分 ，。
谷歌|谷歌小姐姐开源姿势动画师项目，只需一张SVG图片便可配置
本文插图

△依靠这些此部分来读取控制身体姿态的初始位置
但是你可以进行移动操作 ， 并将它们嵌入到你的插图中 ， 以制作不同的效果 。
2、创建一个新文件 ， 并将其命名为 “illustration” ， 在 “skeleton”文件的旁边 。
拉平所有子文件 ， 使 “illustration”文件只包含路径元素 。
如果完成上述步骤 ， 你的文件结构应该是这样的 。
谷歌|谷歌小姐姐开源姿势动画师项目，只需一张SVG图片便可配置
本文插图

3、通过控制skeleton文件中的参数 ， 来移动关节的具体变化 。


推荐阅读


上一篇：科学|是棉花糖行星，还是系外类木行星，一起探索吧

下一篇：可乐滴可乐|一篇赚300+汽车测评详细操作流程