Support for ReadyPlayerMe Avatars

Hi everyone!

I am trying to replace the default XR avatar to the Ready Player Me one in real time.

The Ready Player Me SDK returns to me a URL where I can download the GLB, but I don’t know how replace it by the XR default avatar, or even instantiate it on the scene as Game Object.

I know that I can download the GLB using JavaScript fetch in a custom component, but I have no idea what to do next.

Please help!

Original Post on Discord

by user 918470773134483507

I don’t have an answer but I’m interested in this topic

by user 401167615826984963

do you know what format the default avatar is in? Is it an RPM avatar?

by user 401167615826984963

So we havent tested this yet but theoretically you should be able to leave the default avatar empty, grab a webxr component reference from one of your scripts and create an AssetReference from the ReadyPlayerMe avatar url using the static method AssetReference.GetOrCreate and assign it to the WebXR component. Not sure if it works out of the box right now tho but would be great to get it working :slightly_smiling_face:

In general the easiest way to instantiate from a glb/gltf url is to create an AssetReference (using the static method mentioned above) and then call e g. instantiate (or just preload the bytes). That will internally handle caching and of potential extensions in the glb for you

I can try this! Do you have any documentation about the AssetReference class?

by user 918470773134483507

Yes in the docs, you can use the search there!

I wrote some code that worked!

await AssetReference.getOrCreate(“”, “https://models.readyplayer.me/63a9ab390c111d89f95c1fa9.glb”, this.context).instantiate();

But I got an error: Recursive instantiation of https://models.readyplayer.me/63a9ab390c111d89f95c1fa9.glb

Should I be worried about it?

by user 918470773134483507

I wrote a component that worked:

import { AssetReference, Behaviour, WebXR } from “@needle-tools/engine”

export class Teste extends Behaviour {

async start() {

const webXr = this.gameObject.getComponent(WebXR);

const readyPlayerMeGlb = AssetReference.getOrCreate("", "https://models.readyplayer.me/63a9ab390c111d89f95c1fa9.glb", this.context);

(webXr as WebXR).defaultAvatar = readyPlayerMeGlb;

console.log(webXr)

}

}

But the result was a little creepy :joy:

Is it possible to make it work well?

by user 918470773134483507

Hm, the model itself looks alright when downloaded separately. Looks like one bone is moved to a wrong place after instantiation maybe - if you don’t assign it as default Avatar in your code, does the model look alright?

Its probably just because the naming scheme doesn’t match yet. We can take a look at it after the holidays

Changed the channel name: Support for ReadyPlayerMe Avatars

with the Needle sample Third-Person Control, you can easily learn what components you should attach to the avatar and the animation settings in Animator component :blobaww:
The avatar was made through Ready Player Me, and the animations were prepared through Mixamo. The avatar I use in the scene is the GLB downloaded from Ready Player me.

by user 917448042540576788

Looking good! Thanks for sharing. We’ll get it to work in VR as well :slightly_smiling_face:

Hey where is the code for this?
I couldn’t find it in the repo GitHub - needle-tools/needle-engine-samples: Live: https://engine.needle.tools/samples 🌵 Needle Engine sample scenes - use as examples and as a reference for learning 😊

by user 796279605396373504