Skip to content

Renderer API#

After the user creates their Avatar you can use the Renderer API to generate a user avatar icon and a pack of avatar animations

Making HTTP requests#

HTTP Request URL#

The Renderer API URL is:

https://render.genies.com

Getting the animations list#

To get a list of animations available for a user's Avatar call GET https://render.genies.com/animation/{{avatarId}}

The {{avatarId}} is provided when getting the Avatar Info

Every animation has a name, url and rendering status

The lastModified property represents the timestamp when the animation was generated. If the user updated their Avatar and the animation is stale, you should request a re-render to get the animation with the latest user Avatar.

Example

curl --location --request GET 'https://render.genies.com/animation/3f8b634d-fcf6-4a24-a552-cdfda98893f5'

Response 

[
    {
        "name": "80AerobicPoint-002",
        "url": "https://genies-dev.s3-us-west-2.amazonaws.com/3f8b634d-fcf6-4a24-a552-cdfda98893f5/80AerobicPoint-002.mp4",
        "status": "ready",
        "lastModified": 1611282457,
        "tags": [
            "animation"
        ]
    },
    {
        "name": "Anger-003",
        "url": "https://genies-dev.s3-us-west-2.amazonaws.com/3f8b634d-fcf6-4a24-a552-cdfda98893f5/Anger-003.mp4",
        "status": "ready",
        "lastModified": 1611282457,
        "tags": [
            "animation"
        ]
    }
]

Getting a picture#

You can generate a picture as PNG from a keyframe of any animation by calling GET https://qvvri16pqd.execute-api.us-west-2.amazonaws.com/image/{{avatarId}}/{{animationName}}

The {{avatarId}} is provided when getting the Avatar Info. The {{animationName}} is found in the animations list

Example 

curl --location --request GET 'https://qvvri16pqd.execute-api.us-west-2.amazonaws.com/image/050ec53c-a12a-445a-9611-ff5fc3ab78f8/Laughing-004'

Response

The response is the generated photo as image/png. The PNG has transparency and the resolution is 1000x1000. If you need to use a different resolution please contact the Genies Team.

Getting an animation#

You can get the MP4 for an animation by calling GET https://qvvri16pqd.execute-api.us-west-2.amazonaws.com/animation/{{avatarId}}/{{animationName}}

Example 

curl --location --request GET 'https://qvvri16pqd.execute-api.us-west-2.amazonaws.com/animation/050ec53c-a12a-445a-9611-ff5fc3ab78f8/DiscoDance-003'

Response

The response is the generated animation as video/mp4

Using Avatar Animations#

The animations generated by the Avatar SDK are supplied in a video/mp4 format with background transparency support.

The video files contain two video streams: the first containing the main YCbCr content, the second containing Y content representing the alpha mask.

To process the video files for your use case we recommend using FFMPEG.

Transcoding to WebM#

With the video in two streams, use the “alphamerge” filter element to recombine into a single stream when transcoding into formats that support alpha:

ffmpeg -i Combined.mp4 -filter_complex "[0:0][0:1] alphamerge" -pix_fmt yuva420p -an combined.webm

Transcoding to GIF#

  1. Generate palette

    ffmpeg -i Combined.mp4 -filter_complex "[0:v] palettegen" palette.png

  2. Generate GIF 

    ffmpeg -i Combined.mp4 -i palette.png -filter_complex "[0:0][0:1] alphamerge [merged]; [merged][1:v] paletteuse" Combined.gif

Transcoding to PNG#

To create a looping 24-bit animated PNG: 

ffmpeg -i Combined.mp4 -filter_complex "[0:0][0:1] alphamerge" -f apng -plays 0 transcoded.png

To convert the video into a set of PNG frames with alpha:

ffmpeg -i Combined.mp4 -filter_complex "[0:0][0:1] alphamerge" frames_with_alpha%04d.png