Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh. It borrows the idea of skeleton-based animation from computer graphics and applies it to vector characters.
This is not an officially supported Google product.
In skeletal animation a character is represented in two parts:
In Pose Animator, the surface is defined by the 2D vector paths in the input SVG files. For the bone structure, Pose Animator provides a predefined rig (bone hierarchy) representation, designed based on the keypoints from PoseNet and FaceMesh. This bone structure’s initial pose is specified in the input SVG file, along with the character illustration, while the real time bone positions are updated by the recognition result from ML models.
// TODO: Add blog post link. For more details on its technical design please check out this blog post.
The camera demo animates a 2D avatar in real-time from a webcam video stream.
The static image demo shows the avatar positioned from a single image.
Install dependencies and prepare the build directory:
To watch files for changes, and launch a dev server:
Demos are supported on Desktop Chrome and iOS Safari.
It should also run on Chrome on Android and potentially more Android mobile browsers though support has not been tested yet.
[Layer 1] |---- skeleton |---- illustration |---- path 1 |---- path 2 |---- path 3