谷歌小姐姐开源姿势动画师项目,只需一张SVG图片便可配置 |
您所在的位置:网站首页 › svg动画原理 › 谷歌小姐姐开源姿势动画师项目,只需一张SVG图片便可配置 |
梅宁航 发自 凹非寺 量子位 报道 | 公众号 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,居住于上海,现任职于谷歌。 简介为程序员和艺术家,也是很有意思了。 工程师、艺术家,有创造力的技术工程师,多重身份当得起。 因为她的代码,证明了工程师的资格。 下面是她的艺术作品。
文理交融,游刃有余,献上膝盖。 一起来观摩小姐姐的硬核作品吧 自己动手试试看~ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |