3D avatars

​

Requirements

• Format: glTF binary (.glb). Meshopt-compressed models are supported.
• Required: the 15 Oculus viseme morph targets: viseme_sil, viseme_PP, viseme_FF, viseme_TH, viseme_DD, viseme_kk, viseme_CH, viseme_SS, viseme_nn, viseme_RR, viseme_aa, viseme_E, viseme_I, viseme_O, viseme_U. This is the standard Oculus/Meta lip-sync set that many avatar pipelines can export. Without them the mouth won’t move, and a console warning says so.
• Optional: the ARKit morphs jawOpen, mouthFunnel, mouthPucker, mouthRollLower, mouthClose, mouthPressLeft and mouthPressRight give rounder and firmer lips. eyeBlinkLeft, eyeBlinkRight and browInnerUp drive blinks and brows.
• Hosting: the avatar’s server must allow cross-origin requests (CORS) from your site, or serve it from your own origin.

​

How it’s shown

• The mouth, blinks and brows are animated. Nothing else moves.
• The camera frames the face in close-up (head and neck, no arms or hands) with soft portrait lighting.
• The canvas is transparent, so style the container’s background as you like, for example with a blurred office photo.
• The container needs a width and height; the canvas follows its size.

​

Other morph names

new TalkingAvatar({
  container,
  avatarUrl: "https://example.com/my-avatar.glb",
  morphTargets: {
    viseme_PP: ["LipsClosed"],
    viseme_aa: "MouthOpenWide",
    eyeBlinkLeft: "Blink_L",
    eyeBlinkRight: "Blink_R",
  },
});

​

Change the avatar

await avatar.setAvatar("https://example.com/another-avatar.glb");
// with its own morph names:
await avatar.setAvatar(url, { viseme_aa: "MouthOpenWide" });