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

梅宁航发自凹非寺
量子位报道 | 公众号 QbitAI
姿势动画师，自己做动作就可以生成矢量角色动画。
打开摄像头，你的姿态随之摇摆，一道道线、一个个点，刻画你的面部轮廓和完美身材。

本文插图
△效果图1
是不是很有趣？！
当然这个有点恐怖，把多余的配置都去掉看看效果。

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

本文插图
△参数配置项
2、摇摆起来，男女皆可哟~

本文插图
△动作捕捉实时生成
3、站起来效果更佳，站起来可以捕捉身体动作。

本文插图
△身体动作姿态识别
有没有很神奇的感觉。
作者在GitHub上发布短短一个多月，已经4.8k星。

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

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

本文插图
3、通过控制skeleton文件中的参数，来移动关节的具体变化。分页标题
4、此时，完成制作自己的矢量姿势图，将其上传到示例网站，借用网站服务器算力制作自定义的姿势动画师。
作者简介
作者Shan Huang ，毕业于CMU ，居住于上海，现任职于谷歌。
简介为程序员和艺术家，也是很有意思了。
工程师、艺术家，有创造力的技术工程师，多重身份当得起。
因为她的代码，证明了工程师的资格。
下面是她的艺术作品。

本文插图
文理交融，游刃有余，献上膝盖。
一起来观摩小姐姐的硬核作品吧
【谷歌|谷歌小姐姐开源姿势动画师项目，只需一张SVG图片便可配置】自己动手试试看~