打开摄像头,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
本文作者:鱼羊
本文来自:“ 量子位”,了解相关信息可以关注“ 量子位

相关文章
|
9月前
|
JavaScript 定位技术 API
百度离线地图API v3.0开发解决方案
百度离线地图API v3.0开发解决方案
459 0
|
JSON 数据格式
如何将自制的live2d模型上传至facerig创意工坊使得别人可以下载
如何将自制的live2d模型上传至facerig创意工坊使得别人可以下载
491 0
仿网易官网顶部展出的大幅广告代码,附效果演示
仿网易官网顶部展出的大幅广告代码,附效果演示
|
4月前
|
人工智能 Linux C#
八宫格丨九宫格丨淘金镇丨潮玩元宇宙大逃杀游戏系统开发指南步骤及稳定版
uSurvival - the new Multiplayer Survival Asset from the creator of uMMORPG.
|
8月前
|
Web App开发
Python+selenium 实现趣头条的短视频自动上传与发布实例演示(支持抖音、快手、b站、小红书等平台)
Python+selenium 实现趣头条的短视频自动上传与发布实例演示(支持抖音、快手、b站、小红书等平台)
293 0
|
9月前
|
移动开发 前端开发 JavaScript
参考虎牙斗鱼开发娱乐游戏直播系统示例源码
在当今数字化互联网时代,娱乐游戏直播平台成为了全球范围内备受欢迎的娱乐形式。东莞梦幻网络科技有限公司以其开发的游戏直播系统源码而备受瞩目,该系统仿虎牙斗鱼等知名平台。本文将深入探讨该项目的开发和基础功能模块,以及提供的多种开播方式。
|
11月前
|
存储 小程序 JavaScript
借助云开发实现小程序朋友圈的发布与展示
借助云开发实现小程序朋友圈的发布与展示
|
11月前
|
机器学习/深度学习 人工智能 编解码
中科大团队新作 | 通用形变文档图像矫正框架(附在线体验DEMO)
中科大团队新作 | 通用形变文档图像矫正框架(附在线体验DEMO)
634 0
|
存储 编解码 人工智能
自媒体影视后期数字助理--视频调色中间件设计
阿里云提供的线上AI能力在处理视觉信息方面已经有较为成熟和通用的产品,对于开始兴建媒体资源管理平台的自媒体来说,采用阿里云的AI能力、函数计算以及OSS等产品进行平台搭建可以快速实现建设与能力扩充。本文为调色中间件的开发思路、技术架构设计和开发实战中参数的设置介绍,对一些数字影像的基础概念和阿里云人工智能视觉生产的API细节进行了分析。
344 1
自媒体影视后期数字助理--视频调色中间件设计
|
边缘计算 人工智能 运维
阿里云AIoT这款爆品打几分?第三方媒体给出了一份评测报告
如今已经是云计算的时代,各种功能和应用都在向云上迁移。不过云端的算力虽然很强大,但是受限于网络带宽等因素,在云端协同的模式下有时效果不够好,因此近年来很多厂商也提出了边缘计算的概念,意在解放云端协同的局限性,将应用程序放在边缘侧,产生更快的网络服务响应。
203 0
阿里云AIoT这款爆品打几分?第三方媒体给出了一份评测报告