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

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

云栖号资讯:【点击查看更多行业资讯
在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来!

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

1

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

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

1

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

image
image

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

1

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

她欢快地评论道:

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

image

实现细节

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

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

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

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

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

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

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

image

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

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

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

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

1

另一个则针对静态图像。

image

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

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

1

中国程序媛出品

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

image

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

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

image

传送门

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

【云栖号在线课堂】每天都有产品技术专家分享!
课程地址:https://yqh.aliyun.com/live

立即加入社群,与专家面对面,及时了解课程最新动态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK

原文发布时间:2020-05-11
本文作者:鱼羊
本文来自:“ 量子位”,了解相关信息可以关注“ 量子位

相关文章
|
域名解析 小程序 Linux
朋友圈超火的盲盒交友小程序,完整搭建教程及源码分享~(多图)
朋友圈超火的盲盒交友小程序,完整搭建教程及源码分享~(多图)
朋友圈超火的盲盒交友小程序,完整搭建教程及源码分享~(多图)
|
存储 JSON 安全
【C++ 泛型编程 综合篇】泛型编程深度解析:C++中的五种类型泛型策略综合对比
【C++ 泛型编程 综合篇】泛型编程深度解析:C++中的五种类型泛型策略综合对比
460 1
|
运维 开发工具 C#
总结两种使用OpenCv连接海康相机播放视频画面方法
总结两种使用OpenCv连接海康相机播放视频画面方法
2725 0
|
自然语言处理 JavaScript 前端开发
javaScript-06 表单验证 详细易懂,加案例分析
javaScript-06 表单验证 详细易懂,加案例分析
286 0
|
设计模式 前端开发 JavaScript
图解23种设计模式(TypeScript版)——前端切图崽必修内功心法
图解23种设计模式(TypeScript版)——前端切图崽必修内功心法
图解23种设计模式(TypeScript版)——前端切图崽必修内功心法
|
存储 网络协议 关系型数据库
微服务架构 | 3.2 Alibaba Nacos 注册中心
Nacos 致力于解决微服务中的统一配置、服务注册与发现等问题。它提供了一组简单易用的特性集,帮助开发者快速实现动态服务发现、服务配置、服务元数据及流量管理;
1240 0
微服务架构 | 3.2 Alibaba Nacos 注册中心
|
数据采集 运维 Prometheus
|
数据格式
将icdar2015数据集转换成paddleOCR标注数据格式
将icdar2015数据集转换成paddleOCR标注数据格式
将icdar2015数据集转换成paddleOCR标注数据格式
|
存储 机器学习/深度学习 人工智能
阿里云GPU云服务器gn6v、gn6i、vgn6i-vws、gn6e购买和选择教程
本文介绍了阿里云gup云服务器是什么?gn6v、gn6i、vgn6i-vws、gn6e实例的最新价格和实例特点、适用场景、实例规格的指标数据。仅供大家了解和选择阿里云gup云服务器时参考。
2259 0
阿里云GPU云服务器gn6v、gn6i、vgn6i-vws、gn6e购买和选择教程