打开摄像头,2D插画实时变动画,中国程序媛出品,Demo在线可玩

新闻 人工智能
这个TensorFlow.js项目名叫Pose Animator,Demo一上线,网友们已经玩嗨了。

 本文经AI新媒体量子位(公众号ID:QbitAI)授权转载,转载请联系出处。

画一只狸(jian)克(shang),并让它拍摄一个「催款」的特写,需要几步?

只需要给狸克安上骨架,再把导出的SVG文件拖进浏览器里,就齐活儿了。

就像这样,你对着镜头怎么动,狸克就怎么动:

这个TensorFlow.js项目名叫Pose Animator,Demo一上线,网友们已经玩嗨了。

比如Julia Jaskólska这位设计师小姐姐,就让自己的舞蹈跟自己的插画作品完美融合了起来:

既锻炼了身体,又开发了新的创作可能性。

她欢快地评论道:

万万没想到,让我的插画动起来竟然这么简单!

实现细节

所以,插画是如何动起来的呢?

作者介绍,Pose Animator是基于PoseNet和FaceMesh这两个TensorFlow.js模型的识别结果,来对2D矢量图及其骨架进行实时动画处理的。

其中,借鉴了计算机图形学中骨骼动画的思想,并将其应用于矢量字符。

在骨骼动画中,一个角色由两部分组成。

其一是用于绘制模型的蒙皮,其二是控制动作的关键——骨架。

在Pose Animator中,蒙皮由输入SVG文件中的2D矢量路径定义。

并且,Pose Animator提供了基于PoseNet和FaceMesh设计的、预设好的骨骼层次结构表示。

骨架结构的初始姿势由用户在输入的SVG文件中指定。

而其后实时的骨骼位置,则根据机器学习模型的识别结果进行更新。

目前,作者已经推出两个网页Demo。

一个能根据你镜头实时捕捉到的画面,让2D图像动起来。

另一个则针对静态图像。

所以,如果你感兴趣,就可以在电脑端的Chrome和iOS Safari这两个浏览器里玩起来啦。

另外,在安卓手机上的Chrome上,量子位亲测可用。

中国程序媛出品

Pose Animator的作者,是谷歌创意技术专家Shan Huang。

[[325571]]

Shan Huang本科毕业于卡内基梅隆大学,专业是计算机科学,辅修人机交互。2014年加入谷歌(上海)。

当年火爆全网的猜画小歌项目,就是她发起的项目。

传送门

GitHub项目:https://github.com/yemount/pose-animator

镜头捕捉版Demo:https://pose-animator-demo.firebaseapp.com/camera.html

图片版Demo:https://pose-animator-demo.firebaseapp.com/static_image.html

 

责任编辑:张燕妮 来源: 量子位
相关推荐

2012-06-23 20:13:44

HTML5

2021-06-08 09:50:30

计算机互联网 技术

2021-03-11 10:21:55

特斯拉黑客网络攻击

2011-09-06 14:56:08

CubeMaster魔方IOS游戏

2013-03-21 09:56:09

2017-06-20 11:45:52

2021-07-20 06:46:14

USB摄像头Windows Hel生物识别

2011-04-25 09:16:10

Windows 8

2023-05-03 09:01:41

CanvasWebGL

2013-01-30 16:15:40

adobeHTML5css3

2012-11-07 09:43:58

IBMdw

2016-10-24 10:06:32

2009-08-21 17:24:18

C#控制摄像头

2009-06-17 11:52:01

Linux

2023-09-26 14:21:33

模型开源Qwen-14B

2011-09-08 13:53:20

Linux摄像头

2024-09-30 09:52:39

2017-06-19 14:36:37

2024-01-11 12:01:13

Python编程语言OpenCV

2011-09-13 15:51:11

PhoneGap AP
点赞
收藏

51CTO技术栈公众号