js获取计算机名_Rigging.js: 让 3D 角色动起来的 react.js 开源应用

90cd7a4ac2d3271c4b6fa4d6914a6c17.gif

本文源于?TFCommunitySpotlight 获胜者:Henry Ruiz ? 及他的获胜项目:Rigging.js。

02018bf06ac47cec7696bf25d865a791.png

Rigging.js 是一个开源的 react.js 应用,它获取由 TensorFlow.js 模型生成的面部网格关键点,然后将人物在镜头前所做的动作映射到 3D 模型中。从 https://www.mixamo.com/ 下载的任何模型均可以使用。

构建与运行

git clone https://github.com/haruiz/RiggingJs.git
cd RiggingJs
npm install
npm start

尝试使用不同的模型

如上所述,从 https://www.mixamo.com/ 下载的任何模型均可以使用。这些模型是免费的。

项目路线图

此项目尚有许多工作去完成,如果您感兴趣,欢迎加入我们:
  • 3D 角色的自动装配和动画:使用最新的 (SOTA) 深度学习模型
  • 使用 Facemesh 模型产生 3D 表情动画
  • 录制动画

想要了解更多,您可以查看详细的项目路线图 。

  • 路线图
    https://github.com/haruiz/RiggingJs/projects/1

参与方式

您可随意向此仓库 (https://github.com/haruiz/RiggingJs) 发送 PR。

项目所用的第三方库

  • React.jshttps://reactjs.org/

  • Mathjshttps://mathjs.org/

  • Three.jshttps://threejs.org/

  • TensorFlow.jshttps://js.tensorflow.org/api/latest/

灵感来源

1ed05975d6a3392e0d2218056040594b.png

Pose Animator 2:Pose Animator 可对 2D 矢量图进行实时动画化。该实时动画基于 PoseNet 和 FaceMesh 的识别结果。它从计算机图形学中借鉴了基于骨骼的动画的思想,并将其应用于矢量角色。

  • Pose Animator 2https://github.com/yemount/pose-animator

8e28ffb8df2bc86247b71be220f74095.png

PoseNet 模型:此 js 包包含有一个称为 PoseNet 的独立模型,以及一些模型演示。在浏览器中使用 TensorFlow.js 运行此模型可获得实时姿势估计。

  • PoseNet 模型https://github.com/tensorflow/tfjs-models/tree/master/posenet

33225f161f2ec621e83f3ba665bfa139.png

BodyPix:此 js 包包含一个名为 BodyPix 的独立模型,以及一些演示。在浏览器中使用 TensorFlow.js 运行此模型可获得实时的人和身体部位分割。

  • BodyPixhttps://github.com/tensorflow/tfjs-models/tree/master/body-pix

730b5a096e4e557b0f9261165719ee52.png

MediaPipe Facemesh:MediaPipe Facemesh 是一个轻量级的机器学习流水线,可预测 486 个 3D 人脸关键点,以推断出人脸表面的近似几何形状 (https://arxiv.org/pdf/1907.06724.pdf)。

  • MediaPipe Facemeshhttps://github.com/tensorflow/tfjs-models/tree/master/facemesh

— 推荐阅读 —

aa7c88aa7c318c12a595042681ece7f1.png

92a958a9acf6361042ddae7ce73e152e.png

7590c3b2480a58ecfaa028d177ba3127.png

了解更多请点击 “

59b690aaa614b0eda8904af47216b43a.png
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值