Load 2D Renders

Load 2D avatars into your Unity Scene.

In this guide, you learn how to load 2D renders of an avatar into your Unity Scenes. This can be useful for using the Avatars as profile pictures.

You can load a 2D render of your avatar using the AvatarRenderLoader class which obtains a rendered image of your avatar via the Render API.

1. Create an instance of AvatarRenderLoader.

2. Call the LoadRender() method, passing the required arguments.

The Multiple Render Example

You can import the Multiple Render Example by going to the Package Manager, Ready Player Me SDK Core -> Samples -> Multiple Render Example and then click the import button.

You can then find the Sample in Assets/Samples/Ready Player Me Avatar Loader/[VERSION_NUMBER]/AvatarRender/MultipleAvatarRenderExample folder.

Check out the code, by opening the Render Panel Script in your IDE.

MultipleAvatarRenderExample Scene

Loading a Render with the RenderSettings and displaying it on a sprite.

public class RenderPanel : MonoBehaviour
{
    [SerializeField] private string url = "https://models.readyplayer.me/632d65e99b4c6a4352a9b8db.glb";
    [SerializeField] private AvatarRenderSettings renderSettings;
    [SerializeField] private Image image;
    
    private void Start()
    {
        var avatarRenderLoader = new AvatarRenderLoader();
        avatarRenderLoader.OnCompleted = SetImage;
        avatarRenderLoader.LoadRender(url, renderSettings);
    }

    private void SetImage(Texture2D texture)
    {
        var sprite = Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), new Vector2(.5f, .5f));
        image.sprite = sprite;
        image.preserveAspect = true;
    }
}

 public class AvatarRenderSettings
{
    public Expression Expression = Expression.None;
    public RenderPose Pose = RenderPose.Relaxed;
    public RenderCamera Camera = RenderCamera.Portrait;
    public int Quality = 100;
    public int Size = 800;
    public Color Background = Color.white;
    public bool IsTransparent;
    public List<BlendShape> BlendShapes;
 
 ...
 }