![](https://cdn.jiqizhixin.com/assets/code-modal__close-c158a550a9982aa92801c046548d72945aa912de6f2a012513132fdc02dfc379.png)
Auto Byte
专注未来出行及智能汽车科技
![](https://cdn.jiqizhixin.com/assets/auto-byte__qr-code-89b58c6d2398c12b7def0f2538cac5ff08727062918f9bad97f25b1d61aac000.png)
微信扫一扫获取更多资讯
![](https://cdn.jiqizhixin.com/assets/code-modal__close-c158a550a9982aa92801c046548d72945aa912de6f2a012513132fdc02dfc379.png)
Science AI
关注人工智能与其他前沿技术、基础学科的交叉研究与融合发展
![](https://cdn.jiqizhixin.com/assets/science-ai__qr-code-a12e4635c8d3968645bd2b6371981b65b0d21058c5a2c216aef80015b4eb7e43.png)
微信扫一扫获取更多资讯
1.9K star量,解救无聊网友,小姐姐的「动画师」项目可一键生成个人角色
最近,一个名为「Pose Animator」的项目人气暴增,打开以后,我们发现这又是一个能让人自娱自乐,并且丝毫察觉不到时间流逝的神奇工具。![](https://image.jiqizhixin.com/uploads/editor/62ff686f-73bd-4332-a409-7a6cc5314b4c/640.gif)
短短三天内,这个项目就在 GitHub 上获得了 1.9k 的 Star 量,在推特上也获得了 3.4k 的点赞。![](https://image.jiqizhixin.com/uploads/editor/602ea42d-8686-47ed-a345-021ca631d644/640.png)
除了这个偏分刘海的红衣少女,你还可以选择把自己变成小浣熊或者猫头鹰:![](https://image.jiqizhixin.com/uploads/editor/8205d72c-b1fd-4901-85a3-d26bc0d653ad/640.gif)
![](https://image.jiqizhixin.com/uploads/editor/02b6d8d8-7512-4907-92c8-a42adeaaaaad/640.gif)
当然,性别也是可以选择的,在这一栏选择「boy」就能切换到精神小伙了。![](https://image.jiqizhixin.com/uploads/editor/3f14f45b-5ad8-4fa1-9cc3-baaf4ebdffd6/640.png)
或许是在家无聊,一些网友也开始了疯狂的演示(如何换装本文第二部分有介绍):![](https://image.jiqizhixin.com/uploads/editor/7538914b-8188-4c32-a947-74e52db11c62/640.gif)
有人说,不如把这个与 v2loopback 结合一下,用在 Zoom 里,想必那些冗长的会议也没有那么难熬了……![](https://image.jiqizhixin.com/uploads/editor/382e1ee8-ffbf-4e96-b736-7b7d35887955/640.png)
项目作者是一位叫做 Shan Huang 的小姐姐,她毕业于 CMU,现在是谷歌的 Creative Technologist。![](https://image.jiqizhixin.com/uploads/editor/c34e3dfb-fc74-474e-9a02-de4b05e7a937/640.png)
简单来说 Pose Animator 会使用拍摄的 2D 矢量图,并基于 PoseNet 和 FaceMesh 的识别结果,实时对结果及包含的曲线进行动画处理。Pose Animator 从计算机图形学中借鉴了「基于骨骼」的动画思想,并将其应用于矢量字符。![](https://image.jiqizhixin.com/uploads/editor/11f8db14-e50a-407b-926b-f2eeda6da93a/640.gif)
![](https://image.jiqizhixin.com/uploads/editor/499e5a8f-1b85-4bf7-b885-e40b9c3e0388/640.gif)
在 Pose Animator 中,曲面是由 SVG 文件中的 2D 矢量路径所定义。对于「骨骼」结构而言,Pose Animator 提供了预设定的骨骼层次表示形式,该表现形式同时也是基于 PoseNet 和 FaceMesh 的关键点而进行设计的。在输入的 SVG 文件中以及字符插图中指定了此骨骼结构的初始姿势,同时通过 ML 模型的识别结果来更新实时骨骼位置。感兴趣的读者可以通过以下两个一静一动的 Demo 进行体验:yarn
yarn watch
值得一提的是,Chrome 以及 IOS Safari 都支持上述 Demos,Android 上的 Chrome 虽然还未测试过,但项目开发者表示应该也同样支持。所需工作并不复杂,下列新人教程可以说是非常友好,短短几步即可完成。首先,你需要下载示例骨架 SVG 工具,同时需要在矢量图形编辑器中创建一个新文件,并将上述下载中名为「骨架」(skeleton)复制进你所创建的文件中。![](https://image.jiqizhixin.com/uploads/editor/cdf3be49-078c-4fd8-a9fb-082306fac087/640.png)
不建议在此文件组上有添加、移除或是重命名等修改,PoseAnimator 会依赖这些原始命名路径从而读取「skeleton」的初始位置,修改会很容易导致报错。接下来,在「skeleton」文件组旁创建新的文件组,并将其命名为「illustration」,可以在此文件组中放置任一插图的完整路径。展开所有子文件组,确认「illustration」中仅包含路径元素,但目前并不支持复合路径。其文件结构图应该如下图所示:通过移动节点将「skeleton」组中的示例「skeleton」嵌入至「illustration」中,进而导出 SVG 文件。之后打开 Pose Animator 相机 Demo(上述 Demo 链接),将 SVG 文件拖放至浏览器选项中就能顺利实现。详情可参照 GitHub 项目地址。