The Camera 2D Images Changes to Animation in Real Time Via Pose Animator
How many steps does it take to draw animation and let it shoot a close-up of "dunning"?Just put a skeleton on Rick and drag the exported SVG file into the browser, and you are all done. Just like this, if you move towards the camera, Rick moves just like this.This TensorFlow.js project is called Pose Animator.
For example, a lady dance and her illustrations are perfectly integrated.
Implementation details
So, how do the 2D images move? The author introduces that Pose Animator is based on the recognition results of the two TensorFlow.js models of PoseNet and FaceMesh to perform real-time animation on 2D vector graphics and their skeletons. Among them, borrow the idea of skeleton animation in computer graphics and apply it to vector characters. In skeletal animation, a character consists of two parts. One is the skin used to draw the model, and the other is the key to control the movement of the skeleton. In Pose Animator, the skin is defined by the 2D vector path in the input SVG file. In addition, Pose Animator provides a preset representation of bone hierarchies based on PostNet and FaceMesh.
The initial pose of the skeleton structure is specified by the user in the input SVG file. After that, the real-time bone position is updated according to the recognition result of the machine learning model. Currently, the author has launched two web demos. A picture that can be captured in real-time according to your lens, let 2D images move.
![]() |
| For static images |
So, if you are interested, you can play your animation in the two browsers that are Chrome and iOS Safari on the computer. In addition, Chrome on Android phone testing is also available.
Go to this link to perform your animation pose https://pose-animator-demo.firebaseapp.com/camera.html



Comments
Post a Comment
Please let me if you have any question